/* ==========================================================================
   NSPCB site-wide CSS for Divi 5: motion system + the few details Divi
   modules can't express on their own (focus ring, arrow links, tables).
   Author: Got2Web, LLC (https://www.got2web.com)

   Enqueued by the NSPCB child theme (functions.php); don't also paste it
   into Theme Options. All colors, type and spacing live in the Divi presets
   and global colors;
   this file only references them through var(--gcid-nspcb-*).

   Motion principles (from the approved design)
   - Motion confirms; it never performs. Nothing moves more than 16px,
     nothing bounces, nothing loops, nothing waits on the visitor.
   - One easing family: a long, soft deceleration.
   - Progressive: with JavaScript off, or "reduce motion" set on the device,
     the site is complete and still.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-press: 120ms;
  --dur-hover: 240ms;
  --dur-ui: 340ms;
  --dur-reveal: 760ms;
  --dur-text: 980ms;
  --dur-image: 1600ms;
  --dur-hero-image: 2400ms;
  --reveal-distance: 16px;
  --image-settle: 1.05;
  --stagger: 80ms;
  --word-stagger: 32ms;
}
@media (max-width: 980px) { :root { --reveal-distance: 12px; --stagger: 70ms; } }
@media (max-width: 767px) {
  :root { --reveal-distance: 10px; --dur-reveal: 640ms; --dur-text: 860ms; --dur-image: 1300ms; --dur-hero-image: 1800ms; --image-settle: 1.035; --stagger: 60ms; --word-stagger: 26ms; }
}

/* ---------- Accessibility details ---------- */
.nspcb-skip-link { position: absolute; left: 16px; top: -100px; z-index: 100000; background: var(--gcid-nspcb-ink, #2A2421); color: #fff !important; padding: 12px 16px; font-weight: 700; }
.nspcb-skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--gcid-nspcb-ink, #2A2421); outline-offset: 3px; }
.nspcb-site-footer :focus-visible, .nspcb-page-hero :focus-visible, .nspcb-hero :focus-visible, .nspcb-join-band :focus-visible, .nspcb-membership-band :focus-visible { outline-color: var(--gcid-nspcb-paper, #F8F4EC); }

/* Text for screen readers only, e.g. "(opens in a new tab)" on external links */
.nspcb-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Links inside body copy stay underlined (older readers rely on it) */
.et_pb_text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nspcb-brand-name a { text-decoration: none; }

/* Arrow links ("See current projects ->") */
.nspcb-text-link { font-weight: 700; }
.nspcb-text-link::after { content: "\2192"; display: inline-block; margin-left: 0.3em; }

/* Lists and tables written inside text modules */
.nspcb-footer-links { list-style: none !important; padding: 0 !important; margin: 0; }
.nspcb-footer-links li { padding: 4px 0; }
.nspcb-facts, .nspcb-roles { width: 100%; border-collapse: collapse; border: 0; }
.nspcb-facts th, .nspcb-facts td, .nspcb-roles th, .nspcb-roles td { text-align: left; vertical-align: top; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--gcid-nspcb-line, #DDD5C8); }
.nspcb-facts th, .nspcb-roles th { width: 42%; font-weight: 700; color: var(--gcid-nspcb-gray, #5F5953); }
.nspcb-schedule li { margin-bottom: 10px; }

/* Keep the header (and its dropdowns and phone menu) above the page body.
   The page-transition name below gives the header its own stacking layer,
   which would otherwise sit under Divi's body content (z-index 1). */
.et-l--header { position: relative; z-index: 100; }

/* Main menu lines up with the logo row (Divi's full-width menu has no width setting) */
.nspcb-main-menu .et_pb_row { width: 94%; max-width: 1240px; }

/* Icon badges in benefit rows: a true 48px circle whatever the glyph's width,
   so the text beside every icon starts at the same place, level with the title
   (Divi centres icon modules vertically by default) */
.et_pb_group > .et_pb_icon:first-child { flex: 0 0 48px; width: 48px; height: 48px; padding: 0 !important; align-items: center; justify-content: center; align-self: flex-start; box-sizing: border-box; }

/* Card images crop when they settle or zoom */
.nspcb-card .et_pb_image_wrap { display: block; overflow: hidden; border-radius: inherit; }

/* ==========================================================================
   Motion: only when the visitor allows it
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  html { scroll-behavior: smooth; }

  /* Page transitions (browsers with cross-document View Transitions) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 200ms var(--ease-in) both nspcb-page-out; }
  ::view-transition-new(root) { animation: 420ms var(--ease-out) 40ms both nspcb-page-in; }
  .et-l--header { view-transition-name: nspcb-header; }
  ::view-transition-old(nspcb-header), ::view-transition-new(nspcb-header) { animation: none; }
  ::view-transition-group(nspcb-header) { animation-duration: 0s; }
  @keyframes nspcb-page-out { to { opacity: 0; } }
  @keyframes nspcb-page-in { from { opacity: 0; transform: translateY(8px); } }

  /* Hero photo settles from 106% (a copy of the section background) */
  .motion .nspcb-hero, .motion .nspcb-band-photo { isolation: isolate; overflow: hidden; }
  .motion .nspcb-hero::before, .motion .nspcb-band-photo::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: inherit; transform: scale(1.06); transform-origin: 70% 45%;
  }
  .motion.is-loaded .nspcb-hero::before { transform: none; transition: transform var(--dur-hero-image) var(--ease-out); }
  .motion .nspcb-band-photo.is-in::before { transform: none; transition: transform 2200ms var(--ease-out); }

  /* Load sequence: hero and page-hero modules rise in order */
  .motion [data-load] { opacity: 0; transform: translateY(var(--reveal-distance)); }
  .motion.is-loaded [data-load] {
    opacity: 1; transform: none;
    transition: opacity var(--dur-reveal) var(--ease-out) var(--d, 0ms), transform var(--dur-reveal) var(--ease-out) var(--d, 0ms);
  }

  /* Headline: words rise into their lines */
  .motion .nspcb-hero h1:not([data-split]), .motion .nspcb-page-hero h1:not([data-split]) { opacity: 0; }
  .nspcb-h1-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .nspcb-h1-words .wi { display: inline-block; }
  .motion .nspcb-h1-words .wi { transform: translateY(108%); }
  .motion.is-loaded .nspcb-h1-words .wi {
    transform: none; transition: transform var(--dur-text) var(--ease-out);
    transition-delay: calc(var(--h1-delay, 200ms) + var(--i) * var(--word-stagger));
  }
  .motion .nspcb-page-hero h1 { --h1-delay: 80ms; }

  /* Scroll reveals */
  .motion [data-reveal] {
    opacity: 0; transform: translateY(var(--reveal-distance));
    transition: opacity var(--dur-reveal) var(--ease-out) var(--d, 0ms), transform var(--dur-reveal) var(--ease-out) var(--d, 0ms);
  }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }
  .motion [data-reveal] .nspcb-card .et_pb_image_wrap img, .motion [data-reveal].nspcb-card .et_pb_image_wrap img { transform: scale(var(--image-settle)); }
  .motion [data-reveal].is-in .nspcb-card .et_pb_image_wrap img, .motion [data-reveal].is-in.nspcb-card .et_pb_image_wrap img { transform: none; transition: transform var(--dur-image) var(--ease-out) var(--d, 0ms); }

  /* Header gains a soft shadow once the page scrolls */
  .et-l--header .nspcb-header-nav { transition: box-shadow 420ms var(--ease-out); }
  .et-l--header.is-scrolled .nspcb-header-nav { box-shadow: 0 6px 24px rgba(42, 36, 33, 0.08); }

  /* Buttons: colors come from the presets; motion adds easing, lift and press */
  /* Not while a load or reveal is running, so those fades aren't overridden */
  .nspcb-btn.et_pb_button:not([data-load]):not([data-reveal]), .nspcb-btn .et_pb_button {
    transition: background-color var(--dur-hover) var(--ease-standard), color var(--dur-hover) var(--ease-standard), border-color var(--dur-hover) var(--ease-standard),
                box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out) !important;
  }
  .nspcb-btn.et_pb_button:active, .nspcb-btn .et_pb_button:active { transform: scale(0.985); transition-duration: var(--dur-press) !important; }

  .nspcb-text-link::after { transition: transform var(--dur-ui) var(--ease-out); }
  .et_pb_text a { transition: color var(--dur-hover) var(--ease-standard), text-decoration-thickness var(--dur-hover) var(--ease-standard); }

  .nspcb-card { transition: box-shadow 480ms var(--ease-out), transform 480ms var(--ease-out), border-color var(--dur-hover) var(--ease-standard); }
  .nspcb-card .et_pb_image_wrap img { transition: transform 1100ms var(--ease-out); }

  /* Focus ring settles into place */
  a:focus-visible, button:focus-visible, .et_pb_button:focus-visible { animation: nspcb-focus 280ms var(--ease-out); }
  @keyframes nspcb-focus { from { outline-offset: 8px; outline-color: transparent; } }

  .nspcb-skip-link { transition: top var(--dur-ui) var(--ease-out); }

  @media (hover: hover) and (pointer: fine) {
    .nspcb-btn-primary.et_pb_button:hover, .nspcb-btn-primary .et_pb_button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(110, 33, 25, 0.55); }
    .nspcb-btn-light.et_pb_button:hover, .nspcb-btn-light .et_pb_button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5); }
    .nspcb-text-link:hover::after { transform: translateX(4px); }
    .et_pb_text a:hover { text-decoration-thickness: 2px; }
    .nspcb-card:has(a):hover { box-shadow: 0 2px 4px rgba(42, 36, 33, 0.05), 0 14px 32px rgba(42, 36, 33, 0.10) !important; }
    .nspcb-card:has(a):hover .et_pb_image_wrap img { transform: scale(1.03); }
  }
}

/* Reduced motion: still and complete; only color changes remain */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, text-decoration-color, outline-color !important; transition-duration: 120ms !important; scroll-behavior: auto !important; }
}

/* Never hide content from print */
@media print {
  .motion [data-reveal], .motion [data-load], .motion .nspcb-h1-words .wi { opacity: 1 !important; transform: none !important; }
}