/*
Theme Name: Vintage DHS
Theme URI: https://behappyaboutit.com
Author: Dearborn High School Music Program
Description: Custom archival theme for the Vintage DHS recordings archive. Warm, paper-and-tape-era styling for a decades-spanning music archive.
Version: 1.0
Requires PHP: 7.4
Text Domain: vintage-dhs
*/

@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --brown:#3B2A20;
  --cream:#F2E8D5;
  --cream-dim:#E9DCC0;
  --red:#A94A3D;
  --teal:#5C7A73;
  --mustard:#C98A2B;
  --ink:#2B241E;
  --line:#D6C6A1;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  line-height: 1.65;
}

a{ color: var(--red); text-decoration:none; }
a:hover{ color: var(--brown); text-decoration:underline; }

.wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 28px;
}

img{ max-width:100%; height:auto; }

/* ---------- Header ---------- */
#masthead{
  background: var(--brown);
  border-bottom: 6px solid var(--mustard);
  padding: 30px 0 26px;
  color: var(--cream);
}
.site-branding a{
  font-family: 'Arvo', serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--cream);
  text-decoration: none;
}
.site-branding a:hover{ color: var(--mustard); }
.site-description{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mustard);
  margin-top: 6px;
}

/* ---------- Navigation ---------- */
#site-navigation{
  background: var(--ink);
}
#site-navigation ul.nav-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap: 22px;
}
#site-navigation .wrap{
  padding-top: 12px;
  padding-bottom: 12px;
}
#site-navigation ul.nav-menu > li{
  position:relative;
}
#site-navigation ul.nav-menu > li > a{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--cream-dim);
}
#site-navigation ul.nav-menu > li > a:hover{
  color: var(--mustard);
}
#site-navigation ul.sub-menu{
  display:none;
  position:absolute;
  top: 100%;
  left: 0;
  list-style:none;
  margin:0;
  padding: 8px 0;
  background: var(--cream);
  border: 1px solid var(--line);
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 20;
}
#site-navigation ul.nav-menu > li:hover > ul.sub-menu,
#site-navigation ul.nav-menu > li:focus-within > ul.sub-menu{
  display:block;
}
#site-navigation ul.sub-menu a{
  display:block;
  padding: 6px 16px;
  color: var(--ink);
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
}
#site-navigation ul.sub-menu a:hover{
  color: var(--red);
  background: var(--cream-dim);
}

/* ---------- Layout ---------- */
#primary{
  padding: 40px 0 60px;
}
.content-area{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items:start;
}
@media (max-width: 800px){
  .content-area{ grid-template-columns: 1fr; }
}

/* ---------- Entry content ---------- */
.entry-title{
  font-family: 'Arvo', serif;
  font-weight: 700;
  color: var(--brown);
  font-size: 30px;
  margin: 0 0 18px;
}
.entry-content h2, .entry-content h3{
  font-family: 'Arvo', serif;
  font-weight: 400;
  color: var(--ink);
}

/* ---------- Login gate ---------- */
.vdhs-login-gate{
  background: var(--cream-dim);
  border: 1px dashed var(--line);
  padding: 26px 28px;
  margin: 20px 0;
}
.vdhs-login-gate p{ margin: 0 0 12px; }
.vdhs-login-gate .vdhs-actions a{
  display:inline-block;
  margin-right: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Year archive grid (front page) ---------- */
.vdhs-intro p{
  max-width: 68ch;
}
.vdhs-archive-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin: 40px 0 26px;
  flex-wrap:wrap;
  gap: 10px;
}
.vdhs-archive-head h2{
  font-family: 'Arvo', serif;
  font-size: 22px;
  color: var(--brown);
  margin:0;
}
.vdhs-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 22px;
}
@media (max-width: 760px){
  .vdhs-grid{ grid-template-columns: repeat(2, 1fr); }
}
.vdhs-disc-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color: var(--ink);
}
.vdhs-disc-card:hover{ text-decoration:none; }

/* Case wrapper establishes 3D space for the lid to swing open in */
.vdhs-case{
  width: 150px;
  height: 150px;
  position: relative;
  perspective: 600px;
}

.vdhs-case-lid{
  position:absolute;
  top:0; left:0;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.15) 60%, rgba(0,0,0,0.08));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 10px rgba(59,42,32,0.25);
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 0.55s cubic-bezier(.2,.7,.3,1);
  z-index: 5;
}
.vdhs-case:hover .vdhs-case-lid{
  transform: rotateY(-115deg);
}
.vdhs-case:hover .vdhs-disc{
  transition: transform 0.5s ease 0.15s;
  transform: scale(1.04);
}

.vdhs-disc{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position:absolute;
  top:5px; left:5px;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      rgba(0,0,0,0.04) 2px,
      rgba(0,0,0,0.04) 3px
    ),
    conic-gradient(from 200deg at 50% 50%,
      #e9e9ee 0deg,
      #f3d9e6 25deg,
      #d9e8f3 55deg,
      #f6f0d0 85deg,
      #e2e2e8 120deg,
      #dcdcdc 160deg,
      #f0e2d5 200deg,
      #d8e6ea 240deg,
      #eee0ee 280deg,
      #e6e6ea 320deg,
      #e9e9ee 360deg
    );
  box-shadow:
    0 8px 16px rgba(59,42,32,0.30),
    inset 0 0 0 1px rgba(0,0,0,0.08),
    inset 0 0 14px rgba(255,255,255,0.5);
  transition: transform 0.2s ease;
}
.vdhs-disc::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  border-radius:50%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 45%,
    rgba(255,255,255,0.15) 52%,
    transparent 65%
  );
  pointer-events:none;
}
.vdhs-disc::after{
  content:'';
  position:absolute; top:50%; left:50%;
  width:14px; height:14px;
  background: var(--cream);
  border-radius:50%;
  transform: translate(-50%,-50%);
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.22),
    inset 0 1px 2px rgba(0,0,0,0.15);
  z-index:3;
}
.vdhs-disc-label{
  position:absolute; top:50%; left:50%;
  width:60%; height:60%;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #E3C878 0%, var(--mustard) 65%, #B57A20 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.15),
    inset 0 2px 4px rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    0 1px 3px rgba(0,0,0,0.25);
  text-align:center;
  z-index:2;
}
.vdhs-disc-label span{
  font-family: 'Arvo', Georgia, serif;
  font-weight:700;
  font-size:13px;
  color: var(--brown);
  line-height:1.6;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.vdhs-disc-card .vdhs-years{
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--brown);
}

/* ---------- Track list (year pages) ---------- */
.vdhs-track{
  display:flex;
  align-items:center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.vdhs-track:first-of-type{ border-top: 1px solid var(--line); }
.vdhs-track-num{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--teal);
  width: 24px;
  flex-shrink:0;
}
.vdhs-track-info{ flex:1; min-width:0; }
.vdhs-track-title{ font-weight:600; }
.vdhs-track-note{ font-size:13px; color: var(--teal); }
.vdhs-track audio{ width: 230px; max-width: 38vw; height: 34px; }

/* ---------- Sidebar widgets ---------- */
#secondary .widget{
  background: #fff;
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin-bottom: 20px;
}
#secondary .widget-title{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 10px;
  margin: 0 0 12px;
}
#secondary .widget ul{ list-style:none; margin:0; padding:0; }
#secondary .widget li{ padding: 4px 0; }

/* ---------- Comments ---------- */
#comments{
  border-top: 1px dashed var(--line);
  padding-top: 24px;
  margin-top: 40px;
}
.comments-title{
  font-family: 'Arvo', serif;
  color: var(--brown);
  font-weight:400;
}
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  border: 1px solid var(--line);
  padding: 8px 10px;
  font-family: 'Public Sans', sans-serif;
  background: #fff;
}
.comment-form-comment{ display:block; margin-bottom: 14px; }
.comment-form label{
  display:block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--teal);
  margin-bottom: 4px;
}
.comment-form .form-submit input{
  background: var(--brown);
  color: var(--cream);
  border:none;
  padding: 10px 22px;
  font-family: 'IBM Plex Mono', monospace;
  cursor:pointer;
}
.comment-form .form-submit input:hover{ background: var(--red); }

/* ---------- Footer ---------- */
#colophon{
  background: var(--brown);
  color: var(--cream-dim);
  padding: 24px 0;
  margin-top: 40px;
  font-size: 13px;
  text-align:center;
}
#colophon a{ color: var(--mustard); }