/* ==========================================================================
   Hobart Downtown Alliance — Warm & Elevated theme
   Custom styles layered on top of Tailwind (Play CDN)
   ========================================================================== */

:root {
  --cream:      #F6F4F0;
  --cream-2:    #ECEAE3;
  --sand:       #DAD3C7;
  --terra:      #C26A49;
  --terra-dk:   #9F5235;
  --clay:       #D98F66;
  --green:      #3B4A37;
  --green-dk:   #2C3A2A;
  --gold:       #D0A24C;
  --ink:        #2B2620;
  --ink-soft:   #5C5349;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-optical-sizing: auto;
}

::selection { background: var(--terra); color: #fff; }

/* ----- Typographic helpers ------------------------------------------------ */
.eyebrow {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--terra);
}
.text-balance { text-wrap: balance; }

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--terra);
  color: #fff;
  box-shadow: 0 10px 28px -10px rgba(194,106,73,.7);
}
.btn-primary:hover { background: var(--terra-dk); transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(194,106,73,.8); }
.btn-ghost {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.btn-dark { background: var(--green); color: #fff; }
.btn-dark:hover { background: var(--green-dk); transform: translateY(-2px); }

/* ----- Header / Nav ------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background .4s ease, box-shadow .4s ease, padding .4s ease;
  padding: 1.4rem 0;
  /* scrim so white nav stays legible over bright hero imagery */
  background: linear-gradient(180deg, rgba(20,24,20,.55) 0%, rgba(20,24,20,.18) 60%, rgba(20,24,20,0) 100%);
}
.site-header.scrolled {
  padding: 0.85rem 0;
  background: rgba(246,244,240,.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 30px -18px rgba(43,38,32,.5);
}
.nav-link {
  position: relative;
  font-weight: 500;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  transition: color .25s ease;
}
.site-header.scrolled .nav-link { color: var(--ink); text-shadow: none; }
.site-header .nav-link.active { color: #fff; }
.site-header.scrolled .nav-link.active { color: var(--terra); }
.site-header .brand-mark { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.site-header.scrolled .brand-mark { text-shadow: none; }

/* Brand logo (lighthouse badge) — white over hero, green once header turns cream */
.brand-logo { height: 34px; width: auto; display: block; flex-shrink: 0; }
.site-header.scrolled .brand-logo { height: 30px; }
.brand-logo-green { display: none; }
.site-header.scrolled .brand-logo-white { display: none; }
.site-header.scrolled .brand-logo-green { display: block; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--terra);
  transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--terra); }

.brand-mark { color: #fff; transition: color .4s ease; }
.site-header.scrolled .brand-mark { color: var(--ink); }
.brand-mark .accent { color: var(--terra); }

/* Inner pages (no dark hero behind a fixed header) start with solid header */
.solid-header .site-header { background: rgba(246,244,240,.92); backdrop-filter: blur(12px); box-shadow: 0 6px 30px -18px rgba(43,38,32,.5); }
.solid-header .nav-link { color: var(--ink); }
.solid-header .brand-mark { color: var(--ink); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--green-dk);
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { color: var(--cream); font-family: 'Fraunces', serif; font-size: 2rem; }
.mobile-menu a:hover { color: var(--gold); }

/* ----- Parallax / hero ---------------------------------------------------- */
.parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 1025px) {
  .parallax-fixed { background-attachment: fixed; }
}
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(44,58,42,.55) 0%, rgba(43,38,32,.35) 40%, rgba(43,38,32,.78) 100%);
}
.page-hero {
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
}
.page-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,58,42,.45) 0%, rgba(43,38,32,.8) 100%);
}

/* Scroll-cue */
.scroll-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 16px;
  display: flex; justify-content: center;
}
.scroll-cue span {
  width: 4px; height: 8px;
  background: #fff;
  border-radius: 4px;
  margin-top: 7px;
  animation: scrollcue 1.6s infinite;
}
@keyframes scrollcue { 0%{opacity:0;transform:translateY(0)}30%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translateY(14px)} }

/* ----- Reveal-on-scroll --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }

/* ----- Sections / decoration --------------------------------------------- */
.section { padding: 7rem 0; }
@media (max-width:768px){ .section{ padding:4.5rem 0; } }

.divider-leaf {
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--terra), var(--gold));
}

.card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -36px rgba(43,38,32,.45);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  border: 1px solid rgba(218,211,199,.7);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 36px 70px -34px rgba(43,38,32,.55); }
.card-img { height: 220px; width: 100%; object-fit: cover; transition: transform .8s ease; }
.card:hover .card-img { transform: scale(1.07); }

/* Stat counters */
.stat-num { font-family:'Fraunces',serif; font-weight:600; line-height:1; }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display:inline-block; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Pills / filters */
.filter-pill {
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--sand);
  background: #fff;
  font-weight: 500;
  font-size: .9rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .25s ease;
}
.filter-pill:hover { border-color: var(--terra); color: var(--terra); }
.filter-pill.active { background: var(--terra); border-color: var(--terra); color: #fff; }

/* Forms */
.field {
  width: 100%;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--sand);
  background: #fff;
  font-size: .98rem;
  color: var(--ink);
  transition: border .2s ease, box-shadow .2s ease;
}
.field:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 4px rgba(194,106,73,.12); }
label.lbl { font-weight: 600; font-size: .85rem; color: var(--ink); margin-bottom: .4rem; display:block; }

/* Footer */
.footer-link { color: rgba(246,244,240,.75); transition: color .2s ease; }
.footer-link:hover { color: var(--gold); }

/* Timeline (about) */
.tl-item { position: relative; padding-left: 2.5rem; padding-bottom: 2.75rem; border-left: 2px solid var(--sand); }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-dot { position:absolute; left:-9px; top:2px; width:16px; height:16px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 5px var(--cream); }

/* Utility bg tokens */
.bg-cream{background:var(--cream)} .bg-cream-2{background:var(--cream-2)} .bg-green{background:var(--green)}
.bg-green-dk{background:var(--green-dk)} .bg-terra{background:var(--terra)} .bg-sand{background:var(--sand)}
.text-terra{color:var(--terra)} .text-green{color:var(--green)} .text-gold{color:var(--gold)}
.text-ink{color:var(--ink)} .text-ink-soft{color:var(--ink-soft)} .text-cream{color:var(--cream)}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; }
  .marquee-track, .scroll-cue span { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ----- Back to top -------------------------------------------------------- */
.to-top{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:40;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -10px rgba(43,38,32,.6);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background .2s ease;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--green-dk); transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){ .to-top{ transition:none; } }

/* ----- Directory category icons ----------------------------------------- */
#bizGrid .card > a { position: relative; }
#bizGrid .card > a::before{ content:""; display:block; width:46px; height:46px; border-radius:13px; margin-bottom:16px; background-color: rgba(194,106,73,.12); background-repeat:no-repeat; background-position:center; background-size:23px 23px; transition: background-color .3s ease; }
#bizGrid .card:hover > a::before{ background-color: rgba(194,106,73,.20); }
#bizGrid .card[data-category="dining"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M17%208h1a4%204%200%201%201%200%208h-1%27%2F%3E%3Cpath%20d%3D%27M3%208h14v9a4%204%200%200%201-4%204H7a4%204%200%200%201-4-4Z%27%2F%3E%3Cpath%20d%3D%27M6%201v3%27%2F%3E%3Cpath%20d%3D%27M10%201v3%27%2F%3E%3Cpath%20d%3D%27M14%201v3%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="shopping"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4Z%27%2F%3E%3Cpath%20d%3D%27M3%206h18%27%2F%3E%3Cpath%20d%3D%27M16%2010a4%204%200%200%201-8%200%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="services"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%277%27%20width%3D%2720%27%20height%3D%2714%27%20rx%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="automotive"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%2016H9m10%200h3v-3.15a1%201%200%200%200-.84-.99L16%2011l-2.7-3.6a1%201%200%200%200-.8-.4H5.24a2%202%200%200%200-1.8%201.1l-.8%201.63A6%206%200%200%200%202%2012.34V16h2%27%2F%3E%3Cpath%20d%3D%27M5%2016a2%202%200%201%200%204%200%27%2F%3E%3Cpath%20d%3D%27M15%2016a2%202%200%201%200%204%200%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="health"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.29%201.5%204.04%203%205.5l7%207Z%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="arts"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2021h18%27%2F%3E%3Cpath%20d%3D%27M5%2021V10%27%2F%3E%3Cpath%20d%3D%27M19%2021V10%27%2F%3E%3Cpath%20d%3D%27M3%2010%2012%204l9%206%27%2F%3E%3Cpath%20d%3D%27M9%2021v-7h6v7%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="realestate"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2010%2012%203l9%207%27%2F%3E%3Cpath%20d%3D%27M5%209v11a1%201%200%200%200%201%201h12a1%201%200%200%200%201-1V9%27%2F%3E%3Cpath%20d%3D%27M9%2021v-6h6v6%27%2F%3E%3C%2Fsvg%3E"); }
#bizGrid .card[data-category="community"] > a::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23C26A49%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3C%2Fsvg%3E"); }