/*
 * ProEU brand palette — single source of truth.
 * Use these tokens (var(--proeu-*)) for any new CSS in the project.
 * The theme's own palette variables (--global-palette*) are mapped to them below.
 */
:root {
  --proeu-blue: #71C5E8;   /* light blue: accents, buttons, footer gradient (bottom) */
  --proeu-mist: #F5F8FA;   /* near-white: page background, footer gradient (top) */
  --proeu-navy: #012169;   /* main text colour, headings */
  --proeu-white: #FFFFFF;

  --proeu-text: var(--proeu-navy);
  --proeu-bg: var(--proeu-mist);
  --proeu-accent: var(--proeu-blue);
  --proeu-gradient: linear-gradient(to top, var(--proeu-blue), var(--proeu-mist));          /* blue at bottom (footer) */
  --proeu-gradient-reverse: linear-gradient(to bottom, var(--proeu-blue), var(--proeu-mist)); /* blue on top (hero fade) */
}

/* Map the WordPress/Kadence theme palette onto the brand tokens. */
:root {
  --global-palette1: var(--proeu-blue);   /* accent / links / buttons */
  --global-palette3: var(--proeu-navy);   /* headings */
  --global-palette4: var(--proeu-navy);   /* main body text */
  --global-palette8: var(--proeu-mist);   /* page background */
  --global-palette9: var(--proeu-white);
  --global-palette-highlight: var(--proeu-blue);
  --global-palette-btn-bg: var(--proeu-blue);
}

body { color: var(--proeu-text); }

/* Page surfaces use the mist background so the footer gradient blends into the page. */
body,
.content-bg,
body.content-style-unboxed .site {
  background: var(--proeu-bg);
}

/* Header: solid brand blue across the whole masthead, rows transparent. */
body #masthead,
body.transparent-header #masthead,
body.mobile-transparent-header #masthead {
  background: var(--proeu-blue);
}
body #masthead .site-header-row-container-inner,
body.transparent-header #masthead .site-top-header-wrap .site-header-row-container-inner,
body.transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner,
body.mobile-transparent-header #masthead .site-top-header-wrap .site-header-row-container-inner,
body.mobile-transparent-header #masthead .site-main-header-wrap .site-header-row-container-inner {
  background: transparent;
}
/* Mobile menu button: solid navy square with a big white icon so it is easy to spot and tap. */
#masthead .menu-toggle-open,
#masthead .menu-toggle-open:hover,
#masthead .menu-toggle-open:focus {
  background: var(--proeu-navy);
  color: var(--proeu-white);
  border-radius: 10px;
  padding: .6rem;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#masthead .menu-toggle-open .kadence-svg-icon,
#masthead .menu-toggle-open .menu-toggle-icon svg {
  width: 30px;
  height: 30px;
}
/* The mobile header's second row is empty; drop it so the header is just the menu bar. */
#mobile-header .site-main-header-wrap { display: none; }
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a {
  color: var(--proeu-text);
}
#masthead .header-navigation .header-menu-container > ul > li.menu-item.current-menu-item > a,
#masthead .header-navigation .header-menu-container > ul > li.menu-item > a:hover {
  color: var(--proeu-text);
  text-decoration: underline;
  text-underline-offset: .4em;
}
#masthead .header-social-wrap .header-social-inner-wrap { gap: .75rem; }
#masthead .header-social-wrap .social-button {
  background: transparent;
  border: 0;
  color: var(--proeu-text);
  cursor: default;
}
#masthead .header-social-wrap .proeu-social-icon { width: 22px; height: 22px; display: block; }

/*
 * Hero: solid blue block, 15% taller than the logo (measured below the header), then a fade to mist.
 * --hero-logo-w drives everything; the logo's aspect ratio is 1063:680.
 */
:root {
  --hero-logo-w: min(380px, 70vw);
  --hero-logo-h: calc(var(--hero-logo-w) * 680 / 1063);
  --hero-header-h: 100px;  /* floating desktop menu bar */
  --hero-fade: 64px;
}
@media (max-width: 1024px) {
  :root { --hero-header-h: 76px; }   /* mobile header: just the menu-button bar */
}
.proeu-hero-logo { display: block; text-align: center; }
.proeu-hero-logo img {
  display: block;
  margin: 0 auto;
  width: var(--hero-logo-w);
  height: auto;
}
body .kb-row-layout-wrap:has(.proeu-hero-logo) > .kt-row-column-wrap {
  /* clear the floating header, then 7.5% of the logo height above and below the logo */
  padding-top: calc(var(--hero-header-h) + var(--hero-logo-h) * 0.075);
  padding-bottom: calc(var(--hero-logo-h) * 0.075);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
body .kb-row-layout-wrap:has(.proeu-hero-logo)::after {
  content: "";
  display: block;
  position: relative;
  z-index: 1;
  height: var(--hero-fade);
  background: var(--proeu-gradient-reverse);
}

/* Hero split: logo on the left, vertical divider, venue info on the right. */
.proeu-hero {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.proeu-hero .proeu-hero-logo { flex: 0 0 auto; display: flex; align-items: center; }
.proeu-hero-info {
  display: flex;
  align-items: center;
  margin-left: clamp(1rem, 3vw, 2.5rem);
  padding-left: clamp(1rem, 3vw, 2.5rem);
  border-left: 3px solid var(--proeu-navy);
}
.proeu-hero-info p {
  margin: 0;
  color: var(--proeu-text);
  font-family: var(--global-heading-font-family);
  font-weight: 600;
  font-size: clamp(1.1rem, 3.2vw, 2.5rem);
  line-height: 1.35;
  text-align: left;
}
@media (max-width: 600px) {
  :root { --hero-logo-w: 42vw; }
}
/* Desktop: logo, divider gap and venue text all scale with the window, so the hero spans ~85% of its width. */
@media (min-width: 1025px) {
  :root { --hero-logo-w: 33vw; }
  .proeu-hero-info { margin-left: 3vw; padding-left: 3vw; }
  .proeu-hero-info p { font-size: 3.5vw; }
  /* Not limited to the theme's 1290px content width, or the text wraps on wide screens. */
  body .kb-row-layout-wrap:has(.proeu-hero-logo) > .kt-row-column-wrap { max-width: none; }
}
/* The theme puts a 48px top margin on the first block; the hero already clears the header itself. */
body .kb-row-layout-wrap:has(.proeu-hero-logo) { margin-top: 0 !important; }

/* Elements that should only show on desktop (same breakpoint as the mobile header). */
@media (max-width: 1024px) {
  .proeu-desktop-only { display: none !important; }
}

/* Invitation letter (home page). */
.proeu-letter-sub { margin: 0 0 .25rem; font-weight: 600; color: var(--proeu-navy); font-size: 1.25rem; }
.proeu-letter-tagline { margin: 0 0 1.5rem; font-weight: 700; letter-spacing: .08em; color: var(--proeu-navy); font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.2; }
.proeu-letter p { margin: 0 0 1rem; }
.kb-row-layout-wrap:has(.proeu-letter) > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr) !important; }

/* Invitation letter: blue band that fades in from, and out to, the mist page background. */
.kb-row-layout-wrap:has(.proeu-letter)::before,
.kb-row-layout-wrap:has(.proeu-letter)::after {
  content: "";
  display: block;
  height: var(--hero-fade);
}
.kb-row-layout-wrap:has(.proeu-letter)::before { background: var(--proeu-gradient); }          /* mist -> blue */
.kb-row-layout-wrap:has(.proeu-letter)::after  { background: var(--proeu-gradient-reverse); }  /* blue -> mist */
.kb-row-layout-wrap:has(.proeu-letter) > .kt-row-column-wrap { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* The theme forces this heading white with !important; the letter title is navy. */
.proeu-letter-title.has-text-color { color: var(--proeu-navy) !important; }

/* Single speaker / person pages: the title banner uses the brand blue fading to mist, with navy text. */
/* Solid blue under the floating header, then the fade, so there is no step at the header's edge. */
.entry-hero .entry-hero-container-inner,
.entry-hero.post-hero-section .entry-hero-container-inner {
  background: linear-gradient(to bottom, var(--proeu-blue) 0, var(--proeu-blue) var(--hero-header-h), var(--proeu-mist) 100%);
}
/* Same total height as the home hero (header bar + 115% of the logo + fade). */
.entry-hero.post-hero-section .entry-hero-container-inner { padding: 0 !important; }
.entry-hero.post-hero-section .entry-header {
  min-height: calc(var(--hero-header-h) + var(--hero-logo-h) * 1.15 + var(--hero-fade)) !important;
}
.entry-hero .hero-section-overlay { background: transparent; opacity: 0; }
.entry-hero .entry-title,
.entry-hero h1 {
  color: var(--proeu-navy);
}
body .entry-hero .post-title h1.entry-title { color: var(--proeu-navy); }

/* Desktop dropdown (Predavači). Top-level links stay navy; the open panel is navy with white text,
   and a hovered item turns its text light blue while the panel stays navy. */
#masthead .header-navigation .header-menu-container ul ul.sub-menu {
  background: var(--proeu-navy);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
#masthead .header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a {
  color: var(--proeu-white);
  text-decoration: none;
}
#masthead .header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul.sub-menu li.menu-item > a:focus-visible {
  background: var(--proeu-navy);
  color: var(--proeu-blue);
}
#masthead .header-navigation .menu-item-has-children:hover > ul.sub-menu,
#masthead .header-navigation .menu-item-has-children:focus-within > ul.sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
#masthead .header-navigation .dropdown-nav-toggle { color: var(--proeu-navy); }