/* =========================================================
   Site header
   Layout: [ menu + logo ] ........ [ (Order Now) search account cart ]
   Two versions in /parts:
     header.html       every page except the homepage (has Order Now)
     header-home.html  homepage: transparent over the hero, cream logo and
                       icons, turns Espresso after scrolling past the hero.
                       Give the homepage hero block the class rr-hero.
   Words come from Settings > Roasted Root > Header, never this file.
   ========================================================= */

/* Sticky cream bar. Sits below the WordPress admin bar when logged in.
   No blur (backdrop-filter) here on purpose: it would trap the slide-out
   cart and the menu overlay inside the header, which pushes the cart past
   the screen edge (sideways scrolling) and shrinks the open menu. */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 70;
  background: var(--cream);
}

/* Full-width header on every screen size: a traditional bar with a thin line
   underneath. The logo and icons stay on the 1200px content width, lined up
   with the page content below. Turns Espresso with cream elements once you
   scroll (assets/js/header.js adds .is-scrolled). */
.site-header.has-global-padding { padding: 0; }
.site-header > :is(.rr-announcement, .site-header__bar) { max-width: none; }
/* WordPress puts its block gap (24px) between the blocks in a group, which
   would open a gap between the announcement and the nav bar. They sit flush. */
.site-header > .site-header__bar { margin-block-start: 0 !important; }

.site-header__bar {
  box-sizing: border-box;
  min-height: 84px;
  gap: 24px;
  /* 100% = the screen width, so the content lines up with the page's content edges */
  padding-inline: max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--content-size, 1200px)) / 2));
  border-bottom: 1px solid color-mix(in srgb, var(--espresso) 12%, transparent);
  background: var(--cream);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.site-header__left { gap: 14px; min-width: 0; }
.site-header__right { gap: 12px; }

/* Logo: the uploaded logo, swapped for the cream one on Espresso */
.site-header__logo img { width: 190px; max-width: 100%; height: auto; }
.site-header__logo--cream,
.site-header__logo--color { margin: 0; }
.site-header__logo--color img { display: block; width: 190px; height: auto; }
.site-header:not(.is-overlay) .site-header__logo--cream { display: none; }

/* Announcement bar: a small rounded Terracotta strip, per the framed layout rule.
   The plugin removes this whole block when the setting is blank. */
/* Hidden when the announcement setting is blank. */
.rr-announcement:has(> .rr-announcement__text:empty) { display: none; }
/* Framed like the hero and banners: same width and corner radius, with a
   thin gap below it (the hero's top spacing accounts for it, header.js). */
/* Inner pages: a full-width strip across the very top, square corners, the
   same width as the nav bar below it (cream or Espresso). The homepage frames
   it instead, so it joins the hero (homepage.css).
   !important: the header's layout rules force "auto" side margins on its
   children. */
.site-header > .rr-announcement {
  margin: 0 !important;
  max-width: none;
  border-radius: 0;
  overflow: hidden;
}

/* Once scrolling begins, the announcement tucks away: the header moves up by
   exactly the announcement's height (--rr-bar-offset, measured in header.js),
   so the nav bar sits flush at the very top with no gap. Moving the header
   instead of removing the bar keeps the page from jumping. */
.wp-site-blocks > header.wp-block-template-part {
  top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--rr-bar-offset, 0px));
}
@media (max-width: 600px) {
  .wp-site-blocks > header.wp-block-template-part { top: calc(-1 * var(--rr-bar-offset, 0px)); }
}
.rr-announcement {
  background: var(--terracotta);
  color: var(--cream);
}
.rr-announcement__text {
  margin: 0;
  padding: 9px 16px;
  font-family: var(--font-archivo-narrow);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rr-announcement__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rr-announcement__text a:hover { color: var(--wheat); }

/* Menu button + overlay menu (hamburger on every screen size) */
.site-header__nav .wp-block-navigation__responsive-container-open {
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--espresso) 15%, transparent);
  border-radius: var(--radius-sm);
  color: var(--espresso);
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--40);
}
.site-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--font-drummond);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-decoration: none;
}
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .current-menu-item > .wp-block-navigation-item__content { color: var(--terracotta); }

/* Icon buttons: search, account, cart share one look */
.site-header__search .wp-block-search__button,
.site-header__account a,
.site-header__cart .wc-block-mini-cart__button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--espresso) 15%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--espresso);
  box-shadow: none;
  transition: background-color var(--ease), color var(--ease);
}
.site-header__search .wp-block-search__button:hover,
.site-header__account a:hover,
.site-header__cart .wc-block-mini-cart__button:hover { background: var(--wheat); color: var(--espresso); }
.site-header__search .wp-block-search__button svg,
.site-header__account svg { width: 22px; height: 22px; fill: currentColor; }

/* Expanding search field */
.site-header__search .wp-block-search__input {
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--espresso) 15%, transparent);
  border-radius: var(--radius-sm);
  background: var(--white-warm);
  padding-inline: 14px;
  font-family: var(--font-archivo);
}

/* Cart count badge */
.site-header__cart .wc-block-mini-cart__badge {
  background: var(--terracotta);
  color: var(--cream);
  font-family: var(--font-archivo);
  font-weight: 800;
}

/* =========================================================
   Homepage overlay header
   Transparent over the dark hero with cream elements. Once you scroll
   past the hero (assets/js/header.js adds .is-scrolled), the bar fills
   with Espresso and stays cream.
   ========================================================= */
.wp-site-blocks > header.wp-block-template-part:has(.is-overlay) {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  transition: background-color 0.25s ease;
}
.is-overlay .site-header__bar { background: transparent; border-bottom-color: color-mix(in srgb, var(--cream) 20%, transparent); }
.is-overlay .site-header__logo--cream img { display: block; width: 190px; height: auto; }
.is-overlay :is(
  .site-header__nav .wp-block-navigation__responsive-container-open,
  .site-header__search .wp-block-search__button,
  .site-header__account a,
  .site-header__cart .wc-block-mini-cart__button
) {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 35%, transparent);
}
.is-overlay :is(
  .site-header__search .wp-block-search__button,
  .site-header__account a,
  .site-header__cart .wc-block-mini-cart__button
):hover {
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  color: var(--cream);
}
/* ---------- Scrolled: Espresso bar, cream elements (every header) ---------- */
.is-scrolled .site-header__bar { background: var(--espresso); border-color: var(--espresso); }
.is-scrolled :is(
  .site-header__nav .wp-block-navigation__responsive-container-open,
  .site-header__search .wp-block-search__button,
  .site-header__account a,
  .site-header__cart .wc-block-mini-cart__button
) {
  color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 35%, transparent);
}
.is-scrolled :is(
  .site-header__search .wp-block-search__button,
  .site-header__account a,
  .site-header__cart .wc-block-mini-cart__button
):hover { background: color-mix(in srgb, var(--cream) 14%, transparent); color: var(--cream); }
.is-scrolled .site-header__order .wp-block-button__link { --line: var(--cream); }
.is-scrolled .site-header:not(.is-overlay) .site-header__logo--color { display: none; }
.is-scrolled .site-header:not(.is-overlay) .site-header__logo--cream { display: block; }
.site-header__logo--cream img { display: block; width: 190px; height: auto; }

/* The open menu itself stays cream with Espresso text */
.is-overlay .wp-block-navigation__responsive-container.is-menu-open { color: var(--espresso); }

/* Phones: smaller logo and buttons, hide Order Now (the menu and cart cover it).
   Everything must fit a 360px-wide screen in one row.
   Order Now needs the longer selector: WordPress's own layout rule
   (body .is-layout-flex) loads later and would otherwise show it again. */
@media (max-width: 600px) {
  .site-header__bar { min-height: 68px; gap: 10px; }
  .site-header__left { gap: 10px; }
  .site-header__right { gap: 6px; }
  .site-header .site-header__logo img,
  .site-header .site-header__logo--cream img,
  .site-header .site-header__logo--color img { width: 112px; }
  .site-header .site-header__order.wp-block-buttons { display: none; }
  .site-header__nav .wp-block-navigation__responsive-container-open,
  .site-header__search .wp-block-search__button,
  .site-header__account a,
  .site-header__cart .wc-block-mini-cart__button { width: 40px; height: 40px; }
}