/* =============================================================================
   Community Solidarity - Rhythm Theme Custom CSS
   Adapted from stig_sub theme for Drupal 11
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. FONTS
   ----------------------------------------------------------------------------- */

/* Bebas Neue — headline/display font used throughout stig_sub */
@font-face {
  font-family: 'bebasbeueregular';
  src: local('☺'),
       url('../fonts/bebas_neue/bebasneue-webfont.woff') format('woff'),
       url('../fonts/bebas_neue/bebasneue-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Roboto — body font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400;1,700&display=swap');

/* -----------------------------------------------------------------------------
   2. BASE TYPOGRAPHY & BODY
   ----------------------------------------------------------------------------- */

body {
  color: #111;
  font-size: 16px;
  font-family: Roboto, arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
}

/* Keep the public sticky menu behavior consistent with logged-in sessions. The
   base Rhythm script removes `.transparent` on scroll, but anonymous cached
   pages can miss that state change; this subtheme class is toggled by
   nav-scroll-state.js for every visitor. */
html body nav.main-nav.dark.cs-nav-scrolled,
html body nav.main-nav.dark.small-height,
html body nav.main-nav.dark:not(.transparent),
html body .is-sticky nav.main-nav.dark,
html body .sticky-wrapper.is-sticky nav.main-nav.dark {
  background: rgba(10, 10, 10, 0.95) !important;
  background-color: rgba(10, 10, 10, 0.95) !important;
}

.main-nav.dark.transparent:not(.cs-nav-scrolled) {
  background: transparent !important;
}

.cs-nav-scroll-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1029;
  width: 100vw;
  height: 55px;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.95);
  opacity: 0;
  transition: opacity 0.27s cubic-bezier(0, 0, 0.58, 1);
}

body.toolbar-fixed .cs-nav-scroll-backdrop {
  top: 39px;
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .cs-nav-scroll-backdrop {
  top: 79px;
}

a {
  color: #ff0099;
  text-decoration: none;
}

a:hover {
  color: #ff0099;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Roboto, arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 1.3em;
}

/* Allow headings inside shortcode divs that set font-family to inherit it */
#banner-page-title h1,
#banner-page-title h2 {
  font-family: inherit;
}

h1 { font-size: 38px; }
h2 { font-size: 34px; }
h3 { font-size: 30px; }
h4 { font-size: 26px; }
h5 { font-size: 22px; }
h6 { font-size: 18px; }

p {
  margin: 0 0 2em;
}

ul {
  margin: 0 0 1.5em;
}

blockquote {
  margin: 3em 0;
  padding: 0;
  border: none;
  background: 0 0;
  font-style: normal;
  line-height: 1.7;
  color: #777;
}

/* -----------------------------------------------------------------------------
   3. BRAND COLORS & UTILITIES
   ----------------------------------------------------------------------------- */

/* Primary brand color: #ff0099 (hot pink) */
/* Override Rhythm theme's .color class to use CS brand pink */
.color {
  color: #ff0099 !important;
}

/* Override theme's default brand color (#e41919) on bg-color overlay sections.
   These classes are used for parallax/video section overlays (including YTPOverlay). */
.bg-color {
  background-color: #ff0099 !important;
  opacity: .72 !important;
}

.bg-colort-alfa:before,
.bg-colort-alfa .YTPOverlay:before,
.bg-color-alfa-30:before,
.bg-color-alfa-30 .YTPOverlay:before,
.bg-color-alfa-50:before,
.bg-color-alfa-50 .YTPOverlay:before,
.bg-color-alfa-70:before,
.bg-color-alfa-70 .YTPOverlay:before,
.bg-color-alfa-90:before,
.bg-color-alfa-90 .YTPOverlay:before {
  background: #ff0099 !important;
  opacity: .72 !important;
}

/* Service icon sizing — missing from D11 theme, present in D7 (64px) */
.service-icon {
  font-size: 64px;
  line-height: 1.05;
}

.service-icon.color {
  color: #ff0099 !important;
}

.nd-feature-link,
.nd-feature-link:hover,
.nd-feature-link:focus {
  display: block;
  color: inherit;
  text-decoration: none;
  font: inherit;
  line-height: inherit;
}

/* Ensure colored feature icons override the theme's #111 default */
.alt-features-icon.color,
.features-icon.color,
.service-icon.color,
.benefit-icon.color,
.alt-service-icon.color,
.section-icon.color {
  color: #ff0099 !important;
}

/* Ensure uncolored feature icons stay black even when inside an <a> tag */
.alt-features-icon,
.features-icon,
.benefit-icon,
.alt-service-icon,
.section-icon,
.alt-features-icon span,
.alt-features-icon i,
.features-icon span,
.features-icon i,
.service-icon,
.service-icon span,
.service-icon i {
  color: #111 !important;
}

/* Match Font Awesome icons (`<span class="fa fa-…">`) to the size of the
   et-line icons (`<span class="icon-…">`) inside the same wrapper. The
   parent .alt-features-icon / .features-icon / .alt-service-icon /
   .section-icon / .round_background-icon containers all set font-size: 48px,
   which et-line spans inherit naturally because their own rule only sets
   font-family.
   Font Awesome's stylesheet, by contrast, applies the `font` shorthand
   (`font: normal normal normal 14px/1 FontAwesome`) which fixes the line-
   height to 1 and only resets font-size via a follow-up `font-size: inherit`
   — depending on cascade and load order this can leave the icon rendering
   at the shorthand's 14px. Explicit `font-size: inherit !important` on the
   FA span/i forces it to pick up the parent's 48px the same way et-line does. */
.alt-features-icon span.fa,
.alt-features-icon i.fa,
.features-icon span.fa,
.features-icon i.fa,
.service-icon span.fa,
.service-icon i.fa,
.alt-service-icon span.fa,
.alt-service-icon i.fa,
.section-icon span.fa,
.section-icon i.fa,
.round_background-icon span.fa,
.round_background-icon i.fa {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Contact-section feature boxes — `[nd_feature type="round_background"]`.
   The shortcode emits `.round_background-icon`, `.round_background-item`,
   `.round_background-title`, `.round_background-descr`, but no theme CSS
   styled them, so the icons fell back to ~14-16px body text size. These
   rules mirror the .alt-features-* pattern so the contact icons (Call us /
   Write us a letter / Just say hello) match the size of the other feature
   icons on the homepage. */
.round_background-item {
  margin-top: 70px;
}
.round_background-icon {
  padding-top: 10px;
  font-size: 48px;
  line-height: 1.3;
  color: #111;
}
.round_background-title {
  margin-bottom: 21px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4em;
}
.round_background-descr {
  color: #777;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.86;
}

/* Colored variants override to brand pink */
.alt-features-icon.color,
.features-icon.color,
.service-icon.color,
.benefit-icon.color,
.alt-service-icon.color,
.section-icon.color,
.alt-features-icon.color span,
.alt-features-icon.color i,
.features-icon.color span,
.features-icon.color i,
.service-icon.color span,
.service-icon.color i {
  color: #ff0099 !important;
}

.btn-mod.btn-color,
.btn-mod.btn-color:hover {
  background-color: #ff0099;
  color: #fff;
}

.form-submit {
  background-color: #ff0099 !important;
}

.webform-next,
.webform-previous {
  display: inline-block !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  width: 150px;
  background-color: #ff0099 !important;
}

/* Page loader spinner */
.loader {
  background-color: #ff0099;
}

/* Webform checkboxes: display side-by-side instead of stacked.
   The webform module adds .webform-options-display-one-column which
   stacks items; we override it to a wrapping flex row.
   This applies to the community/location checkboxes on page 1. */
.webform-options-display-one-column.form-checkboxes {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.webform-options-display-one-column.form-checkboxes .form-type-checkbox {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px;
  white-space: nowrap;
}

/* Brand color for checked checkboxes (uses the CSS accent-color property) */
.webform-submission-webform-241-form input[type="checkbox"].form-checkbox,
.webform-submission-webform-242-form input[type="checkbox"].form-checkbox {
  accent-color: #ff0099;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
}

.webform-options-display-one-column.form-checkboxes .form-type-checkbox label {
  margin: 0;
  line-height: 1;
  vertical-align: middle;
}

/* ---- Page 3: Volunteer Interests & Personal Interests ----
   These checkboxes live inside .section-text (webform_flexbox containers).

   Problem 1 — label inline with checkboxes:
     webform_flexbox renders as display:flex with row direction, so the
     markup label and the checkboxes appear side by side. Switching to
     column direction stacks them vertically (label on top).

   Problem 2 — checkboxes breaking into uneven pairs:
     The inherited flex-wrap layout above groups narrow labels together and
     leaves wider labels alone. Override with flex-direction:column so every
     option is its own full-width row, regardless of label length. */
.section-text {
  flex-direction: column !important;
}

.section-text .webform-options-display-one-column.form-checkboxes {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 2px 0 !important;
}

.section-text .webform-options-display-one-column.form-checkboxes .form-type-checkbox {
  width: 100% !important;
  /* Allow long labels to wrap within their row */
  white-space: normal !important;
}

/* Font weight helpers */
.fw-300 { font-weight: 300; }
.fw-600 { font-weight: 600; }

/* Text transform */
.uppercase {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* White text */
.white { color: #fff !important; }
.black { color: #000 !important; }

/* Hide utility */
.hide { display: none; }

/* -----------------------------------------------------------------------------
   4. NAVIGATION — Bebas Neue menu with white links
   ----------------------------------------------------------------------------- */

.inner-nav ul {
  float: right;
  margin: auto;
  font-size: 1.5em !important;
  font-family: 'bebasbeueregular' !important;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.nav-logo-wrap {
  margin-right: 0px !important;
}

.inner-nav ul li {
  float: left;
  position: relative;
  margin-left: 30px;
}

@media only screen and (max-width: 1200px) {
  .inner-nav ul li {
    float: left;
    position: relative;
    margin-left: 17px;
  }
}

.inner-nav ul li a {
  color: white !important;
  letter-spacing: 1px;
  display: inline-block;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  height: 75px;
  line-height: 75px;
}

.inner-nav ul li .mn-sub li a {
  font-size: .4em !important;
}

/* TB Mega Menu adds nested wrapper lists; retain the first dropdown's existing
   scale, but keep deeper menu children from growing again at each level. */
.inner-nav .mn-sub ul ul {
  font-size: inherit !important;
}

.mn-sub-multi {
  width: 275px !important;
  overflow: visible;
}

.csmenu-sub {
  font-size: .5em !important;
}

.inner-nav {
  max-width: 90%;
}

/* TB Mega Menu: Other Assistance heading */
.inner-nav ul li.nav-sub-title > a.tbm-link,
.tbm li.nav-sub-title > a.tbm-link {
  color: #ff0099 !important;
  text-align: right !important;
  display: block;
  width: 100%;
}




/* -----------------------------------------------------------------------------
   5. PAGE SECTIONS & LAYOUT
   ----------------------------------------------------------------------------- */

.page-section {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-sizing: border-box;
  padding: 140px 0;
}

.section-text {
  font-size: 18px !important;
  font-weight: 300;
  color: #777;
  line-height: 1.7778;
}

.section-title {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
}

.section-heading {
  margin-top: 0;
  margin-bottom: 28px;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.45;
}

.section-line {
  width: 80px;
  height: 2px;
  margin: 30px auto;
  background: #111;
}

.js-height-full {
  height: 100vh;
}

/* Homepage hero: the migrated shortcode carries an inline `margin-bottom:
   -140px` on #video-bg-1, which lets the next section slide upward over the
   bottom of the full-screen video for anonymous cached pages. Keep the hero
   as a true first-viewport panel. */
#video-bg-1 {
  min-height: 100vh;
  min-height: 100dvh;
  margin-bottom: 0 !important;
}

#video-bg-1 > .js-height-full,
#video-bg-1 .mbYTP_wrapper,
#video-bg-1 .YTPOverlay {
  min-height: 100vh;
  min-height: 100dvh;
}

.home-content {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}

.home-text {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
}

.local-scroll {
  position: relative;
}

.main-wrap {
  position: relative;
  z-index: 100;
}

/* nd-region padding fix */
.nd-region > .container-fluid > .row > .col-md-12 {
  padding-left: 0;
  padding-right: 0;
}

/* Search control height */
.search-wrap .form-control {
  height: 51px !important;
}

/* hs-line sizes — headline text styles */
.hs-line-9 {
  margin-top: 0;
  position: relative;
  font-size: 96px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
}

.hs-line-10-nobg {
  font-size: 30px;
  font-weight: 300;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   6. BANNER & HERO TITLE STYLES (Bebas Neue)
   ----------------------------------------------------------------------------- */

#page-title {
  color: #111;
  margin: 0 0 20px;
  padding-bottom: 25px;
  font-family: 'bebasbeueregular';
  font-size: 4em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
}

#banner-page-title {
  color: white;
  text-shadow: 1px 1px 100px black;
  vertical-align: bottom !important;
  font-family: 'bebasbeueregular';
  font-size: 4em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  padding-left: 10px;
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 5px !important;
}

/* Mission/portfolio-style headers: stack the big-icon play button on
   its own centered line BELOW the title instead of next to it. The
   nd_title shortcode emits <h1_30> (a non-standard element name) which
   browsers render as inline by default, putting the title and the
   inline-block .big-icon-link side-by-side. Forcing block display on
   the title in .home-text breaks them onto separate lines; .home-text
   already has text-align: center inherited from .home-content, so the
   icon auto-centers below. Scoped to h1_30 so the Hempstead banner
   h4 titles (same id="banner-page-title") keep their inline margin. */
.home-text h1_30#banner-page-title {
  display: block;
  margin-bottom: 30px !important;
  padding-left: 0;
}

/* Hempstead Food Share–style banner titles: the [nd_title] shortcodes
   render four stacked <h4 class="align-left ..."> items inside
   .home-text. The smaller (non 3em) titles have no inline padding, so
   they sit flush against the page edge; D7 had them inset to match the
   big titles below. Align all four under the same left gutter. */
.home-text h4.align-left {
  padding-left: 20px !important;
}

#banner-page-title-clean {
  color: white;
  vertical-align: bottom !important;
  font-family: 'bebasbeueregular';
  font-size: 4em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  padding-left: 10px;
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 5px !important;
}

#banner-page-title-top {
  color: white;
  text-shadow: 1px 1px 100px black;
  margin: 0 0 0px;
  height: 310px;
  font-family: 'bebasbeueregular';
  font-size: 4em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  top: -310px !important;
  padding-left: 5px;
  position: relative;
  bottom: -240px !important;
  padding-bottom: 5px;
  margin-bottom: -285px;
}

#banner-date {
  color: white;
  text-shadow: 1px 1px 100px black;
  margin: 0 0 20px;
  padding-bottom: 0px;
  font-family: 'bebasbeueregular';
  font-size: 3em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  top: -90px !important;
  padding-left: 5px;
  position: relative;
  bottom: -100px !important;
  margin-bottom: -75px;
  padding-bottom: 35px;
}

#feature-highlight-title {
  color: #ff0099;
  vertical-align: middle;
  font-family: 'bebasbeueregular';
  font-size: 3em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  padding-left: 10px;
  position: relative;
}

#feature-title {
  color: white;
  font-family: 'bebasbeueregular';
  font-size: 3em;
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
  padding-left: 10px;
  position: relative;
  text-align: left;
}

#article-highlight {
  color: white;
  font-family: 'bebasbeueregular';
  font-size: 3em;
  font-weight: normal;
  line-height: 80% !important;
  text-transform: uppercase;
  padding-bottom: 0px !important;
  text-align: left;
  background-color: #ff0099;
}

#label-title {
  font-family: 'bebasbeueregular';
  font-size: 1.75em;
  font-weight: normal;
  padding-bottom: 1px;
  text-transform: uppercase;
  margin-bottom: 0px;
}

.when {
  padding-top: 0px;
  padding-bottom: 0px;
  color: #ff0099 !important;
  width: 100%;
  margin: 0 0 0px;
  font-family: 'bebasbeueregular';
  font-size: 1.4em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  padding-left: 0px;
  z-index: 0;
}

#specialty-teaser-title,
#specialty-teaser-title:link,
#specialty-teaser-title:visited,
#specialty-teaser-title a {
  color: #3f3f3f !important;
  width: 100%;
  margin: 0 0 0px;
  font-family: 'bebasbeueregular';
  font-size: 3em;
  font-weight: normal;
  line-height: 0.8;
  text-transform: uppercase;
  padding-left: 0px;
  position: relative;
}

#specialty-teaser-title a:hover,
#specialty-teaser-title:hover {
  color: #ff0099 !important;
  text-decoration: none;
  text-shadow: 1px 1px 100px #3e3e3e;
  width: 100%;
}

/* Donation page titles */
.donation-header h3 {
  font-family: 'bebasbeueregular';
  padding: 0px !important;
  margin: 0px !important;
  font-size: 3em;
  color: white;
}

.donation-header h5 {
  visibility: hidden;
  display: none !important;
}

.donation-header input {
  margin-left: 10px;
  color: grey;
  font-weight: bold;
  border-radius: 5px;
}

.donation-header li {
  display: block;
  color: white;
  font-size: 1.5em;
  text-align: left;
  font-family: Roboto, arial, sans-serif !important;
}

/* Donation block — neutralize the .mb-60 (60px margin-bottom) the rhythm
   theme adds to block wrappers. The outer `.donation-header` has 5px
   padding on every side and a translucent dark background, so the 60px
   bottom margin on the inner `.block.mb-60` shows up as a fat dark gap
   between the Donate Now button and the wrapper's bottom edge — much
   wider than the matching 5px on the top/left/right sides. Zeroing it
   makes the wrapper's interior padding uniform on all four sides. */
.donation-header > .block,
.donation-header .block.mb-60 {
  margin-bottom: 0 !important;
}

/* Equal-height donation columns + buttons aligned to the same baseline.
 *
 * The One-Time and Monthly donation blocks sit in side-by-side .col-md-6
 * columns inside a .row. Two things have to be solved together:
 *   1. The columns must equalize height — by default each col sizes to
 *      its own content, so the taller card (Monthly, which has the
 *      MONTHLY pill + an extra $10 row) leaves the other one shorter,
 *      and you can see the lighter background where the .donation-header
 *      ends.
 *   2. Within each card the Donate / Donate Monthly button must hug the
 *      bottom of its card — otherwise even when the cards are equalized
 *      the shorter card's button still floats up where the form
 *      naturally ended, and the two buttons aren't on the same horizontal
 *      line.
 *
 * The chain DOM-wise is:
 *   .row > .col-md-6 > .donation-header > .block > .content
 *        > .cs-donate-block > .cs-donate-form > .cs-donate-btn
 *
 * Each level needs to be a column flex container that flex-grows the
 * one container below it, so the bottom-most flex grow eventually
 * pushes the button to the card's bottom edge. The button itself uses
 * `margin-top: auto`, which inside a column flex container is the
 * standard "push me to the bottom" idiom.
 *
 * Scoped to .cs-donate-toggle-row so the one-off header donation card keeps
 * its original translucent overlay treatment. */
.row.cs-donate-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.row.cs-donate-toggle-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.row.cs-donate-toggle-row > [class*="col-"] > .donation-header {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: rgba(112, 112, 112, 0.92) !important;
  border-radius: 5px !important;
  padding: 6px !important;
  box-sizing: border-box;
}
.row.cs-donate-toggle-row .donation-header > .block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important; /* mb-60 already overridden, but in case
                                  the cascade order ever flips */
}
.row.cs-donate-toggle-row .donation-header > .block > .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.row.cs-donate-toggle-row .donation-header .cs-donate-block {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #00000099 !important;
  border-radius: 5px;
  max-width: none;
}
.row.cs-donate-toggle-row .donation-header .cs-donate-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* Push the submit button to the bottom of the form. With every ancestor
   container flex-growing, the button hits the bottom of the card. Both
   the One-Time card and the Monthly card share .cs-donate-btn, so a
   single rule lines them up. */
.row.cs-donate-toggle-row .donation-header .cs-donate-btn {
  margin-top: auto;
}

/* Center the hero donation card once the header switches to the compact
   mobile/tablet layout. The desktop placement is controlled by inline legacy
   styles, so keep this override below the desktop breakpoint. */
@media only screen and (max-width: 991px) {
  #video-bg-1 .home-text > .row.pi-text-center > .col-xs-4 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  #video-bg-1 .home-text > .row.pi-text-center > .col-xs-4 > .donation-header {
    width: min(350px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
}

.donation-submit-button {
  font-size: 1.5em;
  background-color: #ff0099 !important;
  font-family: Roboto, arial, sans-serif !important;
  color: white;
  width: 250px !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-transform: uppercase;
}

.donation-submit-button:hover {
  color: white !important;
  text-decoration: none !important;
}

/* -----------------------------------------------------------------------------
   7. CONTENT TYPE STYLES
   ----------------------------------------------------------------------------- */

/* Food share teaser link overlay */
.food_share {
  position: relative;
}

.food_share .teaser {
  position: relative;
}

.food_share .teaser .wow,
.food_share .teaser .animated,
.food_share .teaser [class*="fadeIn"],
.food_share .teaser [class*="slide"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

.food_share .teaser [data-wow-delay] {
  animation-delay: 0s !important;
  transition-delay: 0s !important;
}

.press .wow,
.press .animated,
.press [class*="fadeIn"],
.press [class*="slide"] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  visibility: visible !important;
}

.press [data-wow-delay],
.press [data-anim-delay] {
  animation-delay: 0s !important;
  transition-delay: 0s !important;
}

.food_share .teaser [style*="margin-left: -50%"]:has(img) {
  display: block;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.food_share .teaser img {
  display: block;
  height: auto;
  max-width: 100%;
  opacity: 1 !important;
  visibility: visible !important;
}

.food_share .teaser .link,
.press .teaser .link,
.board_member .teaser .link,
.basic-page .teaser .link {
  height: 100%;
  width: 100%;
  z-index: 100;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* When a teaser of one of these content types is used as a clickable
   overlay inside a Bootstrap col (alongside a feature box, etc.), stretch
   it to cover the whole column.
   Scoped with `:has(> .teaser)` so only the teaser variant triggers the
   absolute positioning — full-view rendering of the same node (e.g. on
   /board_of_directors, where each board_member is rendered in full view
   inside a col-md-12) keeps normal document flow and stacks naturally. */
[class*="col-"] > .food_share:has(> .teaser),
[class*="col-"] > .press:has(> .teaser),
[class*="col-"] > .board_member:has(> .teaser) {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

/* Ensure cols that contain a teaser overlay are positioning ancestors. */
[class*="col-"]:has(> .food_share > .teaser),
[class*="col-"]:has(> .press > .teaser),
[class*="col-"]:has(> .board_member > .teaser) {
  position: relative;
}

/* Board/team member listing pages.
 *
 * The migrated bodies include old D7 shortcode offsets on image links. Keep
 * team listings in normal flow with a consistent image column so text never
 * floats over the headshots.
 */
.views-row > .board_member {
  display: block !important;
  position: relative !important;
  clear: both !important;
  padding: 30px 0 !important;
  margin-bottom: 30px !important;
  border-bottom: 1px solid #eee;
  overflow: hidden !important;
}

.views-row > .board_member .teaser {
  position: static !important;
}

.views-row > .board_member .teaser .link {
  display: none !important;
  visibility: hidden !important;
}

.views-row > .board_member .body {
  position: static !important;
  z-index: 1 !important;
}

.views-row > .board_member .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  position: relative !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.views-row > .board_member .row > [class*="col-"] {
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.views-row > .board_member .row > [class*="col-sm-3"],
.views-row > .board_member .row > [class*="col-md-3"],
.views-row > .board_member .row > [class*="col-lg-3"],
.views-row > .board_member .row > [class*="col-sm-4"],
.views-row > .board_member .row > [class*="col-md-4"],
.views-row > .board_member .row > [class*="col-lg-4"] {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}

.views-row > .board_member .row > [class*="col-sm-8"],
.views-row > .board_member .row > [class*="col-md-8"],
.views-row > .board_member .row > [class*="col-lg-8"],
.views-row > .board_member .row > [class*="col-sm-9"],
.views-row > .board_member .row > [class*="col-md-9"],
.views-row > .board_member .row > [class*="col-lg-9"] {
  flex: 1 1 70% !important;
  max-width: calc(75% - 20px) !important;
  width: calc(75% - 20px) !important;
}

.views-row > .board_member .row > [class*="col-"] a:has(img),
.views-row > .board_member .row > [class*="col-"] span:has(img) {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.views-row > .board_member .row img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

@media only screen and (max-width: 767px) {
  .views-row > .board_member .row {
    display: block !important;
  }

  .views-row > .board_member .row > [class*="col-"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  .views-row > .board_member .row > [class*="col-"] + [class*="col-"] {
    margin-top: 20px !important;
  }
}

/* Board member full pages.
 *
 * The migrated individual board-member bodies contain their own shortcode
 * row/columns plus old inline image offsets (`margin-left: 50%;
 * margin-right: -50%`). On full node pages those offsets push the headshot
 * into the text column. Keep the same side-by-side feel as the
 * /board_of_directors teaser list, but neutralize the legacy offsets.
 */
.board_member .article .BOD,
.board_member .article .bio {
  display: block;
  width: 100%;
}

.board_member .article .bio .field--name-body > .row,
.board_member .article .bio > .field > .field__item > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 30px 0 !important;
}

.board_member .article .bio .field--name-body > .row > [class*="col-"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-"] {
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.board_member .article .bio .field--name-body > .row > [class*="col-sm-4"],
.board_member .article .bio .field--name-body > .row > [class*="col-md-4"],
.board_member .article .bio .field--name-body > .row > [class*="col-lg-4"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-sm-4"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-md-4"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-lg-4"] {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
}

.board_member .article .bio .field--name-body > .row > [class*="col-sm-8"],
.board_member .article .bio .field--name-body > .row > [class*="col-md-8"],
.board_member .article .bio .field--name-body > .row > [class*="col-lg-8"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-sm-8"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-md-8"],
.board_member .article .bio > .field > .field__item > .row > [class*="col-lg-8"] {
  flex: 1 1 70% !important;
  max-width: calc(75% - 20px) !important;
  width: calc(75% - 20px) !important;
}

.board_member .article .bio .field--name-body > .row img,
.board_member .article .bio > .field > .field__item > .row img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.board_member .article .bio .field--name-body > .row span,
.board_member .article .bio .field--name-body > .row a,
.board_member .article .bio > .field > .field__item > .row span,
.board_member .article .bio > .field > .field__item > .row a {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media only screen and (max-width: 767px) {
  .board_member .article .bio .field--name-body > .row,
  .board_member .article .bio > .field > .field__item > .row {
    display: block !important;
  }

  .board_member .article .bio .field--name-body > .row > [class*="col-"],
  .board_member .article .bio > .field > .field__item > .row > [class*="col-"] {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Supported organization full pages carry migrated inline offsets on the
   feature image and action-button column. Keep that media within its content
   column, matching the stable positioning used on board-member pages. */
.supported-organization .article .body span:has(img) {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.supported-organization .article .body span:has(img) img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.supported-organization .article .body .row > [class*="col-"]:has(.btn-mod) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.supported-organization .article .body .btn-mod {
  max-width: 100% !important;
  box-sizing: border-box;
}

.foodshare-block {
  padding-bottom: 10px;
  display: inherit;
}

.foodshare-row .node-readmore {
  display: none;
  visibility: hidden;
}

/* Vertical separation between Upcoming Food Shares thumbnails in the
   sidebar on food-share node pages. */
.foodshare-row + .foodshare-row {
  margin-top: 10px;
}

/* Banner box */
#banner-box {
  height: 100%;
}

/* -----------------------------------------------------------------------------
   8. MAILCHIMP NEWSLETTER
   ----------------------------------------------------------------------------- */

#mc_embed_signup {
  width: 100%;
  clear: both;
  padding: 0px;
}

#mce-EMAIL {
  float: left;
  clear: none;
  width: 100%;
}

#mc_embed_signup input.button {
  float: right;
  clear: none;
}

#mc-embedded-subscribe {
  clear: both;
}

#mc_embed_signup input {
  border: 1px solid #999;
  -webkit-appearance: none;
}

/* -----------------------------------------------------------------------------
   9. SOCIAL MEDIA ICONS (sprite-based)
   ----------------------------------------------------------------------------- */

.slidesocialicons {
  float: left;
  width: 100%;
  margin-left: -20px !important;
  margin-top: -5px;
  height: 50px;
  padding: 10px;
  margin-bottom: 0px !important;
}

.slidesocialicons li {
  clear: both;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url('../images/SocialMediaIcons.png');
  transition: all 0.3s ease;
  margin-right: 1px;
}

.slidesocialicons li:hover {
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.8);
}

.slidesocialicons li.facebook { background-position: 0 0; }
.slidesocialicons li.facebook:hover { background-position: 0 -48px; }
.slidesocialicons li.twitter { background-position: -48px 0; }
.slidesocialicons li.twitter:hover { background-position: -48px -48px; }
.slidesocialicons li.rss { background-position: -96px 0; }
.slidesocialicons li.rss:hover { background-position: -96px -48px; }
.slidesocialicons li.google { background-position: -144px 0; }
.slidesocialicons li.google:hover { background-position: -144px -48px; }
.slidesocialicons li.linkedin { background-position: -192px 0; }
.slidesocialicons li.linkedin:hover { background-position: -192px -48px; }
.slidesocialicons li.pinterest { background-position: -240px 0; }
.slidesocialicons li.pinterest:hover { background-position: -240px -48px; }
.slidesocialicons li.stumbleupon { background-position: -288px 0; }
.slidesocialicons li.stumbleupon:hover { background-position: -288px -48px; }
.slidesocialicons li.reditt { background-position: -336px 0; }
.slidesocialicons li.reditt:hover { background-position: -336px -48px; }
.slidesocialicons li.instagram { background-position: -384px 0; }
.slidesocialicons li.instagram:hover { background-position: -384px -48px; }
.slidesocialicons li.tumblr { background-position: -432px 0; }
.slidesocialicons li.tumblr:hover { background-position: -432px -48px; }

/* -----------------------------------------------------------------------------
   10. FORMS
   ----------------------------------------------------------------------------- */

.form-item {
  padding-bottom: 1px;
  margin-top: 0;
  margin-bottom: 20px !important;
}

.form-actions {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px !important;
}

.form input[type="text"] {
  max-width: 100%;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  border-radius: 15px;
  text-transform: none !important;
}

.form input-md {
  max-width: 100%;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  border-radius: 15px;
  text-transform: none !important;
}

.helpcontainer {
  padding-top: 30px;
}

/* Signup / volunteer form layout.
   No negative margins — inputs stay within the form's content area.
   A 20px gap between First Name / Last Name is created via flex gap + calc widths. */
.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
}

/* All columns: no padding, full width by default (mobile-first stacking) */
.signup-row > [class*="col-"] {
  float: none;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
}

/* On md+ screens: col-md-6 side by side, col-md-12 full width.
   calc(50% - 10px) = half width minus half the 20px gap, so two cols fill 100%. */
@media (min-width: 992px) {
  .signup-row > .col-md-6 {
    width: calc(50% - 10px);
  }
  .signup-row > .col-md-12 {
    width: 100%;
  }
}

.signup-intro {
  padding: 20px;
}

/* Volunteer-form labels — display above input, left-aligned.
   Scoped to the two volunteer webforms (241 intro + 242 questionnaire)
   so it doesn't interfere with other webforms (e.g. the newsletter form
   on the homepage, which relies on Bootstrap defaults and a
   visually-hidden label on its email input). */
.webform-submission-webform-241-form label,
.webform-submission-webform-242-form label {
  display: block;
  text-align: left;
  font-weight: bold;
  margin-bottom: 4px;
}

/* Volunteer-form inputs: full width, 50px height, 15px border-radius.
   Scoped to the two volunteer webforms (241 + 242) so the newsletter
   form (webform_117) on the homepage — which relies on Bootstrap
   defaults — is unaffected.
   !important needed to beat Bootstrap .form-control (34px, 4px radius)
   and base theme .round (2px !important) and .input-md (37px). */
.webform-submission-webform-241-form input.form-control,
.webform-submission-webform-241-form input[type="date"],
.webform-submission-webform-241-form input[type="tel"],
.webform-submission-webform-241-form select.form-control,
.webform-submission-webform-242-form input.form-control,
.webform-submission-webform-242-form input[type="date"],
.webform-submission-webform-242-form input[type="tel"],
.webform-submission-webform-242-form select.form-control {
  width: 100% !important;
  height: 50px !important;
  border-radius: 15px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Flatpickr alt input — style it identically to the other form inputs.
   Flatpickr hides the original <input type="date"> and inserts a sibling
   <input type="text" class="flatpickr-input"> in its place. */
.webform-submission-webform-241-form input.flatpickr-input,
.webform-submission-webform-242-form input.flatpickr-input {
  width: 100% !important;
  height: 50px !important;
  border-radius: 15px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

/* Homepage newsletter form — align the embedded Webform block and match the
   volunteer signup input treatment. */
.pi-text-center:has(> article[data-history-node-id="117"]) {
  max-width: 680px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

article[data-history-node-id="117"] {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.webform-submission-webform-117-form {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: Roboto, arial, sans-serif;
}

.webform-submission-webform-117-form label:not(.visually-hidden) {
  display: block;
  text-align: left;
  font-weight: bold;
  margin-bottom: 4px;
}

.webform-submission-webform-117-form input.form-control,
.webform-submission-webform-117-form input[type="text"],
.webform-submission-webform-117-form input[type="email"] {
  width: 100% !important;
  height: 50px !important;
  border-radius: 15px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  font-size: 14px;
  text-transform: none !important;
}

.webform-submission-webform-117-form .form-actions {
  margin-top: 4px;
}

.webform-submission-webform-117-form .webform-button--submit {
  min-height: 50px;
  border-radius: 15px !important;
  padding-left: 32px;
  padding-right: 32px;
}

/* ─── Contact form (webform_contact_1) ────────────────────────────────
   Two-column layout with volunteer-form input styling.
   Col 1: first+last name row, email, phone
   Col 2: subject, message (textarea stretches to match col 1 height)
   Newsletter checkbox spans full width below both columns. */

/* Inputs match volunteer-form styling: 50px height, 15px radius */
.webform-submission-contact-1-form input.form-control,
.webform-submission-contact-1-form input[type="email"],
.webform-submission-contact-1-form input[type="tel"],
.webform-submission-contact-1-form textarea.form-control {
  width: 100% !important;
  border-radius: 15px !important;
  padding: 12px 20px !important;
  box-sizing: border-box !important;
  font-size: 15px;
}

.webform-submission-contact-1-form input.form-control,
.webform-submission-contact-1-form input[type="email"],
.webform-submission-contact-1-form input[type="tel"] {
  height: 50px !important;
}

/* Message textarea: 115px = email (50px) + gap (15px) + phone (50px).
   That makes the bottom of the message align with the bottom of the
   phone field, so col 1 and col 2 are equal height. */
.webform-submission-contact-1-form textarea.contact-message-textarea,
.webform-submission-contact-1-form textarea.form-control {
  height: 115px !important;
  min-height: 115px !important;
  resize: vertical;
  text-transform: none !important;
}

/* Uniform 15px gap between form-groups inside the contact form.
   Bootstrap defaults to 15px via .form-group { margin-bottom: 15px }
   but Claro can override this; force it so the column-height math
   (phone vs. message) lines up exactly. */
.webform-submission-contact-1-form .form-group {
  margin-bottom: 15px;
}

/* Inner first-name/last-name row: keep Bootstrap's float-based two-column
   grid, but zero out the row's negative horizontal margin and the
   columns' horizontal padding so the outer edges of first/last name
   align exactly with email/phone below.
   A 15px gap is re-introduced by giving just the LEFT column a 15px
   right-padding — this preserves the existing column widths (50% each)
   without using negative margins that would shift content sideways. */
.webform-submission-contact-1-form .contact-form-row > .col-sm-6 > .row {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}
.webform-submission-contact-1-form .contact-form-row > .col-sm-6 > .row > .col-md-6 {
  padding-left: 0;
  padding-right: 0;
}
/* 15px visual gutter between First and Last name, split 7.5px each side
   so the outer edges stay flush with email/phone. Only applies at
   ≥992px where Bootstrap makes .col-md-6 a 50%-wide float; below that
   breakpoint the cols stack full-width, and any horizontal padding
   would push last_name rightward away from the other inputs. */
@media (min-width: 992px) {
  .webform-submission-contact-1-form .contact-form-row > .col-sm-6 > .row > .col-md-6:first-child {
    padding-right: 7.5px;
  }
  .webform-submission-contact-1-form .contact-form-row > .col-sm-6 > .row > .col-md-6:last-child {
    padding-left: 7.5px;
  }
}

/* Brand-color the newsletter checkbox and keep the label inline.
   The global volunteer label rule doesn't match here (this form has
   no webform-submission-webform-*-form class) so we can style freely. */
.webform-submission-contact-1-form .form-item-newsletter-signup {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.webform-submission-contact-1-form .form-item-newsletter-signup label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}
.webform-submission-contact-1-form input[type="checkbox"].form-checkbox {
  accent-color: #ff0099;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}

/* Keep the submit button spaced below the newsletter checkbox. */
.webform-submission-contact-1-form .form-actions {
  margin-top: 15px;
}

/* On narrow viewports the two columns stack; make the textarea
   height auto so it doesn't look stubby when there's no phone/email
   column next to it. */
@media (max-width: 767px) {
  .webform-submission-contact-1-form textarea.form-control {
    height: 150px !important;
  }
}

/* Flatpickr calendar — brand color overrides */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
  background: #ff0099 !important;
  border-color: #ff0099 !important;
}
.flatpickr-calendar .flatpickr-day:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay:hover,
.flatpickr-calendar .flatpickr-day.nextMonthDay:hover {
  background: #ffcce9 !important;
  border-color: #ffcce9 !important;
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: #ff0099 !important;
}
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #ff0099 !important;
}

.birthday .form-item {
  width: 30%;
  display: inline;
  padding-right: 5px;
  vertical-align: middle;
}

.phone {
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

.days_available .form-item,
.community .form-item {
  float: left;
  padding-right: 10px;
  padding-left: 10px;
}

.days_available {
  padding-bottom: 20px;
}

.community {
  padding-bottom: 30px;
}

.days_available label.option,
.community label.option {
  display: inline;
  text-transform: none;
  font-weight: 100;
}

.days_available label,
.community label {
  text-align: center;
}

.interests label,
.personal_interests label,
.communities label {
  font-weight: normal !important;
}

.interests {
  float: left;
  width: 100%;
  padding-right: 5px;
  clear: both;
}

.interest_description {
  float: left;
  width: 255px;
  padding-right: 5px;
  clear: right;
  text-align: center;
}

.interest_description .description,
.interests .description {
  padding: 15px;
  color: gray;
  font-style: italic;
}

.availability {
  width: 100%;
}

.availability label {
  text-align: center;
}

.availability .description,
.vehicle_status .description {
  padding: 5px;
  color: gray;
  font-style: italic;
}

.vehicle_type label,
.operation label,
.vehicle_status label,
.student label {
  display: inline;
  padding-right: 5px;
}

.vehicle_type,
.operation,
.student {
  display: block;
  padding-right: 5px;
}

#student {
  float: left;
  width: 200px;
  display: inline;
  position: relative;
}

/* Webform progress bar */
.webform-progressbar {
  width: 80%;
}

.webform-progressbar label {
  padding-left: 20px;
  font-size: 50px;
}

.webform-progressbar-inner {
  height: 3px;
  background-color: #ff0099 !important;
}

.webform-progressbar-outer {
  position: relative;
  border: 1px solid #333333 !important;
  width: 100%;
  height: 3px;
  margin: 0.35em -1px 2em;
  background-color: white;
}

.webform-progressbar-page.completed,
.webform-progressbar-page.current {
  background-color: #ff0099 !important;
}

/* Webform grid */
.webform-grid .radio,
.webform-grid .checkbox {
  display: table-cell;
  text-align: center;
  width: auto;
  padding-left: 15px;
}

.webform-grid .radio input[type="radio"],
.webform-grid .radio-inline input[type="radio"],
.webform-grid .checkbox input[type="checkbox"],
.webform-grid .checkbox-inline input[type="checkbox"] {
  float: none;
  margin: 0;
}

.webform-grid tr:nth-child(even) {
  background: #CCC;
}

.inline-label-text {
  display: inline;
}

/* -----------------------------------------------------------------------------
   11. RESPONSIVE VISIBILITY HELPERS
   ----------------------------------------------------------------------------- */

/* Hide on tablets and phones (≤992px) */
@media only screen and (max-width: 992px) {
  .tablet-phone-hidden {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Hide on laptop and desktop (>992px) */
@media only screen and (min-width: 993px) {
  .laptop-desktop-hidden {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Feature height on mobile */
@media only screen and (max-width: 992px) {
  .feature-height {
    height: 416px;
  }
}

/* -----------------------------------------------------------------------------
   12. BACKGROUND & SECTION HELPERS
   ----------------------------------------------------------------------------- */

.mobile-top-center .page-section {
  background-position: center top !important;
}

.bg-scroll {
  background-attachment: scroll !important;
}

/* Dark overlay backgrounds */
.bg-dark-alfa-50:before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(34, 34, 34, 0.5);
}

.bg-dark-alfa-90:before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(34, 34, 34, 0.9);
}

/* Dynamic centering */
.dynamic-center {
  margin-left: auto;
  margin-right: auto;
}

/* Scroll down animation */
@keyframes scroll-down-anim {
  0%   { bottom: 12px; }
  50%  { bottom: 20px; }
  100% { bottom: 12px; }
}

.scroll-down {
  width: 40px;
  height: 40px;
  margin-left: -20px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

.scroll-down-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  position: absolute;
  left: 50%;
  bottom: 4px;
  font-size: 32px;
  animation: scroll-down-anim 1s infinite;
  z-index: 2;
}

/* Drupal contextual edit controls.
 *
 * Some migrated body/shortcode layouts use full-width positioned rows,
 * overlays, and hidden teaser links. On admin pages those layers can sit
 * above Drupal's contextual pencil trigger, so the icon is visible but the
 * click lands on the page content instead. Keep contextual controls in the
 * top admin interaction layer without changing public-page rendering.
 */
.contextual-region .contextual {
  z-index: 10050 !important;
  pointer-events: auto !important;
}

.contextual-region .contextual .trigger,
.contextual-region .contextual .contextual-links,
.contextual-region .contextual .contextual-links a {
  position: relative;
  z-index: 10051 !important;
  pointer-events: auto !important;
}

/* Wide heading (video banners) */
.wide-heading {
  display: block;
  margin-bottom: 0;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.93);
}

.big-icon {
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  border: 3px solid rgba(255, 255, 255, 0.93);
  text-align: center;
  line-height: 88px;
  font-size: 32px;
  color: rgba(255, 255, 255, 0.93);
  border-radius: 50%;
}

.big-icon .fa-play {
  position: relative;
  left: 4px;
}

.big-icon-link {
  display: inline-block;
  text-decoration: none;
}

/* -----------------------------------------------------------------------------
   13. SPLIT SECTION (nd_split_section shortcode) — matches D7 stig style.css
   ----------------------------------------------------------------------------- */

/* Outer wrapper — full width, matches D7 .split-section */
.split-section {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Table wrapper */
.ssh-table {
  width: 100% !important;
  display: table !important;
  table-layout: fixed !important;
  min-height: 500px;
}

/* Each cell — override Rhythm theme's float layout */
.ssh-cell {
  display: table-cell !important;
  float: none !important;
  width: 50% !important;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
}

/* Image cell — background fills the full table-cell height */
.split-section-headings.ssh-cell {
  float: none !important;
  width: 50% !important;
  display: table-cell !important;
  padding: 0 !important;
  min-height: 500px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
}

/* Content cell — override Rhythm theme's float and background */
.split-section-content.ssh-cell {
  float: none !important;
  width: 50% !important;
  display: table-cell !important;
  background: #f8f8f8 !important;
  min-height: 500px;
}

/* Inner content wrapper — matches D7 .split-section-wrapper */
.split-section-wrapper {
  padding: 0 80px;
}

/* Label above title — matches D7 normal weight, not spaced uppercase */
.split-section-label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #777;
  margin-bottom: 10px;
  margin-top: 0;
}

/* Main heading — matches D7 bold black */
.split-section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  margin-top: 5px;
  color: #111;
  text-transform: uppercase;
}

/* Section text */
.split-section-content .section-text,
.split-section-wrapper p {
  font-size: 15px !important;
  color: #777;
  line-height: 1.7;
}

/* Icons inside split section — match D7 brand color, but not feature icons */
.split-section-content .icon-wrap .icon,
.split-section-content .nd-icon {
  color: #ff0099 !important;
}
.split-section-content .fa {
  color: #ff0099 !important;
}
/* Feature icons override the split-section .fa rule */
.split-section-content .alt-features-icon span.fa,
.split-section-content .alt-features-icon i.fa,
.split-section-content .features-icon span.fa,
.split-section-content .features-icon i.fa {
  color: #111 !important;
}
.split-section-content .alt-features-icon.color span.fa,
.split-section-content .alt-features-icon.color i.fa,
.split-section-content .features-icon.color span.fa,
.split-section-content .features-icon.color i.fa {
  color: #ff0099 !important;
}
.split-section-content .icon-wrap,
.split-section-content .icon-box {
  border-color: #ff0099 !important;
}

/* Responsive split section */
@media only screen and (max-width: 1199px) {
  .split-section-wrapper {
    padding: 0 50px;
  }
}

/* Below 1080px: stack vertically, image always on top regardless of side= setting.
 * The rhythm parent theme sets `overflow: hidden` on .split-section and on
 * .split-section-content with no media-query reset. In the table layout used
 * above 1080px the cells expand naturally, so nothing gets clipped — but in
 * flex column mode the container relies on its child being able to grow, and
 * any unrelated height/min-height inherited from the table layout (e.g. the
 * 500px min-height baked into the parent theme's base rule) was clipping the
 * trailing button on the second split section between 992px and 1080px.
 * The fix below explicitly:
 *   - flips the layout to flex column with `!important` on every property
 *     so the table-layout values can't bleed through,
 *   - forces height: auto and min-height: 0 on the content cell + wrapper,
 *   - removes `overflow: hidden` on each container so nothing can be clipped.
 */
@media only screen and (max-width: 1080px) {
  .split-section {
    overflow: visible !important;
  }
  .ssh-table {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
  }
  .ssh-cell {
    display: block !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Override the higher-specificity 50% rules on the two named cells */
  .split-section-headings.ssh-cell {
    display: block !important;
    width: 100% !important;
    order: -1 !important; /* always render image first, even when position=right */
    height: 300px !important;
    min-height: 300px !important;
  }
  .split-section-content.ssh-cell {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .split-section-wrapper {
    padding: 40px 25px;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* -----------------------------------------------------------------------------
   14. RESPONSIVE TYPOGRAPHY
   ----------------------------------------------------------------------------- */

@media only screen and (max-width: 1366px) {
  .inner-nav ul li { margin-left: 25px; }
}

@media only screen and (max-width: 1024px) {
  .page-section { padding: 120px 0; background-attachment: scroll; }
  .hs-line-9 { font-size: 71px; }
}

@media only screen and (max-width: 768px) {
  .page-section { padding: 80px 0; }
  .wide-heading { font-size: 32px; letter-spacing: 2px; }
  .big-icon { width: 60px; height: 60px; line-height: 56px; font-size: 24px; margin-bottom: 0; }
}

@media only screen and (max-width: 767px) {
  .hs-line-9 { font-size: 48px; }
  .section-heading { font-size: 28px; }
}

@media only screen and (max-width: 480px) {
  .hs-line-9 { font-size: 42px; }
  .page-section { padding: 60px 0; }
  .section-title,
  .wide-heading { font-size: 18px; }
  .section-heading { font-size: 24px; }
  .section-text { font-size: 15px; line-height: 1.7; }
  .scroll-down { bottom: 10px; height: 34px; line-height: 34px; }
  .scroll-down-icon { width: 22px; margin-left: -11px; }
  .btn-mod.btn-large { padding: 8px 15px; font-size: 13px; }
  #banner-page-title { font-size: 2.5em; }
}

/* -----------------------------------------------------------------------------
   15. DRUPAL ADMIN & MESSAGES
   ----------------------------------------------------------------------------- */

.helpcontainer {
  padding-top: 30px;
}

/* Tab styling */
.tabs--primary {
  margin-bottom: 20px;
}

/* -----------------------------------------------------------------------------
   16. PAGE-SPECIFIC FIXES
   ----------------------------------------------------------------------------- */

/* Remove default page title display (handled by blocks) */
.page-title {
  display: none;
}

/* Node content — remove default Drupal margins */
.node__content {
  margin-top: 0;
}

/* Field output cleanup */
.field__label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  color: #777;
  margin-bottom: 5px;
}

/* RTEcenter helper class from D7 */
.rtecenter {
  text-align: center;
}

/* Block content wrapper — no extra padding */
.block__content {
  margin: 0;
  padding: 0;
}

/* Pi text center (from shortcodes) */
.pi-text-center {
  text-align: center !important;
}

/* Mobile highlights grid */
@media only screen and (max-width: 768px) {
  .mobile-highlights .col-xs-6 {
    margin-bottom: 30px;
  }
}

/* -----------------------------------------------------------------------------
   Make all nikadevs content regions truly full-width edge-to-edge
   ----------------------------------------------------------------------------- */
.nd-region .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nd-region .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.nd-region .col-md-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.nd-region .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* -----------------------------------------------------------------------------
   17. D7 PARITY — override Rhythm theme divergences to match stig D7 appearance
   ----------------------------------------------------------------------------- */

/* --- Alt-features: remove Rhythm's uppercase/Dosis treatment, restore D7 sizes --- */
.alt-features-title {
  font-size: 15px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* .font-alt on feature titles: D7 stig had no .font-alt rule, so these were plain Roboto */
.alt-features-title.font-alt {
  font-family: Roboto, arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Banner header titles must always render in the bebasbeueregular display
 * face with no extra letter-spacing, regardless of whether their
 * [nd_title] shortcode happened to be saved with `styled="1"` (which
 * applies the .font-alt class). The defaulting bug in the visual-shortcode
 * editor used to silently re-introduce styled="1" on every save, so this
 * acts as a safety net: even if some content still ships with both the
 * `font-alt` class and the `#banner-page-title` id (e.g. unsynced editor
 * caches, content imported from elsewhere), the heading still renders
 * identically to its sibling lines. */
#banner-page-title.font-alt,
.font-alt#banner-page-title,
[id="banner-page-title"].font-alt,
.font-alt[id="banner-page-title"] {
  font-family: 'bebasbeueregular' !important;
  letter-spacing: 0 !important;
}

.alt-features-descr {
  font-size: 15px !important;
}

/* --- Small-title: D7 used weight 400, tight letter-spacing --- */
.small-title {
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

/* --- Section-icon: D7 was 48px, Rhythm defaulted to 32px --- */
.section-icon {
  font-size: 48px !important;
}

/* --- Btn-border-c: Rhythm uses #e41919 (red), D7 used #ff0099 (pink) --- */
.btn-mod.btn-border-c {
  color: #ff0099 !important;
  border: 2px solid #ff0099 !important;
  background: transparent !important;
}
.btn-mod.btn-border-c:hover,
.btn-mod.btn-border-c:focus {
  color: #fff !important;
  border-color: transparent !important;
  background: #ff0099 !important;
}

/* --- Footer: D7 had colored links (#ddd), Rhythm has grey (#888) with underline on hover --- */
.footer {
  color: #999;
}
.footer a {
  color: #ddd !important;
  text-decoration: none !important;
}
.footer a:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.footer-copy {
  letter-spacing: 1px !important;
}
.footer-social-links a {
  width: 38px !important;
  height: 38px !important;
  line-height: 39px !important;
  margin: 0 2px !important;
}

/* -----------------------------------------------------------------------------
   WEBFORM PAGE LAYOUT — even left/right margins
   The page uses container-fluid (full browser width). The webform's inner
   columns use col-md-offset-2 which shifts content from the left but nothing
   constrains the right edge. This rule caps the form width and centers it,
   then strips the Bootstrap column offsets so content fills the centered
   box evenly rather than being pushed to the right.
   ----------------------------------------------------------------------------- */
.node--type-webform .node__content .webform-submission-webform-241-form,
.node--type-webform .node__content .webform-submission-webform-242-form {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
}

/* Remove Bootstrap col-md-offset-* left margins inside the volunteer webforms.
   Centering is handled by the max-width/margin:auto rule above; offsets
   only push content asymmetrically to the right. */
.node--type-webform .webform-submission-webform-241-form [class*="col-md-offset"],
.node--type-webform .webform-submission-webform-242-form [class*="col-md-offset"] {
  margin-left: 0 !important;
}

/* ---- Day availability likert grids (page 2) ----
   Each grid appears when a day checkbox is checked.
   webform_likert renders as .webform-likert-table inside
   .webform-likert-table-wrapper.

   The webform module ships webform.element.likert.css which at ≤768px sets
   thead {display:none} and all td {display:block}, collapsing the grid into
   a vertical stack. We override every one of those rules here and use
   overflow-x:auto on the wrapper so users can scroll horizontally instead. */
.webform-likert-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
  margin-bottom: 20px;
}

.webform-likert-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

/* Undo the webform module's mobile-stacking rules and shrink the table
   to fit on small screens without horizontal scrolling. */
@media (max-width: 768px) {
  /* 1. webform.element.likert.css hides the thead — keep it visible */
  .webform-submission-webform-242-form .form-type-webform-likert thead {
    display: table-header-group !important;
  }

  /* 2. webform.element.likert.css sets td {display:block} — restore table-cell */
  .webform-submission-webform-242-form .form-type-webform-likert td {
    display: table-cell !important;
    text-align: center !important;
    border: 1px solid #ddd !important;
    background: transparent !important;
  }

  /* 3. Keep visually-hidden labels hidden (webform un-hides them for
        the stacked layout — not needed in table mode) */
  .webform-submission-webform-242-form .webform-likert-table .webform-likert-label.visually-hidden {
    display: none !important;
  }

  /* 4. Fill available width, but never collapse below 315px.
        375px viewport − 60px form padding = 315px usable, so the table
        fits on virtually all phones without horizontal scrolling.
        Below 315px the wrapper's overflow-x:auto kicks in. */
  .webform-submission-webform-242-form .webform-likert-table {
    width: 100% !important;
    min-width: 315px !important;
  }

  /* 5. Shrink every column to its content width first; the browser then
        distributes any remaining table width proportionally so columns
        stay in proportion at every screen size. Overrides width:40%
        (first col) and width:20% (answer cols) from the webform module. */
  .webform-submission-webform-242-form .webform-likert-table-wrapper .webform-likert-table th,
  .webform-submission-webform-242-form .webform-likert-table-wrapper .webform-likert-table td {
    width: 1px !important;
    white-space: nowrap !important;
  }

  /* 6. 12px font throughout */
  .webform-submission-webform-242-form .webform-likert-table th,
  .webform-submission-webform-242-form .webform-likert-table td {
    font-size: 12px !important;
  }

  /* 7. Tight padding: answer columns get 3px each side,
        label column gets 4px each side — enough to breathe without wasting space */
  .webform-submission-webform-242-form .webform-likert-table th,
  .webform-submission-webform-242-form .webform-likert-table td {
    padding: 6px 3px !important;
  }

  .webform-submission-webform-242-form .webform-likert-table th:first-child,
  .webform-submission-webform-242-form .webform-likert-table td:first-child {
    padding: 6px 4px !important;
  }
}

.webform-likert-table th {
  background: #f7f7f7;
  text-align: center;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid #ddd;
  font-size: 0.9em;
}

/* First header cell is blank (above the row labels) */
.webform-likert-table th:first-child {
  text-align: left;
}

/* Row label cell (time slot) */
.webform-likert-table td:first-child {
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid #ddd;
  white-space: nowrap;
}

/* Radio cells */
.webform-likert-table td {
  text-align: center;
  padding: 8px 14px;
  border: 1px solid #ddd;
}

/* Brand color on radios */
.webform-likert-table input[type="radio"] {
  accent-color: #ff0099;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Zebra stripe */
.webform-likert-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* Required-field labels (volunteer webforms 241 + 242) and
   likert-grid question titles (242 only — 241 has no likert tables). */
.webform-submission-webform-241-form label.js-form-required.form-required,
.webform-submission-webform-242-form label.js-form-required.form-required,
.webform-submission-webform-242-form .webform-likert-table-wrapper ~ label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

/* ── Validation error popup (above Next button) ───────────────────────── */
.webform-validation-popup {
  position: relative;
  background: #fff3f3;
  border: 1.5px solid #e05c5c;
  border-radius: 10px;
  padding: 14px 44px 14px 16px;
  margin-bottom: 14px;
  color: #7a1a1a;
  font-size: 14px;
  line-height: 1.5;
}

.webform-validation-popup ul {
  margin: 0;
  padding: 0 0 0 18px;
}

.webform-validation-popup li {
  margin-bottom: 4px;
}

.webform-validation-popup li:last-child {
  margin-bottom: 0;
}

.webform-validation-popup__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #e05c5c;
  padding: 0;
  font-weight: bold;
}

.webform-validation-popup__close:hover {
  color: #a00;
}

/* ── Address field layout ─────────────────────────────────────────────── */

/* City / State / Zip sit side-by-side */
.address-row-csz {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

/* City gets roughly half, State and Zip share the rest equally */
.address-col-city  { flex: 2 1 160px; }
.address-col-state { flex: 1 1 80px; }
.address-col-zip   { flex: 1 1 90px; }

/* Make sure inputs/selects inside the columns fill their column */
.address-col-city  .form-control,
.address-col-city  input,
.address-col-state .form-control,
.address-col-state select,
.address-col-zip   .form-control,
.address-col-zip   input {
  width: 100% !important;
}

/* On small screens, collapse to full-width stack */
@media (max-width: 480px) {
  .address-col-city,
  .address-col-state,
  .address-col-zip {
    flex: 1 1 100%;
  }
}

/* Food share Google map marker */
.map-canvas img[src*="map-maker.png"] {
  background: #fff;
  border: 3px solid #ff0099 !important;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .24);
  box-sizing: border-box;
  padding: 2px;
}

/* Financial Information page */
.financial-info-page {
  padding: 70px 0;
}

body:has(.financial-info-page) #block-rhythm-sub-page-title {
  display: none;
}

.financial-info-page .financial-intro {
  max-width: 860px;
  margin: 0 auto 34px;
  color: #555;
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
}

.financial-info-page .financial-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 34px;
}

.financial-info-page .financial-stat {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  padding: 24px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .05);
}

.financial-info-page .financial-stat span {
  display: block;
  margin-bottom: 8px;
  color: #777;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.financial-info-page .financial-stat strong {
  display: block;
  color: #111;
  font-family: 'bebasbeueregular', Impact, sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: normal;
  line-height: 1;
}

.financial-info-page .financial-summary--cumulative {
  margin-top: -16px;
}

.financial-info-page .financial-note {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 4px solid #ff0099;
  background: #fff7fc;
  color: #555;
  font-size: 14px;
  line-height: 1.6;
}

.financial-info-page .financial-report-list {
  display: grid;
  gap: 12px;
}

.financial-info-page .financial-report {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background: #fff;
}

.financial-info-page .financial-year {
  color: #ff0099;
  font-family: 'bebasbeueregular', Impact, sans-serif;
  font-size: 34px;
  line-height: 1;
}

.financial-info-page .financial-report-title {
  margin: 0 0 4px;
  color: #222;
  font-size: 16px;
  font-weight: 700;
}

.financial-info-page .financial-report-meta {
  color: #777;
  font-size: 13px;
  line-height: 1.5;
}

.financial-info-page .financial-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.financial-info-page .financial-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid #222;
  border-radius: 999px;
  color: #222;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.financial-info-page .financial-actions a.primary {
  border-color: #ff0099;
  background: #ff0099;
  color: #fff;
}

.financial-info-page .financial-actions a:hover,
.financial-info-page .financial-actions a:focus {
  border-color: #ff0099;
  background: #ff0099;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 767px) {
  .financial-info-page {
    padding: 44px 0;
  }

  .financial-info-page .financial-summary,
  .financial-info-page .financial-report {
    display: block;
  }

  .financial-info-page .financial-stat + .financial-stat {
    margin-top: 14px;
  }

  .financial-info-page .financial-year {
    margin-bottom: 10px;
  }

  .financial-info-page .financial-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
}

/* Forum landing page */
.cs-forum-page,
.cs-forum-page * {
  box-sizing: border-box;
}

.cs-forum-page {
  --cs-forum-pink: #ff0099;
  --cs-forum-text: #121212;
  --cs-forum-muted: rgba(18, 18, 18, 0.72);
  --cs-forum-border: rgba(0, 0, 0, 0.12);
  --cs-forum-card-border: rgba(255, 255, 255, 0.14);
  --cs-forum-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 72px) 16px;
  color: var(--cs-forum-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

body:has(.cs-forum-page) #block-rhythm-sub-page-title {
  display: none;
}

body:has(.cs-forum-page) #block-rhythm-sub-system-main > .content > .action-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1200px;
  margin: clamp(32px, 5vw, 72px) auto -28px;
  padding: 0 16px;
  list-style: none;
}

body:has(.cs-forum-page) #block-rhythm-sub-system-main > .content > .action-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid #ff0099;
  border-radius: 999px;
  background: #ff0099;
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
}

body:has(.cs-forum-page) #block-rhythm-sub-system-main > .content > .action-links a:hover,
body:has(.cs-forum-page) #block-rhythm-sub-system-main > .content > .action-links a:focus {
  filter: brightness(1.08);
  outline: none;
  text-decoration: none;
}

.cs-forum-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cs-forum-border);
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(255, 0, 153, 0.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255, 0, 153, 0.08), transparent 32%),
    #fff;
  box-shadow: var(--cs-forum-shadow);
}

.cs-forum-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
  mask-image: linear-gradient(to bottom, black, transparent 82%);
  pointer-events: none;
}

.cs-forum-content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 48px);
}

.cs-forum-hero {
  max-width: 900px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  text-align: center;
}

.cs-forum-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 0, 153, 0.4);
  border-radius: 999px;
  background: rgba(255, 0, 153, 0.11);
  color: #8a0053;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cs-forum-kicker::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cs-forum-pink);
  box-shadow: 0 0 18px rgba(255, 0, 153, 0.9);
}

#cs-forum-title {
  margin: 0 0 16px;
  color: var(--cs-forum-text);
  font-family: 'bebasbeueregular', Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(54px, 9vw, 112px);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.9;
  text-transform: uppercase;
}

.cs-forum-intro {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cs-forum-muted);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.72;
}

.cs-forum-panel {
  overflow: hidden;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--cs-forum-card-border);
  border-radius: 26px;
  background: rgba(18, 18, 18, 0.94);
  color: #fff;
  backdrop-filter: blur(10px);
}

.cs-forum-panel .action-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.cs-forum-panel .action-links a,
.cs-forum-panel .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--cs-forum-pink);
  border-radius: 999px;
  background: var(--cs-forum-pink);
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.cs-forum-panel .action-links a:hover,
.cs-forum-panel .action-links a:focus,
.cs-forum-panel .button:hover,
.cs-forum-panel .button:focus {
  filter: brightness(1.08);
  outline: none;
  text-decoration: none;
}

.cs-forum-panel table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #fff;
  font-family: inherit;
}

.cs-forum-panel table thead th {
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.cs-forum-panel table tbody tr {
  background: rgba(255, 255, 255, 0.035);
}

.cs-forum-panel table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.065);
}

.cs-forum-panel table tbody tr:hover {
  background: rgba(255, 0, 153, 0.12);
}

.cs-forum-panel table td {
  padding: 18px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.5;
  vertical-align: middle;
}

.cs-forum-panel table td:first-child {
  color: rgba(255, 255, 255, 0.68);
}

.cs-forum-panel table td:not(:first-child) {
  text-align: center;
  white-space: nowrap;
}

.cs-forum-panel table td:last-child {
  text-align: left;
  white-space: normal;
}

.cs-forum-panel table a {
  color: #fff !important;
  font-weight: 900;
  text-decoration: none;
}

.cs-forum-panel table td:first-child a {
  display: inline-block;
  color: #fff !important;
  font-size: 19px;
  line-height: 1.2;
}

.cs-forum-panel table a:hover,
.cs-forum-panel table a:focus {
  color: var(--cs-forum-pink) !important;
  text-decoration: none;
}

.cs-forum-panel .indent {
  margin-left: 20px;
  padding-left: 18px;
  border-left: 3px solid var(--cs-forum-pink);
}

.cs-forum-panel .forum__title {
  display: inline-block;
}

.cs-forum-panel .forum__title a {
  font-size: 19px;
}

.cs-forum-panel .forum__submitted,
.cs-forum-panel .forum__last-reply {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
}

.cs-forum-panel .pager {
  margin: 22px 0 0;
}

.cs-forum-panel .pager__items {
  margin: 0;
}

.cs-forum-panel .pager a {
  color: #fff;
}

@media (max-width: 767px) {
  .cs-forum-page {
    padding-right: 4px;
    padding-left: 4px;
  }

  .cs-forum-shell {
    border-radius: 24px;
  }

  .cs-forum-content {
    padding: 16px;
  }

  .cs-forum-panel {
    overflow: hidden;
    border-radius: 20px;
  }

  .cs-forum-panel table,
  .cs-forum-panel thead,
  .cs-forum-panel tbody,
  .cs-forum-panel tr,
  .cs-forum-panel th,
  .cs-forum-panel td {
    display: block;
  }

  .cs-forum-panel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  .cs-forum-panel table tbody tr {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .cs-forum-panel table tbody tr:first-child {
    border-top: 0;
  }

  .cs-forum-panel table td {
    padding: 5px 12px;
    border-top: 0;
    white-space: normal;
  }

  .cs-forum-panel table td:first-child {
    padding-bottom: 10px;
  }

  .cs-forum-panel table td:not(:first-child),
  .cs-forum-panel table td:last-child {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    text-align: left;
  }

  .cs-forum-panel table td:nth-child(2)::before,
  .cs-forum-panel table td:nth-child(3)::before,
  .cs-forum-panel table td:nth-child(4)::before {
    color: rgba(255, 255, 255, 0.54);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .cs-forum-panel table td:nth-child(2)::before {
    content: "Topics";
  }

  .cs-forum-panel table td:nth-child(3)::before {
    content: "Posts";
  }

  .cs-forum-panel table td:nth-child(4)::before {
    content: "Last post";
  }

  .cs-forum-panel table td:first-child a,
  .cs-forum-panel .forum__title a {
    font-size: 18px;
  }
}

/* Forum topic pages */
.cs-forum-topic-page,
.cs-forum-topic-page * {
  box-sizing: border-box;
}

.cs-forum-topic-page {
  --cs-topic-pink: #ff0099;
  --cs-topic-text: #121212;
  --cs-topic-muted: rgba(18, 18, 18, 0.72);
  --cs-topic-border: rgba(0, 0, 0, 0.12);
  --cs-topic-card-border: rgba(255, 255, 255, 0.14);
  --cs-topic-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 72px) 16px;
  color: var(--cs-topic-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

body:has(.cs-forum-topic-page) #block-rhythm-sub-page-title {
  display: none;
}

.cs-forum-topic-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cs-topic-border);
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(255, 0, 153, 0.12), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255, 0, 153, 0.08), transparent 32%),
    #fff;
  box-shadow: var(--cs-topic-shadow);
}

.cs-forum-topic-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
  mask-image: linear-gradient(to bottom, black, transparent 82%);
  pointer-events: none;
}

.cs-forum-topic-content {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, 48px);
}

.cs-forum-topic-hero {
  max-width: 920px;
  margin: 0 auto clamp(24px, 4vw, 42px);
  text-align: center;
}

.cs-forum-topic-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 0, 153, 0.4);
  border-radius: 999px;
  background: rgba(255, 0, 153, 0.11);
  color: #8a0053;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cs-forum-topic-kicker::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--cs-topic-pink);
  box-shadow: 0 0 18px rgba(255, 0, 153, 0.9);
}

.cs-forum-topic-title {
  margin: 0 0 16px;
  color: var(--cs-topic-text);
  font-family: 'bebasbeueregular', Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(54px, 9vw, 112px);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.9;
  text-transform: uppercase;
}

.cs-forum-topic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  color: var(--cs-topic-muted);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.5;
}

.cs-forum-topic-meta > article:empty {
  display: none;
}

.cs-forum-topic-meta a {
  color: var(--cs-topic-pink);
  font-weight: 800;
}

.cs-forum-topic-panel,
.cs-forum-topic-comments {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--cs-topic-card-border);
  border-radius: 26px;
  background: rgba(18, 18, 18, 0.94);
  color: #fff;
  backdrop-filter: blur(10px);
}

.cs-forum-topic-comments {
  margin-top: clamp(16px, 2.5vw, 24px);
}

.cs-forum-topic-taxonomy {
  margin: 0 0 22px;
}

.cs-forum-topic-taxonomy .field__label {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.cs-forum-topic-taxonomy .field__item a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 0, 153, 0.7);
  border-radius: 999px;
  background: rgba(255, 0, 153, 0.12);
  color: #fff !important;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.cs-forum-topic-body {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.72;
}

.cs-forum-topic-body p:last-child {
  margin-bottom: 0;
}

.cs-forum-topic-comments h3,
.cs-forum-topic-comments h4,
.cs-forum-topic-comments .blog-page-title {
  margin: 0 0 18px;
  color: #fff;
  font-family: 'bebasbeueregular', Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 0.95;
  text-transform: uppercase;
}

.cs-forum-topic-comments .mb-60 {
  margin-bottom: 0 !important;
}

.cs-forum-topic-comments .comment-list {
  margin: 0;
}

.cs-forum-topic-comments .comment-item {
  margin: 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.84);
}

.cs-forum-topic-comments .comment-item:first-child {
  border-top: 0;
}

.cs-forum-topic-comments .comment-item-data {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.cs-forum-topic-comments .comment-author,
.cs-forum-topic-comments .comment-author a {
  color: #fff;
  font-weight: 900;
}

.cs-forum-topic-comments a,
.cs-forum-topic-comments .links a,
.cs-forum-topic-comments .comment-item-data a {
  color: var(--cs-topic-pink) !important;
  font-weight: 800;
  text-decoration: none;
}

.cs-forum-topic-comments a:hover,
.cs-forum-topic-comments a:focus {
  color: #fff !important;
  text-decoration: none;
}

.cs-forum-topic-comments ul.links,
.cs-forum-topic-comments ul.links.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.cs-forum-topic-comments ul.links li {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  list-style: none !important;
}

.cs-forum-topic-comments ul.links li::marker {
  content: "";
}

.cs-forum-topic-comments .links.inline a,
.cs-forum-topic-comments .form-actions .button,
.cs-forum-topic-comments input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--cs-topic-pink);
  border-radius: 999px;
  background: var(--cs-topic-pink);
  color: #fff !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
}

.cs-forum-topic-comments label {
  color: rgba(255, 255, 255, 0.78);
}

.cs-forum-topic-comments input[type="text"],
.cs-forum-topic-comments input[type="email"],
.cs-forum-topic-comments textarea,
.cs-forum-topic-comments select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

@media (max-width: 767px) {
  .cs-forum-topic-page {
    padding-right: 4px;
    padding-left: 4px;
  }

  .cs-forum-topic-shell {
    border-radius: 24px;
  }

  .cs-forum-topic-content {
    padding: 16px;
  }

  .cs-forum-topic-panel,
  .cs-forum-topic-comments {
    border-radius: 20px;
  }
}

/* Contact form destination page. The submitted copy is filled from the
   submitting visitor's current browser session, rather than a public URL. */
.contact-confirmation {
  max-width: 780px;
  margin: 0 auto;
  padding: 42px 20px 58px;
  text-align: center;
}

.contact-confirmation__title {
  margin: 0 0 22px;
  color: #111;
  font-size: clamp(27px, 4vw, 38px);
  font-weight: 500;
  line-height: 1.25;
}

.contact-confirmation__intro,
.contact-confirmation__next {
  color: #444;
  font-size: 18px;
  line-height: 1.7;
}

.contact-confirmation__submitted {
  margin: 32px auto;
  padding: 24px 26px;
  border-left: 4px solid #f09;
  border-radius: 3px;
  background: #f7f7f7;
  text-align: left;
}

.contact-confirmation__submitted h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-confirmation__message {
  margin: 0;
  color: #333;
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.contact-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.contact-confirmation__actions .btn-mod {
  margin: 0;
}

@media (max-width: 600px) {
  .contact-confirmation {
    padding: 34px 12px 45px;
  }

  .contact-confirmation__intro,
  .contact-confirmation__next {
    font-size: 16px;
  }

  .contact-confirmation__actions .btn-mod {
    width: 100%;
  }
}