/* ============================================================
   San Andres Noble House — Independent Island & Diving Guide
   Custom tropical travel-magazine theme. No JS-gated visibility.
   ============================================================ */

:root{
  --sea:#0e7c86;
  --sea-deep:#0b3d54;
  --sea-mid:#12707d;
  --sea-light:#8fded8;
  --sea-pale:#e6f6f4;
  --coral:#ff6f59;
  --coral-dark:#e5533d;
  --sun:#f4a259;
  --sand:#f8f4ea;
  --ink:#12303a;
  --muted:#5a727b;
  --white:#ffffff;
  --line:#e2e8e6;
  --shadow:0 10px 30px rgba(11,61,84,.12);
  --shadow-sm:0 4px 14px rgba(11,61,84,.10);
  --radius:16px;
  --radius-sm:10px;
  --maxw:1180px;
  --head:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  line-height:1.68;
  font-size:1.02rem;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--sea);text-decoration:none;}
a:hover{color:var(--coral-dark);}
h1,h2,h3,h4{font-family:var(--head);color:var(--sea-deep);line-height:1.15;font-weight:600;margin:0 0 .5em;}
h1{font-size:clamp(2.1rem,5vw,3.4rem);letter-spacing:-.5px;}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem);margin-top:1.6em;}
h3{font-size:1.25rem;margin-top:1.4em;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.2em;padding-left:1.3em;}
li{margin-bottom:.45em;}
strong{color:var(--sea-deep);}
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem);}

/* Safeguard: content is NEVER hidden waiting on JS. Any reveal animation
   is progressive enhancement only. */
[data-aos]{opacity:1 !important;transform:none !important;}

/* ---------- Header / Nav (CSS-only mobile menu) ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--head);font-weight:600;color:var(--sea-deep);font-size:1.18rem;letter-spacing:-.2px;}
.brand:hover{color:var(--sea-deep);}
.brand .mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(140deg,var(--sea),var(--sea-deep));
  color:#fff;font-size:1.05rem;flex:none;box-shadow:var(--shadow-sm);
}
.brand small{display:block;font-family:var(--body);font-weight:400;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.nav-toggle,.nav-toggle-label{display:none;}
.menu{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0;}
.menu>li{position:relative;}
.menu a{
  display:block;padding:.55rem .7rem;color:var(--ink);font-weight:600;font-size:.94rem;border-radius:8px;
}
.menu a:hover{background:var(--sea-pale);color:var(--sea-deep);}
.has-sub>a::after{content:"\25be";font-size:.7em;margin-left:.28em;color:var(--muted);}
.submenu{
  list-style:none;margin:0;padding:.4rem;position:absolute;top:100%;left:0;min-width:210px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;
}
.menu>li:hover .submenu,.menu>li:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
.submenu a{font-weight:500;font-size:.9rem;}

@media (max-width:960px){
  .nav-toggle-label{
    display:inline-flex;flex-direction:column;gap:5px;cursor:pointer;padding:.5rem;border-radius:9px;
  }
  .nav-toggle-label span{width:24px;height:2.5px;background:var(--sea-deep);border-radius:2px;transition:.2s;}
  .menu{
    position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;gap:.1rem;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    padding:.6rem clamp(1rem,4vw,2rem) 1rem;
    max-height:0;overflow:hidden;transition:max-height .3s ease;
  }
  .nav-toggle:checked ~ .menu{max-height:80vh;overflow:auto;}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 1rem;}
  .has-sub>a::after{display:none;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;padding:.8rem 1.5rem;border-radius:40px;font-weight:700;font-size:.95rem;
  background:var(--coral);color:#fff;border:none;cursor:pointer;transition:.2s;box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--coral-dark);color:#fff;transform:translateY(-2px);}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8);box-shadow:none;}
.btn.ghost:hover{background:rgba(255,255,255,.15);color:#fff;}
.btn.sea{background:var(--sea);}
.btn.sea:hover{background:var(--sea-deep);}

/* ---------- Hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,61,84,.30) 0%,rgba(11,61,84,.20) 40%,rgba(11,61,84,.72) 100%);}
.hero-inner{position:relative;z-index:2;padding:clamp(3.5rem,9vw,7rem) 0;max-width:760px;}
.hero.tall .hero-inner{padding:clamp(5rem,13vw,9rem) 0;}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.28);animation:riseIn .8s ease-out both;}
.hero .lede{font-size:clamp(1.05rem,2.2vw,1.35rem);color:#f3fbfa;max-width:640px;text-shadow:0 1px 12px rgba(0,0,0,.3);animation:riseIn .8s ease-out .1s both;}
.hero .kicker{display:inline-block;font-family:var(--body);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);padding:.4rem .9rem;border-radius:30px;margin-bottom:1.1rem;backdrop-filter:blur(4px);animation:riseIn .8s ease-out both;}
.hero-cta{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap;animation:riseIn .8s ease-out .2s both;}

@keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){*{animation:none !important;}}

/* ---------- Main content ---------- */
main{display:block;}
.section{padding:clamp(2.5rem,6vw,4.5rem) 0;}
.prose{max-width:820px;margin:0 auto;}
.prose img{border-radius:var(--radius);box-shadow:var(--shadow);margin:1.8rem 0;}
.prose h2{position:relative;padding-top:.2em;}
.prose h2::before{content:"";display:block;width:52px;height:4px;border-radius:3px;background:var(--sun);margin-bottom:.7rem;}
.prose a{border-bottom:1px solid rgba(14,124,134,.35);}
.prose a:hover{border-color:var(--coral-dark);}
.figure{margin:1.8rem 0;}
.figure img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;}
.figure figcaption{font-size:.86rem;color:var(--muted);margin-top:.5rem;text-align:center;font-style:italic;}

.band{background:var(--sand);}
.band-sea{background:linear-gradient(160deg,var(--sea-pale),#fff);}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.4rem;margin:2rem 0 0;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card img{aspect-ratio:3/2;object-fit:cover;width:100%;}
.card-body{padding:1.1rem 1.2rem 1.3rem;}
.card-body h3{margin:.1rem 0 .4rem;font-size:1.14rem;}
.card-body p{font-size:.92rem;color:var(--muted);margin:0 0 .8rem;}
.card-body a.more{font-weight:700;font-size:.9rem;}

/* ---------- Gallery grid ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:2rem;}
.gallery-grid figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:.4s;}
.gallery-grid figure:hover img{transform:scale(1.05);}

/* ---------- Facts strip ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem;margin-top:2rem;}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.2rem;text-align:center;box-shadow:var(--shadow-sm);}
.fact .n{font-family:var(--head);font-size:1.7rem;color:var(--sea);font-weight:600;}
.fact .l{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}

/* ---------- Callout / disclaimer ---------- */
.callout{background:var(--sea-pale);border-left:4px solid var(--sea);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.1rem 1.3rem;margin:1.8rem 0;font-size:.96rem;}
.callout.warm{background:#fff4ec;border-color:var(--sun);}

/* ---------- Footer ---------- */
.site-footer{background:var(--sea-deep);color:#cfe6ea;margin-top:2rem;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding:3rem 0 2rem;}
.site-footer h4{color:#fff;font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem;}
.site-footer a{color:#cfe6ea;font-size:.94rem;}
.site-footer a:hover{color:#fff;}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;}
.footer-brand .brand{color:#fff;}
.footer-brand .brand small{color:#8fb7bf;}
.footer-brand p{color:#a9cdd4;font-size:.92rem;margin-top:1rem;max-width:34ch;}
.footer-disclaimer{border-top:1px solid rgba(255,255,255,.12);padding:1.2rem 0 2rem;font-size:.82rem;color:#8fb7bf;}
.footer-disclaimer p{margin:.3rem 0;}

@media (max-width:760px){.footer-top{grid-template-columns:1fr;gap:1.6rem;}}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--muted);padding:1.1rem 0 0;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--sea);}

/* ---------- 404 ---------- */
.err{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--sea-pale),#fff);}
.err h1{font-size:clamp(3rem,10vw,6rem);margin-bottom:.2em;}