/*
Theme Name: ZEROHOUR x BELOW ZERO
Theme URI:  https://zerohour-records.com/
Author:     Aaron VIII
Author URI: https://luster.lu/
Description: Zerohour Style Shyt.
Version: 1.1.1
Last-Updated: 2025-11-04
Text Domain: ZEROHOUR
*/

/* ================= Vars (mobile-first: light) ================= */
:root{
  --bg:#cecece; --text:#515151; --muted:#dcdcdc;

  /* Canonical container cap (shared by header-inner + content) */
  --container-max: 1400px;
  --container-inline: clamp(320px, 92vw, var(--container-max));

  --site-font:'Avenir Book',"Helvetica Neue",Helvetica,Arial,sans-serif;

  --mobile-nav-height:3.5rem;
  --toggle-bar-bg:#505050;
  --toggle-icon-color:#cecece;
  --overlay-bg:#515151;
  --overlay-link-color:#cecece;

  --logo-initial-size:14rem;
  --logo-shrink-size:5.5rem;
  --logo-mobile-size:9.5rem;

  --footer-logo-size-mobile:20rem;
  --footer-logo-size-desktop:24rem;

  --section-gap:clamp(2rem,4vw,3.5rem);
  --content-video-max:960px;

  /* Icon system (shared across header/overlay/content links) */
  --icon-hit:2.4rem;   /* clickable box */
  --icon-glyph:1.4rem; /* actual SVG size */
  --header-icon-hover:#000;
}

/* Dark */
html[data-theme="dark"]{
  --bg:#515151; --text:#cecece; --muted:#6b6b6b;
  --toggle-bar-bg:#cdcdcd; --toggle-icon-color:#505050;
  --overlay-bg:#cecece; --overlay-link-color:#515151;
}

/* ================= Base ================= */
*,*:before,*:after{box-sizing:border-box}
html{font-size:100%;-webkit-text-size-adjust:100%}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
body{font-family:var(--site-font);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{text-transform:uppercase;font-style:italic}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-40px;left:0;background:#000;color:#fff;padding:.5rem .75rem;z-index:10000;text-decoration:none;transition:top .25s ease;border-radius:.125rem}
.skip-link:focus{top:0}

.mobile{display:block!important}
.desktop{display:none!important}

a{color:var(--text);text-decoration:none;transition:color .15s ease}
a:hover,a:focus{text-decoration:underline}

img,svg,picture{max-width:100%;height:auto;display:block;object-fit:contain}

/* ================= Lite YouTube ================= */
lite-youtube{display:block;position:relative;aspect-ratio:16/9;max-width:min(100%,var(--content-video-max));margin:.75rem 0;background:#000;overflow:hidden;border-radius:.25rem;cursor:pointer}
lite-youtube::before{content:attr(title);position:absolute;inset:auto 0 0 0;padding:.5rem .75rem;font-size:.85rem;color:rgba(255,255,255,.85);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);pointer-events:none}
lite-youtube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
lite-youtube>.lite-youtube-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease,opacity .3s ease}
lite-youtube.is-activated>.lite-youtube-poster{opacity:0;transform:scale(1.05)}
lite-youtube .lite-youtube-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.95);pointer-events:none;transition:transform .3s ease,opacity .3s ease}
lite-youtube .lite-youtube-play::before{content:'';width:3.25rem;height:3.25rem;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
lite-youtube .lite-youtube-play::after{content:'';margin-left:-.35rem;border-style:solid;border-width:.9rem 0 .9rem 1.3rem;border-color:transparent transparent transparent rgba(255,255,255,.95)}
lite-youtube:hover .lite-youtube-play,
lite-youtube:focus-visible .lite-youtube-play{transform:scale(1.05)}
lite-youtube.is-activated .lite-youtube-play{opacity:0;transform:scale(.9)}
lite-youtube.is-activated{cursor:auto}

/* Generic media */
iframe,embed,object,video{max-width:100%;width:auto;display:block;margin:.75rem 0;border:0;box-sizing:border-box}
.release-content iframe,
.release-content embed,
.release-content object,
.release-content video{max-width:min(100%,var(--content-video-max))}

/* Page wrapper */
#page{min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto;width:100%;box-sizing:border-box}

/* ================= Canon containers ================= */
.loop-wrapper,
.site-main>.loop-wrapper,
#page .loop-wrapper{
  width:var(--container-inline);
  max-width:none;
  margin-left:auto; margin-right:auto;
  padding-top:1.5rem; padding-bottom:1.5rem;
  box-sizing:border-box;
}

/* ================= Header ================= */
.site-header{
  width:100%;
  padding:1rem 0;
  background:var(--bg);
  position:static;
  z-index:900;
  transition:padding 420ms cubic-bezier(.2,.8,.2,1),background .2s ease;
}

/* Header inner uses the same container math as content */
.header-inner{
  width: var(--container-inline);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center; /* centre logo on mobile by default */
  gap:1.25rem;
}

/* regions */
.header-region{display:flex;align-items:center;gap:1rem}
.header-region--center{justify-content:center}
.header-region--left{justify-content:flex-start}
.header-region--right{justify-content:flex-end;gap:.9rem;flex-wrap:nowrap;min-width:0;white-space:nowrap}

/* menus */
.header-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:1rem}
.header-menu a{text-transform:uppercase;letter-spacing:.05em;font-size:.96rem;font-family:var(--site-font);color:var(--text);transition:color .2s ease}
.header-menu a:hover,.header-menu a:focus-visible{color:#000;text-decoration:none}

/* ==== Icon + toggle baseline system (shared everywhere) ==== */
.icon-btn,
.socials-nav a,
.release-links a,
.zh-theme-toggle,
.mobile-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--icon-hit);
  height:var(--icon-hit);
  line-height:1;
  color:var(--text);
  transition:color .2s ease;
  vertical-align:middle; /* avoid inline baseline quirks */
}
.icon-btn svg,
.socials-nav .icon,
.socials-nav svg,
.release-links svg,
.zh-theme-toggle .icon-theme-toggle,
.zh-theme-toggle svg,
.mobile-theme-toggle svg{
  width:var(--icon-glyph);
  height:var(--icon-glyph);
  fill:currentColor;
  display:block;
}

/* socials */
.socials-nav{display:flex;align-items:center;gap:.9rem;margin:0;padding:0;justify-content:flex-end;flex-wrap:nowrap}
.socials-nav a:hover,.socials-nav a:focus-visible{color:var(--header-icon-hover)}

/* theme toggle */
.zh-theme-toggle{appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;border-radius:999px;box-shadow:none}
.zh-theme-toggle:hover,.zh-theme-toggle:focus-visible{color:var(--header-icon-hover);outline:none}
/* small baseline nudge for the moon glyph so it sits level with others */
.header-region--right .zh-theme-toggle svg{transform:translateY(1px)}

/* site logo */
.site-logo{margin:0;display:flex;align-items:center;justify-content:center;min-width:0}
.site-logo .site-logo-link{display:inline-block}
.logo-svg{vertical-align:middle;color:var(--text);fill:currentColor;transition:height 520ms cubic-bezier(.2,.8,.2,1),transform 520ms cubic-bezier(.2,.8,.2,1),opacity 420ms ease;transform-origin:center}
.logo-fallback{display:none}

/* Mobile logo lock */
@media (max-width:768px){
  .site-logo .logo-svg{
    height: calc(var(--logo-mobile-size) * 1.6);
    width: auto;
  }
}

/* Spacer for sticky desktop header (height written by JS) */
.header-spacer{height:0}
@media (min-width:769px){.header-spacer{height:var(--site-header-height,0px)}}

/* ================= Desktop (>=769px) — FLEX, no wrap ================= */
@media (min-width: 769px){
  .desktop{display:block!important}
  .mobile{display:none!important}

  /* Fixed header + shrink on scroll */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:900; padding:1rem 0;
    background:var(--bg);
  }
  html[data-header="scrolled"] .site-header{padding:.35rem 0}
  html:not([data-header]) .site-header,
  html[data-header="initial"] .site-header{padding:1rem 0}

  /* Explicit desktop logo heights (prevents collapse) */
  html:not([data-header]) .site-header .logo-svg,
  html[data-header="initial"] .site-header .logo-svg{height:var(--logo-initial-size)}
  html[data-header="scrolled"] .site-header .logo-svg{
    height:var(--logo-shrink-size); transform:scale(.94); opacity:.98;
  }

  /* PROVEN FLEX LAYOUT — replaces any prior grid rules */
  .site-header .header-inner{
    display:flex; justify-content:space-between; align-items:center; gap:1.25rem;
    width: var(--container-inline); margin:0 auto; padding:0;
  }

  .site-header .header-inner .header-region{ width:auto }
  .site-header .header-inner .header-region--left{
    flex:1 1 0; display:flex; align-items:center; justify-content:flex-start; min-width:0;
  }
  .site-header .header-inner .header-region--center{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  }
  .site-header .header-inner .header-region--right{
    flex:1 1 0; display:flex; align-items:center; justify-content:flex-end;
    gap:.9rem; flex-wrap:nowrap; min-width:0; white-space:nowrap;
  }

  /* Make sure the two children (socials wrapper + toggle) can't wrap/squish */
  .site-header .header-inner .header-region--right > *{ flex:0 0 auto; }

  /* Keep socials wrapper inline and unwrappable */
  .site-header .header-inner .socials-nav-wrapper{
    display:inline-flex; align-items:center; gap:.9rem; min-width:0;
  }
  .site-header .header-inner .socials-nav{
    display:inline-flex; gap:.9rem; align-items:center; flex-wrap:nowrap;
  }
}

/* WP admin bar offset for fixed header */
@media (min-width:783px){ body.admin-bar .site-header{ top:32px; } }
@media (max-width:782px){ body.admin-bar .site-header{ top:46px; } }

/* ================= Release / Article ================= */
.release-grid{position:relative;margin-bottom:2rem;box-sizing:border-box;display:block;gap:0;align-items:start;align-content:start;min-width:0}
.release-grid .release-header{margin-bottom:1.25rem}
.release-grid .release-header a{color:inherit;text-decoration:none}
.release-grid .release-header a:hover{text-decoration:underline}
.release-grid .release-header,.release-grid .release-content,.release-grid .release-sidebar{align-self:start}

.release-sidebar{margin-bottom:1.5rem}
.release-sidebar .featured-image{margin:0;border-radius:.25rem;overflow:visible}
.release-sidebar .featured-image img{width:100%;height:auto;display:block}

.release-quickinfo{margin-top:.75rem;display:flex;flex-direction:column;gap:.75rem;color:var(--text);font-size:.95rem}
.release-meta-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.release-year-format{margin:0;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

.release-links{display:inline-flex;gap:.65rem;align-items:center}
.release-links a:hover,.release-links a:focus-visible{color:#000}

.additional-info{font-size:.92rem;line-height:1.55}

.release-content,.page-content{margin:1rem 0 0 0;font-size:1.125rem;line-height:1.7;box-sizing:border-box}

/* Desktop grid */
@media (min-width:769px){
  .release-grid{
    display:grid;
    grid-template-columns:1fr minmax(220px,34%);
    grid-template-areas:
      "header sidebar"
      "content sidebar";
    column-gap:2rem;row-gap:0;align-items:start;grid-auto-rows:auto;min-width:0
  }
  .release-grid .release-header{grid-area:header;margin-bottom:1.5rem}
  .release-grid .release-content{grid-area:content;margin:0}
  .release-grid .release-sidebar{grid-area:sidebar;margin:0}
  .release-grid>*{align-self:start}
  .release-sidebar{position:relative}
}

/* Title type */
.catalogue-number{font-family:'Avenir Book Oblique',var(--site-font);font-style:italic;font-size:.95rem;margin:0 0 .25rem 0;text-transform:uppercase;color:var(--text);letter-spacing:.02em}
.release-artists{font-family:'Avenir Black Oblique',var(--site-font);font-size:1.8rem;font-weight:900;font-style:italic;margin:0 0 .25rem 0;text-transform:uppercase;line-height:1.05}
.release-title{font-family:'Avenir Book Oblique',var(--site-font);font-size:1.8rem;font-weight:400;font-style:italic;margin:0 0 .5rem 0;text-transform:uppercase;line-height:1.05}
@media (max-width:768px){.release-artists,.release-title{font-size:1.55rem}}

/* Body content helpers */
.loop-item{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem 0}
.loop-thumb{width:110px;flex-shrink:0}
.loop-content{flex:1 1 auto;position:relative;z-index:2}
.loop-content .loop-link{display:block;color:inherit}

/* ================= Footer (kept narrower on desktop) ================= */
.site-footer{width:100%;background-color:var(--bg);padding:1.5rem 1rem 0 1rem;box-sizing:border-box;position:relative;z-index:1;margin-top:0}

/* Make mobile footer match the main content width */
.footer-inner{
  width:var(--container-inline);
  max-width:none;
  margin:0 auto;
  display:block;
  padding:0;
  box-sizing:border-box;
}

@media (min-width:769px){
  .site-footer{overflow:hidden}
  .footer-inner{
    /* desktop keeps the previous narrower look */
    max-width:80%;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1rem;
    padding-bottom:0;
    min-height:0
  }
  .footer-text{margin-left:2.5%;flex:1 1 60%;font-size:1rem}
  .footer-image{display:flex;justify-content:flex-end;align-items:flex-end;margin-right:2.5%;margin-top:0;padding:0}
  .footer-image svg.logo-svg{height:calc(var(--footer-logo-size-desktop) + 2px);margin-bottom:-2px;display:block}
}
.footer-text{font-size:1.25rem;line-height:1.35;text-transform:uppercase;margin:0 0 3rem 0}
.footer-image{display:block;margin:0;text-align:center;line-height:0;clear:both;padding:0}
.footer-image img,.footer-image object,.footer-image svg{display:block;vertical-align:bottom;margin:0 auto;padding:0}
.footer-image svg.logo-svg{height:var(--footer-logo-size-mobile);width:auto;color:var(--text);fill:currentColor}
.footer-image .logo-fallback{display:none}
.footer-svg,.footer-image svg{display:block;margin-bottom:-1px}
.footer-spacing-hr{display:none;width:100%;border:0;height:var(--mobile-nav-height);margin:0;padding:0;background:transparent}

/* ================= Mobile overlay + hamburger ================= */
.screenNav{
  text-align:center;position:fixed;left:0;right:0;bottom:calc(var(--mobile-nav-height));top:0;
  height:calc(100vh - var(--mobile-nav-height));width:100%;transform:translateY(100%);
  transition:transform .34s cubic-bezier(.2,.9,.2,1);background:var(--overlay-bg);z-index:13500;
  overflow-y:auto;-webkit-overflow-scrolling:touch;text-transform:uppercase;visibility:hidden;pointer-events:none
}
.mobile-overlay-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1.25rem;margin-top:2rem}
.mobile-socials{display:flex;gap:1.25rem;margin:0;padding:0;list-style:none;justify-content:center}
.mobile-socials a{color:var(--overlay-link-color)}
.mobile-socials a:hover,.mobile-socials a:focus-visible{color:#000}
.mobile-socials svg{width:var(--icon-glyph);height:var(--icon-glyph);fill:currentColor}
.mobile-theme-toggle{color:var(--overlay-link-color);border:0;border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent}
.mobile-theme-toggle svg{width:calc(var(--icon-glyph) - .1rem);height:calc(var(--icon-glyph) - .1rem);fill:currentColor;transform:translateY(1px)} /* tiny baseline trim */
.screenNav.open{transform:translateY(0);visibility:visible;pointer-events:auto}
.screenNav.is-closing{transform:translateY(100%);visibility:visible;pointer-events:none}
@media (prefers-reduced-motion:reduce){.screenNav{transition:none}}
.screenNav>div{width:100%;max-width:720px;padding:2rem 1.25rem;box-sizing:border-box;margin:0 auto}
.screenNav .menuMain{margin:1rem 0 0 0;padding:0;list-style:none;text-align:center;display:block}
.screenNav .menuMain li{padding:.6rem 0;line-height:1}
.screenNav a{color:var(--overlay-link-color);display:inline-block;padding:.6rem 0}
.screenNav .menuMain a{font-size:2rem;line-height:1;font-family:'Avenir Black Oblique',"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-weight:900}
.screenNav .nav-logo .logo-svg{height:calc(var(--logo-mobile-size) * 1.6);color:var(--overlay-link-color)}
/* overlay logo: never show outlines/halos */
.screenNav .nav-logo a{outline:0;box-shadow:none;border:0;-webkit-tap-highlight-color:transparent}
.screenNav .nav-logo a:focus-visible{outline:0}

/* === Overlay theme toggle: ensure contrast + black hover (scoped) === */
.screenNav .zh-theme-toggle,
.screenNav .mobile-theme-toggle{
  color: var(--overlay-link-color) !important;
}
.screenNav .zh-theme-toggle:hover,
.screenNav .zh-theme-toggle:focus-visible,
.screenNav .mobile-theme-toggle:hover,
.screenNav .mobile-theme-toggle:focus-visible{
  color:#000 !important;
}
.screenNav .zh-theme-toggle svg,
.screenNav .mobile-theme-toggle svg{ fill:currentColor; }

/* Toggle bar (mobile) */
.toggle{height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0));width:100%;position:fixed;left:0;right:0;bottom:0;z-index:14000;background:var(--toggle-bar-bg);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-bottom:env(safe-area-inset-bottom,0);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#nav-icon{position:relative;width:44px;height:30px;cursor:pointer;background:transparent;border:none;padding:0;display:inline-block;-webkit-tap-highlight-color:transparent;z-index:14100}
#nav-icon span{position:absolute;left:0;display:block;width:100%;height:3px;background:var(--toggle-icon-color);border-radius:12px;transition:transform .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,left .28s ease,background .18s ease;transform-origin:center}
#nav-icon span:nth-child(1){top:3px}
#nav-icon span:nth-child(2){top:calc(50% - 1.5px)}
#nav-icon span:nth-child(3){bottom:3px}
#nav-icon.animate-icon span:nth-child(1){top:calc(50% - 1.5px);transform:rotate(45deg);background:var(--overlay-link-color)}
#nav-icon.animate-icon span:nth-child(2){opacity:0;left:-30px}
#nav-icon.animate-icon span:nth-child(3){top:calc(50% - 1.5px);transform:rotate(-45deg);background:var(--overlay-link-color)}

/* ================= Section rhythm & Safari overlap guard ================= */
.releases-section{margin-top:0;display:flow-root;contain:layout paint}
.releases-section+.releases-section{margin-top:var(--section-gap)}
.releases-section .release-grid{margin:0}
.releases-section .release-content:last-child,
.releases-section .image-block:last-child,
.releases-section .release-quickinfo:last-child{margin-bottom:0}
.releases-section:last-of-type{margin-bottom:var(--section-gap)}

@media (min-width:769px){
  body.home .loop-wrapper{display:grid;grid-auto-flow:row;grid-auto-rows:auto;row-gap:clamp(2.5rem,3.5vw,4rem)}
  body.home .loop-wrapper>.releases-section{margin:0;padding:0}
  body.home .loop-wrapper>.releases-section>.release-grid{margin:0}
}

/* tiny helpers */
p:empty{display:none}
p:has(> br:only-child){display:none}

/* ================= Mobile order (single source of truth) ================= */
@media (max-width: 768px){
  .release-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "header"
      "image"
      "content";
    row-gap:1rem;
  }
  .release-grid .bodyColumn{ display:contents; }
  .release-grid .release-header{ grid-area:header; }
  .release-grid .infoColumn{   grid-area:image; }
  .release-grid .release-content{ grid-area:content; }
  .release-grid .image-block{ margin:0; }
}

/* ================= YouTube clamp in content column ================= */
.entry-content iframe[src*="youtube"],
.release-content iframe[src*="youtube"],
.release-content iframe[src*="youtu.be"]{
  width:100%;height:auto;aspect-ratio:16/9;display:block;margin:.75rem 0;border:0
}

/* Contact page inline icon links — tidy baseline & spacing */
.icon-inline{display:inline-flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none;vertical-align:middle}
.icon-inline .icon{width:var(--icon-glyph);height:var(--icon-glyph);display:inline-block;fill:currentColor}
.icon-inline .label{font:inherit;letter-spacing:.02em}
.icon-inline:hover,.icon-inline:focus-visible{color:#000;text-decoration:underline}
.page-content p:has(> a.icon-inline),.release-content p:has(> a.icon-inline){margin:.35rem 0}
.icon-inline{gap:.55rem;line-height:1}
.icon-inline br{display:none}
.icon-inline .icon{transform:translateY(1px)}
.icon-inline .label{line-height:1}
.page-content a.icon-inline{display:inline-flex!important;align-items:baseline!important;gap:.55rem!important;line-height:1.15!important}
.page-content a.icon-inline .icon{display:inline-block!important;position:relative!important;top:.26rem!important}
.page-content a.icon-inline .label{line-height:1.1!important}

/* ==========================================================
   MOBILE CORRECTIONS (bouncy header/footer)
   ========================================================== */
@media (max-width:768px){
  /* Kill header-resize side-effects on mobile completely */
  .header-spacer{height:0 !important;}
  /* give room to the fixed bottom toggle so the footer can be reached */
  body{padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom,0))}
}