/**
 * Kisharon Langdon — kl-global.css
 * Global brand styles for the kl-child theme
 * All visual styles live here; style.css is intentionally minimal.
 */

/* ── Hello Elementor reset.css override ─────────────────────────────────────
   hello-elementor/assets/css/reset.css sets background-color:#c36 on every
   button/input hover & focus state. We match the exact selector list so our
   rule wins on load order (same specificity, later stylesheet). Individual
   component hover rules (more specific selectors) then apply on top as normal.
*/
[type=button]:focus, [type=button]:hover,
[type=submit]:focus, [type=submit]:hover,
button:focus, button:hover {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {
  --navy:      #0E3957;
  --mint:      #89C9B2;
  --yellow:    #FCEE21;
  --orange:    #EE7203;
  --white:     #FFFFFF;
  --offwhite:  #F8F7F4;
  --text-dark: #1A2E3B;
  --text-mid:  #4A6070;
  --gradient:  linear-gradient(90deg, #EE7203 0%, #FCEE21 50%, #89C9B2 100%);
  --gradient-r:linear-gradient(90deg, #89C9B2 0%, #FCEE21 50%, #EE7203 100%);
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(14,57,87,0.10);
  --shadow-lg: 0 8px 40px rgba(14,57,87,0.15);
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-serif:'DM Serif Text', Georgia, serif;
  --max-w:     1240px;
}

/* ═══════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: var(--font-sans); color: var(--text-dark); background: var(--white); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img   { display: block; max-width: 100%; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }

/* ─── Override Hello Elementor's header max-width constraint ─── */
/* Hello Elementor sets max-width: 1240px on .site-header:not(.dynamic-header) —
   we need the background to bleed full width; the inner .nav-main handles centering */
.site-header:not(.dynamic-header),
.site-header {
  max-width: 100% !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════ */
.container        { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.gradient-bar     { height: 4px; background: var(--gradient); }
.gradient-divider { width: 200px; height: 4px; background: var(--gradient); margin: 28px auto; border-radius: 2px; }

/* Buttons */
.btn              { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 50px; font-family: var(--font-sans); font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; }
.btn-primary      { background: var(--orange); color: var(--white); }
.btn-primary:hover{ background: var(--orange); color: var(--white); transform: scale(1.04); box-shadow: 0 8px 24px rgba(238,114,3,0.45); }
.btn-secondary    { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-white        { background: var(--white); color: var(--navy); }
.btn-white:hover  { background: var(--offwhite); }
.btn-ghost-white  { background: transparent; color: var(--white) !important; border-color: rgba(255,255,255,0.6); }
.btn-ghost-white:hover { background: rgba(255,255,255,0.15); border-color: var(--white); color: var(--white) !important; }

/* Typography helpers */
.section-label  { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }
.section-title  { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--navy); line-height: 1.15; }
.section-title--white { color: var(--white); }
.section-intro  { font-size: 1.2rem; color: var(--text-mid); max-width: 580px; margin-top: 16px; line-height: 1.7; }

/* Image placeholder */
.img-placeholder { background: var(--mint); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-placeholder svg { opacity: 0.25; }

/* Colour photo placeholder helpers */
.ph-navy  { background: var(--navy); }
.ph-mint  { background: linear-gradient(135deg, #7abfa5, #89C9B2); }
.ph-warm  { background: linear-gradient(135deg, #f5e6d3, #EE7203); }
.ph-yellow{ background: linear-gradient(135deg, #fffbe0, #FCEE21); }
.ph-people{ background: linear-gradient(160deg, #e8f4f0 0%, #89C9B2 60%, #0E3957 100%); }
.ph-news1 { background: linear-gradient(135deg, #0E3957 0%, #1a5478 100%); }
.ph-news2 { background: linear-gradient(135deg, #EE7203 0%, #f5a347 100%); }
.ph-news3 { background: linear-gradient(135deg, #89C9B2 0%, #5ab09a 100%); }

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
  background: var(--navy);
  color: rgba(255,255,255,0.85);
  font-size: 0.875rem;
  font-weight: 500;
}
.top-bar .container { display: flex; align-items: center; justify-content: flex-end; padding-top: 8px; padding-bottom: 8px; }
.top-bar a { color: rgba(255,255,255,0.85); transition: color 0.15s; }
.top-bar a:hover { color: var(--mint); }
.top-bar__left  { display: flex; gap: 20px; align-items: center; }
.top-bar__right { display: flex; gap: 20px; align-items: center; }
.top-bar__divider { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }
.top-bar__social { display: flex; align-items: center; gap: 5px; }
.top-bar__social svg { flex-shrink: 0; }
.top-bar__icon-btn { display: flex; align-items: center; color: rgba(255,255,255,0.85); transition: color 0.15s; }
.top-bar__icon-btn:hover { color: var(--mint); }
.accessibility-btn { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.accessibility-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   HEADER / PRIMARY NAV
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(14,57,87,0.08);
}
.nav-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  height: 72px;
}
.nav-logo    { display: flex; align-items: center; }
.nav-logo img { height: 60px; width: auto; }
/* WP custom logo wrapper */
.nav-logo .custom-logo-link img { height: 44px; width: auto; display: block; }
/* Compact nostrap logo — shown only on mobile/tablet nav breakpoint */
.nav-logo__compact { display: none; height: 44px; width: auto; }

.nav-links          { display: flex; align-items: center; gap: 2px; }
.nav-links > li     { position: relative; }
.nav-links > li > a { display: flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px; font-size: 1rem; font-weight: 600; color: var(--navy); transition: all 0.15s; white-space: nowrap; }
.nav-links > li > a:hover,
.nav-links > li > a.active { background: rgba(14,57,87,0.06); color: var(--navy); }
.nav-links > li > a svg { width: 14px; height: 14px; opacity: 0.5; transition: transform 0.2s; }
.nav-links > li:hover > a svg { transform: rotate(180deg); opacity: 0.8; }
/* Invisible hover bridge — tall enough to cover the gap to the mega menu */
.nav-links > li::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 40px; display: none; }
.nav-links > li:hover::after { display: block; }

/* Donate CTA in nav */
.nav-donate-link  { background: var(--orange) !important; color: var(--white) !important; border-radius: 50px !important; padding: 8px 20px !important; }
.nav-donate-link:hover { background: #d4650a !important; }

/* ─── MEGA MENUS ─── */
.mega-menu { position: absolute; top: calc(100% + 33px); left: 50%; transform: translateX(-50%); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid rgba(14,57,87,0.08); min-width: 520px; padding: 24px; display: none; z-index: 200; }
.nav-links > li:hover .mega-menu { display: block; }

/* Size variants */
.mega-menu--about { min-width: 260px; padding: 8px; }
.mega-menu--wide  { min-width: 880px; }

/* About: simple link list */
.mm-about-link { display: block; padding: 9px 14px; border-radius: 8px; font-size: 0.93rem; font-weight: 600; color: var(--navy); text-decoration: none; transition: background 0.12s, color 0.12s; margin: 1px 4px; }
.mm-about-link:hover { background: var(--offwhite); color: var(--orange); }

/* Two-panel layout */
.mm-panel      { display: flex; gap: 0; min-height: 220px; }
.mm-panel__left { width: 220px; flex-shrink: 0; border-right: 1px solid rgba(14,57,87,0.08); padding: 4px 0; }
.mm-panel__right { flex: 1; padding: 8px 0 8px 24px; }
.mm-panel__img  { width: 220px; flex-shrink: 0; border-radius: 0 8px 8px 0; overflow: hidden; min-height: 220px; }
.mm-panel__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: 0 8px 8px 0; }

/* L2 nav items */
.mm-l2 { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; border-radius: 8px; text-decoration: none; font-size: 0.93rem; font-weight: 600; color: var(--navy); margin: 1px 4px; transition: background 0.12s, color 0.12s; position: relative; }
.mm-l2:hover, .mm-l2.is-active { background: var(--offwhite); color: var(--orange); }
.mm-l2.is-active::after { content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: rgba(14,57,87,0.12); }
.mm-l2__arrow { color: var(--navy); opacity: 0.2; flex-shrink: 0; font-size: 0.75rem; transition: opacity 0.12s; }
.mm-l2:hover .mm-l2__arrow, .mm-l2.is-active .mm-l2__arrow { opacity: 0.5; color: var(--orange); }

/* L3 panes */
.mm-pane { display: none; }
.mm-pane.is-visible { display: block; }
.mm-pane__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.mm-pane__desc  { font-size: 0.9rem; color: var(--text-mid); line-height: 1.55; max-width: 340px; margin-bottom: 12px; }
.mm-pane__cta   { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--navy); text-decoration: none; transition: color 0.15s; }
.mm-pane__cta:hover { color: var(--orange); }
.mm-pane ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 8px; }
.mm-pane ul.single-col { columns: 1; }
.mm-pane ul li a { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 16px; border-radius: 7px; font-size: 0.9rem; font-weight: 500; color: var(--text-mid); text-decoration: none; transition: background 0.15s, color 0.15s; position: relative; break-inside: avoid; }
.mm-pane ul li a::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
.mm-pane ul li a:hover { background: var(--offwhite); color: var(--navy); }

/* ─── MOBILE MENU BUTTON ─── */
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--navy); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.mobile-menu-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── MOBILE NAV DRAWER ─── */
.mobile-nav { display: none; position: fixed; top: 0; right: 0; width: min(380px, 90vw); height: 100dvh; background: var(--white); z-index: 1201; overflow-y: auto; overscroll-behavior: contain; box-shadow: -4px 0 40px rgba(14,57,87,0.18); transform: translateX(100%); transition: transform 0.3s ease; flex-direction: column; }
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__overlay { display: none; position: fixed; inset: 0; background: rgba(14,57,87,0.45); z-index: 1200; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.mobile-nav__overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(14,57,87,0.08); }
.mobile-nav__logo  { height: 36px; width: auto; }
.mobile-nav__close { background: none; border: none; cursor: pointer; font-size: 1.4rem; color: var(--navy); padding: 4px 8px; line-height: 1; }

/* Override Hello Elementor #c36 red on mobile nav buttons */
.mobile-menu-btn:hover,
.mobile-menu-btn:focus,
.mobile-nav__toggle:hover,
.mobile-nav__toggle:focus,
.mobile-nav__close:hover,
.mobile-nav__close:focus {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--navy) !important;
}
.mobile-nav__list  { list-style: none; padding: 8px 0; margin: 0; }
.mobile-nav__item  { border-bottom: 1px solid rgba(14,57,87,0.06); }
.mobile-nav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 20px; background: none; border: none; cursor: pointer; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; color: var(--navy); text-align: left; }
.mobile-nav__toggle svg { transition: transform 0.2s; flex-shrink: 0; }
.mobile-nav__toggle.is-open svg { transform: rotate(180deg); }
.mobile-nav__link { display: block; padding: 14px 20px; font-size: 1rem; font-weight: 700; color: var(--navy); text-decoration: none; }
.mobile-nav__sub  { list-style: none; padding: 0; margin: 0; background: var(--offwhite); display: none; }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub li a { display: block; padding: 11px 20px 11px 32px; font-size: 0.9rem; font-weight: 600; color: var(--text-mid); text-decoration: none; border-top: 1px solid rgba(14,57,87,0.05); transition: color 0.15s; }
.mobile-nav__sub li a:hover { color: var(--orange); }
.mobile-nav__sub-group { border-top: 1px solid rgba(14,57,87,0.06); margin-top: 2px; padding-top: 2px; }
.mobile-nav__sub-label { display: block; padding: 8px 20px 3px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--orange); }
.mobile-nav__sub-sub { list-style: none; margin: 0; padding: 0 0 4px; }
.mobile-nav__sub-sub li a { display: block; padding: 7px 20px 7px 40px; font-size: 0.875rem; color: var(--text-mid); text-decoration: none; transition: color 0.15s; }
.mobile-nav__sub-sub li a:hover { color: var(--orange); }
.mobile-nav__footer { padding: 20px; border-top: 1px solid rgba(14,57,87,0.08); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mobile-nav__footer .btn { text-align: center; justify-content: center; width: 100%; }
.mobile-nav__utility { padding: 14px 20px 20px; border-top: 1px solid rgba(14,57,87,0.08); background: var(--offwhite); }
.mobile-nav__utility-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }
.mobile-nav__utility-links a { font-size: 0.78rem; font-weight: 600; color: var(--text-mid); text-decoration: none; transition: color 0.15s; white-space: nowrap; }
.mobile-nav__utility-links a:hover { color: var(--orange); }
.mobile-nav__utility-icons { display: flex; gap: 16px; align-items: center; }
.mobile-nav__utility-icons a { color: var(--text-mid); transition: color 0.15s; display: flex; align-items: center; }
.mobile-nav__utility-icons a:hover { color: var(--orange); }

/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER
   ═══════════════════════════════════════════════════════════════ */
.hero          { background: var(--navy); min-height: 45vh; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.hero__slide   { display: none; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; width: 100%; flex: 1; }
.hero__slide.is-active { display: grid; }
.hero__content { display: flex; flex-direction: column; justify-content: center; padding: 52px 48px 52px 0; padding-left: calc((100vw - var(--max-w)) / 2 + 32px); position: relative; z-index: 2; }
.hero__label   { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); color: var(--mint); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 50px; margin-bottom: 20px; width: fit-content; }
.hero__title   { font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 3.8rem); color: var(--white); line-height: 1.1; margin-bottom: 18px; }
.hero__title em { font-style: italic; color: var(--mint); }
.hero__subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.75); line-height: 1.7; max-width: 480px; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__image   { position: relative; overflow: hidden; }
/* Scoped to .hero to beat .elementor img { height: auto } in Elementor's frontend.min.css */
.hero .hero__image img,
.hero .hero__image .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__image .img-ph { background: linear-gradient(135deg, rgba(137,201,178,0.3) 0%, rgba(14,57,87,0.6) 100%); display: flex; align-items: center; justify-content: center; }
.hero__image::after { display: none; }
.hero__gradient-accent { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--gradient); z-index: 3; }
.hero__controls { position: absolute; bottom: 16px; right: calc((100vw - var(--max-w)) / 2 + 32px); display: flex; align-items: center; gap: 10px; z-index: 10; }
.hero__dot     { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; transition: background 0.2s, transform 0.2s; padding: 0; flex-shrink: 0; }
.hero__dot.is-active { background: var(--white); transform: scale(1.3); }
.hero__arrow   { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: var(--white); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s; line-height: 1; }
.hero__arrow:hover { background: rgba(255,255,255,0.3); }

/* ═══════════════════════════════════════════════════════════════
   SOCIAL BAR
   ═══════════════════════════════════════════════════════════════ */
.social-bar { background: var(--white); border-top: 1px solid rgba(14,57,87,0.08); padding: 32px 0; }
.social-bar .container { display: flex; align-items: center; justify-content: space-between; }
.social-bar__text { font-size: 1rem; font-weight: 600; color: var(--navy); }
.social-bar__links { display: flex; gap: 12px; }
.social-bar__link { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--offwhite); color: var(--navy); transition: all 0.15s; font-size: 1.1rem; font-weight: 700; }
.social-bar__link:hover { background: var(--navy); color: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   HERO — PAGE-LEVEL (single column, used on inner pages)
   ═══════════════════════════════════════════════════════════════ */
.page-hero { background: var(--navy); padding: 64px 0; position: relative; overflow: hidden; }
.page-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
.page-hero__title { font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--white); line-height: 1.1; margin-bottom: 18px; }
.page-hero__subtitle { font-size: 1.15rem; color: rgba(255,255,255,0.75); line-height: 1.7; max-width: 480px; margin-bottom: 32px; }
.page-hero__image { border-radius: var(--radius-lg); overflow: hidden; }
.page-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--gradient); }

/* ═══════════════════════════════════════════════════════════════
   PORTRAIT STRIP
   ═══════════════════════════════════════════════════════════════ */
.portrait-strip { display: flex; width: 100%; height: 300px; overflow: hidden; }
.portrait-strip__item { flex: 1; min-width: 0; overflow: hidden; }
.portrait-strip__item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER BAND
   ═══════════════════════════════════════════════════════════════ */
.newsletter-band { background: var(--navy); padding: 35px 0; }
.newsletter-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.newsletter-band__text { font-family: var(--font-serif); font-size: 1.25rem; color: var(--white); white-space: nowrap; margin: 0; }
.newsletter-band__cta  { display: inline-flex; align-items: center; gap: 8px; padding: 35px 24px; border-radius: 50px; background: var(--orange); color: var(--white); font-family: var(--font-sans); font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background 0.15s; }
.newsletter-band__cta:hover { background: var(--orange); color: var(--white); transform: scale(1.04); box-shadow: 0 8px 24px rgba(238,114,3,0.45); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer { background: #091F2F; color: rgba(255,255,255,0.75); }
.footer__top { padding: 64px 0 48px; }
.footer__top .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer__logo { margin-bottom: 20px; }
.footer__logo svg { height: 36px; width: auto; filter: brightness(0) invert(1); }
.footer__tagline   { font-size: 0.875rem; line-height: 1.65; max-width: 280px; color: rgba(255,255,255,0.55); }
.footer__col-title { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint); margin-bottom: 18px; }
.footer__col ul    { list-style: none; padding: 0; margin: 0; }
.footer__col ul li { margin-bottom: 10px; }
.footer__col ul li a { font-size: 0.875rem; color: rgba(255,255,255,0.65); transition: color 0.15s; }
.footer__col ul li a:hover { color: var(--white); }
/* WP-generated nav wrappers */
.footer__col nav > ul { list-style: none; padding: 0; margin: 0; }
.footer__col nav > ul li a { font-size: 0.875rem; color: rgba(255,255,255,0.65); transition: color 0.15s; text-decoration: none; }
.footer__col nav > ul li a:hover { color: var(--white); }
.footer__col nav > ul li { margin-bottom: 10px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0; }
.footer__bottom .container { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.footer__bottom-text { font-size: 0.8rem; color: rgba(255,255,255,0.4); }
.footer__bottom-text a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.15s; }
.footer__bottom-text a:hover { color: var(--white); }
.footer__logos { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
.footer__logos img { height: 42px; width: auto; background: rgba(255,255,255,0.92); border-radius: 6px; padding: 4px 8px; opacity: 0.9; transition: opacity 0.15s; }
.footer__logos img:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════════ */
.kl-breadcrumb { font-size: 0.875rem; color: var(--text-mid); padding: 16px 0; }
.kl-breadcrumb a { color: var(--navy); font-weight: 600; }
.kl-breadcrumb .sep { opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .footer__top .container { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 1200px (mobile nav breakpoint)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .top-bar           { display: none; }
  .mobile-menu-btn   { display: flex; }
  .nav-links         { display: none; }
  .mobile-nav        { display: flex; }
  .mobile-nav__overlay { display: block; }
  /* Swap to compact nostrap logo so it doesn't squash */
  .nav-logo .custom-logo-link,
  .nav-logo > img:not(.nav-logo__compact) { display: none; }
  .nav-logo__compact { display: block !important; }
  .nav-main { padding: 0 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 768px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .hero__slide { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .hero__image { height: 240px; }
  .hero__content { padding: 48px 20px; }
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__image { display: none; }
  .footer__top .container { grid-template-columns: 1fr; gap: 32px; }
  .newsletter-band .container { flex-direction: column; gap: 14px; text-align: center; }
  .newsletter-band__text { white-space: normal; font-size: 1.1rem; }
  .portrait-strip { height: 200px; }
  .portrait-strip__item--desktop-only { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE — LAYOUT
   70/30 two-column layout used on service pages (Supported Living etc.)
   ═══════════════════════════════════════════════════════════════ */
.page-layout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 52px 32px 80px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start;
}

@media (max-width: 900px) {
  .page-layout {
    grid-template-columns: 1fr;
    padding: 36px 20px 60px;
    gap: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   INNER PAGE — MAIN CONTENT COLUMN
   ═══════════════════════════════════════════════════════════════ */
.page-content { min-width: 0; }

.page-content h2 {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--navy);
  line-height: 1.2;
  margin: 40px 0 14px;
}
.page-content h2:first-child { margin-top: 0; }

.page-content h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 26px 0 9px;
}

.page-content p {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--text-mid);
  margin-bottom: 16px;
}

.page-content ul {
  margin: 0 0 20px;
  padding-left: 0;
  list-style: none;
}
.page-content ul li {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-mid);
  padding: 5px 0 5px 24px;
  position: relative;
}
.page-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* ─── Section tag (inner page eyebrow) ─── */
.section-tag {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
  margin-top: 0px;
}

/* ─── Intro callout box ─── */
.intro-callout {
  background: #F2F9F6;
  border: 2px solid var(--mint);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  margin: 0 0 36px;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--navy);
  font-weight: 500;
}

/* ─── Photo block ─── */
.photo-block {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 28px 0;
  position: relative;
  height: 280px;
}
.photo-block img,
.photo-block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.photo-block__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(14,57,87,0.75));
  color: rgba(255,255,255,0.85);
  font-size: 0.825rem;
  padding: 40px 20px 16px;
}

/* ─── Journey / access steps ─── */
.journey-steps { margin: 28px 0; }

.journey-step {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #E4EAF0;
}
.journey-step:last-child { border-bottom: none; }

.journey-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.journey-step__title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 5px;
}
.journey-step p {
  font-size: 0.975rem;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.6;
}

/* ─── Video / stats inline block ─── */
.video-stats-block { padding: 72px 0; background: var(--white); }
.video-stats-block--inline { padding: 40px 0 8px; background: transparent; }

.video-stats-block__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.video-stats-block__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 12px;
}
.video-stats-block__title em { font-style: italic; }
.video-stats-block__body {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 20px;
}
.video-stats-block__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 4;
}
.video-stats-block__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── FAQ accordion ─── */
.faq-list { margin: 20px 0; }
.faq-item { border-bottom: 1px solid #DDE3EA; }

.faq-item summary {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  padding: 18px 36px 18px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--orange);
  font-weight: 300;
}
.faq-item[open] summary::after { content: '−'; }

.faq-item .faq-body { padding: 0 0 20px; }
.faq-item .faq-body p {
  font-size: 0.975rem;
  color: var(--text-mid);
  margin: 0;
  line-height: 1.65;
}

/* ─── Contact panel ─── */
.contact-panel {
  background: var(--navy);
  border-radius: var(--radius-lg);
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: stretch;
  overflow: hidden;
}
.contact-panel__body { padding: 32px 24px 32px 32px; }

.contact-panel__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 8px;
}
.contact-panel__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 10px;
}
.contact-panel p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
  line-height: 1.6;
}
.contact-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  padding: 32px 24px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.contact-panel__img {
  width: 200px;
  overflow: hidden;
}
.contact-panel__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

/* ─── Additional button variants for inner pages ─── */
.btn-mint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--mint);
  color: var(--navy);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
  white-space: nowrap;
}
.btn-mint:hover { background: #6ABFA5; color: var(--navy); }

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 11px 20px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,0.3);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.btn-outline-white:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
  color: var(--white);
}

/* ─── Responsive: inner page ─── */
@media (max-width: 768px) {
  .contact-panel {
    grid-template-columns: 1fr;
  }
  .contact-panel__img { display: none; }
  .contact-panel__actions {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 24px;
  }
  .video-stats-block__media { aspect-ratio: 16 / 6; }
}

/* ─── NAV BASKET (WooCommerce cart icon in header) ─── */
.nav-basket {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  color: var(--navy, #0E3957);
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-weight: 600; font-size: 0.88rem;
  padding: 6px 10px; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
  position: relative;
}
.nav-basket:hover { color: var(--orange, #EE7203); background: rgba(14,57,87,0.04); }
.nav-basket__label { white-space: nowrap; }
.nav-basket__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 50px;
  background: var(--orange, #EE7203); color: #fff;
  font-size: 0.65rem; font-weight: 800;
  opacity: 0; transform: scale(0);
  transition: opacity 0.2s, transform 0.2s;
}
.nav-basket__count.is-visible { opacity: 1; transform: scale(1); }
@media (max-width: 768px) { .nav-basket__label { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   KL CARD — shared journey-card / news-card / panel pattern
   Used on: Homepage How We Help, News grid, Employment links,
   Volunteering type cards, and any future grids/panels.
   All grids that show a card with image + tag + title + button
   should use these classes for visual consistency.
   ═══════════════════════════════════════════════════════════════ */
.kl-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kl-cards-grid--4col { grid-template-columns: repeat(4, 1fr); }
.kl-cards-grid--2col { grid-template-columns: repeat(2, 1fr); }

.journey-card {
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, #EE7203 0%, #FCEE21 50%, #89C9B2 100%) border-box;
  border: 2.5px solid transparent;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(14,57,87,0.07), 0 16px 40px rgba(14,57,87,0.14);
  transition: transform 0.22s, box-shadow 0.22s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
}
.journey-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 12px 20px rgba(14,57,87,0.1), 0 28px 60px rgba(14,57,87,0.2);
}
.journey-card__image { height: 200px; position: relative; overflow: hidden; }
.journey-card__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.journey-card:hover .journey-card__image img { transform: scale(1.04); }
.journey-card__body  { padding: 22px 22px 12px; flex: 1; display: flex; flex-direction: column; }
.journey-card__tag   { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.journey-card__title { font-family: var(--font-serif); font-size: 1.25rem; color: var(--navy); line-height: 1.3; margin-bottom: 10px; }
.journey-card__desc  { font-size: 0.975rem; color: var(--text-mid); line-height: 1.65; flex: 1; }
.journey-card__footer{ padding: 12px 22px 22px; }
.journey-card__link  {
  display: inline-block; padding: 11px 24px; border-radius: 50px;
  background: var(--orange); color: var(--white);
  font-size: 0.875rem; font-weight: 700; text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  position: relative; z-index: 1;
}
.journey-card__link:hover { background: #d4650a; transform: translateY(-1px); }

/* Full-card click — stretch the link's hit area to cover the whole card */
.journey-card__link::after,
.journey-card__link--cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Lock text white on all states so global link hover colour can't bleed in */
.journey-card__link,
.journey-card__link:hover,
.journey-card__link:focus {
  color: var(--white) !important;
  text-decoration: none !important;
}

@media (max-width: 900px) {
  .kl-cards-grid             { grid-template-columns: repeat(2, 1fr); }
  .kl-cards-grid--4col       { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .kl-cards-grid,
  .kl-cards-grid--4col,
  .kl-cards-grid--2col       { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   SINGLE POST TEMPLATE (single.php)
   ═══════════════════════════════════════════════════════════════ */
.post-hero {
  background: var(--navy);
  padding: 0;
  overflow: hidden;
  min-height: 340px;
  position: relative;
}
.post-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient);
}
.post-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  min-height: 340px;
}
.post-hero__text {
  padding: 48px 48px 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.post-hero__breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.875rem; color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}
.post-hero__breadcrumb a { color: var(--orange); text-decoration: none; }
.post-hero__breadcrumb a:hover { text-decoration: underline; }
.post-hero__breadcrumb span:last-child { color: rgba(255,255,255,0.8); }
.post-hero__date {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
.post-hero__title {
  font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--white); line-height: 1.15; margin: 0;
}
.post-hero__image {
  position: relative; overflow: hidden;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.post-hero__image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Post content body */
.post-body-wrap { padding: 72px 0 80px; background: var(--white); }
.post-body-inner { max-width: 780px; }
.post-body-inner h1,
.post-body-inner h2 { font-family: var(--font-serif); color: var(--navy); margin: 1.5em 0 0.6em; line-height: 1.2; }
.post-body-inner h3,
.post-body-inner h4 { color: var(--navy); margin: 1.4em 0 0.5em; line-height: 1.25; }
.post-body-inner p   { font-size: 1.075rem; color: var(--text-mid); line-height: 1.78; margin-bottom: 1.4em; }
.post-body-inner a   { color: var(--orange); text-decoration: underline; }
.post-body-inner a:hover { color: #d4650a; }
.post-body-inner ul,
.post-body-inner ol  { margin: 0 0 1.4em 1.5em; color: var(--text-mid); font-size: 1.075rem; line-height: 1.78; }
.post-body-inner li  { margin-bottom: 0.4em; }
.post-body-inner blockquote {
  border-left: 4px solid var(--mint); padding: 16px 24px;
  background: var(--offwhite); border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2em 0; font-size: 1.1rem; font-style: italic; color: var(--navy);
}
.post-body-inner figure { margin: 2em 0; }
.post-body-inner figure img { border-radius: var(--radius); width: 100%; }
.post-body-inner figcaption { font-size: 0.875rem; color: var(--text-mid); margin-top: 8px; text-align: center; }

/* Gutenberg alignleft / alignright */
.post-body-inner .alignleft  { float: left; margin: 0 28px 20px 0; max-width: 45%; }
.post-body-inner .alignright { float: right; margin: 0 0 20px 28px; max-width: 45%; }
.post-body-inner .aligncenter { text-align: center; }
.post-body-inner .wp-block-image img { border-radius: var(--radius); }
.post-body-inner::after { content: ''; display: table; clear: both; }

/* Back link */
.post-back-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 48px; padding: 12px 28px; border-radius: 50px;
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.post-back-link:hover { background: #d4650a; transform: translateY(-1px); }

/* Responsive — single post */
@media (max-width: 860px) {
  .post-hero__inner { grid-template-columns: 1fr; }
  .post-hero__image { clip-path: none; height: 240px; position: relative; }
  .post-hero__image img { position: absolute; }
  .post-hero__text  { padding: 40px 0 40px; }
  .post-hero { min-height: auto; }
}
@media (max-width: 600px) {
  .post-body-inner .alignleft,
  .post-body-inner .alignright { float: none; max-width: 100%; margin: 1em 0; }
}

/* ═══════════════════════════════════════════════════════════════
   NEWS LISTING PAGE
   ═══════════════════════════════════════════════════════════════ */
.kl-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.kl-news-pagination {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; padding-bottom: 16px;
}
.kl-news-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border-radius: 50px; font-weight: 700; font-size: 0.9rem;
  border: 2px solid var(--navy); color: var(--navy);
  text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kl-news-pagination .page-numbers.current,
.kl-news-pagination .page-numbers:hover {
  background: var(--orange); color: var(--white); border-color: var(--orange);
}
.kl-news-pagination .page-numbers.dots { border: none; cursor: default; }
@media (max-width: 860px) { .kl-news-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
   CARD GLOBAL OVERRIDES
   Applies the KL journey-card visual shell to all page-specific
   card classes site-wide. Grid column layouts are preserved —
   only visual presentation is standardised.
   Pages covered: get-involved, our-programme, jewish-life,
   social-enterprise, volunteer, shop, work-for-us.
   ═══════════════════════════════════════════════════════════════ */

/* ── SHARED CARD SHELL ─────────────────────────────────────────
   Gradient border + shadow + hover lift on all white card types.
   !important needed because Elementor page CSS loads after link tags.
   ─────────────────────────────────────────────────────────────── */
.pcard,
.ent-card-half,
.vol-type-card,
.vol-step,
.emp-prog-card,
.jl-celebrate__tile,
.category-card,
.page-type-card,
.product-card,
.wfu-hero__value-badge,
.wfu-culture__quote-card,
.provision-card,
.team-card {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, #EE7203 0%, #FCEE21 50%, #89C9B2 100%) border-box !important;
  border: 2.5px solid transparent !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(14,57,87,0.07), 0 16px 40px rgba(14,57,87,0.14) !important;
  transition: transform 0.22s, box-shadow 0.22s !important;
  cursor: pointer;
  position: relative;
}

/* Vacancies accordion: gradient border without overflow:hidden so panels expand freely.
   transition:none kills the page CSS border-color animation that caused an orange flash
   when rolling off after open/close. Shadow is instant — acceptable for an accordion. */
.wfu-vacancies__item,
.wfu-vacancies__item--open,
.wfu-vacancies__item:hover,
.wfu-vacancies__item--open:hover {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, #EE7203 0%, #FCEE21 50%, #89C9B2 100%) border-box !important;
  border: 2.5px solid transparent !important;
  border-color: transparent !important;
  border-radius: var(--radius-lg) !important;
  transition: none !important;
}
.wfu-vacancies__item,
.wfu-vacancies__item--open {
  box-shadow: 0 6px 10px rgba(14,57,87,0.07), 0 16px 40px rgba(14,57,87,0.14) !important;
}
.wfu-vacancies__item:hover,
.wfu-vacancies__item--open:hover {
  box-shadow: 0 12px 20px rgba(14,57,87,0.1), 0 28px 60px rgba(14,57,87,0.2) !important;
}

.pcard:hover,
.ent-card-half:hover,
.vol-type-card:hover,
.vol-step:hover,
.emp-prog-card:hover,
.jl-celebrate__tile:hover,
.category-card:hover,
.page-type-card:hover,
.product-card:hover,
.wfu-hero__value-badge:hover,
.wfu-culture__quote-card:hover,
.provision-card:hover,
.team-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 12px 20px rgba(14,57,87,0.1), 0 28px 60px rgba(14,57,87,0.2) !important;
}

/* ── REMOVE OLD COLOUR ACCENT BARS (gradient border replaces them) ──────── */
/* pcard had border-top: 4px solid per variant */
.pcard,
.pcard--orange,
.pcard--yellow,
.pcard--navy { border-top: 2.5px solid transparent !important; }

/* ent-card-half__body had border-top: 5px solid orange/yellow */
.ent-card-half__body { border-top: none !important; }

/* category-card had an inner .category-card__top div (6px coloured stripe) */
.category-card__top { display: none !important; }

/* ── IMAGE HOVER ZOOM ───────────────────────────────────────────────────── */
.pcard .pcard__image img,
.ent-card-half .ent-card-half__image img,
.product-card .product-card__image img { transition: transform 0.4s ease; }

.pcard:hover .pcard__image img,
.ent-card-half:hover .ent-card-half__image img,
.product-card:hover .product-card__image img { transform: scale(1.04); }

/* ── CTA BUTTONS — convert text links to orange pill buttons ────────────── */
.pcard__cta {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--orange) !important;
  color: var(--white) !important;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 24px !important;
  border-radius: 50px !important;
  margin-top: 4px;
  align-self: flex-start;
  transition: background 0.18s, transform 0.18s !important;
}
.pcard__cta:hover,
.pcard:hover .pcard__cta {
  background: #d4650a !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}

.ent-card-half__link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--orange) !important;
  color: var(--white) !important;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 24px !important;
  border-radius: 50px !important;
  margin-top: 8px;
  transition: background 0.18s, transform 0.18s !important;
}
.ent-card-half__link:hover {
  background: #d4650a !important;
  transform: translateY(-1px);
}

.vol-type-card__link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--orange) !important;
  color: var(--white) !important;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  margin-top: 12px;
  transition: background 0.18s !important;
}
.vol-type-card__link:hover { background: #d4650a !important; }

/* ── FULL-CARD CLICK — stretched link covers entire card ────────────────────
   The CTA link's ::after pseudo-element expands to cover the whole card
   (works because card has position:relative from the shared shell above).
   z-index:1 keeps the real button label above the overlay. ─────────────── */
.pcard__cta,
.ent-card-half__link,
.vol-type-card__link {
  position: relative !important;
  z-index: 1;
}
.pcard__cta::after,
.ent-card-half__link::after,
.vol-type-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── PREVENT DARK TEXT ON ORANGE BUTTON HOVER ───────────────────────────────
   Enforce white on all child elements across all states so global link hover
   colour and Elementor-generated CSS cannot bleed navy onto the button text. */
.pcard__cta,
.pcard__cta:hover,
.pcard__cta:hover *,
.pcard:hover .pcard__cta,
.pcard:hover .pcard__cta * {
  color: var(--white) !important;
  text-decoration: none !important;
}
.ent-card-half__link,
.ent-card-half__link:hover,
.ent-card-half__link:hover *,
.ent-card-half:hover .ent-card-half__link,
.ent-card-half:hover .ent-card-half__link * {
  color: var(--white) !important;
  text-decoration: none !important;
}
.vol-type-card__link,
.vol-type-card__link:hover,
.vol-type-card__link:hover * {
  color: var(--white) !important;
  text-decoration: none !important;
}

/* product-card add button: round pill to match site style */
.product-card__add--full { border-radius: 50px !important; }

/* ── TITLE TYPOGRAPHY — navy serif on icon-only cards ───────────────────── */
.vol-type-card__title,
.emp-prog-card__title,
.jl-celebrate__tile-name {
  font-family: var(--font-serif) !important;
  color: var(--navy) !important;
}

/* ── ICON AREAS — mint tint background ──────────────────────────────────── */
.vol-type-card__icon,
.emp-prog-card__icon {
  background: rgba(137,201,178,0.15) !important;
  border-radius: var(--radius) !important;
}

/* ── CARDS EXCLUDED FROM GLOBAL OVERRIDE (intentional design) ───────────────
   story-card: conflicting styles (navy on get-involved, white on social-enterprise)
   ent-card: full-width alternating horizontal layout — not a standard card grid
   ent-card-nc / shop-card / sweets-use-card: dark backgrounds — intentional
   vol-nav-card / page-type-card: full-bleed image overlay cards
   wfu-benefits__item / wfu-hero__value-badge: small checklist/badge items
   event-card: horizontal list layout
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) { .kl-news-grid { grid-template-columns: 1fr; } }

/* ─── Education page: provision-cards grid + card elements ─────────────────── */
.provision-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.provision-card {
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
}

.provision-card__img {
  height: 200px;
  overflow: hidden;
}

.provision-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}

.provision-card:hover .provision-card__img img { transform: scale(1.04); }

.provision-card__body {
  padding: 22px 22px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.provision-card__tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}

.provision-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 10px;
}

.provision-card__desc {
  font-size: 0.975rem;
  color: var(--text-mid);
  line-height: 1.65;
  flex: 1;
  margin-bottom: 0;
}

.provision-card__link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: var(--orange) !important;
  color: var(--white) !important;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 11px 24px !important;
  border-radius: 50px !important;
  margin: 16px 0 22px;
  align-self: flex-start;
  transition: background 0.18s, transform 0.18s !important;
  text-decoration: none !important;
}

.provision-card:hover .provision-card__link,
.provision-card__link:hover {
  background: #d4650a !important;
  color: var(--white) !important;
  transform: translateY(-1px);
}

@media (max-width: 900px) { .provision-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .provision-cards { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   404 NOT FOUND
   ═══════════════════════════════════════════════════════════════ */
.error404-hero {
  background: var(--navy);
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.error404-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient);
}
.error404-hero__inner { max-width: 680px; margin: 0 auto; }
.error404-hero__number {
  font-family: var(--font-serif);
  font-size: clamp(6rem, 18vw, 12rem);
  color: var(--mint);
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.6;
}
.error404-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
}
.error404-hero__text {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 36px;
}
.error404-hero__ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.error404-links {
  background: var(--offwhite);
  padding: 72px 0 80px;
}
.error404-links__heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
  text-align: center;
}
.error404-links__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.error404-link-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px;
  background: linear-gradient(var(--white), var(--white)) padding-box,
              linear-gradient(135deg, #EE7203 0%, #FCEE21 50%, #89C9B2 100%) border-box;
  border: 2.5px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.error404-link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.error404-link-card__label {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--navy);
}
.error404-link-card__desc {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .error404-links__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .error404-links__grid { grid-template-columns: 1fr; }
  .error404-hero { padding: 72px 0 64px; }
}

/* ═══════════════════════════════════════════════════════════════
   BODY COPY LINKS
   Targets inline links inside content areas — Elementor text
   editor widgets, inner page copy, and news post bodies.
   Excludes nav links, buttons, card CTAs, and footer links.
   ═══════════════════════════════════════════════════════════════ */
.page-content a:not(.btn),
.post-body-inner a:not(.btn),
.elementor-widget-text-editor a:not(.btn),
.elementor-text-editor a:not(.btn),
.wfu-vacancies__panel-inner a:not(.btn),
.gform_wrapper .gfield--type-html a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.page-content a:not(.btn):hover,
.post-body-inner a:not(.btn):hover,
.elementor-widget-text-editor a:not(.btn):hover,
.elementor-text-editor a:not(.btn):hover,
.wfu-vacancies__panel-inner a:not(.btn):hover,
.gform_wrapper .gfield--type-html a:hover {
  color: #d4650a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   GRAVITY FORMS — Global styles
   All .gform_wrapper instances site-wide.
   Tested against GF 2.5+ (CSS grid layout) and legacy versions.
   ═══════════════════════════════════════════════════════════════ */

/* ── WRAPPER & SPACING ──────────────────────────────────────── */
.gform_wrapper { font-family: var(--font-sans); }
.gform_wrapper .gfield { margin-bottom: 24px; }
.gform_wrapper .gform_body,
.gform_wrapper .gform_fields { margin: 0; padding: 0; }

/* ── LABELS ─────────────────────────────────────────────────── */
.gform_wrapper .gfield_label {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  display: block;
  line-height: 1.3;
}
.gform_wrapper .gfield_required { color: var(--orange); font-weight: 700; margin-left: 3px; }
.gform_wrapper .gfield_required_text { display: none; } /* hide "(required)" text label */

/* ── TEXT INPUTS / TEXTAREA / SELECT ────────────────────────── */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="search"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="time"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-dark);
  background: var(--white);
  border: 2px solid #C8D6DF;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.gform_wrapper textarea {
  height: auto;
  min-height: 140px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.6;
}
/* Custom arrow on select */
.gform_wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A6070' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
  cursor: pointer;
}
/* Focus */
.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="search"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper input[type="time"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14,57,87,0.14);
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: var(--text-mid); opacity: 0.7; }

/* ── DESCRIPTION / HELP TEXT ────────────────────────────────── */
.gform_wrapper .gfield_description {
  font-size: 0.875rem;
  color: var(--text-mid);
  margin-top: 7px;
  line-height: 1.5;
}

/* ── ERROR STATES ───────────────────────────────────────────── */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #C0392B !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.11) !important;
}
.gform_wrapper .gfield_error .gfield_label { color: #C0392B; }
.gform_wrapper .validation_message {
  font-size: 0.85rem;
  color: #C0392B;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.4;
}
.gform_wrapper .validation_error {
  background: #FFF0EF;
  border: 2px solid #C0392B;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 28px;
  font-size: 0.95rem;
  color: #7A1008;
  font-weight: 600;
  line-height: 1.5;
}

/* ── SUCCESS MESSAGE ────────────────────────────────────────── */
.gform_confirmation_message,
.gform_wrapper .gform_confirmation_message {
  background: #EAF7F2;
  border: 2px solid var(--mint);
  border-radius: var(--radius);
  padding: 24px 28px;
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.6;
}

/* ── RADIO BUTTONS ──────────────────────────────────────────── */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The <li> acts as the pill container */
.gform_wrapper .gfield_radio li,
.gform_wrapper .gfield_checkbox li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid #C8D6DF;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin: 0;
}
.gform_wrapper .gfield_radio li:hover,
.gform_wrapper .gfield_checkbox li:hover {
  border-color: var(--navy);
  background: var(--offwhite);
}
/* Highlight the selected pill */
.gform_wrapper .gfield_radio li:has(input:checked),
.gform_wrapper .gfield_checkbox li:has(input:checked) {
  border-color: var(--orange);
  background: rgba(238,114,3,0.05);
}
/* Label text inside the pill */
.gform_wrapper .gfield_radio li label,
.gform_wrapper .gfield_checkbox li label {
  flex: 1;
  font-size: 0.975rem;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

/* Custom input control (radio = circle, checkbox = square) */
.gform_wrapper .gfield_radio input[type="radio"],
.gform_wrapper .gfield_checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid #C8D6DF;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  margin: 0;
}
.gform_wrapper .gfield_radio input[type="radio"] { border-radius: 50%; }
.gform_wrapper .gfield_checkbox input[type="checkbox"] { border-radius: 5px; }

/* Radio: orange dot when checked */
.gform_wrapper .gfield_radio input[type="radio"]:checked {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 5px var(--orange);
  background: var(--white);
}
/* Checkbox: orange fill + white tick */
.gform_wrapper .gfield_checkbox input[type="checkbox"]:checked {
  border-color: var(--orange);
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
}
/* Keyboard focus ring */
.gform_wrapper .gfield_radio input[type="radio"]:focus-visible,
.gform_wrapper .gfield_checkbox input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ── CONSENT FIELD (single standalone checkbox) ─────────────── */
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  margin-top: 2px;
}
.gform_wrapper .ginput_container_consent label {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.55;
  cursor: pointer;
}

/* ── FILE UPLOAD ────────────────────────────────────────────── */
.gform_wrapper input[type="file"] {
  height: auto;
  padding: 10px 14px;
  border: 2px dashed #C8D6DF;
  border-radius: var(--radius);
  background: var(--offwhite);
  font-size: 0.9rem;
  color: var(--text-mid);
  cursor: pointer;
  width: 100%;
}
.gform_wrapper .gfield_fileupload_rules {
  font-size: 0.8rem;
  color: var(--text-mid);
  margin-top: 6px;
  line-height: 1.4;
}

/* ── SECTION BREAK (gsection) ───────────────────────────────── */
.gform_wrapper .gsection {
  border: none;
  border-bottom: 3px solid var(--offwhite);
  padding-bottom: 10px;
  margin-bottom: 8px !important;
}
.gform_wrapper .gsection_title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 6px;
  border: none;
  padding: 0;
}
.gform_wrapper .gsection_description {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.55;
}

/* ── PROGRESS BAR (multi-page) ──────────────────────────────── */
.gform_wrapper .gf_progressbar_wrapper { margin-bottom: 32px; }
.gform_wrapper .gf_progressbar {
  background: var(--offwhite);
  border: 1px solid #C8D6DF;
  border-radius: 50px;
  height: 10px;
  overflow: hidden;
}
.gform_wrapper .gf_progressbar_percentage {
  height: 100%;
  background: var(--gradient);
  border-radius: 50px;
  transition: width 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.gform_wrapper .gf_progressbar_percentage span { display: none; }
.gform_wrapper .percentbar_label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  margin-bottom: 6px;
}

/* ── SUBMIT BUTTON ──────────────────────────────────────────── */
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin-top: 32px;
  padding: 0;
  border: none;
  background: none;
}
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 36px !important;
  border-radius: 50px !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  border: 2px solid transparent !important;
}
/* Primary / Next — orange fill */
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button {
  background: var(--orange) !important;
  color: var(--white) !important;
}
.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_next_button:hover {
  background: #d4650a !important;
  color: var(--white) !important;
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(238,114,3,0.4) !important;
}
/* Previous — navy outline */
.gform_wrapper .gform_previous_button {
  background: transparent !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}
.gform_wrapper .gform_previous_button:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="url"],
  .gform_wrapper input[type="number"],
  .gform_wrapper input[type="password"],
  .gform_wrapper select {
    height: 48px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
  .gform_wrapper .gform_button,
  .gform_wrapper .gform_next_button,
  .gform_wrapper .gform_previous_button {
    width: 100%;
  }
}