/*
 * Brand palette — single source of truth.
 * Use these tokens (var(--bp-*)) for any new CSS in the project.
 * The theme's own palette variables (--global-palette*) are mapped to them below.
 */
:root {
  --bp-dark: #062290;     /* logo blue: menu bar, bands, panels */
  --bp-navy: #062290;     /* logo blue: text and headings on light backgrounds */
  --bp-yellow: #F6D13A;   /* logo yellow: accents, buttons, dividers */
  --bp-yellow-dark: #DDB82A;
  --bp-mist: #F5F7FA;     /* near-white: page background */
  --bp-white: #FFFFFF;

  --bp-text: var(--bp-navy);
  --bp-bg: var(--bp-mist);
  --bp-accent: var(--bp-yellow);
}

/* Map the WordPress/Kadence theme palette onto the brand tokens. */
:root {
  --global-palette1: var(--bp-yellow);    /* accent / buttons */
  --global-palette2: var(--bp-dark);
  --global-palette3: var(--bp-navy);      /* headings */
  --global-palette4: var(--bp-navy);      /* main body text */
  --global-palette7: #E3E8F1;
  --global-palette8: var(--bp-mist);      /* page background */
  --global-palette9: var(--bp-white);
  --global-palette-highlight: var(--bp-yellow);
  --global-palette-highlight-alt: var(--bp-yellow-dark);
  --global-palette-btn-bg: var(--bp-yellow);
  --global-palette-btn-bg-hover: var(--bp-yellow-dark);
  --global-palette-btn: var(--bp-dark);
  --global-palette-btn-hover: var(--bp-dark);
}

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

/* Links in page text: navy with a yellow underline (yellow text is unreadable on the light background). */
.entry-content a:not(.bp-btn):not(.bp-hero-logo) { color: var(--bp-navy); text-decoration-color: var(--bp-yellow); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* Page surfaces use the mist background. */
body,
.content-bg,
body.content-style-unboxed .site {
  background: var(--bp-bg);
}

/* Header: solid logo blue across the whole masthead, rows transparent. */
body #masthead,
body.transparent-header #masthead,
body.mobile-transparent-header #masthead {
  background: var(--bp-dark);
}
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 yellow square with a big dark 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(--bp-yellow);
  color: var(--bp-dark);
  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(--bp-white);
}
#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(--bp-yellow);
  text-decoration: underline;
  text-decoration-color: var(--bp-yellow);
  text-underline-offset: .4em;
}

/* Mobile drawer: dark navy panel, white links, yellow for the current/hovered item. */
#mobile-drawer .drawer-inner { background: var(--bp-dark); }
#mobile-drawer .mobile-navigation ul li a { color: var(--bp-white); }
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li a:hover { color: var(--bp-yellow); }
#mobile-drawer .drawer-header .drawer-toggle { color: var(--bp-yellow); }

/*
 * Hero: white block with the logo (original colours), 15% taller than the logo, with a sharp edge below.
 * --hero-logo-w drives everything; the logo's aspect ratio is 872:629.
 */
:root {
  --hero-logo-w: min(380px, 70vw);
  --hero-logo-h: calc(var(--hero-logo-w) * 629 / 872);
  --hero-header-h: 100px;  /* floating desktop menu bar */
}
@media (max-width: 1024px) {
  :root { --hero-header-h: 76px; }   /* mobile header: just the menu-button bar */
}
.bp-hero-logo { display: block; text-align: center; }
.bp-hero-logo img {
  display: block;
  margin: 0 auto;
  width: var(--hero-logo-w);
  height: auto;
}
body .kb-row-layout-wrap:has(.bp-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;
}

/* Hero split: logo on the left, vertical yellow divider, event info on the right. */
.bp-hero {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
.bp-hero .bp-hero-logo { flex: 0 0 auto; display: flex; align-items: center; }
.bp-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(--bp-yellow);
}
.bp-hero-info p {
  margin: 0;
  color: var(--bp-navy);
  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 info text all scale with the window, so the hero spans ~85% of its width. */
@media (min-width: 1025px) {
  :root { --hero-logo-w: 33vw; }
  .bp-hero-info { margin-left: 3vw; padding-left: 3vw; }
  .bp-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(.bp-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(.bp-hero-logo) { margin-top: 0 !important; }

/* Light surfaces blend softly: the white hero fades into the mist page background.
   Blue sections (menu bar, invitation band) always have sharp edges. */
body .kb-row-layout-wrap:has(.bp-hero-logo)::after {
  content: "";
  display: block;
  height: 64px;
  background: linear-gradient(to bottom, var(--bp-white), var(--bp-mist));
}

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

/* Invitation letter (home page): dark navy band with white text. */
.bp-letter-title.has-text-color { color: var(--bp-yellow) !important; }
.bp-letter-tagline { margin: 0 0 1rem; font-weight: 700; letter-spacing: .08em; color: var(--bp-yellow); font-size: clamp(1.15rem, 2.6vw, 1.75rem); line-height: 1.3; text-align: left; }
.bp-letter-sub { margin: 0 0 1.5rem; text-align: left; font-weight: 600; color: var(--bp-white); font-size: 1.25rem; }
.bp-letter p { margin: 0 0 1rem; }
.bp-letter p.has-text-color, .bp-letter p.has-text-color strong { color: var(--bp-white) !important; }
.kb-row-layout-wrap:has(.bp-letter) > .kt-row-column-wrap { grid-template-columns: minmax(0, 1fr) !important; }
.kb-row-layout-wrap:has(.bp-letter) { background-color: var(--bp-dark) !important; }

/* Invitation letter: blue band with sharp edges (the site uses no gradients). */
.kb-row-layout-wrap:has(.bp-letter) > .kt-row-column-wrap { padding-top: 3.5rem; padding-bottom: 3.5rem; }