/**
 * Site Header: front end styles (also loaded in the editor preview).
 *
 * The header's base look comes from assets/css/style.css ("header shell"
 * and the rules after it). This file adds the block's options on top. Block
 * styles print before style.css, so every rule here starts with
 * .pf-header-block to outrank the theme rule it changes.
 *
 * Wrapper: display:contents, so the <header>, the overlay and the drawers
 * behave as direct children of the page (sticky keeps working). Custom
 * properties set on it still reach everything inside.
 *
 * Colours: CSS variables set by render.php from the Styles tab. Empty =
 * the fallback after the comma, which is the theme's look today.
 *   --pf-hdr-bar-bg            header bar background
 *   --pf-hdr-menu-text         menu links, Menu button, logo text
 *   --pf-hdr-menu-hover        menu link and Menu button hover background
 *   --pf-hdr-icon / -hover     search and cart icons
 *   --pf-hdr-badge-bg / -text  cart count badge
 *   --pf-hdr-panel-bg          mega panel and mobile menu background
 *   --pf-hdr-panel-text        column titles, support card text, view all
 *   --pf-hdr-divider           line under each column title
 *   --pf-hdr-link / -hover     sub menu links and their hover background
 *   --pf-hdr-support-bg / -border / -icon / -icon-bg   support card
 * Internal (no setting; the light transparent style sets them):
 *   --pf-hdr-suffix / -suffix-line   "Shop" link next to the logo, its divider
 *
 * States (classes on the wrapper, from render.php and view.js):
 *   .pf-header-block--static       not sticky
 *   .pf-header-block--transparent  over the hero, see-through
 *   .pf-header-block--fixed        transparent and sticky: fixed at the top
 *   .is-scrolled                   page scrolled past 10px (fixed only)
 *   .pf-header-block--light        transparent with white text
 *   .has-light-logo                a white logo was uploaded
 *   .is-solid                      transparent header scrolled (fixed) or with a menu, search,
 *                                  cart or mobile menu open: solid again
 */
.pf-header-block{display:contents}

/* The template part around the block (parts/header*.html, tagName "div")
   gets out of the way too: a sticky element only sticks inside its
   parent's box, and that box would be just the header's height. */
.wp-block-template-part:has(> .pf-header-block){display:contents}

/* ---------- sticky ---------- */
.pf-header-block--static .pf-site-header{position:relative;top:auto}

/* ---------- header bar ---------- */
.pf-header-block .pf-site-header,
.pf-header-block .pf-header-bar{background:var(--pf-hdr-bar-bg, var(--pf-bg))}
.pf-header-block .pf-primary-nav-link,
.pf-header-block .pf-menu-toggle,
.pf-header-block .pf-logo-text{color:var(--pf-hdr-menu-text, var(--pf-text))}
.pf-header-block .pf-primary-nav-link:hover,
.pf-header-block .pf-primary-nav-link:focus-visible,
.pf-header-block .pf-primary-nav-link[aria-expanded="true"],
.pf-header-block .pf-menu-toggle:hover{background:var(--pf-hdr-menu-hover, var(--pf-hover))}
.pf-header-block .pf-logo-suffix{color:var(--pf-hdr-suffix, var(--pf-text-soft))}
.pf-header-block .pf-logo-suffix::before{background:var(--pf-hdr-suffix-line, var(--pf-line))}

/* Search and cart icons (not the drawers' close buttons). */
.pf-header-block .pf-header-actions .pf-icon-button{color:var(--pf-hdr-icon, var(--pf-text))}
.pf-header-block .pf-header-actions .pf-icon-button:hover{color:var(--pf-hdr-icon-hover, var(--pf-text-soft))}
.pf-header-block .pf-cart-count{
  background:var(--pf-hdr-badge-bg, var(--pf-brand));
  color:var(--pf-hdr-badge-text, var(--pf-text));
}

/* ---------- mega panel ---------- */
.pf-header-block .pf-mega-menu{background:var(--pf-hdr-panel-bg, var(--pf-bg))}
.pf-header-block .pf-menu-column-title{
  color:var(--pf-hdr-panel-text, var(--pf-text));
  border-bottom-color:var(--pf-hdr-divider, var(--pf-brand));
}
.pf-header-block .pf-menu-column li a{color:var(--pf-hdr-link, var(--pf-text-soft))}
.pf-header-block .pf-menu-column li a:hover{
  background:var(--pf-hdr-link-hover, var(--pf-hover));
  color:var(--pf-hdr-link, var(--pf-text));
}
.pf-header-block .pf-menu-view-all{color:var(--pf-hdr-panel-text, var(--pf-text))}

/* Support card (mega panel and mobile menu). */
.pf-header-block .pf-menu-support,
.pf-header-block .pf-drawer-support{
  background:var(--pf-hdr-support-bg, var(--pf-hover));
  border-color:var(--pf-hdr-support-border, var(--pf-line));
  color:var(--pf-hdr-panel-text, var(--pf-text));
}
.pf-header-block .pf-menu-support__text,
.pf-header-block .pf-drawer-support__text{color:var(--pf-hdr-panel-text, var(--pf-text-soft))}
.pf-header-block .pf-menu-support__icon{
  background:var(--pf-hdr-support-icon-bg, var(--pf-bg));
  border-color:var(--pf-hdr-support-border, var(--pf-line));
}
.pf-header-block .pf-menu-support__icon svg{stroke:var(--pf-hdr-support-icon, var(--pf-brand))}

/* ---------- mobile menu: same colours as the mega panel ---------- */
.pf-header-block .pf-mobile-drawer{
  background:var(--pf-hdr-panel-bg, var(--pf-bg));
  color:var(--pf-hdr-panel-text, var(--pf-text));
}
.pf-header-block .pf-drawer-level a:hover,
.pf-header-block .pf-drawer-level button.pf-drawer-row:hover{background:var(--pf-hdr-link-hover, var(--pf-hover))}
.pf-header-block .pf-drawer-level .pf-drawer-sublist a,
.pf-header-block .pf-drawer-level-root .pf-drawer-links a{color:var(--pf-hdr-link, var(--pf-text-soft))}
.pf-header-block .pf-drawer-subtitle{
  color:var(--pf-hdr-panel-text, var(--pf-text));
  border-bottom-color:var(--pf-hdr-divider, var(--pf-brand));
}
.pf-header-block .pf-drawer-level a.pf-drawer-viewall{color:var(--pf-hdr-panel-text, var(--pf-text))}
.pf-header-block .pf-drawer-level a.pf-drawer-viewall:hover,
.pf-header-block .pf-drawer-level a.pf-drawer-support__link:hover{background:none}

/* ---------- touch screens: no hover look left behind after a tap ----------
   The base rules in assets/css/style.css apply :hover everywhere; on touch
   screens this puts every hover back to its resting look (an open menu
   button keeps its aria-expanded background). */
@media (hover:none){
  .pf-header-block .pf-primary-nav-link:hover:not(:focus-visible):not([aria-expanded="true"]),
  .pf-header-block .pf-menu-toggle:hover,
  .pf-header-block .pf-drawer-level a:hover,
  .pf-header-block .pf-drawer-level button.pf-drawer-row:hover{background:none}
  .pf-header-block .pf-header-actions .pf-icon-button:hover{color:var(--pf-hdr-icon, var(--pf-text))}
  .pf-header-block .pf-menu-column li a:hover{background:none;color:var(--pf-hdr-link, var(--pf-text-soft))}
}

/* ---------- transparent over the hero (Tesla style) ----------
   Sits on top of the first section instead of above it, scrolls away with
   the page, and turns solid while anything of it is open. Placed after the
   colour rules on purpose (same strength, later wins). */
.pf-header-block--transparent .pf-site-header{
  position:absolute;top:var(--wp-admin--admin-bar--height, 0px);left:0;right:0;
  background:transparent;
}
.pf-header-block--transparent .pf-header-bar{
  background:transparent;
  transition:background .2s var(--pf-ease);
}
.pf-header-block--transparent.is-solid .pf-site-header,
.pf-header-block--transparent.is-solid .pf-header-bar{background:var(--pf-hdr-bar-bg, var(--pf-bg))}

/* Transparent and sticky (shop.tesla.com style): fixed over the hero, so
   it stays on screen; view.js adds .is-scrolled (and so .is-solid) once
   the page is scrolled a little. */
.pf-header-block--transparent.pf-header-block--fixed .pf-site-header{position:fixed}
/* Phones: WordPress's admin bar scrolls away there, so stick to the very top. */
@media (max-width:600px){
  .pf-header-block--transparent.pf-header-block--fixed .pf-site-header{top:0}
}

/* Light text: white bar content while see-through. Setting the variables on
   the bar overrides the colour settings only there and only then. */
.pf-header-block--light:not(.is-solid) .pf-header-bar{
  --pf-hdr-menu-text:#fff;
  --pf-hdr-menu-hover:rgba(255,255,255,.16);
  --pf-hdr-icon:#fff;
  --pf-hdr-icon-hover:rgba(255,255,255,.75);
  --pf-hdr-suffix:#fff;
  --pf-hdr-suffix-line:rgba(255,255,255,.5);
}
.pf-header-block--light:not(.is-solid) .pf-primary-nav-link:focus-visible{outline-color:#fff}

/* White logo: shown instead of the normal one while see-through. */
.pf-header-block .pf-logo-link > a.pf-logo-light{display:none}
.pf-header-block--light.has-light-logo:not(.is-solid) .pf-logo-link > a:not(.pf-logo-light){display:none}
.pf-header-block--light.has-light-logo:not(.is-solid) .pf-logo-link > a.pf-logo-light{display:flex}

@media (prefers-reduced-motion:reduce){
  .pf-header-block--transparent .pf-header-bar,
  .pf-header-block--transparent .pf-site-header{transition:none}
}