/* ============================================================================
   ALTPORT CORE  —  altport-core.css
   ----------------------------------------------------------------------------
   One shared design system for the ALTPORT site revamp.
   Upload ONCE to the theme (e.g. wp-content/themes/altport/assets/css/).
   Every page links this file, then adds a small page-specific block for
   anything unique to that page.

   ARCHITECTURE
     1. TOKENS      — every brand decision, once (:root under .altp)
     2. BASE        — reset, container, section rhythm, typography
     3. COMPONENTS  — reusable blocks (buttons, hero, cards, etc.)
                      each component carries its OWN responsive rules,
                      so nothing drifts. No separate responsive file.

   RULES
     - Everything is scoped under .altp so it never collides with the
       existing theme CSS (ah-, aifpms-, spv2-, investcard, etc.).
     - Prefix: altp-  ·  strict BEM (block__element, block--modifier)
     - Colours/sizes are inspector-confirmed from the live site.
     - No !important. Scoping under .altp gives us the specificity we need.

   USAGE ON A PAGE
     <link rel="stylesheet" href=".../altport-core.css">
     <div class="altp">   <!-- wrap all page content in .altp -->
        ...component markup...
     </div>
============================================================================ */


/* ============================================================================
   1. TOKENS
============================================================================ */
.altp{
  /* ---- Brand navies (inspector-confirmed; each has a defined job) ---- */
  --navy:        #234090;   /* H1 / hero titles                       */
  --navy-head:   #253b80;   /* H2–H6 section headings                 */
  --navy-deep:   #01337e;   /* deep bands, footer-style fills         */
  --navy-hero:   #0d2340;   /* darkest, for image/overlay hero bg     */

  /* ---- Accent ---- */
  --orange:      #e67e22;   /* accent — LARGE TEXT / headings only     */
  --orange-body: #c9691e;   /* accent for body-size / small text (AA)  */

  /* ---- Support ---- */
  --green:       #16a34a;   /* icons, checks                          */

  /* ---- Surfaces & neutrals ---- */
  --cream:       #f7f4ef;
  --off:         #f5f5f0;
  --white:       #ffffff;
  --ink:         #000000;   /* body copy — client-approved pure black  */
  --muted:       #5b6573;
  --hair:        #e5e7eb;
  --hair-2:      #e0e4e8;

  /* ---- Type ---- */
  --font:        'Montserrat', Arial, sans-serif;

  /* type scale (px values confirmed from the live theme) */
  --fs-h1:       44px;   /* hero title (theme clamps ~40 on real h1)   */
  --fs-h2:       28px;   /* section heading                            */
  --fs-h3:       20px;   /* card / block heading                       */
  --fs-lede:     19px;   /* hero lede + primary body — black           */
  --fs-body:     16px;   /* standard body, form inputs (iOS zoom-safe) */
  --fs-small:    14px;
  --fs-label:    12px;   /* eyebrow / meta                             */

  /* heading weights/metrics (H1 vs H2 genuinely differ on live site) */
  --fw-h1:800; --lh-h1:1.08; --ls-h1:-.02em;
  --fw-h2:700; --lh-h2:1.25; --ls-h2:-.01em;

  /* ---- Shape, shadow, motion ---- */
  --r:       8px;
  --r-lg:    12px;
  --r-pill:  999px;
  --shadow:  0 14px 44px rgba(35,64,144,.08), 0 2px 8px rgba(35,64,144,.04);
  --shadow-hover: 0 16px 34px rgba(35,64,144,.12);
  --ease:    cubic-bezier(.22,1,.36,1);

  /* ---- Layout ---- */
  --wrap:    1200px;
  --gutter:  24px;
}

/*  ORANGE CONTRAST NOTE
    --orange (#e67e22) on white measures ~2.84:1 — FAILS WCAG AA for normal
    text. Use it only on LARGE text (headings 24px+). For body-size or small
    orange text use --orange-body (#c9691e), or place orange on navy.        */


/* ============================================================================
   2. BASE  (scoped reset + layout + typography defaults)
============================================================================ */
.altp{
  font-family:var(--font);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.altp *,.altp *::before,.altp *::after{ box-sizing:border-box; }
.altp img,.altp svg{ display:block; max-width:100%; }
.altp a{ color:inherit; text-decoration:none; }
.altp p{ margin:0 0 1em; }
.altp ul,.altp ol{ margin:0; padding:0; list-style:none; }

/* width container */
.altp .altp-container{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.altp .altp-container--wide{ max-width:1360px; }
.altp .altp-container--narrow{ max-width:920px; }

/* section rhythm + surfaces */
.altp .altp-section{ padding:64px 0; }
.altp .altp-section--cream{ background:var(--cream); }
.altp .altp-section--off{ background:var(--off); }
.altp .altp-section--white{ background:var(--white); }
.altp .altp-section--navy{ background:var(--navy-head); color:var(--white); }
@media (max-width:1024px){ .altp .altp-section{ padding:48px 0; } }
@media (max-width:430px){ .altp .altp-container{ padding:0 20px; } }


/* ============================================================================
   3. COMPONENTS
============================================================================ */

/* ---- 3.1 Section header (eyebrow + heading + intro) -------------------- */
.altp .altp-head{ max-width:820px; margin:0 auto 40px; text-align:center; }
.altp .altp-head__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange-body); margin:0 0 14px;
}
.altp .altp-head__eyebrow::before{ content:""; width:26px; height:2px; background:var(--orange); }
.altp .altp-head--center .altp-head__eyebrow{ justify-content:center; }
.altp .altp-head__title{
  font-family:var(--font); font-weight:var(--fw-h2); font-size:var(--fs-h2);
  line-height:var(--lh-h2); letter-spacing:var(--ls-h2);
  color:var(--navy-head); margin:0 0 14px;
}
.altp .altp-head__title .altp-accent{ color:var(--orange); }  /* large text: AA-safe */
.altp .altp-head__intro{
  font-size:var(--fs-lede); color:var(--ink); line-height:1.6; margin:0;
}
@media (max-width:430px){
  .altp .altp-head{ margin-bottom:28px; }
  .altp .altp-head__title{ font-size:24px; }
  .altp .altp-head__intro{ font-size:17px; }
}

/* ---- 3.2 Buttons ------------------------------------------------------ */
.altp .altp-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font); font-size:var(--fs-small); font-weight:600; letter-spacing:.02em;
  padding:13px 24px; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; text-align:center; transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
.altp .altp-btn:active{ transform:translateY(1px); }
.altp .altp-btn svg{ width:15px; height:15px; }
.altp .altp-btn--primary{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.altp .altp-btn--primary:hover{ background:var(--orange-body); border-color:var(--orange-body); }
.altp .altp-btn--navy{ background:var(--navy-head); color:var(--white); border-color:var(--navy-head); }
.altp .altp-btn--navy:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }
.altp .altp-btn--ghost{ background:transparent; color:var(--navy-head); border-color:var(--hair-2); }
.altp .altp-btn--ghost:hover{ border-color:var(--orange); color:var(--orange-body); }
.altp .altp-btn--ghost-white{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.altp .altp-btn--ghost-white:hover{ background:rgba(255,255,255,.08); border-color:var(--white); }

/* ---- 3.3 Feature pill ------------------------------------------------- */
.altp .altp-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--hair-2); color:var(--navy-head);
  padding:9px 16px; border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:600;
}
.altp .altp-pill__check{ width:16px; height:16px; color:var(--green); flex-shrink:0; }

/* ---- 3.4 Card + grid -------------------------------------------------- */
.altp .altp-grid{ display:grid; gap:20px; }
.altp .altp-grid--2{ grid-template-columns:repeat(2,1fr); }
.altp .altp-grid--3{ grid-template-columns:repeat(3,1fr); }
.altp .altp-grid--4{ grid-template-columns:repeat(4,1fr); }
.altp .altp-grid--auto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
@media (max-width:1024px){
  .altp .altp-grid--3,.altp .altp-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .altp .altp-grid--2,.altp .altp-grid--3,.altp .altp-grid--4{ grid-template-columns:1fr; }
}

.altp .altp-card{
  background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg);
  padding:26px 24px; transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.altp .altp-card--hover:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.altp .altp-card__icon{
  width:46px; height:46px; border-radius:10px; background:var(--cream);
  display:flex; align-items:center; justify-content:center; color:var(--navy-head); margin-bottom:16px;
}
.altp .altp-card__icon svg{ width:22px; height:22px; }
.altp .altp-card__title{ font-size:var(--fs-h3); font-weight:700; color:var(--navy-head); line-height:1.3; margin:0 0 8px; }
.altp .altp-card__text{ font-size:var(--fs-body); color:var(--ink); line-height:1.6; margin:0; }

/* numbered variant (outcome cards) */
.altp .altp-card--num{ position:relative; overflow:hidden; }
.altp .altp-card--num::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--orange); transition:width .3s var(--ease); }
.altp .altp-card--num:hover::before{ width:100%; }
.altp .altp-card__num{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:15px; letter-spacing:.05em; color:var(--orange-body); margin:0 0 12px;
}
.altp .altp-card__num::after{ content:""; width:26px; height:1px; background:var(--hair-2); }

/* ---- 3.5 Stat row ----------------------------------------------------- */
.altp .altp-stats{ display:flex; flex-wrap:wrap; border-top:1px solid var(--hair-2); padding-top:22px; }
.altp .altp-stat{ padding:0 26px; border-right:1px solid var(--hair-2); }
.altp .altp-stat:first-child{ padding-left:0; }
.altp .altp-stat:last-child{ border-right:0; }
.altp .altp-stat__num{ font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--navy); line-height:1; }
.altp .altp-stat__label{ font-size:var(--fs-label); color:var(--muted); margin-top:8px; letter-spacing:.02em; }
@media (max-width:430px){
  .altp .altp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; text-align:center; padding-top:24px; }
  .altp .altp-stat{ padding:0 8px; }
  .altp .altp-stat__num{ font-size:26px; }
  .altp .altp-stat__label{ font-size:11px; line-height:1.35; }
}

/* ---- 3.6 Tag chips ---------------------------------------------------- */
.altp .altp-tags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.altp .altp-tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:1px solid var(--hair-2); border-radius:var(--r-pill);
  padding:11px 18px; font-size:var(--fs-small); font-weight:600; color:var(--navy-head);
}
.altp .altp-tag svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; }

/* ---- 3.7 Accordion (FAQ) — pairs with altpToggleFaq() in core JS ------ */
.altp .altp-faq{ max-width:820px; margin:0 auto; }
.altp .altp-faq__item{ border-bottom:1px solid var(--hair); }
.altp .altp-faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px;
  font-family:var(--font); font-size:var(--fs-body); font-weight:600; color:var(--navy-head);
}
.altp .altp-faq__icon{ width:16px; height:16px; flex-shrink:0; color:var(--orange); transition:transform .25s var(--ease); }
.altp .altp-faq__item.is-open .altp-faq__icon{ transform:rotate(180deg); }
.altp .altp-faq__a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.altp .altp-faq__item.is-open .altp-faq__a{ max-height:500px; }
.altp .altp-faq__a p{ padding:0 4px 20px; margin:0; font-size:var(--fs-body); color:var(--ink); line-height:1.75; }

/* ---- 3.8 CTA band ----------------------------------------------------- */
.altp .altp-cta{ background:var(--navy-head); padding:52px 0; }
.altp .altp-cta__row{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.altp .altp-cta__title{
  font-family:var(--font); font-weight:var(--fw-h1); font-size:var(--fs-h2);
  line-height:1.2; letter-spacing:var(--ls-h2); color:var(--white); margin:0;
}
.altp .altp-cta__title .altp-accent{ color:var(--orange); }
.altp .altp-cta__sub{ font-size:var(--fs-small); color:rgba(255,255,255,.75); margin:6px 0 0; }
@media (max-width:1024px){
  .altp .altp-cta__row{ flex-direction:column; align-items:flex-start; }
  .altp .altp-cta__title{ font-size:24px; }
}

/* ---- 3.9 Video card (click-to-play facade; pairs with altpPlayVideo()) - */
.altp .altp-vid{
  background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.altp .altp-vid--hover:hover{ border-color:var(--orange); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.altp .altp-vid__btn{ display:block; width:100%; border:0; padding:0; cursor:pointer; background:var(--navy-head); position:relative; aspect-ratio:16/9; overflow:hidden; }
.altp .altp-vid__btn img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.altp .altp-vid--hover:hover .altp-vid__btn img{ transform:scale(1.04); }
.altp .altp-vid__btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,35,64,0),rgba(13,35,64,.18)); transition:background .2s var(--ease); }
.altp .altp-vid--hover:hover .altp-vid__btn::after{ background:linear-gradient(180deg,rgba(13,35,64,.05),rgba(13,35,64,.3)); }
.altp .altp-vid__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.16); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  border:1.5px solid rgba(255,255,255,.7);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.altp .altp-vid--hover:hover .altp-vid__play{ transform:translate(-50%,-50%) scale(1.06); background:var(--orange); border-color:var(--orange); }
.altp .altp-vid__play svg{ width:20px; height:20px; color:#fff; margin-left:2px; }
.altp .altp-vid__frame{ position:relative; aspect-ratio:16/9; background:#000; }
.altp .altp-vid__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.altp .altp-vid__body{ padding:16px 18px 18px; }
.altp .altp-vid__title{ font-size:var(--fs-body); font-weight:700; color:var(--navy-head); line-height:1.35; margin:0; }

/* ---- 3.10 Form -------------------------------------------------------- */
.altp .altp-form{ max-width:560px; margin:0 auto; background:var(--white); border:1px solid var(--hair); border-radius:var(--r-lg); padding:32px; }
.altp .altp-form__field{ margin-bottom:16px; }
.altp .altp-form__label{ display:block; font-size:var(--fs-small); font-weight:600; color:var(--navy-head); margin-bottom:7px; }
.altp .altp-form__label .req{ color:var(--orange-body); }
.altp .altp-form__input,.altp .altp-form__select{
  width:100%; font-family:inherit; font-size:var(--fs-body); /* 16px, prevents iOS zoom */
  color:var(--ink); background:var(--white); border:1px solid var(--hair-2); border-radius:var(--r);
  padding:12px 14px; transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.altp .altp-form__input:focus,.altp .altp-form__select:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(230,126,34,.14);
}

/* ---- 3.11 Motion safety ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .altp *{ animation:none !important; transition:none !important; }
}