/* 701 Indoor Golf & Bar — production styles (hover, states, drawer, motion).
   Tokens + responsive grids come from colors_and_type.css and kit.css. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--fg1);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{-webkit-tap-highlight-color:transparent}

/* ---- buttons ---- */
.btn{font-family:var(--font-sans);font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:0;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.btn svg{width:16px;height:16px}
.btn--md{font-size:13px;padding:13px 26px}
.btn--lg{font-size:15px;padding:16px 32px}
.btn--lg svg{width:18px;height:18px}
.btn--sm{font-size:12px;padding:9px 18px}
.btn--navy{background:var(--court-navy);color:#fff;box-shadow:0 4px 14px rgba(14,36,56,.22)}
.btn--navy:hover{background:#163149;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--court-navy);box-shadow:var(--shadow-md)}
.btn--light:hover{background:#F4F6F7;box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.btn--dark{background:var(--rich-black);color:#fff}
.btn--dark:hover{background:var(--ink-700);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--rich-black);box-shadow:inset 0 0 0 2px var(--rich-black)}
.btn--outlineLight{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.btn--outlineLight:hover{background:rgba(255,255,255,.08)}
.btn--navyOutline{background:transparent;color:var(--court-navy);box-shadow:inset 0 0 0 2px var(--court-navy)}
.btn--navyOutline:hover{background:rgba(14,36,56,.06)}
.btn--outline:hover{background:rgba(11,11,14,.05)}

/* ---- keyboard focus ---- */
:focus-visible{outline:3px solid var(--info);outline-offset:2px;border-radius:3px}
.btn:focus-visible{outline:3px solid var(--info);outline-offset:3px}
.btn--light:focus-visible,.btn--outlineLight:focus-visible{outline-color:#fff}
.site-header :focus-visible,.kit-mobile-drawer :focus-visible,footer :focus-visible{outline-color:#9CC4EA}

/* ---- header background (scroll-driven) ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,14,1);border-bottom:1px solid rgba(255,255,255,.08);transition:background var(--dur-base) var(--ease-out)}
.site-header .btn--md{font-size:14px;padding:14px 28px}
.site-header[data-scrolled]{background:rgba(11,11,14,.86);backdrop-filter:blur(10px)}

/* ---- header nav hover ---- */
.nav-link{color:rgba(255,255,255,.82);font-family:var(--font-sans);font-weight:600;font-size:14px;letter-spacing:.02em;text-decoration:none;transition:color .15s;white-space:nowrap}
nav.kit-desktop-nav{gap:13px !important}
@media (max-width:1400px){nav.kit-desktop-nav{gap:11px !important}nav.kit-desktop-nav .nav-link{font-size:13.5px}}
.nav-link:hover{color:#fff}
.nav-link[aria-current="page"]{color:var(--golf-green)}
.footer-link{color:rgba(255,255,255,.7);font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none}
.footer-link:hover{color:#fff}

/* ---- cards lift ---- */
.lift{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ---- mobile drawer ---- */
.kit-burger{display:none}
button.kit-burger{padding:10px 8px;margin-right:-8px}
.kit-mobile-drawer{display:none;background:#0B0B0E;border-top:1px solid rgba(255,255,255,.08);padding:14px 28px 24px}
.kit-mobile-drawer.open{display:block}
.kit-mobile-drawer a{display:block;padding:13px 0;color:#fff;font-family:var(--font-sans);font-weight:600;font-size:16px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07)}
.kit-mobile-drawer a[aria-current="page"]{color:var(--golf-green)}
/* Switch to the hamburger before the nav + Gift Cards/Book buttons can overflow (tablet/landscape band) */
@media (max-width:1240px){
  .kit-desktop-nav{display:none !important}
  .kit-burger{display:inline-flex !important}
}
@media (max-width:900px){
  .kit-desktop-nav{display:none !important}
  .kit-burger{display:inline-flex !important}
  .site-header > div:first-child{height:96px !important}
  .site-header img{height:64px !important}
}
@media (max-width:560px){
  .site-header > div:first-child{height:78px !important;padding:0 18px !important}
  .site-header img{height:52px !important}
  .btn--sm{font-size:13px;padding:12px 20px}
}
/* League photo gallery — let portrait phone photos show at their natural
   aspect on small screens instead of being cropped into slivers. */
@media (max-width:900px){
  .kit-gallery{grid-template-columns:1fr 1fr !important;grid-auto-rows:auto !important;gap:16px !important}
  .kit-gallery>div{grid-column:auto !important}
  .kit-gallery>div:first-child{grid-column:1 / -1 !important}
  .kit-gallery>div:last-child{grid-column:1 / -1 !important;justify-self:center;width:calc(50% - 8px)}
  .kit-gallery img{height:auto !important}
}
@media (max-width:560px){
  .kit-gallery{grid-template-columns:1fr !important;gap:14px !important}
  .kit-gallery>div:last-child{width:auto !important;justify-self:stretch}
}

/* ---- contact map embed ---- */
.contact-map{max-width:1240px;margin:clamp(26px,4vw,44px) auto 0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);line-height:0;background:var(--ink-100)}
.contact-map iframe{width:100%;height:400px;border:0;display:block}
@media (max-width:620px){ .contact-map iframe{height:300px} }

/* ---- persistent mobile CTA bar ---- */
.mobile-cta{display:none}
@media (max-width:900px){
  .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(11,11,14,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.1)}
  .mobile-cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;
    border-radius:999px;font-family:var(--font-sans);font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;font-size:15px;text-decoration:none;transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out)}
  .mobile-cta a svg{width:18px;height:18px}
  .mobile-cta__call{flex:0 0 38%;color:#fff;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
  .mobile-cta__call:active{background:rgba(255,255,255,.08)}
  .mobile-cta__book{flex:1;color:var(--court-navy);background:#fff;box-shadow:var(--shadow-md)}
  .mobile-cta a:active{transform:scale(.98)}
  /* keep footer/content clear of the fixed bar */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ---- FAQ accordion ---- */
.faq-a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-out)}
.faq-row.open .faq-a{max-height:320px}
.faq-toggle{width:32px;height:32px;border-radius:50%;background:rgba(14,36,56,.09);display:flex;align-items:center;justify-content:center;flex:none;transition:background var(--dur-base) var(--ease-out)}
.faq-row.open .faq-toggle{background:var(--court-navy)}
.faq-icon-plus{display:inline-flex}
.faq-row.open .faq-icon-plus{display:none}
.faq-icon-minus{display:none}
.faq-row.open .faq-icon-minus{display:inline-flex}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ---- course featured rotator ---- */
.rot-stage{margin:0;position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);background:var(--ink-800);aspect-ratio:16/9}
.rot-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-out);background:linear-gradient(160deg,#14334d,#0b1c2e)}
.rot-slide.active{opacity:1}
.rot-slide img{width:100%;height:100%;object-fit:cover;display:block}
.rot-caption{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 18px;background:linear-gradient(180deg,transparent,rgba(11,11,14,.8));font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(20px,2.4vw,30px);color:#fff;line-height:1.05}
.rot-counter{position:absolute;top:16px;right:16px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;background:rgba(11,11,14,.55);backdrop-filter:blur(4px);padding:6px 12px;border-radius:999px}
.rot-tabs{margin-top:16px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.rot-tab{border:0;border-top:4px solid var(--ink-100);background:transparent;text-align:left;padding:9px 2px 0;cursor:pointer;font-family:var(--font-sans);font-size:13px;line-height:1.2;font-weight:700;color:var(--fg3);transition:border-top-color .2s,color .2s}
.rot-tab.active{border-top-color:var(--golf-green);color:var(--rich-black)}
.rot-tab:hover{border-top-color:var(--court-navy);color:var(--court-navy)}
@media (max-width:900px){ .rot-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .rot-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} }