/* ==========================================================
   home.css — additions for the restructured homepage
   Load this AFTER assets/css/main.css.
   Reuses the site's existing palette (#13314d navy, #e1be77 gold,
   #b6b2a9 tan, #ffffff) and existing fonts — no new typefaces
   or colours are introduced here.
   ========================================================== */

/* Let every section heading get the gold underline, not just
   the two ids main.css originally scoped it to. */
#main header.major > :first-child:after {
  background-color: #e1be77;
}

/* ---------- Mobile fixes ---------- */

/* Book/Quote buttons (hero + final CTA): let them wrap instead of
   forcing two long labels into one unbreakable row, which was
   causing horizontal overflow on narrow phones. */
#banner ul.actions,
#final-cta ul.actions {
  flex-wrap: wrap;
  align-items: center; /* keeps buttons vertically centered on one row */
}

@media screen and (max-width: 480px) {
  /* Below 480px, stop trying to fit them side by side at all —
     stack full-width so nothing gets squeezed. */
  #banner ul.actions,
  #final-cta ul.actions {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  #banner ul.actions li,
  #final-cta ul.actions li {
    width: 100%;
    padding: 0.75em 0 0 0; /* vertical gap only once buttons are stacked */
  }

  #banner ul.actions li:first-child,
  #final-cta ul.actions li:first-child {
    padding-top: 0;
  }

  #banner ul.actions .button,
  #final-cta ul.actions .button {
    width: 100%;
  }
}

/* The hero's lead-in paragraph inherits main.css's ".description"
   class (100px top margin, meant for a single short line under a
   big banner heading). That's too much dead space once the hero
   also carries two more paragraphs, buttons and a strap line on a
   short phone screen, so scale it back below 736px. */
@media screen and (max-width: 736px) {
  #banner .description.description {
    margin-top: 1.25em;
  }
}

/* Small uppercase strap line under the hero buttons */
.hero-tagline {
  margin-top: 1.5em;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.85;
}

@media screen and (max-width: 736px) {
  .hero-tagline {
    letter-spacing: 0.15em;
  }
}

/* ---------- Card grid (Who We Help / Services / Why Us) ---------- */

/* Override main.css's CSS-Grid version of .grid-container with
   flexbox, so a short last row of cards centers instead of
   being left-aligned with empty space on the right. */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 2em;
}

.grid-container > .card {
  flex: 1 1 200px;
  max-width: 280px;
}

@media screen and (max-width: 480px) {
  .grid-container > .card {
    flex-basis: 100%;
    max-width: 400px;
  }
}

.card {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2.25em 1.75em 2em 1.75em;
  color: #13314d;
  -moz-transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
  -webkit-transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
  transition:
    transform 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    background-color 0.3s ease-in-out;
}

.card h3 {
  color: #13314d;
  font-size: 1.1em;
  margin: 0 0 0.5em 0;
  -moz-transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}

.card p {
  color: #3c4a5c;
  font-size: 0.82em;
  line-height: 1.6;
  margin: 0 0 1em 0;
  -moz-transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}

.card > :last-child {
  margin-bottom: 0;
}

.card:hover h3,
.card:hover p {
  color: #ffffff;
}

/* Circular icon badge, sits above each card's heading */
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 100%;
  margin: 0 auto 1em auto;
  background-color: #13314d;
  color: #e1be77;
  font-size: 1.4em;
  flex-shrink: 0;
  -moz-transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
  -webkit-transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.card:hover .card-icon {
  background-color: #e1be77;
  color: #13314d;
}

/* "Learn More →" link inside a card */
.card-link {
  display: inline-block;
  border-bottom: 0;
  color: #13314d;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  margin-top: auto;
  -moz-transition: color 0.3s ease-in-out;
  -webkit-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}

.card-link span {
  display: inline-block;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}

.card:hover .card-link {
  color: #ffffff;
}

.card:hover .card-link span {
  -moz-transform: translateX(4px);
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

/* Cards that sit on a navy section background start one shade lighter,
   so they still read as "cards" against the dark section colour. */
#who-we-help .card,
#why-us .card {
  background-color: #d8d3c7;
}

#who-we-help .card:hover,
#why-us .card:hover {
  background-color: #1c3f60;
}

#who-we-help .card:hover h3,
#who-we-help .card:hover p,
#why-us .card:hover h3,
#why-us .card:hover p {
  color: #ffffff;
}

/* On white sections the default tan card already contrasts fine;
   just soften the hover to the same navy used elsewhere on the site. */
#services .card:hover {
  background-color: #13314d;
}

/* Tidy up the "Compensation & Benefits" card, which has no
   Learn More link, so its content still bottom-aligns with siblings. */
#services .card {
  min-height: 100%;
}

@media screen and (max-width: 736px) {
  .card {
    padding: 2em 1.5em 1.75em 1.5em;
  }
}

/* Stop section headings (h1/h2 wrapped in header.major) from
   forcing horizontal overflow at narrow widths. max-content still
   sizes the underline to the text on wide screens, but this caps
   it so long headings wrap instead of pushing past the viewport. */
header.major {
  max-width: 100%;
}

/* Extra safety net: if a single very long word ever gets tight
   against a narrow card/column, break it instead of overflowing. */
header.major > :first-child,
.card h3 {
  overflow-wrap: break-word;
  word-break: break-word;
}