/*
Theme Name:         alocv
Theme URI:          https://roots.io/sage/
Description:        Sage is a WordPress starter theme.
Version:            9.0.9
Author:             Roots
Author URI:         https://roots.io/
Text Domain:        sage

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

/* ==========================================================================
   ALOC-V Landing Page
   Fonts note: the PSD specifies "Brunson" (display headlines) and
   "Proxima Nova" (body/UI). Both are commercial fonts not available for
   web embedding here, so the closest free equivalents are used instead:
   Anton  -> stands in for Brunson (bold condensed display headlines)
   Poppins -> stands in for Proxima Nova (body copy, buttons, UI text)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --color-orange: #F26819;
  --color-purple-dark: #652F92;
  --color-purple-light: #A6499B;
  --color-purple-heading: #673591;
  --color-gold: #FFC82B;
  --color-white: #FFFFFF;
  --color-text: #1A1A1A;
  --color-footer-purple: #723B9F;

  --font-display: "Anton", sans-serif;
  --font-body: "Poppins", sans-serif;

  --container-max: 1920px;
  --pad-outer: clamp(20px, 6.25vw, 120px);
  --pad-outer-sm: clamp(20px, 4vw, 64px);

  --section-gap: clamp(48px, 6vw, 96px);
}

/* ---------- Reset ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-purple-heading);
  outline-offset: 3px;
}

/* ---------- Shared type ---------- */
.heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  font-weight: 400;
}
.heading--orange { color: var(--color-orange); font-size: 55px; }
.heading--gold { color: var(--color-gold); }
.heading--banner { color: var(--color-white); font-size: 55px; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(20px, 2.5vw, 32px);
  line-height: 1.25;
  margin: 1.4em 0 0.5em;
}
.eyebrow--purple { color: var(--color-purple-heading) !important; }

section p { font-size: clamp(16px, 1.5vw, 24px); }

/* ---------- Buttons ---------- */
.btn-new {
    display: inline-block;
    background: var(--color-orange);
    color: var(--color-white) !important;
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    font-size: 20px;
    padding: 20px 45px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-new:hover, .btn-new:focus-visible { background: var(--color-purple-light); }

/* ---------- Header ---------- */
.site-header {
    background: var(--color-white);
    padding: 5px 20px;
    text-align: center;
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.site-header__logo-link { display: inline-block; }

body.page-id-800 div#header, body.page-id-800 div#footer, body.page-id-800 > header, body.page-id-800 main footer {
    display: none;
}
body.page-id-800 div#header + hr, body.page-id-800 .site-footer + hr, body.page-id-800 footer + hr {
    display: none;
}
body.page-id-800 p:last-child {
    margin-bottom: 0;
}
body.page-id-800 p {
  color: #000000;
}

/* ---------- Hero ---------- */
/* Full-bleed photo with a baked-in left-to-right purple gradient overlay
   (photo visible on the left, fading to solid brand purple on the right
   where the headline sits) — reproduced from the mockup's flattened pixels
   rather than approximated in CSS, so the fade matches exactly. */
.hero {
    position: relative;
    background-size: cover !important;
    background-position: 20% 50% !important;
    background-color: var(--color-purple-light) !important;
    display: flex;
    align-items: center;
    padding-right: 60px;
}
.hero__content {
    width: 60%;
    margin-left: auto;
}
.hero__heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0 0 0.4em;
  line-height: 1.02;
}
.hero__heading-line {
  display: block;
  font-size: 75px;
}
.hero__heading-line--gold { color: var(--color-gold); }
.hero__heading-line--white {
  color: var(--color-white);
  font-size: 75px;
}
.hero__text p {
    color: var(--color-white) !important;
    max-width: 910px;
    font-size: 25px;
    margin-top: 25px;
}

/* ---------- Intro (centered statement) ---------- */
.intro {
    padding: 50px 20px;
    text-align: center;
}
.intro__inner {
  max-width: 1120px;
  margin: 0 auto;
}
.intro__lead p {
    font-size: 24px;
    margin-bottom: 1.6em;
}
.intro__eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-purple-heading) !important;
  font-size: 32px;
  margin: 0 0 0.3em;
}
.intro__eyebrow {
    margin-bottom: 5px;
}
.intro p.intro__eyebrow {
    margin-top: 38px;
}
.intro a.btn-new {
    margin-top: 38px;
}

/* ---------- Split sections (image + text) ---------- */
.split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding: 90px 120px 90px 0;
}
.split--reverse {
    padding: 90px 0 90px 120px;
    justify-content: space-between;
    background: url(/wp-content/uploads/2026/09/AdobeStock_1927202365.jpg);
    background-size: cover;
    background-position: center;
}
.split--reverse .split__content p {
    max-width: 850px;
}
.split__media {
    max-width: 40%;
}
.split__media img {
  width: 100%;
  height: auto;
}
.split__content {
    max-width: calc(60% - 80px);
}
.split__content p.eyebrow.eyebrow--purple {
    font-size: 32px;
}
.split__content p { font-size: 24px; }

.split--pattern-a {
    position: relative;
    justify-content: space-between;
}
.split--pattern-b {
    position: relative;
    justify-content: space-between;
}
.split--pattern-b::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background-image: url(http://vaisense-ai.local/wp-content/uploads/2026/09/AdobeStock_1927202365.jpg);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: -1;
    background-color: #fcfcfc;
    opacity: 0.8;
}
.split--pattern-a .split__media img.split__photo {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.checklist { margin: 0 0 1.4em; }
.checklist li {
    position: relative;
    padding-left: 1.3em;
    font-size: 24px;
    line-height: 1.7;
    list-style: none;
    color: #000000;
}
.checklist li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--color-orange);
  font-weight: 700;
}
.checklist li {
    position: relative;
    font-size: 24px;
    line-height: 1.7;
    list-style: none;
    padding-left: 20px;
    margin-top: 0;
}
.split--pattern-a a.btn-new {
    margin-top: 20px;
}

/* ---------- Standalone text section (no image, textured background) ---------- */
.text-block--pattern {
  position: relative;
  background-image: url('assets/texture-pattern.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--section-gap) var(--pad-outer);
}
.text-block__inner {
  max-width: 900px;
}
.text-block__inner p { font-size: 24px; }

/* ---------- Banner (Veterans) ---------- */
/* Same technique as the hero: a full-bleed photo with the brand gradient
   baked in, fading from solid purple (left, where the text sits) to the
   photo showing through on the right.
   NOTE: assets/veterans-bg.jpg is cropped from the client-provided mockup
   and still carries a visible "Adobe Stock" preview watermark — it is an
   unlicensed placeholder and MUST be swapped for a licensed image before
   this page goes live. */
.banner--gradient {
    position: relative;
    background-size: cover !important;
    background-position: 60% 50% !important;
    background-color: var(--color-purple-dark) !important;
    color: var(--color-white);
}
.banner--gradient a.btn-new {
    margin-top: 20px;
}
.banner--gradient a.btn-new:hover {
    background: #ffffff;
    color: var(--color-orange) !important;
}
.banner__content {
    padding: var(--section-gap) var(--pad-outer);
    max-width: 1420px;
}
.banner__content p {
    max-width: 920px;
    font-size: 24px;
    color: #ffffff !important;
}

/* ---------- FAQ ---------- */
.faq {
  padding: var(--section-gap) var(--pad-outer);
}
.faq__list { max-width: 1400px; }
.faq__list {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3vw, 40px);
    margin: 0 auto;
}
.faq__item { border-bottom: 1px solid #e6e6e6; padding-bottom: clamp(20px, 2.5vw, 32px); }
.faq__item:last-child { border-bottom: 0; }
.faq__question-wrap { margin: 0; }
.faq__question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--color-purple-heading);
  font-size: 28px;
  line-height: 1.3;
}
.faq__icon {
  flex: 0 0 auto;
  width: clamp(20px, 1.9vw, 30px);
  height: auto;
  margin-top: 0.3em;
  stroke: var(--color-orange);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__answer {
  padding-top: clamp(12px, 1.5vw, 20px);
  max-width: 100%
}
.faq__answer p { font-size: 22px; color: var(--color-text); }

footer p {
    color: white !important;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (max-width: 1350px) {
.split {
    padding-right: 20px;
    gap: 0;
}
.split--reverse {
    padding-left: 20px;
    padding-right: 0;
}  
}

@media (max-width: 1024px) {
.hero__content {
    padding-left: 0 !important;
    width: 100%;
}
section.hero {
    padding: 80px 20px;
    background-position: 20% 50%;
}
.split__content {
    max-width: calc(60% - 40px);
}
.banner__content p {
    max-width: 650px;
}
section.faq {
    padding: 60px 20px;
}
.split__content p, .checklist li, .banner__content p, .intro__lead, .hero__text {
    font-size: 20px;
}
.btn-new {
    font-size: 18px;
    padding: 14px 25px;
}
.faq__question {
    font-size: 24px;
    line-height: 1.35;
}
}

@media (max-width: 767px) {
.hero__heading-line, .hero__heading-line--white {
    font-size: 55px;
}
.hero__text p, .intro__lead p {
    font-size: 20px;
}
.intro__eyebrow {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.split__media {
    max-width: 100%;
}
.split__content {
    max-width: 100%;
    margin-top: 30px;
}
.split {
    padding: 60px 20px;
}
.heading--orange {
    font-size: 40px;
}
.split__content p.eyebrow.eyebrow--purple {
    font-size: 28px;
}
.split--reverse {
    flex-direction: column-reverse;
}
.faq__question {
    font-size: 22px;
}
.faq__answer p {
    font-size: 20px;
    line-height: 1.35;
}
}