:root{
  --green:#5d745c;--green2:#3D6322;--gold:#D9A441;--white:#fff;
  --page:#F7F4EC;--ink:#1A1A1A;--muted:#7A7563;--border:#D9D2C1;
  --stripe:#F3F1E6;--shadow:rgba(0,0,0,.08);--sky:#3D6322;
  --orange:#BF360C;--muni:#5C6BC0;--red:#BE1E2D;--cream:#F7F4EC;

  /* Locked color palette v1.0 — as of the v57 card redesign, --page/--cream
     map to Off White and --border to Light Border, bringing the header and
     page chrome onto the locked palette. --gold (Featured) is the one
     remaining legacy color, pending a Featured-styling decision. */
  --pine:#234C3D;--sage:#5D735B;--tee-red:#BE4938;--sand:#EAE1CB;
  --offwhite:#F7F4EC;--dark-text:#122B22;--card-border:#D9D2C1;--success:#6C8A67;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{overscroll-behavior-y:contain}
/* Disabled here (not just on the header) because CSS scroll anchoring
   operates on the scroll container itself. Needed because the header's
   continuous scroll-linked collapse resizes content above the viewport on
   every frame — exactly what scroll anchoring "corrects" for, which fought
   our intentional resize and made the collapse feel broken/stuck. */
html{overflow-anchor:none}
body{background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;min-height:100vh;line-height:1.5;overscroll-behavior-y:contain}

/* ── HEADER ── */
header{background:var(--cream);border-bottom:1px solid var(--border);padding:0;position:sticky;top:0;z-index:200;box-shadow:0 2px 10px var(--shadow)}
/* Ensure scrolled-to content clears the sticky header on mobile */
@media(max-width:580px){
  html{scroll-padding-top:70px}
}

/* Logo row — light cream like the rest of the header now that the logo has dark text */
.hd-logo-row{display:flex;justify-content:space-between;align-items:center;background:var(--cream);padding:0px 18px 0px;transition:padding .25s ease}
.header-logo{height:55px;width:auto;display:block;transition:height .25s ease,width .25s ease}
.hamburger-btn{background:none;border:none;color:var(--pine);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.hamburger-btn:hover{opacity:.7}
.hamburger-label{display:none}

/* MOBILE: compact photo hero — logo + hamburger sit directly on the
   course photo, matching the marketing mockup. On scroll this row
   switches to a solid compact sticky bar (see COLLAPSED STATE below).
   Small upper-right gradient improves hamburger visibility without washing
   out the full photo. Logo shadow removed for cleaner brand rendering. */
@media(max-width:580px){
  header{border-bottom:none;box-shadow:none}
  .hd-logo-row{
    flex-direction:row;justify-content:space-between;align-items:flex-start;
    padding:16px 16px 0;
background-image:url('hero-bg.jpg');;
    background-size:cover;background-position:center 32%;background-repeat:no-repeat;
    min-height:210px;
    transition:min-height .25s ease,padding .25s ease,background-image .2s ease;
  }
  .header-logo{height:auto;width:min(500px,52vw);margin:0;filter:none}
.hamburger-btn{width:auto;background:none;color:#fff;padding:4px;margin-top:2px;border-radius:0;gap:0;border:none;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));transition:color .2s ease,filter .2s ease}

#hamburger-icon svg{
  width:30px;
  height:30px;
  overflow:visible;
}

#hamburger-icon svg circle{
  fill:rgba(18,43,34,.65);
  stroke:rgba(255,255,255,.9);
}

#hamburger-icon svg line{
  stroke:#fff;
}

.hamburger-label{display:none}
.hamburger-btn:hover{opacity:1}
.hamburger-btn:active{opacity:.7}
}

/* Content area below the logo row — holds search/controls */
.hd-content{padding:6px 18px 10px;transition:padding .25s ease}

/* MOBILE: overlapping search card — pulled up over the photo so a good
   chunk of the image shows behind it, and inset from the screen edges
   (not full-bleed) so it reads as a capsule sitting on the photo rather
   than a bar stretched to the edges. Scrolls away with the photo as
   normal content; the compact bar below is the only thing sticky. */
@media(max-width:580px){
  .hero-text{display:none}
  .hero-block{margin-top:0;position:relative}
  .hero-search-col{
    width:calc(100% - 60px)!important;
    margin:0 auto;
    background:var(--offwhite);
    border:1px solid var(--card-border);
    border-radius:14px;
    box-shadow:0 0px 10px rgba(18,43,34,.16);
    padding:14px 14px 12px!important;
  }
  .hero-search-col .search-bar{background:transparent;border:none;box-shadow:none;padding:0 0 4px;margin-bottom:0}
}

/* COLLAPSED STATE — mobile only, triggered on scroll down. The photo
   hero and overlapping search card scroll away naturally (collapsed to
   zero height below); the logo row becomes a solid, compact sticky bar.
   The header's own border/shadow is only turned on here — while
   expanded it sits behind the overlapping card and was rendering as a
   stray hard-edged line across it. */
@media(max-width:580px){
  header.collapsed{border-bottom:1px solid var(--border);box-shadow:0 3px 10px rgba(0,0,0,.12)}
  header.collapsed .hd-logo-row{
    padding:10px 16px;
    align-items:center;
    background-image:none;
    background-color:var(--cream);
    min-height:0;
  }
  header.collapsed .header-logo{width:min(300px,46vw);filter:none}
  header.collapsed .hamburger-btn{padding:8px 0;margin-top:0;color:var(--pine);filter:none}
  header.collapsed .hd-content{padding-top:4px}
  header.collapsed .hero-block,
  header.collapsed .search-bar,
  header.collapsed .name-bar,
  header.collapsed .date-bar,
  header.collapsed .more-search-toggle,
  header.collapsed .more-search-panel,
  header.collapsed .tf-row{
    max-height:0;opacity:0;margin:0;padding:0;border:none;overflow:hidden;
  }
  .search-bar,.name-bar,.date-bar,.tf-row{
    max-height:300px;opacity:1;overflow:hidden;
    transition:max-height .25s ease,opacity .2s ease,margin .25s ease,padding .25s ease;
  }
}

/* iOS Safari auto-zooms the whole page on focus for any text input/select
   under 16px, then leaves the page zoomed in after the keyboard closes —
   this is the "goofy"/stuck-zoomed behavior after searching on mobile.
   Forcing every field to 16px here removes the trigger at the source,
   so the page never zooms in the first place and stays normal after submit. */
@media(max-width:580px){
  .zip-in,.rad-sel,.name-in,.date-in,.field-input,.field-select,
  .teesheet-day-input,.teesheet-mini-input,.teesheet-mini-notes,
  .fallback-textarea,.modal-field textarea,#teesheet-title{
    font-size:16px!important;
  }
}

@media(min-width:901px){
  .hd-logo-row{justify-content:flex-start}
}
@media(min-width:581px){
  .hd-logo-row{max-width:1440px;margin:0 auto;padding-left:40px;padding-right:40px;width:100%;box-sizing:border-box}
}
.top-nav{display:none}
@media(min-width:901px){
  .top-nav{display:flex;align-items:center;gap:28px;margin-left:auto;margin-right:32px}
  .top-nav-link{font-size:.9rem;font-weight:600;color:var(--dark-text);text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;transition:all .15s}
  .top-nav-link:hover{color:var(--sage)}
  .top-nav-link.active{color:var(--dark-text);border-bottom-color:var(--sage)}
}

/* ── HERO BLOCK — headline left, compact search card right ── */
.hero-block{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;padding:20px 0 22px;max-width:1440px;margin:0 auto;transition:padding .25s ease,opacity .2s ease,max-height .25s ease;overflow:hidden;flex-wrap:wrap}
.hero-text{flex:1;min-width:280px}
.hero-headline{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:3rem;line-height:1.05;color:var(--pine);letter-spacing:-.01em}
.hero-headline::after{
  content:"";
  display:block;
  width:88px;
  height:2px;
  background:var(--tee-red);
  border-radius:999px;
  margin:12px 0 12px;
}
.hero-sub{display:none}
.hero-search-col{flex-shrink:0;width:100%;max-width:480px}
.hero-inner{display:contents}

/* ── DESKTOP PHOTO HERO (901px+) ── */
@media(min-width:901px){
  .hd-content{padding:6px 0 10px}
  .hero-block{
    background-image:url('hero-bg.jpg');
    background-size:cover;background-position:center 30%;
    min-height:285px;width:100%;max-width:none;margin:0;
    display:block;padding:36px 0 0;margin-bottom:-24px;;overflow:visible;
  }
  .hero-inner{max-width:1440px;margin:0 auto;padding:0 40px;display:flex;flex-direction:column;justify-content:space-between;min-height:294px}
  .hero-text{max-width:760px;padding-top:42px;}
  .hero-headline{font-size:2.7rem;text-shadow:0 1px 12px rgba(255,255,255,.5)}
.hero-sub{
  display:block;
  font-size:1rem;
  color:var(--dark-text);
  margin-top:0;
  max-width:none;
  white-space:nowrap;
  text-shadow:0 1px 8px rgba(255,255,255,.7);
}  .hero-search-col{background:#fff;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:16px 24px;margin:-30px 0 30px!important;max-width:none;width:auto}
  .hero-search-col .search-bar{background:transparent;border:none;box-shadow:none;padding:0;margin-bottom:0}
  .sort-bar{margin-top:18px}
}
@media(min-width:581px){
  .sort-bar{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important;padding:6px 40px 10px!important;box-sizing:border-box;width:100%}
  #grid{padding:18px 40px 100px!important}
}

/* Floating Edit Search / Tee Sheet bar — mobile only now that both
   actions live in the top nav on desktop */
@media(min-width:901px){
  .floating-bar{display:none!important}
}

/* Floating Edit Search / Tee Sheet bar — mobile only now that both
   actions live in the top nav on desktop */
@media(min-width:901px){
  .floating-bar{display:none!important}
}
@media(max-width:580px){
  .hero-block{padding:10px 0 12px}
  .hero-headline{font-size:1.55rem}
  .hero-search-col{max-width:none}
}

/* SEARCH BAR */
.search-bar{background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:14px 16px;box-shadow:0 2px 10px var(--shadow);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
@media(max-width:580px){.search-bar{padding:9px 10px;border-radius:11px}}

.sb-section{display:flex;align-items:center;gap:6px}
.sb-lbl{font-size:.72rem;color:var(--ink);font-weight:600;white-space:nowrap}
.zip-wrap{position:relative;display:flex;align-items:center}
.zip-in{background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 30px 7px 8px;font-size:.95rem;font-family:inherit;color:var(--ink);width:100px;font-weight:700;letter-spacing:.04em}
.zip-loc-btn{position:absolute;right:6px;background:none;border:none;padding:0;cursor:pointer;color:var(--sage);display:flex;align-items:center;opacity:.7;transition:opacity .15s}
.zip-loc-btn:hover{opacity:1}
.zip-in:focus{outline:2px solid var(--gold);outline-offset:1px}
.rad-sel{background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 6px;font-size:.78rem;font-family:inherit;color:var(--ink);cursor:pointer}
.go-btn{background:var(--sage);border:none;border-radius:8px;padding:0 16px;height:38px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;color:#fff;cursor:pointer;transition:background .15s;white-space:nowrap;line-height:1}.go-btn:hover{background:var(--sage)}
.go-btn:disabled{background:#ccc;color:#888;cursor:not-allowed}
.loc-btn{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 9px;font-size:.8rem;cursor:pointer;color:var(--sage);transition:background .15s;white-space:nowrap;font-family:inherit;font-weight:600}
.loc-btn:hover{background:var(--stripe)}
.loc-btn:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:400px){.loc-btn-label{display:none}}
.sb-status{font-size:.85rem;color:var(--muted);font-style:italic;flex:1;min-width:80px}
.sb-err{font-size:.7rem;color:var(--red);font-style:italic;flex:1}

/* NAME SEARCH BAR */
/* MORE SEARCH OPTIONS TOGGLE */
.more-search-toggle{width:100%;background:var(--stripe);border:1.5px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 0;font-size:.78rem;color:var(--sage);font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:8px;transition:all .15s}
.more-search-toggle:hover{background:#EAE6D5;border-color:var(--pine)}
.more-search-icon{font-size:.9rem}
.more-search-toggle:hover{opacity:.75}
.more-search-chevron{font-size:.62rem;transition:transform .2s ease;display:inline-block}
.more-search-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease}
.more-search-panel.open{max-height:400px;opacity:1}
@media(min-width:581px){
  .more-search-toggle{display:none}
  .more-search-panel{display:none!important}
}

.name-bar{background:var(--stripe);border:1px solid var(--border);border-radius:8px;padding:7px 12px;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.name-in-wrap{position:relative;flex:1;display:flex;align-items:center}
.name-in{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 28px 7px 10px;font-size:.9rem;font-family:inherit;color:var(--ink);flex:1;width:100%;outline:none}
.name-in:focus{outline:2px solid var(--gold);outline-offset:1px}
.name-clear-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 4px;border-radius:4px;display:flex;align-items:center;justify-content:center}
.name-clear-btn:hover{color:var(--ink);background:rgba(0,0,0,.06)}

/* DATE WEATHER BAR */
.date-bar{background:var(--stripe);border:1px solid var(--border);border-radius:8px;padding:7px 12px;display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.date-row{display:flex;align-items:center;gap:8px}
.date-icon{font-size:.95rem;flex-shrink:0}
.date-in{background:#fff;border:1px solid var(--border);border-radius:6px;padding:7px 10px;font-size:.9rem;font-family:inherit;color:var(--ink);cursor:pointer;flex:1;outline:none}
.date-in:focus{outline:2px solid var(--gold);outline-offset:1px}
.date-clear{background:none;border:none;color:var(--muted);font-size:.78rem;cursor:pointer;padding:4px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.date-clear:hover{color:var(--ink);background:rgba(0,0,0,.06)}
.date-wx{font-size:.7rem;color:var(--sage);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* WEEK-VIEW DAY CHIPS */
.day-chips{display:flex;gap:6px;overflow-x:auto;padding:0 14px 1px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain}
.day-chips::-webkit-scrollbar{display:none}
.day-chip{background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:5px 9px;display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;flex-shrink:0;font-family:inherit;transition:all .15s;min-width:38px}
.day-chip:hover{background:var(--stripe)}
.day-chip.active{background:var(--pine);border-color:var(--pine)}
.day-chip-label{font-size:.6rem;color:var(--muted);font-weight:700;text-transform:uppercase}
.day-chip.active .day-chip-label{color:rgba(255,255,255,.85)}
.day-chip-num{font-size:.92rem;color:var(--ink);font-weight:700}
.day-chip.active .day-chip-num{color:#fff}

/* CONTROLS */
/* Desktop: sort row and type row share one line, sort anchored left,
   type anchored right, gap flexes to fill the space between them —
   saves vertical real estate. Mobile overrides this to stack + center. */
.sort-bar{background:var(--cream);border-bottom:1px solid var(--border);padding:6px 14px;display:flex;align-items:center;justify-content:space-between}
.sort-type-desktop{display:none}
.wx-toggle-btn{margin-left:auto}
.wx-panel{max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease;background:var(--cream);border-bottom:1px solid var(--border)}
.wx-panel.open{max-height:120px;opacity:1;padding:8px 0 10px}
.filter-row-wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.hd-ctrl{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ctrl-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.srt-btn{background:#fff;border:1px solid var(--border);color:var(--ink);font-size:.68rem;font-weight:600;padding:4px 8px;border-radius:6px;cursor:pointer;transition:all .14s;font-family:inherit;white-space:nowrap}
@media(max-width:400px){.srt-btn{padding:4px 6px;font-size:.64rem}}
.srt-btn:hover{background:var(--stripe)}
.srt-btn.active{background:var(--sage);color:#fff;border-color:var(--sage)}
.fav-btn{background:#FFF6E5;border-color:#EFD9A0;color:#9C7A1E}
.fav-btn.active{background:var(--gold);color:#1A1A1A;border-color:var(--gold)}
.ccount{margin-left:auto;font-size:.68rem;color:var(--muted);font-style:italic;white-space:nowrap}

/* TYPE FILTER */
.tf-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.tf-lbl{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.tf-btn{background:#fff;border:1px solid var(--border);color:var(--ink);font-size:.68rem;font-weight:600;padding:4px 8px;border-radius:6px;cursor:pointer;transition:all .14s;font-family:inherit;display:flex;align-items:center;gap:3px}
.tf-btn:hover{background:var(--stripe)}
.tf-btn.active{background:var(--sage);color:#fff;border-color:var(--sage)}
.tf-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* LOADING / EMPTY */
.loading-wrap{text-align:center;padding:60px 20px}
.spinner{display:inline-block;width:40px;height:40px;border:4px solid var(--border);border-top-color:var(--sage);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-wrap h2{font-family:Georgia,serif;color:var(--sage);font-size:1.2rem;margin-bottom:6px}
.loading-wrap p{color:var(--muted);font-size:.85rem;max-width:380px;margin:0 auto;line-height:1.6}
.empty-wrap{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-wrap h2{font-family:Georgia,serif;font-size:1.2rem;color:var(--sage);margin-bottom:8px}
.retry-btn{margin-top:16px;background:var(--sage);color:#fff;border:none;border-radius:7px;padding:9px 22px;font-size:.85rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.retry-btn:hover{background:var(--sage)}

/* FAV BANNER */
.fav-banner{background:linear-gradient(135deg,var(--sage),var(--pine));border-radius:10px;padding:14px 16px 12px;margin:14px 14px 0;max-width:calc(1440px - 28px);margin-left:auto;margin-right:auto}
.fav-banner h2{font-family:Georgia,serif;font-size:.95rem;color:#fff;margin-bottom:8px}
.share-all-btn{background:var(--gold);border:none;border-radius:7px;padding:10px;font-size:.85rem;font-weight:800;color:#1A1A1A;cursor:pointer;font-family:inherit;width:100%;display:block;transition:background .15s}
.share-all-btn:hover{background:#C8923A}
.fav-empty{color:rgba(255,255,255,.7);font-size:.82rem;text-align:center;padding:6px}

/* GRID */
#grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:18px 14px 100px;max-width:1440px;margin:0 auto}

/* ── CARD — v14 final ────────────────────────────────────────────
   Serif name (matches hero/modal Georgia) over a Tee Sheet Red
   hairline (the hero underline motif), meta line replaces the old
   avatar + type badge + stats row, price docks as a pill beside the
   weather pill on the address row, Tee Sheet is the primary CTA.
   .c-addr-row carries margin-top:auto so the bottom half of every
   card pins down — CTAs stay level across a grid row even when
   names wrap to two lines. ── */
.card{background:#fefcfa;border-radius:16px;border:1px solid var(--card-border);box-shadow:0 2px 8px var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;position:relative}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.12)}

/* CARD HEADER — name + meta left, icons + verified right */
.ch{padding:16px 18px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ch-left{flex:1;min-width:0}
.c-name{font-family:Georgia,'Times New Roman',serif;font-size:1.2rem;font-weight:700;color:var(--pine);line-height:1.22;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-meta{font-size:.78rem;color:var(--dark-text);opacity:.75;margin-top:0;line-height:1.45}
/* Tee Sheet Red hairline — same motif as the hero headline underline */
.c-meta::before{content:"";display:block;width:44px;height:3px;background:var(--tee-red);border-radius:99px;margin:8px 0 7px;opacity:1}
.c-meta-dist{font-weight:700;color:var(--pine)}
.ch-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.ch-right-icons{display:flex;align-items:center;gap:6px}
.icon-btn{background:var(--offwhite);border:1.5px solid var(--card-border);width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:var(--sage);padding:0}
.icon-btn:hover{border-color:var(--pine);color:var(--pine)}
.star-btn.on{background:var(--sage);border-color:var(--sage);color:var(--offwhite)}
.verified-badge{display:flex;align-items:center;gap:3px;font-size:.72rem;font-weight:700;color:var(--success);white-space:nowrap}

/* DESCRIPTION EXPAND (dormant, kept for future) */
.c-desc{max-height:0;overflow:hidden;opacity:0;background:var(--sand);font-size:.8rem;color:var(--dark-text);line-height:1.55;transition:max-height .25s ease,opacity .2s ease,padding .25s ease}
.c-desc.open{max-height:300px;opacity:1;padding:12px 16px}

/* CARD BODY */
.cb{padding:10px 18px 14px;flex:1;display:flex;flex-direction:column;gap:10px}

/* ADDRESS ROW — dotted divider, address left, weather + price pills right.
   margin-top:auto = bottom-half pin for level CTAs across a grid row. */
.c-addr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px dotted var(--card-border);padding-top:10px;margin-top:auto}
.c-addr{font-size:.85rem;color:var(--dark-text);text-decoration:none;font-weight:500;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.c-addr:hover{color:var(--pine)}
.c-pills{display:flex;align-items:center;gap:6px;flex-shrink:0}
.c-price-pill{background:var(--sand);border-radius:7px;padding:5px 11px;font-size:.82rem;font-weight:700;color:var(--dark-text);white-space:nowrap}
.c-wx-pill{background:var(--sand);border-radius:7px;padding:5px 10px;font-size:.8rem;font-weight:700;color:var(--dark-text);white-space:nowrap;text-align:center}

/* PRIMARY CTA — Tee Sheet, full width */
.teesheet-btn{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--sage);border:none;border-radius:8px;width:100%;box-sizing:border-box;padding:10px 10px;font-size:.88rem;font-weight:800;color:var(--offwhite);cursor:pointer;font-family:inherit;transition:background .15s;letter-spacing:.01em;text-align:center;white-space:normal;line-height:1.3}
.teesheet-btn:hover{background:var(--pine)}
.teesheet-btn.on{background:var(--success)}

/* SECONDARY ACTIONS — Call + Website */
.c-actions{display:flex;gap:10px}
.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:var(--offwhite);border:1px solid var(--card-border);border-radius:8px;padding:8px 8px;font-size:.78rem;font-weight:700;color:var(--dark-text);cursor:pointer;text-decoration:none;font-family:inherit;transition:all .15s;box-sizing:border-box;width:100%}
.action-btn:hover{background:#EAE6D5}

/* Desktop inline weather in search bar */
.sb-wx-desktop{display:none}
@media(min-width:581px){
  .sb-wx-desktop{display:flex;align-items:center;gap:6px;margin-left:4px;min-width:0}
  .sb-wx-divider{color:var(--border);font-size:1.2rem;margin:0 6px}
  .sb-wx-label{font-size:.8rem;font-weight:400;color:var(--muted);white-space:nowrap;font-style:italic}
  .day-chips-desktop{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
  .day-chips-desktop::-webkit-scrollbar{display:none}
  .day-chips-desktop .day-chip{min-width:36px;padding:5px 8px}
}
/* Featured course card — gold is the one legacy color, pending decision */
.card-featured{border:2px solid var(--gold);box-shadow:0 4px 18px rgba(217,164,65,.28)}
.featured-badge{position:absolute;top:10px;left:10px;background:var(--gold);color:#3A2A06;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:5px;pointer-events:none}
.card-featured .ch{padding-top:38px}
.featured-disclosure{font-size:.68rem;color:var(--sage);font-style:italic;padding:6px 0 2px;text-align:center}

/* ── SHARE MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--offwhite);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.22);width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:18px 20px 18px;position:relative;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:14px;left:16px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--sage);line-height:1;padding:2px}
.modal-close:hover{color:var(--pine)}
.modal h2{font-family:Georgia,serif;font-size:1.05rem;font-weight:700;color:var(--pine);text-align:center;margin-bottom:4px}
.modal-sub{font-size:.8rem;color:var(--sage);text-align:center;margin-bottom:10px}
.modal-field{margin-bottom:8px}
.modal-field label{display:block;font-size:.78rem;font-weight:700;color:var(--dark-text);margin-bottom:3px}
.modal-field label .opt{font-weight:400;color:var(--sage);font-size:.72rem}
.modal-section-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sage);margin:12px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--card-border)}
.modal-section-label:first-of-type{margin-top:0}
.modal-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.modal-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8px}
.field-wrap{display:flex;align-items:center;gap:8px;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:6px 12px}
.field-wrap:focus-within{border-color:var(--pine)}
.field-icon{font-size:1rem;flex-shrink:0}
.field-input{background:none;border:none;font-size:.9rem;font-family:inherit;color:var(--dark-text);width:100%;outline:none}
.modal-field textarea{width:100%;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:10px 12px;font-size:.92rem;font-family:inherit;color:var(--dark-text);resize:none;outline:none;min-height:90px;line-height:1.5}
.modal-field textarea:focus{border-color:var(--pine)}
.char-count{text-align:right;font-size:.68rem;color:var(--sage);margin-top:3px}
.modal-actions{display:flex;gap:10px;margin-top:12px}
.modal-cancel{flex:1;background:var(--offwhite);border:2px solid var(--sage);border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:var(--sage);cursor:pointer;font-family:inherit;transition:all .15s}
.modal-cancel:hover{background:var(--sand)}
.modal-share{flex:1;background:var(--sage);border:none;border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s}
.modal-share:hover{background:var(--sage)}
.modal-success{display:none;flex-direction:column;align-items:center;text-align:center;padding:18px 4px 6px}
.modal-success.show{display:flex}
.modal-success-icon{width:52px;height:52px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.modal-success-icon svg{width:26px;height:26px}
.modal-success h3{font-family:Georgia,serif;font-size:1.1rem;font-weight:700;color:var(--pine);margin-bottom:6px}
.modal-success p{font-size:.85rem;color:var(--dark-text);line-height:1.5;margin-bottom:18px}
.modal-success-close{width:100%;background:var(--sage);border:none;border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;font-family:inherit;transition:background .15s}
.modal-success-close:hover{background:var(--pine)}

/* TOAST */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--sage);color:#fff;padding:10px 20px;border-radius:8px;font-size:.83rem;z-index:999;box-shadow:0 2px 12px rgba(0,0,0,.3);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}

/* FLOATING ACTION BAR — solid bottom toolbar, one-handed thumb reach.
   Anchored flush to the bottom edge with its own background so it never
   visually collides with card content scrolling underneath it. */
.floating-bar{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:300;background:#fff;border-top:1px solid var(--border);box-shadow:0 -3px 14px rgba(0,0,0,.12);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .25s ease}
.floating-bar.shown{transform:translateY(0)}
.float-btn{flex:1;max-width:240px;background:var(--sage);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-size:.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;opacity:0;transform:scale(.92);transition:opacity .2s ease,transform .2s ease;pointer-events:none}
.float-btn.visible{opacity:1;transform:scale(1);pointer-events:auto}
.float-teesheet-btn{background:var(--sage);color:#fff}
/* Reserve space at the bottom of the page so the toolbar never covers the last card's buttons */
/* Bottom padding handled in the main #grid rule above so the floating toolbar never covers the last card */

/* TRIP MODAL LIST */
.teesheet-item{padding:12px 0;border-bottom:1px solid var(--border)}
.teesheet-item:last-child{border-bottom:none}
.teesheet-item-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.teesheet-item-day{font-size:.68rem;color:var(--muted);font-weight:700;text-transform:uppercase;flex-shrink:0}
.teesheet-day-input{width:42px;background:var(--stripe);border:1.5px solid var(--border);border-radius:6px;padding:5px;font-size:.85rem;text-align:center;font-family:inherit;flex-shrink:0}
.teesheet-item-name{font-size:.88rem;color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.teesheet-item-remove{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:4px 8px;flex-shrink:0}
.teesheet-item-remove:hover{color:var(--red)}
.teesheet-field-row{display:flex;gap:8px;margin-bottom:6px}
.teesheet-field-col{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.teesheet-field-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.teesheet-mini-input{flex:1;background:var(--stripe);border:1.5px solid var(--border);border-radius:6px;padding:7px 8px;font-size:.8rem;font-family:inherit;color:var(--ink);outline:none;min-width:0}
.teesheet-mini-input:focus{border-color:var(--sage)}
.teesheet-mini-notes{width:100%;background:var(--stripe);border:1.5px solid var(--border);border-radius:6px;padding:8px;font-size:.8rem;font-family:inherit;color:var(--ink);outline:none;resize:vertical;min-height:48px}
.teesheet-mini-notes:focus{border-color:var(--sage)}
.cal-add-btn{margin-top:7px;background:#fff;border:1.5px solid var(--border);border-radius:7px;padding:7px 10px;font-size:.76rem;font-weight:700;color:var(--sage);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;justify-content:center;width:100%;transition:all .14s}
.cal-add-btn:hover{background:var(--stripe);border-color:var(--sage)}

/* INSTALL BANNER */
#install-bar{display:none;background:var(--gold);color:#1A1A1A;padding:9px 16px;text-align:center;font-size:.78rem;font-weight:700;cursor:pointer;align-items:center;justify-content:center;gap:6px}

/* ── HAMBURGER MENU DRAWER ── */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:500;display:none;justify-content:flex-end}
.menu-overlay.open{display:flex}
.menu-drawer{background:#fff;width:min(300px,82vw);height:100%;box-shadow:-4px 0 24px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:drawerIn .22s ease}
@keyframes drawerIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.menu-header{display:flex;align-items:center;justify-content:flex-end;padding:18px 20px;border-bottom:1px solid var(--border)}
.menu-logo-img{display:none}
.menu-close-circle{display:none}
.menu-title{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;font-weight:800;font-size:1.05rem;color:var(--ink)}
.menu-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);padding:2px}
.menu-item{display:flex;align-items:center;gap:13px;padding:16px 20px;text-decoration:none;background:none;border:none;border-bottom:1px solid var(--border);font-size:.92rem;color:var(--ink);font-weight:800;cursor:pointer;text-align:left;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;width:100%;transition:background .15s}
.menu-item:hover{background:var(--stripe)}
.menu-item-icon{font-size:1.15rem;width:22px;text-align:center}
.menu-footer{margin-top:auto;padding:16px 20px;font-size:.68rem;color:var(--muted);border-top:1px solid var(--border)}
.menu-footer a{text-decoration:none}

/* MOBILE: dropdown starts at top; logo/hamburger layered above */
@media(max-width:580px){
.menu-overlay{align-items:flex-start;background:transparent;top:0!important;bottom:auto}
  .menu-drawer{
    width:100%;height:auto;max-height:75vh;overflow-y:auto;
    background:var(--offwhite);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    animation:dropIn .18s ease;
  }
  @keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .menu-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:none;
  }
  .menu-logo-img{display:block;height:32px;width:auto}
  .menu-close{display:none}
  .menu-close-circle{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    border:2px solid var(--pine);color:var(--pine);
    background:none;font-size:.95rem;font-weight:700;cursor:pointer;
    flex-shrink:0;
  }
  .menu-item{
    font-size:1.25rem;font-weight:800;
    padding:20px 20px;
    color:var(--dark-text);
    border-bottom:1px solid var(--card-border);
    background:var(--offwhite);
  }
  .menu-item:hover{background:var(--sand)}
  .menu-footer{
    font-size:.82rem;color:var(--sage);
    padding:18px 20px;border-top:none;
    background:var(--offwhite);
  }
}

/* ── TUTORIAL WALKTHROUGH ── */
.tutorial-modal{text-align:center}
.tutorial-icon{margin-bottom:12px;display:flex;justify-content:center}
.tutorial-logo{height:56px;width:auto;margin:0 auto 14px;display:block}
.tutorial-modal h2{font-family:Georgia,serif;font-size:1.1rem;color:var(--sage);margin-bottom:8px}
.tutorial-text{font-size:.86rem;color:var(--ink);line-height:1.6;padding:0 4px}
.tutorial-dots{display:flex;justify-content:center;gap:6px;margin:16px 0 2px}
.tdot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all .2s}
.tdot.active{background:var(--sage);width:20px;border-radius:4px}

/* ── CONTACT FORM EXTRAS ── */
.contact-toggle{display:flex;gap:8px}
.ctoggle-btn{flex:1;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:10px;font-size:.85rem;font-weight:700;color:var(--dark-text);cursor:pointer;font-family:inherit;transition:all .15s}
.ctoggle-btn.active{background:var(--sage);border-color:var(--sage);color:#fff}
.field-select{width:100%;background:var(--sand);border:1.5px solid var(--card-border);border-radius:8px;padding:8px 12px;font-size:.9rem;font-family:inherit;color:var(--dark-text);outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23122B22' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.field-select:focus{border-color:var(--sage)}
.fallback-textarea{width:100%;min-height:220px;background:var(--stripe);border:1.5px solid var(--border);border-radius:8px;padding:12px;font-size:.85rem;font-family:inherit;color:var(--ink);line-height:1.5;resize:vertical}

footer{background:var(--sage);color:rgba(255,255,255,.6);text-align:center;padding:14px 18px;font-size:.68rem;line-height:1.8;margin-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
footer strong{color:#fff}

@media(max-width:580px){
  header{padding:12px 0 9px}
  #grid{grid-template-columns:1fr;padding:10px 8px 24px;gap:10px}
  /* Search bar — transparent, 14px side padding matches More Search Options */
  .hd-content{padding:0;margin-top:-76px}
.search-bar{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  margin-bottom:0;
  flex-wrap:nowrap;
  gap:5px;
  justify-content:center;
}  /* Hide desktop-only elements */
  .sb-section-name,.sb-section-wx,.sb-name-desktop,.sb-wx-desktop,.sort-type-desktop,.sb-status-sort{display:none}
  /* Three controls fill proportionally — zip+pin, radius, Find Courses */
.sb-section-search{
  flex:0 1 100%;
  gap:6px;
  justify-content:center;
}
  .zip-wrap{
  flex:0 0 31%;
  min-width:0;
}
  .zip-in{width:100%;padding:7px 28px 7px 8px;font-size:.88rem}
  .rad-sel{
  flex:0 0 20%;
  min-width:0;
  padding:7px 4px;
  font-size:.82rem;
}
  .go-btn{
  flex:0 1 49%;
  min-width:0;
  padding:8px 6px;
  font-size:.82rem;
}
  .sb-status{display:none}
  /* More Search Options — reference alignment (14px each side) */
  .more-search-toggle{justify-content:center;padding:9px 14px;border-radius:8px;margin:6px auto 8px;width:100%}
  .more-search-status{display:none}
  /* Course name search — match More Search Options width */
  .name-bar{margin:0 0 8px;border-radius:8px}
  /* Sort pills — same 14px margins, evenly spaced, no auto margins */
  .sort-bar{padding:6px 14px}
  .hd-ctrl{flex:1;justify-content:space-evenly}
  .wx-toggle-btn{margin-left:0}
  /* Day chips — same 14px margins */
  .wx-panel.open{padding:8px 14px 10px}
  .day-chips{padding:0}
  .day-chip{flex:1;justify-content:center}
  /* More search panel internals */
  .filter-row-wrap{flex-direction:column;align-items:stretch;gap:0}
  .tf-row{justify-content:center;margin-top:7px;padding-top:7px;border-top:1px solid var(--border)}
}

@media(min-width:581px){
  .wx-toggle-btn{display:none}
  .wx-panel{display:none}
  /* Desktop search bar: zip/radius/find + name search + weather, all inline (original layout) */
  .search-bar{flex-wrap:wrap;gap:8px 0}
  .sb-section{display:flex;align-items:center;gap:8px}
  .sb-section-search{flex-shrink:0;gap:8px;padding-right:4px}
  .zip-wrap{flex-shrink:0}
  .go-btn{white-space:nowrap}
  .sb-status{display:none}
  .sb-section-name{flex:1;min-width:160px}
  .sb-section-wx{flex:0 1 auto;min-width:0}
  .sb-name-desktop,.sb-wx-desktop{display:flex;align-items:center;gap:6px}
  /* Course name field looks like a form field */
  .name-in-desktop{flex:1;min-width:0;border:1px solid var(--border);background:#fff;border-radius:6px;padding:6px 28px 6px 9px;font-size:.85rem;color:var(--ink);font-family:inherit;outline:none}
  .sb-section-name .name-in-wrap{flex:1}
  /* Type filter in sort bar desktop */
  .sort-type-desktop{display:flex;align-items:center;gap:6px;margin-left:auto}
}

/* Medium-desktop zone (901–1300px, e.g. laptops / half-screen windows) —
   the full row (search + course name + weather label + 5 date chips) is
   too wide to fit here and was breaking to a second line. Trim the
   lowest-priority element (the "Select weather by date." label text —
   the chips themselves are still the functional control) and tighten
   gaps/padding to reclaim enough width to keep everything on one line. */
@media(min-width:901px) and (max-width:1300px){
  .sb-wx-label{display:none}
  .sb-wx-divider{margin:0 4px}
  .sb-section-wx{gap:4px}
  .sb-section-name{min-width:120px}
  .day-chips-desktop{gap:3px}
  .day-chips-desktop .day-chip{min-width:32px;padding:5px 6px}
}



/* ════════════════════════════════════════════════════════════════
   CONTENT PAGES — privacy-terms.html + about.html  (v52 SEO pass)
   Scoped to body.content-page so the app (index.html) is untouched.
   Desktop keeps the existing text-page look. Mobile swaps the photo
   hero for a compact solid bar, restores the page title (which the
   app hides on mobile via .hero-text{display:none}), and makes
   long-form copy comfortable to read.
   ════════════════════════════════════════════════════════════════ */

/* All widths — text pages have no photo behind the headline */
.content-page .hero-headline{text-shadow:none}
.content-page .hero-sub{display:block;white-space:normal;text-shadow:none;color:var(--muted);font-weight:600;font-size:.9rem;margin-top:4px}

/* Long-form typography — content pages own these classes (page-h2 /
   page-p) so card redesigns can never break the legal/about copy again */
.page-h2{font-family:Georgia,'Times New Roman',serif;font-size:1.25rem;font-weight:700;color:var(--pine);line-height:1.3}
.page-p{font-size:.85rem;color:var(--dark-text);font-weight:500;line-height:1.55;margin-top:4px}

@media(max-width:580px){
  /* Compact solid header bar — no photo hero on text pages */
  .content-page header{border-bottom:1px solid var(--border);box-shadow:0 2px 10px var(--shadow)}
  .content-page .hd-logo-row{
    background-image:none;background-color:var(--cream);
    min-height:0;padding:10px 16px;align-items:center;
  }
  .content-page .header-logo{width:min(300px,46vw)}
  .content-page .hamburger-btn{color:var(--pine);filter:none;margin-top:0;padding:8px 0}
  .content-page #hamburger-icon svg circle{fill:none;stroke:currentColor}
  .content-page #hamburger-icon svg line{stroke:currentColor}

  /* Restore the page title on mobile */
  .content-page .hero-text{display:block}
  .content-page .hero-headline{font-size:1.9rem}

  /* Readable long-form copy: real margins, bigger type, looser leading */
  .content-page #grid{padding:14px 20px 48px}
  .content-page .page-p{font-size:.95rem;line-height:1.65}
  .content-page .page-h2{font-size:1.3rem}
}

/* FAQ accordion — about.html. Native <details>, no JS needed. */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--card-border);margin-top:4px}
.faq-item{border-bottom:1px solid var(--card-border)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 2px;font-weight:800;color:var(--pine);font-size:.98rem;line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex-shrink:0;font-size:1.35rem;font-weight:600;color:var(--sage);line-height:1;transition:transform .18s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--sage)}
.faq-a{padding:0 2px 16px}
.faq-a p{font-size:.92rem;line-height:1.6;color:var(--dark-text);font-weight:500}
.faq-a p+p{margin-top:8px}
@media(min-width:581px){
  .faq-item summary{font-size:1.02rem;padding:16px 2px}
  .faq-a p{font-size:.95rem}
}