/*
Theme Name: India Clean Food Summit
Description: Custom theme for the India Clean Food Summit event site.
Author: Janani
Version: 1.1.0
Text Domain: india-clean-food-summit
*/

/* ---------- Design tokens ---------- */
:root {
  /* Side spacing for full-width sections: content stays in a 1152px column,
     centred, with at least 24px each side. */
  --icfs-gutter: max(24px, calc((100% - 1152px) / 2));

  /* Linked to Appearance -> Editor -> Styles (theme.json). Editing a colour or
     font there changes it across the whole site; the values after the comma
     are fallbacks. */
  --color-white: var(--wp--preset--color--white, #FFFFFF);
  --color-ink: var(--wp--preset--color--ink, #000000);
  --color-dark-green: var(--wp--preset--color--dark-green, #2B5F2E);
  --color-green: var(--wp--preset--color--green, #2B5F2E);
  --color-pink: var(--wp--preset--color--pink, #0B375A);
  --color-sage: var(--wp--preset--color--sage, #C1E1C1);
  --color-blue: var(--wp--preset--color--blue, #0B375A);

  --font-heading: var(--wp--preset--font-family--heading, 'Fraunces', Georgia, serif);
  --font-body: var(--wp--preset--font-family--body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  /* Geist isn't on Google Fonts — this falls back to system fonts until
     Geist woff2 files are added under assets/fonts and @font-face'd below. */
  --font-nav: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ---------- Site header / navbar (block theme) ---------- */
.site-header {
  --icfs-bar-top: 20px;
  --icfs-bar-radius: 26px;
  position: fixed;
  top: var(--icfs-bar-top);
  left: 0;
  right: 0;
  width: calc(100% - 80px);
  max-width: 1320px;
  margin: 0 auto;
  border-radius: var(--icfs-bar-radius);
  z-index: 100;
  isolation: isolate;
  font-family: var(--font-nav);
  box-shadow: 0 6px 24px rgba(32, 32, 32, 0.08);
  transition: box-shadow 0.25s ease;
}

/* The frosted background lives on its own layer: a blur on the header itself
   would trap the full-screen mobile menu inside the 75px bar. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.is-scrolled {
  box-shadow: 0 10px 34px rgba(32, 32, 32, 0.16);
}

.admin-bar .site-header {
  top: calc(var(--icfs-bar-top) + 32px);
}

/* Pages without a full-bleed hero need room so content doesn't sit under the fixed nav */
.site-main {
  padding-top: 130px;
}

.site-header .nav-wrap {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 40px;
  min-height: 76px;
  gap: 32px;
}

/* The brand line under the bar isn't part of the floating-card look. */
.site-header .nav-underline {
  display: none;
}

.site-header .wp-block-site-logo {
  flex: 0 0 auto;
  margin: 0;
}

.site-header .wp-block-site-logo a {
  display: block;
}

.site-header .wp-block-site-logo img {
  display: block;
  height: 40px;
  width: auto;
}

.site-header .nav-links {
  flex: 1 1 auto;
  margin: 0;
}

.site-header .nav-links .wp-block-navigation__container {
  gap: 44px;
  flex-wrap: nowrap;
}

@media (max-width: 1024px) {
  .site-header {
    width: calc(100% - 48px);
  }

  .site-header .nav-wrap {
    gap: 20px;
    padding: 0 28px;
  }

  .site-header .nav-links .wp-block-navigation__container {
    gap: 28px;
  }
}

/* Just above the hamburger breakpoint the bar is narrow: tighten it so
   everything still fits inside the card. */
@media (min-width: 783px) and (max-width: 900px) {
  .site-header .nav-wrap {
    gap: 14px;
    padding: 0 20px;
  }

  .site-header .wp-block-site-logo img {
    height: 34px;
  }

  .site-header .nav-links .wp-block-navigation__container {
    gap: 20px;
  }
}

.site-header .nav-links .wp-block-navigation-item__content {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  transition: color 0.15s ease;
}

.site-header .nav-links .wp-block-navigation-item__content:hover,
.site-header .nav-links .wp-block-navigation-item__content:focus-visible {
  color: var(--color-dark-green);
}

.site-header .wp-block-buttons {
  flex: 0 0 auto;
  margin: 0;
}

.site-header .nav-cta .wp-block-button__link {
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-sage);
  color: var(--color-ink);
  border-color: var(--color-dark-green);
  --btn-shadow: var(--color-dark-green);
}

/* Comfortable tap size for the hamburger and close buttons (44px) */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
  padding: 10px;
  margin: -10px;
  color: var(--color-ink);
}

/* Full-screen mobile menu: rich dark-green screen, large serif links with
   thin dividers and a pink arrow, staggered fade-in. Colours come from the
   Navigation block's overlay settings, so the team can change them. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0;
  background-image:
    radial-gradient(circle at 100% 100%, rgba(193, 225, 193, 0.38), transparent 55%),
    radial-gradient(circle at 0% 0%, rgba(20, 101, 44, 0.65), transparent 55%);
}

.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 104px 32px 48px;
}

.site-header .is-menu-open .wp-block-navigation__container {
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.site-header .is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  color: inherit;
}

.site-header .is-menu-open .wp-block-navigation-item__content:hover,
.site-header .is-menu-open .wp-block-navigation-item__content:focus-visible {
  transform: translateX(6px);
  transition: transform 0.2s ease;
}

.site-header .is-menu-open .wp-block-navigation-item__content:focus {
  outline: none;
}

.site-header .is-menu-open .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--color-pink);
  outline-offset: 4px;
  border-radius: 6px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

@keyframes icfs-menu-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.site-header .is-menu-open .wp-block-navigation-item {
  animation: icfs-menu-in 0.4s ease both;
}

.site-header .is-menu-open .wp-block-navigation-item:nth-child(2) {
  animation-delay: 0.05s;
}

.site-header .is-menu-open .wp-block-navigation-item:nth-child(3) {
  animation-delay: 0.1s;
}

.site-header .is-menu-open .wp-block-navigation-item:nth-child(4) {
  animation-delay: 0.15s;
}

.site-header .is-menu-open .wp-block-navigation-item:nth-child(5) {
  animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .is-menu-open .wp-block-navigation-item {
    animation: none;
  }
}

@media (max-width: 782px) {
  .site-header {
    --icfs-bar-top: 10px;
    --icfs-bar-radius: 20px;
    width: calc(100% - 24px);
  }

  .admin-bar .site-header {
    top: calc(var(--icfs-bar-top) + 46px);
  }

  .site-main {
    padding-top: 100px;
  }

  .site-header .nav-wrap {
    gap: 12px;
    min-height: 60px;
    padding: 0 14px;
  }

  .site-header .wp-block-site-logo {
    margin-right: auto;
  }

  .site-header .wp-block-site-logo img {
    height: 36px;
  }

  .site-header .wp-block-buttons {
    order: 2;
  }

  .site-header .nav-links {
    order: 3;
    flex: 0 0 auto;
  }

  .site-header .nav-cta .wp-block-button__link {
    padding: 8px 14px;
    font-size: 13px;
  }
}

/* WordPress switches to the desktop menu at 600px; we keep the hamburger up
   to 782px, as the site always has. */
@media (min-width: 600px) and (max-width: 782px) {
  .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }

  .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

@media (max-width: 400px) {
  .site-header .nav-wrap {
    gap: 8px;
  }

  .site-header .wp-block-site-logo img {
    height: 30px;
  }

  .site-header .nav-cta .wp-block-button__link {
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 340px) {
  .site-header .wp-block-site-logo img {
    height: 26px;
  }

  .site-header .nav-cta .wp-block-button__link {
    padding: 7px 10px;
    font-size: 12px;
  }
}

/* ---------- Hero (block: Cover) ---------- */
.hero.wp-block-cover {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  padding: 110px 24px 56px;
  overflow: hidden;
}

.hero .wp-block-cover__image-background {
  object-position: center 38%;
  /* The hazy sky in the photo itself (not the overlay) is what's reading as
     "white fog" -- this pulls real contrast/colour out of that haze. Remove
     once the photo is replaced. */
  filter: brightness(0.86) contrast(1.08) saturate(1.3);
}

.hero .wp-block-cover__inner-container {
  width: 100%;
  text-align: center;
}

.hero .hero-presenters {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 18px;
}

.hero .hero-presenters-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 8px;
}

.hero .hero-presenter-logo {
  margin: 0;
  display: flex;
  align-items: center;
}

.hero .hero-presenter-logo img {
  height: 84px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

.hero .hero-presenters-divider {
  width: 2px;
  height: 68px;
  background: rgba(0, 0, 0, 0.3);
}

.hero .hero-presents-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}

.hero .hero-heading {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.08;
  margin: 0 0 18px;
  text-wrap: balance;
}

@media (max-width: 480px) {
  .hero .hero-presenter-logo img {
    height: 56px;
    max-width: 170px;
  }
}

.hero .hero-description {
  font-size: clamp(16px, 2vw, 19px);
  opacity: 0.92;
  margin: 0 auto 28px;
  max-width: 480px;
}

/* A real frosted-glass card: mostly transparent, blurring the photo behind it,
   with a soft white top-edge highlight the way glass catches light. */
.hero .hero-info-card {
  width: fit-content;
  max-width: 100%;
  gap: 22px;
  margin-bottom: 28px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(100%) brightness(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(100%) brightness(1.5);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(32, 32, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Browsers without backdrop-filter support (rare) fall back to a solid card,
   so the text underneath always stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .hero-info-card {
    background: rgba(255, 255, 255, 0.92);
  }
}

.hero .hero-info-item {
  gap: 12px;
}

.hero .hero-info-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  background: rgba(36, 92, 53, 0.1);
}

.hero .hero-info-icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.hero .hero-info-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

/* The label sits on its own line above the value, so the card reads "DATE"
   then the actual date, instead of running both into one line. */
.hero .hero-info-text strong {
  display: block;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-green);
}

.hero .hero-info-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 36px;
  margin: 0;
  border: 0;
  opacity: 1;
  background: rgba(32, 32, 32, 0.15);
}

.hero .hero-actions {
  margin: 0;
  gap: 14px;
}

.hero .hero-cta .wp-block-button__link {
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 600;
}

.hero .hero-cta-solid .wp-block-button__link {
  background: var(--color-blue);
  color: #FFFFFF;
  border-color: var(--color-ink);
  --btn-shadow: var(--color-ink);
}

/* A small arrow after the primary button's own text (no content edit --
   pure decoration), that nudges right on hover. */
.hero .hero-cta-solid .wp-block-button__link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.hero .hero-cta-solid .wp-block-button__link:hover::after,
.hero .hero-cta-solid .wp-block-button__link:focus-visible::after {
  transform: translateX(2px);
}

.hero .hero-cta-outline.is-style-outline > .wp-block-button__link {
  background: var(--color-sage);
  border-color: var(--color-dark-green);
  color: var(--color-ink);
  --btn-shadow: var(--color-dark-green);
}

.hero .hero-cta-outline.is-style-outline > .wp-block-button__link:hover,
.hero .hero-cta-outline.is-style-outline > .wp-block-button__link:focus-visible {
  /* Stays solid sage on hover -- no tint. The shared button press/lift
     effect (below) already gives it a hover cue. */
  background: var(--color-sage);
}

/* Entrance: heading, tagline, card and buttons rise in one after another.
   Only opacity/transform, and off for "reduce motion". Remove the
   "hero-animate" class on the block to switch it off. */
@keyframes icfs-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.hero-animate .wp-block-cover__inner-container > * {
  animation: icfs-rise 0.55s ease both;
}

.hero-animate .wp-block-cover__inner-container > :nth-child(2) {
  animation-delay: 0.1s;
}

.hero-animate .wp-block-cover__inner-container > :nth-child(3) {
  animation-delay: 0.2s;
}

.hero-animate .wp-block-cover__inner-container > :nth-child(4) {
  animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate .wp-block-cover__inner-container > * {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .hero.wp-block-cover {
    padding-bottom: 48px;
  }
}

@media (max-width: 782px) {
  /* On phones the content sits in the vertical centre of the screen. */
  .hero.wp-block-cover.has-custom-content-position {
    align-items: center;
  }

  .hero.wp-block-cover {
    min-height: max(560px, 86svh);
    padding-top: 90px;
    padding-bottom: 60px;
  }
}

@media (max-width: 480px) {
  .hero .hero-info-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .hero .hero-info-divider {
    display: none;
  }

  .hero .hero-info-item {
    gap: 8px;
  }

  .hero .hero-info-icon {
    width: 22px;
    height: 22px;
  }

  .hero .hero-info-text {
    font-size: 13px;
    text-align: left;
    white-space: normal;
  }

  .hero .hero-actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
  }

  .hero .hero-cta {
    flex: 1 1 0;
    min-width: 0;
  }

  .hero .hero-cta .wp-block-button__link {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    white-space: nowrap;
  }
}

@media (max-width: 340px) {
  .hero .hero-info-text {
    font-size: 12px;
  }
}

/* ---------- Eyebrow badge (block styles: "Eyebrow badge", "Eyebrow badge (outline)") ---------- */
.is-style-eyebrow,
.is-style-eyebrow-outline {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* Spacing under the badge in the start-a-section patterns (WordPress's own layout rule would zero it). */
html .section-blank .is-style-eyebrow,
html .section-blank .is-style-eyebrow-outline {
  margin: 0 0 16px;
}

.is-style-eyebrow {
  background: var(--color-dark-green);
  color: var(--color-white);
}

.is-style-eyebrow-outline {
  background: transparent;
  border: 1.5px solid var(--color-green);
  color: var(--color-green);
}

/* ---------- Speakers (blocks) ---------- */
.wp-block-group.speakers {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.speakers .speakers-heading {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
  margin: 0 0 48px;
}

/* A second set of speaker slots -- same grid, with real breathing room above
   it instead of sitting flush against the first set. */
.speakers .speakers-grid-second {
  margin-top: 40px;
}

/* Image-only by default; name, role and a LinkedIn icon slide up over the
   photo on hover (or keyboard focus, or always on touch devices that can't
   hover -- see the (hover: none) rule below). */
.is-style-speaker-card {
  position: relative;
  border: 1.5px solid var(--color-ink);
  border-radius: 14px;
  overflow: hidden;
  background: #f2f2f2;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.is-style-speaker-card .speaker-photo {
  margin: 0;
}

.is-style-speaker-card .speaker-photo img {
  display: block;
  width: 100%;
  transition: transform 0.5s ease;
}

.is-style-speaker-card .speaker-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 14px 14px;
  background: linear-gradient(to top, rgba(10, 20, 15, 0.92) 0%, rgba(10, 20, 15, 0.5) 50%, rgba(10, 20, 15, 0) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.is-style-speaker-card:hover,
.is-style-speaker-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(32, 32, 32, 0.12);
}

.is-style-speaker-card:hover .speaker-photo img {
  transform: scale(1.04);
}

.is-style-speaker-card:hover .speaker-overlay,
.is-style-speaker-card:focus-within .speaker-overlay {
  opacity: 1;
  transform: translateY(0);
}

.is-style-speaker-card .speaker-role {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  opacity: 0.85;
}

.is-style-speaker-card .speaker-name {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: #FFFFFF;
}

.is-style-speaker-card .speaker-linkedin {
  margin: 6px 0 0 !important;
  gap: 0 !important;
}

.is-style-speaker-card .speaker-linkedin .wp-social-link {
  width: 26px;
  height: 26px;
  margin: 0 !important;
}

.is-style-speaker-card .speaker-linkedin .wp-social-link a {
  padding: 4px;
}

/* Touch devices can't hover -- show the overlay permanently instead of
   hiding the speaker's name behind a gesture nobody will try. */
@media (hover: none) {
  .is-style-speaker-card .speaker-overlay {
    opacity: 1;
    transform: none;
  }
}

/* Cascade: children of a ".cascade-in" block fade up one after another the
   first time it scrolls into view. Off for "reduce motion"; the .js class
   guarantees content is never hidden if the script can't run. */
.js .cascade-in > * {
  opacity: 0;
  transform: translateY(12px);
  transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.25s ease;
  transition-delay: calc(var(--i, 0) * 60ms);
}

.js .cascade-in.is-inview > * {
  opacity: 1;
  transform: none;
}

.js .cascade-in.is-inview > *:hover {
  transform: translateY(-4px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.5s ease;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .js .cascade-in > *,
  .is-style-speaker-card,
  .is-style-speaker-card .speaker-photo img,
  .is-style-speaker-card::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1024px) {
  .speakers .speakers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wp-block-group.speakers {
    padding: 32px var(--icfs-gutter);
  }

  .speakers .speakers-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Focus Areas (blocks) ---------- */
.wp-block-group.focus-areas {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.focus-areas .focus-areas-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.15;
  margin: 0 0 20px;
}

.focus-areas .focus-areas-subtext {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 48px;
  color: var(--color-ink);
}

/* Equal-height cards in the row, whatever the row/grid they're in, regardless
   of how much text each one has. */
.focus-areas .focus-areas-grid {
  align-items: stretch;
}

.is-style-shadow-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: var(--color-sage) !important;
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 6px 6px 0 var(--color-dark-green);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* The shadow "catches up" on hover -- the card lifts toward it and the
   offset grows, instead of a generic translateY lift like other cards. */
.is-style-shadow-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--color-dark-green);
}

.is-style-shadow-card .focus-card-title {
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 12px;
  color: var(--color-ink);
}

.is-style-shadow-card .focus-card-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink);
}

@media (max-width: 1024px) {
  .focus-areas .focus-areas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wp-block-group.focus-areas {
    padding: 32px var(--icfs-gutter);
  }

  .focus-areas .focus-areas-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Agenda (blocks) ---------- */
.wp-block-group.agenda {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.agenda .agenda-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.15;
  margin: 0;
}

/* Heading on the left, "View Agenda" (links straight to the PDF) on the
   right -- wraps to its own row under the heading on narrow screens. */
.agenda .agenda-header-row {
  gap: 24px;
  margin-bottom: 20px;
}

.agenda .agenda-header-text {
  flex: 1 1 320px;
}

.agenda .agenda-header-buttons {
  margin: 0;
  flex: 0 0 auto;
}

.agenda .agenda-header-cta .wp-block-button__link {
  white-space: nowrap;
}

.agenda .agenda-subtext {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 48px;
  color: var(--color-ink);
}

.agenda .agenda-grid {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.agenda .agenda-column-title {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-green);
}

/* The number in each pill is automatic, so adding or removing one keeps the count right. */
.agenda .agenda-format-list {
  counter-reset: agenda-format;
}

.agenda .agenda-format-item {
  counter-increment: agenda-format;
  gap: 14px;
  padding: 12px 20px;
  background: var(--color-white);
  border: 1.5px solid rgba(36, 92, 53, 0.3);
  border-radius: 999px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.agenda .agenda-format-item:hover {
  transform: translateX(4px);
  border-color: var(--color-pink);
  box-shadow: 4px 4px 0 rgba(193, 225, 193, 0.5);
}

.agenda .agenda-format-item::before {
  content: counter(agenda-format);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-pink);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
}

.agenda .agenda-format-label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark-green);
}

.agenda .agenda-timeline-card {
  padding: 8px 28px;
  background: var(--color-white);
  border: 2px solid var(--color-pink);
  border-radius: 24px;
}

.agenda .agenda-timeline-row {
  gap: 8px 16px;
  padding: 14px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid rgba(36, 92, 53, 0.12);
  border-radius: 10px;
  transition: background 0.15s ease, padding-left 0.15s ease;
}

.agenda .agenda-timeline-row:hover {
  background: rgba(193, 225, 193, 0.35);
  padding-left: 16px;
}

.agenda .agenda-timeline-row:last-child {
  border-bottom: none;
}

.agenda .agenda-timeline-time {
  flex-shrink: 0;
  width: 84px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark-green);
}

.agenda .agenda-timeline-event {
  flex: 1 1 260px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-dark-green);
}

.agenda .agenda-timeline-tag {
  flex-shrink: 0;
  margin: 0 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-green);
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .agenda .agenda-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .wp-block-group.agenda {
    padding: 32px var(--icfs-gutter);
  }

  .agenda .agenda-timeline-card {
    padding: 4px 18px;
  }

  .agenda .agenda-timeline-tag {
    margin-left: 0;
    flex-basis: 100%;
  }
}

/* ---------- Awards (blocks) ---------- */
.wp-block-group.awards {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.awards .awards-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.15;
  margin: 0 0 20px;
}

.awards .awards-subtext {
  max-width: 640px;
  margin: 0 0 32px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--color-ink);
}

/* Two columns of pill-shaped rows (3 rows for 6 awards, matching the brand's
   own colours -- a trophy badge on the left, the award name on the right.
   Higher specificity than WordPress's own ".is-layout-flex" rule, so this
   applies straight away to awards already on the page, no re-editing needed. */
.awards .awards-categories.awards-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin: 0 0 40px;
}

/* Every award's icon is an ordinary Image the team can replace (click it,
   choose Replace), same as any other icon on the site -- it just sits in a
   circle. The text next to it is an ordinary Paragraph. A small leaf sits at
   the right edge, purely decorative (drawn by the styling, not content). */
.awards .awards-category {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 8px 32px 8px 8px;
  background: var(--color-sage);
  border: 1.5px solid var(--color-dark-green);
  border-radius: 999px;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.awards .awards-category:hover {
  transform: translateY(-3px);
  background: var(--color-blue);
  box-shadow: 0 10px 20px rgba(36, 92, 53, 0.14);
}

.awards .awards-category:hover .awards-category-label {
  color: #FFFFFF;
}

.awards .awards-category-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-dark-green);
  border: 2px solid var(--color-sage);
  display: flex;
  align-items: center;
  justify-content: center;
}

.awards .awards-category-icon img {
  display: block;
  /* A consistent inset on every side, rather than forcing the image to fill
     the circle edge-to-edge -- the source icons aren't perfectly square, so
     an edge-to-edge fill made small per-file differences read as "off
     centre". Centring with equal breathing room hides that regardless of
     each icon's exact aspect ratio. */
  width: auto !important;
  height: auto !important;
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
  object-position: center;
  margin: auto;
}

.awards .awards-category-label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  transition: color 0.2s ease;
}

/* A category the team hasn't named yet: the badge loses its pink ring and the
   text reads "To Be Announced", so it visibly reads as "more to come" rather
   than a finished award. Remove the "awards-category-tba" class (Advanced
   panel) once it's announced. */
.awards .awards-category-tba .awards-category-icon {
  border-color: transparent;
}

.awards .awards-category-tba .awards-category-label {
  color: rgba(36, 92, 53, 0.55);
  font-style: italic;
}

.awards .awards-actions {
  margin: 0;
  gap: 14px;
}

.awards .awards-actions .wp-block-button.is-style-green .wp-block-button__link {
  background: var(--color-dark-green);
  color: #FFFFFF;
  --btn-shadow: var(--color-ink);
}

@media (max-width: 560px) {
  .awards .awards-categories.awards-categories {
    grid-template-columns: minmax(0, 1fr);
  }

  .awards .awards-category {
    gap: 8px;
    padding: 6px 12px 6px 6px;
  }

  .awards .awards-category-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .awards .awards-category-label {
    font-size: 10.5px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .wp-block-group.awards {
    padding: 32px var(--icfs-gutter);
  }

  .awards .awards-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .awards .awards-actions .wp-block-button,
  .awards .awards-actions .wp-block-button__link {
    width: 100%;
  }
}

/* ---------- Partners (blocks) ---------- */
.wp-block-group.partners {
  position: relative;
  overflow: hidden;
  background: var(--color-dark-green);
  border-radius: 28px;
  margin: 0 var(--icfs-gutter);
  padding: 56px var(--icfs-gutter);
  isolation: isolate;
}

/* The watercolour leaf branch sits low-opacity in the bottom-left corner,
   purely decorative (aria-hidden), behind every real block of content. */
.wp-block-group.partners::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 320px;
  height: 560px;
  background: url('https://indiacleanfoodsummit.com/wp-content/uploads/2026/10/align-movement-leaf.png') no-repeat right top / contain;
  transform: scaleX(-1) rotate(180deg);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}

.partners > * {
  position: relative;
  z-index: 1;
}

.partners .is-style-eyebrow {
  background: var(--color-sage) !important;
  color: var(--color-ink) !important;
}

.partners .partners-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.15;
  margin: 0 0 40px;
  color: #FFFFFF !important;
}

/* Partners grouped by tier: a label + a line that fills the rest of the
   row, with that tier's logos in square cards underneath. Tiers wrap onto
   their own row when there isn't room beside the next one. */
.partners .partners-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
}

.partners .partners-tier-group {
  flex: 0 0 auto;
}

.partners .partners-tier-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  min-width: 180px;
}

.partners .partners-tier-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  white-space: nowrap;
}

.partners .partners-tier-line {
  display: none;
}

.partners .partners-tier-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.partners .partners-tier-card {
  width: 170px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFFFFF;
  border: none;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partners .partners-tier-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.partners .partners-tier-card img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

@media (max-width: 600px) {
  .wp-block-group.partners {
    margin: 0;
    border-radius: 0;
    padding: 40px 20px;
  }

  .partners .is-style-eyebrow {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }

  .partners .partners-heading {
    text-align: center;
  }

  .partners .partners-tier-group {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .partners .partners-tier-label-row {
    justify-content: center;
  }

  .partners .partners-tier-logos {
    justify-content: center;
  }

  .partners .partners-tier-card {
    width: calc(50% - 6px);
    height: 120px;
    padding: 12px;
  }

  /* A tier with only one logo gets the full row width instead of staying
     pinned to the half-width meant for two-up tiers. */
  .partners .partners-tier-logos .partners-tier-card:only-child {
    width: 100%;
    max-width: 280px;
    height: 140px;
  }

  .partners .partners-tier-card img {
    max-width: 88%;
    max-height: 95px;
  }

  .partners .partners-tier-logos .partners-tier-card:only-child img {
    max-height: 110px;
  }
}

/* A calm, continuous drift instead of a static grid -- the same flat lists of
   partner-card blocks, just always gently moving. Two rows run opposite
   directions, which reads as more alive than one. A tiny script (see
   site.js) clones each row once so the loop is seamless; the CSS only ever
   has to animate a 50% shift. Pauses on hover/focus so a name is easy to
   read, and sits still for anyone who has asked their system to reduce
   motion. */
.partners .partner-cards-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.partners .partner-cards-viewport + .partner-cards-viewport {
  margin-top: 28px;
}

.partners .partner-cards-row {
  flex-wrap: nowrap;
  width: max-content;
  gap: 48px;
}

.partners .partner-cards-row-1 {
  animation: partners-marquee-right 30s linear infinite;
}

.partners .partner-cards-row-2 {
  animation: partners-marquee-left 34s linear infinite;
}

.partners .partner-cards-viewport:hover .partner-cards-row,
.partners .partner-cards-viewport:focus-within .partner-cards-row {
  animation-play-state: paused;
}

@keyframes partners-marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes partners-marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .partners .partner-cards-row {
    animation: none;
  }
}

.partners .partner-card {
  flex: 0 0 120px;
  max-width: 120px;
  text-align: center;
  transition: transform 0.2s ease;
}

.partners .partner-card:hover {
  transform: translateY(-3px);
}

/* Original card look, unchanged: logos sit in grayscale and turn full
   colour on hover, so a row of unrelated logo colours still reads as one
   calm wall even while the row is drifting. The row pauses on hover, so the
   reveal lands on whichever card the pointer is actually over. */
.partners .partner-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(36, 92, 53, 0.18);
  transition: border-color 0.2s ease;
}

.partners .partner-card:hover .partner-logo {
  border-color: var(--color-pink);
}

.partners .partner-logo img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.partners .partner-card:hover .partner-logo img {
  filter: grayscale(0%);
  opacity: 1;
}

.partners .partner-card-label {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pink);
}

.partners .partner-card-value {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-dark-green);
}

.partners .partners-cta {
  margin-top: 56px;
  padding: 56px 32px;
  text-align: center;
  background: var(--color-dark-green);
  border-radius: 24px;
}

.partners .partners-cta-heading {
  margin: 0 0 14px;
  font-size: clamp(22px, 3.5vw, 30px);
  color: var(--color-white);
}

.partners .partners-cta-subtext {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.partners .partners-cta .wp-block-buttons {
  margin: 0;
}

@media (max-width: 480px) {
  .wp-block-group.partners {
    padding: 48px 0;
  }

  .partners .partners-heading {
    padding: 0 var(--icfs-gutter);
  }

  .partners .partner-cards-row-1 {
    animation-duration: 20s;
  }

  .partners .partner-cards-row-2 {
    animation-duration: 22s;
  }

  .partners .partner-card {
    flex: 0 0 96px;
    max-width: 96px;
  }

  .partners .partner-logo {
    width: 60px;
    height: 60px;
  }

  .partners .partners-cta {
    margin-left: var(--icfs-gutter);
    margin-right: var(--icfs-gutter);
    padding: 40px 20px;
  }
}

/* ---------- What To Expect (blocks) ---------- */
.wp-block-group.what-to-expect {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.what-to-expect .what-to-expect-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 0 0 40px;
}

/* Equal-height cards, whatever the row they're in, regardless of how much
   text each one has -- keeps the grid looking tidy instead of cramped. */
.what-to-expect .what-to-expect-grid {
  align-items: stretch;
}

.what-to-expect .expect-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 32px 28px;
  box-sizing: border-box;
  background: var(--color-sage) !important;
  color: var(--color-ink) !important;
  box-shadow: 6px 6px 0 var(--color-dark-green);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* A small lift on hover, matching the Stakeholders cards' shadow language. */
.what-to-expect .expect-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-dark-green);
}

.what-to-expect .expect-card-title,
.what-to-expect .expect-card-body {
  color: var(--color-ink);
}

/* The badge icon already draws its own circle and ring, so the wrapper just
   sizes and positions it -- no background of its own. The team can replace it
   with any image (square or round; a plain square icon still sits centred). */
.what-to-expect .expect-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
  transition: transform 0.2s ease;
}

.what-to-expect .expect-card:hover .expect-card-icon {
  transform: scale(1.08) rotate(-4deg);
}

.what-to-expect .expect-card-icon img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain;
}

.what-to-expect .expect-card-title {
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.what-to-expect .expect-card-body {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
}

@media (max-width: 1024px) {
  .what-to-expect .what-to-expect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wp-block-group.what-to-expect {
    padding: 32px var(--icfs-gutter);
  }

  .what-to-expect .what-to-expect-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Experience Zone (blocks) ---------- */
/* Same frame as the Overview section: text column + rounded photo, lined up
   with the rest of the page. */
.wp-block-group.experience-zone {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.experience-zone .experience-zone-grid {
  align-items: center;
}

.experience-zone .experience-zone-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.experience-zone .experience-zone-heading {
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.2;
  margin: 0 0 20px;
}

.experience-zone .experience-zone-subtext {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 0 20px;
}

.experience-zone .experience-zone-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.experience-zone .experience-zone-list li {
  position: relative;
  padding-left: 24px;
  color: var(--color-dark-green);
  font-weight: 600;
  font-size: 14px;
}

.experience-zone .experience-zone-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-green);
}

.experience-zone .experience-zone-content .wp-block-buttons {
  margin-top: 24px;
}

.experience-zone .experience-zone-media {
  position: relative;
  min-height: 360px;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}

.experience-zone .experience-zone-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* If the team removes the photo, the text simply takes the whole row. */
.experience-zone .experience-zone-grid:not(:has(.experience-zone-media)) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .experience-zone .experience-zone-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-zone .experience-zone-media {
    min-height: 280px;
  }
}

@media (max-width: 480px) {
  .wp-block-group.experience-zone {
    padding: 32px var(--icfs-gutter);
  }
}

/* ---------- Clean Revolution (blocks) ---------- */
.wp-block-group.clean-revolution {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter) 8px;
}

/* Heading block left-aligned like every other section's eyebrow+heading;
   only the card row and banner below it stay centered as their own row. */
.clean-revolution > .is-style-eyebrow {
  text-align: left;
}

.clean-revolution .clean-revolution-heading {
  font-size: clamp(30px, 5vw, 46px);
  margin: 0 0 4px;
  text-align: left;
}

.clean-revolution .clean-revolution-subtext {
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 600;
  text-align: left;
  color: var(--color-blue) !important;
  margin: 0 0 48px;
}

.clean-revolution .revolution-grid {
  gap: 28px;
  margin: 0 0 56px;
}

.clean-revolution .revolution-card {
  flex: 1 1 300px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #EEF4EA;
  border-radius: 20px;
  padding: 14px;
  text-align: left;
}


/* Same lift + growing shadow language as Focus Areas / Reasons to Attend,
   plus the icon badge nudges up with it. */
.clean-revolution .revolution-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.clean-revolution .revolution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(32, 32, 32, 0.14);
}

.clean-revolution .revolution-card:hover .revolution-icon {
  transform: scale(1.08);
}

.clean-revolution .revolution-card-photo {
  position: relative;
  flex: 0 0 42%;
}

.clean-revolution .revolution-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
}

.clean-revolution .revolution-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.4s ease;
}

.clean-revolution .revolution-card:hover .revolution-photo img {
  transform: scale(1.06);
}

/* The badge overlaps the photo's bottom-right corner, with a connecting
   line + dot dropping down toward the banner below -- the card and its
   ancestors all keep normal (visible) overflow so this can extend past
   the card's own edge. */
.clean-revolution .revolution-icon {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 52px;
  height: 52px;
  margin: 0;
  transition: transform 0.25s ease;
}

.clean-revolution .revolution-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-white);
  box-shadow: 0 4px 10px rgba(32, 32, 32, 0.18);
}

.clean-revolution .revolution-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 44px;
  background: var(--color-dark-green);
  transform: translateX(-50%);
  transform-origin: top;
}

.clean-revolution .revolution-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 44px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-dark-green);
  z-index: 1;
}

/* Each line draws downward, then its dot pops in, staggered left to right,
   the first time the row scrolls into view -- reuses the same cascade-in
   trigger the cards fade in with, no extra JS needed. Matches the site's
   convention: the hidden/starting state only exists when ".js" is present,
   so content is never hidden if the script can't run. */
.js .revolution-grid.cascade-in .revolution-icon::after {
  transform: translateX(-50%) scaleY(0);
  transition: transform 0.5s ease;
}

.js .revolution-grid.cascade-in .revolution-icon::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.js .revolution-grid.cascade-in.is-inview .revolution-card:nth-child(1) .revolution-icon::after {
  transform: translateX(-50%) scaleY(1);
  transition-delay: 0.35s;
}

.js .revolution-grid.cascade-in.is-inview .revolution-card:nth-child(2) .revolution-icon::after {
  transform: translateX(-50%) scaleY(1);
  transition-delay: 0.55s;
}

.js .revolution-grid.cascade-in.is-inview .revolution-card:nth-child(3) .revolution-icon::after {
  transform: translateX(-50%) scaleY(1);
  transition-delay: 0.75s;
}

.js .revolution-grid.cascade-in.is-inview .revolution-card:nth-child(1) .revolution-icon::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.75s;
}

.js .revolution-grid.cascade-in.is-inview .revolution-card:nth-child(2) .revolution-icon::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.95s;
}

.js .revolution-grid.cascade-in.is-inview .revolution-card:nth-child(3) .revolution-icon::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 1.15s;
}

@media (prefers-reduced-motion: reduce) {
  .js .revolution-grid.cascade-in .revolution-icon::after,
  .js .revolution-grid.cascade-in .revolution-icon::before {
    transition: none;
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  .js .revolution-grid.cascade-in .revolution-icon::before {
    transform: translate(-50%, -50%) scale(1);
  }
}

.clean-revolution .revolution-card-text {
  flex: 1 1 auto;
  min-width: 0;
}

.clean-revolution .revolution-card-title {
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid rgba(36, 92, 53, 0.18);
}

.clean-revolution .revolution-card-date {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
  opacity: 0.75;
}

/* Same hard-edge language as the buttons and Focus Areas cards: flat fill,
   thick dark border, solid offset shadow -- no gradient, no soft curve. */
/* Arrow-point shape (like the reference) with the same hard-edge language
   as everywhere else on the site. "box-shadow" doesn't render correctly
   together with the Register Now button's own hard-edge treatment: pill
   shape, ink border, ink offset shadow -- identical values, just a wider
   bar instead of a button. */
.clean-revolution .revolution-banner {
  margin: 0 auto;
  max-width: 900px;
  padding: 18px 32px;
  text-align: center;
  border-radius: 999px;
  border: 2px solid var(--color-dark-green);
  background: var(--color-sage);
  box-shadow: 5px 5px 0 var(--color-dark-green);
}

/* The banner slides in once the lines above it have finished drawing. */
.js .revolution-grid.cascade-in + .revolution-banner {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 1.2s;
}

.js .revolution-grid.cascade-in.is-inview + .revolution-banner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .revolution-grid.cascade-in + .revolution-banner {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

.clean-revolution .revolution-banner-text {
  margin: 0;
  font-size: clamp(15px, 2vw, 19px);
  color: var(--color-ink);
}

.clean-revolution .revolution-banner-text strong {
  color: var(--color-dark-green);
}

@media (max-width: 768px) {
  .clean-revolution .revolution-card {
    flex: 1 1 100%;
    max-width: 440px;
  }
}

@media (max-width: 480px) {
  .wp-block-group.clean-revolution {
    padding: 32px var(--icfs-gutter) 28px;
  }

  /* Stacked cards read as one vertical timeline: the badge stays at the
     photo's corner (same as desktop, barely overlapping the photo) and the
     gap between cards shrinks so its line reaches the top of the next card
     -- one continuous spine down to the banner instead of three
     disconnected stubs. */
  .clean-revolution .revolution-grid {
    gap: 4px;
    margin-bottom: 52px;
  }

  .clean-revolution .revolution-icon::after {
    height: 52px;
  }

  .clean-revolution .revolution-icon::before {
    top: calc(100% + 52px);
  }

  .clean-revolution .revolution-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .clean-revolution .revolution-card-photo {
    flex: 0 0 auto;
  }

  .clean-revolution .revolution-banner {
    padding: 16px 24px;
  }
}

/* ---------- Overview (blocks) ---------- */
.wp-block-group.overview {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.overview .overview-grid {
  align-items: center;
}

.overview .overview-heading {
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.2;
  margin: 0 0 20px;
}

.overview .overview-content > p:not(.is-style-eyebrow):not(.is-style-eyebrow-outline) {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Anything the team adds to the text column (more paragraphs, a list, a
   sub-heading, buttons) gets the same look automatically. */
.overview .overview-content > .wp-block-list {
  list-style: disc;
  margin: 0 0 16px;
  padding-left: 1.25em;
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.6;
}

.overview .overview-content > .wp-block-list li {
  margin: 0 0 6px;
}

.overview .overview-content > h3,
.overview .overview-content > h4 {
  color: var(--color-dark-green);
  font-size: 20px;
  line-height: 1.3;
  margin: 8px 0 12px;
}

/* The dashed call-out is a box: type inside it, add more paragraphs, a list or a button. */
.overview .overview-callout {
  margin: 20px 0 0;
  padding: 20px 22px;
  border: 2px dashed var(--color-blue);
  border-radius: 14px;
  background: var(--color-sage);
  color: var(--color-ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 10px 24px rgba(36, 92, 53, 0.1);
}

.overview .overview-callout > * {
  margin: 0 0 12px;
}

.overview .overview-callout > :last-child {
  margin-bottom: 0;
}

.overview .overview-media.wp-block-cover {
  min-height: 360px;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(36, 92, 53, 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview .overview-media.wp-block-cover:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px rgba(36, 92, 53, 0.28);
}

.overview .overview-media-badge {
  width: fit-content;
  max-width: 220px;
  margin: 20px;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .overview .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Phones/tablets show a shorter photo by default; the Height setting on the block still wins. */
  .overview .overview-media.wp-block-cover {
    min-height: 280px;
  }
}

/* ---------- Conversations That Matter (blocks) ---------- */
.wp-block-group.convo-list {
  background: var(--color-white);
  padding: 80px max(24px, calc((100% - 1052px) / 2));
}

.convo-list .is-style-eyebrow {
  display: flex;
  width: fit-content;
  margin: 0 auto 16px;
}

.convo-list .convo-list-heading {
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 40px;
}

/* The number in each card is automatic, so adding or removing a card keeps the count right. */
.convo-list .convo-list-grid {
  counter-reset: convo;
}

.convo-list .convo-item {
  counter-increment: convo;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 16px 18px;
  text-align: left;
  background: var(--color-white);
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.4;
  border: 1.5px solid rgba(36, 92, 53, 0.2);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(36, 92, 53, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.convo-list .convo-item::before {
  content: counter(convo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-pink);
  color: var(--color-white);
  font-weight: 700;
  font-size: 14px;
}

.convo-list .convo-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(36, 92, 53, 0.14);
}

@media (max-width: 900px) {
  .convo-list .convo-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .wp-block-group.convo-list {
    padding: 56px max(24px, calc((100% - 1052px) / 2));
  }

  .convo-list .convo-list-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Summit Scale (blocks) ---------- */
.wp-block-group.summit-scale {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.summit-scale .summit-scale-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 0 0 32px;
}

.summit-scale .summit-scale-panel {
  border: 2px solid var(--color-pink);
  border-radius: 24px;
  padding: 20px;
}

.summit-scale .summit-stat {
  flex: 1 1 160px;
  min-width: 0;
  border-radius: 16px;
  padding: 24px 16px;
}

.summit-scale .summit-stat-value {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  font-variant-numeric: tabular-nums;
  margin: 0 0 6px;
}

.summit-scale .summit-stat-label {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  opacity: 0.85;
}

@media (max-width: 600px) {
  .wp-block-group.summit-scale {
    padding: 32px var(--icfs-gutter);
  }

  .summit-scale .summit-scale-panel {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---------- Who Should Attend (blocks) ---------- */
.wp-block-group.who-should-attend {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.who-should-attend .who-should-attend-heading {
  font-size: clamp(26px, 4.5vw, 38px);
  margin: 0 0 32px;
}

.who-should-attend .attendee-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px 14px;
  border: 1.5px solid var(--color-green);
  border-radius: 999px;
  color: var(--color-pink);
  font-weight: 700;
  font-size: 13px;
  background: var(--color-white);
  box-shadow: 4px 4px 0 var(--color-pink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.who-should-attend .attendee-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--color-pink);
}

@media (max-width: 1024px) {
  .who-should-attend .attendee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wp-block-group.who-should-attend {
    padding: 32px var(--icfs-gutter);
  }

  .who-should-attend .attendee-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Why This Summit Matters (blocks) ---------- */
.wp-block-group.why-summit-matters {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.why-summit-matters .why-summit-matters-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 0 0 40px;
}

.why-summit-matters .reason-card {
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: 6px 6px 0 var(--color-dark-green);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.why-summit-matters .reason-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--color-dark-green);
}

.why-summit-matters .reason-card-title {
  font-size: 17px;
  line-height: 1.3;
  margin: 0 0 10px;
}

.why-summit-matters .reason-card-body {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.85;
}

/* The lighter alternate card in the checkerboard pattern -- a sage tint of
   the brand green, dark text instead of white. */
.why-summit-matters .reason-card-light {
  background: var(--color-sage) !important;
  color: var(--color-ink) !important;
}

.why-summit-matters .reason-card-light .reason-card-title,
.why-summit-matters .reason-card-light .reason-card-body {
  color: var(--color-ink);
}

@media (max-width: 1024px) {
  .why-summit-matters .reason-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wp-block-group.why-summit-matters {
    padding: 32px var(--icfs-gutter);
  }

  .why-summit-matters .reason-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Align With The Movement (blocks) ---------- */
.wp-block-group.align-movement {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.align-movement .align-movement-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  margin-top: 24px;
  align-items: start;
}

.align-movement .align-movement-heading {
  font-size: clamp(26px, 4.2vw, 38px);
  line-height: 1.2;
  margin: 0 0 18px;
}

.align-movement .align-movement-text {
  color: var(--color-ink);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.align-movement .align-movement-benefits {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each list item gets its green tick from the styling, so a line the team adds looks the same. */
.align-movement .align-movement-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 14px;
}

.align-movement .align-movement-benefits li::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: var(--color-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.align-movement .align-movement-content .wp-block-buttons {
  margin: 0;
}

.align-movement .tier-card {
  background: var(--color-white);
  border: 2px dashed var(--color-pink);
  border-radius: 14px;
  padding: 18px 20px;
}

.align-movement .tier-card-title {
  color: var(--color-dark-green);
  font-size: 16px;
  margin: 0 0 6px;
}

.align-movement .tier-card-body {
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1024px) {
  .align-movement .align-movement-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .wp-block-group.align-movement {
    padding: 32px var(--icfs-gutter);
  }
}

/* ---------- Contact (blocks) ---------- */
.wp-block-group.contact {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.contact .contact-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  margin: 0 0 40px;
}

.contact .contact-grid {
  align-items: start;
}

.contact .contact-card {
  min-width: 0;
  background: var(--color-white);
  border: 2px solid var(--color-pink);
  border-radius: 20px;
  padding: 32px;
}

.contact .contact-card-lead {
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.contact .contact-label {
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 8px;
}

.contact .contact-email {
  margin: 16px 0 0;
}

.contact .contact-email a {
  color: var(--color-pink);
  font-weight: 600;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.contact .wp-block-separator.contact-divider:not(.is-style-dots) {
  width: 100%;
  max-width: none;
  height: 0;
  margin: 24px 0;
  border: none;
  border-top: 1px solid rgba(36, 92, 53, 0.15);
  background: none;
  opacity: 1;
}

/* Social icons: dark-green circles, white icons (colours are editable in the block). */
.contact .contact-social {
  gap: 12px;
  margin: 0;
}

.contact .contact-social:not([class*="-icon-size"]) {
  font-size: 18px;
}

.contact .contact-social .wp-social-link a {
  padding: 10px;
}

.contact .contact-form-heading {
  font-size: 20px;
  margin: 0 0 20px;
}

.contact .contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact .contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact .contact-form-field > .contact-form-label {
  display: block;
}

.contact textarea.contact-form-input {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.contact .contact-form-label {
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 13px;
}

.contact .contact-form-input {
  background: var(--color-sage);
  border: none;
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--color-ink);
  font-size: 14px;
  font-family: var(--font-body);
}

.contact .contact-form-input::placeholder {
  color: rgba(0, 0, 0, 0.55);
}

.contact select.contact-form-input {
  appearance: none;
  color: rgba(0, 0, 0, 0.75);
}

.contact .contact-form-submit {
  margin-top: 6px;
  padding: 14px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 15px;
  border: 2px solid var(--color-dark-green);
  box-shadow: 5px 5px 0 var(--color-dark-green);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.contact .contact-form-submit:hover,
.contact .contact-form-submit:focus-visible {
  background: var(--color-dark-green);
  color: var(--color-white);
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--color-dark-green);
}

.contact .contact-form-submit:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--color-dark-green);
}

.contact .contact-form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Inside the block editor the fields are wrapped by editor blocks; keep them spaced the same. */
.contact .contact-form .block-editor-block-list__layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact .contact-form > span.contact-form-submit,
.contact .contact-form .contact-form-submit:where(span) {
  display: block;
  text-align: center;
  pointer-events: none;
}

.contact .contact-form-botcheck {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact .contact-form-status {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 18px;
}

.contact .contact-form-status.is-success {
  color: var(--color-green);
}

.contact .contact-form-status.is-error {
  color: var(--color-pink);
}

@media (max-width: 1024px) {
  .contact .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .wp-block-group.contact {
    padding: 32px var(--icfs-gutter);
  }

  .contact .contact-card {
    padding: 24px;
  }
}

/* ---------- FAQ (blocks: Details) ---------- */
.wp-block-group.faq {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.faq .faq-heading {
  font-size: clamp(28px, 4.5vw, 40px);
  margin: 0 0 32px;
}

.faq .faq-list {
  max-width: none;
}

.faq .faq-item {
  interpolate-size: allow-keywords;
  border: 2px solid var(--color-pink);
  border-radius: 14px;
  padding: 18px 22px;
  background: var(--color-white);
}

.faq .faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  color: var(--color-dark-green);
  font-weight: 700;
  font-size: 15px;
  list-style: none;
}

.faq .faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq .faq-item > summary::after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.faq .faq-item[open] > summary::after {
  transform: rotate(180deg);
}

.faq .faq-item .faq-answer {
  margin: 14px 0 0;
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.6;
}

/* Answers open smoothly (browsers without support just open instantly). */
@media (prefers-reduced-motion: no-preference) {
  .faq .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }

  .faq .faq-item[open]::details-content {
    block-size: auto;
  }
}

@media (max-width: 480px) {
  .wp-block-group.faq {
    padding: 32px var(--icfs-gutter);
  }

  .faq .faq-item {
    padding: 14px 16px;
  }
}

/* ---------- Footer (blocks) ---------- */
.wp-block-group.site-footer {
  padding: 28px var(--icfs-gutter);
  gap: 20px;
  align-items: stretch;
}

/* Three rows: logo + links, then an (empty until the team adds something)
   area for extra columns/text/social icons, then the copyright line. */
.site-footer .footer-main,
.site-footer .footer-bottom {
  gap: 20px;
}

.site-footer .footer-extra {
  gap: 24px 56px;
}

.site-footer .footer-extra:empty {
  display: none;
}

.site-footer .footer-brand {
  gap: 14px;
}

.site-footer .wp-block-group.footer-logo-plate {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 12px;
}

.site-footer .footer-logo-plate .wp-block-site-logo {
  line-height: 0;
}

.site-footer .footer-logo-plate .wp-block-site-logo img {
  display: block;
}

.site-footer .footer-brand-text {
  display: flex;
  flex-direction: column;
}

.site-footer .footer-brand-name {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-heading);
}

.site-footer .footer-brand-tagline {
  margin: 0;
  font-size: 12px;
  opacity: 0.75;
}

.site-footer .footer-links {
  font-size: 14px;
  font-weight: 500;
}

.site-footer .footer-links .wp-block-navigation__container {
  gap: 22px;
}

.site-footer .footer-links a {
  opacity: 0.9;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.site-footer .footer-copyright {
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
}

/* Anything the team adds to the footer (columns, text, headings, lists, social
   icons, buttons) picks up the footer's look automatically. */
.site-footer .footer-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: min(140px, 100%);
}

.site-footer .footer-column-title,
.site-footer :is(.footer-extra, .footer-bottom) > :is(h2, h3, h4) {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer .footer-column .footer-links .wp-block-navigation__container {
  gap: 8px;
}

.site-footer .footer-text,
.site-footer :is(.footer-extra, .footer-bottom) > p:not([class]) {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.85;
}

.site-footer .wp-block-social-links {
  gap: 12px;
  margin: 0;
}

.site-footer .wp-block-social-links:not([class*="-icon-size"]) {
  font-size: 18px;
}

.site-footer .wp-block-social-links .wp-social-link a {
  padding: 10px;
}

.site-footer .wp-block-list {
  margin: 0;
  padding-left: 1.25em;
  font-size: 14px;
  list-style: disc;
}

.site-footer .wp-block-buttons {
  margin: 0;
}

.site-footer a {
  color: inherit;
}

/* Long words or wide items wrap instead of pushing the page sideways. */
.site-footer {
  overflow-wrap: anywhere;
}

.site-footer > * {
  max-width: 100%;
}

@media (max-width: 782px) {
  .site-footer .footer-main {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Buttons (shared: every button in every section) ---------- */
/* Neubrutalism: a solid border and a hard, blur-less offset shadow (its own
   "--btn-shadow" colour, so each variant below can tint its own shadow)
   instead of a soft glow. On hover the button shifts half-way into its
   shadow; on click/tap it presses all the way in and the shadow disappears,
   like a real button being pushed. Still the site's pill shape -- only the
   depth treatment changes. Pink is the default (set in theme.json); the team
   picks another look from a button's "Styles" panel. */
.wp-block-button .wp-block-button__link {
  --btn-shadow: var(--color-ink);
  box-sizing: border-box;
  border: 2px solid var(--btn-shadow);
  box-shadow: 5px 5px 0 var(--btn-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--btn-shadow);
}

.wp-block-button .wp-block-button__link:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--btn-shadow);
}

.wp-block-button.is-style-green .wp-block-button__link {
  background: var(--color-dark-green);
  color: var(--color-white);
}

.wp-block-button.is-style-green-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-dark-green);
  border-color: var(--color-dark-green);
  --btn-shadow: var(--color-dark-green);
}

.wp-block-button.is-style-pink-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-pink);
  border-color: var(--color-pink);
  --btn-shadow: var(--color-pink);
}

.wp-block-button.is-style-white-outline .wp-block-button__link {
  padding: 14px 32px;
  font-weight: 700;
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
  --btn-shadow: var(--color-white);
}

.wp-block-button.is-style-green-outline .wp-block-button__link:hover,
.wp-block-button.is-style-green-outline .wp-block-button__link:focus-visible {
  background: rgba(36, 92, 53, 0.08);
}

.wp-block-button.is-style-pink-outline .wp-block-button__link:hover,
.wp-block-button.is-style-pink-outline .wp-block-button__link:focus-visible {
  background: rgba(193, 225, 193, 0.4);
}

.wp-block-button.is-style-white-outline .wp-block-button__link:hover,
.wp-block-button.is-style-white-outline .wp-block-button__link:focus-visible {
  color: var(--color-dark-green);
  background: var(--color-white);
}

/* A Buttons block the team adds gets a sensible gap between buttons, and
   breathing room under whatever is above it. Zero specificity, so every
   section's own spacing still wins where it sets one. */
:where(.wp-block-buttons.is-layout-flex) {
  gap: 14px;
}

:where(.wp-block-group) > :where(*) + :where(.wp-block-buttons) {
  margin-top: 24px;
}

/* A very long word typed by the team wraps instead of pushing the page sideways. */
.what-to-expect,
.experience-zone,
.overview,
.convo-list,
.summit-scale,
.who-should-attend,
.why-summit-matters,
.align-movement,
.contact,
.faq {
  overflow-wrap: anywhere;
}

/* In the page editor, let every section use the full width (as on the live site)
   instead of the narrow reading column. */
.editor-styles-wrapper .is-root-container > .wp-block-group,
.editor-styles-wrapper .is-root-container > .wp-block-cover {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- Other pages (Page, Posts, Single, 404) ---------- */
/* Title band: the page title on dark green, under the floating navbar. */
.site-main.page-main {
  padding-top: 0;
}

.wp-block-group.page-banner {
  padding: 168px var(--icfs-gutter) 56px;
}

.page-banner .page-banner-title {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.15;
}

/* Reading column for the page's text. */
.wp-block-group.page-content {
  padding: 64px var(--icfs-gutter) 88px;
}

.page-content .wp-block-post-content > * + *,
.wp-block-group.page-content > * + * {
  margin-top: 18px;
}

.page-content .wp-block-post-content {
  max-width: 800px;
  margin-left: 0;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink);
}

.page-content .wp-block-post-content h2 {
  margin-top: 40px;
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--color-dark-green);
}

.page-content .wp-block-post-content h3 {
  margin-top: 28px;
  font-size: 20px;
  color: var(--color-dark-green);
}

.page-content .wp-block-post-content ul,
.page-content .wp-block-post-content ol {
  padding-left: 1.4em;
  list-style: revert;
}

.page-content .wp-block-post-content a:not(.wp-block-button__link) {
  color: var(--color-pink);
  text-decoration: underline;
}

.page-content .wp-block-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.page-content .post-list-title {
  margin: 0 0 6px;
  font-size: 24px;
}

.page-content .post-list-title a {
  color: var(--color-dark-green);
}

.page-content .post-list-date {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-green);
}

.page-content .post-list-excerpt {
  margin: 0 0 32px;
  line-height: 1.6;
}

/* Sections page: no title band; the first section clears the floating navbar. */
.sections-page .wp-block-post-content > .wp-block-group:first-child {
  padding-top: 164px;
}

@media (max-width: 782px) {
  .wp-block-group.page-banner {
    padding-top: 132px;
  }

  .sections-page .wp-block-post-content > .wp-block-group:first-child {
    padding-top: 140px;
  }
}

@media (max-width: 480px) {
  .wp-block-group.page-content {
    padding: 48px var(--icfs-gutter) 64px;
  }
}

/* ---------- Start-a-section patterns (Blank section, Text and photo, Three cards) ---------- */
.wp-block-group.section-blank {
  background: var(--color-white);
  padding: 44px var(--icfs-gutter);
}

.section-blank .section-blank-heading {
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.15;
  margin: 0 0 20px;
}

.section-blank .section-blank-text {
  max-width: 720px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-ink);
}

.section-blank .section-split {
  align-items: center;
}

.section-blank .section-split-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
}

.section-blank .section-split-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.section-blank .section-card {
  padding: 24px;
  background: var(--color-white);
  border: 2px dashed var(--color-pink);
  border-radius: 14px;
}

.section-blank .section-card-title {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--color-dark-green);
}

.section-blank .section-card-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .section-blank .section-split,
  .section-blank .section-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .wp-block-group.section-blank {
    padding: 32px var(--icfs-gutter);
  }
}

/* ---------- PDF viewer modal (any link to a .pdf, e.g. "View Agenda") ---------- */
/* Any <a href="....pdf"> on the page opens here instead of a new tab -- see
   the "pdf-modal" handler in site.js. View-only in spirit (no obvious
   download link in our own UI); a browser's own PDF viewer toolbar may
   still offer save/print, which no modal can fully suppress. */
.icfs-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(32, 32, 32, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.icfs-pdf-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.icfs-pdf-modal-panel {
  position: relative;
  width: min(900px, 100%);
  height: min(85vh, 1100px);
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(32, 32, 32, 0.25);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}

.icfs-pdf-modal.is-open .icfs-pdf-modal-panel {
  transform: translateY(0);
}

.icfs-pdf-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(32, 32, 32, 0.12);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(32, 32, 32, 0.15);
}

.icfs-pdf-modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 480px) {
  .icfs-pdf-modal {
    padding: 0;
  }

  .icfs-pdf-modal-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}