/* =====================================================================
   PrimeHarbor — layout.css
   Containers, sections, header + mega menu, mobile menu, search, footer.
   ===================================================================== */

/* ---------- containers & sections ---------- */
.wrap { width: min(100% - 2*var(--gutter), var(--maxw)); margin-inline: auto; }
.wrap--wide { width: min(100% - 2*var(--gutter), var(--wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2*var(--gutter), 820px); margin-inline: auto; }
.section { padding-block: clamp(64px, 8vw, 130px); }
.section--sm { padding-block: clamp(46px, 5vw, 84px); }
.section--flush-top { padding-top: 0; }
.bg-light { background: var(--light); }
.bg-sand { background: var(--sand); }
.bg-navy { background: var(--g-navy); }
.bg-ocean { background: var(--g-panel); }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ---------- wave dividers ---------- */
.wave { display:block; width:100%; height:auto; line-height:0; }
.wave--flip { transform: scaleY(-1); }

/* =====================================================================
   HEADER  (sticky, transparent over hero, mega menu)
   ===================================================================== */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 120; transition: background var(--t), box-shadow var(--t); }
.topbar.is-solid { background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--line), 0 18px 44px -32px rgba(10,37,64,.6); }
/* transparent variant when over a dark hero */
.topbar.is-over-hero:not(.is-solid) { color: #fff; }
.topbar.is-over-hero:not(.is-solid) .topbar__logo { color:#fff; }
.topbar.is-over-hero:not(.is-solid) .meganav > a { color: rgba(255,255,255,.92); }
.topbar.is-over-hero:not(.is-solid) .icon-btn { background: rgba(255,255,255,.14); color:#fff; }
.topbar__bar { display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding-block: 16px; }
.topbar__logo { display:inline-flex; align-items:center; gap:.55em; font-family: var(--ff-display); font-size:1.4rem; font-weight:800; color: var(--navy); letter-spacing:-.03em; }
.topbar__logo .mk { width:40px; height:40px; flex:none; }
.topbar__logo b { color: var(--ocean); }
.topbar.is-over-hero:not(.is-solid) .topbar__logo b { color: var(--cyan-soft); }

.meganav { display:flex; align-items:center; gap: clamp(.4rem,1.1vw,1.1rem); }
.meganav > a, .meganav > .has-mega > button { position:relative; font-size:.93rem; font-weight:500; color: var(--ink); padding:.5em .2em; display:inline-flex; align-items:center; gap:.3em; }
.meganav a::after, .meganav .has-mega > button::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: var(--cyan); border-radius:2px; transition: right var(--t-fast); }
.meganav a:hover::after, .meganav .has-mega:hover > button::after, .meganav a[aria-current="page"]::after { right:0; }
.meganav .chev { width:14px; transition: transform var(--t-fast); }
.has-mega { position: static; }
.has-mega:hover .chev { transform: rotate(180deg); }

/* mega panel */
.mega { position:absolute; left:0; right:0; top:100%; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border-top:1px solid var(--line); box-shadow: var(--sh-2); opacity:0; visibility:hidden; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity:1; visibility:visible; transform:none; }
.mega__inner { display:grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap:2rem; padding-block: 2.2rem; }
.mega__col h5 { font-family: var(--ff-display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ocean); margin-bottom:.8rem; }
.mega__col a { display:block; padding:.34rem 0; color: var(--ink); font-size:.94rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.mega__col a:hover { color: var(--ocean); padding-left:5px; }
.mega__col a::after { display:none; }
.mega__feature { background: var(--g-panel); border-radius: var(--r-md); padding:1.4rem; color:#fff; display:flex; flex-direction:column; justify-content:space-between; }
.mega__feature h4 { color:#fff; }
.mega__feature p { color: rgba(255,255,255,.85); font-size:.88rem; }

.topbar__tools { display:flex; align-items:center; gap:.55rem; }
.icon-btn { width:46px; height:46px; border-radius:var(--r-pill); display:grid; place-items:center; background: var(--light); color: var(--navy); transition: background var(--t-fast), transform var(--t-fast); }
.icon-btn:hover { background: var(--ocean); color:#fff; transform: translateY(-1px); }
.icon-btn svg { width:21px; }
.burger { display:none; }
@media (max-width: 1140px){ .meganav, .topbar__tools .btn { display:none; } .burger { display:grid; } }

/* ---------- mobile menu ---------- */
.mmenu { position:fixed; inset:0; z-index:200; visibility:hidden; }
.mmenu__scrim { position:absolute; inset:0; background: rgba(7,26,47,.55); opacity:0; transition: opacity var(--t); }
.mmenu__panel { position:absolute; top:0; right:0; height:100%; width:min(90vw,420px); background: var(--g-navy); color:#fff; padding:26px; display:flex; flex-direction:column; gap:1rem; transform: translateX(100%); transition: transform var(--t); overflow-y:auto; }
.mmenu.is-open { visibility:visible; }
.mmenu.is-open .mmenu__scrim { opacity:1; }
.mmenu.is-open .mmenu__panel { transform:none; }
.mmenu__top { display:flex; align-items:center; justify-content:space-between; }
.mmenu__top .topbar__logo { color:#fff; }
.mmenu nav { display:flex; flex-direction:column; margin-top:.4rem; }
.mmenu nav a { display:flex; justify-content:space-between; align-items:center; font-family: var(--ff-display); font-size:1.28rem; font-weight:600; color:#fff; padding:.6rem 0; border-bottom:1px solid var(--line-light); }
.mmenu nav a small { font-family: var(--ff-body); font-size:.7rem; color: var(--cyan-soft); letter-spacing:.1em; }
.mmenu__foot { margin-top:auto; padding-top:1rem; }

/* ---------- search overlay ---------- */
.search { position:fixed; inset:0; z-index:210; display:flex; justify-content:center; align-items:flex-start; padding-top:13vh; visibility:hidden; }
.search__scrim { position:absolute; inset:0; background: rgba(7,26,47,.62); backdrop-filter: blur(5px); opacity:0; transition: opacity var(--t); }
.search__box { position:relative; width:min(92vw,660px); background:#fff; border-radius: var(--r-lg); padding:28px; box-shadow: var(--sh-2); transform: translateY(-18px) scale(.98); opacity:0; transition: transform var(--t), opacity var(--t); }
.search.is-open { visibility:visible; }
.search.is-open .search__scrim { opacity:1; }
.search.is-open .search__box { transform:none; opacity:1; }
.search__field { display:flex; align-items:center; gap:.8rem; border-bottom:2px solid var(--ocean); padding-bottom:.7rem; }
.search__field svg { width:24px; color: var(--ocean); flex:none; }
.search__field input { flex:1; border:none; background:none; font-family: var(--ff-display); font-size:1.32rem; color: var(--ink); }
.search__field input:focus { outline:none; box-shadow:none; }
.search__hint { font-size:.8rem; color: var(--muted); margin-top:.8rem; }
.search__sugg { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.search__sugg button { font-size:.82rem; padding:.4em .9em; border-radius: var(--r-pill); background: var(--light); color: var(--navy); }
.search__sugg button:hover { background: var(--ocean); color:#fff; }
.search__results { margin-top:1.2rem; display:grid; gap:.25rem; max-height:44vh; overflow:auto; }
.search__results a { display:flex; justify-content:space-between; padding:.7rem .8rem; border-radius: var(--r-sm); transition: background var(--t-fast); }
.search__results a:hover, .search__results a.is-active { background: var(--light); }
.search__results .tag { color: var(--ocean); font-size:.8rem; }

/* =====================================================================
   FOOTER  (large editorial — distinct from header)
   ===================================================================== */
.footer { position:relative; background: var(--g-navy); color: rgba(255,255,255,.82); margin-top: clamp(60px,8vw,120px); overflow:hidden; }
.footer__glow { position:absolute; top:-120px; right:-80px; width:380px; height:380px; border-radius:50%; background: radial-gradient(circle, rgba(34,211,238,.34), transparent 68%); pointer-events:none; }
.footer__inner { position:relative; padding-block: clamp(64px,8vw,100px) 0; }
.footer__cta { display:grid; grid-template-columns: 1.3fr 1fr; gap:2.4rem; align-items:end; padding-bottom:3rem; border-bottom:1px solid var(--line-light); }
.footer h2 { color:#fff; max-width:18ch; }
.footer__news label { font-family: var(--ff-display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color: var(--cyan-soft); }
.footer__news .row { display:flex; gap:.6rem; margin-top:.8rem; }
.footer__news input { flex:1; padding:.95em 1.2em; border-radius: var(--r-pill); border:1px solid var(--line-light); background: rgba(255,255,255,.08); color:#fff; }
.footer__news input::placeholder { color: rgba(255,255,255,.55); }
.footer__grid { display:grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap:2rem; padding-block:3rem; }
.footer__about p { color: rgba(255,255,255,.64); max-width:34ch; margin-top:1rem; }
.footer__col h4 { color:#fff; font-family: var(--ff-display); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; }
.footer__col a { display:block; padding:.3rem 0; color: rgba(255,255,255,.72); font-size:.93rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.footer__col a:hover { color: var(--cyan-soft); padding-left:5px; }
.footer__socials { display:flex; gap:.55rem; margin-top:1.2rem; }
.footer__socials a { width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center; background: rgba(255,255,255,.1); transition: background var(--t-fast); }
.footer__socials a:hover { background: var(--ocean); }
.footer__socials svg { width:18px; }
.footer__disclaimer { font-size:.82rem; color: rgba(255,255,255,.5); max-width:74ch; padding-bottom:2rem; }
.footer__base { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-block:24px; border-top:1px solid var(--line-light); font-size:.84rem; color: rgba(255,255,255,.58); }
.footer__base nav { display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:900px){ .footer__cta { grid-template-columns:1fr; } .footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid { grid-template-columns:1fr; } }

/* ---------- back to top ---------- */
.to-top { position:fixed; right:22px; bottom:22px; z-index:90; width:52px; height:52px; border-radius:var(--r-pill); background: var(--g-panel); color:#fff; display:grid; place-items:center; box-shadow: var(--sh-blue); opacity:0; transform: translateY(14px); pointer-events:none; transition: opacity var(--t), transform var(--t); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top svg { width:22px; }

/* ---------- page hero band (interior pages) ---------- */
.phero { position:relative; overflow:hidden; color:#fff; padding-block: clamp(120px, 16vw, 200px) clamp(60px, 8vw, 110px); }
.phero__bg { position:absolute; inset:0; z-index:-2; }
.phero__bg img, .phero__bg svg { width:100%; height:100%; object-fit:cover; }
.phero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(120deg, rgba(7,26,47,.86), rgba(10,132,255,.42)); }
.phero h1 { color:#fff; max-width:18ch; }
.phero .lead { color: rgba(255,255,255,.9); max-width:58ch; }
.crumbs { display:flex; gap:.5rem; align-items:center; font-size:.82rem; color: rgba(255,255,255,.8); margin-bottom:1.4rem; flex-wrap:wrap; }
.crumbs a:hover { color:#fff; text-decoration:underline; }
.crumbs svg { width:.78em; opacity:.6; }
.crumbs--dark { color: var(--muted); }
.crumbs--dark a { color: var(--navy); }