/*
Theme Name: Khab's Island
Theme URI: https://khabsisland.com
Author: NT Digital
Author URI: https://ntdigital.co.nz
Description: A playful, parent-facing companion site for Khab's Island — the kids' shipwreck-adventure game. Pairs with the Khab's Island — Parental Portal plugin to handle parent sign-up, login, the portal and the kids' play page. Storybook island diorama hero, rounded type, and the game's own sea/sand/grass palette.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: khabs-island
Tags: custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, education, one-column
*/

/* ============================================================
   Tokens — the game's own world: storm sky, sea, sand, grass
   ============================================================ */
:root{
  --sea-deep:#1f6f8e;
  --sea:#2f93b4;
  --sky:#7fd1ea;
  --sky-soft:#aee3ff;
  --sand:#f6e7bf;
  --sand-deep:#f0d79a;
  --grass:#57b85a;
  --grass-deep:#2f7d4f;
  --gold:#ffce4a;
  --gold-deep:#e8a93f;
  --melon:#e0607f;
  --lava:#ff7a2a;
  --ink:#262234;
  --ink-soft:#54506a;
  --paper:#fffaf0;
  --line:#e7ddc7;
  --shadow:0 14px 30px rgba(31,111,142,.18);
  --shadow-sm:0 6px 0 rgba(0,0,0,.10);
  --rad:22px;
  --maxw:1140px;
  --display:"Baloo 2", system-ui, sans-serif;
  --body:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--body); color:var(--ink);
  background:var(--paper); line-height:1.6; font-size:18px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--sea-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0 0 .4em;color:var(--ink);font-weight:800;}
h1{font-size:clamp(2.3rem,6vw,4rem);letter-spacing:-.01em;}
h2{font-size:clamp(1.8rem,4vw,2.7rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1rem;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}
.eyebrow{font-family:var(--display);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  font-size:.8rem;color:var(--sea-deep);display:inline-block;margin-bottom:.6rem;}
.center{text-align:center;}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:46ch;}
.center .lead{margin-left:auto;margin-right:auto;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:700;
  font-size:1.05rem;padding:.85rem 1.6rem;border-radius:16px;border:3px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .12s ease, box-shadow .12s ease;}
.btn:hover{text-decoration:none;transform:translateY(-2px);}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(180deg,#ffe07a,var(--gold));color:#5a3d00;border-color:var(--gold-deep);
  box-shadow:0 6px 0 var(--gold-deep);}
.btn-gold:active{box-shadow:0 2px 0 var(--gold-deep);}
.btn-blue{background:linear-gradient(180deg,#4aa3ff,#2f7de0);color:#fff;border-color:#1f5fb8;
  box-shadow:0 6px 0 #1f5fb8;}
.btn-blue:active{box-shadow:0 2px 0 #1f5fb8;}
.btn-ghost{background:#fff;color:var(--sea-deep);border-color:var(--line);box-shadow:var(--shadow-sm);}
.btn-lg{font-size:1.18rem;padding:1rem 2rem;}
.btn-disabled,.btn-disabled:hover{background:#e7e1d3;color:#9a937f;border-color:#d8d0bd;
  box-shadow:none;cursor:not-allowed;transform:none;}

/* ============================================================
   Header / nav
   ============================================================ */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,250,240,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex;align-items:center;gap:18px;height:74px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
  font-size:1.4rem;color:var(--ink);text-decoration:none;margin-right:auto;}
.brand .mark{font-size:1.7rem;line-height:1;}
.brand img{max-height:46px;width:auto;}
.nav{display:flex;align-items:center;gap:22px;}
.nav a.menu-link{font-weight:700;color:var(--ink);}
.nav a.menu-link:hover{color:var(--sea-deep);text-decoration:none;}
.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;}
.header-cta{display:flex;align-items:center;gap:10px;}
.nav-toggle{display:none;background:#fff;border:2px solid var(--line);border-radius:12px;
  width:46px;height:46px;font-size:22px;cursor:pointer;}

@media(max-width:920px){
  .nav-toggle{display:block;}
  .nav,.header-cta{position:fixed;inset:74px 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:6px;padding:14px 22px;border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .25s ease;box-shadow:var(--shadow);}
  .header-cta{top:auto;box-shadow:var(--shadow);padding-top:0;}
  .nav ul{flex-direction:column;gap:6px;}
  body.nav-open .nav{transform:translateY(0);}
  body.nav-open .header-cta{transform:translateY(0);position:fixed;inset:auto 0 auto 0;
    top:calc(74px + 120px);}
  .header-cta .btn{justify-content:center;}
}

/* ============================================================
   Hero — storybook shipwreck diorama (the game's opening scene)
   ============================================================ */
.hero{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-soft) 0%, var(--sky) 38%, #bfe9d6 100%);}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  padding-top:54px;padding-bottom:0;}
.hero-copy h1{margin-bottom:.3em;}
.hero-copy .lead{color:#33513f;font-weight:600;}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:1.4rem 0 1rem;}
.hero-trust{display:flex;flex-wrap:wrap;gap:14px;color:#2c4a39;font-weight:700;font-size:.95rem;}
.hero-trust span{display:inline-flex;align-items:center;gap:6px;}

/* the diorama */
.diorama{position:relative;align-self:end;width:100%;}
.diorama svg{display:block;width:100%;height:auto;}
@media (prefers-reduced-motion: no-preference){
  .d-boat{animation:bob 4s ease-in-out infinite;transform-origin:center;}
  .d-wave1{animation:drift 9s ease-in-out infinite;}
  .d-wave2{animation:drift 7s ease-in-out infinite reverse;}
  .d-cloud{animation:cloud 26s linear infinite;}
  .d-bird{animation:bob 3s ease-in-out infinite;}
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-9px) rotate(1.5deg);}}
@keyframes drift{0%,100%{transform:translateX(0);}50%{transform:translateX(-14px);}}
@keyframes cloud{0%{transform:translateX(0);}100%{transform:translateX(60px);}}

/* wavy divider so the sea meets the next section like a shoreline */
.shore{display:block;width:100%;height:60px;margin-top:-2px;color:var(--paper);}
.shore svg{display:block;width:100%;height:100%;}

/* ============================================================
   Sections
   ============================================================ */
section{padding:72px 0;}
.section-head{max-width:54ch;margin:0 auto 42px;}
.tag{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;color:var(--melon);}

/* features */
.features{background:var(--paper);}
.grid{display:grid;gap:20px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:26px 24px;
  box-shadow:var(--shadow-sm);}
.card .ic{font-size:2rem;line-height:1;display:inline-block;margin-bottom:.5rem;}
.card h3{margin-bottom:.3em;}
.card p{color:var(--ink-soft);margin:0;font-size:1rem;}

/* how it works — a real 3-step sequence */
.how{background:linear-gradient(180deg,#eef9f0,#ffffff);}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step;}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  padding:30px 24px 26px;box-shadow:var(--shadow-sm);}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-18px;left:24px;
  width:42px;height:42px;border-radius:50%;background:var(--sea);color:#fff;font-family:var(--display);
  font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.2rem;
  box-shadow:0 5px 0 var(--sea-deep);}
.step h3{margin-top:.4em;}
.step p{color:var(--ink-soft);margin:0;}

/* islands showcase */
.islands{background:var(--paper);}
.island-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.isle{border-radius:var(--rad);padding:22px 18px;color:#173;min-height:150px;display:flex;
  flex-direction:column;justify-content:flex-end;border:2px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);}
.isle b{font-family:var(--display);font-size:1.15rem;display:block;color:#23303a;}
.isle small{color:#3a4a40;font-weight:700;}
.isle .em{font-size:1.8rem;}
.isle-a{background:linear-gradient(180deg,#bfe9c0,#9fd98f);}
.isle-b{background:linear-gradient(180deg,#bfe0ef,#9cc8df);}
.isle-c{background:linear-gradient(180deg,#cdeeb0,#a7d98f);}
.isle-d{background:linear-gradient(180deg,#ffd9e2,#f4b6c6);}
.isle-e{background:linear-gradient(180deg,#ffd4b0,#ffb27a);}

/* safety / parents band */
.safety{background:linear-gradient(180deg,var(--sea),var(--sea-deep));color:#eaf7fc;}
.safety h2,.safety h3{color:#fff;}
.safety .tag{color:#cdeffb;}
.safety .grid-2{margin-top:8px;}
.safety .card{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);box-shadow:none;color:#eaf7fc;}
.safety .card h3{color:#fff;}
.safety .card p{color:#d4ecf5;}

/* pricing */
.pricing{background:var(--paper);}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:840px;margin:0 auto;}
.plan{background:#fff;border:2px solid var(--line);border-radius:var(--rad);padding:30px 28px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.plan.featured{border-color:var(--gold-deep);box-shadow:var(--shadow);}
.plan .price{font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--ink);margin:.2em 0;}
.plan .price small{font-size:1rem;color:var(--ink-soft);font-weight:700;}
.plan ul{list-style:none;margin:1rem 0 1.4rem;padding:0;}
.plan li{padding:.35rem 0 .35rem 1.7rem;position:relative;color:var(--ink-soft);}
.plan li::before{content:"⚓";position:absolute;left:0;color:var(--sea);}
.plan .btn{margin-top:auto;justify-content:center;}
.badge{align-self:flex-start;background:var(--gold);color:#5a3d00;font-family:var(--display);font-weight:800;
  font-size:.78rem;letter-spacing:.04em;padding:.25rem .7rem;border-radius:999px;margin-bottom:.5rem;}

/* final CTA */
.cta{position:relative;background:linear-gradient(180deg,#bfe9d6,var(--sky));overflow:hidden;}
.cta .wrap{position:relative;z-index:2;}
.cta .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;}

/* ============================================================
   Page / posts (used for the portal shortcode pages too)
   ============================================================ */
.page-hero{background:linear-gradient(180deg,var(--sky-soft),var(--paper));padding:48px 0 26px;
  border-bottom:1px solid var(--line);}
.content{padding:42px 0 72px;}
.content .wrap{max-width:880px;}
.prose :is(h2,h3){margin-top:1.6em;}
.prose img{border-radius:14px;margin:1.2em 0;}
.prose ul,.prose ol{padding-left:1.3em;}
.postcard{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:24px;
  box-shadow:var(--shadow-sm);margin-bottom:22px;}
.postcard h2{font-size:1.5rem;margin-bottom:.2em;}
.meta{color:var(--ink-soft);font-size:.92rem;margin-bottom:.6em;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:#20303a;color:#cfe0e8;padding:54px 0 26px;}
.site-footer a{color:#bfe0ef;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;}
.footer-grid h4{font-family:var(--display);color:#fff;font-size:1.05rem;margin-bottom:.6em;}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin:.3em 0;}
.foot-brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;
  color:#fff;font-size:1.25rem;margin-bottom:.4em;}
.foot-note{color:#9fb6c2;font-size:.95rem;max-width:34ch;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:#9fb6c2;font-size:.9rem;}

/* ============================================================
   Reveal on scroll (progressive enhancement)
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* focus visibility */
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--sea-deep);outline-offset:3px;}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;padding-top:36px;}
  .diorama{max-width:520px;margin:0 auto;order:-1;}
  .grid-3,.steps{grid-template-columns:1fr 1fr;}
  .island-row{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  body{font-size:17px;}
  section{padding:54px 0;}
  .grid-3,.grid-2,.steps,.plans{grid-template-columns:1fr;}
  .island-row{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .step::before{left:50%;transform:translateX(-50%);}
  .step{text-align:center;padding-top:34px;}
}