/* ═══════════════════════════════════════════════════════════════
   Hake & Jarema — public site  (hnj.css)
   Design option "1a" (Psychedelic Fillmore). Reads gigs live from the
   Waykool Google Sheet via /api/sheets_proxy.php.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --cream:#F3E7CE; --ink:#2A1E12; --tomato:#C6371F; --amber:#E0A32E;
  --teal:#2E7D6F; --muted:#8a6a34; --dash:#c6a86e; --green:#3fb27f; --gray:#9a8f7a;
  --f-disp:'Rokkitt', Georgia, 'Times New Roman', serif;
  --f-disp-w:600;   /* Rokkitt is variable — 600 is the chosen display weight */
  --f-body:'DM Sans', system-ui, sans-serif;
  --f-mono:'DM Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--f-body); background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 40px; border-bottom:3px solid var(--ink); background:var(--cream)}
.brand{display:inline-flex; align-items:center; line-height:0; padding:4px 0; text-decoration:none}
.brand img{height:clamp(32px,4vw,50px); width:auto; display:block}
/* wordmark text kept in the markup for screen readers and SEO */
.brand .n,.brand .amp{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.nav-links{display:flex; gap:24px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{font-family:var(--f-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase; font-weight:500; text-decoration:none; padding-bottom:2px}
.nav-links a:hover{opacity:.75}
.nav-links a.active{border-bottom:2px solid var(--tomato)}
/* min 44px square: the ☰ glyph alone inherits the body font size, which
   leaves a target barely half the size a thumb needs. */
.menu-btn{display:none; background:none; border:none; cursor:pointer; color:var(--ink); font-size:26px; line-height:1; padding:0 6px; min-width:44px; min-height:44px; align-items:center; justify-content:center}

/* ── hero ────────────────────────────────────────────────────── */
.hero{position:relative; height:520px; overflow:hidden; background:var(--ink)}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 22s ease-in-out infinite}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,30,18,.15) 0%, rgba(42,30,18,.78) 100%); pointer-events:none}
.tagline{position:absolute; left:44px; bottom:110px; pointer-events:none}
.tagline .t1,.tagline .t3{font-family:var(--f-body); font-weight:500; font-size:20px; color:var(--amber)}
.tagline .t2{font-family:var(--f-disp); font-weight:var(--f-disp-w); font-size:62px; line-height:.98; color:var(--cream); text-shadow:4px 4px 0 var(--tomato); max-width:620px; margin:4px 0}
.sound-btn{position:absolute; right:28px; bottom:28px; z-index:5; display:inline-flex; align-items:center; gap:8px; border-radius:30px; border:2px solid var(--ink); padding:10px 18px; font-family:var(--f-mono); font-size:13px; letter-spacing:1px; font-weight:500; cursor:pointer; background:var(--cream); color:var(--ink)}
.sound-btn .dot{width:9px; height:9px; border-radius:50%; background:var(--gray)}
.sound-btn.on{background:var(--amber)}
.sound-btn.on .dot{background:var(--green)}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(42,30,18,.5); border:1px solid rgba(243,231,206,.5); color:var(--cream); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.hero-arrow.prev{left:20px} .hero-arrow.next{right:20px}
.hero-dots{position:absolute; right:28px; top:28px; display:flex; gap:7px}
.hero-dots span{height:4px; border-radius:2px; background:rgba(243,231,206,.4); width:9px; transition:width .2s}
.hero-dots span.active{width:26px; background:var(--cream)}

/* ── gigs ────────────────────────────────────────────────────── */
.gigs{padding:44px 40px 52px; background:var(--cream)}
.gigs-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; gap:16px}
.gigs-head h2{font-family:var(--f-disp); font-weight:var(--f-disp-w); font-size:40px; color:var(--tomato); margin:0}
.cal-btn{font-family:var(--f-mono); font-size:13px; text-transform:uppercase; letter-spacing:1px; font-weight:500; background:var(--ink); color:var(--amber); padding:11px 18px; border-radius:30px; text-decoration:none; white-space:nowrap}
.cal-btn:hover{opacity:.75}
.gig-row{display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:20px; padding:18px 0; border-top:2px dashed var(--dash)}
.gig-row .day{font-family:var(--f-disp); font-weight:var(--f-disp-w); font-size:22px; color:var(--teal)}
.gig-row .date{font-family:var(--f-mono); font-size:15px; color:var(--muted)}
.gig-row .mid{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0}
.gig-row .loc{font-family:var(--f-mono); font-size:14px; color:var(--muted); display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.gig-row .sep{color:var(--dash)}
/* Who is playing. Its own line inside the wrapping flex row: the venue
   is the headline, the act is the qualifier under it. */
.gig-row .act{flex-basis:100%; font-family:var(--f-mono); font-size:14px; color:var(--teal); letter-spacing:.02em}
.gig-row .venue{font-weight:700; font-size:20px; color:var(--ink)}
.gig-row .venue a{color:inherit; text-decoration:none; border-bottom:2px solid rgba(42,30,18,.28); transition:color .15s, border-color .15s}
.gig-row .venue a:hover{color:var(--tomato); border-bottom-color:var(--tomato)}
.gig-row .maplink{display:inline-flex; align-items:center; gap:4px; font-family:var(--f-mono); font-size:13px; color:var(--teal); text-decoration:none}
.gig-row .maplink svg{width:12px; height:12px; fill:currentColor; flex:none}
.gig-row .maplink:hover{color:var(--tomato)}
.gig-row .time{font-family:var(--f-mono); font-size:16px; font-weight:500; color:var(--ink); justify-self:end; white-space:nowrap}
.gig-row.cancelled{opacity:.6}
.gig-row.cancelled .venue{text-decoration:line-through}
.gig-empty{font-family:var(--f-mono); color:var(--muted); padding:22px 0; border-top:2px dashed var(--dash)}
.month-head{font-family:var(--f-disp); font-weight:var(--f-disp-w); font-size:28px; color:var(--tomato); margin:34px 0 6px}

/* ── home gigs: list + right-side ad rail ── */
.gigs-body{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start}
.gig-ad{display:flex; flex-direction:column; gap:10px; position:sticky; top:20px}
.ad-label{font-family:var(--f-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gray)}
.ad-card{background:#fff; border:2px solid var(--ink); border-radius:8px; overflow:hidden}
.ad-card a{display:block}
.ad-card img{display:block; width:100%; height:auto}
.ad-cap{font-family:var(--f-mono); font-size:12px; color:var(--muted); padding:10px 12px}
.ad-book{background:var(--ink); color:var(--cream); border:2px solid var(--ink); border-radius:8px; padding:22px 20px}
.ad-book .ad-kicker{font-family:var(--f-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber); margin:0 0 8px}
.ad-book .ad-title{font-family:var(--f-disp); font-weight:var(--f-disp-w); font-size:23px; line-height:1.06; color:var(--cream); margin:0 0 10px}
.ad-book p{font-family:var(--f-body); font-size:14px; line-height:1.5; color:#e7d9bd; margin:0 0 16px; max-width:none}
.ad-book .btn-primary{display:inline-block; text-decoration:none}
@media (max-width:860px){
  .gigs-body{grid-template-columns:1fr; gap:24px}
  .gig-ad{position:static; max-width:440px}
}

/* ── generic page content (about/book/merch/contact/calendar) ── */
.page{padding:44px 40px 60px; min-height:40vh}
.page h1{font-family:var(--f-disp); font-weight:var(--f-disp-w); font-size:44px; color:var(--tomato); margin:0 0 8px}
.page .lead{font-size:18px; max-width:640px}
.page p{max-width:640px; line-height:1.6}
.tbd{font-family:var(--f-mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); background:rgba(198,168,110,.18); border:1px dashed var(--dash); border-radius:6px; padding:2px 8px; display:inline-block}

/* ── forms ───────────────────────────────────────────────────── */
.form{max-width:560px}
.form .field{margin-bottom:16px}
.form label{display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.form input,.form textarea{width:100%; font-family:var(--f-body); font-size:16px; padding:11px 13px; background:#fff; border:2px solid var(--ink); border-radius:4px; color:var(--ink)}
.form textarea{min-height:120px; resize:vertical}
.form .hp{position:absolute; left:-9999px}
.btn-primary{font-family:var(--f-mono); font-size:14px; text-transform:uppercase; letter-spacing:1px; font-weight:500; background:var(--tomato); color:var(--cream); border:none; padding:13px 22px; border-radius:30px; cursor:pointer}
.btn-primary:hover{opacity:.9}
.form-note{font-family:var(--f-mono); font-size:13px; margin-top:12px}
.form-note.ok{color:var(--teal)} .form-note.err{color:var(--tomato)}

/* ── merch grid ──────────────────────────────────────────────── */
.merch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px}
.merch-card{background:#fff; border:2px solid var(--ink); border-radius:8px; overflow:hidden}
.merch-card .ph{aspect-ratio:1; background:repeating-linear-gradient(45deg,#efe0c2,#efe0c2 12px,#e7d4ac 12px,#e7d4ac 24px); display:flex; align-items:center; justify-content:center; font-family:var(--f-disp); font-weight:var(--f-disp-w); color:var(--muted); font-size:22px}
.merch-card .info{padding:12px 14px}
.merch-card .pname{font-weight:700}
.merch-card .price{font-family:var(--f-mono); color:var(--muted)}

/* ── contact ─────────────────────────────────────────────────── */
.contact{max-width:520px}
.contact a{color:var(--tomato); font-weight:500}
.social{display:flex; gap:18px; margin-top:18px; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:1px; font-size:13px}

/* ── footer ──────────────────────────────────────────────────── */
.footer{display:flex; justify-content:space-between; padding:22px 40px; background:var(--ink); color:var(--amber); font-family:var(--f-mono); font-size:12px; letter-spacing:1px}
.footer a{text-decoration:none}

@keyframes kenburns{
  0%{transform:scale(1.12) translate(0,0)}
  25%{transform:scale(1.2) translate(-2.5%,-1.5%)}
  55%{transform:scale(1.26) translate(1.5%,-2.5%)}
  80%{transform:scale(1.18) translate(2%,1%)}
  100%{transform:scale(1.12) translate(0,0)}
}
@media (max-width:720px){
  .nav{padding:14px 18px; position:relative; gap:12px}
  .brand img{height:clamp(30px,7.5vw,38px)}
  .menu-btn{display:inline-flex}
  /* align-items:stretch overrides the desktop rule's align-items:center.
     Left as centre, every <li> shrinks to the width of its own text, so
     the menu renders as a narrow centred column and there is nothing to
     aim at either side of the words. */
  .nav-links{position:absolute; top:100%; left:0; right:0; background:var(--cream); border-bottom:3px solid var(--ink); flex-direction:column; align-items:stretch; gap:0; display:none; z-index:5}
  .nav-links.open{display:flex}
  /* display:block is the whole fix for the tap target. An <a> is inline
     by default: width:100% is ignored outright, and vertical padding is
     painted but does NOT grow the line box. So the touchable area was
     only as wide as the glyphs and only one line tall, while the padding
     spilled over the rows above and below — which is why a tap so often
     landed on the neighbouring link. */
  .nav-links a{display:block; width:100%; box-sizing:border-box; padding:15px 20px; font-size:15px; line-height:1.25; text-align:left}
  .nav-links li + li a{border-top:1px solid rgba(42,30,18,.14)}
  /* The desktop "active" style is a border-bottom. On the inline <a> it
     was drawn 12px below its own text — which is exactly where the next
     link sits — so HOME's underline struck straight through ABOUT. A
     left bar cannot collide with anything. */
  .nav-links a.active{border-bottom:0; border-left:4px solid var(--tomato); padding-left:16px; background:rgba(198,55,31,.06)}
  .hero{height:400px}
  .tagline{left:20px; bottom:80px}
  .tagline .t2{font-size:40px}
  .gigs,.page{padding:30px 20px 40px}
  .gigs-head h2,.page h1{font-size:30px}
  .gig-row{grid-template-columns:96px 1fr; row-gap:6px}
  .gig-row .time{grid-column:2; justify-self:start; margin-top:4px}
  .footer{padding:16px 20px; flex-direction:column; gap:6px}
}
@media (prefers-reduced-motion:reduce){ .hero video{animation:none; transform:scale(1.12)} }

/* ── nav social icons (Facebook / Instagram) ── */
.nav-links .nav-ic a{display:inline-flex;align-items:center;padding:0;border:none}
.nav-links .nav-ic svg{width:20px;height:20px;fill:var(--ink);transition:fill .15s;display:block}
.nav-links .nav-ic a:hover{opacity:1}
.nav-links .nav-ic a:hover svg{fill:var(--tomato)}
@media (max-width:720px){
  /* Same treatment as the text links: a full-width row with a real
     minimum height, so the icons are as easy to hit as everything else.
     These selectors match .nav-links .nav-ic a above at equal weight and
     win on source order, so keep this block below it. */
  .nav-links .nav-ic{display:block}
  .nav-links .nav-ic a{display:flex; align-items:center; width:100%; box-sizing:border-box; min-height:48px; padding:12px 20px; border-top:1px solid rgba(42,30,18,.14)}
  .nav-links .nav-ic svg{width:22px; height:22px}
}