/* FACT BLOCK CSS (HEIGHT + WIDTH LOCK) */
.fact-block {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Homepage Event Form Card: Bright mode white background and visible outlines */
html:not(.dark) .bg-slate-900.rounded-2xl.p-8,
html:not(.dark) .bg-slate-900.rounded-2xl.p-8.md\:p-10 {
  background: #fff !important;
  border-radius: 1.5rem;
  box-shadow: 0 4px 32px 0 rgba(15,23,42,0.07);
  border: 1.5px solid #e2e8f0;
}
html:not(.dark) .bg-slate-900.rounded-2xl.p-8 > .absolute,
html:not(.dark) .bg-slate-900.rounded-2xl.p-8.md\:p-10 > .absolute {
  opacity: 0.08 !important;
}
html:not(.dark) #submit-form input,
html:not(.dark) #submit-form textarea,
html:not(.dark) #submit-form select {
  background: #fff !important;
  color: #18181a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
}
html:not(.dark) #submit-form input:focus,
html:not(.dark) #submit-form textarea:focus,
html:not(.dark) #submit-form select:focus {
  border-color: #2563eb !important;
  outline: none !important;
  box-shadow: 0 0 0 2px #60a5fa33;
}
html:not(.dark) #submit-form ::placeholder {
  color: #64748b !important;
  opacity: 1;
}

/*
Theme Name: SEO Conf Hub
Theme URI: https://example.com/seo-conf-hub
Author: Adrian
Author URI: https://example.com
Description: Custom front-page theme inspired by the SEO Conf Hub React prototype.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seo-conf-hub
*/

:root {
  --primary-50: #f5ebff;
  --primary-100: #e8d5ff;
  --primary-200: #d0b2ff;
  --primary-300: #b887ff;
  --primary-400: #a78bfa;
  --primary-500: #8b5cf6;
  --primary-600: #7c3aed;
  --accent-400: #34d399;
  --accent-500: #10b981;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Theme tokens (default: dark) */
  --seo-conf-bg: var(--slate-950);
  --seo-conf-fg: #e2e8f0;
  --seo-conf-fg-strong: #ffffff;
  --seo-conf-muted: #94a3b8;
  --seo-conf-border: rgba(148, 163, 184, 0.18);
  --seo-conf-surface: rgba(15, 23, 42, 0.8);
  --seo-conf-surface-2: rgba(15, 23, 42, 0.6);
  --seo-conf-input-bg: rgba(15, 23, 42, 0.5);
  --seo-conf-input-border: rgba(148, 163, 184, 0.22);
}

html:not(.dark) {
  /* Light mode tokens */
  --seo-conf-bg: white;
  --seo-conf-fg: var(--slate-900);
  --seo-conf-fg-strong: var(--slate-900);
  /* Avoid color-mix() here for broader browser compatibility. */
  --seo-conf-muted: rgba(15, 23, 42, 0.7);
  --seo-conf-border: rgba(15, 23, 42, 0.14);
  --seo-conf-surface: rgba(15, 23, 42, 0.03);
  --seo-conf-surface-2: rgba(15, 23, 42, 0.02);
  --seo-conf-input-bg: rgba(15, 23, 42, 0.03);
  --seo-conf-input-border: rgba(15, 23, 42, 0.14);
}

/*
  Submit Conference (Light version): lighten the dark-mode look on this page only.
  This is scoped to the wrapper class used by the dedicated block template:
  templates/page-submit-conference-light.html
*/
html.dark .seo-conf-submit-page-light,
html[data-theme="dark"] .seo-conf-submit-page-light {
  --seo-conf-submit-bg: #0b1220;
  --seo-conf-submit-card: rgba(17, 24, 39, 0.72);
  --seo-conf-submit-surface: rgba(30, 41, 59, 0.55);
  --seo-conf-submit-input: rgba(30, 41, 59, 0.42);
  --seo-conf-submit-border: rgba(226, 232, 240, 0.16);
  --seo-conf-submit-muted: rgba(226, 232, 240, 0.78);
  --seo-conf-submit-muted-2: rgba(226, 232, 240, 0.62);
}

html.dark .seo-conf-submit-page-light.bg-slate-950,
html.dark .seo-conf-submit-page-light .bg-slate-950,
html[data-theme="dark"] .seo-conf-submit-page-light.bg-slate-950,
html[data-theme="dark"] .seo-conf-submit-page-light .bg-slate-950 {
  background-color: var(--seo-conf-submit-bg) !important;
}

html.dark .seo-conf-submit-page-light .bg-slate-900,
html[data-theme="dark"] .seo-conf-submit-page-light .bg-slate-900 {
  background-color: var(--seo-conf-submit-card) !important;
}

html.dark .seo-conf-submit-page-light .bg-slate-900\/95,
html.dark .seo-conf-submit-page-light .bg-slate-900\/80,
html.dark .seo-conf-submit-page-light .bg-slate-900\/60,
html.dark .seo-conf-submit-page-light .bg-slate-900\/50,
html.dark .seo-conf-submit-page-light .bg-slate-900\/30,
html[data-theme="dark"] .seo-conf-submit-page-light .bg-slate-900\/95,
html[data-theme="dark"] .seo-conf-submit-page.light.bg-slate-900\/80,
html[data-theme="dark"] .seo-conf-submit-page.light.bg-slate-900\/60,
html[data-theme="dark"] .seo-conf-submit-page.light.bg-slate-900\/50,
html[data-theme="dark"] .seo-conf-submit-page.light.bg-slate-900\/30 {
  background-color: var(--seo-conf-submit-surface) !important;
}

html.dark .seo-conf-submit-page-light .bg-slate-800\/50,
html.dark .seo-conf-submit-page-light .bg-slate-950\/80,
html.dark .seo-conf-submit-page-light .bg-slate-950\/60,
html.dark .seo-conf-submit-page-light .bg-slate-950\/50,
html[data-theme="dark"] .seo-conf-submit-page-light .bg-slate-800\/50,
html[data-theme="dark"] .seo-conf-submit-page-light .bg-slate-950\/80,
html[data-theme="dark"] .seo-conf-submit-page.light.bg-slate-950 {
  background-color: var(--seo-conf-submit-input) !important;
}

html.dark .seo-conf-submit-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700),
html[data-theme="dark"] .seo-conf-submit-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700) {
  border-color: var(--seo-conf-submit-border) !important;
}

html.dark .seo-conf-submit-page-light :is(.text-slate-400, .text-slate-500),
html[data-theme="dark"] .seo-conf-submit-page-light :is(.text-slate-400, .text-slate-500) {
  color: var(--seo-conf-submit-muted) !important;
}

/* Bright version: force white background for submit conference form/card */
html:not(.dark) .seo-conf-submit-page-light.bg-slate-950,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-950,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-900,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-900\/95,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-900\/80,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-900\/60,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-900\/50,
html:not(.dark) .seo-conf-submit-page-light .bg-slate-900\/30 {
  background-color: #fff !important;
}

html.dark .seo-conf-submit-page-light .placeholder-slate-600::placeholder,
html[data-theme="dark"] .seo-conf-submit-page-light .placeholder-slate-600::placeholder {
  color: var(--seo-conf-submit-muted-2) !important;
}

/*
  Contact page: make the dark theme a bit lighter (same vibe as submit-conference-light).
  Scoped to templates/page-contact.html via .seo-conf-contact-page-light.
*/
html.dark .seo-conf-contact-page-light,
html[data-theme="dark"] .seo-conf-contact-page-light {
  --seo-conf-contact-bg: #0b1220;
  --seo-conf-contact-card: rgba(17, 24, 39, 0.72);
  --seo-conf-contact-surface: rgba(30, 41, 59, 0.55);
  --seo-conf-contact-input: rgba(30, 41, 59, 0.42);
  --seo-conf-contact-border: rgba(226, 232, 240, 0.16);
  --seo-conf-contact-muted: rgba(226, 232, 240, 0.78);
  --seo-conf-contact-muted-2: rgba(226, 232, 240, 0.62);
}

html.dark .seo-conf-contact-page-light.bg-slate-950,
html.dark .seo-conf-contact-page-light .bg-slate-950,
html[data-theme="dark"] .seo-conf-contact-page.light.bg-slate-950 {
  background-color: var(--seo-conf-contact-bg) !important;
}

html.dark .seo-conf-contact-page-light .bg-slate-900,
html[data-theme="dark"] .seo-conf-contact-page-light .bg-slate-900 {
  background-color: var(--seo-conf-contact-card) !important;
}

html.dark .seo-conf-contact-page-light .bg-slate-900\/95,
html.dark .seo-conf-contact-page-light .bg-slate-900\/80,
html.dark .seo-conf-contact-page.light.bg-slate-900\/60,
html.dark .seo-conf-contact-page.light.bg-slate-900\/50,
html.dark .seo-conf-contact-page.light.bg-slate-900\/30,
html[data-theme="dark"] .seo-conf-contact-page-light .bg-slate-900\/95,
html[data-theme="dark"] .seo-conf-contact-page.light.bg-slate-900\/80,
html[data-theme="dark"] .seo-conf-contact-page.light.bg-slate-900\/60,
html[data-theme="dark"] .seo-conf-contact-page.light.bg-slate-900\/50,
html[data-theme="dark"] .seo-conf-contact-page.light.bg-slate-900\/30 {
  background-color: var(--seo-conf-contact-surface) !important;
}

html.dark .seo-conf-contact-page-light .bg-slate-950\/80,
html.dark .seo-conf-contact-page-light .bg-slate-950\/60,
html.dark .seo-conf-contact-page-light .bg-slate-950\/50,
html[data-theme="dark"] .seo-conf-contact-page.light.bg-slate-950 {
  background-color: var(--seo-conf-contact-input) !important;
}

html.dark .seo-conf-contact-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700),
html[data-theme="dark"] .seo-conf-contact-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700) {
  border-color: var(--seo-conf-contact-border) !important;
}

html.dark .seo-conf-contact-page-light :is(.text-slate-300, .text-slate-400, .text-slate-500),
html[data-theme="dark"] .seo-conf-contact-page-light :is(.text-slate-300, .text-slate-400, .text-slate-500) {
  color: var(--seo-conf-contact-muted) !important;
}

/*
  Home/Blog (Insights): make the dark theme a bit lighter (same vibe as submit/contact light overrides).
  Scoped to templates/home.html via .seo-conf-home-page-light.
*/
html.dark .seo-conf-home-page-light,
html[data-theme="dark"] .seo-conf-home-page-light {
  --seo-conf-home-bg: #0b1220;
  --seo-conf-home-card: rgba(17, 24, 39, 0.7);
  --seo-conf-home-surface: rgba(30, 41, 59, 0.55);
  --seo-conf-home-input: rgba(30, 41, 59, 0.42);
  --seo-conf-home-border: rgba(226, 232, 240, 0.16);
  --seo-conf-home-muted: rgba(226, 232, 240, 0.82);
  --seo-conf-home-muted-2: rgba(226, 232, 240, 0.66);
}

html.dark .seo-conf-home-page-light.bg-slate-950,
html.dark .seo-conf-home-page-light .bg-slate-950,
html[data-theme="dark"] .seo-conf-home-page.light.bg-slate-950 {
  background-color: var(--seo-conf-home-bg) !important;
}

html.dark .seo-conf-home-page-light .bg-slate-900,
html[data-theme="dark"] .seo-conf-home-page-light .bg-slate-900 {
  background-color: var(--seo-conf-home-card) !important;
}

html.dark .seo-conf-home-page-light .bg-slate-900\/95,
html.dark .seo-conf_home_page.light.bg-slate-900\/80,
html.dark .seo-conf_home_page.light.bg-slate-900\/60,
html.dark .seo-conf_home_page.light.bg-slate-900\/50,
html.dark .seo-conf_home_page.light.bg-slate-900\/30,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-900\/95,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-900\/80,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-900\/60,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-900\/50,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-900\/30 {
  background-color: var(--seo-conf-home-surface) !important;
}

html.dark .seo-conf-home-page-light .bg-slate-950\/80,
html.dark .seo-conf-home-page-light .bg-slate-950\/60,
html.dark .seo-conf-home-page-light .bg-slate-950\/50,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-950\/80,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-950\/60,
html[data-theme="dark"] .seo-conf_home_page.light.bg-slate-950\/50 {
  background-color: var(--seo-conf-home-input) !important;
}

html.dark .seo-conf-home-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700),
html[data-theme="dark"] .seo-conf_home_page.light :is(.border-slate-900, .border-slate-800, .border-slate-700) {
  border-color: var(--seo-conf-home-border) !important;
}

html.dark .seo-conf-home-page-light :is(.text-slate-300, .text-slate-400),
html[data-theme="dark"] .seo-conf-home-page-light :is(.text-slate-300, .text-slate-400) {
  color: var(--seo-conf-home-muted) !important;
}

html.dark .seo-conf-home-page-light .text-slate-500,
html[data-theme="dark"] .seo-conf-home-page-light .text-slate-500 {
  color: var(--seo-conf-home-muted-2) !important;
}

/*
  Single post: make the dark theme noticeably lighter.
  Scoped to templates/single.html via .seo-conf-single-page-light.
*/
html.dark .seo-conf-single-page-light,
html[data-theme="dark"] .seo-conf-single-page-light,
body.dark .seo-conf-single-page-light,
body[data-theme="dark"] .seo-conf-single-page-light,
body.single .seo-conf-single-page-light {
  --seo-conf-single-bg: #0b1220;
  --seo-conf-single-card: rgba(17, 24, 39, 0.82);
  --seo-conf-single-surface: rgba(31, 41, 55, 0.58);
  --seo-conf-single-input: rgba(31, 41, 55, 0.45);
  --seo-conf-single-border: rgba(226, 232, 240, 0.18);
  --seo-conf-single-muted: rgba(226, 232, 240, 0.9);
  --seo-conf-single-muted-2: rgba(226, 232, 240, 0.7);
}

/* Blog-related pages (single posts + blog listing): use #0B1220 as page canvas. */
body.single,

/* Only apply dark background to blog in dark mode */
html.dark body.blog,
html.dark body.blog :where(.wp-site-blocks, #page, main),
html[data-theme="dark"] body.blog,
html[data-theme="dark"] body.blog :where(.wp-site-blocks, #page, main) {
  background-color: #0b1220 !important;
  color: #e2e8f0;
}

body.single .wp-block-cover__background,
body.single .wp-block-cover,
body.blog .wp-block-cover__background,
body.blog .wp-block-cover,
body.archive.category .wp-block-cover__background,
body.archive.category .wp-block-cover {
  background-color: #0b1220 !important;
  opacity: 1 !important;
}

/* Explicit background override to #0B1220 for single posts in dark mode. */
html.dark body.single,
html[data-theme="dark"] body.single,
html.dark body.single .wp-site-blocks,
html[data-theme="dark"] body.single .wp-site-blocks,
html.dark body.single main.seo-conf-single-page-light,
html[data-theme="dark"] body.single main.seo-conf-single-page-light {
  background-color: #0b1220 !important;
}

/* Hard override the global canvas color on single posts in dark mode. */
html.dark :where(body.single, body.single .wp-site-blocks, body.single #page),
html[data-theme="dark"] :where(body.single, body.single .wp-site-blocks, body.single #page) {
  background-color: #0b1220 !important;
}

/* Final override: force single-post canvas to #0B1220 in dark mode. */
html.dark body.single,
html.dark body.single :is(.wp-site-blocks, #page, main),
html.dark body.single .seo-conf-single-page-light,
html[data-theme="dark"] body.single,
html[data-theme="dark"] body.single :is(.wp-site-blocks, #page, main),
html[data-theme="dark"] body.single .seo-conf-single-page-light {
  background-color: #0b1220 !important;
}

/* Ensure the global canvas variable also switches to #0B1220 on single posts in dark mode. */
html.dark body.single,
html[data-theme="dark"] body.single {
  --seo-conf-bg: #0b1220 !important;
  --seo-conf-surface: #111827 !important;
  --seo-conf-surface-2: rgba(17, 24, 39, 0.75) !important;
  --seo-conf-input-bg: rgba(15, 23, 42, 0.65) !important;
}

/* Also for light mode */


/* And for dark mode blog pages */
html.dark body.blog,
html[data-theme="dark"] body.blog {
  --seo-conf-bg: #0b1220 !important;
}

/* Brute-force: single posts dark canvas and hero overlay to #0B1220, regardless of templates/utilities. */
html.dark body.single,
html[data-theme="dark"] body.single,
html.dark body.single :where(.wp-site-blocks, #page, main, .seo-conf-single-page-light),
html[data-theme="dark"] body.single :where(.wp-site-blocks, #page, main, .seo-conf-single-page-light) {
  background-color: #0b1220 !important;
}

html.dark body.single .wp-block-cover__background,
html[data-theme="dark"] body.single .wp-block-cover__background,
html.dark body.single .wp-block-cover,
html[data-theme="dark"] body.single .wp-block-cover {
  background-color: #0b1220 !important;
  opacity: 1 !important;
}

/* Replace the hero cover overlay so it isn't nearly pure black. */
html.dark .seo-conf-single-page-light .wp-block-cover__background,
html[data-theme="dark"] .seo-conf-single-page-light .wp-block-cover__background,
body.dark .seo-conf-single-page-light .wp-block-cover__background,
body[data-theme="dark"] .seo-conf-single-page.light.bg-slate-950 {
  background-color: var(--seo-conf-single-bg) !important;
  opacity: 1 !important;
}

html.dark .seo-conf-single-page-light.bg-slate-950,
html.dark .seo-conf_single_page.light.bg-slate-950,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-950,
body.dark .seo-conf-single-page.light.bg-slate-950,
body[data-theme="dark"] .seo-conf-single-page.light.bg-slate-950 {
  background-color: var(--seo-conf-single-bg) !important;
}

html.dark .seo-conf-single-page-light .bg-slate-900,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-900 {
  background-color: var(--seo-conf-single-card) !important;
}

html.dark .seo-conf_single_page.light.bg-slate-900\/95,
html.dark .seo-conf_single_page.light.bg-slate-900\/80,
html.dark .seo-conf_single_page.light.bg-slate-900\/60,
html.dark .seo-conf_single_page.light.bg-slate-900\/50,
html.dark .seo-conf.single-page-light .bg-slate-900\/30,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-900\/95,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-900\/80,
body[data-theme="dark"] .seo-conf-single-page.light.bg-slate-900\/60,
body[data-theme="dark"] .seo-conf-single-page.light.bg-slate-900\/50,
body[data-theme="dark"] .seo-conf-single-page.light.bg-slate-900\/30 {
  background-color: var(--seo-conf-single-surface) !important;
}

html.dark .seo-conf_single_page.light.bg-slate-950\/80,
html.dark .seo-conf_single_page.light.bg-slate-950\/60,
html.dark .seo-conf_single_page.light.bg-slate-950\/50,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-950\/80,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-950\/60,
html[data-theme="dark"] .seo-conf_single_page.light.bg-slate-950\/50 {
  background-color: var(--seo-conf-single-input) !important;
}

html.dark .seo-conf-single-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700),
html[data-theme="dark"] .seo-conf-single-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700),
body.dark .seo-conf-single-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700),
body[data-theme="dark"] .seo-conf-single-page.light :is(.border-slate-900, .border-slate-800, .border-slate-700),
body.single .seo-conf-single-page-light :is(.border-slate-900, .border-slate-800, .border-slate-700) {
  border-color: var(--seo-conf-single-border) !important;
}

html.dark .seo-conf-single-page-light :is(.text-slate-300, .text-slate-400),
html[data-theme="dark"] .seo-conf-single-page-light :is(.text-slate-300, .text-slate-400),
body.dark .seo-conf-single-page.light :is(.text-slate-300, .text-slate-400),
body[data-theme="dark"] .seo-conf-single-page.light :is(.text-slate-300, .text-slate-400),
body.single .seo-conf-single-page.light :is(.text-slate-300, .text-slate-400) {
  color: var(--seo-conf-single-muted) !important;
}

html.dark .seo-conf-single-page-light .text-slate-500,
html[data-theme="dark"] .seo-conf-single-page-light .text-slate-500,
body.dark .seo-conf-single-page.light .text-slate-500,
body[data-theme="dark"] .seo-conf-single-page.light .text-slate-500,
body.single .seo-conf-single-page.light .text-slate-500 {
  color: var(--seo-conf-single-muted-2) !important;
}

/*
  Single conference (light mode): brighten layout and cards while keeping
  the featured image and overlay from the PHP template intact.
  Scoped to the dedicated single-conference.php template via body.single-conference.
*/
html:not(.dark) body.single-conference {
  --seo-conf-bg: #f3f4f6;
}

html:not(.dark) body.single-conference main.seo-conf-conference-page {
  background-color: transparent !important;
}

html:not(.dark) body.single-conference .seo-conf-conference-layout {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* Hero: soften the dark veil so the banner is brighter in light mode. */
html:not(.dark) body.single-conference .seo-conf-conference-hero {
  box-shadow: 0 40px 120px rgba(15, 23, 42, 0.18);
}

html:not(.dark) body.single-conference .seo-conf-conference-hero > .absolute.inset-0 {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.50) 0%, rgba(15, 23, 42, 0.80) 52%, rgba(15, 23, 42, 0.25) 100%);
}

/* Keep hero text white on the banner in light mode for readability. */
html:not(.dark) body.single-conference .seo-conf-conference-hero .text-white,
html:not(.dark) body.single-conference .seo-conf-conference-hero .has-white-color {
  color: #ffffff !important;
  text-shadow: 0 10px 40px rgba(15, 23, 42, 0.75);
}

/* Make secondary hero labels (date, FORMAT, VISIT SITE) readable in light mode. */
html:not(.dark) body.single-conference .seo-conf-conference-hero .text-slate-200,
html:not(.dark) body.single-conference .seo-conf-conference-hero .text-slate-300,
html:not(.dark) body.single-conference .seo-conf-conference-hero .text-primary-300 {
  color: #f9fafb !important;
  text-shadow: 0 8px 30px rgba(15, 23, 42, 0.7);
}

/* Facts row cards */
html:not(.dark) body.single-conference .seo-conf-conference-fact-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}

html:not(.dark) body.single-conference .seo-conf-conference-fact-card p {
  color: #0f172a;
}

html:not(.dark) body.single-conference .seo-conf-conference-fact-card .text-slate-500 {
  color: rgba(15, 23, 42, 0.55) !important;
}

/* About/overview card */
html:not(.dark) body.single-conference .seo-conf-conference-overview-card {
  background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.12) 0%, rgba(248, 250, 252, 1) 40%, rgba(241, 245, 249, 1) 100%) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  box-shadow: 0 40px 100px rgba(15, 23, 42, 0.16) !important;
  color: #0f172a;
}

html:not(.dark) body.single-conference .seo-conf-conference-overview-card h2,
html:not(.dark) body.single-conference .seo-conf-conference-overview-card p,
html:not(.dark) body.single-conference .seo-conf-conference-overview-card .prose {
  color: #0f172a !important;
}

html:not(.dark) body.single-conference .seo-conf-conference-overview-card .prose a {
  color: #4f46e5;
}

/* Tickets CTA card */
html:not(.dark) body.single-conference .seo-conf-conference-tickets-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 60%, rgba(224, 231, 255, 0.9) 100%) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18) !important;
}

html:not(.dark) body.single-conference .seo-conf-conference-tickets-card p {
  color: #0f172a;
}

/* Submit Conference: ensure the payment CTA outline is visible in light mode. */
html:not(.dark) .seo-conf-payment-btn,
html[data-theme="light"] .seo-conf-payment-btn,
html:not(.dark) a[href*="submit-payment"],
html[data-theme="light"] a[href*="submit-payment"] {
  border-style: solid !important;
  border-width: 2px !important;
  border-color: var(--slate-900) !important;
  background-color: transparent !important;
  color: var(--slate-900) !important;
}

html:not(.dark) .seo-conf-payment-btn:hover,
html[data-theme="light"] .seo-conf-payment-btn:hover,
html:not(.dark) a[href*="submit-payment"]:hover,
html[data-theme="light"] a[href*="submit-payment"]:hover {
  background-color: var(--seo-conf-surface-2) !important;
  border-color: var(--primary-500) !important;
  color: var(--slate-900) !important;
}

/* Force-hide payment box when success is visible */
#submit-success:not(.hidden) ~ #payment-info-box,
#submit-success:not([style*="display: none"]) ~ #payment-info-box {
  display: none !important;
}
/* End force-hide */

body {
  font-family: "General Sans", "Space Grotesk", sans-serif;
  background-color: var(--seo-conf-bg);
  color: var(--seo-conf-fg);
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html {
  padding: 0;
  margin: 0;
  background-color: var(--seo-conf-bg) !important;
}

/* WP admin bar adds `html { margin-top: ... !important; }`, which can create a visible band above our sticky header.
   Override that with higher specificity and handle the offset via the header `top` instead. */
html.wp-toolbar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Some pages are rendered via block templates (.wp-site-blocks) and others via classic PHP templates (#page).
   Keep the base canvas color consistent so no “white strip” shows through between blocks. */
:where(body, .wp-site-blocks, #page) {
  background-color: var(--seo-conf-bg) !important;
}

/*
  The block templates are heavily authored with dark-mode Tailwind utility classes.
  To make the Light/Dark toggle actually work without rewriting every template,
  we override the most common dark utilities when html is in light mode.
*/
html:not(.dark) .bg-slate-950 {
  background-color: var(--seo-conf-bg) !important;
}

html:not(.dark) .bg-slate-900 {
  background-color: var(--seo-conf-surface) !important;
}

html:not(.dark) .bg-slate-900\/95,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/30 {
  background-color: var(--seo-conf-surface-2) !important;
}

html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/60,
html:not(.dark) .bg-slate-950\/50 {
  background-color: var(--seo-conf-input-bg) !important;
}

html:not(.dark) .border-slate-900,
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700 {
  border-color: var(--seo-conf-border) !important;
}

html:not(.dark) .text-white {
  color: var(--seo-conf-fg-strong) !important;
}

/* Headings: block templates often omit explicit color classes.
   In light mode, theme.json's default text color is very light, so force headings to a dark, readable color.
   Keep cover-block headings white for image readability. */
html:not(.dark) .wp-block-heading {
  color: var(--seo-conf-fg) !important;
}

html:not(.dark) .wp-block-cover .wp-block-heading {
  color: rgba(255, 255, 255, 1) !important;
}

/* Footer: the Site Title block is explicitly `textColor:"white"` (has-white-color).
   In light mode our background utilities become light, so force footer title/link back to dark. */

html:not(.dark) footer.wp-block-group.bg-slate-950 a:hover,
html[data-theme="light"] footer.wp-block-group.bg-slate-950 a:hover {
  color: var(--seo-conf-fg-strong) !important;
}

/* Cover blocks usually sit on dark images; keep text light even in light mode. */
html:not(.dark) .wp-block-cover .text-white,
html:not(.dark) .wp-block-cover .has-white-color {
  color: rgba(255, 255, 255, 1) !important;
}

html:not(.dark) .wp-block-cover .text-slate-200,
html:not(.dark) .wp-block-cover .text-slate-300,
html:not(.dark) .wp-block-cover .text-slate-400,
html:not(.dark) .wp-block-cover .text-slate-500 {
  color: rgba(255, 255, 255, 0.82) !important;
}

html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400,
html:not(.dark) .text-slate-500 {
  color: var(--seo-conf-muted) !important;
}

/* Front-page category pills: ensure light mode looks intentional even if JS emits dark-first classes. */
html:not(.dark) #category-buttons button {
  background-color: white !important;
  border-color: var(--seo-conf-border) !important;
  color: var(--seo-conf-fg) !important;
  box-shadow: none !important;
}

html:not(.dark) #category-buttons button:hover {
  background-color: var(--seo-conf-surface-2) !important;
  color: var(--seo-conf-fg) !important;
}

/* Selected state: make it clearly stand out in light mode.
   Different scripts/templates mark "active" differently (shadow, primary border, or dark bg).
*/
html:not(.dark) #category-buttons button.shadow-md,
html:not(.dark) #category-buttons button.border-primary-500,
html:not(.dark) #category-buttons button.bg-slate-900,
html:not(.dark) #category-buttons button.border-slate-900 {
  background-color: var(--seo-conf-surface) !important;
  border-color: var(--primary-500) !important;
  border-width: 2px !important;
  color: var(--seo-conf-fg) !important;
}

/* Pagination: normalize in light mode even if JS emits dark-first classes. */
html:not(.dark) #events-pagination :is(button, a),
html[data-theme="light"] #events-pagination :is(button, a) {
  background-color: #ffffff !important;
  border: 1px solid var(--seo-conf-border) !important;
  color: var(--slate-900) !important;
  box-shadow: none !important;
}

/* WordPress Query Pagination (archive/home/index): force readable text in light mode.
   Templates currently apply dark-first Tailwind classes like `text-slate-400` + `text-white`. */
html:not(.dark) .wp-block-query-pagination-previous,
html:not(.dark) .wp-block-query-pagination-next,
html:not(.dark) .wp-block-query-pagination-numbers,
html:not(.dark) .wp-block-query-pagination-previous :is(a, span),
html:not(.dark) .wp-block-query-pagination-next :is(a, span),
html:not(.dark) .wp-block-query-pagination-numbers :is(a, span),
html[data-theme="light"] .wp-block-query-pagination-previous,
html[data-theme="light"] .wp-block-query-pagination-next,
html[data-theme="light"] .wp-block-query-pagination-numbers,
html[data-theme="light"] .wp-block-query-pagination-previous :is(a, span),
html[data-theme="light"] .wp-block-query-pagination-next :is(a, span),
html[data-theme="light"] .wp-block-query-pagination-numbers :is(a, span) {
  color: var(--slate-900) !important;
}

html:not(.dark) #events-pagination :is(button, a):hover:not(:disabled),
html[data-theme="light"] #events-pagination :is(button, a):hover:not(:disabled) {
  background-color: var(--seo-conf-surface-2) !important;
}

html:not(.dark) #events-pagination :is(button, a)[aria-current="page"],
html[data-theme="light"] #events-pagination :is(button, a)[aria-current="page"] {
  background-color: var(--seo-conf-surface) !important;
  border-color: var(--primary-500) !important;
  border-width: 2px !important;
  color: var(--slate-900) !important;
}

/* If an older script outputs dark-filled active buttons, override them in light mode. */
html:not(.dark) #events-pagination :is(button, a).bg-slate-900,
html:not(.dark) #events-pagination :is(button, a).bg-slate-800,
html:not(.dark) #events-pagination :is(button, a).border-slate-900,
html:not(.dark) #events-pagination :is(button, a).text-white,
html[data-theme="light"] #events-pagination :is(button, a).bg-slate-900,
html[data-theme="light"] #events-pagination :is(button, a).bg-slate-800,
html[data-theme="light"] #events-pagination :is(button, a).border-slate-900,
html[data-theme="light"] #events-pagination :is(button, a).text-white {
  background-color: #ffffff !important;
  border-color: var(--seo-conf-border) !important;
  color: var(--slate-900) !important;
}

html:not(.dark) #events-pagination :is(button, a) :where(span,svg,i),
html[data-theme="light"] #events-pagination :is(button, a) :where(span,svg,i) {
  color: inherit !important;
}

html:not(.dark) #events-pagination :is(button, a):disabled,
html:not(.dark) #events-pagination :is(button, a)[aria-disabled="true"],
html:not(.dark) #events-pagination :is(button, a).disabled,
html[data-theme="light"] #events-pagination :is(button, a):disabled,
html[data-theme="light"] #events-pagination :is(button, a)[aria-disabled="true"],
html[data-theme="light"] #events-pagination :is(button, a).disabled {
  background-color: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  color: var(--slate-900) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Only dim standalone pagination labels (avoid affecting button/link text wrapped in spans). */
html:not(.dark) #events-pagination > span,
html[data-theme="light"] #events-pagination > span {
  color: rgba(15, 23, 42, 0.55) !important;
}

html:not(.dark) #category-buttons button.shadow-md:hover,
html:not(.dark) #category-buttons button.border-primary-500:hover,
html:not(.dark) #category-buttons button.bg-slate-900:hover,
html:not(.dark) #category-buttons button.border-slate-900:hover {
  background-color: var(--seo-conf-surface) !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
  color: var(--seo-conf-fg) !important;
}

/* Contact page: "Contact Info" card is dark-first; in light mode it should match the rest of the form. */
html:not(.dark) .seo-conf-contact-info-card,
html[data-theme="light"] .seo-conf-contact-info-card {
  background-image: none !important;
  background-color: var(--seo-conf-surface) !important;
  border-color: var(--seo-conf-border) !important;
  box-shadow: none !important;
}

html:not(.dark) .seo-conf-contact-info-card .border-slate-800\/80,
html[data-theme="light"] .seo-conf-contact-info-card .border-slate-800\/80 {
  border-color: var(--seo-conf-border) !important;
}

html:not(.dark) .seo-conf-contact-info-card a[href^="mailto:"],
html[data-theme="light"] .seo-conf-contact-info-card a[href^="mailto:"] {
  background-color: var(--seo-conf-input-bg) !important;
  border-color: var(--seo-conf-input-border) !important;
  color: var(--slate-900) !important;
}

html:not(.dark) .seo-conf-contact-info-card a[href^="mailto:"]:hover,
html[data-theme="light"] .seo-conf-contact-info-card a[href^="mailto:"]:hover {
  border-color: var(--primary-500) !important;
}

/* File input button ("Choose File") is a native control; make it readable in light mode. */
html:not(.dark) input[type="file"]::file-selector-button,
html[data-theme="light"] input[type="file"]::file-selector-button {
  background-color: var(--seo-conf-surface-2) !important;
  color: var(--slate-900) !important;
  border: 1px solid var(--seo-conf-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  margin-right: 1rem !important;
}

html:not(.dark) input[type="file"]::-webkit-file-upload-button,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button {
  background-color: var(--seo-conf-surface-2) !important;
  color: var(--slate-900) !important;
  border: 1px solid var(--seo-conf-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  margin-right: 1rem !important;
}

html:not(.dark) input[type="file"]::file-selector-button:hover,
html[data-theme="light"] input[type="file"]::file-selector-button:hover,
html:not(.dark) input[type="file"]::-webkit-file-upload-button:hover,
html[data-theme="light"] input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--seo-conf-surface) !important;
}


/* Sticky fallback: JS toggles this when native sticky is unreliable. */
.seo-conf-header--stuck {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 9999;
}

/* The header is output as a template-part wrapper *and* contains an inner header group.
   Force the outer wrapper to be sticky too (some pages otherwise scroll it away). */


/* Some block templates render the header as a template-part wrapper containing an inner header group.
   If either element gets any top spacing, it shows up as a thin band above the sticky header.
   Force all top spacing to zero for the header in .wp-site-blocks contexts. */
.wp-site-blocks > header.wp-block-template-part.seo-conf-site-header,
.wp-site-blocks > header.wp-block-group,
.wp-site-blocks > header.wp-block-template-part.seo-conf-site-header > header.wp-block-group {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* When the template-part wrapper is `display: contents`, the inner header group becomes the top-level box.
   Make sure it remains sticky as well. */
.wp-site-blocks > header.wp-block-group {
  position: sticky !important;
  top: 0 !important;
  z-index: 9999;
}

/* Offset the sticky header under the admin bar when logged in. */
body.admin-bar .seo-conf-site-header,
body.admin-bar header.wp-block-template-part.seo-conf-site-header,
body.admin-bar .wp-site-blocks > header.wp-block-group.seo-conf-site-header,
body.admin-bar .seo-conf-header--stuck {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* WordPress applies a default block gap between top-level blocks in .wp-site-blocks.
   Remove the gap specifically between the header template-part and the main content,
   otherwise it shows up as a white strip in light mode. */
.wp-site-blocks > header.wp-block-template-part.seo-conf-site-header + main,
.wp-site-blocks > header.wp-block-template-part.seo-conf-site-header + .wp-block-group {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Same gap fix for the inner header group case. */
.wp-site-blocks > header.wp-block-group.seo-conf-site-header + :is(main, .wp-block-group) {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Absolute fallback: ensure nothing adds a gap immediately after any header at the top. */
.wp-site-blocks > :is(header.wp-block-template-part, header.wp-block-group) + :is(main, .wp-block-group) {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Fallback: if the wrapper classes differ, still remove the first gap after the header template-part. */
.wp-site-blocks > .wp-block-template-part + :is(main, .wp-block-group) {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* Front page: ensure the hero starts immediately under the header (no stray gap). */
body.front-page main.wp-block-group,
body.home main.wp-block-group {
  margin-top: 0 !important;
}

body.front-page main.wp-block-group > .wp-block-cover.alignfull,
body.home main.wp-block-group > .wp-block-cover.alignfull {
  margin-top: 0 !important;
}

/* Header: ensure the theme-toggle Lucide icon is always visible and inherits the button text color. */
.seo-conf-site-header #theme-toggle svg.lucide,
.seo-conf-site-header #theme-toggle svg {
  display: block;
  color: inherit;
  stroke: currentColor;
  opacity: 1;
}

/* Header: make the theme-toggle icon obvious on hover (white bg + black icon). */
.seo-conf-site-header #theme-toggle:hover,
.seo-conf-site-header #theme-toggle:focus-visible {
  background-color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important; /* slate-900 */
}

.seo-conf-site-header #theme-toggle:hover :is(svg, i),
.seo-conf-site-header #theme-toggle:focus-visible :is(svg, i) {
  color: #0f172a !important;
  stroke: currentColor;
}

/* Only highlight Contact when actually on the contact page. */
body.page-contact .seo-conf-site-header nav a[href="/contact"],
body.page-template-page-contact .seo-conf-site-header nav a[href="/contact"] {
  color: var(--primary-500) !important;
}

/* Active states for menu items based on current page. */
body.front-page .seo-conf-site-header nav a[href="/"],
body.home .seo-conf-site-header nav a[href="/"],
body.blog .seo-conf-site-header nav a[href="/blog"],
body.archive.category .seo-conf-site-header nav a[href="/blog"],
body.page-submit-conference .seo-conf-site-header nav a[href="/submit_conference"],
body.page-template-page-submit-conference .seo-conf-site-header nav a[href="/submit_conference"],
body.page-contact .seo-conf-site-header nav :is(a[href="/contact"], a[href="/contact/"]),
body.page-template-page-contact .seo-conf-site-header nav :is(a[href="/contact"], a[href="/contact/"]) {
  color: var(--primary-500) !important;
  font-weight: 700 !important;
}

/* JS-driven active class fallback for all nav items. */
.seo-conf-site-header nav a.is-active {
  color: #3b82f6 !important; /* default fallback */
  font-weight: 700 !important;
}

/* Swap the active colors between light and dark modes. */
html:not(.dark) .seo-conf-site-header nav a.is-active,
html[data-theme="light"] .seo-conf-site-header nav a.is-active {
  color: #2563eb !important; /* pale blue in light mode */
}

html.dark .seo-conf-site-header nav a.is-active,
html[data-theme="dark"] .seo-conf-site-header nav a.is-active {
  color: #3b82f6 !important; /* stronger blue in dark mode */
}

/* Single blog post background: #0B1220 in dark, #F7F8F8 in light */
html.dark body.single {
  background-color: #0B1220 !important;
}
html:not(.dark) body.single {
  background-color: #F7F8F8 !important;
}

/* Ensure single blog post background is correct in all wrappers */
html.dark body.single,
html.dark body.single .wp-site-blocks,
html.dark body.single #page,
html.dark body.single main,
html.dark body.single .bg-slate-950 {
  background-color: #0B1220 !important;
}
html:not(.dark) body.single,
html:not(.dark) body.single .wp-site-blocks,
html:not(.dark) body.single #page,
html:not(.dark) body.single main,
html:not(.dark) body.single .bg-slate-950 {
  background-color: #F7F8F8 !important;
}

/* Header: show a sensible default icon even if JS fails/caches. */
html.dark .seo-conf-site-header #theme-toggle .theme-toggle-sun {
  display: none;
}

html.dark .seo-conf-site-header #theme-toggle .theme-toggle-moon {
  display: inline-flex;
}

html:not(.dark) .seo-conf-site-header #theme-toggle .theme-toggle-sun,
html[data-theme="light"] .seo-conf-site-header #theme-toggle .theme-toggle-sun {
  display: inline-flex;
}

html:not(.dark) .seo-conf-site-header #theme-toggle .theme-toggle-moon,
html[data-theme="light"] .seo-conf-site-header #theme-toggle .theme-toggle-moon {
  display: none;
}

/* Contact CTA ("Need a faster response?") becomes unreadable in light mode due to dark-first utility classes.
   Force a high-contrast surface and readable text/button. */
html:not(.dark) .seo-conf-contact-cta,
html[data-theme="light"] .seo-conf-contact-cta {
  /* Recreate the intended gradient + fade in light mode (some pages may not have Tailwind utilities loaded). */
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(
    90deg,
    rgba(124, 58, 237, 0.98) 0%,
    rgba(59, 130, 246, 0.9) 50%,
    rgba(16, 185, 129, 0.92) 100%
  ) !important;
  color: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 60px rgba(2, 6, 23, 0.14);
}

html:not(.dark) .seo-conf-contact-cta::before,
html[data-theme="light"] .seo-conf-contact-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Soft top highlight to mimic the original “fade” */
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62%);
  opacity: 0.3;
}

html:not(.dark) .seo-conf-contact-cta::after,
html[data-theme="light"] .seo-conf-contact-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Edge vignette for light mode: fade into the white page canvas. */
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0) 22%,
      rgba(255, 255, 255, 0) 78%,
      rgba(255, 255, 255, 0.92) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0.55) 100%
    );
  opacity: 0.62;
}

html:not(.dark) .seo-conf-contact-cta > *,
html[data-theme="light"] .seo-conf-contact-cta > * {
  position: relative;
  z-index: 1;
}

html:not(.dark) .seo-conf-contact-cta :is(p, span, h1, h2, h3, h4, a),
html[data-theme="light"] .seo-conf-contact-cta :is(p, span, h1, h2, h3, h4, a) {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(2, 6, 23, 0.35);
}

/* CTA link/button styling fallback (so it still looks like a pill even without utility CSS). */
html:not(.dark) .seo-conf-contact-cta a[href="/contact"],
html[data-theme="light"] .seo-conf-contact-cta a[href="/contact"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff !important;
}

html:not(.dark) .seo-conf-contact-cta a[href="/contact"]:hover,
html[data-theme="light"] .seo-conf-contact-cta a[href="/contact"]:hover {
  background-color: rgba(255, 255, 255, 0.2);
}


main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}


a {
  color: inherit;
  text-decoration: none;
}

/* Custom select UI (used by assets/js/submit-selects.js) */
.seo-conf-select {
  position: relative;
  width: 100%;
}

.seo-conf-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.seo-conf-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.seo-conf-select__value {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-conf-select__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--seo-conf-muted);
}

.seo-conf-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 60;
  display: none;
  max-height: 260px;
  overflow: auto;
  border-radius: 0.75rem;
  padding: 0.5rem;
  border: 1px solid var(--seo-conf-border);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(12px);
}

html:not(.dark) .seo-conf-select__menu,
html[data-theme="light"] .seo-conf-select__menu {
  background: #ffffff;
  box-shadow: 0 22px 70px rgba(2, 6, 23, 0.14);
}

.seo-conf-select.is-open .seo-conf-select__menu {
  display: block;
}

.seo-conf-select__option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  border: 0;
  background: transparent;
  color: var(--seo-conf-fg);
  font: inherit;
  cursor: pointer;
}

.seo-conf-select__option:hover {
  background: rgba(148, 163, 184, 0.12);
}

html:not(.dark) .seo-conf-select__option:hover,
html[data-theme="light"] .seo-conf-select__option:hover {
  background: rgba(15, 23, 42, 0.06);
}

.seo-conf-select__option[aria-selected="true"] {
  background: rgba(124, 58, 237, 0.18);
}

html:not(.dark) .seo-conf-select__option[aria-selected="true"],
html[data-theme="light"] .seo-conf-select__option[aria-selected="true"] {
  background: rgba(124, 58, 237, 0.18);
}

/* Make single blog post content readable in light mode */
html:not(.dark) body.single,
html:not(.dark) body.single .wp-site-blocks,
html:not(.dark) body.single #page,
html:not(.dark) body.single main,
html:not(.dark) body.single .wp-block-post-content {
  color: #222831 !important;
}

html:not(.dark) body.single .wp-block-post-content a,
html:not(.dark) body.single .entry-content a {
  color: #2563eb !important;
}

/* Ensure all headings, lists, and text are readable in single blog post content for both dark and light mode */
body.single .wp-block-post-content,
body.single .entry-content {
  color: #222831;
}

body.single .wp-block-post-content h1,
body.single .entry-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  color: #1a1a1a;
}
body.single .wp-block-post-content h2,
body.single .entry-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 1.5rem 0 1rem 0;
  color: #1a1a1a;
}
body.single .wp-block-post-content h3,
body.single .entry-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 1.25rem 0 0.75rem 0;
  color: #1a1a1a;
}
body.single .wp-block-post-content h4,
body.single .entry-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem 0;
  color: #1a1a1a;
}
body.single .wp-block-post-content h5,
body.single .entry-content h5 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.75rem 0 0.5rem 0;
  color: #1a1a1a;
}
body.single .wp-block-post-content h6,
body.single .entry-content h6 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem 0;
  color: #1a1a1a;
}

body.single .wp-block-post-content ul,
body.single .wp-block-post-content ol,
body.single .entry-content ul,
body.single .entry-content ol {
  color: #222831;
  list-style-position: outside;
  margin-left: 1.5em;
}
body.single .wp-block-post-content ul li,
body.single .entry-content ul li {
  list-style-type: disc;
}
body.single .wp-block-post-content ol li,
body.single .entry-content ol li {
  list-style-type: decimal;
}

html.dark body.single .wp-block-post-content,
html.dark body.single .entry-content {
  color: #e2e8f0;
}
html.dark body.single .wp-block-post-content h1,
html.dark body.single .entry-content h1,
html.dark body.single .wp-block-post-content h2,
html.dark body.single .entry-content h2,
html.dark body.single .wp-block-post-content h3,
html.dark body.single .entry-content h3,
html.dark body.single .wp-block-post-content h4,
html.dark body.single .entry-content h4,
html.dark body.single .wp-block-post-content h5,
html.dark body.single .entry-content h5,
html.dark body.single .wp-block-post-content h6,
html.dark body.single .entry-content h6 {
  color: #fff;
}
html.dark body.single .wp-block-post-content ul,
html.dark body.single .wp-block-post-content ol,
html.dark body.single .entry-content ul,
html.dark body.single .entry-content ol {
  color: #e2e8f0;
}

/* Make main heading (post title) visible in bright mode on single post page */
html:not(.dark) body.single .wp-block-post-title {
  color: #18181a !important;
}

/* Blog listing page: white background and visible text in bright mode only */
html:not(.dark) body.blog,
html:not(.dark) body.blog .wp-block-post-title,
html:not(.dark) body.blog .wp-block-post-content,
html:not(.dark) body.blog .entry-content,
html:not(.dark) body.blog p,
html:not(.dark) body.blog li,
html:not(.dark) body.blog h1,
html:not(.dark) body.blog h2,
html:not(.dark) body.blog h3,
html:not(.dark) body.blog h4,
html:not(.dark) body.blog h5,
html:not(.dark) body.blog h6 {
  color: #18181a !important;
}

/* Force blog page background to white in bright mode, with highest specificity */
html:not(.dark) body.blog,
html:not(.dark) body.blog .wp-site-blocks,
html:not(.dark) body.blog #page,
html:not(.dark) body.blog main,
html:not(.dark) body.blog .wp-site-blocks {
  background-color: #fff !important;
}


/* Blog page: use a unique class for background and text color in bright mode */
.blog-bright-bg {
  background-color: #fff !important;
}
.blog-bright-bg .blog-bright-content {
  color: #18181a !important;
}
.blog-bright-bg .blog-bright-content h1,
.blog-bright-bg .blog-bright-content h2,
.blog-bright-bg .blog-bright-content h3,
.blog-bright-bg .blog-bright-content h4,
.blog-bright-bg .blog-bright-content h5,
.blog-bright-bg .blog-bright-content h6 {
  color: #18181a !important;
}
.blog-bright-bg .blog-bright-content ul,
.blog-bright-bg .blog-bright-content ol {
  color: #18181a !important;
  list-style-position: outside;
  margin-left: 1.5em;
}
.blog-bright-bg .blog-bright-content ul li {
  list-style-type: disc;
}
.blog-bright-bg .blog-bright-content ol li {
  list-style-type: decimal;
}

html.dark .blog-bright-bg {
  background-color: #0B1220 !important;
}
html.dark .blog-bright-bg .blog-bright-content {
  color: #e2e8f0 !important;
 }
html.dark .blog-bright-bg .blog-bright-content h1,
html.dark .blog-bright-bg .blog-bright-content h2,
html.dark .blog-bright-bg .blog-bright-content h3,
html.dark .blog-bright-bg .blog-bright-content h4,
html.dark .blog-bright-bg .blog-bright-content h5,
html.dark .blog-bright-bg .blog-bright-content h6 {
  color: #fff !important;
}
html.dark .blog-bright-bg .blog-bright-content ul,
html.dark .blog-bright-bg .blog-bright-content ol {
  color: #e2e8f0 !important;
}

/* Conference Form Spacing Fix */
.submit-conference-form label,
.submit-conference-form .group\/field {
    margin-top: 1.25rem !important;
}
.submit-conference-form span,
.submit-conference-form .block.text-xs.font-medium.text-slate-400 {
    margin-bottom: 0.5rem !important;
}
.submit-conference-form .grid {
    margin-top: 1.25rem !important;
}
/* End Conference Form Spacing Fix */

/* Guaranteed Conference Form Spacing Fix */
label.group\/field,
.group\/field {
    margin-top: 1.25rem !important;
    display: block !important;
}
span.block.text-xs.font-medium.text-slate-400 {
    margin-bottom: 0.75rem !important;
    display: block !important;
}
.grid {
    margin-top: 1.25rem !important;
}
/* End Guaranteed Conference Form Spacing Fix */

/* Final Conference Form Spacing Fix */
label.group\/field,
.group\/field,
span.block.text-xs.font-medium.text-slate-400,
.grid {
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}
/* End Final Conference Form Spacing Fix */

/* Strict Uniform Spacing for Conference Form */
label.group\/field,
.group\/field,
span.block.text-xs.font-medium.text-slate-400,
.grid {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Remove extra margin from last child in each section */
label.group\/field:last-child,
.group\/field:last-child,
.grid:last-child {
    margin-bottom: 0 !important;
}

/* Remove extra margin from first child in each section */
label.group\/field:first-child,
.group\/field:first-child,
.grid:first-child {
    margin-top: 0 !important;
}
/* End Strict Uniform Spacing */

@media (min-width: 1024px) {
  .seo-conf-site-header .flex-1.max-w-md {
    display: block !important;
  }
}

html:not(.dark) .seo-conf-contact-page-light button[type="submit"] {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity)) !important;

  background: #ede9fe !important;
  border: 1px solid #ddd6fe !important;
  box-shadow: none !important;
  background-image: none !important;
}

html:not(.dark) .seo-conf-contact-page-light button[type="submit"]:hover {
  --tw-text-opacity: 1;
  color: rgb(147 97 240 / var(--tw-text-opacity)) !important;
  background: #e0e7ff !important;
}

/* Reduce aggressive glow on primary buttons */
button[type="submit"] {
  box-shadow: 0 8px 18px rgba(133, 111, 255, 0.18) !important;
}

/* Light mode – Submit Conference button = Contact button */
html:not(.dark) .seo-conf-submit-page-light button[type="submit"] {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity)) !important;

  background: #ede9fe !important;
  border: 1px solid #ddd6fe !important;
  box-shadow: none !important;
  background-image: none !important;
}

html:not(.dark) .seo-conf-submit-page-light button[type="submit"]:hover {
  --tw-text-opacity: 1;
  color: rgb(147 97 240 / var(--tw-text-opacity)) !important;
  background: #e0e7ff !important;
}

/* =====================================================
   Light mode – Unified CTA style
   Affects:
   - Anchor buttons (Buy Tickets, Pay)
   - AI Generate button
   - Submit Conference button
   Does NOT affect Search button
   ===================================================== */

/* --- Anchor-based buttons --- */
html:not(.dark) a.bg-primary-600,
html:not(.dark) a.w-full.h-12,
html:not(.dark) a.seo-conf-payment-btn,
html:not(.dark) a[class*="btn"],

/* --- AI Generate button --- */
html:not(.dark) #ai-submit,

/* --- Submit Conference button (form submit) --- */
html:not(.dark) #submit-form > button[type="submit"] {
  --tw-text-opacity: 1;
  color: rgb(167 139 250 / var(--tw-text-opacity)) !important;

  background: #ede9fe !important;
  border: 1px solid #ddd6fe !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Hover state */
html:not(.dark) a.bg-primary-600:hover,
html:not(.dark) a.w-full.h-12:hover,
html:not(.dark) a.seo-conf-payment-btn:hover,
html:not(.dark) a[class*="btn"]:hover,
html:not(.dark) #ai-submit:hover,
html:not(.dark) #submit-form > button[type="submit"]:hover {
  --tw-text-opacity: 1;
  color: rgb(147 97 240 / var(--tw-text-opacity)) !important;
  background: #e0e7ff !important;
}

#filter-month {
  width: max-content;
  min-width: 6rem; /* prevents it from becoming too small */
  padding-right: 2rem; /* space for dropdown arrow */
}



.hero-side{
  position: relative;
  padding: 18px 22px;
  border-radius: 22px;
  text-align: right;

  /* glass background */
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  /* light outline */
  border: 1px solid rgba(255,255,255,0.16);

  /* soft depth */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 24px 70px rgba(0,0,0,0.45);

  color: #fff;
}

/* subtle inner highlight border */
.hero-side::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.03)
  );

  /* makes it a thin “ring” */
  padding: 1px;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
}

.hero-side small{
  display:block;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}

.hero-side strong{
  display:block;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}

.hero-side a{
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(168, 85, 247, 0.9); /* purple-ish */
  text-decoration: none;
}

.hero-side a:hover{
  color: rgba(216, 180, 254, 1);
  text-decoration: underline;
}

/* =================================
   HERO – WHITE TEXT (EXCEPT BUTTON)
================================= */

:root:not(.dark) .hero {
  color: #ffffff;
}

:root:not(.dark) .hero *:not(.btn-primary):not(.btn-primary *) {
  color: #ffffff;
}

/* =================================
   FACT BOXES – LIGHT MODE VISIBILITY
================================= */

:root:not(.dark) .facts .fact {
  background: #ffffff;
  border: 1px solid #e5e7eb; /* light gray */
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

:root:not(.dark) .facts .fact small {
  color: #475569; /* slate-600 */
  font-weight: 600;
}

:root:not(.dark) .facts .fact strong {
  color: #0f172a; /* slate-900 */
}

/* =================================
   SECTION CARDS – LIGHT MODE
================================= */

:root:not(.dark) .section-card {
  background: #ffffff;
  border: 1px solid #e5e7eb; /* slate-200 */
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Headings */
:root:not(.dark) .section-card h2,
:root:not(.dark) .section-card p,
:root:not(.dark) .section-card strong {
  color: #0f172a; /* slate-900 */
}

/* Small labels */
:root:not(.dark) .section-card small {
  color: #475569; /* slate-600 */
  opacity: 1; /* override inline opacity */
}

/* Paragraph text */
:root:not(.dark) .section-card div p {
  color: #1f2937; /* slate-800 */
}

/* Chips inside section cards */
:root:not(.dark) .section-card .chip {
  background: rgba(0,0,0,0.08);
  color: #0f172a;
}

/* DO NOT affect buttons */
:root:not(.dark) .section-card .btn-primary {
  color: #ffffff;
}

/* =========================================================
   SEO CONF HEADER — FINAL (ONE SYSTEM)
   Mobile: 0–1049
   Desktop: 1050+
========================================================= */

/* ---------- Visibility ---------- */
.header-nav,
.header-search-desktop,
.header-submit-desktop { display: none !important; }

#mobile-menu-toggle,
#theme-toggle { display: inline-flex !important; }

@media (min-width: 1050px) {
  .header-nav { display: flex !important; align-items: center !important; gap: 1.5rem !important; }
  .header-search-desktop,
  .header-submit-desktop { display: block !important; }
  #mobile-menu-toggle { display: none !important; }
}

/* ---------- Drawer ---------- */
#mobile-overlay { display: none; }
#mobile-menu { transform: translateX(100%); }

@media (max-width: 1049px) {
  #mobile-overlay{
    display:none;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,0.5);
    z-index:9998;
  }
  #mobile-menu{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:18rem;
    z-index:9999;
    background:#fff;
    transform: translateX(100%);
    transition: transform 300ms ease;
  }
  html.dark #mobile-menu{ background:#0f172a; }
}

#mobile-overlay.is-open { display:block !important; }
#mobile-menu.is-open { transform: translateX(0) !important; }

@media (min-width: 1050px) {
  #mobile-overlay { display:none !important; }
  #mobile-menu { display:none !important; transform: translateX(100%) !important; }
}

/* Hamburger icon */
#mobile-menu-toggle { color: rgb(100 116 139); }
html.dark #mobile-menu-toggle { color: rgb(226 232 240); }

#mobile-menu-toggle .hamburger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:18px;
}
#mobile-menu-toggle .hamburger span{
  display:block;
  height:2px;
  width:18px;
  background: currentColor;
  border-radius:9999px;
}

/* ---------- Layout (prevents off-screen) ---------- */
.seo-conf-site-header,
.seo-conf-site-header * { box-sizing: border-box !important; }

.seo-conf-site-header .wp-block-group.gap-8.is-layout-flex{
  width:100% !important;
  max-width:100% !important;
  justify-content:center !important;
  padding-top:12px !important;
  padding-bottom:12px !important;
}

.seo-conf-site-header .header-inner{
  width:100% !important;
  max-width:1280px !important;
  margin:0 auto !important;
  padding:0 16px !important;

  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:0 !important;

  justify-content: space-between !important; /* mobile default */
}

/* Keep both groups inside the bar */
.seo-conf-site-header .header-inner > .wp-block-group:first-child{
  min-width:0 !important;
  flex:1 1 auto !important;
}
.seo-conf-site-header .header-inner > .wp-block-group:last-child{
  min-width:0 !important;
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

/* Desktop: bring groups closer together + centered */
@media (min-width: 1050px) {
  .seo-conf-site-header .header-inner{
    justify-content:center !important;
    gap:28px !important;
  }

  .seo-conf-site-header .header-inner > .wp-block-group:first-child,
  .seo-conf-site-header .header-inner > .wp-block-group:last-child{
    flex:0 0 auto !important;
  }

  /* Let search shrink so it never pushes buttons off-screen */
  .header-search-desktop { min-width:0 !important; }
  .header-search-desktop input#header-search{
    width: clamp(160px, 18vw, 260px) !important;
    max-width:100% !important;
  }
}

/* Mobile: right side always stays visible */
@media (max-width: 1049px) {
  #mobile-menu-toggle, #theme-toggle { flex:0 0 auto !important; }
}

/* =========================================================
   Desktop layout tuning:
   - 1050–1399: keep groups closer + centered
   - 1400+: normal space-between (looks “right” on big screens)
========================================================= */

/* Smaller desktop: bring groups together */
@media (min-width: 1050px) and (max-width: 1399px) {
  .seo-conf-site-header .header-inner {
    justify-content: center !important;
    gap: 28px !important;
  }

  .seo-conf-site-header .header-inner > .wp-block-group:first-child,
  .seo-conf-site-header .header-inner > .wp-block-group:last-child {
    flex: 0 0 auto !important;
  }
}

/* Wide desktop: classic layout */
@media (min-width: 1400px) {
  .seo-conf-site-header .header-inner {
    justify-content: space-between !important;
    gap: 16px !important;
  }

  /* left group can take space, right group stays right */
  .seo-conf-site-header .header-inner > .wp-block-group:first-child {
    flex: 1 1 auto !important;
  }

  .seo-conf-site-header .header-inner > .wp-block-group:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  /* optional: slightly wider search looks nicer on wide screens */
  .header-search-desktop input#header-search {
    max-width: 320px !important;
  }
}

/* 1050–1399: BOTH groups shrink to content and sit together */
@media (min-width: 1050px) and (max-width: 1399px) {

  /* Center the pair as one unit */
  .seo-conf-site-header .header-inner {
    justify-content: center !important;
    gap: 24px !important;
  }

  /* IMPORTANT: stop left group from stretching */
  .seo-conf-site-header .header-inner > .wp-block-group:first-child {
    flex: 0 0 auto !important;     /* was 1 1 auto */
    width: auto !important;
  }

  /* Right group also shrink-to-content */
  .seo-conf-site-header .header-inner > .wp-block-group:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0 !important;     /* remove “push to right” */
  }

  /* Nav shouldn’t add “auto spacing” */
  .seo-conf-site-header .header-nav {
    justify-content: flex-start !important;
  }

  /* Keep search from forcing distance */
  .header-search-desktop input#header-search {
    width: 240px !important;
    max-width: 240px !important;
  }
}

/* =========================================================
   MOBILE (0–1049): logo left, buttons right
   (does NOT touch the drawer menu logic)
========================================================= */
@media (max-width: 1049px) {

  /* Make the header bar split into 2 sides */
  .seo-conf-site-header .header-inner{
    justify-content: space-between !important;
    gap: 12px !important;
  }

  /* LEFT group (logo/title) stays on the left and doesn't stretch weirdly */
  .seo-conf-site-header .header-inner > .wp-block-group:first-child{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: auto !important;
  }

  /* RIGHT group (theme + hamburger etc.) sticks to the right */
  .seo-conf-site-header .header-inner > .wp-block-group:last-child{
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }

  /* Prevent logo/title from forcing the right buttons off-screen */
  .seo-conf-site-header .header-inner > .wp-block-group:first-child *{
    max-width: 100% !important;
  }
}

/* =========================================================
   Sticky header background (dark + light)
   Applies when JS adds .seo-conf-header--stuck
========================================================= */

/* Header background ALWAYS visible */
.seo-conf-site-header,
header.wp-block-template-part.seo-conf-site-header {
  background-color: var(--seo-conf-bg) !important;
}


/* Sticky state: add background + blur + border */
.seo-conf-header--stuck,
.seo-conf-header--stuck .seo-conf-site-header,
body .seo-conf-header--stuck {
  background: rgba(2, 6, 23, 0.82) !important; /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 14px 40px rgba(2, 6, 23, 0.45) !important;
}

/* Light mode sticky background */
html:not(.dark) .seo-conf-header--stuck,
html:not(.dark) .seo-conf-header--stuck .seo-conf-site-header,
html[data-theme="light"] .seo-conf-header--stuck,
html[data-theme="light"] .seo-conf-header--stuck .seo-conf-site-header {
  background: rgba(255, 255, 255, 0.92) !important; /* light glass */
  border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12) !important;
}

/* Keep WP Admin Bar dark (don’t let theme light-mode rules override it) */
#wpadminbar,
#wpadminbar * {
  background: #23282d !important;
  color: #fff !important;
}

#wpadminbar a,
#wpadminbar .ab-item,
#wpadminbar .ab-item:before,
#wpadminbar .ab-icon:before {
  color: #fff !important;
}

#wpadminbar .ab-sub-wrapper,
#wpadminbar .ab-submenu {
  background: #23282d !important;
}

#wpadminbar a:hover,
#wpadminbar .ab-item:hover {
  color: #72aee6 !important;
}

/* BASE (light mode) */
select {
  background-color: #ffffff;
  color: #0f172a;              /* slate-900 */
  border-color: #cbd5e1;       /* slate-300 */
}

select:focus {
  border-color: #8b5cf6;       /* violet */
}

/* OPTION COLORS */
select option {
  background-color: #ffffff;
  color: #0f172a;
}

/* DARK MODE */
.dark select {
  background-color: rgba(15, 23, 42, 0.6); /* slate-900/60 */
  color: #ffffff;
  border-color: #334155;       /* slate-700 */
}

.dark select:focus {
  border-color: #8b5cf6;       /* violet */
}

.dark select option {
  background-color: #0f172a;  /* slate-900 */
  color: #ffffff;
}

/* FOOTER — single source of truth */
footer,
footer.wp-block-group,
footer.wp-block-template-part {
  margin: 0 !important;
  padding: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--40) !important;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Light mode — COLORS ONLY */
html:not(.dark) footer {
  background-color: #ffffff !important;
  color: #18181a !important;
  border-top: 1px solid #e5e7eb;
}

/* Divider */
.footer-divider {
  height: 1px;
  margin: 2.5rem 0;
}
html.dark .footer-divider {
  background: rgba(255, 255, 255, 0.08);
}
html:not(.dark) .footer-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Footer: hard stop — no light-mode layout overrides allowed */
html:not(.dark) footer *,
html:not(.dark) footer.wp-block-group * {
  box-sizing: border-box;
}

html:not(.dark) footer .footer-clean,
html.dark footer .footer-clean {
  max-width: 80rem; /* same as max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem;
}

/* ===============================
   BRIGHT MODE FIX (FINAL)
   =============================== */

/* Card background */
body:not(.dark) .wp-block-group.bg-slate-900\/60 {
  background-color: #ffffff;
  border-color: #e5e7eb;
}

/* Remove inner block layering */
body:not(.dark) .wp-block-group.bg-slate-900\/60 > * {
  background: transparent !important;
}

/* OVERRIDE hard-coded dark text colors */
body:not(.dark) .wp-block-group.bg-slate-900\/60 .text-white {
  color: #0f172a !important; /* slate-900 */
}

body:not(.dark) .wp-block-group.bg-slate-900\/60 .text-slate-400 {
  color: #475569 !important; /* slate-600 */
}

body:not(.dark) .wp-block-group.bg-slate-900\/60 .text-slate-500 {
  color: #64748b !important; /* slate-500 */
}

/* Links */
body:not(.dark) .wp-block-group.bg-slate-900\/60 a {
  color: inherit;
}

/* Global page canvas — matches Contact */
html.dark :where(body, .wp-site-blocks, #page, main) {
  background-color: var(--slate-950) !important;
}

/* 🔒 HARD LOCK: make Blog + Single inherit Contact canvas */
html.dark body.blog,
html.dark body.single {
  --seo-conf-bg: var(--slate-950) !important;
}

html.dark .seo-conf-site-header,
html.dark header.wp-block-template-part.seo-conf-site-header,
html[data-theme="dark"] .seo-conf-site-header,
html[data-theme="dark"] header.wp-block-template-part.seo-conf-site-header {
  background-color: #020617 !important; /* slate-950 */
}

/* HEADER — correct background in BOTH modes */
html.dark .seo-conf-site-header,
html.dark header.wp-block-template-part.seo-conf-site-header {
  background-color: #020617 !important; /* dark */
}

html:not(.dark) .seo-conf-site-header,
html:not(.dark) header.wp-block-template-part.seo-conf-site-header {
  background-color: #ffffff !important; /* light */
  border-bottom: 1px solid #e5e7eb;
}

/* FOOTER — correct background in BOTH modes */
html.dark footer,
html.dark footer.wp-block-template-part {
  background-color: #020617 !important; /* slate-950 */
  color: #e2e8f0 !important;
}

html:not(.dark) footer,
html:not(.dark) footer.wp-block-template-part {
  background-color: #ffffff !important;
  color: #18181a !important;
  border-top: 1px solid #e5e7eb;
}

/* FOOTER — correct background in BOTH modes */
html.dark footer,
html.dark footer.wp-block-template-part {
  background-color: #020617 !important; /* slate-950 */
  color: #e2e8f0 !important;
}

html:not(.dark) footer,
html:not(.dark) footer.wp-block-template-part {
  background-color: #ffffff !important;
  color: #18181a !important;
  border-top: 1px solid #e5e7eb;
}

.seo-conf-select .seo-conf-select__option-check,
.seo-conf-select .seo-conf-select__option-check svg {
  opacity: 0;
  visibility: hidden;
}

.seo-conf-select .seo-conf-select__option[aria-selected="true"] .seo-conf-select__option-check,
.seo-conf-select .seo-conf-select__option[aria-selected="true"] .seo-conf-select__option-check svg {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
   Custom dropdown scrollbar — match design
   ===================================================== */

/* Firefox */
.seo-conf-select__menu {
  scrollbar-width: thin;
  scrollbar-color: var(--seo-conf-date-accent) rgba(148, 163, 184, 0.12);
}

/* WebKit (Chrome, Edge, Safari) */
.seo-conf-select__menu::-webkit-scrollbar {
  width: 8px;
}

.seo-conf-select__menu::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.12);
  border-radius: 999px;
}

.seo-conf-select__menu::-webkit-scrollbar-thumb {
  background-color: var(--seo-conf-date-accent);
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.6); /* blends into panel */
}

.seo-conf-select__menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--seo-conf-date-arrow-hover);
}

/* Chevron flip */
.seo-conf-select.is-open > .seo-conf-select__button .seo-conf-select__chevron {
  transform: rotate(180deg) !important;
  transition: transform 180ms ease !important;
  transform-origin: 50% 50%;
  display: block;
}

.seo-conf-select > .seo-conf-select__button .seo-conf-select__chevron {
  transition: transform 180ms ease !important;
}

/* Firefox */
.seo-conf-select.is-open > .seo-conf-select__menu {
  scrollbar-width: thin !important;
  scrollbar-color: var(--seo-conf-date-accent) rgba(148, 163, 184, 0.12) !important;
}

/* Chrome/Edge/Safari */
.seo-conf-select.is-open > .seo-conf-select__menu::-webkit-scrollbar {
  width: 10px !important;
}

.seo-conf-select.is-open > .seo-conf-select__menu::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.12) !important;
  border-radius: 999px !important;
}

.seo-conf-select.is-open > .seo-conf-select__menu::-webkit-scrollbar-thumb {
  background: var(--seo-conf-date-accent) !important;
  border-radius: 999px !important;
  border: 3px solid rgba(15, 23, 42, 0.8) !important;
}

.seo-conf-select.is-open > .seo-conf-select__menu::-webkit-scrollbar-thumb:hover {
  background: var(--seo-conf-date-arrow-hover) !important;
}

/* ===============================
   VISUAL ALIGNMENT PATCH (SAFE)
   DOES NOT CHANGE BACKGROUND COLOR
   =============================== */

/* ---- HERO OVERLAY REFINEMENT ---- */
.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0.15) 0%,
    rgba(2, 6, 23, 0.65) 100%
  );
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* ---- GLASS PANELS (LIGHTER, NO BORDERS) ---- */
.glass-panel,
.glass-card,
.format-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none;
  box-shadow: 0 20px 45px rgba(2, 6, 23, 0.45);
}

/* ---- FACT / INFO CARDS ---- */
.fact,
.fact-card {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
}

/* ---- SECTION SPACING (MATCH OLD WP SCALE) ---- */
article {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* ---- HERO TITLE TIGHTENING ---- */
.hero h1 {
  line-height: 1.05;
  font-weight: 800;
}

/* ---- REMOVE OVER-DARKENING BORDERS GLOBALLY ---- */
.border,
[class*="border-slate"],
[class*="border-white"] {
  border-color: transparent !important;
}

/* ---- BUTTON POLISH (NO COLOR CHANGE) ---- */
.seo-conf-btn-primary {
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.25);
}

.seo-conf-btn-primary:hover {
  transform: translateY(-1px);
}

/* ---- OVERVIEW CARD GLOW ---- */
.section-card--overview,
.event-overview {
  box-shadow: 0 40px 120px rgba(2, 6, 23, 0.8);
}

/* ---- TYPOGRAPHY BREATHING ROOM ---- */
p {
  line-height: 1.65;
}

/* ---- MOBILE SAFETY ---- */
@media (max-width: 768px) {
  article {
    gap: 3.5rem;
  }
}

body {
  background-color: #020617;
  color: #e2e8f0;
  font-family: "General Sans", "Space Grotesk", sans-serif;
}

.fact-card {
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(12px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
}

/* Normalize hero title width */
.single-conference h1 {
  max-width: 16ch;
}

/* Prevent low-contrast hero images from looking flat */
.single-conference section[style*="background-image"] {
  background-blend-mode: multiply;
}

/* Tighten Gutenberg content spacing to match Pubcon */
.single-conference .prose > * {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.single-conference .prose h2 {
  margin-top: 1.25em;
}

.single-conference section + section {
  margin-top: 1.5rem;
}

/* =====================================================
   SINGLE CONFERENCE — SAFE VISUAL NORMALIZATION
   No globals. No background overrides. No conflicts.
   ===================================================== */

/* -------------------------------
   HERO OVERLAY (SINGLE SOURCE)
-------------------------------- */
.single-conference .conference-hero {
  position: relative;
  overflow: hidden;
}

.single-conference .conference-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(2, 6, 23, 0.18) 0%,
    rgba(2, 6, 23, 0.65) 100%
  );
  z-index: 0;
}

.single-conference .conference-hero > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------
   HERO TITLE CONSTRAINT
-------------------------------- */
.single-conference .conference-hero h1 {
  max-width: 16ch;
  line-height: 1.05;
  font-weight: 800;
}

/* -------------------------------
   HERO SIDE CARD (FORMED)
-------------------------------- */
.single-conference .conference-hero .format-card,
.single-conference .conference-hero .glass-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: none;
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.55);
}

/* -------------------------------
   MAIN CONTENT STACK SPACING
-------------------------------- */
.single-conference article {
  display: flex;
  flex-direction: column;
  gap: 1.75rem; /* MATCHES PUBCON */
}

/* -------------------------------
   FACT / INFO CARDS GRID
-------------------------------- */
.single-conference .conference-facts {
  display: grid;
  gap: 0.75rem;
}

.single-conference .conference-facts .fact-card {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  box-shadow: 0 16px 38px rgba(2, 6, 23, 0.45);
}

/* -------------------------------
   SECTION CARDS (OVERVIEW, TICKETS)
-------------------------------- */
.single-conference .section-card {
  padding: 1.5rem;
  border: none;
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.85),
    rgba(15, 23, 42, 0.55)
  );
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.65);
}

/* -------------------------------
   GUTENBERG CONTENT NORMALIZATION
-------------------------------- */
.single-conference .prose > * {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.single-conference .prose h2 {
  margin-top: 1.25em;
}

.single-conference .prose ul {
  padding-left: 1.25rem;
}

/* -------------------------------
   SECTION-TO-SECTION RHYTHM
-------------------------------- */
.single-conference section + section {
  margin-top: 1.5rem;
}

/* -------------------------------
   HERO IMAGE CONTRAST SAFETY
-------------------------------- */
.single-conference section[style*="background-image"] {
  background-blend-mode: multiply;
}

/* -------------------------------
   MOBILE TIGHTENING
-------------------------------- */
@media (max-width: 768px) {
  .single-conference article {
    gap: 1.25rem;
  }

  .single-conference .section-card {
    padding: 1.25rem;
  }
}