/*
 * Krannon transparent sticky editorial header
 * --------------------------------------------------------------------
 * v1.3.5 — scrolled and solid states are now driven by the
 *          --krannon-header-* variables emitted by the Customizer.
 *          Behavior is unchanged for setups that did not touch the
 *          new controls (defaults equal the v1.3.4 chrome).
 */

.krannon-site-header {
  transition: background-color .26s ease,
              box-shadow .26s ease,
              border-color .26s ease,
              color .26s ease,
              backdrop-filter .26s ease;
}

body.krannon-has-transparent-header .krannon-site-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.admin-bar.krannon-has-transparent-header .krannon-site-header { top: 32px; }

body.krannon-has-transparent-header.krannon-has-visual-hero .krannon-main { padding-top: 0; }
body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-main {
  padding-top: var(--krannon-header-height, 86px);
}

/* ---- Default (top-of-page) text colors over a hero image ----------- */

body.krannon-has-transparent-header .krannon-brand-title,
body.krannon-has-transparent-header .krannon-navigation a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.32);
}

body.krannon-has-transparent-header .krannon-brand-subtitle {
  color: rgba(255,255,255,.76);
  text-shadow: 0 1px 12px rgba(0,0,0,.32);
}

body.krannon-has-transparent-header .krannon-mobile-toggle {
  color: #fff;
  border-color: rgba(255,255,255,.44);
  background: rgba(255,255,255,.08);
}

body.krannon-has-transparent-header .krannon-toggle-icon span,
body.krannon-has-transparent-header .krannon-toggle-icon span::before,
body.krannon-has-transparent-header .krannon-toggle-icon span::after { background: #fff; }

/* ---- Dropdown panels (always readable, even on transparent header) - */

body.krannon-has-transparent-header .krannon-navigation ul ul {
  background: color-mix(in srgb, var(--krannon-surface) 96%, transparent);
  border-color: var(--krannon-border);
  box-shadow: 0 18px 48px rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.krannon-has-transparent-header .krannon-navigation ul ul a {
  color: var(--krannon-text);
  text-shadow: none;
}

/* ---- Scrolling state (between top and "solid") --------------------- */

body.krannon-has-transparent-header.krannon-header-scrolling .krannon-site-header {
  background: color-mix(in srgb, var(--krannon-header-scrolled-bg, var(--krannon-surface)) 58%, transparent);
  border-bottom-color: color-mix(in srgb, var(--krannon-header-border, var(--krannon-border)) 60%, transparent);
  box-shadow: 0 10px 30px rgba(33, 30, 26, .06);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* Disable blur entirely if the user turned it off in the Customizer. */
body:not(.krannon-ui-header-blur).krannon-has-transparent-header.krannon-header-scrolling .krannon-site-header,
body:not(.krannon-ui-header-blur).krannon-has-transparent-header.krannon-header-solid .krannon-site-header,
body:not(.krannon-ui-header-blur).krannon-has-transparent-header.krannon-menu-open .krannon-site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- Solid (settled-after-scroll) and menu-open states ------------- */

body.krannon-has-transparent-header.krannon-header-solid .krannon-site-header,
body.krannon-has-transparent-header.krannon-menu-open .krannon-site-header {
  background: color-mix(in srgb, var(--krannon-header-scrolled-bg, var(--krannon-surface)) 96%, transparent);
  border-bottom-color: var(--krannon-header-border, var(--krannon-border));
  box-shadow: 0 12px 36px rgba(33, 30, 26, .08);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

body.krannon-has-transparent-header.krannon-header-solid .krannon-brand-title,
body.krannon-has-transparent-header.krannon-header-solid .krannon-navigation a,
body.krannon-has-transparent-header.krannon-menu-open .krannon-brand-title,
body.krannon-has-transparent-header.krannon-menu-open .krannon-navigation a {
  color: var(--krannon-header-scrolled-text, var(--krannon-text));
  text-shadow: none;
}

body.krannon-has-transparent-header.krannon-header-solid .krannon-brand-subtitle,
body.krannon-has-transparent-header.krannon-menu-open .krannon-brand-subtitle {
  color: var(--krannon-muted);
  text-shadow: none;
}

body.krannon-has-transparent-header.krannon-header-solid .krannon-mobile-toggle,
body.krannon-has-transparent-header.krannon-menu-open .krannon-mobile-toggle {
  color: var(--krannon-header-scrolled-text, var(--krannon-text));
  border-color: var(--krannon-header-border, var(--krannon-border));
  background: var(--krannon-header-scrolled-bg, var(--krannon-surface));
}

body.krannon-has-transparent-header.krannon-header-solid .krannon-toggle-icon span,
body.krannon-has-transparent-header.krannon-header-solid .krannon-toggle-icon span::before,
body.krannon-has-transparent-header.krannon-header-solid .krannon-toggle-icon span::after,
body.krannon-has-transparent-header.krannon-menu-open .krannon-toggle-icon span,
body.krannon-has-transparent-header.krannon-menu-open .krannon-toggle-icon span::before,
body.krannon-has-transparent-header.krannon-menu-open .krannon-toggle-icon span::after {
  background: var(--krannon-header-scrolled-text, var(--krannon-text));
}

/* ---- Logo treatment over visual hero vs scrolled ------------------- */

body.krannon-has-transparent-header .custom-logo-link img,
body.krannon-has-transparent-header .custom-logo {
  transition: filter .26s ease, opacity .26s ease;
}

body.krannon-has-transparent-header:not(.krannon-header-solid):not(.krannon-menu-open) .custom-logo-link img,
body.krannon-has-transparent-header:not(.krannon-header-solid):not(.krannon-menu-open) .custom-logo {
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.28));
}

/* ---- Hero compensates for the fixed header ------------------------- */

body.krannon-has-transparent-header .krannon-section-hero:first-child,
body.krannon-has-transparent-header .krannon-editorial-home-hero:first-child,
body.krannon-has-transparent-header .krannon-page-hero:first-child {
  padding-top: var(--krannon-header-height, 76px);
}

@media (max-width: 900px) {
  body.krannon-has-transparent-header .krannon-navigation {
    background: var(--krannon-surface);
    border-color: var(--krannon-border);
    box-shadow: 0 22px 52px rgba(33, 30, 26, .12);
  }
  body.krannon-has-transparent-header .krannon-navigation a {
    color: var(--krannon-text);
    text-shadow: none;
  }
  body.krannon-has-transparent-header .krannon-section-hero:first-child,
  body.krannon-has-transparent-header .krannon-editorial-home-hero:first-child,
  body.krannon-has-transparent-header .krannon-page-hero:first-child {
    padding-top: var(--krannon-header-height-mobile, 64px);
  }
}

@media (max-width: 782px) {
  body.admin-bar.krannon-has-transparent-header .krannon-site-header { top: 46px; }
}

/* ---- v1.3.4 behavior preserved: pages without a visual hero ------- */

body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-brand-title,
body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-navigation a {
  color: var(--krannon-header-text, var(--krannon-text));
  text-shadow: none;
}

body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-brand-subtitle {
  color: var(--krannon-muted);
  text-shadow: none;
}

body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-mobile-toggle {
  color: var(--krannon-header-text, var(--krannon-text));
  border-color: var(--krannon-header-border, var(--krannon-border));
  background: color-mix(in srgb, var(--krannon-header-bg, var(--krannon-surface)) 42%, transparent);
}

body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-toggle-icon span,
body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-toggle-icon span::before,
body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-toggle-icon span::after {
  background: var(--krannon-header-text, var(--krannon-text));
}

body.krannon-has-transparent-header.krannon-no-visual-hero:not(.krannon-header-solid):not(.krannon-menu-open) .custom-logo-link img,
body.krannon-has-transparent-header.krannon-no-visual-hero:not(.krannon-header-solid):not(.krannon-menu-open) .custom-logo {
  filter: none;
}

@media (max-width: 900px) {
  body.krannon-has-transparent-header.krannon-no-visual-hero .krannon-main {
    padding-top: var(--krannon-header-height-mobile, 78px);
  }
}