/* ============================================================
   Veteran Life Plan - shared site styles (header, footer, base)
   Page-specific styles live in each page's own <style> block.
   ============================================================ */
:root{
  --navy:#15253C; --red:#A13A30; --red-dark:#8E332B; --brass:#B0883B;
  --cream:#F2EDE3; --cloud:#F2F5F7; --ink:#1C2126; --slate:#5C6B7A;
  --line:#CFD9E2; --white:#FFFFFF;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);}

/* ---------- HEADER ---------- */
.vlp-header{background:var(--white);border-bottom:1px solid #E6ECF1;position:sticky;top:0;z-index:50;}
.vlp-header .hwrap{max-width:1360px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:54px;}
.vlp-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.vlp-logo svg{width:30px;height:33px;flex:0 0 auto;}
.vlp-logo .lt{line-height:1;}
.vlp-logo .lt .t1{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.34em;font-weight:600;color:var(--brass);text-transform:uppercase;}
.vlp-logo .lt .t2{display:block;font-family:var(--serif);font-weight:700;font-size:19px;color:var(--navy);margin-top:2px;}
.vlp-nav{display:flex;align-items:center;gap:28px;}
.vlp-nav a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;}
.vlp-nav a:hover{color:var(--red);}
.vlp-header .hcta{display:flex;align-items:center;gap:12px;}
.vlp-btn-sm{display:inline-block;font-size:14px;font-weight:500;padding:8px 16px;border-radius:10px;text-decoration:none;}
.vlp-btn-sm.ghost{background:var(--cream);color:var(--ink);border:1px solid var(--line);}
.vlp-btn-sm.solid{background:var(--red);color:#fff;border:0;}
.vlp-btn-sm.solid:hover{background:var(--red-dark);}
.vlp-menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:18px;line-height:1;cursor:pointer;color:var(--navy);}
@media(max-width:900px){
  .vlp-nav{display:none;position:absolute;top:54px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 0;}
  .vlp-nav.open{display:flex;}
  .vlp-nav a{padding:12px 24px;width:100%;box-sizing:border-box;}
  .vlp-menu-btn{display:block;}
  .vlp-header .hcta .ghost{display:none;}
}

/* ---------- FOOTER ---------- */
.vlp-footer{background:var(--navy);color:#C7D2DE;padding:64px 0 32px;font-family:var(--sans);}
.vlp-footer .fwrap{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.vlp-footer .fbrand .vlp-logo .lt .t2{color:var(--cream);}
.vlp-footer .fbrand p{font-size:15px;line-height:1.6;color:#C7D2DE;max-width:300px;margin:16px 0 0;}
.vlp-footer h4{font-family:var(--serif);color:var(--brass);font-size:18px;font-weight:600;margin:0 0 14px;}
.vlp-footer ul{list-style:none;margin:0;padding:0;}
.vlp-footer li{margin:0 0 10px;}
.vlp-footer a{color:#C7D2DE;text-decoration:none;font-size:14px;}
.vlp-footer a:hover{color:#fff;text-decoration:underline;}
.vlp-footer .flegal{max-width:1200px;margin:48px auto 0;padding:24px 24px 0;border-top:1px solid rgba(207,217,226,.2);font-size:13px;color:#8FA0B3;line-height:1.6;}
.vlp-footer .flegal p{margin:0 0 10px;}
@media(max-width:900px){
  .vlp-footer .fwrap{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .vlp-footer .fwrap{grid-template-columns:1fr;}
}

/* ---------- NATIVE FORMS (webhook) ---------- */
.vlp .form-slot{min-height:0 !important;}
.vlp-nform{font-family:var(--sans);text-align:left;}
.vlp-nform .nf-field{margin:0 0 16px;}
.vlp-nform label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 6px;}
.vlp-nform input[type=text],.vlp-nform input[type=email],.vlp-nform input[type=tel],.vlp-nform textarea{width:100%;box-sizing:border-box;padding:11px 12px;font-size:15px;font-family:var(--sans);color:var(--ink);background:#EEF1F5;border:1px solid var(--line);border-radius:8px;outline:none;}
.vlp-nform input:focus,.vlp-nform textarea:focus{border-color:var(--navy);background:#fff;}
.vlp-nform textarea{min-height:120px;resize:vertical;}
.vlp-nform .nf-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--slate);line-height:1.5;margin:4px 0 18px;font-weight:400;}
.vlp-nform .nf-consent input{margin-top:3px;flex:0 0 auto;}
.vlp-nform .nf-consent a{color:var(--slate);text-decoration:underline;}
.vlp-nform .nf-btn{display:block;width:100%;background:var(--red);color:#fff;border:0;border-radius:8px;padding:14px 20px;font-size:16px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:background .15s;}
.vlp-nform .nf-btn:hover{background:var(--red-dark);}
.vlp-nform .nf-msg{margin-top:14px;font-size:15px;border-radius:8px;padding:14px 16px;}
.vlp-nform .nf-msg.ok{background:#EAF3EC;border:1px solid #BFD9C4;color:#2C6B3A;}
.vlp-nform .nf-msg.err{background:#F7EAE9;border:1px solid #E2BEB9;color:#9B362C;}

/* ---------- SHARED WIDGETS (site.js): contact button, cookie bar, exit popup ---------- */
.vlp-fab{position:fixed;bottom:24px;right:24px;z-index:60;display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border:1px solid var(--brass);border-radius:999px;padding:12px 18px;font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 6px 18px rgba(21,37,60,.28);transition:transform .15s;}
.vlp-fab:hover{transform:scale(1.05);}
.vlp-fab svg{flex:0 0 auto;}
@media(max-width:640px){.vlp-fab span{display:none;}.vlp-fab{padding:12px;}}

.vlp-cookie{position:fixed;bottom:24px;left:24px;z-index:70;max-width:400px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(21,37,60,.18);padding:18px 20px;font-family:var(--sans);}
.vlp-cookie p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--slate);}
.vlp-cookie a{color:var(--slate);text-decoration:underline;}
.vlp-cookie .ck-actions{display:flex;gap:10px;}
.vlp-cookie button{font-family:var(--sans);font-size:13px;font-weight:600;border-radius:8px;padding:8px 18px;cursor:pointer;}
.vlp-cookie .ck-accept{background:var(--navy);color:#fff;border:0;}
.vlp-cookie .ck-accept:hover{background:#0F1B2E;}
.vlp-cookie .ck-decline{background:var(--white);color:var(--ink);border:1px solid var(--line);}
.vlp-cookie .ck-decline:hover{background:var(--cloud);}
@media(max-width:640px){.vlp-cookie{left:12px;right:12px;bottom:12px;max-width:none;}}

.vlp-exit-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;}
.vlp-exit-card{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;background:var(--white);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);font-family:var(--sans);}
.vlp-exit-card .ex-head{position:relative;background:var(--navy);color:#fff;padding:24px 28px 20px;border-radius:16px 16px 0 0;}
.vlp-exit-card .ex-close{position:absolute;top:12px;right:12px;background:none;border:0;color:rgba(255,255,255,.75);font-size:26px;line-height:1;padding:6px 10px;border-radius:999px;cursor:pointer;}
.vlp-exit-card .ex-close:hover{color:#fff;background:rgba(255,255,255,.1);}
.vlp-exit-card .ex-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(176,136,59,.2);border:1px solid rgba(176,136,59,.4);color:var(--brass);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px;border-radius:999px;margin:0 0 12px;}
.vlp-exit-card .ex-head h3{font-family:var(--serif);font-size:24px;font-weight:700;line-height:1.3;margin:0 0 6px;}
.vlp-exit-card .ex-head p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.8);}
.vlp-exit-card .ex-body{padding:24px 28px 16px;background:var(--cloud);}
.vlp-exit-card .ex-alt{text-align:center;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);}
.vlp-exit-card .ex-alt a{font-size:13px;font-weight:600;color:var(--red);text-decoration:none;}
.vlp-exit-card .ex-alt a:hover{text-decoration:underline;}
.vlp-exit-card .ex-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 28px;background:var(--white);border-top:1px solid var(--line);border-radius:0 0 16px 16px;font-size:12px;color:var(--slate);}
.vlp-exit-card .ex-dismiss{background:none;border:0;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--slate);text-decoration:underline;cursor:pointer;padding:4px 0;}
.vlp-exit-card .ex-dismiss:hover{color:var(--ink);}

/* ---------- STICKY SIDEBARS ----------
   Pages declare position:sticky on .side-stack / .sidebar-stack, but the bare
   <aside> grid item only grows to its content (the .layout grid uses
   align-items:start), leaving the sticky child no room to travel. Stretching
   the aside to the full row height restores the stick. The top offset also
   clears the 54px sticky header. */
.vlp .layout > aside{align-self:stretch;}
.vlp .layout .side-stack,
.vlp .layout .sidebar-stack{top:78px;}

/* ---------- IMAGE ASPECT FIX ----------
   Content images carry width/height attributes (for CLS). When CSS narrows
   them with max-width:100%, height must follow automatically or the image
   distorts. hero-bg and author-box set their own explicit sizes and are
   more specific, so they are unaffected. */
.vlp img{height:auto;}
img{max-width:100%;height:auto;}

/* ---------- MOBILE HEADER FIX ---------- */
.vlp-btn-sm{white-space:nowrap;}
.vlp-btn-sm .cta-short{display:none;}
@media(max-width:640px){
  .vlp-header .hwrap{padding:0 12px;gap:8px;}
  .vlp-header .hcta{gap:8px;}
  .vlp-btn-sm.solid{font-size:13px;padding:7px 10px;}
  .vlp-btn-sm .cta-full{display:none;}
  .vlp-btn-sm .cta-short{display:inline;}
  .vlp-logo .lt .t2{font-size:17px;}
  .vlp-logo svg{width:26px;height:29px;}
}
.vlp-nav .nav-mobile-only{display:none;}
@media(max-width:900px){.vlp-nav .nav-mobile-only{display:block;}}

/* ---------- MOBILE TABLE / GRID OVERFLOW FIX ----------
   Grid children default to min-width:auto, so a wide table forces its column
   past the viewport instead of letting the table's own scroll wrapper work. */
.vlp .layout > *{min-width:0;}
@media(max-width:640px){
  .vlp .main table,.vlp .content table{display:block;overflow-x:auto;white-space:nowrap;}
  .vlp .table-wrap table{display:table;white-space:normal;}
}