/* Site header and footer (2026-09-30), shared by every page — the rebuilt ones and the ~350
   captured Elementor ones alike. It replaces Elementor templates 10414 (header) and 10421 (footer)
   at build time, so it has to hold its own against two stylesheets it does not control: the
   hello-elementor theme resets (pink `a`, bordered rounded `button`) and the Elementor kit. Every
   rule here is class-scoped under .gs-header / .gs-footer and sets what it needs explicitly. */

.gs-header, .gs-footer {
  --gs-navy-950: #040a17;
  --gs-navy-900: #060f21;
  --gs-navy-800: #0b1933;
  --gs-orange: #fa4616;
  --gs-orange-text: #cc3800;
  --gs-blue: #0021a5;
  --gs-ice: #eaf3ff;
  --gs-x: clamp(16px, 3vw, 34px);
  font-family: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.gs-header *, .gs-footer *, .gs-header *::before, .gs-footer *::before { box-sizing: border-box; }
.gs-header ul, .gs-footer ul { list-style: none; margin: 0; padding: 0; }
.gs-header a, .gs-footer a { color: inherit; text-decoration: none; }
/* The reset is (0,1,1); every button rule below is prefixed with .gs-header so it outranks it. */
.gs-header button { all: unset; box-sizing: border-box; cursor: pointer; font: inherit; color: inherit; }
.gs-header :focus-visible, .gs-footer :focus-visible { outline: 3px solid var(--gs-orange); outline-offset: 3px; }
.gs-header img, .gs-footer img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; }

/* ─── Header ─────────────────────────────────────────────────────────────────────────────── */
.gs-header { position: sticky; top: 0; z-index: 1000; background: var(--gs-navy-900); border-bottom: 2px solid var(--gs-orange); }
.admin-bar .gs-header { top: 32px; }

.gs-topbar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px;
  padding: 7px var(--gs-x); background: var(--gs-navy-950);
  font-size: .72rem; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.gs-topbar a:hover { color: #fff; }
.gs-topbar__k { color: #ff9f80; margin-right: 6px; font-weight: 700; }
.gs-topbar__acct { color: #fff; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: rgba(250,70,22,.9) !important; }
@media (max-width: 640px) { .gs-topbar__acct { display: none; } .gs-topbar { gap: 2px 16px; font-size: .66rem; letter-spacing: 1.2px; } }

.gs-bar {
  display: flex; align-items: center; gap: 24px;
  max-width: 1400px; margin: 0 auto; padding: 0 var(--gs-x);
  min-height: 76px;
}
.gs-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.gs-brand img { width: 58px; height: 58px; }
.gs-brand__name {
  font-size: .82rem; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; line-height: 1.15;
}

.gs-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.gs-menu { display: flex; align-items: stretch; }
.gs-item { position: relative; }
.gs-header .gs-top {
  display: flex; align-items: center; gap: 7px; height: 76px; padding: 0 14px;
  font-size: .95rem; font-weight: 600; letter-spacing: .2px; color: #fff;
}
button.gs-top::after {
  content: ""; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .2s ease;
}
.gs-top:hover, .gs-item.is-open > .gs-top { color: #ffb59c; }
.gs-top[aria-current="page"], .gs-item.is-current > .gs-top { box-shadow: inset 0 -3px 0 var(--gs-orange); }
.gs-item--donate .gs-top { color: #ffb59c; }

.gs-cta {
  display: inline-flex; align-items: center; padding: 14px 22px;
  background: var(--gs-orange-text); color: #fff !important;
  font-size: .8rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap;
  transition: background-color .15s ease;
}
.gs-cta:hover { background: #a82d00; }

.gs-header .gs-toggle { display: none; }

/* Desktop dropdowns: a panel of links beside one photograph. */
@media (min-width: 1100px) {
  .gs-panel {
    position: absolute; top: 100%; left: 0; z-index: 10;
    display: grid; grid-template-columns: minmax(260px, 1fr) 220px; gap: 22px;
    width: 600px; padding: 22px; margin-top: 2px;
    background: #fff; color: #2f3b52;
    box-shadow: 0 18px 40px -12px rgba(4,10,23,.45);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s linear .25s;
  }
  .gs-panel--small { grid-template-columns: 1fr; width: 240px; }
  .gs-item:hover > .gs-panel, .gs-item:focus-within > .gs-panel, .gs-item.is-open > .gs-panel {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
  }
  .gs-item:hover > button.gs-top::after, .gs-item.is-open > button.gs-top::after { transform: rotate(225deg); margin-top: 3px; }
  .gs-menu > .gs-item:nth-last-child(-n+4) .gs-panel { left: auto; right: 0; }
}
.gs-links a {
  display: block; padding: 10px 12px; font-size: .98rem; font-weight: 600; color: var(--gs-blue);
  border-bottom: 1px solid #e3e3e3;
}
.gs-links li:last-child a { border-bottom: 0; }
.gs-links a small { display: block; margin-top: 2px; font-size: .78rem; font-weight: 400; color: #5f6a7d; letter-spacing: 0; }
.gs-links a:hover { background: var(--gs-ice); color: var(--gs-orange-text); }
.gs-links a[aria-current="page"] { color: var(--gs-orange-text); }
.gs-feature { position: relative; display: block; overflow: hidden; align-self: stretch; background: var(--gs-navy-800); }
.gs-feature img { width: 100%; height: 100% !important; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.gs-feature span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  background: linear-gradient(0deg, rgba(4,10,23,.9), rgba(4,10,23,0));
  color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.gs-feature:hover img { transform: scale(1.05); }

/* Phones and tablets: one button, one full-height panel, sections that open in place. */
@media (max-width: 1099px) {
  .gs-bar { min-height: 64px; }
  .gs-brand img { width: 48px; height: 48px; }
  .gs-header .gs-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 12px 4px;
    font-size: .8rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  }
  .gs-toggle__bars, .gs-toggle__bars::before, .gs-toggle__bars::after {
    display: block; width: 22px; height: 2px; background: #fff; position: relative; transition: transform .25s ease, background .2s;
  }
  .gs-toggle__bars::before, .gs-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .gs-toggle__bars::before { top: -7px; } .gs-toggle__bars::after { top: 7px; }
  .gs-toggle[aria-expanded="true"] .gs-toggle__bars { background: transparent; }
  .gs-toggle[aria-expanded="true"] .gs-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
  .gs-toggle[aria-expanded="true"] .gs-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

  .gs-nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--gs-header-h, 100px);
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 8px var(--gs-x) 32px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--gs-navy-900);
  }
  .gs-header.is-open .gs-nav { display: flex; }
  .gs-menu { flex-direction: column; }
  .gs-item { border-bottom: 1px solid rgba(255,255,255,.14); }
  .gs-header .gs-top { width: 100%; height: auto; padding: 18px 0; justify-content: space-between; font-size: 1.2rem; }
  .gs-item.is-open > button.gs-top::after { transform: rotate(225deg); margin-top: 3px; }
  .gs-panel { display: none; padding: 0 0 14px; }
  .gs-item.is-open > .gs-panel { display: block; }
  .gs-links a { color: #fff; border-bottom-color: rgba(255,255,255,.1); padding: 12px 0 12px 14px; }
  .gs-links a small { color: rgba(255,255,255,.66); }
  .gs-links a:hover { background: transparent; color: #ffb59c; }
  .gs-feature { display: none; }
  .gs-cta { justify-content: center; margin-top: 24px; padding: 18px; }
  html.gs-lock, html.gs-lock body { overflow: hidden; }
}

/* ─── Footer ─────────────────────────────────────────────────────────────────────────────── */
.gs-footer { background: var(--gs-navy-950); }
.gs-reel { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; background: var(--gs-navy-950); }
.gs-reel img { width: 100%; aspect-ratio: 1 / 1; height: auto !important; object-fit: cover; filter: saturate(.9); transition: filter .4s ease, opacity .4s ease; }
.gs-reel:hover img { opacity: .85; }
.gs-reel img:hover { opacity: 1; filter: saturate(1.1); }
.gs-reel__tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 12px 20px; background: var(--gs-navy-950); color: #fff;
  font-size: .8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 700px) { .gs-reel { grid-template-columns: repeat(3, 1fr); } }

.gs-foot { max-width: 1320px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--gs-x) 28px; }
.gs-foot__lead { display: grid; gap: 20px 36px; align-items: center; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.14); }
@media (min-width: 900px) { .gs-foot__lead { grid-template-columns: 96px 1fr auto; } }
.gs-foot__emblem { width: 96px; height: 96px; }
.gs-foot__line { margin: 0; max-width: 34ch; font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.25; color: #fff; }
.gs-foot__lead .gs-cta { justify-self: start; }

.gs-foot__cols { display: grid; gap: 32px 24px; padding: 40px 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gs-foot__cols { grid-template-columns: repeat(3, 1fr) 1.3fr; } }
.gs-footer h2 {
  margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: #ff9f80; font-family: inherit; line-height: 1.3;
}
.gs-foot__cols li { margin: 0 0 10px; }
.gs-foot__cols a { font-size: 1rem; color: rgba(255,255,255,.86); line-height: 1.4; }
.gs-foot__cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gs-orange); }
.gs-social { display: flex; gap: 10px; margin-top: 16px !important; }
.gs-social a { display: grid; place-items: center; width: 42px; height: 42px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.gs-social a:hover { background: var(--gs-orange-text); box-shadow: none; }
.gs-social svg { width: 20px; height: 20px; fill: #fff; }

.gs-foot__badges {
  display: flex; flex-wrap: wrap; gap: 8px 0; padding: 18px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.gs-foot__badges li { padding: 0 16px; }
.gs-foot__badges li:first-child { padding-left: 0; }
.gs-foot__badges li + li { border-left: 1px solid rgba(255,255,255,.25); }
@media (max-width: 600px) { .gs-foot__badges li { padding: 2px 12px 2px 0; } .gs-foot__badges li + li { border-left: 0; } }

.gs-foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; font-size: .85rem; color: rgba(255,255,255,.7); }
.gs-foot__legal p { margin: 0; }
.gs-foot__legal ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.gs-foot__legal a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gs-header *, .gs-footer * { transition: none !important; }
}

/* hello-elementor paints every focused or hovered button (`[type=button]:hover`, 0,2,0) and the
   kit adds a gradient. The menu triggers are text, not buttons, whatever their element. */
.gs-header button.gs-top, .gs-header button.gs-top:hover, .gs-header button.gs-top:focus, .gs-header button.gs-top:active,
.gs-header .gs-toggle, .gs-header .gs-toggle:hover, .gs-header .gs-toggle:focus {
  background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important;
}

/* Same GTM rule as .gwp-btn--as-written: the conversion matches this label case-sensitively. */
.gs-footer .gs-cta--as-written { text-transform: none; letter-spacing: .3px; font-size: .95rem; }