/*
Theme Name:   SCWN
Theme URI:    https://santacruzwomensnetwork.org/
Description:  GeneratePress child theme for the Santa Cruz Women's Network. Holds only what GenerateBlocks cannot: fonts, non-color tokens, base element styles, the WS Form skin, and the story (blog post) layout. Section and component styling lives in GenerateBlocks global styles and block styles.
Author:       Sproutling & Company
Author URI:   https://sproutlingconsulting.com/
Template:     generatepress
Version:      1.4.4
Text Domain:  scwn
*/

/* ------------------------------------------------------------
   1. Fonts (self-hosted Libre Baskerville, latin subset)
   ------------------------------------------------------------ */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/libre-baskerville-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/fonts/libre-baskerville-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/libre-baskerville-latin-700-normal.woff2) format("woff2"); }

/* ------------------------------------------------------------
   2. Tokens
   Brand colors (--sand, --sea, --rosewood ...) are GeneratePress
   global colors: edit them in Customize > Colors. They are set as
   defaults in functions.php. Only non-color tokens live here.
   ------------------------------------------------------------ */
:root {
  --font-display: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --measure: 62ch;
  --gutter: clamp(20px, 5.5vw, 80px);
  --section: clamp(64px, 8vw, 112px);
  --radius-card: 20px;
  --radius-panel: 28px;
}

/* ------------------------------------------------------------
   3. Base elements
   Kept at element-selector specificity so any GenerateBlocks
   class or block style wins without !important.
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
html, body { background: var(--ground); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* GeneratePress adds default margins, sizes, and list indents. The design sets
   these per block, so start every text element from zero. */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; line-height: inherit; text-transform: none; color: var(--sea); text-wrap: pretty; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
p { text-wrap: pretty; }
ul, ol { list-style: none; }

a { color: var(--sea); text-decoration: underline; transition: none; }
a:where(:hover) { color: var(--rosewood); }
/* GeneratePress breaks long words inside content; the design does not. */
.entry-content { overflow-wrap: normal; word-wrap: normal; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
/* On dark surfaces a Sea ring cannot be seen, so it turns Sand: the footer, every Sea band, and any block
   given the Additional CSS class "on-sea" (the membership card on Community). */
.site-footer :focus-visible,
.band-sea :focus-visible,
.on-sea :focus-visible { outline-color: var(--sand); }

/* ------------------------------------------------------------
   4. Utilities
   ------------------------------------------------------------ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Anything given the hidden attribute stays hidden, whatever its display style. */
[hidden] { display: none !important; }

/* Skip link (GeneratePress prints it; this is the design's look for it). */
.screen-reader-text.skip-link:focus {
  left: 16px; top: 16px; z-index: 100000;
  width: auto; height: auto; clip: auto; clip-path: none;
  padding: 12px 18px;
  background: var(--sea); color: #fff;
  border-radius: 999px; box-shadow: none;
  font-size: 16px; font-weight: 400; line-height: 1.6; text-decoration: none;
}

/* ------------------------------------------------------------
   5. Forms (WS Form)
   WS Form draws its own markup, so its look is set here instead
   of in GenerateBlocks. Each form is placed by shortcode inside
   a GenerateBlocks container that carries a class:
     .scwn-contact-form             the Contact page form
     .scwn-newsletter               the email signup (footer, Events, Contact)
     .scwn-newsletter--sea          the signup on a Sea background
     .scwn-form                     the long forms: membership application, the four
                                    member forms and the event sign-in
   Class hooks set on the forms' fields: scwn-topic, scwn-submit,
   scwn-nl-email, scwn-nl-submit.
   ------------------------------------------------------------ */
form.wsf-form.wsf-form-canvas { color: var(--ink); font-family: var(--font-body); }
form.wsf-form.wsf-form-canvas .wsf-sections,
form.wsf-form.wsf-form-canvas .wsf-fields { margin: 0; }
form.wsf-form.wsf-form-canvas .wsf-section { min-width: 0; margin: 0; padding: 0; border: 0; }
/* WS Form sizes each field as a twelfth-column tile (flex-basis and max-width, both !important, driven by --wsf-c).
   Both forms lay their fields out with CSS grid instead, so every tile is told to fill its grid cell. */
form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper { --wsf-c: 12; margin: 0; padding: 0; }

/* Text fields, every form */
form.wsf-form.wsf-form-canvas input.wsf-field[type="text"],
form.wsf-form.wsf-form-canvas input.wsf-field[type="email"],
form.wsf-form.wsf-form-canvas input.wsf-field[type="tel"],
form.wsf-form.wsf-form-canvas input.wsf-field[type="url"],
form.wsf-form.wsf-form-canvas input.wsf-field[type="number"],
form.wsf-form.wsf-form-canvas input.wsf-field[type="date"],
form.wsf-form.wsf-form-canvas input.wsf-field[type="time"],
form.wsf-form.wsf-form-canvas select.wsf-field,
form.wsf-form.wsf-form-canvas textarea.wsf-field {
  display: block;
  width: 100%;
  height: auto;
  min-height: 54px;
  margin: 0;
  padding: 0 18px;
  background: #fff;
  border: 1.5px solid #7b8d94; /* 3.4:1 on white; the lighter mockup value was under the 3:1 floor for field edges */
  border-radius: 999px;
  box-shadow: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
}
form.wsf-form.wsf-form-canvas textarea.wsf-field { min-height: 160px; padding: 16px 18px; border-radius: 18px; resize: vertical; }
/* The topic menu keeps the browser's own arrow, as in the design. WS Form swaps it for a drawn arrow with long selectors; these match them. */
form.wsf-form.wsf-form-canvas select.wsf-field:not([multiple]):not([size]) { -webkit-appearance: menulist; appearance: auto; }
form.wsf-form.wsf-form-canvas select.wsf-field:not([multiple]):not([size]):not([data-wsf-select2]) + span.wsf-select-arrow { display: none !important; } /* WS Form forces this arrow on with !important */
form.wsf-form.wsf-form-canvas input.wsf-field::placeholder,
form.wsf-form.wsf-form-canvas textarea.wsf-field::placeholder { color: #6f6a61; opacity: 1; }
form.wsf-form.wsf-form-canvas .wsf-field:focus { border-color: #7b8d94; box-shadow: none; }
/* Focus ring. WS Form removes the outline from text fields (outline: 0 on input[type].wsf-field:focus) with a
   selector as strong as a plain .wsf-field rule and loaded later, so the field rules below carry the tag and
   attribute to outrank it. Without them Name, Email and the newsletter email show no ring at all. */
form.wsf-form.wsf-form-canvas input.wsf-field[type]:focus-visible,
form.wsf-form.wsf-form-canvas select.wsf-field:focus-visible,
form.wsf-form.wsf-form-canvas textarea.wsf-field:focus-visible,
form.wsf-form.wsf-form-canvas .wsf-button:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
form.wsf-form.wsf-form-canvas.wsf-validated .wsf-field:invalid { border-color: #a8431d; }
form.wsf-form.wsf-form-canvas .wsf-invalid-feedback { margin: 0; font-size: 13px; line-height: 1.6; color: #a8431d; }

/* Buttons, both forms */
form.wsf-form.wsf-form-canvas button.wsf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-height: 56px;
  margin: 0;
  padding: 0 32px;
  background: var(--primary);
  border: 1.5px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
form.wsf-form.wsf-form-canvas button.wsf-button:hover,
form.wsf-form.wsf-form-canvas button.wsf-button:focus { background: var(--primary-hover); color: #fff; }
form.wsf-form.wsf-form-canvas button.wsf-button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Contact form */
.scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper { display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; }
.scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: auto; }
.scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.scwn-submit { display: block; padding-top: 8px; }
@media (max-width: 900px) {
  .scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-fields { grid-template-columns: minmax(0, 1fr); }
  .scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: 1 / -1; }
}
.scwn-contact-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > label.wsf-label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
}

/* Long forms: membership application, the four member forms, event sign-in.
   Each sits in a GenerateBlocks container with the class .scwn-form. */
.scwn-form form.wsf-form.wsf-form-canvas .wsf-sections { display: flex; flex-direction: column; gap: 44px; }
.scwn-form form.wsf-form.wsf-form-canvas fieldset.wsf-section { flex: none; width: 100%; max-width: none; }
.scwn-form form.wsf-form.wsf-form-canvas fieldset.wsf-section + fieldset.wsf-section { padding-top: 40px; border-top: 1px solid var(--line); }
.scwn-form form.wsf-form.wsf-form-canvas fieldset.wsf-section > legend {
  float: left; /* a floated legend lays out like a normal block, so the gap below it is predictable */
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--sea);
}
.scwn-form form.wsf-form.wsf-form-canvas .wsf-fields { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.scwn-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper { display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; min-width: 0; }
.scwn-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: auto; }
.scwn-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.scwn-submit { display: block; padding-top: 8px; }
@media (max-width: 700px) {
  .scwn-form form.wsf-form.wsf-form-canvas .wsf-fields { grid-template-columns: minmax(0, 1fr); }
  .scwn-form form.wsf-form.wsf-form-canvas .wsf-fields .wsf-field-wrapper.wsf-small-6 { grid-column: 1 / -1; }
}
/* Question labels: sentence case, because many are full questions */
.scwn-form form.wsf-form.wsf-form-canvas .wsf-field-wrapper > .wsf-label {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}
.scwn-form form.wsf-form.wsf-form-canvas .wsf-required-wrapper .wsf-text-danger { color: #a8431d; font-weight: 600; }
.scwn-form form.wsf-form.wsf-form-canvas .wsf-help { margin: 0; font-size: 13px; line-height: 1.6; color: var(--caption); }
.scwn-form form.wsf-form.wsf-form-canvas .scwn-short textarea.wsf-field { min-height: 104px; }

/* Checkboxes and radios. WS Form draws its own box (appearance: none, absolutely placed) and offsets the label. */
.scwn-form form.wsf-form.wsf-form-canvas [role="group"],
.scwn-form form.wsf-form.wsf-form-canvas [role="radiogroup"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 28px; }
.scwn-form form.wsf-form.wsf-form-canvas .scwn-cols [role="group"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .scwn-form form.wsf-form.wsf-form-canvas .scwn-cols [role="group"] { grid-template-columns: minmax(0, 1fr); } }
.scwn-form form.wsf-form.wsf-form-canvas [role="group"] > div,
.scwn-form form.wsf-form.wsf-form-canvas [role="radiogroup"] > div { position: relative; margin: 0; padding: 7px 0; min-height: 36px; }
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="checkbox"],
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="radio"] { top: 6px; left: 0; width: 24px; height: 24px; border: 1.5px solid var(--sea); background-color: #fff; cursor: pointer; }
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="checkbox"]:checked,
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="radio"]:checked { background-color: var(--sea); border-color: var(--sea); }
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="radio"]:checked { background-color: #fff; }
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="radio"]:checked::after { background-color: var(--sea); }
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="checkbox"] + label.wsf-label,
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="radio"] + label.wsf-label {
  display: block;
  margin: 0 0 0 36px;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
}

/* File upload: the browser's own picker, framed like the other fields */
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="file"] {
  display: block;
  width: 100%;
  height: auto;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px dashed #7b8d94;
  border-radius: 18px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}
.scwn-form form.wsf-form.wsf-form-canvas input.wsf-field[type="file"]::file-selector-button {
  margin: 0 14px 0 0;
  padding: 8px 18px;
  background: #fff;
  border: 1.5px solid var(--sea);
  border-radius: 999px;
  font: inherit;
  color: var(--sea);
  cursor: pointer;
}

/* Explanatory text inside a form (dues information, the media release, the confirmation list) */
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] p,
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] li { margin: 0; font-size: 15px; line-height: 1.65; color: var(--body); }
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] > * + * { margin-top: 10px; }
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] h2,
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] h3 { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] ul { margin-bottom: 0; padding-left: 20px; list-style: disc; }
.scwn-form form.wsf-form.wsf-form-canvas [data-text-editor] li + li { margin-top: 4px; }

/* Newsletter signup: email and button on one line, stacked on phones */
.scwn-newsletter form.wsf-form.wsf-form-canvas .wsf-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.scwn-newsletter form.wsf-form.wsf-form-canvas .scwn-nl-email > label.wsf-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.scwn-newsletter form.wsf-form.wsf-form-canvas input.wsf-field[type="email"] { min-height: 52px; }
.scwn-newsletter form.wsf-form.wsf-form-canvas button.wsf-button { min-height: 52px; padding: 0 26px; border: 0; white-space: nowrap; }
@media (max-width: 480px) {
  .scwn-newsletter form.wsf-form.wsf-form-canvas .wsf-fields { grid-template-columns: minmax(0, 1fr); }
  .scwn-newsletter form.wsf-form.wsf-form-canvas button.wsf-button { width: 100%; }
}
/* On Sea */
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas input.wsf-field[type="email"] { background: var(--sea-deep); border-color: #9fb0b6; color: #fff; }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas input.wsf-field[type="email"]:focus { border-color: #9fb0b6; }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas input.wsf-field::placeholder { color: #c9d3d6; }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas button.wsf-button { background: var(--sand); color: var(--sea); }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas button.wsf-button:hover,
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas button.wsf-button:focus { background: #fff; color: var(--sea); }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas input.wsf-field[type]:focus-visible,
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas .wsf-button:focus-visible { outline-color: var(--sand); }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas .wsf-invalid-feedback { color: #fff; }
.scwn-newsletter--sea form.wsf-form.wsf-form-canvas.wsf-validated .wsf-field:invalid { border-color: #fff; }

/* ------------------------------------------------------------
   6. Stories (blog posts)
   The design mockups stop at the story cards on the Community
   page, so single stories use GeneratePress's own layout with the
   site's type: a readable column, Baskerville headings, body text.
   ------------------------------------------------------------ */
.single-post .site-main,
.blog .site-main,
.archive .site-main,
.search .site-main { max-width: 760px; margin-inline: auto; padding: clamp(48px, 6vw, 88px) var(--gutter); }
.single-post .inside-article,
.blog .inside-article,
.archive .inside-article,
.search .inside-article { padding: 0; }
.single-post .entry-title { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.2; }
.blog .entry-title, .archive .entry-title, .search .entry-title { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; }
.blog .site-main > article + article, .archive .site-main > article + article, .search .site-main > article + article { margin-top: 48px; }
.entry-title a { color: inherit; text-decoration: none; }
.entry-meta { margin-top: 12px; font-size: 14px; color: var(--caption); }
.entry-meta a { color: inherit; }
.single-post .entry-content > * + *, .entry-summary > * + * { margin-top: 1.2em; }
.single-post .entry-content, .entry-summary { font-size: 17px; line-height: 1.65; color: var(--body); }
.single-post .entry-content h2 { margin-top: 1.6em; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.3; }
.single-post .entry-content h3 { margin-top: 1.4em; font-size: 22px; line-height: 1.3; }
.single-post .entry-content ul, .single-post .entry-content ol { padding-left: 1.3em; }
.single-post .entry-content ul { list-style: disc; }
.single-post .entry-content ol { list-style: decimal; }
.single-post .entry-content li + li { margin-top: 0.4em; }
.single-post .entry-content blockquote { padding-left: 20px; border-left: 3px solid var(--rosewood); font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--sea); }
.single-post .featured-image img, .single-post .entry-content img { border-radius: var(--radius-card); }
.single-post .featured-image { margin-bottom: 32px; }

/* ------------------------------------------------------------
   7. Committee grid (Home)
   Two details depend on how many committee members are published,
   so they live here instead of on the blocks.
   ------------------------------------------------------------ */
/* The quote tile takes whatever is left of the last row (four columns). */
.scwn-committee:has(> .loop-contents > :nth-child(4n+1):last-child) > .scwn-quote { grid-column: span 3; }
.scwn-committee:has(> .loop-contents > :nth-child(4n+2):last-child) > .scwn-quote { grid-column: span 2; }
.scwn-committee:has(> .loop-contents > :nth-child(4n+3):last-child) > .scwn-quote { grid-column: span 1; }
.scwn-committee:has(> .loop-contents > :nth-child(4n):last-child) > .scwn-quote { grid-column: 1 / -1; align-items: center; padding: 40px 24px; text-align: center; }
@media (max-width: 900px) {
  /* Two columns on small screens. */
  .scwn-committee:has(> .loop-contents > :nth-child(odd):last-child) > .scwn-quote { grid-column: span 1; align-items: stretch; padding: 24px; text-align: start; }
  .scwn-committee:has(> .loop-contents > :nth-child(even):last-child) > .scwn-quote { grid-column: 1 / -1; align-items: stretch; padding: 24px; text-align: start; }
}
/* Each portrait's brush circle is turned differently, so no two neighbours match.
   The circle is clipped to its own box so a turned one cannot widen the page on phones. */
.scwn-committee .scwn-avatar { overflow: hidden; }
.scwn-committee > .loop-contents > :nth-child(5n+2) .scwn-avatar::after { transform: rotate(140deg); }
.scwn-committee > .loop-contents > :nth-child(5n+3) .scwn-avatar::after { transform: rotate(-80deg) scaleX(-1); }
.scwn-committee > .loop-contents > :nth-child(5n+4) .scwn-avatar::after { transform: rotate(215deg); }
.scwn-committee > .loop-contents > :nth-child(5n) .scwn-avatar::after { transform: rotate(60deg) scaleX(-1); }

/* Home hero slideshow pause button. The button is added by assets/js/site.js. */
.hero-slides .hero-fades.is-paused .hero-fade,
.hero-slides:hover .hero-fade { animation-play-state: paused; }
.hero-pause {
  position: absolute; z-index: 3; top: 10%; right: 10%;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgb(245 239 230 / .82); color: var(--sea);
  cursor: pointer; opacity: .75; transition: opacity .2s, background-color .2s;
}
.hero-pause svg { fill: currentColor; width: 14px; height: 14px; }
.hero-pause:hover, .hero-pause:focus-visible { opacity: 1; background: var(--sand-light, #fff); }
.hero-pause:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero-pause { display: none; } }

/* Organic-circle page hero (Join, For Members, Community): keep the whole ring inside the hero
   on desktop and tablet instead of letting the hero's overflow clip its top and bottom. */
@media (min-width: 901px) {
  .page-hero .page-hero-motif-table {
    top: 50%; margin-top: 0; transform: translateY(-50%);
    height: min(400px, calc(100% - 40px)); width: auto; aspect-ratio: 1 / 1;
  }
}