/* ============================================================
   WILDMAN - Layout
   Header, navigation, drawer, footer, cards, pagination.
   ============================================================ */

.wm-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(3, 5, 8, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--wm-border);
  transition: box-shadow var(--wm-transition);
}
.wm-header.is-stuck { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

.wm-utility { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.wm-utility__inner {
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding: 5px var(--wm-gutter);
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 18px;
}
.wm-utility__place {
  font-family: var(--wm-font-body);
  font-size: 12px;
  color: var(--wm-text-muted);
  margin-right: auto;
}
.wm-utility a {
  font-family: var(--wm-font-heading);
  font-size: 12px;
  font-weight: var(--wm-weight-medium);
  color: var(--wm-text-muted);
}
.wm-utility a:hover { color: var(--wm-text); }
.wm-utility__links { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }

.wm-nav {
  max-width: var(--wm-maxw);
  margin-inline: auto;
  padding: 0 var(--wm-gutter);
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
}
.wm-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.wm-logo img { height: 26px; width: auto; }

.wm-nav__list {
  display: none;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.wm-nav__item { position: relative; }
.wm-nav__list .wm-nav__item--has-dropdown { padding-block: 26px; }

.wm-nav__link {
  font-family: var(--wm-font-heading);
  font-size: 14px;
  font-weight: var(--wm-weight-medium);
  color: var(--wm-text-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
}
.wm-nav__link:hover, .wm-nav__link.is-current { color: var(--wm-text); }
.wm-nav__chevron { transition: transform var(--wm-transition); }
.wm-nav__item.is-open .wm-nav__chevron { transform: rotate(180deg); }

.wm-nav__dropdown {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 238px;
  background: rgba(6, 10, 18, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-card);
  padding: 8px;
  box-shadow: var(--wm-shadow-deep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .24s var(--wm-ease-spring),
              transform .24s var(--wm-ease-spring),
              visibility .24s;
}
.wm-nav__item.is-open .wm-nav__dropdown { opacity: 1; visibility: visible; transform: none; }
.wm-nav__dropdown ul { margin: 0; padding: 0; list-style: none; }
.wm-nav__sublink {
  display: block;
  padding: 9px 13px;
  border-radius: 9px;
  font-family: var(--wm-font-heading);
  font-size: 13px;
  font-weight: var(--wm-weight-medium);
  color: var(--wm-text-secondary);
}
.wm-nav__sublink:hover, .wm-nav__sublink.is-current {
  background: rgba(90, 155, 255, 0.09);
  color: var(--wm-text);
}

.wm-nav__cta { flex-shrink: 0; }

/* flex-shrink matters here: without it the toggle was the only flexible item
   left in the bar and got squeezed to 14px, which clipped the hamburger out
   of sight and pushed its stroke past the right edge of the screen. */
.wm-nav__toggle {
  background: transparent;
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-btn);
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-text);
}
.wm-nav__toggle:hover { border-color: var(--wm-border-hover); }
.wm-nav__toggle > span { display: flex; }
.wm-nav__toggle .wm-nav__toggle-close { display: none; }
.wm-nav__toggle[aria-expanded="true"] {
  border-color: var(--wm-border-hover);
  background: rgba(90, 155, 255, 0.08);
}
.wm-nav__toggle[aria-expanded="true"] .wm-nav__toggle-open { display: none; }
.wm-nav__toggle[aria-expanded="true"] .wm-nav__toggle-close { display: flex; }

@media (min-width: 1000px) {
  .wm-nav__list { display: flex; }
  .wm-nav__toggle { display: none; }
}

/* Under 640px the logo and the hamburger are the whole bar. The call to
   action is not lost - it is the first thing in the drawer. Carrying it in
   the row is what pushed the header past the viewport and made every page
   scroll sideways. */
@media (max-width: 639px) {
  .wm-nav__cta { display: none; }
  .wm-nav { min-height: 64px; gap: 12px; }
  .wm-logo img { height: 24px; }
  /* The utility strip put five 14px-tall targets across the top of a phone.
     Its links move into the drawer instead. */
  .wm-utility { display: none; }
  .wm-drawer { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); }
}

/* Mobile drawer.
   Submenus are collapsed accordions here, not the always-open wrap they
   used to be: eight sub-links spilling out under every parent made the
   panel unreadable and buried the call to action below the fold. */
.wm-drawer {
  border-top: 1px solid var(--wm-border);
  background: rgba(3, 5, 8, 0.98);
  padding: 6px var(--wm-gutter) 28px;
  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: wmUp .3s var(--wm-ease-spring) both;
}
.wm-drawer[hidden] { display: none; }
.wm-drawer__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
/* Direct children only - the walker reuses .wm-nav__item for submenu rows,
   so a descendant selector ruled a line above every sublink too. */
.wm-drawer__list > .wm-nav__item + .wm-nav__item { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* A parent is a link plus its own chevron button, so tapping the label still
   opens the section page and only the chevron expands the children. */
.wm-drawer__row { display: flex; align-items: center; gap: 8px; }
.wm-drawer__row .wm-nav__link { flex: 1 1 auto; min-width: 0; }

.wm-drawer .wm-nav__link {
  font-family: var(--wm-font-heading);
  font-size: 18px;
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-text);
  line-height: 1.25;
  padding: 14px 0;
  display: block;
}
.wm-drawer .wm-nav__link.is-current { color: var(--wm-blue-bright); }

.wm-drawer__expand {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  border-radius: var(--wm-radius-sm);
  color: var(--wm-text-muted);
}
.wm-drawer__expand svg { transition: transform var(--wm-transition); }
.wm-drawer__expand[aria-expanded="true"] { color: var(--wm-text); }
.wm-drawer__expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.wm-drawer .wm-nav__dropdown {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
  min-width: 0;
  padding: 0 0 14px;
}
.wm-drawer .wm-nav__dropdown[hidden] { display: none; }
.wm-drawer .wm-nav__dropdown ul { display: flex; flex-direction: column; gap: 2px; }
.wm-drawer .wm-nav__sublink {
  font-family: var(--wm-font-body);
  font-size: 15px;
  color: var(--wm-text-secondary);
  padding: 10px 0 10px 15px;
  border-left: 1px solid var(--wm-border);
  border-radius: 0;
}
.wm-drawer .wm-nav__sublink:hover,
.wm-drawer .wm-nav__sublink.is-current {
  background: none;
  color: var(--wm-blue-bright);
  border-left-color: var(--wm-blue-bright);
}

.wm-drawer__utility {
  display: flex;
  flex-direction: column;
  margin: 14px 0 0;
  padding: 12px 0 0;
  list-style: none;
  border-top: 1px solid var(--wm-border);
}
.wm-drawer__utility a {
  display: block;
  padding: 11px 0;
  font-family: var(--wm-font-heading);
  font-size: 15px;
  font-weight: var(--wm-weight-medium);
  color: var(--wm-text-secondary);
}
.wm-drawer__utility a:hover { color: var(--wm-text); }

.wm-drawer__phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  font-family: var(--wm-font-heading);
  font-size: 16px;
  font-weight: var(--wm-weight-semibold);
  color: var(--wm-text);
}
.wm-drawer__phone svg { color: var(--wm-blue-bright); flex-shrink: 0; }

/* From 640px the utility bar is back in the header, so the drawer copies
   would be duplicates. */
@media (min-width: 640px) {
  .wm-drawer__utility,
  .wm-drawer__phone { display: none; }
}

.wm-drawer .wm-btn { width: 100%; justify-content: center; margin-top: 22px; }

body.wm-drawer-open { overflow: hidden; }

@media (min-width: 1000px) { .wm-drawer { display: none !important; } }

/* Footer */

.wm-footer {
  background: var(--wm-bg);
  border-top: 1px solid var(--wm-border);
  padding: clamp(56px, 7vw, 92px) var(--wm-gutter) 0;
  --wm-fg: var(--wm-text);
  --wm-fg-soft: var(--wm-text-secondary);
  --wm-fg-muted: var(--wm-text-muted);
  --wm-rule: var(--wm-border);
}
.wm-footer__inner { max-width: var(--wm-maxw); margin-inline: auto; }
/* One column by default and the design grid from 900px up.
   The old single rule had a 240px + 150px + gap floor of 418px, so on a
   phone the nav columns were laid out past the edge and the footer clipped
   them - the links were on the page but unreachable. */
.wm-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 560px) {
  .wm-footer__top { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  .wm-footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .wm-footer__top { grid-template-columns: minmax(min(240px, 100%), 1.4fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .wm-footer__brand { grid-column: auto; }
}
.wm-footer__logo img { height: 28px; width: auto; }
.wm-footer__blurb {
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-sm);
  color: var(--wm-text-secondary);
  margin-top: 16px;
  max-width: 34ch;
  line-height: 1.65;
}
.wm-footer__contact { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: var(--wm-text-sm); }
.wm-footer__contact a, .wm-footer__contact span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--wm-text-muted);
  font-family: var(--wm-font-body);
}
.wm-footer__contact a:hover { color: var(--wm-text); }

.wm-footer__col h2 {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-xs);
  font-weight: var(--wm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--wm-blue-bright);
  margin-bottom: 16px;
}
.wm-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wm-footer__col a { font-family: var(--wm-font-body); font-size: var(--wm-text-sm); color: var(--wm-text-secondary); }
.wm-footer__col a:hover { color: var(--wm-text); }

.wm-footer__bottom {
  border-top: 1px solid var(--wm-border);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.wm-footer__copy { font-family: var(--wm-font-body); font-size: 13px; color: var(--wm-text-muted); margin-right: auto; }
.wm-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; }
.wm-footer__legal a { font-size: 13px; color: var(--wm-text-muted); font-family: var(--wm-font-body); }
.wm-footer__legal a:hover { color: var(--wm-text); }

.wm-social { display: flex; gap: 10px; }
.wm-social a {
  width: 36px;
  height: 36px;
  border: 1px solid var(--wm-border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-text-muted);
  transition: border-color var(--wm-transition), color var(--wm-transition);
}
.wm-social a:hover { border-color: var(--wm-border-hover); color: var(--wm-text); }

/* Resource cards */

.wm-rcard {
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-card);
  background: var(--wm-surface-card);
  overflow: hidden;
  transition: border-color var(--wm-transition), transform var(--wm-transition-spring);
}
.wm-rcard__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.wm-rcard__link:hover { color: inherit; }
.wm-rcard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #04070d; }
/* Imagify rewrites the thumbnail to <picture class="wm-rcard__img"><img></picture>,
   so the sizing has to reach the inner <img> too. Without the descendant rule
   that <img> keeps its intrinsic ratio and leaves a gap under the crop. */
.wm-rcard__img,
.wm-rcard__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wm-rcard__img { transition: transform .6s var(--wm-ease-spring); }
.wm-rcard:hover .wm-rcard__img { transform: scale(1.04); }
.wm-rcard__media-fallback {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(12, 86, 191, 0.22), rgba(3, 5, 8, 0.85)),
    radial-gradient(circle at 70% 30%, rgba(27, 174, 205, 0.25), transparent 60%);
}
.wm-rcard__body { padding: var(--wm-space-md); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.wm-rcard__title {
  font-family: var(--wm-font-heading);
  font-size: var(--wm-text-lg);
  font-weight: var(--wm-weight-semibold);
  line-height: 1.3;
  color: var(--wm-fg);
}
.wm-rcard__excerpt { font-family: var(--wm-font-body); font-size: var(--wm-text-sm); line-height: 1.6; color: var(--wm-fg-soft); }
.wm-rcard__meta {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  gap: 8px;
  font-family: var(--wm-font-body);
  font-size: var(--wm-text-xs);
  color: var(--wm-fg-muted);
}

/* Pagination */

.wm-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(40px, 5vw, 64px);
}
.wm-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  justify-content: center;
  border: 1px solid var(--wm-rule);
  border-radius: var(--wm-radius-btn);
  font-family: var(--wm-font-heading);
  font-size: 14px;
  font-weight: var(--wm-weight-medium);
  color: var(--wm-fg-soft);
  transition: border-color var(--wm-transition), background var(--wm-transition), color var(--wm-transition);
}
.wm-pagination .page-numbers:hover { border-color: var(--wm-border-hover); color: var(--wm-fg); }
.wm-pagination .page-numbers.current {
  background: var(--wm-gradient-blue);
  border-color: transparent;
  color: #fff;
}
.wm-pagination .dots { border-color: transparent; }
.wm-flip { transform: rotate(180deg); }

/* Page header */

.wm-pagehead {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 9vw, 124px) var(--wm-gutter) clamp(52px, 7vw, 96px);
  border-bottom: 1px solid var(--wm-border);
  background: linear-gradient(180deg, rgba(12, 86, 191, 0.11), transparent 72%);
}
.wm-pagehead__inner { max-width: var(--wm-maxw); margin-inline: auto; }
.wm-pagehead h1 { margin-top: 22px; }
.wm-pagehead .wm-lead { margin-top: 22px; max-width: 52ch; }

/* Resource filter tabs */

.wm-tabs {
  border-bottom: 1px solid var(--wm-border);
  background: var(--wm-bg);
  padding: clamp(28px, 3.4vw, 44px) var(--wm-gutter);
}
.wm-tabs__inner { max-width: var(--wm-maxw); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 10px; }
.wm-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-pill);
  font-family: var(--wm-font-heading);
  font-size: 13px;
  font-weight: var(--wm-weight-medium);
  color: var(--wm-text-secondary);
  transition: all var(--wm-transition);
}
.wm-tab:hover { border-color: var(--wm-border-hover); color: var(--wm-text); }
.wm-tab.is-active { background: var(--wm-gradient-blue); border-color: transparent; color: #fff; }
/* ============================================================
   Footer - corrected against the design
   ============================================================ */

.wm-footer { position: relative; overflow: hidden; }
/* A 1px gradient hairline along the top edge. */
.wm-footer__hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 155, 255, 0.55), rgba(27, 174, 205, 0.4), transparent);
  pointer-events: none;
}

/* One very subtle glow, centred and sitting mostly below the footer so
   only its upper edge lifts the middle of the band. Flat elsewhere. */
.wm-footer__glow {
  position: absolute;
  width: 620px;
  height: 620px;
  left: 50%;
  bottom: -72%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(12, 86, 191, 0.16) 0%, transparent 66%);
  pointer-events: none;
}
.wm-footer__inner { position: relative; z-index: 2; }

/* Brand contact links carry a blue icon in the design. */
.wm-footer__contact a svg { color: var(--wm-blue-bright); flex-shrink: 0; }
.wm-footer__contact a { align-items: center; }

/* Column headings are small caps labels. */
.wm-footer__col h2 {
  font-family: var(--wm-font-heading);
  font-size: 11px;
  font-weight: var(--wm-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wm-blue-bright);
  margin-bottom: 16px;
}
.wm-footer__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wm-footer__col a { font-family: var(--wm-font-body); font-size: var(--wm-text-sm); color: var(--wm-text-secondary); }
.wm-footer__col a:hover { color: var(--wm-text); }

/* Tagline band: gradient triangle beside the positioning line. */
.wm-footer__tagline {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--wm-border);
}
.wm-footer__triangle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--wm-gradient-triangle);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.wm-footer__tagline p {
  font-family: var(--wm-font-heading);
  font-size: clamp(16px, 1.8vw, 23px);
  font-weight: var(--wm-weight-semibold);
  letter-spacing: -0.015em;
  color: var(--wm-text);
  line-height: 1.4;
  text-wrap: balance;
}

/* Bottom bar. Legal links sit with the copyright. */
.wm-footer__bottom {
  padding: 22px 0 30px;
  border-top: 1px solid var(--wm-border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  justify-content: space-between;
}
.wm-footer__copy { font-family: var(--wm-font-body); font-size: 13px; color: var(--wm-text-muted); margin: 0; }
.wm-footer__legal { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; margin-right: auto; }
.wm-footer__legal a { font-family: var(--wm-font-body); font-size: 13px; color: var(--wm-text-muted); }
.wm-footer__legal a:hover { color: var(--wm-text); }

/* Social buttons are 44px in the design, with a blue-tinted hover. */
.wm-social a {
  width: 44px;
  height: 44px;
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wm-text-secondary);
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
.wm-social a:hover {
  border-color: var(--wm-border-hover);
  background: rgba(12, 86, 191, 0.12);
  color: var(--wm-text);
}

/* The corner wash behind an inner-page header. */
.wm-pagehead__glow {
  position: absolute;
  width: 680px;
  height: 680px;
  right: -14%;
  top: -46%;
  background: radial-gradient(circle, rgba(12, 86, 191, 0.24) 0%, transparent 66%);
  pointer-events: none;
}
.wm-pagehead__inner { position: relative; }
.wm-pagehead__actions { margin-top: 32px; }
.wm-pagehead .wm-badge--outline { letter-spacing: 0.13em; background: rgba(90, 155, 255, 0.06); }


/* Phone tap targets. The footer link rows were 14-22px tall; padding
   lifts each to roughly 40px without changing the desktop rhythm. */
@media (max-width: 639px) {
  .wm-footer__col ul { gap: 0; }
  .wm-footer__col a { display: block; padding: 9px 0; }
  .wm-footer__contact { gap: 0; }
  .wm-footer__contact a { padding: 9px 0; }
  .wm-footer__legal { gap: 0 18px; }
  .wm-footer__legal a { display: block; padding: 8px 0; }
}