/*
 * FAQ faq-child — assets/css/site.css
 * Shared styles: header, footer, nav, utility classes.
 * Loaded on ALL pages except front-page.php (which uses home-critical + home-deferred).
 * ─────────────────────────────────────────────────────────────────────────────
 * Version: 1.0.0
 */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:#fff;color:#1A1A2E;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ── Brand tokens ── */
:root{
  --blue:  #0E5D88;
  --gold:  #C6BB44;
  --dark:  #415161;
  --grey:  #94A3B8;
  --light: #EEF4F8;
  --white: #FFFFFF;
  --text:  #1A1A2E;
  --green: #16A34A;
  --red:   #DC2626;
  --fh:    'Sora',system-ui,sans-serif;
  --fb:    'DM Sans',system-ui,sans-serif;
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  16px;
  --r-pill:100px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
}

/* ── Site header ── */
.faq-header{
  position:sticky;top:0;z-index:300;
  background:var(--blue);height:60px;
  display:flex;align-items:center;padding:0 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.faq-header__inner{
  width:100%;max-width:1200px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-header__logo{display:flex;align-items:center;gap:10px;flex-shrink:0;background:var(--white);border-radius:var(--r-md);padding:6px 10px}
.faq-header__logo img{height:32px;width:auto}
.faq-header__logo-text{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--white);letter-spacing:-.02em}
.faq-header__nav{display:none;align-items:center;gap:4px}
@media(min-width:1024px){.faq-header__nav{display:flex}}
.faq-header__nav a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.8);padding:8px 12px;border-radius:var(--r-sm);transition:background .15s,color .15s;white-space:nowrap}
.faq-header__nav a:hover,.faq-header__nav a[aria-current=page]{background:rgba(255,255,255,.1);color:var(--white)}
.faq-header__nav-cta{background:var(--gold)!important;color:#1a1a1a!important;font-weight:700!important;padding:8px 16px!important;border-radius:var(--r-md)!important}
.faq-header__nav-cta:hover{background:#b3a93a!important}
.faq-header__right{display:flex;align-items:center;gap:8px}
.faq-header__wa{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--white);border-radius:50%;transition:background .15s}
.faq-header__wa:hover{background:rgba(255,255,255,.1)}
.faq-header__hamburger{width:44px;height:44px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;color:var(--white)}
@media(min-width:1024px){.faq-header__hamburger{display:none}}
.faq-header__hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:1px;transition:transform .2s,opacity .2s;transform-origin:center}
.faq-header__hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.faq-header__hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.faq-header__hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile nav drawer ── */
.faq-nav-drawer{position:fixed;top:60px;right:0;bottom:0;width:min(80vw,300px);background:var(--dark);z-index:299;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;padding:20px 0;display:flex;flex-direction:column}
.faq-nav-drawer.is-open{transform:translateX(0)}
.faq-nav-drawer a{display:block;padding:13px 24px;font-size:15px;font-weight:500;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.06);transition:color .15s,background .15s}
.faq-nav-drawer a:hover{color:var(--white);background:rgba(255,255,255,.06)}
.faq-nav-drawer__cta{margin:16px 20px 0;background:var(--gold)!important;color:#1a1a1a!important;font-weight:700!important;border-radius:var(--r-md)!important;border-bottom:none!important;text-align:center}
.faq-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:298;backdrop-filter:blur(2px)}
.nav-open .faq-nav-overlay{display:block}

/* ── Page hero (inner pages) ── */
.pg-hero{background:var(--blue);padding:52px 20px 48px;position:relative;overflow:hidden}
.pg-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 90% 10%,rgba(198,187,68,.1) 0%,transparent 55%)}
.pg-hero::after{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--gold) 0%,rgba(198,187,68,.1) 100%)}
.pg-hero__inner{position:relative;max-width:900px;margin:0 auto;padding:0 20px}
.pg-hero__eye{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(198,187,68,.15);border:1px solid rgba(198,187,68,.3);border-radius:var(--r-pill);padding:5px 14px;margin-bottom:16px}
.pg-hero__h1{font-family:var(--fh);font-size:clamp(26px,4.5vw,44px);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--white);margin-bottom:16px}
.pg-hero__h1 em{font-style:normal;color:var(--gold)}
.pg-hero__sub{font-size:clamp(15px,2vw,17px);line-height:1.7;color:rgba(255,255,255,.8);max-width:580px}
.pg-hero__breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.45);margin-bottom:16px}
.pg-hero__breadcrumb a{color:rgba(255,255,255,.55);transition:color .15s}
.pg-hero__breadcrumb a:hover{color:var(--white)}
.pg-hero__breadcrumb span{color:rgba(255,255,255,.25)}

/* ── Shared layout ── */
.pg-wrap{max-width:900px;margin:0 auto;padding:0 20px}
.pg-wrap-wide{max-width:1080px;margin:0 auto;padding:0 20px}
.pg-section{padding:64px 20px}
.pg-section-sm{padding:40px 20px}
.pg-eye{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 14px;margin-bottom:16px}
.pg-eye-b{color:var(--blue);background:rgba(14,93,136,.08);border:1px solid rgba(14,93,136,.18)}
.pg-eye-g{color:var(--gold);background:rgba(198,187,68,.14);border:1px solid rgba(198,187,68,.3)}
.pg-eye-w{color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.pg-div{width:44px;height:3px;border-radius:2px;background:var(--gold);margin-bottom:18px}
.pg-h2{font-family:var(--fh);font-size:clamp(22px,3.5vw,34px);font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--dark);margin-bottom:14px}
.pg-h2 em{font-style:normal;color:var(--blue)}
.pg-h2-wh{color:var(--white)}
.pg-h2-wh em{color:var(--gold)}
.pg-h3{font-family:var(--fh);font-size:clamp(17px,2.5vw,22px);font-weight:700;line-height:1.2;color:var(--dark);margin-bottom:10px}
.pg-lead{font-size:clamp(15px,2vw,17px);line-height:1.7;color:var(--dark);opacity:.8;max-width:580px}
.pg-lead-wh{color:rgba(255,255,255,.78);opacity:1}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:15px;font-weight:700;padding:14px 26px;border-radius:var(--r-md);text-decoration:none;transition:all .18s ease;cursor:pointer;border:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:#1a1a1a;box-shadow:0 4px 20px rgba(198,187,68,.3)}
.btn-gold:hover{background:#b3a93a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(198,187,68,.4);color:#1a1a1a}
.btn-blue{background:var(--blue);color:var(--white)}
.btn-blue:hover{background:#0a4a6e;transform:translateY(-2px);color:var(--white)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08);color:var(--white)}
.btn-outline{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--white)}
.btn-sm{padding:10px 18px;font-size:13.5px}
.btn svg{width:15px;height:15px;flex-shrink:0}

/* ── Card ── */
.pg-card{background:var(--white);border-radius:var(--r-lg);border:1.5px solid rgba(14,93,136,.1);padding:24px;transition:box-shadow .2s,transform .2s}
.pg-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.pg-card--hi{background:var(--blue);border-color:var(--blue)}

/* ── Grid helpers ── */
.pg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pg-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.pg-grid-2,.pg-grid-3{grid-template-columns:1fr}}
@media(max-width:860px){.pg-grid-3{grid-template-columns:1fr 1fr}}

/* ── Footer ── */
.faq-footer{background:var(--text);color:rgba(255,255,255,.65);padding:48px 20px 24px}
.faq-footer__inner{max-width:1080px;margin:0 auto}
.faq-footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:40px}
@media(min-width:768px){.faq-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.faq-footer__brand h4{font-family:var(--fh);font-size:20px;font-weight:800;color:var(--white);margin-bottom:8px}
.faq-footer__brand p{font-size:13px;line-height:1.6;max-width:260px;margin-bottom:16px}
.faq-footer__brand .tagline{font-family:var(--fh);font-size:12px;font-weight:600;color:var(--gold);letter-spacing:.04em}
.faq-footer__col h5{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:14px}
.faq-footer__col a{display:block;font-size:13.5px;color:rgba(255,255,255,.65);margin-bottom:10px;transition:color .15s}
.faq-footer__col a:hover{color:var(--white)}
.faq-footer__bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:rgba(255,255,255,.35)}
.faq-footer__bottom a{color:rgba(255,255,255,.45);transition:color .15s}
.faq-footer__bottom a:hover{color:rgba(255,255,255,.7)}

/* ── iOS input zoom fix — prevents viewport zoom on focus ── */
input, select, textarea,
input[type="text"], input[type="email"],
input[type="tel"], input[type="number"],
input[type="password"], input[type="search"] {
  font-size: max(16px, 1rem);
}