/* Location pages (Brentwood, Dublin, Pleasant Hill, Rocklin, Online).
   Same tokens, buttons, nav and footer as the homepage (index.html), which
   copies them from app.hackingtons DESIGN_SYSTEM.md. */

/* Tokens: copied from app.hackingtons myApp/client/styles/_tokens.scss (DESIGN_SYSTEM.md) */
:root{
  --hk-orange:#e1510a; --hk-orange-hover:#cd4400; --hk-orange-soft:#e57944;
  --hk-bg:#1a1a1a; --hk-surface:#222; --hk-card:#252525;
  --hk-border:rgba(242,242,242,.1);
  --hk-text:#f2f2f2; --hk-muted:#999;
  --hk-radius:6px; --hk-radius-card:10px; --hk-radius-pill:999px;
  --hk-font:'Source Code Pro',monospace;
  --hk-font-sans:'Source Sans Pro','Helvetica Neue',Helvetica,sans-serif;
  --hk-space-1:4px; --hk-space-2:8px; --hk-space-3:12px; --hk-space-4:16px; --hk-space-5:24px; --hk-space-6:32px;
  --hk-fs-sm:13px; --hk-fs:15px; --hk-fs-lg:18px; --hk-fs-h3:20px; --hk-fs-h2:24px; --hk-fs-h1:30px;
  --hk-shadow-card:0 2px 8px rgba(0,0,0,.35); --hk-shadow-float:0 12px 32px rgba(0,0,0,.55);
  --hk-page-width:1140px;
  /* Marketing-only display sizes (hero and closing line); the app tops out at --hk-fs-h1 */
  --hk-fs-display:clamp(32px,4.6vw,50px); --hk-fs-statement:clamp(26px,3.6vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--hk-bg); color:var(--hk-text); font-family:var(--hk-font); font-size:var(--hk-fs); line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--hk-orange-soft)}
h1,h2,h3{font-family:var(--hk-font); color:var(--hk-text); line-height:1.25; margin:0 0 var(--hk-space-3)}
h1{font-size:var(--hk-fs-h1)}
h2{font-size:var(--hk-fs-h2)}
h3{font-size:var(--hk-fs-h3)}
p{margin:0 0 var(--hk-space-4)}
.wrap{max-width:var(--hk-page-width); margin:0 auto; padding:0 var(--hk-space-4)}
section{padding:calc(var(--hk-space-6) * 2) 0; border-top:1px solid var(--hk-border); scroll-margin-top:56px}
.eyebrow{font-size:var(--hk-fs-sm); font-weight:600; color:var(--hk-orange-soft); margin-bottom:var(--hk-space-2)}
.lede{font-size:var(--hk-fs-lg); color:var(--hk-text)}
.muted{color:var(--hk-muted)}
.accent{color:var(--hk-orange-soft)}
.section-head{max-width:760px; margin-bottom:var(--hk-space-6)}
.section-head p:last-child{margin-bottom:0}

/* Buttons: the app's house buttons (Bootstrap 3 .btn + _buttons.scss + icon spacing from _components.scss) */
.btn{display:inline-block; font-family:var(--hk-font); font-size:14px; line-height:1.42857143; font-weight:600; text-align:center; white-space:nowrap; vertical-align:middle; padding:5px 11px; border:2px solid transparent; border-radius:var(--hk-radius); text-decoration:none; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease}
.btn:focus-visible{outline:2px solid var(--hk-orange); outline-offset:2px}
.btn-lg{padding:9px 15px; font-size:var(--hk-fs-lg); line-height:1.3333333}
.btn-primary{background-color:var(--hk-orange); border-color:var(--hk-orange); color:#fff}
.btn-primary:hover,.btn-primary:focus{background-color:var(--hk-orange-hover); border-color:var(--hk-orange-hover); color:#fff}
.btn-default{background-color:transparent; border-color:var(--hk-orange); color:var(--hk-orange)}
.btn-default:hover,.btn-default:focus{background-color:var(--hk-orange); border-color:var(--hk-orange); color:#fff}
.btn:not(.btn-icon) > i[class*="fa-"]:first-child{margin-right:6px}
.btn > i.hk-icon-after{margin-right:0; margin-left:6px}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--hk-space-3)}

/* Nav */
.nav{position:sticky; top:0; z-index:50; background:var(--hk-surface); border-bottom:1px solid var(--hk-border)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:56px; gap:var(--hk-space-4)}
.brand{display:flex; align-items:center; gap:var(--hk-space-2); text-decoration:none; color:var(--hk-text); font-weight:700; font-size:var(--hk-fs-lg)}
.nav-links{display:flex; align-items:center; gap:var(--hk-space-5)}
.nav-links a{color:var(--hk-muted); text-decoration:none}
.nav-links a:hover{color:var(--hk-text)}
.nav-links .btn{color:#fff}
@media (max-width:760px){ .nav-links{gap:var(--hk-space-3)} .nav-links a:not(.btn,.nav-keep){display:none} }
@media (max-width:420px){ .brand{font-size:0} }

/* Hero */
.hero{border-top:0; padding:calc(var(--hk-space-6) * 2) 0; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; top:-200px; right:-150px; width:640px; height:640px; background:radial-gradient(circle, color-mix(in srgb, var(--hk-orange) 22%, transparent), transparent 65%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--hk-space-6); align-items:center; position:relative}
.hero h1{font-size:var(--hk-fs-display); line-height:1.1; letter-spacing:-.01em; margin-bottom:var(--hk-space-5)}
.hero h1 .accent{color:var(--hk-orange)}
.hero .lede{max-width:560px; margin-bottom:var(--hk-space-5)}
.hero-fig{margin:0}
.hero-fig img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--hk-radius-card); box-shadow:var(--hk-shadow-float)}
.hero-fig figcaption{margin-top:var(--hk-space-3); font-size:var(--hk-fs-sm); color:var(--hk-muted)}
.hero-fig figcaption i{color:var(--hk-orange-soft); margin-right:6px}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} }

/* Quotes */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hk-space-4)}
.quote{background:var(--hk-card); border:1px solid var(--hk-border); border-radius:var(--hk-radius-card); box-shadow:var(--hk-shadow-card); padding:var(--hk-space-5); margin:0}
.quote .eyebrow{margin-bottom:var(--hk-space-2)}
.quote p{font-family:var(--hk-font-sans); font-size:var(--hk-fs-lg); margin-bottom:var(--hk-space-2)}
.quote footer{font-size:var(--hk-fs-sm); color:var(--hk-muted)}
@media (max-width:900px){ .quotes{grid-template-columns:1fr} }

/* Photo gallery: phones show the first six */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--hk-space-3)}
.gallery img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--hk-radius-card)}
@media (max-width:900px){
  .gallery{grid-template-columns:1fr 1fr}
  .gallery img:nth-child(n+7){display:none}
}

/* Cards (projects, tracks) */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--hk-space-5)}
.card{background:var(--hk-card); border:1px solid var(--hk-border); border-radius:var(--hk-radius-card); box-shadow:var(--hk-shadow-card); overflow:hidden; display:flex; flex-direction:column; margin:0}
.card > img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:var(--hk-surface)}
.card-body{padding:var(--hk-space-5); display:flex; flex-direction:column; flex:1}
.card-body h3{margin-bottom:var(--hk-space-1)}
.card-meta{font-size:var(--hk-fs-sm); color:var(--hk-muted); margin-bottom:var(--hk-space-3)}
.card-body p{flex:1}
.chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--hk-space-2)}
.chips li{font-size:var(--hk-fs-sm); font-weight:600; color:var(--hk-orange-soft); border:1px solid var(--hk-border); border-radius:var(--hk-radius-pill); padding:0 var(--hk-space-3)}
.more{text-align:center; margin:var(--hk-space-6) 0 0}
@media (max-width:900px){ .cards{grid-template-columns:1fr} }

/* Hackingtons 500 photo */
.h500-fig{position:relative; margin:0}
.h500-fig img{width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; border-radius:var(--hk-radius-card)}
.h500-fig figcaption{position:absolute; left:var(--hk-space-4); bottom:var(--hk-space-4); font-size:var(--hk-fs-sm); font-weight:700; color:#fff; background:rgba(0,0,0,.6); padding:var(--hk-space-1) var(--hk-space-2); border-radius:var(--hk-radius-pill)}
@media (max-width:600px){ .h500-fig img{aspect-ratio:4/3} }

/* Class times */
.times-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--hk-space-2); margin-bottom:var(--hk-space-3)}
.times-head h2{margin:0}
.times-scroll{overflow-x:auto; background:var(--hk-card); border:1px solid var(--hk-border); border-radius:var(--hk-radius-card)}
.times{width:100%; border-collapse:collapse; text-align:left; white-space:nowrap}
.times th,.times td{padding:var(--hk-space-3) var(--hk-space-4); border-bottom:1px solid var(--hk-border)}
.times th{font-size:var(--hk-fs-sm); color:var(--hk-orange-soft)}
.times tbody tr:last-child td{border-bottom:0}
.times-note{margin:var(--hk-space-3) 0 0; font-size:var(--hk-fs-sm); color:var(--hk-muted)}

/* Booking CTA */
.book{text-align:center}
.book h2{font-size:var(--hk-fs-statement); line-height:1.2}
.book p{max-width:640px; margin-left:auto; margin-right:auto; color:var(--hk-muted)}
.book .btn-row{justify-content:center; margin-top:var(--hk-space-5)}

/* FAQ */
.faq{max-width:760px; display:flex; flex-direction:column; gap:var(--hk-space-3)}
.faq details{background:var(--hk-card); border:1px solid var(--hk-border); border-radius:var(--hk-radius-card)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--hk-space-4); padding:var(--hk-space-4) var(--hk-space-5); font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:var(--hk-fs-sm); color:var(--hk-orange-soft); transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:focus-visible{outline:2px solid var(--hk-orange); outline-offset:2px; border-radius:var(--hk-radius-card)}
.faq details p{font-family:var(--hk-font-sans); font-size:var(--hk-fs-lg); color:var(--hk-text); margin:0; padding:0 var(--hk-space-5) var(--hk-space-5)}

/* Map */
.map-head h2{margin-bottom:var(--hk-space-1)}
.map-frame{display:block; width:100%; height:360px; border:0; border-radius:var(--hk-radius-card); margin-top:var(--hk-space-4); filter:invert(90%) hue-rotate(180deg)}

/* Footer */
footer.site{padding:var(--hk-space-6) 0 96px; text-align:center; color:var(--hk-muted); font-size:var(--hk-fs-sm); border-top:1px solid var(--hk-border); background:var(--hk-surface)}
footer.site img{margin:0 auto var(--hk-space-5)}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--hk-space-2) var(--hk-space-6); margin-bottom:var(--hk-space-5)}
.foot-links a{color:var(--hk-text); text-decoration:none; font-size:var(--hk-fs); white-space:nowrap}
.foot-links a:hover{color:var(--hk-orange-soft)}
.foot-sub{margin-bottom:var(--hk-space-3)}
.foot-sub a{color:var(--hk-muted); font-size:var(--hk-fs-sm)}
.foot-meta{display:flex; flex-direction:column; gap:var(--hk-space-1); margin:0}

/* Sticky mobile CTA */
.mobile-cta{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:var(--hk-space-2); padding:var(--hk-space-3) var(--hk-space-4) calc(var(--hk-space-3) + env(safe-area-inset-bottom)); background:var(--hk-surface); border-top:1px solid var(--hk-border); transform:translateY(100%); transition:transform .25s ease}
.mobile-cta.is-visible{transform:none}
.mobile-cta .btn{flex:1}
@media (max-width:760px){ .mobile-cta{display:flex} }