/* =================================================================
   Vally’s Support · Global Style Sheet
   Version....... 0.2   (Static FTP Edition)
   Author........ ChatGPT for Mr Lapp
   Purpose....... Minimal, accessible, brand-consistent styling
================================================================= */

/* --------------  1. CSS Custom Properties (Design Tokens)  ---- */
:root {
  /* Brand blues ------------------------------------------------ */
  --brand-700: #162E66;   /* 20 % darker – hover / focus */
  --brand-600: #1E3A8A;   /* Accent / primary action */
  --brand-500: #3353A3;   /* Slightly lighter – focus ring */
  --brand-100: #E6ECF8;   /* Very light tint – backgrounds */

  /* Neutral greys --------------------------------------------- */
  --black:      #000000;
  --gray-900:   #111827;
  --gray-700:   #374151;
  --gray-500:   #6B7280;
  --gray-300:   #D1D5DB;
  --gray-100:   #F3F4F6;
  --white:      #ffffff;

  /* Typography scale (rem-based for easy resizing) ------------- */
  --font-base: 'Inter', system-ui, sans-serif;
  --fs-base: 1rem;       /* 16 px */
  --fs-sm: 0.875rem;     /* 14 px */
  --fs-lg: 1.125rem;     /* 18 px */
  --fs-xl: 2rem;         /* 32 px */
  --fs-2xl: 2.5rem;      /* 40 px */

  /* Layout constants ------------------------------------------ */
  --page-max: 72rem;     /* 1152 px – comfortable reading width */
  --radius: 0.75rem;     /* Uniform corner radius */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 6px 12px rgba(0,0,0,.08);

  /* Spacing scale (4-pt grid converted to rem) ---------------- */
  --space-1: 0.25rem;  /* 4 px */
  --space-2: 0.5rem;   /* 8 px */
  --space-3: 0.75rem;  /* 12 px */
  --space-4: 1rem;     /* 16 px */
  --space-6: 1.5rem;   /* 24 px */
  --space-8: 2rem;     /* 32 px */
  --space-12: 3rem;    /* 48 px */
  --space-16: 4rem;    /* 64 px */
}

/* --------------  2. Base Reset & Global Rules  --------------- */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;             /* Smooth anchor scroll */
  font-size: 100%;                     /* 16 px root for WCAG */
}

*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--gray-900);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased; /* Crisper text on macOS */
}

h1, h2, h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-700);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl);  }
h3 { font-size: var(--fs-lg);  }

p { margin-top: 0; margin-bottom: var(--space-4); }

a { color: var(--brand-600); text-decoration: none; }
a:hover,
a:focus { text-decoration: underline; }

ul, ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-6);
}

img { max-width: 100%; display: block; }

/* --------------  3. Layout Helpers  -------------------------- */
section.section,
header.section,
footer.section {
  padding: var(--space-16) var(--space-4);
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  section.section,
  header.section,
  footer.section {
    padding: var(--space-8) var(--space-4);
  }
}

/* Two-column grid switches to one column on small screens */
.grid-2 {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 48rem) {          /* 768 px */
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* --------------  4. Core Components  ------------------------- */
/* Buttons ----------------------------------------------------- */
.btn-primary {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-weight: 600;
  border-radius: var(--radius);
  background-color: var(--brand-600);
  color: var(--white);
  transition: background-color .15s ease-in-out;
}
.btn-primary:hover,
.btn-primary:focus { background-color: var(--brand-700); }

/* Cards ------------------------------------------------------- */
.card {
  background-color: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; color: var(--brand-600); }

/* Forms ------------------------------------------------------- */
form label {
  display: block;
  margin-bottom: var(--space-4);
  font-weight: 600;
}
form input,
form select,
form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background-color: var(--white);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.4;
}
form input:focus,
form select:focus,
form textarea:focus {
  outline: 2px solid var(--brand-500);
  border-color: var(--brand-600);
}
form .consent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
form button[type="submit"] {
  margin-top: var(--space-4);
  cursor: pointer;
}
#formMsg { margin-top: var(--space-2); font-size: var(--fs-sm); }

/* Hero overlay for readability under light text ---------------- */
#hero { position: relative; }
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.40);   /* 40 % black overlay */
}
#hero > * { position: relative; z-index: 1; }

/* Simple horizontal testimonial carousel ---------------------- */
#carousel { scroll-snap-type: x mandatory; }
#carousel > * { scroll-snap-align: start; }

/* --------------  5. Utilities  ------------------------------- */
.text-lg { font-size: var(--fs-lg); }

/* Hide but keep for screen-readers ---------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ==============================================================
   6.  Motion Tokens & Focus-Visible Ring
   -------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(.2,.8,.4,1);      /* Shared easing curve */
}
/* Consistent, highly visible keyboard focus */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Utility animation helper */
.fade-in {
  opacity: 0;
  animation: fadeIn .6s var(--ease-out) forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* ==============================================================
   7.  Alert Component
   -------------------------------------------------------------- */
/* Usage example: <div class="alert alert--info">...</div> */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-left: 4px solid var(--brand-600);
  background-color: var(--brand-100);
  color: var(--gray-700);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.alert svg {             /* Optional icon */
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/* Contextual variants — extend as needed */
.alert--info    { /* default colours already match brand */ }
.alert--success { border-left-color:#16A34A; background:#DCFCE7; }
.alert--warning { border-left-color:#D97706; background:#FFFBEB; }
.alert--error   { border-left-color:#DC2626; background:#FEF2F2; }

/* === Particle canvas in hero ================================= */
#hero { position: relative; }                /* ensure stacking context */

#heroCanvas {
  position: absolute;
  inset: 0;             /* cover the entire hero area               */
  z-index: 0;           /* lowest visual layer                      */
  width: 100%;          /* let CSS control physical size            */
  height: 100%;
  display: block;       /* removes inline-element gaps              */
}

/* === FIX: correct stacking order in hero ===================== */
#hero::after       { z-index: 0; }   /* overlay at the very back  */
#heroCanvas        { z-index: 1; }   /* particles sit above it    */
#hero > :not(#heroCanvas) { z-index: 2; }   /* text & buttons on top */

/* ==============================================================
   HERO THEME — brand-blue background + high-contrast content
   -------------------------------------------------------------- */

/* 1. Brand gradient background and default white text */
#hero {
  background: linear-gradient(180deg, #1E3A8A 0%, #162E66 100%);
  color: var(--white);
}

/* 2. Headings inside hero inherit the section’s white */
#hero h1,
#hero h2,
#hero h3 { color: var(--white); }

/* 3. Ensure stacking: canvas (0) < overlay (1) < text (2) */
#heroCanvas                    { z-index: 0; }
#hero::after                   { z-index: 1; }
#hero > :not(#heroCanvas)      { z-index: 2; }

/* 4. Darken overlay a bit so dots stay subtle but text pops */
#hero::after { background: rgba(0,0,0,.45); }

/* 5. In-hero primary button — white fill, blue text */
#hero .btn-primary {
  background-color: var(--white);
  color: var(--brand-700);
}
#hero .btn-primary:hover,
#hero .btn-primary:focus {
  background-color: var(--gray-100);
}

/* ==============================================================
   HERO – final visual correction
   -------------------------------------------------------------- */

/* 1 ▪ Force the brand-blue gradient, overriding the inline style */
#hero {
  background: linear-gradient(180deg, #1E3A8A 0%, #162E66 100%) !important;
  color: var(--white);
}

/* 2 ▪ Make the hero full-bleed instead of boxed */
#hero.section {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* 3 ▪ Lighten the overlay so the blue is visible */
#hero::after {
  background: rgba(0,0,0,.30);   /* was .45 */
}

/* 4 ▪ Ensure stacking order stays correct */
#heroCanvas                    { z-index: 1; }
#hero::after                   { z-index: 0; }
#hero > :not(#heroCanvas)      { z-index: 2; }

/* 5 ▪ Keep CTA readable on the new blue */
#hero .btn-primary {
  background-color: var(--white);
  color: var(--brand-700);
}
#hero .btn-primary:hover,
#hero .btn-primary:focus {
  background-color: var(--gray-100);
}

/* ==============================================================
   NAV-BAR — vertical centring + blue/white CTA
   -------------------------------------------------------------- */

/* 1 ▪ Make the nav itself a flex row, centre-aligned */
#siteHeader nav {
  display: flex;
  align-items: center;            /* <-- vertical centring */
  justify-content: space-between; /* logo left, menu block right */
  min-height: 4rem;               /* 64 px total bar height */
  padding: 0 var(--space-4);
}

/* 2 ▪ Ensure the unordered list is also a flex row, centred */
#siteHeader ul {
  display: flex;
  align-items: center;            /* centres the inline links */
  gap: var(--space-6);
  margin: 0 0 0 auto;             /* hard-right */
  padding: 0;
  list-style: none;
}

/* 3 ▪ Images don’t create extra descender space */
#siteHeader img { display: block; height: 2.25rem; }

/* 4 ▪ Blue button, white text — nav only */
#siteHeader .btn-primary {
  background-color: var(--brand-600);
  color: var(--white);
  padding: var(--space-2) var(--space-6);
}
#siteHeader .btn-primary:hover,
#siteHeader .btn-primary:focus { background-color: var(--brand-700); }


/* ==============================================================
   LEAD FORM — consent row + submit button alignment
   -------------------------------------------------------------- */

/* 1 ▪  Align the checkbox and its label text side-by-side,
        flush-left, with a modest gap */
form .consent {
  display: flex;                 /* keep flex model */
  align-items: center;           /* vertical centring */
  justify-content: flex-start;   /* stop it stretching to the right */
  gap: var(--space-2);           /* ~8 px */
  margin-bottom: var(--space-6); /* add breathing room above Submit */
  font-size: var(--fs-sm);
}

/* Remove default inline-checkbox offset */
form .consent input[type="checkbox"] { margin: 0; }

/* 2 ▪  Centre the Submit button within the form */
form button[type="submit"] {
  display: block;                /* lets margin:auto work */
  margin: var(--space-4) auto 0; /* top gap, auto left/right */
}

/* -------- Consent row: two flex-items (checkbox + span) ------ */
form .consent{
  display:flex;
  align-items:flex-start;      /* top-align checkbox with first text line */
  gap:0.75rem;                 /* space between box and paragraph         */
  font-size:var(--fs-sm);
  line-height:1.45;
  margin-bottom:var(--space-6);
  flex-wrap:wrap;              /* allow paragraph to wrap under itself on small screens */
}

form .consent input[type="checkbox"]{
  margin:0;
  width:1.25rem;               /* larger hit area                         */
  height:1.25rem;
  accent-color:var(--brand-600);
}

/* Ensure links inside the span get brand styling */
form .consent a{
  color:var(--brand-600);
  text-decoration:underline;
}

/* ==============================================================
   PROCESS STEPS — clean numbered cards
   -------------------------------------------------------------- */

#process ol {
  counter-reset: step;                /* initialise counter */
  list-style: none;                   /* remove default bullets */
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);                /* same rhythm as other sections */
}

#process li {
  position: relative;
  padding-left: 3.5rem;               /* room for the number badge */
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Automatically generate numbers */
#process li::before {
  counter-increment: step;            /* +1 each <li> */
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--brand-600);
  border: 2px solid var(--brand-600);
  border-radius: 50%;
  background: var(--white);
}

/* Headline and body spacing inside each card */
#process li h3   { margin: 0 0 var(--space-2); font-size: var(--fs-lg); }
#process li p    { margin: 0 0 var(--space-2); }

@media (min-width: 48rem) {           /* optional side-by-side layout */
  #process ol {
    grid-template-columns: 1fr;
  }
}

#process ul { list-style: none; padding-left: 0; }

/* ==============================================================
   PACKAGE CARDS — 3 on first row, 2 on second, equal width
   -------------------------------------------------------------- */
#packages .cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 equal tracks           */
  gap: var(--space-8);                      /* same rhythm as site      */
}

#packages .card{
  /* remove any inline width or border-top highlight that warps height */
  height: 100%;                 /* equal-height columns if content differs */
}

/* Responsive fall-backs */
@media (max-width: 992px){      /* medium tablets */
  #packages .cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){      /* phones */
  #packages .cards{ grid-template-columns: 1fr; }
}

/* Testimonials grid */
#proof .testimonials{
  display:grid;
  gap:var(--space-8);
}
@media (min-width: 48rem){
  #proof .testimonials{ grid-template-columns: repeat(3, 1fr); }
}

/* Card polish for quotes */
.testimonial blockquote{
  margin:0 0 var(--space-4);
  font-size:var(--fs-base);
}
.testimonial blockquote::before{
  content:"“";
  font-size:2rem;
  line-height:0;
  color:var(--brand-600);
  margin-right:.25rem;
}
.testimonial figcaption{
  font-size:var(--fs-sm);
  color:var(--gray-700);
}

/* ==============================================================
   PACKAGES — wide cards, 2–1–2 layout (equal widths)
   -------------------------------------------------------------- */
#packages .packages-2-1-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* wide two-column grid */
  gap: var(--space-8);
  align-items: stretch;
}

/* Explicit placement for 2 / 1 (centered) / 2 */
#packages .plan--starter    { grid-column: 1; grid-row: 1; }
#packages .plan--collab     { grid-column: 2; grid-row: 1; }

/* Center the single middle card but keep it the same width
   as a single column: (full grid width − gap) / 2 */
#packages .plan--growth{
  grid-column: 1 / -1;                 /* span both columns */
  justify-self: center;                 /* center in the row */
  width: calc((100% - var(--space-8)) / 2);  /* same width as other cards */
}

#packages .plan--business   { grid-column: 1; grid-row: 3; }
#packages .plan--enterprise { grid-column: 2; grid-row: 3; }

/* Card internals — ensure equal visual height and tidy spacing */
#packages .plan{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 26rem;                    /* adjust if you want shorter/taller */
}
#packages .plan .meta    { color: var(--gray-700); margin-top: .25rem; }
#packages .plan .price   { font-weight: 700; margin-top: var(--space-4); }
#packages .plan .blurb   { margin-top: var(--space-2); color: var(--gray-700); }
#packages .plan .features{ margin-top: var(--space-4); }
#packages .plan .features li{ margin-bottom: .4rem; }
#packages .plan .cta     { margin-top: auto; }  /* button pinned to bottom */

/* Responsive fallbacks */
@media (max-width: 992px){
  #packages .packages-2-1-2{ grid-template-columns: 1fr; }
  #packages .packages-2-1-2 .plan{ grid-column: auto; width: 100%; }
}

/* ===== Process details (short/expanded) ===== */
#process details{margin-top:var(--space-2)}
#process summary{
  cursor:pointer;
  color:var(--brand-600);
  font-weight:600;
  list-style:none;
}
#process summary:hover{text-decoration:underline}
#process summary::-webkit-details-marker{display:none}
#process .short{margin:0 0 var(--space-2)}
#process .long p{margin:0 0 var(--space-2)}
#process .long ul{margin:0 0 var(--space-2) var(--space-6)}

/* ==============================================================
   PROCESS — fix: number only top-level steps; nested lists = bullets
   -------------------------------------------------------------- */

/* 1) Numbered cards only for direct children of the main <ol> */
#process > ol{
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
}

#process > ol > li{
  position: relative;
  padding-left: 3.5rem;             /* space for the badge */
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

#process > ol > li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--brand-600);
  border: 2px solid var(--brand-600);
  background: var(--white);
}

/* 2) Nested lists inside a step: restore normal bullets and reset card styles */
#process > ol > li ul{
  list-style: disc;                  /* bullet points */
  margin: var(--space-2) 0 var(--space-2) var(--space-6);
  padding: 0;
}

#process > ol > li ul li{
  position: static;                  /* remove card positioning */
  padding: 0;                        /* remove left offset */
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#process > ol > li ul li::before{
  content: none;                     /* no number badges on sub-points */
}

/* ===== Consent modal ===== */
.vs-consent{position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(2,6,23,.55); z-index:9999; padding:1rem;}
.vs-consent.is-hidden{display:none;}
.vs-consent__panel{max-width:44rem; width:100%; background:#fff; border-radius:12px;
  padding:1.25rem 1.25rem 1rem; box-shadow:0 12px 40px rgba(2,6,23,.25);}
.vs-consent__box{margin:.75rem 0 1rem; display:grid; gap:.5rem;}
.vs-consent__item{display:flex; gap:.6rem; align-items:flex-start; line-height:1.4;}
.vs-consent__item input{margin-top:.2rem; transform:scale(1.1);}
.vs-consent__actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem;}
.vs-consent__links{font-size:.9rem; opacity:.8; margin:.75rem 0 0;}
/* Button variants reusing site palette */
.btn-secondary{background:#0f1e4d; color:#fff; border-radius:10px; padding:.6rem 1rem; border:0;}
.btn-outline{background:#fff; color:#1E3A8A; border:1px solid #1E3A8A; border-radius:10px; padding:.55rem 1rem;}
/* Body lock when modal shown */
.body-lock{overflow:hidden;}