/* Accessibility overrides layered after the theme CSS. Kept minimal and
   visually neutral (loaded by ThemeLayout). */

/* Touch targets: extend the clickable area of buttons to >=44px tall WITHOUT
   changing their visible size, via a transparent overlay. */
.button,
.button-secondary,
a.button,
a.button-secondary {
  position: relative;
}

.button::after,
.button-secondary::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* Footer link rows are ~22px tall; nudge to a comfortable >=24px (WCAG 2.5.8)
   tap height with a small block padding (footer has the room). */
.site-footer .footer-menu a,
.site-footer .menu-item a,
.site-footer .footer-social a {
  display: inline-block;
  padding-block: 3px;
}

/* Heading-order normalization: when the mirror retags a level-skipping heading,
   it adds m-h{originalLevel} so the visual size is preserved (theme styles
   headings by tag). These match the theme's per-tag typography. */
.m-h1 { font-size: 48px; line-height: 67.2px; }
.m-h2 { font-size: 66px; line-height: 92.4px; }
.m-h3 { font-size: 42px; line-height: 58.8px; }
.m-h4 { font-size: 32px; line-height: 44.8px; }
.m-h5 { font-size: 20px; line-height: 28px; }
.m-h6 { font-size: 16px; line-height: 22.4px; }

/* Mobile off-canvas menu polish. SCOPED to mobile only (max-width:1023px) —
   the desktop nav shares the .site-navigation class inside .off-canvas-wrapper,
   so these MUST NOT leak to desktop (they did: the chevron landed over text).
   The off-canvas panel only appears below Foundation's "large" (1024px) breakpoint.
   The theme spreads items over a full-height flex column (flex-end, 100vh, 32px
   margins, right-aligned) — tighten to a clean top/left-aligned list. */
@media screen and (width <= 1023px) {
  .off-canvas-wrapper .site-navigation {
    justify-content: flex-start !important;
    height: auto !important;
    align-items: stretch !important;

    /* top padding clears the absolutely-positioned logo + close button header */
    padding: 104px 0 32px !important;
  }

  .off-canvas-wrapper .site-navigation > li {
    margin-bottom: 2px !important;
    height: auto !important;
  }

  .off-canvas-wrapper .site-navigation a {
    text-align: left !important;
    padding: 14px 28px !important;
  }

  /* Contact Us CTA (last item, a gold pill): it was small (14px) and centered,
     clashing with the left-aligned 21px items. Make it a prominent left-aligned
     button with breathing room above. */
  .off-canvas-wrapper .site-navigation > li:last-child {
    text-align: left !important;
    margin-top: 22px !important;
  }

  .off-canvas-wrapper .site-navigation > li:last-child > a {
    display: inline-block !important;
    margin-left: 28px !important;
    font-size: 1.0625rem !important;
    padding: 15px 44px !important;
  }

  /* Submenu chevron (e.g. Program Description): the theme's 16px ::after pinned
     to the screen edge — make it bigger and inset to line up with item padding. */
  .off-canvas-wrapper .site-navigation > li.menu-item-has-children::after {
    width: 24px !important;
    height: 24px !important;
    right: 24px !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* The panel moves focus to the logo on open, painting an ugly box around it.
     The logo is an obvious, large target; drop its focus ring (items keep theirs). */
  .off-canvas-wrapper .site-header__logo:focus { outline: none; }

  .off-canvas-wrapper a:focus:not(:focus-visible),
  .off-canvas-wrapper button:focus:not(:focus-visible) { outline: none; }
}

/* Contrast: the coral eyebrow labels (.banner-subtitle, e.g. "WHY SAFE
   HARBOURS") were salmon #f78f8b on white = 2.27:1 (fails WCAG AA). Darken to
   an accessible deep coral (~5.4:1). These labels sit only on light sections. */
.banner-subtitle,
.banner-subtitle strong {
  color: #c0392b !important;
}

/* Inline form error (replaces native alert()) — see forms-bridge.js. */
.mirror-form-error {
  display: block;
  margin: 12px 0 0;
  color: #b3261e;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
}
.mirror-form-error:empty { display: none; }

/* "Files" footer link — our internal file tool, deliberately NOT in the main
   nav, so give it a catchy on-brand treatment (gold + folder glyph + subtle
   pill) to draw the eye against the white footer links. Gold #ffc700 on the
   slate footer (#394254) is ~10:1 contrast — comfortably AAA. */
.site-footer #menu-item-files > a {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: #ffc700 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 4px 12px !important;
  border: 1px solid rgb(255 199 0 / 45%);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.site-footer #menu-item-files > a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23ffc700'%3E%3Cpath%20d='M10%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-image 0.15s ease;
}

.site-footer #menu-item-files > a:hover,
.site-footer #menu-item-files > a:focus-visible {
  background-color: #ffc700;
  color: #394254 !important;
  text-decoration: none;
}

/* swap the folder glyph to slate on hover so it stays visible on the gold fill */
.site-footer #menu-item-files > a:hover::before,
.site-footer #menu-item-files > a:focus-visible::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23394254'%3E%3Cpath%20d='M10%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

/* ===========================================================================
   Clean forms (.sh-form) — replaces the mirrored Gravity Forms markup. Styled
   to the Safe Harbours brand (coral #f78f8c focus, gold .button submit, slate
   #394254 text). Inputs keep a white field + dark text so they read on BOTH the
   dark footer (newsletter) and the light page sections; labels inherit the
   surrounding text colour. Powered by /assets/forms.js.
   =========================================================================== */
.sh-form { width: 100%; }
.sh-form .sh-field { margin: 0 0 16px; text-align: left; }

.sh-form .sh-field > label {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;

  /* Set explicitly: the theme sets a dark label colour that would otherwise win
     over inheritance (made footer labels black-on-slate). Light page sections
     keep slate; the footer override below switches to white. */
  color: #394254;
}
.sh-form .sh-req { color: #e74c3c; }

.sh-form input[type='text'],
.sh-form input[type='email'],
.sh-form input[type='tel'],
.sh-form textarea,
.sh-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: #394254;
  background: #fff;
  border: 1px solid #c9ced8;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sh-form textarea { min-height: 120px; resize: vertical; }

.sh-form input::placeholder,
.sh-form textarea::placeholder { color: #8b93a3; }

.sh-form input:focus,
.sh-form textarea:focus,
.sh-form select:focus {
  outline: none;
  border-color: #f78f8c;
  box-shadow: 0 0 0 3px rgb(247 143 140 / 35%);
}

.sh-form .sh-field--err input,
.sh-form .sh-field--err textarea,
.sh-form .sh-field--err select { border-color: #d93025; }

.sh-form .sh-err {
  display: block;
  min-height: 0;
  margin-top: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c0392b;
}
.sh-form .sh-err:empty { display: none; }
.sh-form .sh-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sh-form .sh-form-row > .sh-field { flex: 1 1 200px; }
.sh-form .sh-form-disclaimer { font-size: 0.8rem; opacity: 0.85; margin: 4px 0 14px; }

/* visually-hidden honeypot */
.sh-form .sh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* the Turnstile widget gets a little breathing room above the button */
.sh-form .cf-turnstile { margin: 4px 0 14px; }

.sh-form button[type='submit'],
.sh-form input[type='submit'] { cursor: pointer; }
.sh-form button[type='submit'][disabled] { opacity: 0.6; cursor: default; }

.sh-form .sh-form-error {
  margin: 12px 0 0;
  font-weight: 700;
  font-size: 0.92rem;
  color: #c0392b;
}
.sh-form .sh-form-error:empty { display: none; }

/* Inline success state (replaces the form on a successful submit). */
.sh-form-ok {
  text-align: center;
  padding: 28px 20px;
  animation: sh-ok-in 0.3s ease both;
}
.sh-form-ok p { margin: 12px 0 0; font-size: 1.05rem; line-height: 1.5; }

.sh-ok-check {
  width: 56px; height: 56px;
  stroke: #2e7d32; stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

@keyframes sh-ok-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* On the dark slate footer the newsletter form needs lighter error text + a
   readable disclaimer; labels already inherit the footer's white text. */
.site-footer .sh-form .sh-field > label { color: #fff; }

/* The footer keeps the theme's dark input fill, so the TEXT must be white — the
   email field was rendering slate-on-slate (invisible). !important + the
   -webkit- property override the theme (and fix Safari, which honours
   -webkit-text-fill-color over color). */
.site-footer .sh-form input,
.site-footer .sh-form textarea {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

.site-footer .sh-form input::placeholder,
.site-footer .sh-form textarea::placeholder {
  color: rgb(255 255 255 / 55%);
  -webkit-text-fill-color: rgb(255 255 255 / 55%);
}

.site-footer .sh-form .sh-err,
.site-footer .sh-form .sh-form-error { color: #ffb4ab; }
.site-footer .sh-form .sh-form-disclaimer { color: rgb(255 255 255 / 80%); }
.site-footer .sh-form-ok p { color: #fff; }
.site-footer .sh-ok-check { stroke: #ffc700; }