/* =============================================================================
   Mueller's Premium Header — premium-header.css
   Version: 1.0.4

   Only classes prefixed with mrp-premium- are styled here.
   No generic element selectors (header, nav, a, button, img, body, etc.).
   ============================================================================= */

/* ── Custom properties ──────────────────────────────────────────────────────── */
:root {
  --mrp-header-bg-transparent: rgba(0, 0, 0, 0.45);
  --mrp-header-bg-solid: #000000;
  --mrp-header-height: clamp(56px, 8vh, 72px);
  --mrp-header-z: 1000;
  --mrp-nav-color: #ffffff;
  --mrp-nav-color-muted: rgba(255, 255, 255, 0.72);
  --mrp-transition-bg: background-color 0.25s ease, box-shadow 0.25s ease;
}

.mrp-premium-search-overlay[hidden],
.mrp-premium-drawer[hidden],
.mrp-premium-more-menu[hidden] {
  display: none !important;
}

/* ── Screen-reader utility ──────────────────────────────────────────────────── */
.mrp-premium-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Body push-down ─────────────────────────────────────────────────────────── */
body.mrp-premium-has-header {
  padding-top: var(--mrp-header-height);
}

/* ── Header shell ───────────────────────────────────────────────────────────── */
.mrp-premium-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--mrp-header-height);
  z-index: var(--mrp-header-z);
  background: var(--mrp-header-bg-solid);
  will-change: transform;
  transition: var(--mrp-transition-bg), transform 0.24s ease;
}

.mrp-premium-header--transparent {
  background: var(--mrp-header-bg-transparent);
  box-shadow: none;
}

.mrp-premium-header--solid {
  background: var(--mrp-header-bg-solid);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Scroll-direction hide state (applied by JS on homepage mobile only) */
.mrp-premium-header--hidden {
  transform: translate3d(0, -110%, 0);
}

/* WordPress admin bar offset */
.admin-bar .mrp-premium-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .mrp-premium-header {
    top: 46px;
  }
}

/* ── Header bar: three-zone flex layout ─────────────────────────────────────── */
.mrp-premium-header__bar {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.5rem;
  gap: 1rem;
}

.mrp-premium-header__start,
.mrp-premium-header__end {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.mrp-premium-header__start {
  justify-content: flex-start;
}

.mrp-premium-header__end {
  justify-content: flex-end;
}

/* ── Logo ───────────────────────────────────────────────────────────────────── */
/*
 * All logo rules are scoped to #mrp-premium-header so they outspecify broad
 * theme and WooCommerce img rules without relying on the stylesheet load order.
 * The PHP template renders only the <img> OR the <span>, never both, so no
 * CSS show/hide toggling is needed here.
 */
#mrp-premium-header .mrp-premium-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 16vw, 220px);
  height: 46px;
  max-width: 220px;
  max-height: 46px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

#mrp-premium-header .mrp-premium-logo:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 2px;
}

#mrp-premium-header .mrp-premium-logo__img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 220px !important;
  max-height: 38px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mrp-premium-header .mrp-premium-logo__fallback {
  display: block;
  font-size: clamp(1.2rem, 2vw, 1.7rem) !important;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--mrp-nav-color);
  text-decoration: none;
  text-transform: uppercase;
  max-width: 220px;
  line-height: 1 !important;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

@media (max-width: 59.9375rem) {
  #mrp-premium-header .mrp-premium-logo {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    justify-self: center;
    max-width: 180px;
  }

  #mrp-premium-header .mrp-premium-logo__img {
    max-width: 180px !important;
    max-height: 34px !important;
  }
}

/* ── Desktop navigation ─────────────────────────────────────────────────────── */
.mrp-premium-nav {
  display: flex;
  align-items: center;
}

.mrp-premium-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.mrp-premium-nav ul>li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.mrp-premium-nav ul>li>a {
  display: flex;
  align-items: center;
  height: var(--mrp-header-height);
  padding: 0 0.875rem;
  color: var(--mrp-nav-color);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.mrp-premium-nav ul>li>a:hover {
  color: var(--mrp-nav-color-muted);
}

.mrp-premium-nav ul>li>a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  border-radius: 2px;
}

/* ── Nav buttons: Search and More ───────────────────────────────────────────── */
.mrp-premium-search-btn,
.mrp-premium-more-btn {
  display: flex;
  align-items: center;
  height: var(--mrp-header-height);
  padding: 0 0.875rem;
  background: none;
  border: none;
  color: var(--mrp-nav-color);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease;
}

.mrp-premium-search-btn:hover,
.mrp-premium-more-btn:hover {
  color: var(--mrp-nav-color-muted);
}

.mrp-premium-search-btn:focus-visible,
.mrp-premium-more-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  border-radius: 2px;
}

/* ── Financing / More toggle ────────────────────────────────────────────────── */
/* Wide: show Financing, hide More */
.mrp-premium-item--more {
  display: none;
}

/* Narrow desktop (≤ 1120px): hide Financing, show More */
@media (max-width: 70rem) {
  .mrp-premium-item--financing {
    display: none;
  }

  .mrp-premium-item--more {
    display: list-item;
  }
}

/* ── More dropdown menu ─────────────────────────────────────────────────────── */
.mrp-premium-more-menu {
  position: absolute;
  top: calc(var(--mrp-header-height) - 4px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  min-width: 140px;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.mrp-premium-more-menu>li {
  list-style: none;
  margin: 0;
}

.mrp-premium-more-menu>li>a {
  display: block;
  padding: 0.625rem 1rem;
  color: var(--mrp-nav-color);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.mrp-premium-more-menu>li>a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mrp-premium-more-menu>li>a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 2px;
}

/* ── Mobile controls: hidden on desktop ─────────────────────────────────────── */
.mrp-premium-menu-btn,
.mrp-premium-call-link {
  display: none;
}

/* ── Desktop search dropdown ────────────────────────────────────────────────── */

.mrp-premium-header {
  position: fixed;
}

.mrp-premium-search-overlay {
  position: absolute;
  top: calc(var(--mrp-header-height) + 0.5rem);
  right: 1.5rem;
  width: min(420px, calc(100vw - 2rem));
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  z-index: 1100;
  padding: 0.75rem;
}

.mrp-premium-search-overlay__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: none;
  padding: 0;
}

.mrp-premium-search-overlay__input {
  min-width: 0;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  color: #fff;
}

.mrp-premium-search-overlay__input::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.mrp-premium-search-overlay__input:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.65);
}

.mrp-premium-search-overlay__submit {
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.mrp-premium-search-overlay__submit:hover {
  background: rgba(255, 255, 255, 0.86);
}

.mrp-premium-search-overlay__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.mrp-premium-search-overlay__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.15s ease;
}

.mrp-premium-search-overlay__close:hover {
  color: #fff;
}

.mrp-premium-search-overlay__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 59.9375rem) {
  .mrp-premium-search-overlay {
    display: none !important;
  }
}

/* ── Mobile navigation drawer ───────────────────────────────────────────────── */
/*
   The drawer uses a max-height transition for animation. The [hidden] attribute
   is removed just before opening (so the element enters the layout at max-height:0)
   and re-added after the closing transition completes.
*/
.mrp-premium-drawer {
  position: fixed;
  top: var(--mrp-header-height);
  left: 0;
  right: 0;
  background: #111111;
  z-index: calc(var(--mrp-header-z) - 1);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

/* Admin bar offset for drawer */
.admin-bar .mrp-premium-drawer {
  top: calc(var(--mrp-header-height) + 32px);
}

@media (max-width: 782px) {
  .admin-bar .mrp-premium-drawer {
    top: calc(var(--mrp-header-height) + 46px);
  }
}

.mrp-premium-drawer.mrp-is-open {
  max-height: 100vh;
}

.mrp-premium-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 1.5rem;
}

.mrp-premium-drawer__list>li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mrp-premium-drawer__list>li>a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  color: var(--mrp-nav-color);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.15s ease;
}

.mrp-premium-drawer__list>li>a:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mrp-premium-drawer__list>li>a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Drawer inline search form */
.mrp-premium-drawer__search-row {
  padding: 1rem 1.5rem;
}

.mrp-premium-drawer__search-row form {
  display: flex;
  gap: 0.5rem;
}

.mrp-premium-drawer__search-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  color: #fff;
  font-size: 0.9375rem;
}

.mrp-premium-drawer__search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.mrp-premium-drawer__search-input:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  border-color: rgba(255, 255, 255, 0.55);
}

.mrp-premium-drawer__search-submit {
  padding: 0.625rem 1rem;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.mrp-premium-drawer__search-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Responsive: mobile (below 960px) ──────────────────────────────────────── */
@media (max-width: 59.9375rem) {

  /* Three-column grid: Menu | Logo | Call */
  .mrp-premium-header__bar {
    display: grid;
    grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr);
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.75rem;
  }

  /* Hide desktop navigation */
  .mrp-premium-nav {
    display: none;
  }

  /* Show mobile Menu button */
  .mrp-premium-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--mrp-nav-color);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    cursor: pointer;
    padding: 0.5rem 0;
    min-height: 44px;
    line-height: 1;
  }

  .mrp-premium-menu-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Show mobile Call link */
  .mrp-premium-call-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    padding: 0.5rem 0;
    color: var(--mrp-nav-color);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .mrp-premium-call-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
  }
}

/* =============================================================================
   Theme overrides — applied while Mueller's Premium Header is active.
   All homepage decisions use body.mrp-premium-is-home (set by PHP).
   Do not duplicate any rule from this section elsewhere in this file.
   ============================================================================= */

/* ── 1. Hide the default theme / template header on every page ──────────────── */
body.mrp-premium-has-header .wp-site-blocks > header,
body.mrp-premium-has-header header.wp-block-template-part,
body.mrp-premium-has-header .site-header,
body.mrp-premium-has-header header.site-header,
body.mrp-premium-has-header #masthead,
body.mrp-premium-has-header #site-header,
body.mrp-premium-has-header .header-main,
body.mrp-premium-has-header .site-branding {
  display: none !important;
}

/* ── 2. Hide default page titles generated by the theme template ─────────────── */
body.mrp-premium-has-header .wp-block-post-title,
body.mrp-premium-has-header .entry-title,
body.mrp-premium-has-header h1.wp-block-post-title,
body.mrp-premium-has-header .page-title,
body.mrp-premium-has-header .entry-header {
  display: none !important;
}

/* ── 3. Homepage: reset body padding-top so the hero begins at the viewport top */
body.mrp-premium-is-home.mrp-premium-has-header {
  padding-top: 0 !important;
}

/* ── 4. Homepage: remove default content-area spacing ───────────────────────── */
body.mrp-premium-is-home.mrp-premium-has-header main,
body.mrp-premium-is-home.mrp-premium-has-header .wp-site-blocks,
body.mrp-premium-is-home.mrp-premium-has-header .entry-content,
body.mrp-premium-is-home.mrp-premium-has-header .wp-block-post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── 5. Legacy Cover-block hero (.mrp-home-hero): full-bleed ────────────────── */
body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 100svh !important;
}

@supports not (height: 100svh) {
  body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero {
    min-height: 100vh !important;
  }
}

body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero .wp-block-cover__inner-container {
  width: min(90vw, 1200px);
  margin-left: auto;
  margin-right: auto;
}

body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero h1,
body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero h2 {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-weight: 800;
}

body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero p {
  color: rgba(255, 255, 255, 0.88);
}

body.mrp-premium-is-home.mrp-premium-has-header .mrp-home-hero + * {
  margin-top: 0 !important;
}

/* ── 6. Non-home mobile (≤ 48rem): header participates in document flow ──────── */
@media (max-width: 48rem) {

  /* Non-home pages only: scroll with the page; no overlay on content */
  body:not(.mrp-premium-is-home) .mrp-premium-header {
    position: relative;
    top: auto;
  }

  /* Remove body push-down when the header is no longer fixed */
  body.mrp-premium-has-header:not(.mrp-premium-is-home) {
    padding-top: 0;
  }
}

/* ── Coming Soon nav label ──────────────────────────────────────────────────── */
.mrp-header-coming-soon {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Stack label text under nav item title */
.mrp-premium-nav ul>li>a:has(.mrp-header-coming-soon) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Stack label in the More dropdown */
.mrp-premium-more-menu>li>a:has(.mrp-header-coming-soon) {
  flex-direction: column;
  align-items: flex-start;
}

/* Stack label in the mobile drawer */
.mrp-premium-drawer__list>li>a:has(.mrp-header-coming-soon) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}