/*
Theme Name: Saturate
Description: Clean dark theme for the Saturate Audio record label. No page builder, no plugins required.
Author: Saturate Audio
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: saturate
*/

/* Fonts, self-hosted (files go to assets/fonts/, see README there): Raleway = text, Aovel Cool = headings */
@font-face{font-family:"Aovel Cool";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/Aovel_Cool_Regular.woff") format("woff")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/raleway-400.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/raleway-700.woff2") format("woff2")}
@font-face{font-family:"Raleway";font-style:normal;font-weight:900;font-display:swap;src:url("assets/fonts/raleway-900.woff2") format("woff2")}

:root{
  --bg:#0c0c0e; --bg-2:#131317; --line:#26262c; --text:#e6e6ea; --muted:#9a9aa5;
  --font-body:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif; --font-head:"Aovel Cool","Raleway","Helvetica Neue",Arial,sans-serif; --accent:#fed625; --accent-ink:#111; --max:73.75rem; --gap:clamp(0.875rem,2.2vw,1.75rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.7 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-synthesis:none;line-height:1.2;font-weight:400;letter-spacing:.04em;text-transform:uppercase;margin:1.6em 0 .6em}
h1{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-top:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.screen-reader-text{position:absolute;left:-9999px}
.skip-link:focus{left:0.625rem;top:0.625rem;background:var(--accent);color:var(--accent-ink);padding:0.5rem 0.75rem;z-index:100}

/* header */
.site-header{--header-h:4.7rem;position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(8,8,10,0);border-bottom:0;-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%);transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease}
.site-header.is-scrolled{background:rgba(8,8,10,.6);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
body:not(.has-hero) .site-main-outer{padding-top:4.7rem}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:4.625rem}
.site-logo img{height:2.375rem;width:auto}
.site-logo .site-title{color:var(--text);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:0.5rem 0.75rem;font:inherit;cursor:pointer;border-radius:0.9375rem}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(1.125rem,3vw,2.5rem)}
.primary-nav a{position:relative;display:inline-block;overflow:hidden;color:var(--text);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;font-weight:700;padding:.6rem .35rem;transition:color .2s}
.primary-nav a span{position:relative;z-index:1}
.primary-nav a:hover,.primary-nav a:focus-visible{color:#fff;text-decoration:none}
.primary-nav a::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--accent);transition:left .4s cubic-bezier(.7,0,.3,1)}
.primary-nav a:hover::before,.primary-nav a:focus-visible::before{left:100%}
.primary-nav a::after{content:"";position:absolute;z-index:0;top:100%;margin-top:-.25rem;left:100%;width:100%;height:.25rem;background:var(--accent);transition:left .3s ease .4s}
.primary-nav a:hover::after,.primary-nav a:focus-visible::after,.primary-nav .current-menu-item>a::after,.primary-nav .current_page_item>a::after,.primary-nav a[aria-current="page"]::after{left:0}
@media(prefers-reduced-motion:reduce){.primary-nav a,.primary-nav a::before,.primary-nav a::after{transition:none}}
@media(max-width:720px){
  .nav-toggle{display:block}
  .primary-nav{display:none;position:absolute;left:0;right:0;top:100%;background:rgba(8,8,10,.86);-webkit-backdrop-filter:blur(1.25rem);backdrop-filter:blur(1.25rem);border-bottom:1px solid rgba(255,255,255,.08)}
  .primary-nav.is-open{display:block}
  .primary-nav ul{flex-direction:column;gap:0;padding:0.5rem 1.25rem 1rem}
  .primary-nav a{display:block;padding:0.75rem 1rem}
}

/* hero */
.hero{position:relative;min-height:min(78vh,45rem);display:grid;place-items:center;text-align:center;background:#000 center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,14,0) 55%,var(--bg))}
.hero-inner{position:relative;z-index:1;padding:1.25rem}
.page-hero{height:calc(clamp(12.5rem,34vw,26.25rem) + 4.7rem);background:#000 center/cover no-repeat;border-bottom:1px solid var(--line)}

/* content */
.site-main{padding:clamp(1.75rem,5vw,4rem) 0 clamp(2.5rem,7vw,5.625rem)}
.entry-content{max-width:51.25rem}
.entry-content.center,.center{margin-left:auto;margin-right:auto;text-align:center}
.entry-content img{margin:1.4em auto}
.entry-content iframe{max-width:100%}
.entry-content .wp-block-embed,.entry-content .video{margin:1.6em 0}
mark.hl{background:var(--accent);color:var(--accent-ink);padding:1px 0.375rem;font-size:.78rem;letter-spacing:.08em;font-weight:700}
.sa-btn,.button{border-radius:0.9375rem;display:inline-block;border:1px solid var(--line);background:var(--bg-2);color:var(--text);padding:0.75rem 1.375rem;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin:0 0.5rem 0.5rem 0;transition:.2s}
.sa-btn:hover,.button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);text-decoration:none}

/* release grid */
.release-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);list-style:none;margin:0;padding:0}
.release-card a{display:block;position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:1/1}
.release-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.release-card a:hover img,.release-card a:focus-visible img{transform:scale(1.05);opacity:.35}
.release-card .meta{position:absolute;inset:auto 0 0 0;padding:1rem;opacity:0;transform:translateY(0.5rem);transition:.3s;color:var(--text);font-size:.9rem;line-height:1.35}
.release-card a:hover .meta,.release-card a:focus-visible .meta{opacity:1;transform:none}
.release-card .cat{display:block;color:var(--accent);font-size:.72rem;letter-spacing:.14em;margin-bottom:0.25rem}
.release-card .noimg{display:grid;place-items:center;height:100%;color:var(--muted);padding:0.75rem;text-align:center}
@media(max-width:900px){.release-grid{grid-template-columns:repeat(2,1fr)}}
.section-title{text-align:center;margin:0 0 1.75rem}
.more{text-align:center;margin-top:2.125rem}

/* single release */
.release-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(max-width:820px){.release-layout{grid-template-columns:1fr}}
.release-cover{width:100%;box-shadow:0 1.25rem 3.75rem rgba(0,0,0,.6)}
.facts{margin:1.625rem 0 0.5rem;font-size:.92rem}
.facts dt{display:inline-block;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700;letter-spacing:.1em;padding:1px 0.5rem;margin-top:0.875rem;text-transform:uppercase}
.facts dd{margin:0.25rem 0 0;color:var(--text)}
.buy{display:flex;flex-wrap:wrap;gap:0;margin-top:1.375rem}
.buy .sa-btn{flex:1 1 12.5rem;text-align:center;margin:0 0.5rem 0.5rem 0}
.media{margin-top:clamp(1.875rem,5vw,3.75rem)}
.media .embed{margin:0 0 1.75rem;aspect-ratio:16/9}
.media .embed iframe{width:100%;height:100%;border:0}
.media .embed.audio{aspect-ratio:auto}
.media .embed.audio iframe{height:28.125rem}
.post-nav{display:flex;justify-content:space-between;gap:1.25rem;margin-top:3.125rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}

/* home / posts */
.welcome{max-width:47.5rem;margin:0 auto clamp(2.25rem,6vw,4.375rem);text-align:center;color:#cfcfd6}
.welcome h2{margin-top:0}
.post-list article{border-bottom:1px solid var(--line);padding:1.625rem 0}
.post-list h2{margin:0 0 0.375rem;font-size:1.25rem}
.post-list time{color:var(--muted);font-size:.8rem;letter-spacing:.1em}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:2.375rem 0 2.875rem;text-align:center;color:var(--muted);font-size:.85rem}
.social{list-style:none;margin:0 0 1.375rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.625rem 1.625rem}
.social a{color:var(--text);text-transform:uppercase;letter-spacing:.14em;font-size:.75rem}
.social a:hover{color:var(--accent);text-decoration:none}
.site-footer p{margin:.4em 0}

/* Large screens: scale the whole theme (everything is in rem) */
@media(min-width:1600px){html{font-size:17px}}
@media(min-width:1920px){html{font-size:18px}}
@media(min-width:2300px){html{font-size:20px}}
@media(min-width:2560px){html{font-size:22px}}
@media(min-width:3200px){html{font-size:27px}}
@media(min-width:3840px){html{font-size:32px}}