/*
Theme Name: Manchester Friends of Palestine
Theme URI: https://mcrfriendsofpalestine.com
Author: Manchester Friends of Palestine
Description: Theme for the Manchester Friends of Palestine society website. Colours, fonts and spacing are controlled from Appearance -> Editor -> Styles. Read the notes at the top of this file before changing anything here.
Template: twentytwentyfour
Version: 2.5.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcrfop
*/

/* =========================================================================
   HOW THIS FILE WORKS  —  read before editing
   =========================================================================

   Colours, fonts and font sizes live in theme.json, NOT here, so that the
   Site Editor (Appearance -> Editor -> Styles) stays the one place a
   non-technical committee member can change them. Everything in theme.json
   is exposed to this file as a CSS variable:

       --wp--preset--color--green
       --wp--preset--font-size--heading-2
       --wp--preset--spacing--60

   Never write a raw hex code below. Use the variable. If a colour you need
   does not exist, add it to the palette in theme.json first — that way it
   also appears in the editor's colour picker for whoever comes after you.

   One trap worth knowing: WordPress kebab-cases preset slugs, so a slug of
   "h2" becomes --wp--preset--font-size--h-2. That is why the heading sizes
   are named "heading-2" and not "h2" — the shorter name silently produced a
   variable that did not exist, and every heading fell back to body size.

   This file is only for the things theme.json genuinely cannot express:
   the tatreez band, the hero collage, hover and focus behaviour, scroll
   animation, the mobile navigation, and styling for the three plugins
   (The Events Calendar, Forminator, Easy Social Icons).

   Sections:
     1. Tokens             6. Cards and panels
     2. Base               7. Scroll animation
     3. Tatreez            7b. Page transitions
     3b. Hero collage      8. The Events Calendar
     4. Header + nav       9. Forminator + social icons
     5. Buttons + links   10. Reduced motion, focus, print
   ========================================================================= */


/* 1. TOKENS ---------------------------------------------------------------
   Motion, the tatreez tile and the hero collage. The tile is a Palestinian
   cross-stitch motif — a hollow stepped diamond — drawn as an SVG and
   repeated; it frames the page at the top and bottom and is used nowhere
   else. The collage sits behind the home page masthead and nowhere else.

   Those are the only two decorative devices on the site. Please keep it
   that way — a third is what would make it look cheap.
   ------------------------------------------------------------------------ */

:root {
  /* Motion. --ease-out is for things entering, --ease-spring for hover. */
  --mcrfop-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mcrfop-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --mcrfop-dur-fast: 180ms;
  --mcrfop-dur: 320ms;
  --mcrfop-dur-slow: 720ms;

  /* Tatreez tile. Recolour by swapping the %23XXXXXX hex (%23 is "#"). */
  --mcrfop-tatreez-green: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="33" viewBox="0 0 36 33" fill="%230B5D3B"><rect x="0" y="15" width="3" height="3"/><rect x="3" y="12" width="3" height="3"/><rect x="3" y="18" width="3" height="3"/><rect x="6" y="9" width="3" height="3"/><rect x="6" y="21" width="3" height="3"/><rect x="9" y="6" width="3" height="3"/><rect x="9" y="24" width="3" height="3"/><rect x="12" y="3" width="3" height="3"/><rect x="12" y="27" width="3" height="3"/><rect x="15" y="0" width="3" height="3"/><rect x="15" y="30" width="3" height="3"/><rect x="18" y="3" width="3" height="3"/><rect x="18" y="27" width="3" height="3"/><rect x="21" y="6" width="3" height="3"/><rect x="21" y="24" width="3" height="3"/><rect x="24" y="9" width="3" height="3"/><rect x="24" y="21" width="3" height="3"/><rect x="27" y="12" width="3" height="3"/><rect x="27" y="18" width="3" height="3"/><rect x="30" y="15" width="3" height="3"/><rect x="33" y="0" width="3" height="3"/><rect x="33" y="15" width="3" height="3"/><rect x="33" y="30" width="3" height="3"/></svg>');
  --mcrfop-tatreez-red: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="33" viewBox="0 0 36 33" fill="%23B81423"><rect x="0" y="15" width="3" height="3"/><rect x="3" y="12" width="3" height="3"/><rect x="3" y="18" width="3" height="3"/><rect x="6" y="9" width="3" height="3"/><rect x="6" y="21" width="3" height="3"/><rect x="9" y="6" width="3" height="3"/><rect x="9" y="24" width="3" height="3"/><rect x="12" y="3" width="3" height="3"/><rect x="12" y="27" width="3" height="3"/><rect x="15" y="0" width="3" height="3"/><rect x="15" y="30" width="3" height="3"/><rect x="18" y="3" width="3" height="3"/><rect x="18" y="27" width="3" height="3"/><rect x="21" y="6" width="3" height="3"/><rect x="21" y="24" width="3" height="3"/><rect x="24" y="9" width="3" height="3"/><rect x="24" y="21" width="3" height="3"/><rect x="27" y="12" width="3" height="3"/><rect x="27" y="18" width="3" height="3"/><rect x="30" y="15" width="3" height="3"/><rect x="33" y="0" width="3" height="3"/><rect x="33" y="15" width="3" height="3"/><rect x="33" y="30" width="3" height="3"/></svg>');

  /* Hero collage — the society's own artwork. Read section 3b before
     touching the strength; two rules there are what allow it to be this
     high, and raising it further needs the contrast re-measuring. */
  --mcrfop-hero-collage: url('assets/img/hero-collage-1600.webp');
  --mcrfop-hero-collage-strength: 0.55;

  --mcrfop-header-h: 4.5rem;
}


/* 2. BASE ----------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* Anchor links (#mission, #timeline) must clear the sticky header. */
  scroll-padding-top: calc(var(--mcrfop-header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Long headlines break badly at narrow widths without these. */
h1, h2, h3, h4 {
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Archivo is a variable font with a width axis. Condensing the largest
   headings slightly is what makes them read like the society's own printed
   posters rather than like default bold Helvetica. theme.json has no
   font-stretch property, so the width axis has to be set here.

   The scale is deliberate: the bigger the type, the tighter the width. */
.has-display-font-size,
h1 {
  font-stretch: 87%;
}

h2 {
  font-stretch: 92%;
}

h3,
h4 {
  font-stretch: 96%;
}

p, li {
  text-wrap: pretty;
}

/* Measure is handled by the layout contentSize in theme.json (44rem, about
   75 characters), not by a max-width here. A max-width on the paragraph
   itself combines with the constrained layout's automatic margins and
   silently centres every short line, such as an eyebrow label. */

img,
video {
  max-width: 100%;
  height: auto;
}

/* Images the committee uploads are wildly different shapes. This stops one
   portrait photo from making a whole row three screens tall. */
.wp-block-image img {
  border-radius: 3px;
}

::selection {
  background: var(--wp--preset--color--green);
  color: var(--wp--preset--color--base);
}

/* Skip link — keyboard users land on it first. */
.mcrfop-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.875rem 1.25rem;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--small);
  text-decoration: none;
}

.mcrfop-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}


/* 3. TATREEZ -------------------------------------------------------------
   The signature. One band under the header, one above the footer. It reads
   as a woven border framing the page, the way tatreez borders a thobe panel.
   ------------------------------------------------------------------------ */

.mcrfop-tatreez {
  height: 14px;
  background-image: var(--mcrfop-tatreez-green);
  background-repeat: repeat-x;
  /* Scale the whole 36x33 tile to the band height. Cropping it instead
     slices the diamonds in half and the band reads as a row of crosses. */
  background-size: auto 100%;
  background-position: center;
  opacity: 0.55;
  flex: none;
}

.mcrfop-tatreez--full {
  height: 26px;
  opacity: 0.8;
}

.mcrfop-tatreez--red {
  background-image: var(--mcrfop-tatreez-red);
}

/* The band is decoration, never content. */
.mcrfop-tatreez {
  pointer-events: none;
}


/* 3b. HERO COLLAGE --------------------------------------------------------
   The second decorative device, and the last one. It is the society's own
   collage — olive tree, Dome of the Rock, the flag, a thobe, the key —
   sitting behind the home page masthead and nowhere else.

   The artwork is meant to read as printing in the paper rather than as a
   photograph with words laid over it. Three things hold that line: the
   strength token, a paper wash heaviest on the left where the type is
   densest, and the desaturation below.

   --mcrfop-hero-collage-strength is 0.55. What that number is really set by
   is which text colours are allowed to sit on the artwork, not by the
   artwork itself:

       ink #101A14 headings   7.1:1    pass
       body #2F352D           5.0:1    pass, AA needs 4.5

       muted #5B6157          2.5:1    kept off the artwork
       green #0B5D3B          3.2:1    kept off the artwork

   Measured against the darkest pixel in the artwork, ignoring both the wash
   and the fade, so these are the worst the hero can do rather than the
   typical case.

   Body text is now the binding constraint and there is not much left: 0.60
   measures 4.53 and 0.65 measures 4.10 and fails. Treat 0.55 as the top of
   the usable range unless the body colour darkens too.

   The first version of this ran at 0.20, because the eyebrow and the lead
   paragraph were muted grey and muted grey fails at anything above that.
   Both now step down to body text, and the outline button — green on
   transparent — has paper put back behind it. Those two rules are what pay
   for the strength; undo either and 0.20 is the ceiling again.

   Re-run tools/hero-contrast.php in the fop-website repo after changing the
   strength, the artwork, or any of these colours.
   ------------------------------------------------------------------------ */

.mcrfop-hero {
  position: relative;
  /* The artwork sits at z-index -1. Without a stacking context of its own
     it would slide behind the page background instead of behind the text. */
  isolation: isolate;
}

/* The muted grey is the one palette colour that cannot take the artwork
   behind it. On plain paper it is 6.2:1; it is what held the collage down
   to 0.20, and it is only used twice in the hero — the eyebrow and the lead
   paragraph. Stepping both down to body text buys the artwork more than
   twice the strength and costs a shade of hierarchy.

   !important is not decoration here: WordPress emits its own colour classes
   as `.has-muted-color { color: ... !important }`, so nothing without it can
   win. Scoped to the hero, so muted grey behaves normally everywhere else.

   If you put muted text back into the hero, drop the strength to 0.20. */
.mcrfop-hero .is-style-eyebrow,
.mcrfop-hero .has-muted-color {
  color: var(--wp--preset--color--body) !important;
}

/* The outline button is green-on-transparent, which is 7.7:1 on paper and
   4.0:1 over the artwork — a fail for a control this size. It gets paper
   back underneath it. It also just looks better: a button should read as a
   solid thing you can press, not as green words floating on a photograph.
   The hover wipe is unaffected; it paints on a ::before above this. */
.mcrfop-hero .wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
}

.mcrfop-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;

  /* Full bleed. The hero block is alignwide, but paper does not stop at the
     text column, so the band runs to both edges. 100vw is only safe here
     because body sets overflow-x: hidden — see section 2. */
  inset-block: 0;
  inset-inline: calc(50% - 50vw);

  /* Two layers, paper wash over artwork. The wash is only a lift under the
     first few words of the headline and the start of each line of the lead
     paragraph — the left edge is where the type is densest. It is gone by
     the halfway mark, so the olive tree at the centre of the collage stays
     visible instead of being scrubbed out. */
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent) 22%,
      transparent 52%
    ),
    var(--mcrfop-hero-collage);
  /* Sized off the band's height rather than "cover" so the artwork is
     zoomed past the point where it fills the space. At cover the whole
     collage is squeezed into a wide strip and every element is too small
     to read as anything; at 175% the tree, the dome and the flag are
     recognisable shapes even at this opacity. */
  background-size: cover, auto 175%;
  background-position: center, 44% 42%;
  background-repeat: no-repeat;

  opacity: var(--mcrfop-hero-collage-strength);
  /* At full saturation the gold dome and the flag read as a photo dropped
     in behind the type. Pulled back, they read as ink on the page. */
  filter: saturate(0.78);

  /* No hard edges: the band has to arrive out of the header's paper and
     leave into the section below without drawing a line across the page. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 68%, transparent 100%);
}

/* Below the hero's own 52rem text column there is no empty side left to
   give the artwork, so the wash comes off, the tree is centred, and the
   whole thing steps back further. The smaller file goes out here too. */
@media (max-width: 900px) {
  :root {
    --mcrfop-hero-collage: url('assets/img/hero-collage-800.webp');
  }

  .mcrfop-hero::before {
    background-image: var(--mcrfop-hero-collage);
    /* Sized to the band's height rather than zoomed past it. A phone-width
       band with the desktop zoom shows about four objects at billboard
       scale and reads as a photograph the text is sitting on; at 115% the
       whole composition is in frame and goes back to being texture. */
    background-size: auto 115%;
    background-position: 52% 42%;
    opacity: calc(var(--mcrfop-hero-collage-strength) * 0.7);
  }
}


/* 4. HEADER AND NAVIGATION ------------------------------------------------ */

.wp-block-template-part:has(> .mcrfop-header),
.mcrfop-header-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
}

/*
 * The frosted background is painted by a pseudo-element, not by the header.
 *
 * backdrop-filter makes an element a containing block for any fixed-position
 * descendant. The mobile navigation overlay is fixed and lives inside this
 * header, so putting the blur on .mcrfop-header itself trapped the whole
 * drawer inside the header's 76px box — the menu opened showing one item.
 * A pseudo-element has no descendants, so it can carry the blur safely.
 */
/* No isolation here on purpose. A stacking context on the header would trap
   the navigation overlay inside it, and the tatreez band — a later sibling —
   would paint across the open menu. */
.mcrfop-header {
  position: relative;
}

.mcrfop-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  transition: box-shadow var(--mcrfop-dur) var(--mcrfop-ease-out),
              background-color var(--mcrfop-dur) var(--mcrfop-ease-out);
}

/* Set by assets/js/animations.js once the page is scrolled. */
.mcrfop-header.is-scrolled::before {
  background: color-mix(in srgb, var(--wp--preset--color--base) 96%, transparent);
  box-shadow: var(--wp--preset--shadow--soft);
}

.mcrfop-wordmark {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-stretch: 88%;
  font-size: 1.0625rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mcrfop-wordmark a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  background-image: none;
  transition: color var(--mcrfop-dur-fast) var(--mcrfop-ease-out);
}

.mcrfop-wordmark a:hover {
  color: var(--wp--preset--color--green);
}

.mcrfop-wordmark-sub {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 1.4;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-top: 0.25em;
}

/* The header has to fit a logo, a wordmark, the menu button and a CTA. Below
   the point where the navigation collapses, the strapline is the first thing
   to go, then the wordmark and the button tighten up. Both are held on one
   line — a two-line wordmark next to a two-line button reads as broken
   rather than as responsive. */
@media (max-width: 560px) {
  .mcrfop-wordmark-sub {
    display: none;
  }

  .mcrfop-wordmark {
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .mcrfop-header-cta .wp-block-button__link {
    padding-inline: 0.8125rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .mcrfop-header {
    padding-inline: var(--wp--preset--spacing--40);
  }
}

/* Narrower still: the logo alone carries the identity. */
@media (max-width: 380px) {
  .mcrfop-wordmark {
    font-size: 0.875rem;
  }
}

/* --- Navigation links: colour change plus a stitched underline ---------- */

.mcrfop-header .wp-block-navigation-item__content {
  position: relative;
  padding-block: 0.35rem;
  color: var(--wp--preset--color--body);
  transition: color var(--mcrfop-dur-fast) var(--mcrfop-ease-out);
}

.mcrfop-header .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wp--preset--color--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mcrfop-dur) var(--mcrfop-ease-out);
}

.mcrfop-header .wp-block-navigation-item__content:hover,
.mcrfop-header .wp-block-navigation-item__content:focus-visible {
  color: var(--wp--preset--color--green);
  /* WordPress emits
       :root :where(.wp-block-navigation a:where(...):hover){text-decoration:underline}
     from theme.json, which put a text underline on top of the green bar below
     — two underlines on one link. The bar is the device this site uses, so the
     text underline goes. Keep this: the core rule comes back on any theme.json
     change, and it is only visible on hover, which is easy to miss. */
  text-decoration: none;
}

.mcrfop-header .wp-block-navigation-item__content:hover::after,
.mcrfop-header .wp-block-navigation-item__content:focus-visible::after,
.mcrfop-header .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

.mcrfop-header .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--green);
}

/* --- Mobile drawer ------------------------------------------------------ */

.mcrfop-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base);
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
  align-items: flex-start;
}

.mcrfop-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: var(--wp--preset--spacing--80);
  width: 100%;
  align-items: flex-start;
}

.mcrfop-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  width: 100%;
  gap: 0;
}

.mcrfop-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
  width: 100%;
}

.mcrfop-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  padding-block: 0.9rem;
  width: 100%;
}

/* The scale-in underline is wrong in a stacked drawer. */
.mcrfop-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::after {
  display: none;
}

.mcrfop-header .wp-block-navigation__responsive-container-open,
.mcrfop-header .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--ink);
  transition: color var(--mcrfop-dur-fast) var(--mcrfop-ease-out),
              transform var(--mcrfop-dur-fast) var(--mcrfop-ease-out);
}

.mcrfop-header .wp-block-navigation__responsive-container-open:hover,
.mcrfop-header .wp-block-navigation__responsive-container-close:hover {
  color: var(--wp--preset--color--green);
  transform: scale(1.08);
}


/* 5. BUTTONS AND LINKS ---------------------------------------------------
   The fill wipes in from the left on hover rather than simply swapping
   colour. Base and hover colours both come from theme.json.
   ------------------------------------------------------------------------ */

.wp-block-button__link,
.wp-element-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color var(--mcrfop-dur) var(--mcrfop-ease-out),
              background-color var(--mcrfop-dur) var(--mcrfop-ease-out),
              border-color var(--mcrfop-dur) var(--mcrfop-ease-out),
              transform var(--mcrfop-dur-fast) var(--mcrfop-ease-spring),
              box-shadow var(--mcrfop-dur) var(--mcrfop-ease-out);
}

.wp-block-button__link::before,
.wp-element-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--wp--preset--color--ink);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--mcrfop-dur) var(--mcrfop-ease-out);
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before,
.wp-element-button:hover::before,
.wp-element-button:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wp-block-button__link:hover,
  .wp-element-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--wp--preset--shadow--lift);
  }

  .wp-block-button__link:active,
  .wp-element-button:active {
    transform: translateY(0);
    box-shadow: none;
  }
}

/* Outline variant — used for anything secondary. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--green);
  border: 2px solid var(--wp--preset--color--green);
}

.wp-block-button.is-style-outline > .wp-block-button__link::before {
  background: var(--wp--preset--color--green);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  color: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--green);
}

/* Urgent variant — campaigns only. Registered in functions.php. */
.wp-block-button.is-style-urgent > .wp-block-button__link {
  background-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-urgent > .wp-block-button__link::before {
  background: var(--wp--preset--color--red-deep);
}

/* On a dark or coloured panel the default ink fill disappears. Invert. */
.has-ink-background-color .wp-block-button__link,
.has-green-background-color .wp-block-button__link,
.has-green-deep-background-color .wp-block-button__link,
.has-red-background-color .wp-block-button__link,
.has-red-deep-background-color .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--ink);
}

.has-ink-background-color .wp-block-button__link::before,
.has-green-background-color .wp-block-button__link::before,
.has-green-deep-background-color .wp-block-button__link::before,
.has-red-background-color .wp-block-button__link::before,
.has-red-deep-background-color .wp-block-button__link::before {
  background: var(--wp--preset--color--surface-deep);
}

.has-ink-background-color .wp-block-button__link:hover,
.has-green-background-color .wp-block-button__link:hover,
.has-green-deep-background-color .wp-block-button__link:hover,
.has-red-background-color .wp-block-button__link:hover,
.has-red-deep-background-color .wp-block-button__link:hover {
  color: var(--wp--preset--color--ink);
}

/* The outline variant is drawn in green, which disappears on a dark panel.
   On those it becomes a white outline that fills white on hover. */
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-green-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-green-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-red-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-red-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--base);
  border-color: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before,
.has-green-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before,
.has-green-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before,
.has-red-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before,
.has-red-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link::before {
  background: var(--wp--preset--color--base);
}

.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-green-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-green-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-red-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-red-deep-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--base);
}

/* --- Headings on filled panels ------------------------------------------
   theme.json colours every heading Ink. On an Ink panel that is Ink on Ink —
   the heading is there, selectable, and completely invisible. Headings on a
   filled panel inherit the panel's text colour instead.

   The :not() keeps an explicitly coloured heading in charge of itself: the
   rule only claims headings that have not been given a colour of their own.
   ------------------------------------------------------------------------ */

.has-ink-background-color :is(h1, h2, h3, h4, h5, h6):not([class*="-color"]),
.has-green-background-color :is(h1, h2, h3, h4, h5, h6):not([class*="-color"]),
.has-green-deep-background-color :is(h1, h2, h3, h4, h5, h6):not([class*="-color"]),
.has-red-background-color :is(h1, h2, h3, h4, h5, h6):not([class*="-color"]),
.has-red-deep-background-color :is(h1, h2, h3, h4, h5, h6):not([class*="-color"]) {
  color: inherit;
}

/* --- Inline links in body copy: underline grows on hover ---------------- */

/* The exclusions matter: this is for links sitting in a run of text. Anything
   already shaped as a control — a button, a nav item, an events filter pill —
   has its own padding, and the padding-bottom below silently overrides it.
   That is what pushed the text in the events filters off centre: 9.6px above
   it and 1px below. Add any new control-shaped link to both selectors. */
.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):not(.mcrfop-event-filter),
.wp-block-group a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(.mcrfop-event-filter) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--mcrfop-dur) var(--mcrfop-ease-out),
              color var(--mcrfop-dur-fast) var(--mcrfop-ease-out);
  padding-bottom: 1px;
}

.wp-block-post-content a:not(.wp-block-button__link):not(.wp-element-button):not(.mcrfop-event-filter):hover,
.wp-block-group a:not(.wp-block-button__link):not(.wp-element-button):not(.wp-block-navigation-item__content):not(.mcrfop-event-filter):hover {
  background-size: 100% 1.5px;
}


/* 6. CARDS AND PANELS ----------------------------------------------------
   Block styles registered in functions.php so the committee can apply them
   from the editor sidebar (Styles -> Card / Panel) without writing markup.
   ------------------------------------------------------------------------ */

.is-style-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  padding: var(--wp--preset--spacing--60);
  transition: transform var(--mcrfop-dur) var(--mcrfop-ease-out),
              box-shadow var(--mcrfop-dur) var(--mcrfop-ease-out),
              border-color var(--mcrfop-dur) var(--mcrfop-ease-out);
}

/* A card containing a link becomes clickable across its whole area. */
.is-style-card:has(a) {
  position: relative;
}

.is-style-card:has(a) :is(h2, h3, h4) a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Buttons and any second link must stay clickable above that overlay. */
.is-style-card .wp-block-button__link,
.is-style-card .wp-block-buttons {
  position: relative;
  z-index: 2;
}

@media (hover: hover) {
  .is-style-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--wp--preset--shadow--lift);
    border-color: color-mix(in srgb, var(--wp--preset--color--green) 40%, var(--wp--preset--color--border));
  }

  .is-style-card:hover :is(h2, h3, h4) {
    color: var(--wp--preset--color--green);
  }
}

.is-style-card :is(h2, h3, h4) {
  transition: color var(--mcrfop-dur) var(--mcrfop-ease-out);
}

.is-style-card :is(h2, h3, h4) a {
  color: inherit;
  background-image: none;
}

/* A card in a column fills that column, so a row of cards with different
   amounts of text still lines up along the bottom. */
.wp-block-column > .is-style-card {
  height: 100%;
}

/* --- Galleries (the reading list) -------------------------------------
   Core lays a gallery out as a flex row, which gives every row a different
   number of items once the images have different proportions — book covers
   always do. A grid keeps the columns straight and lets each cover keep its
   own shape, which is what a shelf actually looks like. */

.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--wp--preset--spacing--50);
  /* Covers keep their own proportions, so one edge of each row is always
     ragged. Align the bottoms rather than the tops: books stand on a shelf,
     and a row hanging from a rail with gaps underneath is what made this
     look untidy. */
  align-items: end;
}

/* min-width, not width, is what actually holds these open, and the reason is
   worth knowing before anyone tidies it away.

   Core ships this for a .columns-5 gallery:

     figure.wp-block-image:not(#individual-image) { width: calc(20% - gap*0.8) }

   The :not(#individual-image) is deliberate on core's part — it buys the rule
   ID-level specificity so it beats any theme rule that sets `width`. Inside
   core's own flex row that 20% means 20% of the row and looks correct. Inside
   the grid below it resolves against the 144px track instead:
   0.2 x 144 - 0.8 x 24 = 9.6px, and every cover collapses to a stamp.

   min-width sidesteps the specificity fight rather than escalating it: it
   clamps whatever width core computes, needs no !important, and keeps working
   for whatever columns-N a committee member picks in the editor. */
.wp-block-gallery.has-nested-images > figure.wp-block-image {
  width: 100%;
  min-width: 100%;
  max-width: none;
  margin: 0;
  flex: none;
}

.wp-block-gallery.has-nested-images > figure.wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: var(--wp--preset--shadow--soft);
  transition: transform var(--mcrfop-dur) var(--mcrfop-ease-out),
              box-shadow var(--mcrfop-dur) var(--mcrfop-ease-out);
}

@media (hover: hover) {
  .wp-block-gallery.has-nested-images > figure.wp-block-image:hover img {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--lift);
  }
}

/* Panel — a flat filled block, no hover lift. For statements and figures. */
.is-style-panel {
  border-radius: 4px;
  padding: var(--wp--preset--spacing--70);
}

/* Eyebrow — the small mono label above a heading. */
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-bottom: 0.75rem;
}

/* On a filled panel the muted grey is unreadable — inherit instead. */
[class*="has-background"] .is-style-eyebrow {
  color: inherit;
  opacity: 0.75;
}

/* Figure — one big number, used on the divestment vote result. */
.is-style-figure {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3.5rem, 12vw, 7rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin: 0 0 0.25em;
}

/* Media on a card should not overflow its rounded corner. */
.is-style-card .wp-block-image,
.is-style-card figure {
  overflow: hidden;
  border-radius: 3px;
}

.is-style-card .wp-block-image img {
  transition: transform var(--mcrfop-dur-slow) var(--mcrfop-ease-out);
  width: 100%;
}

@media (hover: hover) {
  .is-style-card:hover .wp-block-image img {
    transform: scale(1.04);
  }
}

/* Section rhythm. Groups the committee marks as a section get real air. */
.is-style-section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* A page whose last block is a full-bleed coloured panel should hand
   straight over to the footer. The main element's bottom padding exists for
   pages that end in ordinary text, and leaves a white strip under a panel. */
main:has(.wp-block-post-content > :last-child.alignfull) {
  padding-bottom: 0;
}

/* Section intro — the eyebrow and heading above a row of cards.
   Its width and left alignment come from the block's own layout settings
   (Constrained + justify left) so the committee can change them in the
   editor. Do not re-add a max-width here; WordPress emits the layout margins
   with !important and a rule in this file would silently lose. */
.mcrfop-intro {
  margin-bottom: var(--wp--preset--spacing--60);
}


/* 6b. FOOTER -------------------------------------------------------------
   The footer sits on Ink. The theme's green link colour is unreadable there,
   so every link inside is re-coloured rather than left to inherit.
   ------------------------------------------------------------------------ */

.mcrfop-footer-name {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mcrfop-footer-est {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.1em;
  color: var(--wp--preset--color--border);
}

.mcrfop-footer-est [lang="ar"] {
  font-family: var(--wp--preset--font-family--arabic);
  font-size: 0.9375rem;
  letter-spacing: 0;
  vertical-align: -0.05em;
}

.mcrfop-footer-label {
  color: var(--wp--preset--color--border);
}

.mcrfop-footer-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--wp--preset--font-size--small);
}

.mcrfop-footer a {
  color: var(--wp--preset--color--base);
  font-weight: 400;
  text-decoration: none;
  transition: color var(--mcrfop-dur-fast) var(--mcrfop-ease-out);
}

.mcrfop-footer a:hover,
.mcrfop-footer a:focus-visible {
  color: var(--wp--preset--color--green-tint);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mcrfop-footer .wp-block-button__link:hover {
  text-decoration: none;
}

.mcrfop-footer-base {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--border);
}

/* The coin logo is gold on transparent — it reads on Ink without help, but
   a touch of lift stops it sitting flat against the background. */
.mcrfop-footer .wp-block-site-logo img {
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
}


/* 7. SCROLL ANIMATION ----------------------------------------------------
   assets/js/animations.js adds .is-visible when an element scrolls into
   view. Elements are visible by default so that a JavaScript failure, or a
   crawler, never gets a blank page.
   ------------------------------------------------------------------------ */

.mcrfop-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--mcrfop-dur-slow) var(--mcrfop-ease-out),
              transform var(--mcrfop-dur-slow) var(--mcrfop-ease-out);
  transition-delay: var(--mcrfop-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.mcrfop-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Page-load sequence for the hero: the masthead sets itself before the
   rest of the page arrives. The hero is excluded from the scroll reveal in
   animations.js so these two never run on the same element. */
.mcrfop-hero > * {
  animation: mcrfop-rise 800ms var(--mcrfop-ease-out) backwards;
}

.mcrfop-hero > *:nth-child(1) { animation-delay: 60ms; }
.mcrfop-hero > *:nth-child(2) { animation-delay: 160ms; }
.mcrfop-hero > *:nth-child(3) { animation-delay: 250ms; }
.mcrfop-hero > *:nth-child(4) { animation-delay: 330ms; }
.mcrfop-hero > *:nth-child(5) { animation-delay: 400ms; }

/* The same sequence for the inner pages' title band. Every page except the
   home page opens with .mcrfop-page-head rather than the hero, and it is
   always above the fold, so it is excluded from the scroll reveal in
   animations.js and settles in on load instead. Two steps, not five — it
   holds a title and a standfirst, and any more would be fussy. */
.mcrfop-page-head > * {
  animation: mcrfop-rise 800ms var(--mcrfop-ease-out) backwards;
}

.mcrfop-page-head > *:nth-child(1) { animation-delay: 60ms; }
.mcrfop-page-head > *:nth-child(2) { animation-delay: 160ms; }

@keyframes mcrfop-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}


/* 7b. PAGE TRANSITIONS ---------------------------------------------------
   A short cross-fade between pages, in place of the white flash of an
   ordinary navigation.

   This is the entire feature. There is no JavaScript: @view-transition is a
   rule the browser acts on by itself, so it adds nothing to the page weight
   that matters on mobile data, and a browser without support simply
   navigates the way it always did. Nothing here needs a fallback.

   Deliberately unnamed. Giving the header a view-transition-name would let
   it sit still while the rest of the page changes, which looks better — but
   every named element is a piece of markup that has to keep that name
   forever, and this site is handed to a new committee each year. One
   cross-fade with no names is the version that still works after somebody
   rebuilds a page in the editor.

   Kept at --mcrfop-dur-fast. Longer reads as sluggish rather than smooth,
   because the next page is already rendered and waiting behind the fade.
   ------------------------------------------------------------------------ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--mcrfop-dur-fast);
  animation-timing-function: var(--mcrfop-ease-out);
}


/* 8. THE EVENTS CALENDAR -------------------------------------------------
   The plugin ships its own design. These rules pull it back towards the
   theme without fighting every one of its selectors.
   ------------------------------------------------------------------------ */

.tribe-common,
.tribe-events {
  --tec-color-accent-primary: var(--wp--preset--color--green);
  --tec-color-accent-primary-hover: var(--wp--preset--color--green-deep);
  --tec-color-accent-primary-active: var(--wp--preset--color--green-deep);
  --tec-color-background-events-bar: var(--wp--preset--color--surface);
  --tec-color-text-primary: var(--wp--preset--color--body);
  --tec-color-text-secondary: var(--wp--preset--color--muted);
  --tec-color-border-default: var(--wp--preset--color--border);
  --tec-font-family-sans-serif: var(--wp--preset--font-family--sans);
}

.tribe-common .tribe-common-h1,
.tribe-common .tribe-common-h2,
.tribe-common .tribe-common-h3,
.tribe-common .tribe-common-h4,
.tribe-common .tribe-common-h5,
.tribe-common .tribe-common-h6,
.tribe-events-calendar-list__event-title {
  font-family: var(--wp--preset--font-family--display);
  letter-spacing: -0.02em;
}

.tribe-events-calendar-list__event-row {
  padding-block: var(--wp--preset--spacing--50);
  border-bottom: 1px solid var(--wp--preset--color--border);
  transition: background-color var(--mcrfop-dur) var(--mcrfop-ease-out);
}

.tribe-events-calendar-list__event-row:hover {
  background-color: var(--wp--preset--color--surface);
}

.tribe-events-calendar-list__event-title-link {
  color: var(--wp--preset--color--ink);
  transition: color var(--mcrfop-dur-fast) var(--mcrfop-ease-out);
}

.tribe-events-calendar-list__event-title-link:hover {
  color: var(--wp--preset--color--green);
}

/* Category filters on the events archive. */
.mcrfop-event-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Left, not centred. These sit in .mcrfop-page-head under an eyebrow, an h1
     and a standfirst that are all left-aligned, and a centred row underneath
     them read as though it belonged to a different page. */
  justify-content: flex-start;
  /* Matches the band's own blockGap, so the row sits in the same rhythm as
     the eyebrow, heading and standfirst above it. The bottom margin is zero:
     the band's padding already ends the section, and a margin there left the
     row floating between the two. */
  margin-block: var(--wp--preset--spacing--40) 0;
}

.mcrfop-event-filter {
  /* Centred by the flexbox rather than by symmetric padding. Padding alone
     leaves the text sitting wherever the mono font's line box happens to put
     it, and is easily overridden by a stray padding rule elsewhere. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* A pill keeps its natural width. As flex items these otherwise shrink and
     the longest label wraps onto a second line — "All events" became 45px tall
     next to 33px neighbours. They wrap onto a new row instead, which the
     container's flex-wrap already handles. */
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  color: var(--wp--preset--color--body);
  text-decoration: none;
  background: var(--wp--preset--color--base);
  transition: background-color var(--mcrfop-dur) var(--mcrfop-ease-out),
              color var(--mcrfop-dur) var(--mcrfop-ease-out),
              border-color var(--mcrfop-dur) var(--mcrfop-ease-out),
              transform var(--mcrfop-dur-fast) var(--mcrfop-ease-spring);
}

.mcrfop-event-filter:hover,
.mcrfop-event-filter:focus-visible {
  background: var(--wp--preset--color--green);
  border-color: var(--wp--preset--color--green);
  color: var(--wp--preset--color--base);
  transform: translateY(-2px);
}

.mcrfop-event-filter[aria-current="page"] {
  background: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--base);
}

/* On a touch screen these are 32px tall, which is under the 44px a finger
   needs. Grown only for coarse pointers: a mouse hits 32px comfortably, and
   44px pills on a desktop read as chunky. */
@media (pointer: coarse) {
  /* box-sizing is set on the base rule, so min-height is the finished height
     rather than the content box — without it these come out at 57px. */
  .mcrfop-event-filter {
    min-height: 44px;
  }
}


/* 9. FORMINATOR AND SOCIAL ICONS ----------------------------------------- */

/* Forminator ships its own design and sets colours inline, so these need
   !important. Set the text colour as well as the background — the plugin's
   default label is black, which on the green fill is 2.6:1. */
.forminator-ui#forminator-module-1598.forminator-design--default .forminator-button-submit,
.forminator-ui .forminator-button-submit {
  background: var(--wp--preset--color--green) !important;
  color: var(--wp--preset--color--base) !important;
  font-family: var(--wp--preset--font-family--sans) !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  border: none !important;
  transition: background-color var(--mcrfop-dur) var(--mcrfop-ease-out),
              transform var(--mcrfop-dur-fast) var(--mcrfop-ease-spring) !important;
}

.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus-visible {
  background: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--base) !important;
  transform: translateY(-2px);
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
  border-radius: 2px !important;
  border-color: var(--wp--preset--color--border) !important;
  font-family: var(--wp--preset--font-family--sans) !important;
}

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus {
  border-color: var(--wp--preset--color--green) !important;
  box-shadow: 0 0 0 3px var(--wp--preset--color--green-tint) !important;
}

/* Easy Social Icons */
.cn-social-icon {
  display: flex !important;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.cn-social-icon a {
  transition: transform var(--mcrfop-dur) var(--mcrfop-ease-spring),
              opacity var(--mcrfop-dur) var(--mcrfop-ease-out);
  opacity: 0.85;
}

.cn-social-icon a:hover {
  transform: translateY(-3px) scale(1.06);
  opacity: 1;
}


/* 10. FOCUS, REDUCED MOTION, PRINT ---------------------------------------- */

/* One visible focus ring everywhere. Do not remove it. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* On green and ink panels a green ring is invisible. */
.has-green-background-color :focus-visible,
.has-green-deep-background-color :focus-visible,
.has-ink-background-color :focus-visible,
.has-red-background-color :focus-visible,
.has-red-deep-background-color :focus-visible {
  outline-color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Anything that animates in must still end up visible. */
  .mcrfop-reveal {
    opacity: 1;
    transform: none;
  }

  .mcrfop-hero > *,
  .mcrfop-page-head > * {
    animation: none;
  }

  /* Turn the page transition off outright rather than leaving the blanket
     rule above to shorten it. That rule cannot reach it in any case — the
     view-transition pseudo-elements live in their own tree and are not
     matched by `*` — and a 0.01ms cross-fade would be a hard cut partway
     through a navigation, which is worse than no transition at all. */
  @view-transition {
    navigation: none;
  }
}

@media print {
  .mcrfop-header-wrap,
  .mcrfop-tatreez,
  .wp-block-navigation,
  .mcrfop-event-filters {
    display: none;
  }

  /* Printers render a 18%-opacity photograph as grey mush. */
  .mcrfop-hero::before {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}