/* ==========================================================================
   SARAD — header & footer, redesigned
   --------------------------------------------------------------------------
   The header and footer now carry their own `sh-` / `sf-` markup, so none of
   the theme's chrome CSS reaches them. Content is unchanged: same menu from
   core_menus, same social links, same contact email, same footer columns and
   copyright, same logo at the same size.
   ========================================================================== */

.sh, .sf {
  --a:      #647839;
  --a-dk:   #4E5E2C;
  --a-soft: #EFF2E8;
  --ink:    #2a2c6f;
  --ink-2:  #21235A;
  --body:   #6A6D78;
  --rule:   #E3E5F0;
  --panel:  #FFFFFF;
  --wrap:   1180px;
  --display: Raleway, "Segoe UI", Arial, sans-serif;
  --text:    "Open Sans", "Segoe UI", Arial, sans-serif;
  font-family: var(--text);
}
.sh *, .sf *, .sh *::before, .sf *::before { box-sizing: border-box; }

.sh-wrap, .sf-wrap {
  width: 100%; max-width: var(--wrap);
  margin: 0 auto; padding: 0 24px;
}

/* ================================================================ header == */

.sh { position: relative; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--rule); overflow: visible; }

/* --- utility bar --- */
/* Light utility strip. Text takes the ink, not white — on a #f1f1f1 ground
   white type is invisible. */
.sh-top {
  background: #F1F1F1;
  border-bottom: 1px solid #E3E5F0;
  color: var(--ink);
  font-size: 13px;
}
.sh-top-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 6px 24px; padding: 8px 24px;
}
.sh-top a { color: var(--ink); text-decoration: none; }
.sh-top a:hover { color: var(--a); }

.sh-contact, .sh-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sh-social-label { color: #6E7192; }
.sh-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--ink);
  transition: background .15s, color .15s;
}
.sh-social a:hover { background: var(--a); color: #fff; }

/* --- logo + nav row ---
   A narrow bar with the logo centred and lifted out of the flow, so the mark
   keeps its full size while the bar itself stays shallow. The header must not
   clip, or the overhang would be cut off. */

.sh-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  /* min-height: 62px; */
}

.sh-nav {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.sh-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.sh-menu-left  { justify-content: flex-start; }
.sh-menu-right { justify-content: flex-end; }

/* The mark is centred on the bar and overhangs it, so the bar stays shallow
   while the logo keeps its full size. .sh-logo-slot holds the middle column
   open so the two menu halves never run underneath it. */
.sh-logo {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: block;
  line-height: 0;

  /* A raised disc. The ring is a light-to-shade gradient so the edge catches
     the light at the top-left and falls into shadow at the bottom-right —
     that gradient across the rim is what reads as depth. The layered shadows
     lift it off the bar it overhangs. */
  padding: 8px;
  border-radius: 100%;
  /* A wider stop range across the rim gives a stronger sense of a curved,
     polished edge than an even gradient would. */
  background: linear-gradient(145deg,
    #FFFFFF 0%,
    #F6F7FC 22%,
    #DDE0EE 44%,
    #FFFFFF 56%,
    #C2C6DD 82%,
    #A8ADCA 100%);
  box-shadow:
    0 1px 1px rgba(42,44,111,.10),
    0 10px 22px -8px rgba(42,44,111,.38),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(42,44,111,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Specular highlight: a soft crescent of light across the upper-left of the
   rim, which is what makes a raised disc look polished rather than merely
   shadowed. Decorative, so it never intercepts a click. */
.sh-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100%;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 28% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 26%, rgba(255,255,255,0) 52%),
    radial-gradient(90% 70% at 76% 92%, rgba(42,44,111,.10) 0%, rgba(42,44,111,0) 55%);
}

.sh-logo:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 1px 1px rgba(42,44,111,.10),
    0 16px 30px -8px rgba(42,44,111,.45),
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(42,44,111,.10);
}

/* The mark sits on a clean white disc inside the ring. */
.sh-logo img {
  width: 132px;
  height: 132px;
  max-width: none;
  display: block;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 100%;
  padding: 9px;
  box-shadow: inset 0 2px 6px rgba(42,44,111,.12);
}

@media (prefers-reduced-motion: reduce) {
  .sh-logo, .sh-logo:hover { transition: none; transform: translateX(-50%); }
}
.sh-logo-slot { display: block; width: 156px; }

.sh-item { position: relative; }
.sh-item > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 0;
  font-family: var(--text);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.sh-item > a:hover,
.sh-item.is-active > a,
.sh-item.is-open > a { color: var(--a); border-bottom-color: var(--a); }

.sh-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .65;
  transition: transform .16s;
}
.sh-item.is-open .sh-caret { transform: rotate(180deg); }

/* --- dropdown / megamenu panel --- */
.sh-panel {
  position: absolute;
  top: 100%; left: 0;
  min-width: 260px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--a);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 22px 50px -24px rgba(37,40,58,.5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.sh-item:hover > .sh-panel,
.sh-item:focus-within > .sh-panel,
.sh-item.is-open > .sh-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.sh-panel-inner { display: flex; gap: 26px; padding: 22px 24px; }

/* A megamenu spans the container and can hold several link columns plus an
   image, rather than a single narrow list. */
.sh-mega {
  width: min(760px, calc(100vw - 48px));
}
/* Anchor each panel to whichever edge keeps it on screen. */
.sh-menu-left  .sh-panel { left: 0; right: auto; }
.sh-menu-right .sh-panel { left: auto; right: 0; }
.sh-mega .sh-panel-inner { padding: 26px 28px; }

.sh-sub {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 2px 26px;
  align-content: start;
}
.sh-sub a {
  display: block;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--body);
  text-decoration: none;
}
.sh-sub a:hover { background: var(--a-soft); color: var(--a-dk); }
.sh-sub a[aria-current="page"] { color: var(--a); font-weight: 700; }

.sh-feature { flex: 0 0 230px; margin: 0; }
.sh-feature img {
  width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; display: block;
  border-radius: 8px;
}
.sh-feature figcaption {
  margin-top: 9px;
  font-family: var(--display);
  font-size: 13px; font-weight: 700;
  color: var(--ink);
}

/* --- mobile --- */
.sh-toggle {
  display: none; margin-left: auto;
  align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--text); font-size: 14px; font-weight: 700;
  color: var(--ink); cursor: pointer;
}

@media (max-width: 1024px) {
  .sh-bar { flex-wrap: wrap; align-items: center; padding-top: 8px; padding-bottom: 8px; }
  .sh-toggle { display: inline-flex; order: 2; margin-left: auto; }

  .sh-nav {
    order: 3;
    flex: 1 1 100%;
    display: none;
    grid-template-columns: 1fr;
    padding-bottom: 12px;
  }
  .sh-nav.is-open { display: block; }

  /* On mobile the logo sits normally at the left of the bar rather than
     overhanging a bar it would dwarf. */
  .sh-bar > .sh-logo,
  .sh-nav > .sh-logo {
    /* position: static; */
    order: 1;
    width: auto;
    align-self: center;
  }
  .sh-nav > .sh-logo { display: none; }
  .sh-logo img { position: static; transform: none; width: 92px; height: 92px; padding: 6px; }
  .sh-logo { padding: 4px; }

  .sh-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .sh-item > a { padding: 13px 0; justify-content: space-between; border-bottom: 1px solid var(--rule); }
  .sh-item > a:hover, .sh-item.is-active > a { border-bottom-color: var(--rule); }

  /* On touch there is no hover, so panels open on tap via the JS below. */
  .sh-panel, .sh-mega {
    position: static; width: auto; min-width: 0;
    border: none; box-shadow: none; border-radius: 0;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    background: #FAFBFC;
  }
  .sh-item.is-open > .sh-panel { display: block; }
  .sh-panel-inner { flex-direction: column; padding: 10px 0 14px 12px; gap: 14px; }
  .sh-sub { grid-template-columns: 1fr !important; }
  .sh-feature { display: none; }
}

/* ================================================================ footer ==
   Same content as the original: logo, the association's text, social icons,
   the footer menu, the subscribe field and the copyright line.

   Light, in keeping with the rest of the site — a faint tint of the brand ink
   rather than a dark slab, separated from the page by a rule and an olive
   hairline. Colours are literal here because the shared custom properties were
   being overridden somewhere in the theme cascade. */

.sf {
  background: #F4F5FA;
  border-top: 3px solid #647839;
  color: #5B5E7E;
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
}
.sf * { box-sizing: border-box; }
.sf a { color: #2A2C6F; text-decoration: none; transition: color .15s; }
.sf a:hover { color: #647839; }

.sf-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* --- brand block --- */
.sf-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 0 32px;
}

.sf-logo { display: block; line-height: 0; }
.sf-logo img { width: 118px; height: auto; }

.sf-about {
  margin-top: 22px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.85;
  color: #5B5E7E;
}
.sf-about p { margin: 0 0 10px; }
.sf-about p:last-child { margin-bottom: 0; }

.sf-social { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; padding: 0; }
.sf-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E3E5F0;
  color: #2A2C6F;
}
.sf-social a:hover { background: #647839; border-color: #647839; color: #fff; }

/* --- utility row: footer menu + subscribe --- */
.sf-utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 26px 0 38px;
  border-top: 1px solid #E3E5F0;
}

.sf-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0; padding: 0;
}
.sf-nav li { margin: 0; }
.sf-nav a { font-size: 14.5px; font-weight: 700; }
.sf-nav a[aria-current="page"] { color: #647839; }

.sf-subscribe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sf-subscribe input {
  min-width: 240px;
  padding: 11px 15px;
  font-family: inherit;
  font-size: 14px;
  color: #2A2C6F;
  background: #FFFFFF;
  border: 1px solid #D8DBEA;
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
}
.sf-subscribe input::placeholder { color: #9295B4; }
.sf-subscribe input:focus {
  outline: none;
  border-color: #647839;
  box-shadow: 0 0 0 3px rgba(100,120,57,.14);
}

.sf-btn {
  padding: 11px 24px;
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  color: #fff;
  background: #647839;
  border: 1px solid #647839;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sf-btn:hover { background: #4E5E2C; border-color: #4E5E2C; }

/* Visually hidden label, so the field is still announced. */
.sf-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- base bar --- */
.sf-base { background: #EAECF5; border-top: 1px solid #E3E5F0; }
.sf-base-inner {
  padding-top: 16px; padding-bottom: 16px;
  font-size: 13px;
  color: #6E7192;
  text-align: center;
}
.sf-base-inner a { font-weight: 700; }

@media (max-width: 700px) {
  .sf-utility { justify-content: center; text-align: center; }
  .sf-nav ul { justify-content: center; }
  .sf-subscribe { justify-content: center; width: 100%; }
  .sf-subscribe input { min-width: 0; flex: 1 1 200px; }
}

/* =========================================================== page banner ==
   Shared by seven templates with identical markup (an <h1> and a .bread-crumb
   list), so this restyles all of them without touching any of that markup.

   Light, like the rest of the site: a faint tint of the brand ink rather than
   a dark block, with the configured image held well back as texture. The theme
   scaled that image to cover, and since the stored image is the association's
   emblem it produced a random crop of the logo behind every title. */

.page-banner {
  position: relative;
  padding: 62px 0 56px;
  background: #F4F5FA;
  border-bottom: 1px solid #E3E5F0;
  overflow: hidden;
}

.page-banner .image-layer {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .1;
  filter: saturate(.5);
}

/* The theme's torn-paper edge fights the flat band. */
.page-banner .bottom-rotten-curve,
.page-banner .bottom-rotten-curve.alternate { display: none; }

.page-banner .auto-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-banner h1 {
  margin: 0;
  font-family: Raleway, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #2A2C6F;
  text-align: left;
}

.page-banner .bread-crumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.page-banner .bread-crumb li { display: flex; align-items: center; gap: 8px; color: #7A7D9E; }
.page-banner .bread-crumb li + li::before { content: "/"; color: #B9BCD2; }
.page-banner .bread-crumb a { color: #2A2C6F; text-decoration: none; }
.page-banner .bread-crumb a:hover { color: #647839; text-decoration: underline; }
.page-banner .bread-crumb li.active { color: #647839; }

/* The theme styles the crumb link at .page-banner .bread-crumb li a, which
   outranks a rule written one level shallower — hence the washed-out "Home". */
.page-banner .bread-crumb li a { color: #2A2C6F; font-weight: 700; }
.page-banner .bread-crumb li a:hover { color: #647839; }
.page-banner .bread-crumb li.active { color: #647839; }