/* FINAL CLEAN woofie-theme.css (Woofie Header) */
/* Handles only the header: logo | nav | play pill | burger */
/* Landscape: logo + nav left, pill right, burger hidden */
/* Portrait: logo left, pill + burger right, drawer menu */

header.site-header{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF) !important;
  position: relative !important; z-index: 1000 !important;
}
header.site-header .header-inner{
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:10px 20px !important;
  display:grid !important; align-items:center !important; column-gap:16px !important;
  grid-template-columns:auto auto 1fr auto !important;
}
.custom-logo, .custom-logo-link img{ height:120px !important; width:auto !important; }

/* Play pill */
header.site-header .header-play-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px;
  font-weight:900; color:#fff;
  background:linear-gradient(180deg,#ff5a5f,#d91623);
  border:2px solid rgba(255,255,255,.9); 
  box-shadow:0 8px 18px rgba(217,22,35,.30);
  justify-self:end; margin-right:12px !important;
}
/* Burger */
header.site-header #menu-toggle{ width:44px; height:44px; padding:6px; border:0; background:transparent; display:none; }
header.site-header #menu-toggle span{ display:block; width:24px; height:3px; background:#111; margin:4px 0; border-radius:2px; }

/* Landscape */
@media (orientation:landscape){
  header.site-header nav{ display:block !important; justify-self:start !important; margin:0 !important; }
  header.site-header #menu-toggle{ display:none !important; }
}
/* Portrait */
@media (orientation:portrait){
  header.site-header .header-inner, header.site-header .hdr-inner{ grid-template-columns:auto 1fr auto auto !important; column-gap:12px !important; align-items:center !important; }
  header.site-header nav{ display:none !important; }
  body.menu-open header.site-header nav{
    display:block !important; position:absolute !important; left:0; right:0; top:100%;
    background:#fff; padding:12px 16px; border-radius:0 0 16px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:9999;
  }
  header.site-header nav ul{ display:flex !important; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
  header.site-header .header-play-btn{ margin-right:12px !important; }
  header.site-header #menu-toggle{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; margin-right:16px !important; }
}
@media (max-width:420px){
  .custom-logo, .custom-logo-link img{ height:96px !important; }
  header.site-header .header-play-btn{ padding:7px 12px; font-size:14px; }
}


/* =======================================================================
   HEADER LAYOUT — authoritative (26 Aug 2025)
   Landscape: logo | nav | spacer | play (no burger)
   Portrait : logo | spacer | play | burger (drawer)
   ======================================================================= */
header.site-header{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF);
  position: relative; z-index: 1000;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
header.site-header .header-inner, header.site-header .hdr-inner{
  display: grid; align-items: center; column-gap: 16px;
  width: 100%; max-width: 100%; margin: 0; padding: 10px 22px;
  grid-template-columns: auto auto 1fr auto;
}
/* Base nav/link styles (safe) */
header.site-header nav ul, header.site-header nav li{ list-style:none; margin:0; padding:0; }
header.site-header nav a{ color:#111; font-weight:800; text-decoration:none; padding:8px 4px; border-radius:8px; }
header.site-header nav a:hover{ text-decoration:underline; }
/* Burger bars always show */
header.site-header #menu-toggle{ display:none; width:44px; height:44px; padding:6px; border:0; background:transparent; cursor:pointer; }
header.site-header #menu-toggle span, header.site-header #menu-toggle .bar{ display:block; width:24px; height:3px; background:#111; margin:4px 0; border-radius:2px; }

/* ---------------- LANDSCAPE ---------------- */
@media (orientation:landscape){
  header.site-header .header-inner, header.site-header .hdr-inner{
    grid-template-columns: auto auto 1fr auto !important; align-items:center !important;
  }
  header.site-header nav{
    display:block !important; position:static !important;
    grid-column:2 !important; justify-self:start !important; margin:0 !important;
    padding:0 !important; background:transparent !important; box-shadow:none !important;
  }
  header.site-header nav ul{ display:flex !important; flex-direction:row; gap:18px; align-items:center; }
  header.site-header .header-play-btn, header.site-header .btn-3d.play-latest{
    grid-column:4 !important; justify-self:end !important; margin:0 !important;
  }
  header.site-header #menu-toggle{ display:none !important; }
  .custom-logo, .custom-logo-link img, header.site-header .brand img{ height:156px !important; width:auto !important; }
  header.site-header nav a{ font-size:21px !important; line-height:1.2 !important; }
}

/* ---------------- PORTRAIT ---------------- */
@media (orientation:portrait){
  header.site-header .header-inner, header.site-header .hdr-inner{
    grid-template-columns: auto 1fr auto auto !important; column-gap:12px !important;
  }
  header.site-header nav{ display:none !important; }
  body.menu-open header.site-header nav{
    display:block !important; position:absolute !important; top:100% !important; left:0; right:0;
    background:#fff; padding:12px 16px; border-radius:0 0 16px 16px; box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:9999;
  }
  header.site-header nav ul{ display:flex !important; flex-direction:column; gap:12px; }
  header.site-header nav a, header.site-header nav a:link, header.site-header nav a:visited{ color:#111 !important; font-weight:700 !important; }
  header.site-header #menu-toggle{ display:inline-block !important; justify-self:end; margin-right:20px; z-index:10001; }
  header.site-header .header-play-btn, header.site-header .btn-3d.play-latest{ justify-self:end; margin-right:12px; }
}

/* ---------------- Small phones ---------------- */
@media (max-width:420px){
  .custom-logo, .custom-logo-link img, header.site-header .brand img{ height:96px; }
  header.site-header .header-play-btn{ padding:7px 12px; font-size:14px; }
}
/* === FINAL HEADER FIX — Aug 26 === */

/* Landscape: logo | menu (left) | spacer | Play (right). Burger hidden. */
@media (orientation:landscape){
  header.site-header .header-inner{
    grid-template-columns:auto auto 1fr auto !important; /* logo | nav | spacer | pill */
    align-items:center !important;
  }
  header.site-header nav{
    display:block !important;
    justify-self:start !important;
    margin:0 !important;
  }
  header.site-header .header-play-btn{
    justify-self:end !important;
    margin-right:16px !important;
  }
  header.site-header #menu-toggle{ display:none !important; }
}

/* Portrait: logo | spacer | Play | burger (side-by-side on right). Drawer menu. */
@media (orientation:portrait){
  header.site-header .header-inner{
    grid-template-columns:auto 1fr auto auto !important; /* logo | space | pill | burger */
    column-gap:12px !important;
    align-items:center !important;
  }
  header.site-header nav{ display:none !important; }
  body.menu-open header.site-header nav{
    display:block !important;
    position:absolute !important;
    top:100%; left:0; right:0;
    background:#fff; padding:12px 16px;
    border-radius:0 0 16px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,.25);
    z-index:9999;
  }
  header.site-header .header-play-btn{
    justify-self:end !important;
    margin-right:12px !important;
  }
  header.site-header #menu-toggle{
    display:inline-block !important;
    justify-self:end !important;
    margin-right:20px !important;
    z-index:10001 !important;
  }
  header.site-header #menu-toggle span{
    display:block; width:24px; height:3px;
    background:#111; margin:4px 0; border-radius:2px;
  }
}
/* === WOOFIE — FINAL HEADER LOCK (LANDSCAPE LEFT PLAY) ================== */
/* Landscape: logo | PLAY (left) | spacer | NAV (right). Burger hidden.   */
/* Portrait remains: logo | spacer | PLAY | burger with white drawer.     */

@media (orientation:landscape){
  /* 1) Grid order: logo | play | spacer | nav */
  header.site-header .header-inner,
  header.site-header .hdr-inner{
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center !important;
  }

  /* 2) PLAY pill goes NEXT TO LOGO (left side) */
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest{
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 0 12px 0 8px !important; /* gap from logo */
    position: static !important;
    transform: none !important;
  }

  /* 3) NAV to the FAR RIGHT */
  header.site-header nav{
    display: block !important;
    position: static !important;
    grid-column: 4 !important;        /* after the spacer */
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  header.site-header nav ul{
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* 4) Hide burger in landscape */
  header.site-header #menu-toggle{ display: none !important; }

  /* 5) 30% larger logo + nav text in landscape (as requested) */
  .custom-logo,
  .custom-logo-link img,
  header.site-header .brand img{ height: 156px !important; width: auto !important; }
  header.site-header nav a{ font-size: 21px !important; line-height: 1.2 !important; }
}

/* Portrait drawer links stay bold + black */
@media (orientation:portrait){
  header.site-header nav a,
  header.site-header nav a:link,
  header.site-header nav a:visited{
    color:#111 !important;
    font-weight:700 !important;
  }
}

/* === WOOFIE — FINAL HEADER LOCK (LANDSCAPE PLAY LEFT) ================== */
/* landscape: logo | PLAY (left) | spacer | NAV (right) — burger hidden     */
/* portrait remains: logo | spacer | PLAY | burger (drawer, black links)   */

/* full-bleed safety (harmless if already set) */
header.site-header{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* neutralize rogue helpers that shove content right */
header.site-header .header-actions{ margin-left: 0 !important; }

/* kill 3D ledge + extra bottom lip so pill aligns with nav */
header.site-header .btn-3d.play-latest{ box-shadow: 0 10px 16px rgba(0,0,0,.25) !important; }
header.site-header .header-play-btn{ border-bottom-width: 0 !important; }

/* ---------------- LANDSCAPE ---------------- */
@media (orientation:landscape){
  /* grid: logo | PLAY | spacer | NAV */
  header.site-header .header-inner,
  header.site-header .hdr-inner{
    display: grid !important;
    grid-template-columns: auto auto 1fr auto !important;
    align-items: center !important;
    column-gap: 16px !important;
  }

  /* PLAY next to logo (left), perfectly inline */
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest{
    grid-column: 2 !important;
    justify-self: start !important;
    margin: 0 12px 0 8px !important;
    position: static !important;
    transform: none !important;
    line-height: 1.2 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* NAV to the far right */
  header.site-header nav{
    display: block !important;
    position: static !important;
    grid-column: 4 !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  header.site-header nav ul{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* hide burger in landscape */
  header.site-header #menu-toggle{ display: none !important; }

  /* +30% logo & nav text in landscape */
  .custom-logo, .custom-logo-link img, header.site-header .brand img{
    height: 156px !important; width: auto !important;
  }
  header.site-header nav a{ font-size: 21px !important; line-height: 1.2 !important; }
}

/* ---------------- PORTRAIT (unchanged) ---------------- */
@media (orientation:portrait){
  header.site-header nav a,
  header.site-header nav a:link,
  header.site-header nav a:visited{
    color:#111 !important; font-weight:700 !important;
  }
}

/* === WOOFIE — FINAL HEADER OVERRIDE (unboxed + landscape Play LEFT) ===== */

/* 0) Full-bleed gradient (unbox the header) */
header.site-header,
#woofie-hdr{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* 1) Make inner wrapper a predictable grid no matter what */
header.site-header .header-inner,
#woofie-hdr .hdr-inner{
  display: grid !important;
  align-items: center !important;
  column-gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 10px 22px !important;
}

/* 2) Neutralize any helper that pushes items to the far right */
header.site-header .header-actions { margin-left: 0 !important; display: contents !important; }

/* 3) Kill the 3D “ledge” & bottom lip so the pill aligns perfectly */
header.site-header .btn-3d.play-latest { box-shadow: 0 10px 16px rgba(0,0,0,.25) !important; }
header.site-header .header-play-btn { border-bottom-width: 0 !important; }

/* ---------------- LANDSCAPE ---------------- */
/* Grid: logo | PLAY | spacer | NAV (burger hidden) */
@media (orientation:landscape){
  header.site-header .header-inner,
  #woofie-hdr .hdr-inner{
    grid-template-columns: auto auto 1fr auto !important;
  }

  /* PLAY next to logo on the LEFT */
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest,
  #woofie-hdr .hdr-play{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 12px 0 8px !important;
    position: static !important;
    transform: none !important;
  }

  /* NAV to the FAR RIGHT */
  header.site-header nav,
  #woofie-hdr nav{
    display: block !important;
    position: static !important;
    grid-column: 4 !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  header.site-header nav ul,
  #woofie-hdr nav ul{
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Hide burger in landscape */
  header.site-header #menu-toggle,
  #woofie-hdr #menu-toggle{ display: none !important; }

  /* +30% logo & menu */
  .custom-logo, .custom-logo-link img, header.site-header .brand img{ height:156px !important; width:auto !important; }
  header.site-header nav a{ font-size:21px !important; line-height:1.2 !important; }
}

/* ---------------- PORTRAIT (unchanged) ---------------- */
/* Grid: logo | spacer | PLAY | burger + white drawer, black links */
@media (orientation:portrait){
  header.site-header .header-inner,
  #woofie-hdr .hdr-inner{
    grid-template-columns: auto 1fr auto auto !important;
    column-gap: 12px !important;
  }
  header.site-header nav,
  #woofie-hdr nav{ display: none !important; }
  body.menu-open header.site-header nav,
  body.menu-open #woofie-hdr nav{
    display: block !important;
    position: absolute !important; top:100% !important; left:0 !important; right:0 !important;
    background:#fff !important; padding:12px 16px !important; border-radius:0 0 16px 16px !important;
    box-shadow:0 12px 24px rgba(0,0,0,.25) !important; z-index:9999 !important;
  }
  header.site-header nav ul,
  #woofie-hdr nav ul{ display:flex !important; flex-direction:column !important; gap:12px !important; }

  /* black drawer text */
  header.site-header nav a,
  #woofie-hdr nav a{ color:#111 !important; font-weight:700 !important; }

  /* pill + burger on the right */
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest,
  #woofie-hdr .hdr-play{ justify-self:end !important; margin-right:12px !important; }
  header.site-header #menu-toggle,
  #woofie-hdr #menu-toggle{ display:inline-block !important; justify-self:end !important; margin-right:20px !important; }
  header.site-header #menu-toggle span,
  #woofie-hdr #menu-toggle span{ display:block; width:24px; height:3px; background:#111; margin:4px 0; border-radius:2px; }
}

/* === WOOFIE — FINAL LANDSCAPE ORDER: PLAY | LOGO | spacer | NAV ========= */
/* Also re-unboxes the gradient and neutralizes any helpers that fight this */

/* Unbox header: full-bleed gradient */
header.site-header{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Common inner wrapper reset */
header.site-header .header-inner{
  display: grid !important;
  align-items: center !important;
  column-gap: 16px !important;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 10px 22px !important;
}
/* Kill any helper that shoves things right */
header.site-header .header-actions{ margin-left:0 !important; display: contents !important; }

/* Fix pill baseline (remove 3D ledge + bottom lip) */
header.site-header .btn-3d.play-latest{ box-shadow: 0 10px 16px rgba(0,0,0,.25) !important; }
header.site-header .header-play-btn{ border-bottom-width: 0 !important; }

/* ---------------- LANDSCAPE ---------------- */
@media (orientation:landscape){
  /* PLAY | LOGO | spacer | NAV */
  header.site-header .header-inner{
    grid-template-columns: auto auto 1fr auto !important;
  }

  /* FORCE ORDER */
  /* 1) PLAY first (col 1) */
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest{
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 12px 0 0 !important;  /* small gap before logo */
    position: static !important; transform: none !important;
    line-height: 1.2 !important; padding-top:10px !important; padding-bottom:10px !important;
  }

  /* 2) LOGO second (col 2) – cover common logo wrappers */
  header.site-header .brand,
  header.site-header .site-branding,
  header.site-header .custom-logo-link,
  header.site-header .custom-logo{
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: start !important;
  }

  /* 3) NAV on far right (col 4) */
  header.site-header nav{
    display:block !important; position:static !important;
    grid-column: 4 !important; grid-row: 1 !important;
    justify-self: end !important;
    margin:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important;
  }
  header.site-header nav ul{
    display:flex !important; flex-direction:row !important; gap:18px !important; align-items:center !important;
    margin:0 !important; padding:0 !important; list-style:none !important;
  }

  /* Hide burger in landscape */
  header.site-header #menu-toggle{ display:none !important; }

  /* +30% sizing (as requested) */
  header.site-header .brand img,
  header.site-header .custom-logo,
  header.site-header .custom-logo-link img{ height:156px !important; width:auto !important; }
  header.site-header nav a{ font-size:21px !important; line-height:1.2 !important; }
}

/* ---------------- PORTRAIT (unchanged) ---------------- */
@media (orientation:portrait){
  /* logo | spacer | PLAY | burger, white drawer */
  header.site-header .header-inner{
    grid-template-columns: auto 1fr auto auto !important; column-gap:12px !important;
  }
  header.site-header nav{ display:none !important; }
  body.menu-open header.site-header nav{
    display:block !important; position:absolute !important; top:100% !important; left:0; right:0;
    background:#fff !important; padding:12px 16px !important; border-radius:0 0 16px 16px !important;
    box-shadow:0 12px 24px rgba(0,0,0,.25) !important; z-index:9999 !important;
  }
  header.site-header nav ul{ display:flex !important; flex-direction:column !important; gap:12px !important; }
  header.site-header nav a{ color:#111 !important; font-weight:700 !important; }
  header.site-header #menu-toggle{ display:inline-block !important; justify-self:end !important; margin-right:20px !important; }
}

/* === WOOFIE — HEADER: logo | menu | spacer | PLAY (inside) ============== */
/* Unbox the gradient bar (no boxed look) */
header.site-header,
#woofie-hdr{
  background: linear-gradient(90deg,#FFA23A,#FFD84A,#7ED957,#3DBBFF,#8E5CFF) !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 1000 !important;
}

/* Predictable inner layout for both header variants */
header.site-header .header-inner,
#woofie-hdr .hdr-inner{
  display: grid !important;
  align-items: center !important;
  column-gap: 16px !important;
  width: 100% !important; max-width: 100% !important;
  margin: 0 !important; padding: 10px 22px !important;
}

/* Neutralize any helper that pushes items to the far right */
header.site-header .header-actions{ margin-left:0 !important; display: contents !important; }

/* Pill baseline fixes so it aligns with nav text */
header.site-header .btn-3d.play-latest{ box-shadow: 0 10px 16px rgba(0,0,0,.25) !important; }
header.site-header .header-play-btn{ border-bottom-width: 0 !important; }

/* ---------------- LANDSCAPE ---------------- */
/* Order: logo (col1) | menu (col2) | spacer (col3) | PLAY (col4) */
@media (orientation:landscape){
  header.site-header .header-inner,
  #woofie-hdr .hdr-inner{
    grid-template-columns: auto auto 1fr auto !important;
  }

  /* Logo in column 1 (cover common wrappers) */
  header.site-header .brand,
  header.site-header .site-branding,
  header.site-header .custom-logo-link,
  header.site-header .custom-logo{
    grid-column: 1 !important; grid-row: 1 !important;
    justify-self: start !important;
  }
  /* Menu in column 2 (inline) */
  header.site-header nav,
  #woofie-hdr nav{
    display: block !important; position: static !important;
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: start !important;
    margin: 0 !important; padding: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  header.site-header nav ul,
  #woofie-hdr nav ul{
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 18px !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
  }
  header.site-header nav a,
  #woofie-hdr nav a{ color:#111 !important; font-weight:800 !important; text-decoration:none; }

  /* PLAY in column 4 (right edge, inside the bar) */
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest,
  #woofie-hdr .hdr-play{
    grid-column: 4 !important; grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 16px 0 0 !important;          /* inset from the right edge */
    position: static !important; transform: translateY(-3px) !important;   /* raises menu to align with taller logo */
    line-height: 1.2 !important;
    padding-top: 10px !important; padding-bottom: 10px !important;
  }

  /* Hide burger in landscape */
  header.site-header #menu-toggle,
  #woofie-hdr #menu-toggle{ display: none !important; }

  /* +30% sizes in landscape */
  header.site-header .brand img,
  header.site-header .custom-logo,
  header.site-header .custom-logo-link img{ height: 156px !important; width: auto !important; }
  header.site-header nav a{ font-size: 21px !important; line-height: 1.2 !important; }
}

/* ---------------- PORTRAIT (unchanged) ---------------- */
/* logo | spacer | PLAY | burger; white drawer, black links */
@media (orientation:portrait){
  header.site-header .header-inner,
  #woofie-hdr .hdr-inner{
    grid-template-columns: auto 1fr auto auto !important;
    column-gap: 12px !important;
  }
  header.site-header nav,
  #woofie-hdr nav{ display: none !important; }
  body.menu-open header.site-header nav,
  body.menu-open #woofie-hdr nav{
    display: block !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    background: #fff !important; padding: 12px 16px !important; 
	  border-radius: 0;   /* unbox drawer */
    box-shadow: none !important;   /* unbox drawer */
  }
  header.site-header nav ul,
  #woofie-hdr nav ul{ flex-direction: column !important; gap: 12px !important; }
  header.site-header nav a,
  #woofie-hdr nav a{ color: #111 !important; font-weight: 700 !important; }

  header.site-header #menu-toggle,
  #woofie-hdr #menu-toggle{ display: inline-block !important; justify-self:end !important; margin-right: 20px !important; }
  header.site-header .header-play-btn,
  display:flex !important; flex-direction:column !important; gap:12px !important; list-style:none; margin:0; padding:0;

	
}

/* === WOOFIE — final nudge: move PLAY inward + remove top boxing ======= */

/* 1) LANDSCAPE: push the Play pill further inside the bar */
@media (orientation:landscape){
  header.site-header .header-play-btn,
  header.site-header .btn-3d.play-latest{
    margin-right: 32px !important;   /* was 16px; brings the pill further inside */
  }
}

/* 2) Unbox the TOP edge of the gradient header (flush against the page) */
.site > header.site-header,
.wrap > header.site-header,
.container > header.site-header,
#page > header.site-header,
header.site-header{
  border-radius: 0 !important;
  /* many themes add 10–16px top padding on the page wrapper — pull the header up */
  margin-top: -16px !important;      /* removes the top “boxed” strip */
  /* keep the inner spacing comfortable after the pull-up */
}
header.site-header .header-inner{
  padding-top: calc(10px + 16px) !important;  /* compensates for the -16px lift above */
}


/* === 2025-08-27 header tweaks === */

/* 1) Logo +20% (120 → 144; small phones 96 → 116) */
#woofie-hdr img.custom-logo,
#woofie-hdr .custom-logo-link img,
#woofie-hdr .brand img{ height:144px !important; }

@media (max-width:420px){
  #woofie-hdr img.custom-logo,
  #woofie-hdr .custom-logo-link img{ height:116px !important; }
}

/* 2) Raise inline menu slightly in landscape so it lines up with the taller logo */
@media (orientation:landscape){
  #woofie-hdr nav{ transform: translateY(-3px); } /* nudge up ~3px */
}

/* 3) “Unbox” the top: remove any rounding/shadow on the header & the portrait drawer */
#woofie-hdr{ border-radius:0 !important; box-shadow:none !important; }
@media (orientation:portrait){
  body.menu-open #woofie-hdr nav{
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff; /* keep the drawer clean and flat */
  }
}

/* 4) Burger/menu tidy */
#woofie-hdr #menu-toggle{ margin-right:12px !important; align-self:center; } /* bring it in & center */
#woofie-hdr nav ul{ list-style:none; margin:0; padding:0; } /* no bullets/indent in drawer */

/* [A] FULL-BLEED RAINBOW HEADER — unbox it */
/* L1 */  header.site-header,
          .site-header {
/* L2 */    margin: 0 calc(50% - 50vw) !important;   /* stretch outside any centered wrapper */
/* L3 */    width: 100vw !important;
/* L4 */    border-radius: 0 !important;             /* kill rounded corners from older rules */
/* L5 */    box-shadow: none !important;             /* kill card shadow from older rules */
/* L6 */    background-clip: border-box !important;
/* L7 */  }
/* L8 */  /* remove stray gaps above/below header */
/* L9 */  .site-header, .site-header .header-inner { margin-top: 0 !important; }
/* L10 */ body { overflow-x: hidden; }               /* avoid horizontal scroll from the 50vw trick */

/* [B] HEADER LAYOUT + BURGER ALIGNMENT */
/* L11 */ .site-header .header-inner{
/* L12 */   display: flex; align-items: center; justify-content: space-between;
/* L13 */   gap: 16px; flex-wrap: nowrap;
/* L14 */   padding-left: 16px; padding-right: 16px; /* keeps content off edges on mobile */
/* L15 */ }
/* L16 */ .site-branding{ flex: 0 0 auto; }
/* L17 */ .primary-navigation{ flex: 1 1 auto; }
/* L18 */ .woofie-cta{ flex: 0 0 auto; }            /* your “Play Latest Video” button wrapper */
/* L19 */ .menu-toggle{                              /* the burger */
/* L20 */   display: flex; align-items: center; justify-content: center;
/* L21 */   height: 44px; width: 44px;
/* L22 */   margin-left: 8px;                        /* small gap from the CTA */
/* L23 */   order: 3;                                /* ensures it sits to the right */
/* L24 */ }
/* L25 */ @media (max-width: 1024px){
/* L26 */   .primary-navigation{ display:none; }     /* hide full menu under tablet */
/* L27 */   .woofie-cta{ order: 2; }
/* L28 */   .site-branding{ order: 1; }
/* L29 */   .menu-toggle{ order: 3; }                /* burger aligns horizontally with CTA */
/* L30 */ }
/* L31 */ @media (min-width: 1025px){
/* L32 */   .menu-toggle{ display:none; }            /* burger only for smaller screens */
/* L33 */ }
/* =========================
   FULL-BLEED HEADER + BURGER
   ========================= */

/* [A] Unbox the rainbow (full-bleed) */
/* L1 */  header.site-header,
          .site-header{
/* L2 */    position: relative;
/* L3 */    overflow: visible !important;      /* ensure the bleed can show */
/* L4 */    margin-top: 0 !important;          /* touch the top */
/* L5 */    border-radius: 0 !important;       /* kill rounded corners */
/* L6 */    box-shadow: none !important;       /* kill any card shadow */
          }
/* L7 */  .site-header::before{
/* L8 */    content: "";
/* L9 */    position: absolute; inset: 0 auto 0 50%;
/* L10 */   transform: translateX(-50%);
/* L11 */   width: 100vw;                      /* span the viewport width */
/* L12 */   height: 100%;
/* L13 */   background: inherit;               /* use the same rainbow background */
/* L14 */   z-index: -1;                       /* sit behind header contents */
          }

/* [A2] Nuke container padding that creates a “box” above/below */
/* L15 */ .wp-site-blocks,
          #page,
          .site{
/* L16 */   padding-top: 0 !important;
          }
/* L17 */ .site-header .header-inner,
          .site-header .wp-block-group{
/* L18 */   margin: 0 !important;              /* stop inner margins making a box */
          }

/* [B] Burger alignment with CTA (same row, vertically centered) */
/* L19 */ .site-header .header-inner{
/* L20 */   display:flex; align-items:center; justify-content:space-between;
/* L21 */   gap:16px; padding: 0 16px;
          }
/* L22 */ .menu-toggle{
/* L23 */   display:inline-flex; align-items:center; justify-content:center;
/* L24 */   height:44px; width:44px; line-height:1;
/* L25 */   margin-left:8px; order:3;          /* to the right of the CTA */
          }
/* L26 */ @media (max-width:1024px){
/* L27 */   .primary-navigation{ display:none; }
          }
/* L28 */ @media (min-width:1025px){
/* L29 */   .menu-toggle{ display:none; }
          }