/* Site-wide chrome: reset, typography, buttons, header/nav, footer.
   Design tokens come from variables.css (linked before this file on every
   page). Page-specific content styles live in assets/css/<page>.css. */

/* Bundled Lato fonts; source and license are documented in assets/fonts/. */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato-v25-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

a {
  color: var(--color-red);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 10px 16px;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px;
  font-weight: 400;
  color: var(--color-black);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  color: var(--color-red);
}

h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  color: var(--color-navy);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

p {
  margin: 0 0 20px;
  font-size: var(--font-size-p);
  line-height: var(--line-height-p);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* Buttons */

.button,
.fusion-button {
  display: inline-block;
  background: var(--color-red);
  color: var(--color-white);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-weight-button);
  letter-spacing: 0.5px;
  padding: var(--spacing-button);
  border-radius: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}

.button:hover,
.fusion-button:hover {
  background: #c81a20;
  text-decoration: none;
}

/* Header */

.site-header {
  position: relative;
  z-index: 100;
  background: var(--color-white);
  border-top: 5px solid var(--color-red);
}

/* Sticky header: matches Avada's default behavior on the live site, which
   only enables the shrinking fixed header at desktop widths (disabled on
   tablet/mobile, same breakpoint as the mobile nav toggle below) and snaps
   instantly rather than animating the shrink. */
@media (min-width: 1024px) {
  .site-header.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-top: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.118);
  }

  .site-header.is-stuck .site-logo {
    padding: 5px 0;
  }

  .site-header.is-stuck .site-logo img {
    width: 166px;
    height: 55px;
  }

  /* Reserve the space the fixed header vacates so page content doesn't
     jump underneath it. */
  body:has(.site-header.is-stuck) {
    padding-top: 65px;
  }
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: inline-block;
  padding: 31px 0;
}

.site-logo img {
  display: block;
  width: 254px;
  height: 84px;
  max-height: 84px;
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
}

.main-nav a {
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a.is-current {
  color: var(--color-red);
  border-bottom-color: var(--color-red);
  text-decoration: none;
}

.main-nav a.button {
  color: var(--color-white);
  border-bottom: 0;
  padding: var(--spacing-button);
}

.main-nav a.button:hover {
  color: var(--color-white);
  background: #c81a20;
}

/* Menu icon: three rounded 36x6 bars on a 12px pitch inside a 42px box,
   scaled 2x from the live site's traced icon-font glyph. The bars stay bars
   while the menu is open, as they do on the live site. */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 0;
  width: 36px;
  height: 6px;
  border-radius: 2px;
  background: var(--color-navy);
}

.nav-toggle__bars {
  top: 18px;
}

.nav-toggle__bars::before {
  content: "";
  top: -12px;
}

.nav-toggle__bars::after {
  content: "";
  top: 12px;
}

/* Mobile dropdown: full-bleed rows of centered 12px text on a light gray
   ground, matching the live site's Avada "modern" mobile menu. Row metrics
   (35px tall, 1px #dadada rules, #f9f9f9 ground) come from the live site's
   computed styles and stay fixed at every width below the nav breakpoint. */
.mobile-nav {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--color-white);
  transition: max-height 0.25s ease;
}

.mobile-nav.is-open {
  max-height: 240px;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #dadada;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 12px;
  background: #f9f9f9;
  color: #333333;
  font-size: 12px;
  font-weight: 400;
  line-height: 35px;
  border-bottom: 1px solid #dadada;
  text-decoration: none;
}

.mobile-nav a:hover,
.mobile-nav a.is-current {
  background: #f6f6f6;
  color: #333333;
}

@media (max-width: 1023px) {
  .main-nav {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .mobile-nav {
    display: block;
  }

  /* The live header shrinks below the nav breakpoint: 20px of padding around
     the 84px logo, with the menu icon pinned to the logo's top edge rather
     than centered on it. That bottom padding also supplies the 20px gap
     between the logo and the first open menu row. The 1px rule matches the
     live header's own bottom border; at desktop widths our 5px top bar
     already accounts for that pixel. */
  .site-header {
    border-bottom: 1px solid var(--color-white);
  }

  .site-header__inner {
    align-items: flex-start;
    padding: 20px 30px;
  }

  .site-logo {
    padding: 0;
  }
}

/* Section triangle divider (small arrow marking a band-to-band transition) */

.triangle-divider {
  width: 0;
  margin: 0 auto;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 28px solid transparent;
}

.triangle-divider--red {
  border-top-color: var(--color-red);
}

.triangle-divider--red-accent {
  border-top-color: var(--color-red-accent);
}

.triangle-divider--navy {
  border-top-color: var(--color-navy);
}

@media (max-width: 640px) {
  .triangle-divider {
    border-left-width: 20px;
    border-right-width: 20px;
    border-top-width: 20px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 28px;
  }
}

/* Footer */

.site-footer {
  background: var(--color-navy-dark);
  color: var(--color-white);
  border-top: 12px solid #686969;
}

.site-footer a {
  color: var(--color-white);
}

.site-footer__widgets {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.site-footer__col--logo img {
  display: block;
  margin: 0 auto 20px;
  width: 155px;
  height: 177px;
}

.site-footer__col--logo p {
  text-align: center;
  font-size: var(--font-size-footer);
  line-height: var(--line-height-footer);
}

.site-footer__col--contact p {
  margin: 0 0 15px;
  font-size: var(--font-size-footer);
  line-height: var(--line-height-footer);
}

.site-footer__heading {
  font-weight: 700;
}

.site-footer__copyright {
  background: #1a2c5e;
  padding: 15px 30px;
  text-align: center;
}

.site-footer__copyright p {
  margin: 0;
  font-size: 12px;
}

.site-footer__orangeball-logo {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 4px;
}

@media (max-width: 800px) {
  .site-footer__widgets {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-footer__col--contact {
    text-align: center;
  }

  .site-footer__col--logo p,
  .site-footer__col--contact p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
}

/* Page content default spacing */

main {
  min-height: 200px;
}

/* Return-to-top button

   Mirrors the live site's Avada "to top" control: a fixed tab in the
   bottom-right gutter that fades in once the reader is past 200px and moving
   down the page. Hidden below 800px wide, where the live site omits it. */

.to-top {
  position: fixed;
  right: 75px;
  bottom: 0;
  z-index: 100000;
  width: 48px;
  height: 35px;
  border-radius: 6px 6px 0 0;
  background-color: #333333;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out, background-color 0.2s ease-in-out;
}

.to-top.is-visible {
  opacity: 0.9;
  pointer-events: auto;
}

.to-top:hover,
.to-top:focus {
  background-color: #c21a20;
}

/* Chevron drawn from two borders on a square rotated a quarter turn. */
.to-top::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.5px;
  height: 8.5px;
  margin-top: 2.75px; /* the rotated square's apex sits high; nudge to optical centre */
  border-top: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  transform: translate(-50%, -50%) rotate(45deg);
}

@media (max-width: 800px) {
  .to-top {
    display: none;
  }
}