@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url("https://use.typekit.net/yby4utj.css");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
  display: block
}
body {
  line-height: 1;
    overflow-x: hidden;
}
ol, ul {
  list-style: none
}
blockquote, q {
  quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
*, *::after, *::before {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--offwhite);
  /*added*/ margin: 0px;
  font-size: 16px;
  line-height: 25px;
font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

html, body {
  height: 100%;
  margin: 0;
}

/********colors*********/
.primaryblue {
  color: #007cbf;
}
.primarydarkpurple {
  color: #1f1647;
}

.primarypurple {
  color: #9e28b5;
}
.white {
  color: #ffffff;
}
.light-blue {
  color: #b0d5f2;
}

.light-blue-50 {
  color: #d8eff9;
}


.background-darkpurple{
    background-color: var(--primarypurple);
}

.background-darkpurple{
    background-color: var(--primarydarkpurple);
}

.stroke-white{
stroke:white;
}

.stroke-darkblue{
stroke:#1f1647;
}

.stroke-primarypurple{
stroke:#1f1647;
}


p {
  font-size: 16px;
  line-height: 26px;
  margin: 0px 0px 26px 0px;
}
.nospaceafter{
    margin: 0px 0px 0px 0px;
}

strong {
  font-weight: 700
}
em {
  font-style: italic
}
sub, sup {
  font-size: 65%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-weight: 400
}
sup {
  top: -.5em
}
sub {
  bottom: -.25em
}
.nounderline {
  text-decoration: none !important;
}

ul, li{
    font-family: 'Open Sans', sans-serif;
}

ul.checks {
  margin: 0 0 20px 20px;
  list-style: none
}
ul.checks li {
  margin-bottom: 15px
}
ul.checks li:before {
  content: '✓ ';
  color: #1f1647;
  margin-right: 0px;
  margin-left: -1em
}
ul.checks li:after {
  margin-right: 15px
}
ul.bullets {
  margin: 0 0 26px 20px;
  list-style: none;
font-size: 16px; 
    line-height: 25px;
}
ol.bullets {
  margin: 0 0 26px 20px;
  list-style: decimal;
    font-size: 16px; 
    line-height: 25px;
}
ol.bullets li::marker {
  color: #007CBF
}
ul.bullets li::before {
  content: "•";
  color: #1f1647;
  display: inline-block;
  width: 1em;
  margin-left: -1em
}
ul.bullets ul li::before {
  content: "○";
  color: #1f1647;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 13px
}

.center{
    text-align: center;
}

a.textlink:link, a.textlink:visited {
  color: #1f1647;

}
a.textlink:hover {
  color: #1f1647;
  text-decoration: none
}


a.textlinkPrimary:link, a.textlinkPrimary:visited {
  color: #9E28B5;

}
a.textlinkPrimary:hover {
  color: #1f1647;
  text-decoration: none
}


a.textlinkWhite:link, a.textlinkWhite:visited {
  color: #ffffff;

}
a.textlinkWhite:hover {
  color: #d8eff9;
  text-decoration: none
}

span.nowrap{
    white-space: nowrap;
}

header{
    height: 100px;
    background-color: #1f1647;
    display: flex;
    align-items: center;
    padding: 0px 30px 0px 30px;
    justify-content: space-between;
    gap: 12px;
} 

header img{
    height: 36px;
    width: auto;
    flex-shrink: 0;
}

/* "Medicare Advantage" label — pushed 25px left of the Explore button */
header p{
    font-size: 20px;
    line-height: 20px;
    color: white;
    font-family: "halyard-display", sans-serif;
    font-weight: 500;
    font-style: normal;
    margin: 0 25px 0 auto;   /* auto left margin pushes it right; 25px gap before button */
    text-align: right;
    white-space: nowrap;
}

@media screen and (max-width: 500px) {
    header {
        padding: 0 16px;
        gap: 8px;
    }
    header img {
        height: 24px;   /* never below 20px; 24px gives a comfortable minimum */
    }
    header p {
        font-size: 14px;
        margin-right: 16px;  /* tighter gap on narrow screens */
    }
}

@media screen and (max-width: 375px) {
    header {
        padding: 0 10px;
        gap: 6px;
    }
    header img {
        height: 20px;   /* hard minimum */
    }
    header p {
        font-size: 13px;
        margin-right: 10px;
    }
}


/*navigation*/
:root {
    --primarypurple: #9e28b5;
--primarydarkpurple: #1f1647; 
    --offwhite: #e8e7d9;
  --btn-bg:   #e2e667;
  --btn-text: #000000;
  --menu-bg:  #e2e667;
    --white: #ffffff;
  --ease:     cubic-bezier(.2,.8,.2,1);
}

/* ── NAV WRAPPER ─────────────────────────────────────────── */
.nav-wrapper {
  position: relative;
  z-index: 100;
}
.drawer-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border: 2px solid transparent;   /* reserves space — animates to white on mobile open */
  border-radius: .75rem;
  background: var(--btn-bg);
  color: var(--btn-text);
  font: 700 14px/1 "Open Sans", Arial, sans-serif;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-radius .4s var(--ease), border-color .4s var(--ease);
  position: relative;
  z-index: 101;
  white-space: nowrap;
}
.drawer-toggle:active { transform: translateY(1px); }

/* Open state — squares off the bottom so it merges with the dropdown */
.drawer-toggle.is-open {
  border-radius: .75rem .75rem 0 0;
  background: var(--menu-bg);
  color: #1f1647;
  border-color: rgba(33,32,65,.15);
  border-bottom-color: transparent;
}

/* ── BUTTON ICON (chevron ↔ X) ───────────────────────────── */
.drawer-toggle__icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.drawer-toggle__icon::before,
.drawer-toggle__icon::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 9px;
  background: currentColor;
  border-radius: 2px;
  top: 50%;
  transition: transform .4s var(--ease), left .4s var(--ease), width .4s var(--ease);
}
/* Closed — downward chevron */
.drawer-toggle__icon::before { left: 2px;  transform: translateY(-50%) rotate(45deg);  }
.drawer-toggle__icon::after  { left: 8px;  transform: translateY(-50%) rotate(-45deg); }
/* Open — X */
.drawer-toggle.is-open .drawer-toggle__icon::before { left: 4px; width: 11px; transform: translateY(-50%) rotate(45deg);  }
.drawer-toggle.is-open .drawer-toggle__icon::after  { left: 4px; width: 11px; transform: translateY(-50%) rotate(-45deg); }

/* ── DROPDOWN (all breakpoints) ──────────────────────────── */
.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 300px;
  max-width: calc(100vw - 40px);   /* never overflow a narrow phone */
  background: var(--menu-bg);
  border-radius: 0 0 .75rem .75rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: max-height .35s var(--ease), opacity .25s var(--ease), visibility 0s .35s;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.nav-dropdown.is-open {
  max-height: 1200px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: max-height .35s var(--ease), opacity .25s var(--ease), visibility 0s 0s;
}
/* the dropdown can get taller than a phone screen — let it scroll */
@media (max-width: 768px) {
  .nav-dropdown.is-open {
    max-height: min(1200px, calc(100vh - 120px));
    overflow-y: auto;
  }
}

/* ── NAV LIST ────────────────────────────────────────────── */
.side-drawer__nav {
  list-style: none;
  padding: .5rem 0 .75rem 0;
  margin: 0;
}

/* Top-level items with children — use <button> not <a> */
.side-drawer__nav li + li {
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Shared link / button base style */
.side-drawer__nav .nav-item-btn,
.side-drawer__nav li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #1f1647;
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  padding: .7rem 1.1rem;
  font: 500 14px/1.3 "Open Sans", Arial, sans-serif;
  cursor: pointer;
  transition: background .15s ease, padding-left .15s ease;
}
.side-drawer__nav .nav-item-btn:hover,
.side-drawer__nav li > a:hover {
  background: rgba(33,32,65,.08);
  padding-left: 1.4rem;
}

/* ── CHEVRON on top-level links (right-facing →) ─────────── */
.side-drawer__nav li > a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(33,32,65,.35);
  border-top: 2px solid rgba(33,32,65,.35);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: .75rem;
  transition: border-color .15s ease, transform .15s ease;
}
.side-drawer__nav li > a:hover::after {
  border-color: #1f1647;
  transform: rotate(45deg) translate(2px, -2px);
}

/* ── SUBMENU TOGGLE BUTTON chevron (rotates ↓ when open) ─── */
.nav-item-btn .sub-chevron {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(33,32,65,.35);
  border-top: 2px solid rgba(33,32,65,.35);
  transform: rotate(135deg);
  flex-shrink: 0;
  transition: transform .25s var(--ease), border-color .15s ease;
}
.nav-item-btn:hover .sub-chevron {
  border-color: #1f1647;
}
/* When parent is open, rotate chevron to point up */
li.has-submenu.is-open > .nav-item-btn .sub-chevron {
  transform: rotate(-45deg);
}

/* ── SUBMENU (accordion) ─────────────────────────────────── */
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease), opacity .2s ease;
  opacity: 0;
  background: rgba(33,32,65,.05);
}
li.has-submenu.is-open > .submenu {
  max-height: 600px;
  opacity: 1;
}
.submenu li {
  border-top: 1px solid rgba(33,32,65,.08);
}
.submenu li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(33,32,65,.75);
  text-decoration: none;
  padding: .6rem 1.1rem .6rem 2rem;
  font: 400 13px/1.3 "Open Sans", Arial, sans-serif;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.submenu li a:hover {
  background: rgba(33,32,65,.07);
  color: #1f1647;
  padding-left: 2.3rem;
}
/* Small right chevron on sub-items */
.submenu li a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(33,32,65,.35);
  border-top: 1.5px solid rgba(33,32,65,.35);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: .5rem;
  transition: border-color .15s ease, transform .15s ease;
}
.submenu li a:hover::after {
  border-color: rgba(33,32,65,.8);
  transform: rotate(45deg) translate(2px,-2px);
}

/* ── ACTIVE STATE (current page) ────────────────────────── */
.side-drawer__nav li.is-active > a,
.submenu li.is-active > a {
  background: rgba(33,32,65,.08);
  color: #1f1647;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #1f1647;
}

/* Superscripts in nav links (e.g. TRICARE for Life®) sit tight to the text */
.side-drawer__nav li > a sup {
  font-size: 55%;
  top: -.6em;
  margin-left: 1px;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
}

/*end navigation*/


.container {
  min-height: 100vh;          /* Full viewport height */
 /* display: flex;
  flex-direction: column;*/
}

/*main {
  flex: 1;                    /* Takes up remaining space */
  
/*}*/


.hero-home {
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;   /* ✅ THIS fixes vertical alignment */
  justify-content: center;
border-top:5px solid #e2e667;
}


.hero-home-content {
  max-width: 950px;
}


.hero-home-content h1{
  font-size: clamp(25px, 5vw, 80px);
    line-height: 1.1;
  margin: 0 0 25px 0;
color: white;
font-family: "halyard-display", sans-serif;
font-weight: 500;
font-style: normal;
}

.hero-home-content h2{
  font-size: clamp(16px, 2.0vw, 22px);
    line-height: 1.4;
color: white;
font-family: "Open-Sans", sans-serif;
font-weight: 700;
font-style: normal;    
margin: 0px 0px 20px 0px;
}

.hero-support-background-color{
    background-color: #1f1647;
     padding: 30px 0; 
    border-top: 5px solid #e2e667;
}

.hero-support-background-gradient{
background: linear-gradient(90deg, rgba(33, 32, 65, 1) 0%, rgba(33, 32, 65, 1) 25%, rgba(176, 213, 242, 1) 100%);
    padding: 30px;
    min-height: 300px;
     display: flex;
  align-items: center;     /* vertical */
  justify-content: left; /* horizontal */

}

.hero-support-gradient{
background: linear-gradient(90deg, rgba(33, 32, 65, 1) 0%, rgba(33, 32, 65, 1) 25%, rgba(176, 213, 242, 1) 100%);
     padding: 30px 0; 
    margin:10px 0px 0px 0px; 
}

.hero-support-content {
max-width: 1500px;
    width: 100%;
  margin: 0 auto; 
  display: flex;
  align-items: center;
    justify-content: space-between;
  padding: 0 30px 0 30px; 
  color: #fff;
  max-height: none;   /* was 350px — clipped tall copy/video and let it spill under the next section */
  gap: 48px;          /* guaranteed clear space between copy and video/image */

}

.hero-support-content.reverse {
  flex-direction: row-reverse;
}

.hero-support-text {
  flex: 0 0 50%;
  padding: 30px 0;
}

.hero-support-text h1, .hero-support-text-only h1{
    font-size: 44px;
line-height: 54px;
color: white;
font-family: "halyard-display", sans-serif;
font-weight: 500;
font-style: normal;
margin: 0px 0px 20px 0px; 
}

.hero-support-text h2, .hero-support-text-only h2{
    font-size: 20px;
line-height: 30px;
    font-weight: 700;
}  

.hero-support-text sup{
  font-size: 40%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-weight: 400;
    top: -0.8em
}

.hero-support-text p{
    margin: 0px 0px 20px 0px;
}

.hero-support-text p.last{
    margin: 0px 0px 0px 0px; 
}


.hero-support-images{
  flex: 0 0 45%;
  max-width: 600px;
  min-height: 400px;
  border-radius: 30px;
  /*margin-left: 30px;*/
  background-position: 30%;
  transform: translateY(60px);
    
}

.hero-support-images.small{
  flex: 1;
  max-width: 400px;
  min-height: 300px;
  border-radius: 30px;
  background-position: 30%;
  transform: translateY(60px);
}

.basic-flex{
    display: flex; 
    flex-direction: column;
}

.basic-flex .item{
display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 25px;
}
.basic-flex .item .icon{
    flex: 0 0 80px; 
    height: 80px;
}

.basic-flex .item .text{
    flex: 0 0 70%; 
    padding: 0px 0px 0px 15px
}

.basic-flex .item .text p{
    margin: 0px; 
}


.basic-flex-row{
    display: flex; 
    justify-content: space-between;
flex-wrap: wrap;
    background-color: var(--white);
    padding: 25px;
    border-radius: 30px;
    align-items: center;
    align-content: center;
    text-align: center;
    gap: 50px;
    flex-wrap: wrap;
}


.basic-flex-row .child {
    flex: 1;
    text-align: left;
}

.basic-flex-row div.item{
display: flex;
  flex-direction: column; /* Stacks the icon on top of the text */
  align-items: center; /* Centers the icon and text horizontally */
}


.basic-flex-row div.icon img{
    height: 100px;
}


section.callout-lightblue, section.callout-lower{
    padding: 75px; 
    max-width:1600px; 
    margin: 0 auto;
}

.lower-grid{
    display: grid; 
    grid-template-columns: 40% 60%;
    gap: 25px;
}

.lower-grid div.callout{
    padding: 30px; background-color: var(--white); border-radius: 20px;
}


/*hero background images*/
.home-vet {
  background: var(--primarydarkpurple);
  position: relative;
  overflow: hidden;
}

/* Image on the section itself (so it has full hero height) but right edge
   is capped to never exceed the 1500px content column.
   calc((100% - 1500px) / 2) is the gutter on each side at wide viewports — 
   we offset right by that amount so the image aligns with the content edge. */
.home-vet::after {
  content: "";
  position: absolute;
  right: max(0px, calc((100% - 1500px) / 2));  /* aligns to 1500px column edge */
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/hero-hs-branded-home.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 100%;
  pointer-events: none;
}

.hero-home-inner {
  width: 100%;
  max-width: 1500px;
  padding: 0 20px;
  position: relative;
  z-index: 1;           /* text stays above the ::after image */
}

/* ── HERO TAG — slides in from the right, sits bottom-left, bleeds right ── */
@keyframes tagSlideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.hero-tag {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 2;
  /* pill shape — left side bleeds off page */
  background: #ecd4f0;
  border-radius: 40px 0 0 40px;  /* rounded left, flush right edge */
  padding: 10px 30px 10px 40px;  /* generous left padding for the bleed side */
  max-width: 75%;
  /* animation */
  animation: tagSlideIn .7s cubic-bezier(.22,.68,0,1.2) .4s both;
}

.hero-tag span {
  font-size: 18px;
  line-height: 1.3;
  color: #000000;
  font-family: "halyard-display", sans-serif;
  font-weight: 500;

}

/* ── HERO TAG responsive ── */
@media screen and (max-width: 920px) {
  .hero-tag {
    padding: 12px 24px 12px 40px;
    max-width: 85%;
  }
  .hero-tag span {
    font-size: 16px;
  }
}

@media screen and (max-width: 500px) {
  .hero-tag {
    padding: 10px 20px 10px 30px;
    max-width: 90%;
  }
  .hero-tag span {
    font-size: 15px;
    white-space: normal;
  }
}
/* ── END HERO TAG ─────────────────────────────────────────── */

.todays-veterans{
    background-image:url("../assets/images/hero-todays-veterans-vid.jpg");
    background-size: cover;
}

.va-health-care{
    background-image:url("../assets/images/hero-va-health-care-vid.jpg");
    background-size: cover;
}

.tricare-forlife{
    background-image:url("../assets/images/hero-tricare-for-life-vid.jpg");
    background-size: cover;
}

.champva{
    background-image:url("../assets/images/hero-champva-vid.jpg");
    background-size: cover;
}

.supplemental-health{
    background-image:url("../assets/images/hero-supplemental-health-life-benefits-vid.jpg");
    background-size: cover;
}

.understanding-medicare{
    background-image:url("../assets/images/hero-understanding-medicare-vid.jpg");
    background-size: cover;
}

.medicare-options{
    background-image:url("../assets/images/hero-medicare-options-vid.jpg");
    background-size: cover;
}

.help-is-here{
    background-image:url("../assets/images/hero-help-is-here.jpg");
    background-size: cover;
}

/*end hero background images*/


/* ── HERO BRAND ART (transparent squiggle PNGs) ─────────────
   Two treatments:
   A) .hero-with-art + .hero-art  → art sits BESIDE the text as a
      flex column (CHAMPVA: art to the right of the copy).
   B) .hero-art-behind            → art sits BEHIND the copy as a
      pseudo-element layer (Help is here: art behind text, left).
   Both scale fluidly and reflow on small screens.
   ───────────────────────────────────────────────────────── */

/* ---------- A) ART BESIDE THE TEXT ---------- */
.hero-with-art {
  flex-wrap: wrap;
  align-items: center;       /* copy sits centred in the band */
  max-height: none;          /* release the 350px cap so art can breathe */
  gap: 20px;
}

/* kill the band's vertical padding so the art can touch the yellow rule
   above and the section edge below — the copy keeps its own 30px inset.
   position:relative anchors the art to the band's own edges, so it can run
   flush to the browser's right edge instead of stopping at the 1500px column */
.hero-support-background-color.hero-art-bleed {
  padding: 0;
  position: relative;
}

.hero-art-bleed .hero-support-content {
  min-height: 300px;
}

/* text column keeps its own width when paired with art */
.hero-with-art .hero-support-text-only,
.hero-with-art .hero-support-text {
  flex: 1 1 480px;
  width: auto;
  max-width: 760px;
  padding: 30px 0;
}

/* The art keeps its natural size at every width. Instead of shrinking or
   getting cropped, it slides out past the right edge of the screen.

   --art-w   the rendered width of the art (band height x source ratio).
             1781:780 source at a 300px band = ~685px.
   --copy-w  the narrowest the headline column may get before the art
             starts moving out of its way.

   right: min(0px, ...) pins the art flush right on wide screens, then goes
   negative once the viewport can't hold copy + art side by side, pushing
   the art off-screen a pixel at a time. */
.hero-with-art {
  --art-w: 685px;
  --copy-w: 480px;
  --hero-gutter: 30px;
}
.hero-art {
  position: absolute;   /* pinned to the hero band, not the 1500px column */
  top: 0;
  right: min(0px, calc(100vw - var(--copy-w) - var(--art-w) - 60px));
  bottom: 0;
  width: var(--art-w);
  max-width: 890px;     /* half the 2x source — never upscale */
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 100%;   /* locked to band height — never scales down */
  pointer-events: none;
  z-index: 0;
}

/* the art now extends past the viewport, so clip it to kill the horizontal
   scrollbar. overflow-x: clip (not hidden) leaves the vertical axis alone
   and doesn't create a scroll container. */
.hero-support-background-color.hero-art-bleed {
  overflow-x: hidden;   /* fallback for Safari < 16 */
  overflow-x: clip;
}

/* copy stays clear of the art and above it in the stack */
.hero-with-art .hero-support-text-only,
.hero-with-art .hero-support-text {
  position: relative;
  z-index: 1;
}

/* drop the trailing margin so the copy optically centres in the band */
.hero-with-art .hero-support-text-only > *:last-child,
.hero-with-art .hero-support-text > *:last-child {
  margin-bottom: 0;
}

/* source PNG is 2x (1781x780) — cap at 1x so it never upscales */
.hero-art-champva {
  background-image: url("../assets/images/hero-spring-champva.png");
  max-width: 890px;
}

/* ---------- B) ART BEHIND THE TEXT ---------- */
/* NOTE: no overflow:hidden here — .hero-support-images uses
   translateY(60px) to hang below the hero, and clipping would kill it.
   A background never paints outside its own box, so it isn't needed. */
.hero-art-behind {
  position: relative;
}

.hero-art-behind::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* flush to the browser's left edge */
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 100%;   /* fill hero height, bleed right */
  pointer-events: none;
  z-index: 0;
}

/* keep the copy above the art layer */
.hero-art-behind .hero-support-content {
  position: relative;
  z-index: 1;
}

.hero-art-behind--help::before {
  background-image: url("../assets/images/hero-spring-help-is-here.png");
  /* dial this down if the art competes with the headline */
  opacity: 1;
}

/* ---------- HERO ART RESPONSIVE ---------- */
/* The art no longer restacks below the copy on tablet — it stays pinned
   to the right of the band at full size and slides off-screen instead
   (see the right: min(...) on .hero-art above). The copy just takes back
   the room the art vacates. */
@media screen and (max-width: 1200px) {
  .hero-with-art { --hero-gutter: 20px; }
}

@media screen and (max-width: 1100px) {
  .hero-support-content.hero-with-art .hero-support-text-only,
  .hero-support-content.hero-with-art .hero-support-text {
    flex: 1 1 100%;
    max-width: none;
  }
}

@media screen and (max-width: 920px) {
  .hero-art-behind::before {
    left: 0;
    background-size: 150% auto;
  }
}

@media screen and (max-width: 768px) {
  /* .hero-support-content.hero-with-art keeps specificity above the
     generic .hero-support-content overrides further down this file */
  .hero-support-content.hero-with-art {
    gap: 0;
    padding: 20px 25px;
  }
  .hero-support-content.hero-with-art .hero-support-text-only,
  .hero-support-content.hero-with-art .hero-support-text {
    flex: 1 1 100%;
    min-width: 0;
    padding: 20px 0;
  }
  /* let the copy squeeze further so the art keeps sliding rather than
     colliding with the headline */
  .hero-support-content.hero-with-art {
    --copy-w: 300px;
    --hero-gutter: 25px;
  }
  .hero-art-behind::before {
    background-size: 180% auto;
    background-position: left top;
  }
}

/* Below 675 the art is too small to read and just eats vertical space —
   drop it and let the headline own the band, matching how
   .hero-support-images behaves at this breakpoint elsewhere. */
@media screen and (max-width: 675px) {
  .hero-support-content.hero-with-art .hero-art {
    display: none;
  }
  .hero-art-bleed .hero-support-content {
    min-height: 0;
  }
  .hero-support-content.hero-with-art {
    padding: 10px 25px;
  }
}

@media screen and (max-width: 500px) {
  .hero-art-behind::before {
    background-size: 200% auto;
  }
}
/* ── END HERO BRAND ART ───────────────────────────────────── */

h2{
font-size: 22px;
line-height: 30px;
color: white;
font-family: "Open-Sans", sans-serif;
font-weight: 600;
font-style: normal;    
margin: 0px 0px 20px 0px;
}

h3{
 font-size: 32px;
line-height: 42px;
font-family: "halyard-display", sans-serif;
font-weight: 500;
font-style: normal; 
margin: 0px 0px 15px 0px;    
}

.callout-container{
    padding: 75px; 
    max-width:1600px; 
    margin: 0 auto;
}

.content-container-950{
 
    max-width:950px; 

}


.callout-home{
    background-color: #ffffff;
    border-radius: 30px;
    display: flex;
    padding: 30px;
gap:24px;
    align-items: center;

}
.callout-home .item-icon{
 flex: 0 0 100px; /* fixed width */
}

.callout-home .column-center{
 flex: 1; /* each gets 50% of remaining space */

}

.callout-home .column-right{
 flex: 2.0;

}




.callout-support{
    display: flex;
   gap: 12px;
 flex-wrap: wrap;
      justify-content: center; /* or flex-start if you want left aligned */
}




/*flipping cards*/
/* Layout for a row of 4 */
.callout-grid{
  display: flex;
  gap: 16px;
}
.flip-card{
  width: 24%;
  perspective: 1000px;
}

/* the rotating element */
.flip-card-inner{
  position: relative;
  width: 100%;
  min-height: 275px;            /* make sure both sides fit */
  transition: transform .65s ease;
  transform-style: preserve-3d;
}

/* base style */
.callout-item{
 /* background-color: #b0d5f2;*/
  border-radius: 30px;
  color: white;
  text-align: center;
  width: 100%;                  /* important now that wrapper controls sizing */
}

/* front/back panels */
.flip-card-front,
.flip-card-back{
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari */
  display: flex;
  flex-direction: column;
  justify-content: center;
      padding:20px;
}

/* back */
.flip-card-back{
  transform: rotateY(180deg);
  background-color: white;     /* example back color */
  color: black;
    border: 2px solid #1f1647;
}

.flip-card-back h3{
    color: var(--primarypurple);
}

/* Hover color change (front side) */
.flip-card:hover .flip-card-front{
  background-color: var(--primarypurple);
  color: #ffffff;
}
.flip-card:hover .flip-card-front .primarypurple{
  color: #ff6b6b;             
}

/* Click flip state */
.flip-card.is-flipped .flip-card-inner{
  transform: rotateY(180deg);
}

/* Optional: make it obvious it’s interactive */
.flip-card{ cursor: pointer; }


.flip-card-front h3.large{
    font-size: 44px
}

.flip-card-front h3.smaller{
    font-size: 26px;
    line-height: 32px;
}

.flip-card-back h3{
    margin-top: 10px;
}

.flip-card-back h3.smaller{
    font-size: 18px;
    line-height: 24px;
}

/*end flipping cards*/

/* ── FLIP CARD THEME: RED ────────────────────────────────────────────────────
   Add class="callout-support theme-primarypurple" on the callout-support section.
   Front: #1f1647 bg, white text. Hover: #1f1647 bg, white text.
   Back: white bg, #1f1647 border (unchanged from default).
──────────────────────────────────────────────────────────────────────────── */
.callout-support.theme-primarypurple .flip-card-front {
  background-color: var(--primarypurple);
  color: #ffffff;
}
.callout-support.theme-primarypurple .flip-card-front h3,
.callout-support.theme-primarypurple .flip-card-front p,
.callout-support.theme-primarypurple .flip-card-front strong {
  color: #ffffff;
}
.callout-support.theme-primarypurple .flip-card:hover .flip-card-front {
  background-color: #1f1647;
  color: #ffffff;
}
.callout-support.theme-primarypurple .flip-card:hover .flip-card-front h3,
.callout-support.theme-primarypurple .flip-card:hover .flip-card-front .primarypurple {
  color: #ffffff;
}

/* ── FLIP CARD THEME: NAVY ───────────────────────────────────────────────────
   Add class="callout-support theme-navy" on the callout-support section.
   Front: #1f1647 bg, white text. Hover: #b0d5f2 bg, #1f1647 text.
   Back: white bg, #1f1647 border (same as all other themes).
──────────────────────────────────────────────────────────────────────────── */
.callout-support.theme-navy .flip-card-front {
  background-color: #1f1647;
  color: #ffffff;
}
.callout-support.theme-navy .flip-card-front h3,
.callout-support.theme-navy .flip-card-front p,
.callout-support.theme-navy .flip-card-front strong {
  color: #ffffff;
}
.callout-support.theme-navy .flip-card:hover .flip-card-front {
  background-color: var(--primarypurple);
  color: #1f1647;
}
.callout-support.theme-navy .flip-card:hover .flip-card-front h3,
.callout-support.theme-navy .flip-card:hover .flip-card-front p,
.callout-support.theme-navy .flip-card:hover .flip-card-front strong,
.callout-support.theme-navy .flip-card:hover .flip-card-front .primarypurple,
.callout-support.theme-navy .flip-card:hover .flip-card-front .white {
  color: white;
}

/* ── WIGGLE HINT ANIMATION ───────────────────────────────────────────────────
   Plays once on load, staggered per card, to signal the cards are clickable.
   Applied via JS to .flip-card elements that haven't been flipped yet.
──────────────────────────────────────────────────────────────────────────── */
@keyframes card-wiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-3deg); }
  40%  { transform: rotate(3deg); }
  60%  { transform: rotate(-2deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.flip-card.hint-wiggle {
  animation: card-wiggle 0.55s ease-in-out;
}


/*expanding buttons */
.faq-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin: 50px 0px 0px 0px;
}

.faq-card{
  flex:1 1 220px;
  flex-wrap: wrap;
  border-radius:10px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 0fr; /* closed */
  transition:
    grid-template-rows 0.35s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Trigger button sits inside card */
.faq-trigger{
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  padding:16px 16px 6px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.faq-trigger:focus-visible{
  outline:3px solid #2b6cff;
  outline-offset:2px;
  border-radius:8px;
}

h3.faq-title{
  align-self:center;
  font-size: 22px;
  line-height: 30px;
  font-family: "halyard-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  margin: 0px 0px 15px 0px;
}

/* Panel — the expanding 2nd grid row */
.faq-panel{
  overflow:hidden;
  opacity:0;
  transform:translateY(-2px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}

/* OPEN state — shared mechanics */
.faq-card.is-open{
  grid-template-rows:auto 1fr;
}
.faq-card.is-open .faq-panel{
  opacity:1;
  transform:translateY(0);
    padding: 15px;
}

/* Chevron base styles */
.faq-chevron{
  align-self:center;
  line-height:1;
}
.chev{
  display:block;
}
.chev path{
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition: d 0.28s ease;
}

/* Chevron morph: closed V → open ^ */
.faq-card.is-open .chev-left{ d: path("M5 15 L12 8"); }
.faq-card.is-open .chev-right{ d: path("M19 15 L12 8"); }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .chev path{ transition: none; }
}


/* ══════════════════════════════════════════════════════════
   THEME: DARK  (va-health-care.html)
   faq-card resting bg: #1f1647  border: #1f1647
   title: #b0d5f2   panel text: white   chevron: white
   Add class="faq-row theme-dark" to the faq-row div
   ══════════════════════════════════════════════════════════ */
.theme-dark .faq-card{
  background-color: #1f1647;
  border: 1px solid #1f1647;
}
.theme-dark .faq-card:hover{
  background-color: #2e2d5a;
  border-color: #b0d5f2;
}
.theme-dark h3.faq-title{
  color: var(--white);
}
.theme-dark .faq-panel p,
.theme-dark .faq-panel ul{
  color: #ffffff;
}
.theme-dark .chev path{
  stroke: #e2e667;
}
.theme-dark .faq-card.is-open{
  background-color: #1f1647;
  border-color: #b0d5f2;
}


/* ══════════════════════════════════════════════════════════
   THEME: LIGHT  (what-is-tricare.html)
   faq-card resting bg: #b0d5f2  border: #b0d5f2
   title: #1f1647   panel text: #1f1647   chevron: #1f1647
   Add class="faq-row theme-light" to the faq-row div
   ══════════════════════════════════════════════════════════ */
.theme-light .faq-card{
  background-color: #9e28b5;
  border: 1px solid #1f1647;
}
.theme-light .faq-card:hover{
  background-color: #1f1647;
  border-color: #9e28b5;
}
.theme-light h3.faq-title{
  color: var(--white);
}
.theme-light .faq-panel p,
.theme-light .faq-panel ul{
  color: var(--white);
}

.theme-light .faq-panel ul{
    font-size: 16px;
    line-height: 26px;
    list-style: disc;
    margin: 0px 0px 0px 15px;
}

.theme-light .chev path{
  stroke: #e2e667;
}
.theme-light .faq-card.is-open{
  background-color: #9e28b5;
  border-color: #1f1647;
}

/*end expanding links*/


/* ── ACCORDION ───────────────────────────────────────────────────────────────
   Structure:
   <div class="acc-section theme-light | theme-dark">
     <div class="acc-item">
       <button class="acc-trigger">
         <span class="acc-trigger-label">Title</span>
         <span class="acc-chevron"><svg class="chev">...</svg></span>
       </button>
       <div class="acc-body">
         <div class="acc-inner"><div class="acc-content">...</div></div>
       </div>
     </div>
   </div>
──────────────────────────────────────────────────────────────────────────── */

.acc-section {
max-width: 950px;
}

.acc-item {
  border-bottom: 1px solid rgba(33, 32, 65, 0.15);
}
.acc-item:first-child {
  border-top: 1px solid rgba(33, 32, 65, 0.15);
}

/* Trigger row — full width, label left, chevron right */
.acc-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  text-align: left;
  gap: 1rem;
}

.acc-trigger-label {
  font-size: 18px;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  line-height: 1.3;
  color: #1f1647;
}

/* Chevron — rotates 180° when open */
.acc-chevron {
  flex-shrink: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: transform 0.32s cubic-bezier(.4, 0, .2, 1);
}
.acc-item.is-open .acc-chevron {
  transform: rotate(180deg);
}

/* Reuse the same chev SVG path styles as faq-card */
.acc-chevron .chev path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.28s ease;
}

/* Body expands via grid trick — same technique as .faq-card */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(.4, 0, .2, 1);
}
.acc-item.is-open .acc-body {
  grid-template-rows: 1fr;
}

/* acc-inner must have overflow:hidden for the 0fr collapse to work */
.acc-inner {
  overflow: hidden;
}

.acc-content {
  padding: 4px 0 20px 0;
  font-size: 16px;
  line-height: 26px;
  font-family: "Open Sans", sans-serif;
}
.acc-content p {
  margin: 0 0 16px 0;
}
.acc-content p:last-child {
  margin-bottom: 0;
}
.acc-content ul, .acc-content ol {
  margin: 0 0 16px 20px;
  font-size: 16px;
  line-height: 26px;
}

/* ── theme-light: dark navy text, primarypurple chevron ── */
.acc-section.theme-light .acc-item {
  border-color: rgba(33, 32, 65, 0.15);
}
.acc-section.theme-light .acc-trigger-label {
  color: #1f1647;
}
.acc-section.theme-light .acc-chevron .chev path {
  stroke: var(--primarypurple);
}
.acc-section.theme-light .acc-content {
  color: #1f1647;
}

/* ── theme-dark: light blue title, white chevron + content ── */
.acc-section.theme-dark .acc-item {
  border-color: rgba(176, 213, 242, 0.3);
}
.acc-section.theme-dark .acc-trigger-label {
  color: #b0d5f2;
}
.acc-section.theme-dark .acc-chevron .chev path {
  stroke: #ffffff;
}
.acc-section.theme-dark .acc-content {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .acc-chevron { transition: none; }
  .acc-body { transition: none; }
  .acc-chevron .chev path { transition: none; }
}

/*end accordion*/


/* content slider */
.slider-container{
    width: 100%;
    height: auto;
    background-color: var(--white);
    padding: 20px 20px 20px 20px;
}

.content-slider{
  position: relative;
  max-width: 1600px;
  margin: 30px auto;
  padding: 0 56px; /* space for side chevrons */
 font-family: "Open-Sans", sans-serif;
}

/* NAV BUTTONS */
.slider-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
    border: none;
  /*border-radius: 999px;
  border: 1px solid #d7dbe2;*/
  background-color: rgba(255, 255, 255, 0.0);
  cursor: pointer !important;
  display:grid;
  place-items:center;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  z-index: 3;
}

.slider-nav:hover{
 /*background:#e6eefc;*/
  /*box-shadow: 0 8px 18px rgba(0,0,0,.08);*/
}

.slider-nav:focus-visible{
 /* outline: 3px solid #2b6cff;
  outline-offset: 2px;*/
}

.slider-nav.prev{ left: 6px; }
.slider-nav.next{ right: 6px; }

/* chevron icon styling */
.nav-icon path{
  fill:none;
  stroke:#1f1647;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nav-icon path:hover{
  fill:none;
  stroke:#1f1647;
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* VIEWPORT + TRACK */
.slider-viewport{
  overflow:hidden;


}

/* Track slides left/right with transform (this animates) */
.slider-track{
  display:flex;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

/* Each slide takes full viewport width */
.slide{
  min-width: 100%;
}

/* Slide contents: image left, text right */
.slide-inner{
  display:flex;
  gap: 18px;
  padding: 18px;
  align-items: stretch;
}

.slide-media{
  flex: 0 0 38%;
  max-width: 370px;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

.slide-media img{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.slide-copy{
  flex: 1;
  padding: 8px 6px;
}

/* Slides with no image — copy takes full width */
.slide-inner.no-image .slide-copy {
  flex: 1 1 100%;
}

/* Slides with image on the right — reverses the flex order visually */
.slide-inner.image-right {
  flex-direction: row-reverse;
}
.slide-inner.image-right .slide-media {
  margin-left: 0;
}


.slide-copy-950{
    max-width: 1100px;
}

.slide-copy-items{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.slide-copy-items div{
flex: 1 1 180px;
}

h3.faq-title{
 font-size: 20px;
  line-height: 30px;
    margin: 0
}

.slide-copy h3{
  margin: 0 0 25px 0px;
  font-size: 32px;
  line-height: 48px;
}

.slide-copy strong{
    font-weight: 700;
    font-size: 17px;
}

.slide-copy p{
  margin: 0 0px 25px 0px;
font-size: 15px;    
  line-height: 24px;
    font-family: 'Open Sans';
    font-weight: 400;
}

/* DOTS */
.slider-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  padding: 14px 0 0;
}

.dot{
  width: 14px;
  height: 14px;
  border-radius:50%;
  border: 1px solid #9aa3b2;
  background: transparent;
  cursor:pointer;
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}

.dot:hover{
  transform: scale(1.15);
  border-color:#2b6cff;
}

.dot[aria-current="true"]{
  background:#1f1647;
  border-color:#2b6cff;
}

/* A11y helper */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Mobile stacking */
@media (max-width: 860px){
  .content-slider{ padding: 0 50px; }
  .slide-inner{ flex-direction:column; }
  .slide-media{ flex-basis:auto; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .slider-track{ transition: none; }
  .slider-nav, .dot{ transition:none; }
}



/* end content slider */





/* --- FOOTER --- */

/* Footer geometry mirrors the page content column:
   .callout-container / .callout-lower = max-width 1600px, 75px gutter.
   The outer band is full-bleed; .preFootercontent is the aligned
   inner column, and the legal copy is capped at 950px for readability. */

.preFooter {
  width: 100%;
  position: relative;
  padding: 0;
}

footer {
  background: #1f1647;
  color: #fff;
}

.footerContainer{
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 75px;
}

.preFootercontent {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 75px;
  text-align: left;
  box-sizing: border-box;
}

/* keep the fine print readable — left aligned under the content column */
.preFootercontent > p,
.preFootercontent > ul,
.preFootercontent > ol {
  max-width: 950px;
}

/* .preFooter sits directly above the footer band — trim its bottom
   padding so the two blocks read as one aligned stack */
.preFooter > .preFootercontent {
  padding-top: 40px;
  padding-bottom: 40px;
}
.preFootercontent p, .preFootercontent ul, .preFootercontent ol {
  font-size: 12px;
  line-height: 18px;
  margin: 0px 0px 5px 0px;
}
footer p {
  font-size: 12px;
  line-height: 18px;
  margin: 0px 0px 5px 0px;
}
footer p.tagline {
  font-size: 13px;
  line-height: 17px;
  color: #fff;
  margin: 0 0 10px 0
}
footer p.tagline span.small {
  font-size: 10px;
  line-height: 14px;
  color: #fff;
  margin: 0 0 10px 0
}
footer a:link, footer a:visited {
  color: #fff;
}
footer a:hover {
  color: #fff;
  text-decoration: none
}
footer a.web:link, footer a.web:visited {
  color: #fff;
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  text-decoration: none
}
hr.one {
  border: 0;
  height: 1px;
  background: #fff;
  margin: 10px 0 10px 0
}
hr.two {
  border: 0;
  height: 1px;
  background: #fff;
  margin: 10px 0 15px 0
}

a.footerlink:link {
  color: #fff;
  font-weight: 700
}
a.footerlink:visited {
  color: #fff
}
a.footerlink:hover {
  color: #fff;
  text-decoration: none
}
a.footerlink:active {
  color: #fff
}


/* Popup for last page - Overlay background */
.popup-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* Popup box */
.popup-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  width: 420px;
  max-width: 90vw;
    border: 1px solid #1f1647;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
}

/* Close button (X) */
.close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  font-size: 22px;
}


/*buttons******************************/

.navy-blue-button {
  font-family: "Open Sans", Arial, "sans-serif";
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50px;
  transition: background 0.22s, color 0.22s, transform 0.18s;
  white-space: nowrap;
}
.navy-blue-button:hover { transform: translateY(-2px); }

.button-primary { background: var(--primarydarkpurple); color: var(--white); }
.button-primary:hover { background: #1f1647; }


/*end buttons**************************/




@media screen and (max-width:1200px){
  .callout-support > div {
    flex: 1 1 calc(50% - 12px); /* accounts for gap */
  }
    
    

    
  .hero-support-content {
       min-height: 300px;
    padding: 0 20px; /* slightly tighter */
    gap: 32px; /* reduce spacing */
  }


    
  .hero-support-text-only {
    width: 100%;
  }    
    
  .hero-support-text {
    flex: 0 0 50%;
  }


  .hero-support-text h1, .hero-support-text-only h1 {
    font-size: 35px;
    line-height: 45px;
  }

  .hero-support-text h2, .hero-support-text-only h2 {
    font-size: 18px;
    line-height: 28px;
  }


  .hero-support-images {
    flex: 1;
    max-width: 500px;
    min-height: 400px;
    transform: translateY(40px); /* slightly reduced for smaller screen */
  }


    
    
}


@media screen and (max-width:1100px){
 .slide-media, .slide-media img{
 display:none;
}   
}


@media screen and (max-width:920px){
.hero-home {
   min-height: 400px;
}

  .hero-home-image {
    flex: 0 0 30%;
  }


    
.hero-support-text h1{
    font-size: 25px;
line-height: 35px;
color: white;
}   
    
       
    
    .none{
        display: none;
    }        

}

@media screen and (max-width:768px){
section.callout-lightblue, .callout-container{
    padding: 25px; 
}

/* footer gutter follows the content gutter */
.preFootercontent{
    padding: 40px 25px;
}
.preFooter > .preFootercontent{
    padding: 30px 25px;
}        
    
.faq-row{
     margin: 0px 0px 0px 0px;
 }    
    
    .callout-home{
        flex-direction: column;
}
.callout-home .item-icon{
   flex: none;
    width: 130px; /* keeps icon size */
}

.callout-home .items{
 width: 100%;
}
    
    
.hero-support-pages {
  min-height: 400px;
  padding: 25px;
}

.hero-support-content{
    width: 100%;           /* key change */
    max-width: 1500px;     /* keep your cap */
    margin: 0 auto;        /* keep centered */
    padding: 20px;         /* tighten padding for tablet */
    display: flex;
    align-items: center;
    gap: 28px;             /* better than margins */
  }
  
   

.slide-copy h3{
  font-size: 24px;
  line-height: 34px;
}
    
 .hero-support-text{
    flex: 0 1 55%;         /* was 80% - too greedy */
    padding: 0;            /* remove extra padding if needed */
    min-width: 320px;      /* prevents “too thin” text column */
  }

    
 .hero-support-images{
    flex: 1 1 45%;
    min-height: 360px;     /* adjust to taste */
    max-width: none;       /* don’t hard-cap unless you want it */
    transform: translateY(0px); /* smaller offset than desktop */
  }
    
    section.callout-lower{
        padding: 20px
    }    
   
.lower-grid{
    grid-template-columns: 100%;
}    
    
.hero-support-background-gradient{
    background:linear-gradient(90deg,rgba(33, 32, 65, 1) 20%, rgba(176, 213, 242, 1) 100%);
}

}
    
@media screen and (max-width:675px){
      .callout-support > div {
    flex: 1 1 calc(100% - 0px); /* accounts for gap */
  }
    
    
.callout-home{
    background-color: #b0d5f2;
    border-radius: 30px;
    display: flex;
    padding: 30px;
    justify-content: space-between;
    align-items: center;
}

    
    
.hero-home {
  height: auto;             /* band hugs the copy instead of a fixed 350px */
  min-height: 0;
  align-items: center;      /* copy centres in the band */
  /* bottom padding keeps the copy clear of the .hero-tag pill that
     slides in over the bottom-right corner */
  padding: 34px 0 92px;
}   


    
    .hero-support-images{
display: none;
}  
        
    
.slider-container{
   padding: 0px 0px 0px 0px;
}    
    
 
    
.slide-copy-items{
   gap: 20px;
}  
    
.hero-support-content{
    width: 100%;

    padding: 0px 0px 0px 0px;
}        
    
 .hero-support-text{
    flex: 0 1 100%;         
    min-width: 320px;      
     padding: 10px 25px 10px 25px;
  }    
    
/* below 675 the headline gets too small to share the band with the art —
   drop the image and let the copy own the solid colour */
.home-vet::after {
  display: none;
}

/* with the art gone the copy owns the full band — one clamp carries the
   type all the way from 675 down to 320, so there's no step change */
.hero-home-content h1{
  font-size: clamp(26px, 8.9vw, 60px);
  line-height: 1.1;
  margin: 0px 0px 18px 0px;
}

.hero-home-content h2{
  font-size: clamp(16px, 3.2vw, 21px);
  line-height: 1.4;
}
       
    
}

@media screen and (max-width:500px){
.hero-home {
  padding: 26px 0 84px;
}

    .hero-home-content{
        width:100%;
    }    

.hero-home-content h1{
  margin: 0px 0px 14px 0px;
}
    
    .hero-home-content h2 br{display: none}
    

    .preFootercontent {
  padding: 35px 25px;
    }
    
    .basic-flex-row .item{
    flex: 0 0 100%;
}
    
    
}


/* ── SOCIAL ICONS (footer, above legal content) ──────────── */
.social-icons {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0px 0px 25px 0px;   /* matches .preFootercontent left/right padding */
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245,241,251,.30);
  background: transparent;
  text-decoration: none;
  flex-shrink: 0;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.social-icons a:hover {
  transform: translateY(-3px);
  background: #9e28b5;
  border-color: #9e28b5;
}

.social-icons a i {
  color: #ffffff;
  font-size: 17px;
  line-height: 1;
}

@media screen and (max-width: 500px) {
  .social-icons {
    padding: 40px 25px 0 25px;
    gap: 12px;
  }
  .social-icons a {
    width: 36px;
    height: 36px;
  }
  .social-icons a i {
    font-size: 15px;
  }
}
/* ── END SOCIAL ICONS ─────────────────────────────────────── */


/* ==========================================================================
   CALLBACK FORM POPUP  (Speak with a Licensed Insurance Agent)
   Used by pop-up.js — overlay is toggled with the .is-open class
   ========================================================================== */

.popup-overlay.is-open {
  display: block;
}

/* Wider box for the two-column form; scrolls internally on short screens */
.popup-box--form {
  width: 760px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  padding: 34px 34px 30px;
}

.popup-form__title {
  font-family: "Open Sans", sans-serif;
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  color: var(--primarydarkpurple);
  margin: 0 0 8px;
  padding-right: 28px;
}

.popup-form__intro {
  font-size: 14px;
  line-height: 21px;
  color: #444;
  margin: 0 0 20px;
}

/* Hidden honeypot field — bot bait, never visible to a real user */
.popup-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Two columns ─────────────────────────────────────────── */
.popup-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
}

.popup-form__field {
  margin-bottom: 4px;
}

.popup-form__field label {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--primarydarkpurple);
  margin-bottom: 6px;
}

.popup-form .req {
  color: var(--primarypurple);
  margin-left: 2px;
  font-weight: 700;
}

.popup-form__field input,
.popup-form__field select {
  width: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #1f1647;
  background: #fff;
  padding: 11px 12px;
  border: 1px solid #9a9a9a;
  border-radius: 8px;
  transition: border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Custom chevron for the Veteran Status dropdown */
.popup-form__field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231f1647' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px;
  cursor: pointer;
}

.popup-form__field input:focus,
.popup-form__field select:focus,
.popup-form__consent input:focus {
  outline: none;
  border-color: var(--primarypurple);
  box-shadow: 0 0 0 3px rgba(158, 40, 181, .18);
}

.popup-form__field input.has-error,
.popup-form__field select.has-error {
  border-color: #c62828;
  background-color: #fdf5f5;
}

.popup-form__error {
  display: block;
  min-height: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #c62828;
  margin-top: 3px;
}

.popup-form__error--consent {
  margin: -8px 0 8px;
}

/* ── Consent checkbox row ────────────────────────────────── */
.popup-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 6px 0 12px;
  padding-top: 6px;
  border-top: 1px solid #e4e4e4;
}

.popup-form__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  accent-color: var(--primarydarkpurple);
  cursor: pointer;
}

.popup-form__consent input[type="checkbox"].has-error {
  outline: 2px solid #c62828;
  outline-offset: 2px;
}

.popup-form__consent label {
  font-size: 12px;
  line-height: 18px;
  color: #444;
  cursor: pointer;
}

/* ── Submit ─────────────────────────────────────────────── */
.popup-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 6px;
}

.popup-form__submit {
  padding: 12px 40px;
  font-size: 16px;
}

/* ── Thank-you panel ────────────────────────────────────── */
.popup-form__thanks p {
  font-size: 15px;
  line-height: 23px;
  margin: 0 0 20px;
}

/* ── Responsive: stack to one column ────────────────────── */
@media screen and (max-width: 640px) {
  .popup-box--form {
    padding: 26px 20px 24px;
    border-radius: 14px;
  }
  .popup-form__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .popup-form__title {
    font-size: 22px;
    line-height: 28px;
  }
  .popup-form__submit {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup-form__field input,
  .popup-form__field select {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════
   HOME CALLOUT — VIDEO LEFT / COPY RIGHT
   Modifier on .callout-home. Scoped to .callout-home--video so the
   original 3-column .callout-home on other pages is untouched.
   Sits at the end of the file so it wins on source order; its
   stacking breakpoints live in the media block above.
   ══════════════════════════════════════════════════════════════════ */

.callout-home--video {
  align-items: flex-start;   /* video and copy share a top edge */
  gap: 36px;
  padding: 36px;
}

.callout-home--video > .callout-home__media {
  flex: 1 1 48%;
  min-width: 0;   /* lets the flex item shrink below its content width */
}

.callout-home--video > .callout-home__copy {
  flex: 1 1 52%;
  min-width: 0;
}

/* icon sits left of the two headings, all three on one row */
.callout-home--video .callout-home__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.callout-home--video .item-icon {
  flex: 0 0 86px;
  width: 86px;
}

.callout-home--video .item-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.callout-home--video .callout-home__headings > *:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .callout-home--video .item-icon {
    flex: 0 0 76px;
    width: 76px;
  }
}

@media screen and (max-width: 675px) {
  .callout-home--video {
    background-color: #ffffff;   /* the plain .callout-home turns light blue here */
  }
  .callout-home--video .callout-home__head {
    gap: 14px;
    margin-bottom: 18px;
  }
  .callout-home--video .item-icon {
    flex: 0 0 64px;
    width: 64px;
  }
}


/* ══════════════════════════════════════════════════════════════════
   HERO + CONTENT MEDIA  (Brightcove iframes and hero images)

   One system for every video / hero image on the site:
   • a media box is NEVER translated out of its band (the old
     translateY overhang pushed videos into the next section)
   • copy and media are separated by a flex gap, so text can't touch
     the media at any width
   • below 768 the media stacks under the copy at full width with the
     same 25px gutter as the text, so edges line up
   • everything is aspect-ratio locked, so heights follow widths
   Markup (hero):
     <section class="hero-support-content video-hero [reverse]">
       <div class="hero-support-text">…</div>
       <div class="hero-support-video | content-video"><iframe …></iframe></div>
     </section>
   ══════════════════════════════════════════════════════════════════ */

/* a little more air above/below the hero row now that nothing overhangs */
.hero-support-background-color {
  padding: 40px 0;
}

/* ── Video box (hero version and in-body version share one look) ── */
.hero-support-video,
.content-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;          /* keeps rounded corners on iOS Safari */
  background: #000;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .22);
  transform: none;
}

.hero-support-video iframe,
.content-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Hero row: copy takes the leftover space, media gets a fixed share ── */
.hero-support-content > .hero-support-text {
  flex: 1 1 0;
  min-width: 0;
}

.hero-support-content > .hero-support-video,
.hero-support-content > .content-video {
  flex: 0 0 45%;
  width: auto;
  max-width: 600px;
  align-self: center;
  margin: 0;
}

/* in-body video (CHAMPVA's 60% grid cell) keeps top alignment */
.lower-grid > .content-video {
  align-self: start;
}

/* hero image (Help is here) — same rules: no overhang, centred, gapped */
.hero-support-images {
  transform: none;
  align-self: center;
  background-position: center;
}

/* ── Callout-with-video (CHAMPVA lower grid) ── */
.callout-lower--video .lower-grid {
  gap: 32px;
}

/* ── HERO ART (CHAMPVA squiggle) never sits under the headline ──
   The art's left edge is  max(100vw - art-w, copy-w + 60px).
   The copy column may extend to 28px short of that edge. */
.hero-support-content.hero-with-art .hero-support-text-only {
  flex: 1 1 auto;
  width: 100%;
  max-width: min(760px, max(240px, calc(
    max(100vw - var(--art-w), var(--copy-w) + 60px)
    - max(0px, (100vw - 1500px) / 2)
    - var(--hero-gutter)
    - 28px)));
}

/* ── TABLET: callout cards stack earlier so the video gets real width ── */
@media screen and (max-width: 920px) {
  .lower-grid {
    grid-template-columns: 100%;
    gap: 24px;
  }
  .callout-lower--video,
  section.callout-lightblue {
    padding: 40px;
  }
  .callout-home--video {
    flex-direction: column;
    align-items: stretch;      /* column + flex-start collapsed the video to 0 wide */
    gap: 28px;
    padding: 28px;
  }
  .callout-home--video > .callout-home__media,
  .callout-home--video > .callout-home__copy {
    flex: 0 0 auto;            /* the 48% / 52% basis was being read as a HEIGHT */
    width: 100%;
  }
}

/* ── PHONE / SMALL TABLET: media stacks under the copy ── */
@media screen and (max-width: 768px) {
  .hero-support-background-color {
    padding: 32px 0;
  }

  .hero-support-content.video-hero {
    flex-direction: column;     /* also beats .reverse's row-reverse */
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .hero-support-content.video-hero > .hero-support-text {
    flex: 0 0 auto;
    padding: 10px 25px 0;
  }
  .hero-support-content.video-hero > .hero-support-video,
  .hero-support-content.video-hero > .content-video {
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin: 24px 25px 8px;      /* 25px side gutter = same as the copy above */
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
  }

  .callout-lower--video,
  section.callout-lightblue {
    padding: 25px;
  }
  .callout-home--video {
    gap: 24px;
    padding: 24px;
  }
  .content-video {
    border-radius: 16px;
  }
}

@media screen and (max-width: 675px) {
  /* art is hidden here; let the headline use the whole band */
  .hero-support-content.hero-with-art .hero-support-text-only {
    max-width: none;
  }
}

@media screen and (max-width: 500px) {
  .hero-support-background-color {
    padding: 28px 0;
  }
  .hero-support-content.video-hero > .hero-support-video,
  .hero-support-content.video-hero > .content-video {
    margin: 22px 25px 6px;
  }
  .callout-home--video {
    padding: 20px;
    gap: 22px;
  }
  .lower-grid div.callout {
    padding: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-support-video,
  .content-video {
    box-shadow: none;
  }
}
/* ── END HERO + CONTENT MEDIA ─────────────────────────────────── */


/* ── SMALL PHONES (≤400): give the video a little more width ── */
@media screen and (max-width: 400px) {
  section.callout-lightblue {
    padding: 16px;
  }
  .callout-home--video {
    padding: 18px;
    gap: 20px;
  }
}

/* carousel arrows: the 50px icon was spilling 6px past a 44px button
   and past the right edge of the screen on phones */
.slider-nav .nav-icon {
  width: 44px;
  height: 44px;
}