/**
 * layout.css
 * Header, footer and mega-menu styles — extracted from ee_source/css/main.css
 * and adapted for the Wagtail project.
 *
 * The EE's compiled main.css rule:
 *   .c-site-header .c-site-header__bottom ul { display: flex }   (specificity 0-2-1)
 * overrides Foundation's:
 *   .is-dropdown-submenu { display: none }                        (specificity 0-1-0)
 * which is what causes submenus to always be visible.
 * The "Mega menu fix" section below corrects this with more specific rules.
 */

/* ====================================================================
   HEADER — EE-exact styles (source: ee_source/css/main.css)
   ==================================================================== */

.c-site-header {
  background-color: #002c42;
}

/* --- Mobile (max-width: 39.9375em) --------------------------------- */
@media screen and (max-width: 39.9375em) {
  .c-site-header {
    background: #002c42;
  }
  .c-site-header .e-mobile-menu {
    display: inline-block;
    vertical-align: top;
    text-align: center;
  }
  .c-site-header .e-mobile-menu .e-mobile-menu-btn {
    font-family: "trajan-pro-3", sans-serif;
    color: #fff;
  }
  .c-site-header .e-site__logo {
    display: inline-block;
    vertical-align: top;
    width: 80px;
    height: 80px;
    padding-top: 7px;
    border: 3px solid #fff;
    border-radius: 50%;
    text-align: center;
  }
  .c-site-header .e-language-switch {
    display: inline-block;
    vertical-align: top;
    color: #fff;
  }
  .c-site-header .e-language-switch a {
    font-size: 12px;
    color: #fff;
  }
}

/* --- Desktop (min-width: 40em) ------------------------------------- */
@media screen and (min-width: 40em) {
  .c-site-header .c-site-header__top {
    background: #002c42;
  }
  .c-site-header .c-site-header__top .e-site__logo {
    display: inline-block;
    vertical-align: middle;
    height: 60px;
    margin: 10px 10px 10px 0;
  }
  .c-site-header .c-site-header__top .e-site__title {
    display: inline-block;
    vertical-align: middle;
    font-family: "trajan-pro-3", sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    color: #fff;
    margin: 1.3125rem 0;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 15px;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .search-wrapper {
    text-align: right;
    margin-right: 1.875rem;
    margin-bottom: 5px;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .search-wrapper .search-form .search-input {
    min-height: 30px;
    padding-left: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    min-width: 140px;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .search-wrapper .search-form .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .search-wrapper .search-form .search-submit {
    transition: all 0.3s ease;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    cursor: pointer;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .search-wrapper .search-form .search-submit:hover {
    background: #fff;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .search-wrapper .search-form .search-submit:hover .icon-search::before {
    color: #002c42;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .lang-and-text {
    text-align: right;
    margin-right: 1.875rem;
    color: #fff;
    font-family: "trajan-pro-3", sans-serif;
    font-weight: 100;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .lang-and-text a {
    color: #fff;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .lang-and-text a:hover {
    cursor: pointer;
  }
  .c-site-header .c-site-header__top .c-site-header-search-and-langs .lang-and-text .lang {
    margin-right: 10px;
  }

  /* Nav bar */
  .c-site-header .c-site-header__bottom {
    background: #0e5fa5;
  }
  .c-site-header .c-site-header__bottom ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: nowrap;
  }
  .c-site-header .c-site-header__bottom ul li a {
    flex-grow: 1;
    transition: all 0.3s ease;
    background-color: transparent;
    color: #fff;
    padding: 1rem 0.5rem;
    font-size: 1rem;
    text-align: center;
  }
  .c-site-header .c-site-header__bottom ul li a:hover {
    background-color: #fff;
    color: #0e5fa5;
  }
}

/* Large screens — wider padding on nav links */
@media screen and (min-width: 64em) {
  .c-site-header .c-site-header__bottom ul li a {
    padding: 17px 0.875rem;
    text-align: left;
  }
}

/* ====================================================================
   MEGA MENU FIX
   The EE rule `.c-site-header .c-site-header__bottom ul { display:flex }`
   (specificity 0-2-1) wins over Foundation's
   `.is-dropdown-submenu { display:none }` (specificity 0-1-0), causing
   every submenu to always be visible.

   The rules below restore the correct behaviour:
   - `.c-site-header .c-site-header__bottom .is-dropdown-submenu`   (0-3-0)
     → hides Foundation-managed submenus by default.
   - `.is-dropdown-submenu.js-dropdown-active` override              (0-4-0)
     → shows them when Foundation activates on hover.

   A CSS-only `:hover` fallback is also provided for when Foundation JS
   is unavailable (e.g. CDN blocked).
   ==================================================================== */

/* Hide Foundation-managed submenus (overrides EE flex rule) */
.c-site-header .c-site-header__bottom .is-dropdown-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  min-width: 280px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-direction: unset;
  justify-content: unset;
  flex-wrap: unset;
}

/* Show when Foundation activates on hover */
.c-site-header .c-site-header__bottom .is-dropdown-submenu.js-dropdown-active {
  display: block;
}

/* CSS-only fallback: hide/show raw ul.menu submenus (no Foundation JS) */
.c-site-header .dropdown.menu > li > ul.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  min-width: 280px;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.c-site-header .dropdown.menu > li:hover > ul.menu {
  display: block;
}

/* Mega menu: wider panel to accommodate multi-column layout */
.c-site-header .dropdown.menu li.megamenu > .is-dropdown-submenu,
.c-site-header .dropdown.menu li.megamenu > ul.menu {
  min-width: 600px;
  width: max-content;
  max-width: 90vw;
}

/* Force submenu items and vertical menus to stack (overrides Foundation inline-block) */
.c-site-header .dropdown.menu > li > .is-dropdown-submenu > li,
.c-site-header .dropdown.menu > li > ul.menu > li {
  display: block !important;
  width: 100%;
}
.c-site-header .dropdown.menu > li > .is-dropdown-submenu .vertical.menu,
.c-site-header .dropdown.menu > li > ul.menu .vertical.menu,
.c-site-header .dropdown.menu > li > .is-dropdown-submenu .vertical.menu li,
.c-site-header .dropdown.menu > li > ul.menu .vertical.menu li {
  display: block !important;
  width: 100%;
}

/* Submenu link colours (override EE's white nav link rule for sub-items) */
.c-site-header .c-site-header__bottom .is-dropdown-submenu a,
.c-site-header .dropdown.menu > li > ul.menu a {
  color: #002c42;
  flex-grow: unset;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: normal;
  text-decoration: none;
  background-color: transparent;
}
.c-site-header .c-site-header__bottom .is-dropdown-submenu a:hover,
.c-site-header .dropdown.menu > li > ul.menu a:hover {
  color: #0e5fa5;
  background-color: transparent;
  text-decoration: underline;
}

/* Mega menu: multi-column row layout */
.c-site-header .dropdown.menu .row.medium-up-2.large-up-3 {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.c-site-header .dropdown.menu .column.column-block {
  flex: 0 0 auto;
  padding: 0 0.75rem 0 0.75rem;
  min-width: 180px;
  border-right: 1px solid #e0e0e0;
}
.c-site-header .dropdown.menu .column.column-block:last-child {
  border-right: none;
}
@media screen and (min-width: 40em) {
  .c-site-header .dropdown.menu .column.column-block {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media screen and (min-width: 64em) {
  .c-site-header .dropdown.menu .column.column-block {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* Spacing between simple-dropdown items */
.c-site-header .dropdown.menu > li:not(.megamenu) > ul.menu li + li,
.c-site-header .dropdown.menu > li:not(.megamenu) > .is-dropdown-submenu li + li {
  margin-top: 0.25rem;
}

/* ====================================================================
   MEGA MENU CONTENT STYLING — matching EE visual appearance
   (source: ee_source/migration_audit/ee_templates/_site-header.html)

   The EE uses multiple <ul class="vertical menu"> per column:
     - First <li> in each <ul> = section heading (bold blue link)
     - Remaining <li> items  = bullet sub-items (dark, indented)
     - Adjacent <ul> groups  = separated by a horizontal rule

   In Wagtail, each column renders ONE <ul class="vertical menu">.
   This CSS approximates EE appearance:
     - First <li> is styled as the column heading
     - Subsequent <li> items get bullet/indent style
     - Multiple <ul> groups (if present via future model changes)
       get proper separator styling
   ==================================================================== */

/* Hide Foundation's caret arrows on nav-bar items
   (EE nav has no visible arrows — same dark-blue border-color makes them invisible) */
.c-site-header .c-site-header__bottom .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  display: none;
}

/* Separator between adjacent vertical-menu groups within a column
   (EE has multiple <ul> elements per column; this line divides them) */
.c-site-header .dropdown.menu .column .vertical.menu + .vertical.menu {
  border-top: 1px solid #e0e0e0;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
}

/* Section heading: first link in each vertical-menu group */
.c-site-header .dropdown.menu .column .vertical.menu > li:first-child > a {
  color: #0e5fa5;
  font-weight: bold;
  font-size: 0.875rem;
  text-decoration: none;
  background-color: transparent;
  padding-left: 0;
}
.c-site-header .dropdown.menu .column .vertical.menu > li:first-child > a:hover {
  color: #002c42;
  text-decoration: underline;
  background-color: transparent;
}

/* Sub-items: indented with a bullet indicator (items after the heading) */
.c-site-header .dropdown.menu .column .vertical.menu > li:not(:first-child) > a {
  color: #333;
  padding-left: 1rem;
  position: relative;
  font-size: 0.8125rem;
  background-color: transparent;
}
.c-site-header .dropdown.menu .column .vertical.menu > li:not(:first-child) > a::before {
  content: "\2022"; /* bullet • */
  position: absolute;
  left: 0.1rem;
  color: #666;
  font-size: 0.75rem;
  line-height: inherit;
}
.c-site-header .dropdown.menu .column .vertical.menu > li:not(:first-child) > a:hover {
  color: #0e5fa5;
  background-color: transparent;
  text-decoration: underline;
}

/* ====================================================================
   FOOTER — EE-exact styles (source: ee_source/css/main.css)
   ==================================================================== */

.c-site-footer {
  border-top: 0.4375rem solid #bb964e;
  background-color: #002c42;
}
.c-site-footer .c-site-footer-row {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: 1000px;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}
.c-site-footer .c-site-footer-row::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.c-site-footer .e-footer__logo {
  margin: 0;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 40em) {
  .c-site-footer .e-footer__logo {
    width: 8.33333%;
    float: left;
  }
}
.c-site-footer .e-footer__title {
  font-family: "utopia-std", sans-serif;
  font-size: 1.75rem;
  color: #fff;
  text-align: center;
  margin: 0.67em 0;
}
.c-site-footer #footer-links {
  margin: 0 auto;
  max-width: 1000px;
}
.c-site-footer #footer-links,
.c-site-footer .c-site-footer__contact {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  width: 100%;
}
.c-site-footer .c-site-footer__contact p {
  font-family: "jaf-facitweb", sans-serif;
  font-size: 0.875rem;
  color: #fff;
  padding-left: 0;
  padding-right: 0;
  width: 58.33333%;
  float: left;
}
.c-site-footer .c-site-footer__contact p a {
  color: #fff;
}
.c-site-footer .c-site-footer__contact p#address {
  width: 41.66667%;
  text-align: right;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email {
  clear: both;
  padding: 1.25rem;
  width: 100%;
  color: #fff;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email .email-link {
  color: #fff;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email ul {
  text-align: center;
  justify-content: center;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email ul li a {
  width: 40px;
  height: 40px;
  text-align: center;
  margin-left: 0;
  padding: 0;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email ul li a span {
  display: block;
  width: 40px;
  height: 40px;
  padding-top: 10px;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email ul li a span::before {
  transition: all 0.3s ease;
  display: block;
  font-size: 25px;
  color: #87c3d7;
}
.c-site-footer .c-site-footer__contact .c-site-footer__email ul li:hover a span::before {
  color: #fff;
}

@media screen and (min-width: 40em) {
  .c-site-footer__links {
    width: 91.66667%;
    float: left;
  }
}
.c-site-footer__links article {
  width: 100%;
  display: none;
  padding: 0;
}
@media screen and (max-width: 39.9375em) {
  .c-site-footer__links article:last-of-type {
    display: block;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
  .c-site-footer__links article:last-of-type ul {
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .c-site-footer__links article:last-of-type ul li a {
    font-size: 1rem;
  }
}
@media screen and (min-width: 40em) {
  .c-site-footer__links article {
    display: block;
    float: left;
    width: 25%;
  }
}
.c-site-footer__links article h3 {
  font-family: "utopia-std", sans-serif;
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 40em) {
  .c-site-footer__links article h3 {
    text-align: left;
    font-size: 1.0625rem;
  }
}
.c-site-footer__links article ul li {
  list-style: none;
}
.c-site-footer__links article ul li a {
  transition: all 0.3s ease;
  padding: 0.3rem 0;
  color: #aac9d5;
  font-family: "jaf-facitweb", sans-serif;
  font-size: 0.8125rem;
}
.c-site-footer__links article ul li:hover a {
  color: #fff;
}

.c-footer-social-icons {
  position: absolute;
  top: 1.875rem;
  right: 10px;
}
.c-footer-social-icons li {
  list-style: none;
  margin-bottom: 1rem;
}
.c-footer-social-icons li a span::before {
  transition: all 0.3s ease;
  display: block;
  font-size: 25px;
  color: #87c3d7;
}
.c-footer-social-icons li:hover a span::before {
  color: #fff;
}

.c-footer-ts-and-cs {
  clear: both;
  background-color: #000;
  padding: 20px;
}
.c-footer-ts-and-cs ul {
  text-align: center;
  justify-content: center;
}
@media screen and (max-width: 39.9375em) {
  .c-footer-ts-and-cs ul {
    margin-left: 1.1rem;
  }
}
@media screen and (min-width: 40em) {
  .c-footer-ts-and-cs ul {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    float: left;
    line-height: 1.6;
  }
}
.c-footer-ts-and-cs ul li {
  margin-right: 30px;
}
.c-footer-ts-and-cs ul li a {
  font-family: "jaf-facitweb", sans-serif;
  font-size: 0.875rem;
  color: #fff;
  padding: 0;
}
@media screen and (min-width: 40em) {
  .c-footer-ts-and-cs ul li {
    float: left;
    margin-right: 0;
  }
  .c-footer-ts-and-cs ul li::before {
    content: "\2022";
    display: inline-block;
    margin-left: 8px;
    margin-right: 8px;
    color: #fff;
  }
  .c-footer-ts-and-cs ul li a {
    display: inline-block;
  }
  .c-footer-ts-and-cs ul li:first-of-type::before {
    content: "";
    display: none;
  }
  .c-footer-ts-and-cs ul li:nth-last-child(2) {
    margin-right: 30px;
  }
  .c-footer-ts-and-cs ul li:last-of-type {
    float: right;
  }
  .c-footer-ts-and-cs ul li:last-of-type::before {
    content: "";
    display: none;
  }
}

/* ====================================================================
   BODY / HEADINGS — EE font and size parity
   ==================================================================== */

body {
  font-family: "jaf-facitweb", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
h1, h2, h3, h4, h5, h6,
.e-page-title {
  font-family: "utopia-std", "Georgia", serif;
  color: #002c42;
  font-weight: inherit;
}
h1 { font-size: 28px; line-height: 32px; }
@media screen and (min-width: 64em) {
  h1 { font-size: 44px; line-height: 48px; }
}
h2 { font-size: 26px; line-height: 30px; }
@media screen and (min-width: 64em) {
  h2 { font-size: 37px; line-height: 41px; }
}
h3 { font-size: 22px; line-height: 25px; }
@media screen and (min-width: 64em) {
  h3 { font-size: 26px; line-height: 30px; }
}
h4 { font-size: 18px; line-height: 24px; }
h5, h6 { font-size: 16px; line-height: 20px; }
@media screen and (min-width: 64em) {
  .e-page-title { font-size: 54px; line-height: 58px; }
}

/* ====================================================================
   HERO SLIDER — EE parity (taller, object-fit cover, arrows)
   ==================================================================== */

.c-hero-slider {
  position: relative;
  overflow: hidden;
  min-height: 55vh;
}
.c-hero-slider .slick-slide {
  display: block;
}
.c-hero-slider .slick-slide > div {
  height: 100%;
}
.c-hero-slider .c-slide {
  min-height: 55vh;
}
.c-hero-slider .c-hero {
  min-height: 55vh;
}
.c-hero-slider .c-hero__image {
  object-fit: cover;
  object-position: center center;
}

/* Hero slider arrows — match .c-card-slider style from EE */
.c-hero-slider .slick-prev,
.c-hero-slider .slick-next {
  z-index: 10;
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.c-hero-slider .slick-prev:hover,
.c-hero-slider .slick-next:hover {
  background-color: rgba(187, 150, 78, 0.8);
}
.c-hero-slider .slick-prev {
  left: 15px;
}
.c-hero-slider .slick-next {
  right: 15px;
}

/* ====================================================================
   STACKING — prevent content/footer overlap
   ==================================================================== */

#main-content {
  clear: both;
  display: block;
  position: relative;
}
.c-site-footer,
.c-footer-ts-and-cs {
  clear: both;
  position: relative;
}
.o-block,
section[id="welcome"],
.c-touchpoints {
  clear: both;
  position: relative;
}

/* ====================================================================
   BACKGROUND IMAGE NOTES
   main.css uses relative paths: url("../images/..."). These resolve to
   /static/images/... after sync_dediserve_to_s3 uploads the explicit design
   image allowlist to static/assets/images/ and promote_static_assets copies
   only those allowlisted files to static/images/. Bulk assets/images/* stays
   in media/Wagtail, not static.
   ==================================================================== */

/* ====================================================================
   LAZYLOAD — ensure images render without lazysizes JS
   EE used lazysizes to lazy-load images (data-src swap).
   Wagtail templates use regular src= attributes, so images always load.
   This rule is a safety net for any stray .lazyload classes.
   ==================================================================== */

img.lazyload,
img.lazyloading,
img.lazyloaded {
  opacity: 1;
  visibility: visible;
}

/* ====================================================================
   HOMEPAGE BODY CLASS
   EE sets class="homepage" on <body> for the homepage.
   Wagtail sets class="template-homepage" instead.
   Map the EE homepage body styles (background harp, etc.) to the
   Wagtail class so the same visual appearance applies.
   Image path: /assets/images/welcome-harp-large.png in EE (absolute);
   in Wagtail served from the promoted design-image allowlist at /static/images/.
   ==================================================================== */

body.template-homepage {
  background: #002c42 url("/static/images/welcome-harp-large.png") no-repeat 100%;
  background-attachment: fixed;
}