/* Best Beaches Hawaii — shared layer loaded after each page's own styles.
   Header/footer, safety & planning components, accessibility and phone fixes. */

/* ---------- accessibility ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:#06303d;color:#fff;padding:10px 16px;font-size:.9rem;border-radius:0 0 8px 0}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ff6b4a;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .fade{opacity:1!important;transform:none!important}
}

/* ---------- radius cap & small text ---------- */
.pill,.beach-head .tag{border-radius:6px!important}
.crumb,.section-tag,.beach-head .tag,.beach .where,.eyebrow,.hero-stats small,.spec b,.toc h4,.next-nav small,.logo span,footer h4{font-size:12px!important}

/* ---------- header ---------- */
.nav-links{gap:22px}
.nav-links a{font-size:.9rem;padding:4px 0;border-bottom:2px solid transparent}
.nav-links a.active,.nav-links a[aria-current]{color:#c4421f;border-bottom-color:#ff6b4a}
.hamburger{width:44px;height:44px;align-items:center;justify-content:center}
@media (max-width:1120px){
  .nav-links{position:fixed;top:61px;right:0;width:min(82%,340px);height:calc(100vh - 61px);background:#fbf7ef;flex-direction:column;align-items:flex-start;padding:28px;gap:6px;transform:none!important;box-shadow:-20px 0 60px rgba(6,48,61,.18);border-left:1px solid #e6d4b8;overflow-y:auto;display:none!important}
  .nav-links.open{display:flex!important}
  .nav-links a{font-size:1.05rem;padding:10px 0;width:100%;border-bottom:1px solid #efe3cc}
  .hamburger{display:flex}
}

/* ---------- hero decoration (sun & swell lines; desktop only) ---------- */
.hero{isolation:isolate}
.hero::before{content:'';position:absolute;right:-40px;top:20px;width:520px;height:360px;z-index:1;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 360' fill='none'%3E%3Ccircle cx='330' cy='120' r='62' fill='%23ffb347' fill-opacity='.85'/%3E%3Ccircle cx='330' cy='120' r='100' stroke='%23ffb347' stroke-opacity='.25' stroke-width='2'/%3E%3Cg stroke='%237fd8d0' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 240c40-22 80-22 120 0s80 22 120 0 80-22 120 0 80 22 120 0' stroke-opacity='.7'/%3E%3Cpath d='M0 280c40-22 80-22 120 0s80 22 120 0 80-22 120 0 80 22 120 0 80-22 120 0' stroke-opacity='.45'/%3E%3Cpath d='M40 320c40-22 80-22 120 0s80 22 120 0 80-22 120 0 80 22 120 0' stroke-opacity='.25'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain}
@media (max-width:900px){.hero::before{display:none}}
.hero .byline{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.06em;color:rgba(244,234,215,.75);margin-top:22px}
.hero .byline a{color:#7fd8d0}
.hero .eyebrow{margin-bottom:18px}

/* ---------- icons ---------- */
.ic .ic-svg,.tip .ic svg,.value .ic svg{color:#0e7c86}
.band .ic .ic-svg,.band .tip .ic svg{color:#7fd8d0}
.ic{display:block;margin-bottom:12px;line-height:0}

/* ---------- guide cards (home + related) ---------- */
.guides{padding-top:24px}
.gg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
@media (max-width:900px){.gg{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gg{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #e6d4b8;border-radius:12px;padding:24px;color:#0a1f2e;box-shadow:0 12px 30px -22px rgba(6,48,61,.35);transition:transform .25s,box-shadow .25s}
.gcard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(6,48,61,.45);color:#0a1f2e}
.gcard .gic{width:48px;height:48px;border-radius:10px;background:#e5f4f1;color:#0e7c86;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.gcard b{font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;color:#06303d}
.gcard span{font-size:.95rem;color:#3a5660;line-height:1.55}
.gcard em{font-style:normal;font-weight:600;color:#0e7c86;margin-top:auto;padding-top:8px;font-size:.92rem}

/* ---------- hazard / coverage / pick cards ---------- */
.hz-grid,.cov-grid,.pick-grid,.res-grid,.src-cards{display:grid;gap:20px;margin-top:34px}
.hz-grid{grid-template-columns:repeat(3,1fr)}
.cov-grid{grid-template-columns:repeat(2,1fr)}
.pick-grid,.res-grid{grid-template-columns:repeat(3,1fr)}
.src-cards{grid-template-columns:repeat(2,1fr)}
@media (max-width:960px){.hz-grid,.pick-grid,.res-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hz-grid,.cov-grid,.pick-grid,.res-grid,.src-cards{grid-template-columns:1fr}}
.hz,.cov,.pick,.res,.src-card{background:#fff;border:1px solid #e6d4b8;border-radius:12px;padding:26px;box-shadow:0 12px 30px -24px rgba(6,48,61,.35)}
.hz h3,.cov h3,.pick h3,.res h3,.src-card h3{font-size:1.3rem;color:#06303d;margin-bottom:8px;font-weight:600}
.hz p,.cov p,.pick p,.res p,.src-card p{font-size:.98rem;color:#2b4a55;margin-bottom:0}
.cov p+p,.pick p+p,.res p+p{margin-top:10px}
.cov-who,.pick-meta{font-family:'Spline Sans Mono',monospace;font-size:12px!important;letter-spacing:.06em;color:#0e7c86!important;text-transform:uppercase}
.pick h3 a{color:#06303d;border-bottom:2px solid #7fd8d0}
.pick h3 a:hover{color:#c4421f}
.note{font-size:.9rem;color:#5a6f74;margin-top:18px;max-width:72ch}

/* ---------- seasons ---------- */
.season-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
@media (max-width:700px){.season-grid{grid-template-columns:1fr}}
.season{border-radius:12px;padding:28px;color:#f4ead7}
.season.winter{background:linear-gradient(150deg,#0a1f2e,#06303d 60%,#0e7c86)}
.season.summer{background:linear-gradient(150deg,#7a3e12,#c4421f 55%,#ffb347)}
.season h3{color:#fff;font-size:1.5rem;margin-bottom:10px}
.season h3 small{display:block;font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-top:4px}
.season ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.season li{font-size:1rem;color:rgba(255,255,255,.92)}
.season .ic .ic-svg{color:#fff}

/* ---------- lists ---------- */
.steps{counter-reset:s;list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.steps li{counter-increment:s;position:relative;padding:18px 20px 18px 64px;background:#fff;border:1px solid #e6d4b8;border-radius:12px;color:#243f49}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:8px;background:#06303d;color:#ffb347;font-family:'Fraunces',serif;font-size:1.1rem;display:flex;align-items:center;justify-content:center}
.checks{list-style:none;margin:16px 0 0;display:flex;flex-direction:column;gap:12px}
.checks li{position:relative;padding-left:32px;color:#243f49}
.checks li::before{content:'';position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:5px;background:#d8f0ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c6b62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:10px}
@media (max-width:700px){.two-col{grid-template-columns:1fr}}

/* ---------- dark band with two columns ---------- */
.wrap-band{margin:24px 0}
.band-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:26px}
@media (max-width:700px){.band-cols{grid-template-columns:1fr}}
.band-cols h3{color:#ffb347;font-size:1.3rem;margin-bottom:12px}
.band-cols ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.band-cols li{color:rgba(244,234,215,.9);padding-left:20px;position:relative}
.band-cols li::before{content:'';position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:2px;background:#7fd8d0}
.band{background:linear-gradient(150deg,#0a1f2e,#06303d);color:#f4ead7;border-radius:16px;padding:46px 40px}
.band h2{color:#fff}

/* ---------- tables in new pages ---------- */
.table-scroll{overflow-x:auto;margin-top:28px;border-radius:12px;box-shadow:0 14px 36px -20px rgba(6,48,61,.18);-webkit-overflow-scrolling:touch}
.table-scroll table{width:100%;border-collapse:collapse;background:#fff;min-width:600px}
.table-scroll th{background:#06303d;color:#f4ead7;font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:14px 16px;font-weight:500}
.table-scroll td{padding:13px 16px;border-top:1px solid #efe3cc;font-size:.95rem;color:#243f49;vertical-align:top}
.table-scroll tr:nth-child(even) td{background:#fdfaf3}

/* ---------- sources ---------- */
section.sources ol{margin:18px 0 0 20px;display:flex;flex-direction:column;gap:8px}
section.sources li{font-size:.95rem;color:#34525c}
section.sources a{word-break:break-word}

/* ---------- document pages ---------- */
.page-head .updated{font-size:.95rem!important;letter-spacing:0!important;line-height:1.6;font-family:'Spline Sans',sans-serif!important;max-width:60ch}
section.doc,.wrap .doc{padding:48px 0 24px}
.doc h2{font-family:'Fraunces',serif}

/* ---------- footer ---------- */
.foot-grid.f4{grid-template-columns:1.6fr 1fr 1fr 1fr}
@media (max-width:900px){.foot-grid.f4{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid.f4{grid-template-columns:1fr}}
.foot-safe{font-size:.88rem;color:#ffb347;border-left:2px solid #ffb347;padding-left:12px;max-width:36ch}
footer .foot-bottom a{display:inline;margin:0;color:#7fd8d0;text-decoration:underline;text-underline-offset:2px}

/* ---------- phone layout (keep after base rules) ---------- */
@media (max-width:600px){
  .wrap{padding:0 16px}
  .hero{padding-left:16px;padding-right:16px}
  .band{padding:32px 22px}
  .hz,.cov,.pick,.res,.src-card,.gcard{padding:22px}
  .steps li{padding:16px 16px 16px 58px}
  .nav{padding:14px 16px}
}