/* =========================================================================
   COMPONENTS
   Every class here is a `cg-` class an editor can type into a Divi module's
   CSS Class field, or that a Code module can use directly. That is the whole
   strategy: the design system ships as vocabulary, so building a page is
   picking classes rather than writing custom CSS per section.

   Adding a component? Put it here, then document the class in CLAUDE.md so
   the next session finds it instead of reinventing it.
   ========================================================================= */

/* =========================================================================
   1. BUTTONS
   Pill, Mulish 800 at 14px, capitalised. One label per intent: "Donate Now"
   is the label in the nav, the hero and the footer, not three variations.
   ========================================================================= */

.cg-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: var(--s-4) 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
  filter: none;
  text-shadow: none;
  transition:
    transform var(--t-base) var(--ease),
    background var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.cg-btn:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

/* Primary — gold with ink. Outperforms the usual white-on-orange charity
   button, which fails AA at 2.80:1. This is 9.66:1. */
.cg-btn--primary {
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
}

.cg-btn--primary:hover {
  background: var(--cta-primary-bg-hover);
  color: var(--cta-primary-text);
}

/* Donate — coral with ink, 5.56:1. Giving flows only. Coral anywhere that is
   not asking for money dilutes it. */
.cg-btn--donate {
  background: var(--cta-donate-bg);
  color: var(--cta-donate-text);
}

.cg-btn--donate:hover {
  background: var(--cta-donate-bg-hover);
  color: var(--cta-donate-text);
}

/* Brand — green with white, 5.41:1. Volunteer, partner, secondary asks. */
.cg-btn--brand {
  background: var(--green-600);
  color: #FFFFFF;
}

.cg-btn--brand:hover {
  background: var(--green-700);
  color: #FFFFFF;
}

/* Outline — sits beside a filled button, never alone. A real 1.5px border
   with border-box on the base, so the box does not shift against its filled
   neighbour and the button carries no shadow. */
.cg-btn--outline {
  background: transparent;
  color: var(--cta-secondary-text);
  border: 1.5px solid var(--cta-secondary-border);
}

.cg-btn--outline:hover {
  background: var(--green-600);
  color: #FFFFFF;
}

.cg-btn--outline-light {
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, .5);
}

.cg-btn--outline-light:hover {
  background: rgba(255, 255, 255, .12);
  color: #FFFFFF;
  border-color: #FFFFFF;
}

/* Soft — inside cards. Event join, tags. */
.cg-btn--soft {
  background: var(--coral-50);
  color: var(--text-coral);
}

.cg-btn--soft:hover {
  background: var(--coral-100);
  color: var(--text-coral-tinted);
}

/* Ghost — inline "read more". Does not lift; it is text, not a target. */
.cg-btn--ghost {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  color: var(--green-700);
}

.cg-btn--ghost:hover {
  color: var(--coral-600);
  transform: none;
}

.cg-btn--sm    { padding: 11px 20px; font-size: 13px; }
.cg-btn--lg    { padding: 20px 38px; font-size: 16px; }
.cg-btn--block { width: 100%; justify-content: center; }

.cg-btn[disabled],
.cg-btn[aria-disabled="true"] {
  opacity: .42;
  pointer-events: none;
}

/* Loading — the label stays in place holding the width, the spinner replaces
   it. A button that collapses to a spinner shifts the layout underneath it. */
.cg-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.cg-btn.is-loading::after {
  content: "";
  position: absolute;
  inset: calc(50% - 8px) auto auto calc(50% - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(6, 51, 31, .28);
  border-top-color: var(--green-900);
  border-radius: 50%;
  animation: cg-spin .7s linear infinite;
}

@keyframes cg-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   2. BADGES, PILLS, EYEBROWS
   Eyebrows are rationed to at most one per three sections. The class exists;
   restraint is the editor's job, and CLAUDE.md says so.
   ========================================================================= */

.cg-badge {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 12px;
  letter-spacing: 0;
}

.cg-badge--white { background: #FFFFFF; color: var(--green-700); box-shadow: var(--shadow-sm); }
.cg-badge--gold  { background: var(--gold-100); color: var(--gold-700); }
.cg-badge--green { background: var(--green-100); color: var(--green-700); }
.cg-badge--soft  { background: var(--coral-50); color: var(--text-coral); }

.cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--green-700);
}

.cg-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-400);
  flex: none;
}

.on-dark .cg-eyebrow,
.cg-eyebrow--light { color: var(--gold-300); }

/* =========================================================================
   3. CARDS
   White on cream, 20px, hairline at rest. The shadow is earned on hover, not
   worn permanently. Never nest a card inside a card.
   ========================================================================= */

.cg-card {
  position: relative;
  padding: var(--s-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  transition:
    transform var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease);
}

.cg-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* A card that is not a link should not pretend to be one. */
.cg-card--static:hover {
  transform: none;
  border-color: var(--border-subtle);
  box-shadow: none;
}

.cg-card--cream  { background: var(--sand-100); }
.cg-card--tinted { background: var(--green-50); border-color: var(--green-100); }
.cg-card--dark   { background: var(--green-800); border-color: rgba(255, 255, 255, .14); }

.cg-card--dark h1, .cg-card--dark h2, .cg-card--dark h3,
.cg-card--dark h4, .cg-card--dark h5, .cg-card--dark h6 { color: #FFFFFF; }
.cg-card--dark p { color: var(--green-100); }

/* Programme card — the medallion breaks the top edge, ringed in the page
   ground so it reads as punched through rather than pasted on. Give the card
   enough top padding to clear it. */
.cg-card--programme { padding-top: var(--s-7); margin-top: 28px; }

/* =========================================================================
   4. MEDALLIONS AND PILLAR CODING
   56px tinted discs holding one 24px mark. One tint per programme pillar,
   carried consistently across the whole site.
   ========================================================================= */

.cg-medallion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-700);
  flex: none;
}

.cg-medallion svg,
.cg-medallion img { width: 24px; height: 24px; }

.cg-medallion--shelter   { background: var(--green-100);  color: var(--green-700); }
.cg-medallion--orphanage { background: var(--gold-100);   color: var(--gold-600); }
.cg-medallion--food      { background: var(--orange-100); color: var(--orange-600); }
.cg-medallion--education { background: var(--coral-100);  color: var(--coral-700); }

/* Punched through the top edge of a card. The ring is the page ground, so
   this only reads correctly on the cream. */
.cg-medallion--punched {
  position: absolute;
  top: -28px;
  left: var(--s-6);
  box-shadow: 0 0 0 8px var(--bg-page);
}

/* =========================================================================
   5. STADIUMS
   Hero imagery: full pill radius on a tall box, thick ring, one offset below
   the other. Below 1060px the companion drops and the lead stands alone.
   ========================================================================= */

.cg-stadiums {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
}

.cg-stadium {
  width: 190px;
  height: 290px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 9px #FFFFFF;
  object-fit: cover;
  flex: none;
}

.cg-stadium--companion {
  width: 132px;
  height: 216px;
  box-shadow: 0 0 0 6px var(--gold-400);
  transform: translateY(34px);
}

@media (max-width: 1060px) {
  .cg-stadium--companion { display: none; }
}

/* =========================================================================
   6. FORMS
   Filled, borderless fields on the cream at 12px. This is the most
   distinctive thing about the system's forms and the easiest to get wrong:
   a default bordered white input immediately reads as someone else's site.
   ========================================================================= */

.cg-field,
.cg-form input[type="text"],
.cg-form input[type="email"],
.cg-form input[type="tel"],
.cg-form input[type="number"],
.cg-form input[type="search"],
.cg-form select,
.cg-form textarea {
  width: 100%;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--sand-100);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.cg-field::placeholder,
.cg-form ::placeholder {
  color: var(--sand-600);  /* 4.6:1 on cream, passes AA */
  opacity: 1;
}

.cg-field:focus,
.cg-form :is(input, select, textarea):focus {
  outline: none;
  background: #FFFFFF;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
}

/* Error copy names the problem and the recovery. "Invalid input" tells the
   visitor nothing. See CLAUDE.md for the wording rule. */
.cg-field.is-error,
.cg-form .is-error :is(input, select, textarea) {
  background: var(--coral-50);
  border-color: var(--coral-400);
}

.cg-field-error {
  display: block;
  margin-top: var(--s-2);
  color: var(--coral-700);
  font-size: 13px;
  font-weight: var(--w-label);
}

.cg-label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-ui);
  font-weight: var(--w-label);
  font-size: 14px;
  color: var(--heading);
}

/* Amount chips — giving pages. 8px radius, the one place that step is used.
   The group behaves like a radio set; assets/js/theme.js drives the state and
   mirrors the choice into the amount field. */
.cg-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.cg-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs);
  background: #FFFFFF;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.cg-chip:hover { border-color: var(--green-600); }

.cg-chip.is-active,
.cg-chip[aria-pressed="true"] {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--green-900);
}

/* =========================================================================
   7. ACCORDION
   Built on native <details> so it works without JavaScript and stays
   keyboard-operable for free.
   ========================================================================= */

.cg-accordion { display: grid; gap: var(--s-3); counter-reset: cg-acc; }

.cg-accordion__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: #FFFFFF;
  overflow: hidden;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.cg-accordion__item > summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--h5);
  color: var(--heading);
}

.cg-accordion__item > summary::-webkit-details-marker { display: none; }

.cg-accordion__item > summary::before {
  counter-increment: cg-acc;
  content: counter(cg-acc, decimal-leading-zero);
  padding-right: var(--s-4);
  border-right: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 14px;
  color: var(--green-600);
  flex: none;
}

/* The closed state shows a coral plus; open fills green. */
.cg-accordion__item > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 22px;
  line-height: 1;
  color: var(--coral-600);
}

.cg-accordion__item[open] { background: var(--green-800); border-color: var(--green-800); }
.cg-accordion__item[open] > summary { color: #FFFFFF; }
.cg-accordion__item[open] > summary::before { color: var(--gold-100); border-right-color: rgba(255, 255, 255, .2); }
.cg-accordion__item[open] > summary::after { content: "–"; color: var(--gold-300); }

.cg-accordion__body {
  padding: 0 var(--s-6) var(--s-5);
  color: var(--text-secondary);
}

.cg-accordion__item[open] .cg-accordion__body { color: var(--green-100); }

/* =========================================================================
   8. EVENT ROW
   A stadium-shaped cream capsule holds the date, topped by a solid orange
   disc. Below 1060px the image drops and date plus content carry the row.
   ========================================================================= */

.cg-event {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  border-bottom: 1px solid var(--border-subtle);
}

.cg-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  width: 84px;
  padding: var(--s-4) 0;
  border-radius: var(--r-pill);
  background: var(--sand-100);
  text-align: center;
  flex: none;
}

.cg-event__date b {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: 26px;
  line-height: 1;
  color: var(--heading);
}

.cg-event__date span {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-coral);
}

.cg-event__img {
  width: 120px;
  height: 80px;
  border-radius: var(--r-sm);
  object-fit: cover;
}

@media (max-width: 1060px) {
  .cg-event { grid-template-columns: auto 1fr; }
  .cg-event__img { display: none; }
}

/* =========================================================================
   9. SECTION FURNITURE
   ========================================================================= */

/* Deep green band — footer, stat strips, the donation message panel. */
.cg-band-dark {
  background: var(--bg-inverse);
  color: var(--text-on-dark);
}

.cg-band-dark :is(h1, h2, h3, h4, h5, h6) { color: #FFFFFF; }
.cg-band-dark p { color: var(--green-100); }
.cg-band-dark a { color: var(--gold-300); }

/* Inset band — 30px radius, the one place that step is used. */
.cg-band-inset {
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* The signature sweep. One class, so it is identical in every section it
   appears in. Never put type on it: no gradient text, no sweep behind copy. */
.cg-sweep { background: var(--grad-brand); }
.cg-sweep-warm { background: var(--grad-warm); }
.cg-sweep-deep { background: var(--grad-deep); }

/* A hairline rule as a section divider, in place of a card edge. */
.cg-rule { border-top: 1px solid var(--border-subtle); }

/* The chevron band — green against gold with a notch, the seam closed by a
   negative margin. Removed below 1060px; the panels stack square. */
.cg-chevron-l { clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%); }
.cg-chevron-r { clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%); margin-left: -60px; }

@media (max-width: 1060px) {
  .cg-chevron-l,
  .cg-chevron-r { clip-path: none; margin-left: 0; }
}

/* The sunburst that sits under the gold panel. One conic gradient, kept
   deliberately faint: it is texture, not pattern. */
.cg-sunburst {
  background-image: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, .18) 0deg 6deg,
    transparent 6deg 12deg
  );
}

/* =========================================================================
   10. STATS AND PROGRESS
   ========================================================================= */

.cg-stat__figure {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--heading);
}

.cg-band-dark .cg-stat__figure { color: var(--gold-300); }

.cg-stat__label {
  font-family: var(--font-ui);
  font-weight: var(--w-label);
  font-size: 14px;
  color: var(--text-muted);
}

.cg-band-dark .cg-stat__label { color: var(--green-200); }

/* Progress bar with the gold knob riding the fill edge. */
.cg-progress {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--sand-200);
  overflow: visible;
}

.cg-progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--green-600);
  position: relative;
}

.cg-progress__fill::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  background: var(--gold-400);
  transform: translateY(-50%);
  box-shadow: var(--shadow-sm);
}

/* =========================================================================
   11. GLOBAL HEADER
   A dark utility strip, then a solid green bar (12px radius) that floats over
   the hero and sticks to the top on scroll. Built as a Theme Builder Global
   Header; these classes go on the rows and modules there. Links are Mulish
   800 at 15px, white at 90%, gold on hover and on the current page.
   ========================================================================= */

/* ---- Utility strip -------------------------------------------------------- */
.cg-utilitybar {
  background: var(--green-900);
  color: var(--green-100);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1;
}

.cg-utilitybar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.cg-utilitybar__group { display: inline-flex; align-items: center; gap: var(--s-6); }

.cg-utilitybar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--green-100);
  text-decoration: none;
  font-weight: var(--w-label);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

a.cg-utilitybar__item:hover { color: var(--gold-300); }
.cg-utilitybar__item svg { width: 15px; height: 15px; flex: none; opacity: .8; }

.cg-utilitybar__socials { display: inline-flex; align-items: center; gap: var(--s-2); }

.cg-utilitybar__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--green-100);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.cg-utilitybar__socials a:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.cg-utilitybar__socials svg { width: 15px; height: 15px; }

/* ---- The nav bar ---------------------------------------------------------
   A solid full-width deep-green bar that spans the viewport and sticks to the
   top on scroll. It sits above the hero, not over it: the bar is the ground,
   the inner row holds the content to the container width. */
.cg-nav-dock {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border-subtle);
}

.cg-nav {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 10px var(--s-5);
  background: transparent;
}

/* Once the bar lifts off the page it stays a flat, square bar: the separation
   comes from the bottom border, not a floating shadow. */
.cg-nav-dock.is-stuck { border-bottom-color: var(--border-default); }

/* Brand lockup: the circular emblem on a white disc so it reads on green,
   beside a white two-line wordmark. */
.cg-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
  text-decoration: none;
}

.cg-nav__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  outline: 1px solid var(--border-subtle);
  box-shadow: 0 2px 10px rgba(6, 51, 31, .28);
  flex: none;
}

.cg-nav__mark img { width: 48px; height: 48px; display: block; }

.cg-nav__word { display: flex; flex-direction: column; gap: 2px; line-height: 1.02; }
.cg-nav__word b {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 16px;
  color: var(--text-nav);
  letter-spacing: -.01em;
}
.cg-nav__word span {
  font-family: var(--font-ui);
  font-weight: var(--w-label);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-nav-muted);
}

/* Menu */
.cg-nav__menu { display: inline-flex; align-items: center; gap: 2px; }
.cg-nav__menu > .menu-item-has-children { position: relative; }
.cg-nav__menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1001;
  min-width: 190px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--bg-nav);
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 18px rgba(6, 51, 31, .16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.cg-nav__menu > .menu-item-has-children:hover > .sub-menu,
.cg-nav__menu > .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.cg-nav__menu .sub-menu a {
  display: block;
  padding: 10px 13px;
  color: var(--text-nav);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: var(--w-control);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.cg-nav__menu .sub-menu a:hover,
.cg-nav__menu .sub-menu a:focus-visible {
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  outline: none;
}

.cg-nav__link {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 15px;
  color: var(--text-nav);
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 13px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.cg-nav__link:hover { color: var(--green-700); }

.cg-nav__link[aria-current],
.cg-nav__link.is-current { color: var(--green-700); }

.cg-nav__link.is-current { position: relative; }
.cg-nav__link.is-current::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  background: var(--gold-400);
}

/* Right-hand actions: donate, mobile toggle. */
.cg-nav__actions { display: inline-flex; align-items: center; gap: var(--s-3); }

/* Hamburger — hidden until the menu collapses. */
.cg-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green-50);
  cursor: pointer;
}
.cg-nav__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  border-radius: var(--r-pill);
  background: var(--green-800);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

/* ---- Collapsed navigation ------------------------------------------------
   Below the one-line breakpoint the menu moves into a right-hand drawer. */
@media (max-width: 1120px) {
  .cg-nav__menu { display: none; }
  .cg-nav__toggle { display: inline-flex; }
}

/* Phone lockup: retain a compact CGMOH identifier beside the mark so the
   organization does not become symbol-only. The full name remains the link's
   accessible label and is repeated in the navigation drawer. */
@media (max-width: 600px) {
  .cg-nav { gap: var(--s-2); padding: 8px 12px; }
  .cg-nav__brand { gap: var(--s-2); }
  .cg-nav__word {
    display: block;
    color: var(--text-nav);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: var(--w-control);
    letter-spacing: .055em;
    line-height: 1;
  }
  .cg-nav__word::before { content: "CGMOH"; }
  .cg-nav__word > * { display: none; }
  .cg-nav__actions { gap: var(--s-2); }
  .cg-nav-dock .cg-btn--donate { min-height: 44px; padding: 13px 14px; font-size: 12px; }
  .cg-nav__mark { width: 46px; height: 46px; }
  .cg-nav__mark img { width: 42px; height: 42px; }
}

/* Drawer */
.cg-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
}
.cg-drawer.is-open { visibility: visible; }

.cg-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 51, 31, .55);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.cg-drawer.is-open .cg-drawer__scrim { opacity: 1; }

.cg-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(370px, 88vw);
  padding: var(--s-6) var(--s-6) var(--s-7);
  background: var(--green-800);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cg-drawer.is-open .cg-drawer__panel { transform: translateX(0); }

.cg-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.cg-drawer__brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.cg-drawer__brand .cg-nav__mark { width: 44px; height: 44px; }
.cg-drawer__brand .cg-nav__mark img { width: 40px; height: 40px; }
.cg-drawer__brand b {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 15px;
  line-height: 1.15;
  color: #FFFFFF;
}

.cg-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #FFFFFF;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cg-drawer__close:hover { background: rgba(255, 255, 255, .22); }

.cg-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 18px;
  color: #FFFFFF;
  text-decoration: none;
}
.cg-drawer__link::after { content: "\2192"; color: var(--gold-300); }
.cg-drawer__link:hover { color: var(--gold-300); }
.cg-drawer__link.is-current { color: var(--gold-300); }

.cg-drawer__cta { margin-top: var(--s-5); }
.cg-drawer__cta .cg-btn { width: 100%; justify-content: center; }

.cg-drawer__contact {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  gap: var(--s-3);
  font-size: 14px;
  color: var(--green-100);
}
.cg-drawer__contact a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--green-100);
  text-decoration: none;
}
.cg-drawer__contact a:hover { color: var(--gold-300); }

/* =========================================================================
   MISSION OUTCOMES STRIP
   A compact four-card bridge between the emotional hero and the deeper
   homepage. It carries no heading or secondary CTA: the four programme paths
   are the complete content of this strip.
   ========================================================================= */
.cgmoh-outcomes {
  position: relative;
  z-index: 8;
  overflow: visible;
  padding: 26px 0 24px !important;
  background: var(--sand-100) !important;
}

.cgmoh-outcomes::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--grad-brand);
}

.cgmoh-outcomes__panel {
  position: relative;
  z-index: 2;
  margin: 0 auto !important;
  padding: 20px 0 24px !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
}

.cgmoh-outcomes__panel > .et_pb_column {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

.cgmoh-outcome-card__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cgmoh-outcomes__grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cgmoh-outcomes__grid > .et_pb_column,
.cgmoh-outcomes__grid > .et_pb_column_inner {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.cgmoh-outcome-card,
.cgmoh-outcome-card > .et_pb_text_inner,
.cgmoh-outcome-card > .et_pb_text_inner > p {
  height: 100%;
  margin: 0 !important;
}

.cgmoh-outcome-card__link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  min-height: 98px;
  height: 100%;
  padding: 17px 15px;
  border: 1px solid var(--sand-300);
  border-radius: 14px;
  background: #fff;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}

.cgmoh-outcome-card__icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--outcome-color) 13%, white);
  color: var(--outcome-color);
}

.cgmoh-outcome-card__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cgmoh-outcome-card__copy {
  min-width: 0;
}

.cgmoh-outcome-card__title,
.cgmoh-outcome-card__description {
  display: block;
}

.cgmoh-outcome-card__title {
  color: var(--heading);
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: var(--w-control);
  line-height: 1.25;
}

.cgmoh-outcome-card__description {
  margin-top: 5px;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.45;
}

.cgmoh-outcome-card__arrow {
  display: inline-flex;
  color: var(--green-700);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}

.cgmoh-outcome-card__link:hover {
  border-color: color-mix(in srgb, var(--outcome-color) 44%, var(--sand-300));
  background: color-mix(in srgb, var(--outcome-color) 4%, white);
}

.cgmoh-outcome-card__link:hover .cgmoh-outcome-card__arrow {
  color: var(--outcome-color);
  transform: translateX(3px);
}

.cgmoh-outcome-card__link:focus-visible {
  outline: 3px solid rgba(11, 122, 69, .30);
  outline-offset: 3px;
}

.cgmoh-outcome-card--safety { --outcome-color: var(--green-600); }
.cgmoh-outcome-card--essentials { --outcome-color: var(--gold-500); }
.cgmoh-outcome-card--education { --outcome-color: var(--green-400); }
.cgmoh-outcome-card--community { --outcome-color: var(--orange-500); }

@media (min-width: 1200px) and (min-height: 800px) and (max-height: 980px) {
  body.home .cgmoh-outcomes {
    min-height: calc(100svh - 686px);
    padding: 26px 0 24px !important;
  }
}

@media (max-width: 980px) {
  .cgmoh-outcomes {
    padding: 22px 0 22px !important;
  }

  .cgmoh-outcomes__panel {
    margin: 0 auto !important;
    padding: 18px 0 22px !important;
    transform: none;
  }

  .cgmoh-outcomes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .cgmoh-outcome-card__link {
    min-height: 108px;
  }
}

@media (max-width: 479px) {
  .cgmoh-outcomes {
    padding: 19px 0 19px !important;
  }

  .cgmoh-outcomes__panel {
    margin: 0 auto !important;
    padding: 14px 0 18px !important;
    border-radius: 0;
    transform: none;
  }

  .cgmoh-outcomes__grid {
    gap: 9px;
  }

  .cgmoh-outcome-card__link {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    min-height: 132px;
    padding: 13px 11px;
  }

  .cgmoh-outcome-card__icon {
    width: 34px;
    height: 34px;
  }

  .cgmoh-outcome-card__icon svg {
    width: 18px;
    height: 18px;
  }

  .cgmoh-outcome-card__title {
    font-size: 14.5px;
  }

  .cgmoh-outcome-card__description {
    font-size: 12px;
    line-height: 1.4;
  }

  .cgmoh-outcome-card__arrow {
    display: none;
  }
}

@media (max-width: 359px) {
  .cgmoh-outcomes__grid {
    grid-template-columns: 1fr;
  }

  .cgmoh-outcome-card__link {
    min-height: 92px;
  }
}

/* =========================================================================
   HOME OUTCOMES: three purposeful programme paths, with one clear lead
   ========================================================================= */
.cgmoh-outcomes {
  padding: 34px 0 40px !important;
}

.cgmoh-outcomes__panel {
  padding: 22px 0 28px !important;
}

.cgmoh-outcomes__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cgmoh-outcome-card__link {
  min-height: 122px;
  padding: 20px 18px;
  border-radius: 16px;
}

.cgmoh-outcome-card--lead {
  transform: translateY(10px);
}

.cgmoh-outcome-card--lead .cgmoh-outcome-card__link {
  min-height: 136px;
  border-color: var(--green-700);
  background: var(--green-700);
  color: #FFFFFF !important;
}

.cgmoh-outcome-card--lead .cgmoh-outcome-card__icon {
  background: var(--gold-100);
  color: var(--green-800);
}

.cgmoh-outcome-card--lead .cgmoh-outcome-card__title {
  color: #FFFFFF;
}

.cgmoh-outcome-card--lead .cgmoh-outcome-card__description {
  color: var(--green-100);
}

.cgmoh-outcome-card--lead .cgmoh-outcome-card__arrow {
  color: var(--gold-300);
}

.cgmoh-outcome-card--lead .cgmoh-outcome-card__link:hover {
  border-color: var(--green-800);
  background: var(--green-800);
}

@media (max-width: 980px) {
  .cgmoh-outcomes {
    padding: 26px 0 30px !important;
  }

  .cgmoh-outcomes__panel {
    padding: 18px 0 22px !important;
  }

  .cgmoh-outcomes__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cgmoh-outcome-card--lead {
    transform: none;
  }

  .cgmoh-outcome-card__link,
  .cgmoh-outcome-card--lead .cgmoh-outcome-card__link {
    min-height: 108px;
  }
}

/* =========================================================================
   FINAL HOME POLISH
   The page earns its hierarchy through restraint: a quieter hero illustration,
   a calibrated programme lead, and an editorial offset in the mission story.
   ========================================================================= */
@media (min-width: 981px) {
  .cgmoh-outcome-card--lead {
    transform: translateY(6px);
  }

  .cgmoh-outcome-card--lead .cgmoh-outcome-card__link {
    min-height: 130px;
  }

  .cgmoh-who__visual .et_pb_image {
    transform: translateY(26px);
  }

}

/* =========================================================================
   12. GLOBAL FOOTER
   A gallery strip overlaps the footer seam. Deep green ground,
   link rows split by hairlines with a gold arrow, a newsletter pill, and a
   gold bottom bar carrying the legal line. White text on greens, ink on the
   gold bar. Built as a Theme Builder Global Footer.
   ========================================================================= */

.cg-footer {
  position: relative;
  margin-top: 0;
  background: var(--green-800);
  color: var(--text-on-dark);
  border-radius: 0;
}

/* Gallery strip riding the seam between the cream page and the green ground. */
.cg-footer-gallery {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-4);
  transform: translateY(-52px);
  margin-bottom: -36px;
  position: relative;
  z-index: var(--z-raised);
}

.cg-footer-gallery__cell {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--r-md);
  object-fit: cover;
  border: 5px solid #FFFFFF;
  box-shadow: 0 14px 34px rgba(6, 51, 31, .30);
  background: var(--green-600);
}

.cg-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-9) var(--s-5) var(--s-7);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: var(--s-8);
}

/* Brand column */
.cg-footer__brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); text-decoration: none; }
.cg-footer__brand .cg-nav__mark { width: 56px; height: 56px; }
.cg-footer__brand .cg-nav__mark img { width: 52px; height: 52px; }
.cg-footer__brand b { font-family: var(--font-ui); font-weight: var(--w-control); font-size: 18px; color: #FFFFFF; }

.cg-footer__mission { color: var(--green-100); max-width: 34ch; margin-bottom: var(--s-5); }

.cg-footer__contact { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.cg-footer__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--green-100);
  text-decoration: none;
  font-size: 15px;
}
.cg-footer__contact-item svg { width: 17px; height: 17px; flex: none; color: var(--gold-300); }
a.cg-footer__contact-item:hover { color: #FFFFFF; }

.cg-footer__socials { display: inline-flex; gap: var(--s-3); }
.cg-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cg-footer__socials a:hover { background: var(--gold-400); color: var(--green-900); transform: translateY(-2px); }
.cg-footer__socials svg { width: 18px; height: 18px; }

/* Column titles + link rows with hairlines and a gold arrow. */
.cg-footer__coltitle {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--s-4);
}

.cg-footer__links { list-style: none; margin: 0; padding: 0; }
.cg-footer__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--green-100);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: var(--w-label);
  font-size: 15px;
  transition: color var(--t-fast) var(--ease);
}
.cg-footer__links a::after {
  content: "\2192";
  color: var(--gold-300);
  opacity: .55;
  transform: translateX(0);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cg-footer__links a:hover { color: #FFFFFF; }
.cg-footer__links a:hover::after { opacity: 1; transform: translateX(5px); }

/* Newsletter */
.cg-footer__news p { color: var(--green-100); margin-bottom: var(--s-4); }

.cg-newsletter {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 6px 6px 18px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cg-newsletter:focus-within { border-color: var(--gold-300); background: rgba(255, 255, 255, .14); }
.cg-newsletter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 11px 0;
}
.cg-newsletter input::placeholder { color: var(--green-200); }
.cg-newsletter input:focus { outline: none; }

.cg-footer__consent { margin-top: var(--s-3); font-size: 12.5px; color: var(--green-200); line-height: 1.5; }

/* Gold bottom bar — ink on gold, never white. */
.cg-footer__bar { background: var(--gold-400); color: var(--green-900); }
.cg-footer__bar-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 16px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-weight: var(--w-label);
  font-size: 13.5px;
}
.cg-footer__bar a { color: var(--green-900); text-decoration: none; }
.cg-footer__bar a:hover { text-decoration: underline; }
.cg-footer__bar-legal { max-width: 62ch; }
.cg-footer__bar-links { display: inline-flex; gap: var(--s-5); flex-wrap: wrap; }

/* ---- Footer responsive ---------------------------------------------------- */
@media (max-width: 1060px) {
  .cg-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .cg-footer__news { grid-column: span 2; }
  .cg-footer-gallery { grid-template-columns: repeat(3, 1fr); transform: translateY(-44px); }
}

@media (max-width: 640px) {
  .cg-footer__inner { grid-template-columns: 1fr; }
  .cg-footer__news { grid-column: auto; }
  .cg-footer-gallery { grid-template-columns: repeat(2, 1fr); transform: translateY(-36px); }
  .cg-footer-gallery__cell:nth-child(5) { display: none; } /* keep a clean 2x2 */
  .cg-footer__bar-inner { justify-content: center; text-align: center; }
}


/* ---- Recognition band ----------------------------------------------------
   Modest proof, not a trophy wall: a centered lead over a quiet grid of
   honors, each a small gold emblem with a name and a sub-line. */
.cg-recognition-head { max-width: 62ch; margin-inline: auto; text-align: center; }
.cg-recognition-head h2 { margin-top: 8px; }
.cg-recognition-head p { margin-inline: auto; }

.cg-recognition {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-7);
}
.cg-recognition__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: var(--s-6) var(--s-4);
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.cg-recognition__emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-700);
}
.cg-recognition__emblem svg { width: 24px; height: 24px; }
.cg-recognition__name {
  font-family: var(--font-ui);
  font-weight: var(--w-control);
  font-size: 15px;
  line-height: 1.3;
  color: var(--heading);
}
.cg-recognition__sub {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
@media (max-width: 980px) { .cg-recognition { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cg-recognition { grid-template-columns: 1fr; } }


/* =========================================================================
   14. EVENTS PLUGIN INTEGRATION
   Keeps The Events Calendar and Event Tickets behavior native while aligning
   their public detail surface with CGMOH's Newsreader + Mulish system.
   ========================================================================= */

body.single-tribe_events #tribe-events-content .type-tribe_events {
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  column-gap: var(--s-7);
  row-gap: var(--s-7);
}

body.single-tribe_events .tribe-events-event-image {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 420px;
  margin: 0;
}

body.single-tribe_events .tribe-events-event-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 8px solid var(--bg-raised);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

body.single-tribe_events .tribe-events-single-event-description {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: var(--measure);
  color: var(--text-primary);
  font-family: var(--font-ui) !important;
  font-size: 17px;
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

body.single-tribe_events .tribe-events-single-event-description h2,
body.single-tribe_events .tribe-events-single-event-description h3,
body.single-tribe_events .tribe-events-single-section-title,
body.single-tribe_events .tribe-tickets__rsvp-title {
  color: var(--green-900);
  font-family: var(--font-display) !important;
  font-weight: var(--w-display) !important;
  letter-spacing: -.018em;
}

body.single-tribe_events .tribe-events-single-event-description h2 {
  margin: var(--s-7) 0 var(--s-4);
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.08;
}

body.single-tribe_events .tribe-events-single-event-description h2:first-child {
  margin-top: 0;
}

body.single-tribe_events .tribe-events-single-event-description h3 {
  margin: var(--s-6) 0 var(--s-4);
  font-size: 30px;
  line-height: 1.12;
}

body.single-tribe_events .tribe-events-single-event-description p,
body.single-tribe_events .tribe-events-single-event-description li {
  font-family: var(--font-ui) !important;
  font-size: 17px;
  line-height: 1.7;
}

body.single-tribe_events .event-tickets {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
}

body.single-tribe_events .tribe-tickets__rsvp-wrapper {
  width: 100%;
  margin: 0;
  padding: var(--s-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--bg-warm-soft);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-family: var(--font-ui) !important;
}

body.single-tribe_events .tribe-tickets__rsvp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-7);
  row-gap: var(--s-5);
}

body.single-tribe_events .tribe-tickets__rsvp-details-wrapper,
body.single-tribe_events .tribe-tickets__rsvp-actions-wrapper {
  width: auto;
  padding: 0;
}

body.single-tribe_events .tribe-tickets__rsvp-title {
  margin: 0 0 var(--s-3);
  font-size: 32px !important;
  line-height: 1.1 !important;
}

body.single-tribe_events .tribe-tickets__rsvp-description {
  max-width: 68ch;
  margin: 0;
  color: var(--text-secondary) !important;
  font-family: var(--font-ui) !important;
  font-size: 16px !important;
  font-weight: var(--w-body) !important;
  line-height: 1.65 !important;
}

body.single-tribe_events .tribe-tickets__rsvp-attendance {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

body.single-tribe_events .tribe-tickets__rsvp-attendance-number,
body.single-tribe_events .tribe-tickets__rsvp-attendance-going,
body.single-tribe_events .tribe-tickets__rsvp-actions {
  color: var(--text-primary) !important;
  font-family: var(--font-ui) !important;
}

body.single-tribe_events .tribe-tickets__rsvp-attendance-going {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

body.single-tribe_events .tribe-tickets__rsvp-actions-rsvp > span {
  display: none;
}

body.single-tribe_events .tribe-common .tribe-common-c-btn,
body.single-tribe_events .tribe-common a.tribe-common-c-btn {
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  background: var(--cta-primary-bg);
  color: var(--cta-primary-text);
  font-family: var(--font-ui) !important;
  font-size: 15px;
  font-weight: var(--w-control);
  line-height: 1.2;
}

body.single-tribe_events .tribe-common .tribe-common-c-btn:hover,
body.single-tribe_events .tribe-common a.tribe-common-c-btn:hover {
  background: var(--cta-primary-bg-hover);
}

body.single-tribe_events .tribe-events-single-section {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  width: 100%;
  margin: 0;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-ui) !important;
  font-size: 15px;
  line-height: 1.65;
}

body.single-tribe_events .tribe-events-single-section-title {
  margin: 0 0 var(--s-4);
  font-size: 28px;
  line-height: 1.15;
}

body.single-tribe_events .tribe-events-meta-group,
body.single-tribe_events .tribe-events-meta-list,
body.single-tribe_events .tribe-events-meta-list li,
body.single-tribe_events .tribe-events-meta-group a {
  color: var(--text-primary);
  font-family: var(--font-ui) !important;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

body.single-tribe_events .tribe-events-meta-group a,
body.single-tribe_events .tribe-events-single-event-description a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.single-tribe_events #tribe-events-content .tribe-events.tribe-common {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
}

body.single-tribe_events .tribe-events-c-subscribe-dropdown__container {
  width: auto;
  margin: 0;
}

body.single-tribe_events .tribe-events-c-subscribe-dropdown__button {
  min-height: 48px;
  padding: 10px 16px;
  border-color: var(--cta-secondary-border) !important;
  border-radius: var(--r-pill);
  color: var(--cta-secondary-text) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px;
  font-weight: var(--w-control);
}

body.single-tribe_events .tribe-common button:focus-visible,
body.single-tribe_events .tribe-common a:focus-visible,
body.single-tribe_events .tribe-events-single a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  body.single-tribe_events #tribe-events-content .type-tribe_events {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--s-6) !important;
  }

  body.single-tribe_events .tribe-events-event-image,
  body.single-tribe_events .tribe-events-single-event-description,
  body.single-tribe_events .event-tickets,
  body.single-tribe_events .tribe-events-single-section,
  body.single-tribe_events #tribe-events-content .tribe-events.tribe-common {
    width: 100% !important;
    max-width: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.single-tribe_events .tribe-events-event-image { order: 1; }
  body.single-tribe_events .tribe-events-single-event-description { order: 2; }
  body.single-tribe_events .event-tickets { order: 3; }
  body.single-tribe_events .tribe-events-single-section { order: 4; }
  body.single-tribe_events #tribe-events-content .tribe-events.tribe-common { order: 5; }

  body.single-tribe_events .tribe-events-event-image {
    max-width: 420px !important;
  }

  body.single-tribe_events .tribe-tickets__rsvp {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.single-tribe_events .tribe-tickets__rsvp-actions {
    display: flex;
    justify-content: flex-start;
  }

  body.single-tribe_events .tribe-events-single-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 540px) {
  body.single-tribe_events .tribe-events-single-event-description h2 {
    font-size: 34px;
  }

  body.single-tribe_events .tribe-events-single-event-description h3 {
    font-size: 26px;
  }

  body.single-tribe_events .tribe-tickets__rsvp-wrapper {
    padding: var(--s-5);
  }

  body.single-tribe_events .tribe-tickets__rsvp-title {
    font-size: 28px !important;
  }

  body.single-tribe_events .tribe-common .tribe-common-c-btn,
  body.single-tribe_events .tribe-common a.tribe-common-c-btn {
    width: 100%;
    justify-content: center;
  }
}


body.single-tribe_events .tribe-tickets__rsvp-details,
body.single-tribe_events .tribe-tickets__rsvp-details-wrapper {
  text-align: left;
}


/* Plugin placement rules use !important internally; these scoped declarations
   preserve the intended editorial order without changing ticket behavior. */
body.single-tribe_events .tribe-events-event-image {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.single-tribe_events .tribe-events-single-event-description {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
}

body.single-tribe_events .event-tickets {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
}

body.single-tribe_events .tribe-tickets__rsvp-wrapper {
  width: 100% !important;
  max-width: none !important;
}

body.single-tribe_events .tribe-events-single-section {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
}

body.single-tribe_events #tribe-events-content .tribe-events.tribe-common {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  width: 100% !important;
}

@media (max-width: 980px) {
  body.single-tribe_events .tribe-events-event-image,
  body.single-tribe_events .tribe-events-single-event-description,
  body.single-tribe_events .event-tickets,
  body.single-tribe_events .tribe-events-single-section,
  body.single-tribe_events #tribe-events-content .tribe-events.tribe-common {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  body.single-tribe_events .tribe-events-single-section {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}