/* =====================================================================
   Lake Norman Area Guide — custom theme
   Palette: lake teal-blue + warm dock gold on deep navy.
   Type: Cormorant Garamond (display serif) + Source Sans 3 (body sans).
   Framework: Bulma handles grid/columns; this file owns brand + nav.
   NOTE: content is NEVER hidden waiting on JS. All entrance motion is
   pure-CSS and ends in the visible state; nav works without JavaScript.
   ===================================================================== */

:root {
  --lake: #1a6f8b;
  --lake-dark: #12495c;
  --lake-light: #2f93b0;
  --gold: #c9a24b;
  --gold-deep: #ac8536;
  --navy: #16283a;
  --bg: #ffffff;
  --bg-alt: #f4f7f8;
  --bg-mist: #eaf1f3;
  --ink: #1f2a30;
  --muted: #5b6b73;
  --line: #dce6e9;
  --radius: 12px;
  --shadow-sm: 0 2px 10px rgba(18, 73, 92, .08);
  --shadow-md: 0 12px 32px rgba(18, 73, 92, .14);
  --maxw: 1120px;
}

/* Safeguard: never let any reveal library trap content at opacity:0. */
[data-aos]{opacity:1 !important; transform:none !important;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.68;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--lake-dark);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--gold-deep);}

h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;color:var(--navy);line-height:1.12;font-weight:700;letter-spacing:.2px;}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);margin:.2em 0 .35em;}
h2{font-size:clamp(1.7rem,3vw,2.25rem);margin:1.6em 0 .5em;}
h3{font-size:1.4rem;margin:1.3em 0 .4em;color:var(--lake-dark);}
p{margin:0 0 1.1em;}
strong{color:var(--navy);font-weight:600;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

/* ---------- Top bar / nav (CSS-only, works without JS) ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 22px;max-width:var(--maxw);margin:0 auto;}
.brand{display:flex;align-items:center;gap:11px;font-family:"Cormorant Garamond",serif;font-weight:700;color:var(--navy);font-size:1.42rem;line-height:1.05;}
.brand .mark{width:38px;height:38px;flex:0 0 38px;border-radius:9px;background:linear-gradient(135deg,var(--lake),var(--lake-dark));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-sm);}
.brand small{display:block;font-family:"Source Sans 3",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lake);}

.nav-details{position:relative;}
.nav-details>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-weight:600;color:var(--navy);background:var(--bg-mist);
  padding:9px 15px;border-radius:8px;border:1px solid var(--line);
}
.nav-details>summary::-webkit-details-marker{display:none;}
.nav-menu{display:flex;flex-wrap:wrap;gap:2px;align-items:center;}
.nav-menu a{
  color:var(--navy);font-weight:600;font-size:.98rem;padding:8px 12px;border-radius:7px;white-space:nowrap;
}
.nav-menu a:hover{background:var(--bg-mist);color:var(--lake-dark);}
.nav-menu a.is-active{color:var(--lake-dark);box-shadow:inset 0 -2px 0 var(--gold);}

@media (max-width:900px){
  .nav-menu{
    position:absolute;right:22px;top:60px;flex-direction:column;align-items:stretch;
    background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);
    padding:8px;min-width:220px;gap:2px;
  }
  .nav-menu a{padding:11px 13px;}
}
@media (min-width:901px){
  .nav-details>summary{display:none;}
  .nav-menu{display:flex !important;} /* forced visible on desktop regardless of <details> state */
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(18,40,58,.82) 0%,rgba(18,40,58,.55) 45%,rgba(26,111,139,.35) 100%);}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:76px 22px 80px;color:#fff;}
.hero-inner.narrow{padding:54px 22px 58px;}
.hero .eyebrow{color:var(--gold);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;margin-bottom:14px;}
.hero h1{color:#fff;max-width:16ch;animation:riseIn .7s ease both;}
.hero p.lede{color:rgba(255,255,255,.92);font-size:1.22rem;max-width:56ch;margin-top:.3em;animation:riseIn .9s ease both;}
.hero-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;}
/* Transform-only entrance: content is ALWAYS opaque/visible (never gated on JS
   or on the animation running). Pure CSS, ends in the natural position. */
@keyframes riseIn{from{transform:translateY(16px);}to{transform:none;}}
@media (prefers-reduced-motion:reduce){.hero h1,.hero p.lede{animation:none;}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;border-radius:9px;padding:12px 22px;font-size:1rem;cursor:pointer;border:2px solid transparent;transition:transform .12s ease,box-shadow .12s ease,background .15s ease;}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:var(--shadow-sm);}
.btn-gold:hover{color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08);}
.btn-lake{background:var(--lake);color:#fff;}
.btn-lake:hover{background:var(--lake-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* ---------- Article body ---------- */
main{display:block;}
.article{max-width:820px;margin:0 auto;padding:52px 22px 8px;}
.article.has-aside{max-width:var(--maxw);}
.breadcrumbs{font-size:.86rem;color:var(--muted);margin-bottom:8px;}
.breadcrumbs a{color:var(--lake);}
.article ul,.article ol{margin:0 0 1.2em;padding-left:1.3em;}
.article li{margin:.35em 0;}
.article h2{border-bottom:2px solid var(--bg-mist);padding-bottom:.15em;}
.article figure{margin:1.6em 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.article figure.inline-right{float:right;max-width:340px;margin:.4em 0 1.2em 1.8em;}
.article figure img{width:100%;}
.article figcaption{font-size:.82rem;color:var(--muted);padding:8px 12px;background:var(--bg-alt);}
@media (max-width:640px){.article figure.inline-right{float:none;max-width:100%;margin:1.4em 0;}}

/* Callout / disclaimer */
.note{background:var(--bg-mist);border-left:4px solid var(--lake);border-radius:8px;padding:16px 20px;margin:1.6em 0;font-size:.98rem;color:var(--lake-dark);}

/* Feature grid (home) */
.section{padding:56px 0;}
.section.alt{background:var(--bg-alt);}
.section-head{text-align:center;max-width:60ch;margin:0 auto 34px;}
.section-head p{color:var(--muted);}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.card2{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm);transition:transform .14s ease,box-shadow .14s ease;border-top:3px solid var(--gold);}
.card2:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.card2 .ico{width:46px;height:46px;border-radius:10px;background:var(--bg-mist);color:var(--lake);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px;}
.card2 h3{margin:.1em 0 .3em;color:var(--navy);}
.card2 p{font-size:.98rem;color:var(--muted);margin-bottom:.6em;}
.card2 a{font-weight:600;}

/* Contact form (non-functional, SEO) */
.cform{display:grid;gap:14px;max-width:560px;margin:1.2em 0 2em;}
.cform input,.cform textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:1rem;background:#fff;}
.cform textarea{min-height:150px;resize:vertical;}
.cform button{justify-self:start;}

/* ---------- Footer ---------- */
footer.site{background:var(--navy);color:#c9d6dd;margin-top:64px;}
footer.site .fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:52px 22px 30px;max-width:var(--maxw);margin:0 auto;}
footer.site h4{color:#fff;font-size:1.05rem;letter-spacing:.04em;margin:0 0 .8em;font-family:"Source Sans 3",sans-serif;font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.12em;}
footer.site a{color:#bcd0d8;display:block;padding:4px 0;font-size:.96rem;}
footer.site a:hover{color:var(--gold);}
footer.site .brand-foot{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:#fff;margin-bottom:.4em;}
footer.site .disc{font-size:.9rem;color:#8ea6b0;max-width:42ch;}
footer.site .fbar{border-top:1px solid rgba(255,255,255,.12);padding:18px 22px;max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.85rem;color:#8ea6b0;}
@media (max-width:820px){footer.site .fcols{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){footer.site .fcols{grid-template-columns:1fr;}}

/* 404 */
.err{max-width:640px;margin:0 auto;padding:90px 22px;text-align:center;}
.err .big{font-family:"Cormorant Garamond",serif;font-size:6rem;color:var(--lake);line-height:1;margin-bottom:.1em;}