@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Contrail+One&display=swap');

:root {
  /* Real values for the Figma "slash" tokens referenced via var(--font/family/text, ...).
     Escaped so the custom-property name matches what Figma's codegen emits. */
  --font\/family\/text: 'Oswald', sans-serif;
  --font\/family\/title: 'Contrail One', serif;
  --font\/family\/font\/weight\/regular: 400;
  --font\/family\/font\/weight\/medium: 500;
  --font\/family\/font\/weight\/bold: 700;
  --deep-ink: #0d0d12; /* duplicate of --dark-gray-100, kept as alias until fully removed from designs */
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
  color: var(--dark-gray-100);
  background: var(--white);
}

img {
  max-width: none;
}

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

/* Back-arrow links (landing-page hero "Back to Home Button", and sub-page
   nav "Forward/Back Icon"). An inline <a> wrapping a block-level icon <div>
   is a click-reliability trap in some browsers, so force it to a proper
   flex box with its own stacking context — guarantees it's always the
   click target, not whatever's visually behind/around it. Uses a real
   class (not :has()) so this doesn't depend on newer selector support. */
.yp-back-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  cursor: pointer;
}

/* Placeholder for Figma photo assets that can't be resolved outside the
   Figma desktop app (localhost:3845 URLs). QA note: swap for real exported
   assets before production handoff. */
img[src="PLACEHOLDER_IMG"] {
  background: repeating-linear-gradient(
    45deg,
    #e2e2e6,
    #e2e2e6 10px,
    #eeeeef 10px,
    #eeeeef 20px
  );
  color: transparent;
}

/* Top utility nav hover states: Cart and My Account shift to Red-100 on
   hover. Scoped to [data-name="Global Utility Nav"] so it doesn't affect
   unrelated text links elsewhere on the page. (Social icon hover is handled
   separately below and applies to both the nav and footer.) */
/* Global Utility Nav has a CSS transform (for centering), which creates its
   own stacking context. Without an explicit z-index here, that whole context
   (including the Language Dropdown panel nested inside it, no matter how high
   its own z-index is set) paints BELOW any later-DOM-order content like the
   page hero, since z-index only compares within the same stacking context.
   Bumping this above everything else lets the nested dropdown escape. */
[data-name="Global Utility Nav"] {
  z-index: 10000;
}
[data-name="Global Utility Nav"] [data-name="Utility Nav Text Link"] {
  cursor: pointer;
  transition: color 0.15s ease;
}
[data-name="Global Utility Nav"] [data-name="Utility Nav Text Link"]:hover p {
  color: var(--red-100) !important;
}

/* Footer nav links (Our Mission + Vision, Meet Our Team, Blog, etc.) shift to
   Red-100 on hover, matching the top utility nav. */
[data-name="Footer Section"] {
  cursor: pointer;
  transition: color 0.15s ease;
}
[data-name="Footer Section"]:hover p {
  color: var(--red-100) !important;
}

/* Top nav Donate button: was rendered at the desktop button-text size (24px,
   medium weight) instead of the Button Text Mobile style it should use
   (700 weight, 16px/20px, per --button-text-mobile). */
[data-name="Primary Small Button"] p {
  font-size: 16px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 2.86px;
}
[data-name="Primary Small Button"] {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
[data-name="Primary Small Button"]:hover {
  background-color: var(--red-80) !important;
}

/* "Contact Us" nav link shifts to Red-100 on hover. */
[data-name="Contact Us"] {
  cursor: pointer;
  transition: color 0.15s ease;
}
[data-name="Contact Us"]:hover p {
  color: var(--red-100) !important;
}

/* Main nav dropdowns (Who We Are, News + Resources, Get Involved, Support Us):
   open on hover, label + caret shift to Red-100, caret flips 180deg. The
   dropdown panel is nested INSIDE the trigger element (not a sibling), so
   that hovering into the panel keeps the trigger's :hover state active even
   though the panel is absolutely positioned outside the trigger's own
   27px-tall box. Panel content/icons are placeholders pulled from the Figma
   spec (nav-icon-*.svg in assets/icons) — swap for exact exports if needed. */
[data-name="Main Nav Dropdown"],
[data-name="Nav Dropdown - Get Involved"],
[data-name="Nav Dropdown - News + Resources"],
[data-name="Nav Dropdown - Support Us"] {
  cursor: pointer;
  z-index: 9998;
}
[data-name="Main Nav Dropdown"]:hover > p,
[data-name="Nav Dropdown - Get Involved"]:hover > p,
[data-name="Nav Dropdown - News + Resources"]:hover > p,
[data-name="Nav Dropdown - Support Us"]:hover > p {
  color: var(--red-100) !important;
}
[data-name="close-icon-path"] {
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%207'%3E%3Cpath%20d='M1%201L7.5%206L14%201'%20stroke='black'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%207'%3E%3Cpath%20d='M1%201L7.5%206L14%201'%20stroke='black'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.15s ease, background-color 0.15s ease;
}
[data-name="close-icon-path"] img {
  display: none !important;
}
[data-name="Main Nav Dropdown"]:hover [data-name="close-icon-path"],
[data-name="Nav Dropdown - Get Involved"]:hover [data-name="close-icon-path"],
[data-name="Nav Dropdown - News + Resources"]:hover [data-name="close-icon-path"],
[data-name="Nav Dropdown - Support Us"]:hover [data-name="close-icon-path"] {
  background-color: var(--red-100);
  transform: rotate(180deg);
}
/* Invisible hover bridge: there's a small gap between the trigger's own box
   (27px tall) and the panel (which starts 32px down), and that gap has
   nothing hoverable in it. Fast mouse movement can land a mousemove event
   inside that dead zone and drop :hover before ever reaching the panel,
   causing it to flicker shut. This pseudo-element extends the trigger's
   hoverable area to fully cover the gap (with a little overlap for safety),
   without being visible or affecting layout. */
[data-name="Main Nav Dropdown"]::before,
[data-name="Nav Dropdown - Get Involved"]::before,
[data-name="Nav Dropdown - News + Resources"]::before,
[data-name="Nav Dropdown - Support Us"]::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}
.yp-dropdown-panel {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 9999;
  width: 404px;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 24px;
  background: var(--white, #fff);
  border: 2px solid var(--dark-gray-20, #cfcfd0);
  border-radius: 20px;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25);
  cursor: default;
  pointer-events: auto;
}
[data-name="Main Nav Dropdown"]:hover .yp-dropdown-panel,
[data-name="Nav Dropdown - Get Involved"]:hover .yp-dropdown-panel,
[data-name="Nav Dropdown - News + Resources"]:hover .yp-dropdown-panel,
[data-name="Nav Dropdown - Support Us"]:hover .yp-dropdown-panel {
  display: flex;
}
.yp-dropdown-option {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
  cursor: pointer;
}
.yp-dropdown-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.yp-dropdown-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 300px;
}
.yp-dropdown-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: normal;
  color: var(--dark-gray-100);
  text-transform: uppercase;
  margin: 0;
  transition: color 0.15s ease;
}
.yp-dropdown-desc {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-gray-100);
  margin: 0;
}
.yp-dropdown-option:hover .yp-dropdown-title {
  color: var(--red-100);
}
/* Dropdown option title (e.g. "Our Mission + Vision") per the Nav Dropdown H1
   component spec: on hover the text turns Red-100 and a small arrow appears
   after it. Built with ::after instead of an image so no extra markup is
   needed across the already-injected panel HTML. */
.yp-dropdown-title::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-left: 8px;
  vertical-align: middle;
  background-image: url('../assets/icons/nav-dropdown-arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.yp-dropdown-option:hover .yp-dropdown-title::after {
  opacity: 1;
  transform: translateX(0);
}
/* External links (opens a new tab) get a persistent "new tab" icon instead of
   the arrow-on-hover treatment, per the Nav Dropdown H1 "Default New Tab" /
   "New Tab Hover" variants. Add class="yp-dropdown-option yp-external" (and
   target="_blank") to any option linking off-site. Currently only "Forged By
   Future™" uses this. Default = New_Tab.svg (Dark-Gray-100), Hover =
   "New Tab Icon.svg" (Red-100) — real exports, always visible (not
   hover-revealed like the internal arrow). */
.yp-dropdown-option.yp-external .yp-dropdown-title::after {
  content: '';
  width: 15px;
  height: 15px;
  background-image: url('../assets/icons/New_Tab.svg');
  opacity: 0;
  transform: translateX(-4px);
}
.yp-dropdown-option.yp-external:hover .yp-dropdown-title::after {
  background-image: url('../assets/icons/New Tab Icon.svg');
  opacity: 1;
  transform: translateX(0);
}

/* Utility nav Language Dropdown ("ENGLISH"): opens on hover like the main nav
   dropdowns, caret flips 180deg, and each language row highlights
   individually on hover (Blue-20 background), per the Figma component
   variants. Panel is nested inside the <button> itself so hovering into the
   list keeps the button's :hover state active. */
/* The raw Figma export gives the OUTER "Language Dropdown" wrapper a fixed
   h-[328px] (sized for the fully-expanded/open state) plus position:absolute.
   That means it was ALWAYS a 328px-tall invisible click target, open or
   closed, extending far past the utility nav into whatever sits below it
   (the hero, its back-arrow, breadcrumb, etc.) and silently swallowing
   clicks there. The panel itself is already absolutely positioned and
   doesn't need the wrapper to be tall for it to display correctly when
   open, so force the wrapper to size to its actual (closed) content. */
[data-name="Language Dropdown"] {
  height: auto !important;
}
[data-name="Language Dropdown"] button {
  position: relative;
}
[data-name="Language Dropdown"] button::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}
[data-name="lang-caret"] {
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%207'%3E%3Cpath%20d='M1%201L7.5%206L14%201'%20stroke='black'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%207'%3E%3Cpath%20d='M1%201L7.5%206L14%201'%20stroke='black'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.15s ease;
}
[data-name="lang-caret"] img {
  display: none !important;
}
[data-name="Language Dropdown"] button:hover [data-name="lang-caret"] {
  transform: rotate(180deg);
}
.yp-lang-panel {
  display: none;
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: var(--blue-100, #00cce3);
  border: 2px solid var(--dark-gray-100, #0d0d12);
  border-radius: 18px;
  overflow: hidden;
  cursor: default;
}
[data-name="Language Dropdown"] button:hover .yp-lang-panel {
  display: flex;
}
.yp-lang-option {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
}
.yp-lang-option p {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: var(--dark-gray-100);
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}
.yp-lang-option:hover {
  background: var(--blue-20, #ccf5f9);
}
.yp-lang-option.yp-lang-first:hover {
  border-radius: 16px 16px 0 0;
}
.yp-lang-option.yp-lang-last:hover {
  border-radius: 0 0 16px 16px;
}
/* Mobile's language dropdown (button + options panel) uses White instead of
   the desktop Blue-100 fill -- the button itself is already White via an
   inline Tailwind class in the markup; this scopes the options panel to
   match without touching the desktop instance, which stays Blue-100. */
[data-name="Mobile Nav"] .yp-lang-panel {
  background: var(--white, white);
}
/* Real monochrome SVGs (exported by the user), inlined as data URIs directly
   in the mask-image so there is no external-file load involved at all (some
   browsers/hosts block mask-image url() references to external SVG files,
   e.g. over file:// or certain CDN configs, which was making these icons
   invisible even though the CSS itself was loading fine). Dark-Gray-100
   default, Red-100 on hover. Applied globally so it covers both the top nav
   and the identical "Social Media Icons" block in the footer under
   "Connect with us". The Figma-exported markup nests broken empty-SVG
   placeholder fragments (Fill 1 / Fill 4 / Fill 6 / <img>) inside each logo
   container -- those are hidden and the mask is applied to the outer
   container instead, so this works regardless of how many sub-fills a given
   logo was decomposed into. */
[data-name="Social Media Icons"] > div {
  cursor: pointer;
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.15s ease;
}
[data-name="Social Media Icons"] > div > * {
  display: none !important;
}
[data-name="Facebook Logo"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%2010.0589C20%204.50354%2015.5229%200%2010%200C4.47715%200%200%204.50354%200%2010.0589C0%2015.0796%203.65686%2019.2411%208.4375%2019.9956V12.9666H5.89844V10.0589H8.4375V7.84283C8.4375%205.32181%209.93043%203.92927%2012.2146%203.92927C13.3088%203.92927%2014.4531%204.12574%2014.4531%204.12574V6.60118H13.1921C11.9499%206.60118%2011.5625%207.37656%2011.5625%208.17204V10.0589H14.3359L13.8926%2012.9666H11.5625V19.9956C16.3431%2019.2411%2020%2015.0796%2020%2010.0589Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20%2010.0589C20%204.50354%2015.5229%200%2010%200C4.47715%200%200%204.50354%200%2010.0589C0%2015.0796%203.65686%2019.2411%208.4375%2019.9956V12.9666H5.89844V10.0589H8.4375V7.84283C8.4375%205.32181%209.93043%203.92927%2012.2146%203.92927C13.3088%203.92927%2014.4531%204.12574%2014.4531%204.12574V6.60118H13.1921C11.9499%206.60118%2011.5625%207.37656%2011.5625%208.17204V10.0589H14.3359L13.8926%2012.9666H11.5625V19.9956C16.3431%2019.2411%2020%2015.0796%2020%2010.0589Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
[data-name="Twitter Logo"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2220%22%20viewBox%3D%220%200%2025%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M17.1748%200C18.6382%203.57296e-05%2019.961%200.613565%2020.8896%201.59473C22.0488%201.36833%2023.1376%200.948352%2024.1211%200.370117C23.7406%201.54883%2022.9334%202.53818%2021.8828%203.16309C22.912%203.04094%2023.8939%202.76991%2024.8057%202.36816C24.1242%203.38043%2023.2601%204.26993%2022.2666%204.98242C22.2766%205.19873%2022.2812%205.4163%2022.2812%205.63477C22.2812%2012.3061%2017.1625%2019.9998%207.80176%2020C4.92721%2020%202.25244%2019.1644%200%2017.7324C0.398297%2017.7791%200.803271%2017.8017%201.21387%2017.8018C3.5983%2017.8018%205.79289%2016.9949%207.53516%2015.6406C5.30729%2015.5995%203.4281%2014.1397%202.78027%2012.1338C3.09013%2012.1927%203.40939%2012.2256%203.7373%2012.2256C4.20167%2012.2256%204.65165%2012.1632%205.0791%2012.0479C2.75053%2011.5849%200.996094%209.5432%200.996094%207.09766C0.996094%207.07553%200.99598%207.05425%200.99707%207.0332C1.68292%207.41174%202.4671%207.6395%203.30176%207.66504C1.93566%206.7604%201.03711%205.2135%201.03711%203.46191C1.03719%202.53742%201.28919%201.67061%201.72656%200.924805C4.23632%203.97974%207.98722%205.98925%2012.2168%206.2002C12.1295%205.83055%2012.085%205.44504%2012.085%205.04883C12.085%202.26142%2014.364%200%2017.1748%200Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2220%22%20viewBox%3D%220%200%2025%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M17.1748%200C18.6382%203.57296e-05%2019.961%200.613565%2020.8896%201.59473C22.0488%201.36833%2023.1376%200.948352%2024.1211%200.370117C23.7406%201.54883%2022.9334%202.53818%2021.8828%203.16309C22.912%203.04094%2023.8939%202.76991%2024.8057%202.36816C24.1242%203.38043%2023.2601%204.26993%2022.2666%204.98242C22.2766%205.19873%2022.2812%205.4163%2022.2812%205.63477C22.2812%2012.3061%2017.1625%2019.9998%207.80176%2020C4.92721%2020%202.25244%2019.1644%200%2017.7324C0.398297%2017.7791%200.803271%2017.8017%201.21387%2017.8018C3.5983%2017.8018%205.79289%2016.9949%207.53516%2015.6406C5.30729%2015.5995%203.4281%2014.1397%202.78027%2012.1338C3.09013%2012.1927%203.40939%2012.2256%203.7373%2012.2256C4.20167%2012.2256%204.65165%2012.1632%205.0791%2012.0479C2.75053%2011.5849%200.996094%209.5432%200.996094%207.09766C0.996094%207.07553%200.99598%207.05425%200.99707%207.0332C1.68292%207.41174%202.4671%207.6395%203.30176%207.66504C1.93566%206.7604%201.03711%205.2135%201.03711%203.46191C1.03719%202.53742%201.28919%201.67061%201.72656%200.924805C4.23632%203.97974%207.98722%205.98925%2012.2168%206.2002C12.1295%205.83055%2012.085%205.44504%2012.085%205.04883C12.085%202.26142%2014.364%200%2017.1748%200Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
[data-name="Instagram Logo"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0198%200C7.29862%200%206.95736%200.0115116%205.88867%200.0601777C4.82214%200.108725%204.0938%200.277786%203.45643%200.525007C2.79757%200.780524%202.23875%201.12246%201.68172%201.67839C1.12464%202.23436%200.782073%202.79203%200.526009%203.44958C0.278297%204.08569%200.108941%204.81259%200.0602573%205.87701C0.0114946%206.94362%200%207.28413%200%209.99998C0%2012.7158%200.0114946%2013.0564%200.0602573%2014.123C0.108941%2015.1874%200.278297%2015.9143%200.526009%2016.5504C0.782073%2017.2079%201.12464%2017.7656%201.68172%2018.3216C2.23875%2018.8775%202.79757%2019.2194%203.45643%2019.475C4.0938%2019.7222%204.82214%2019.8913%205.88867%2019.9399C6.95736%2019.9885%207.29862%2020%2010.0198%2020C12.7411%2020%2013.0822%2019.9885%2014.151%2019.9399C15.2175%2019.8913%2015.9458%2019.7222%2016.5832%2019.475C17.2421%2019.2194%2017.8009%2018.8775%2018.3579%2018.3216C18.915%2017.7656%2019.2576%2017.208%2019.5136%2016.5504C19.7613%2015.9143%2019.9307%2015.1874%2019.9794%2014.123C20.0282%2013.0564%2020.0397%2012.7158%2020.0397%209.99998C20.0397%207.28416%2020.0282%206.94362%2019.9794%205.87701C19.9307%204.81259%2019.7613%204.08569%2019.5136%203.44958C19.2576%202.79203%2018.915%202.23436%2018.3579%201.67839C17.8009%201.12246%2017.2421%200.780524%2016.5832%200.525007C15.9458%200.277786%2015.2175%200.108725%2014.151%200.0601777C13.0822%200.0115116%2012.7411%200%2010.0198%200ZM10.0198%201.80179C12.6952%201.80179%2013.0121%201.81196%2014.0687%201.86007C15.0456%201.90456%2015.5761%202.06747%2015.9292%202.20442C16.3969%202.38583%2016.7307%202.60252%2017.0813%202.95244C17.4319%203.30239%2017.6491%203.63551%2017.8309%204.10228C17.968%204.45466%2018.1313%204.98415%2018.1759%205.95914C18.224%207.0136%2018.2342%207.32989%2018.2342%209.99998C18.2342%2012.6701%2018.224%2012.9864%2018.1759%2014.0408C18.1313%2015.0158%2017.968%2015.5453%2017.8309%2015.8977C17.6491%2016.3644%2017.4319%2016.6976%2017.0813%2017.0475C16.7307%2017.3975%2016.3969%2017.6142%2015.9292%2017.7956C15.5761%2017.9325%2015.0456%2018.0954%2014.0687%2018.1399C13.0123%2018.188%2012.6954%2018.1982%2010.0198%2018.1982C7.34418%2018.1982%207.02734%2018.188%205.97094%2018.1399C4.99402%2018.0954%204.46344%2017.9325%204.11036%2017.7956C3.6427%2017.6142%203.30888%2017.3975%202.95828%2017.0475C2.60767%2016.6976%202.39051%2016.3644%202.20874%2015.8977C2.07156%2015.5453%201.90833%2015.0158%201.86374%2014.0409C1.81553%2012.9864%201.80535%2012.6701%201.80535%209.99998C1.80535%207.32989%201.81553%207.0136%201.86374%205.95914C1.90833%204.98415%202.07156%204.45466%202.20874%204.10228C2.39051%203.63551%202.60767%203.30239%202.95828%202.95247C3.30888%202.60252%203.6427%202.38583%204.11036%202.20442C4.46344%202.06747%204.99402%201.90456%205.97091%201.86007C7.0275%201.81196%207.34438%201.80179%2010.0198%201.80179Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0197%2013.3333C8.17511%2013.3333%206.67974%2011.8409%206.67974%209.99998C6.67974%208.15904%208.17511%206.66666%2010.0197%206.66666C11.8643%206.66666%2013.3597%208.15904%2013.3597%209.99998C13.3597%2011.8409%2011.8643%2013.3333%2010.0197%2013.3333ZM10.0198%204.86486C7.1781%204.86486%204.87444%207.16392%204.87444%209.99998C4.87444%2012.8361%207.1781%2015.1351%2010.0198%2015.1351C12.8615%2015.1351%2015.1651%2012.8361%2015.1651%209.99998C15.1651%207.16392%2012.8615%204.86486%2010.0198%204.86486Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.5708%204.66198C16.5708%205.32472%2016.0325%205.86196%2015.3684%205.86196C14.7044%205.86196%2014.166%205.32472%2014.166%204.66198C14.166%203.99923%2014.7044%203.46199%2015.3684%203.46199C16.0325%203.46199%2016.5708%203.99923%2016.5708%204.66198Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0198%200C7.29862%200%206.95736%200.0115116%205.88867%200.0601777C4.82214%200.108725%204.0938%200.277786%203.45643%200.525007C2.79757%200.780524%202.23875%201.12246%201.68172%201.67839C1.12464%202.23436%200.782073%202.79203%200.526009%203.44958C0.278297%204.08569%200.108941%204.81259%200.0602573%205.87701C0.0114946%206.94362%200%207.28413%200%209.99998C0%2012.7158%200.0114946%2013.0564%200.0602573%2014.123C0.108941%2015.1874%200.278297%2015.9143%200.526009%2016.5504C0.782073%2017.2079%201.12464%2017.7656%201.68172%2018.3216C2.23875%2018.8775%202.79757%2019.2194%203.45643%2019.475C4.0938%2019.7222%204.82214%2019.8913%205.88867%2019.9399C6.95736%2019.9885%207.29862%2020%2010.0198%2020C12.7411%2020%2013.0822%2019.9885%2014.151%2019.9399C15.2175%2019.8913%2015.9458%2019.7222%2016.5832%2019.475C17.2421%2019.2194%2017.8009%2018.8775%2018.3579%2018.3216C18.915%2017.7656%2019.2576%2017.208%2019.5136%2016.5504C19.7613%2015.9143%2019.9307%2015.1874%2019.9794%2014.123C20.0282%2013.0564%2020.0397%2012.7158%2020.0397%209.99998C20.0397%207.28416%2020.0282%206.94362%2019.9794%205.87701C19.9307%204.81259%2019.7613%204.08569%2019.5136%203.44958C19.2576%202.79203%2018.915%202.23436%2018.3579%201.67839C17.8009%201.12246%2017.2421%200.780524%2016.5832%200.525007C15.9458%200.277786%2015.2175%200.108725%2014.151%200.0601777C13.0822%200.0115116%2012.7411%200%2010.0198%200ZM10.0198%201.80179C12.6952%201.80179%2013.0121%201.81196%2014.0687%201.86007C15.0456%201.90456%2015.5761%202.06747%2015.9292%202.20442C16.3969%202.38583%2016.7307%202.60252%2017.0813%202.95244C17.4319%203.30239%2017.6491%203.63551%2017.8309%204.10228C17.968%204.45466%2018.1313%204.98415%2018.1759%205.95914C18.224%207.0136%2018.2342%207.32989%2018.2342%209.99998C18.2342%2012.6701%2018.224%2012.9864%2018.1759%2014.0408C18.1313%2015.0158%2017.968%2015.5453%2017.8309%2015.8977C17.6491%2016.3644%2017.4319%2016.6976%2017.0813%2017.0475C16.7307%2017.3975%2016.3969%2017.6142%2015.9292%2017.7956C15.5761%2017.9325%2015.0456%2018.0954%2014.0687%2018.1399C13.0123%2018.188%2012.6954%2018.1982%2010.0198%2018.1982C7.34418%2018.1982%207.02734%2018.188%205.97094%2018.1399C4.99402%2018.0954%204.46344%2017.9325%204.11036%2017.7956C3.6427%2017.6142%203.30888%2017.3975%202.95828%2017.0475C2.60767%2016.6976%202.39051%2016.3644%202.20874%2015.8977C2.07156%2015.5453%201.90833%2015.0158%201.86374%2014.0409C1.81553%2012.9864%201.80535%2012.6701%201.80535%209.99998C1.80535%207.32989%201.81553%207.0136%201.86374%205.95914C1.90833%204.98415%202.07156%204.45466%202.20874%204.10228C2.39051%203.63551%202.60767%203.30239%202.95828%202.95247C3.30888%202.60252%203.6427%202.38583%204.11036%202.20442C4.46344%202.06747%204.99402%201.90456%205.97091%201.86007C7.0275%201.81196%207.34438%201.80179%2010.0198%201.80179Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0197%2013.3333C8.17511%2013.3333%206.67974%2011.8409%206.67974%209.99998C6.67974%208.15904%208.17511%206.66666%2010.0197%206.66666C11.8643%206.66666%2013.3597%208.15904%2013.3597%209.99998C13.3597%2011.8409%2011.8643%2013.3333%2010.0197%2013.3333ZM10.0198%204.86486C7.1781%204.86486%204.87444%207.16392%204.87444%209.99998C4.87444%2012.8361%207.1781%2015.1351%2010.0198%2015.1351C12.8615%2015.1351%2015.1651%2012.8361%2015.1651%209.99998C15.1651%207.16392%2012.8615%204.86486%2010.0198%204.86486Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16.5708%204.66198C16.5708%205.32472%2016.0325%205.86196%2015.3684%205.86196C14.7044%205.86196%2014.166%205.32472%2014.166%204.66198C14.166%203.99923%2014.7044%203.46199%2015.3684%203.46199C16.0325%203.46199%2016.5708%203.99923%2016.5708%204.66198Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
[data-name="LinkedIn Logo"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1.55252%200C0.695062%200%200%200.695062%200%201.55252V18.4475C0%2019.3049%200.695062%2020%201.55252%2020H18.4475C19.3049%2020%2020%2019.3049%2020%2018.4475V1.55252C20%200.695062%2019.3049%200%2018.4475%200H1.55252ZM2.76158%204.54406C2.76158%203.5725%203.54281%202.78491%204.50661%202.78491C5.4701%202.78491%206.25148%203.5725%206.25148%204.54406C6.25148%205.51547%205.47026%206.30322%204.50661%206.30322C3.54281%206.30322%202.76158%205.51547%202.76158%204.54406ZM13.5863%207.26097C15.608%207.26097%2017.0551%208.49538%2017.0551%2011.0488L17.0549%2017.0856H14.1183V12.0811C14.1183%2010.7085%2013.597%209.94232%2012.5116%209.94232C11.3305%209.94232%2010.7133%2010.7403%2010.7133%2012.0811V17.0856H7.88295V7.55176H10.7133V8.83584C10.7133%208.83584%2011.5646%207.26097%2013.5863%207.26097ZM3.04513%2017.0856H5.99616V7.55176H3.04513V17.0856Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1.55252%200C0.695062%200%200%200.695062%200%201.55252V18.4475C0%2019.3049%200.695062%2020%201.55252%2020H18.4475C19.3049%2020%2020%2019.3049%2020%2018.4475V1.55252C20%200.695062%2019.3049%200%2018.4475%200H1.55252ZM2.76158%204.54406C2.76158%203.5725%203.54281%202.78491%204.50661%202.78491C5.4701%202.78491%206.25148%203.5725%206.25148%204.54406C6.25148%205.51547%205.47026%206.30322%204.50661%206.30322C3.54281%206.30322%202.76158%205.51547%202.76158%204.54406ZM13.5863%207.26097C15.608%207.26097%2017.0551%208.49538%2017.0551%2011.0488L17.0549%2017.0856H14.1183V12.0811C14.1183%2010.7085%2013.597%209.94232%2012.5116%209.94232C11.3305%209.94232%2010.7133%2010.7403%2010.7133%2012.0811V17.0856H7.88295V7.55176H10.7133V8.83584C10.7133%208.83584%2011.5646%207.26097%2013.5863%207.26097ZM3.04513%2017.0856H5.99616V7.55176H3.04513V17.0856Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
[data-name="YouTube Logo"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2220%22%20viewBox%3D%220%200%2028%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M27.4105%203.13021C27.0926%201.89583%2026.1391%200.927083%2024.9345%200.598958C22.7558%200%2014%200%2014%200C14%200%205.24423%200%203.06042%200.598958C1.85573%200.927083%200.90736%201.89583%200.584401%203.13021C9.77769e-08%205.36458%200%2010.0208%200%2010.0208C0%2010.0208%209.77769e-08%2014.6771%200.584401%2016.9115C0.90736%2018.1406%201.85573%2019.0729%203.06042%2019.401C5.24423%2020%2014%2020%2014%2020C14%2020%2022.7558%2020%2024.9396%2019.401C26.1443%2019.0729%2027.0926%2018.1406%2027.4156%2016.9115C28%2014.6771%2028%2010.0208%2028%2010.0208C28%2010.0208%2028%205.36458%2027.4156%203.13021H27.4105ZM11.1344%2014.25V5.79167L18.4497%2010.0208L11.1344%2014.25Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2220%22%20viewBox%3D%220%200%2028%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M27.4105%203.13021C27.0926%201.89583%2026.1391%200.927083%2024.9345%200.598958C22.7558%200%2014%200%2014%200C14%200%205.24423%200%203.06042%200.598958C1.85573%200.927083%200.90736%201.89583%200.584401%203.13021C9.77769e-08%205.36458%200%2010.0208%200%2010.0208C0%2010.0208%209.77769e-08%2014.6771%200.584401%2016.9115C0.90736%2018.1406%201.85573%2019.0729%203.06042%2019.401C5.24423%2020%2014%2020%2014%2020C14%2020%2022.7558%2020%2024.9396%2019.401C26.1443%2019.0729%2027.0926%2018.1406%2027.4156%2016.9115C28%2014.6771%2028%2010.0208%2028%2010.0208C28%2010.0208%2028%205.36458%2027.4156%203.13021H27.4105ZM11.1344%2014.25V5.79167L18.4497%2010.0208L11.1344%2014.25Z%22%20fill%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
[data-name="Social Media Icons"] > div:hover {
  background-color: var(--red-100);
}

/* Responsive breakpoint toggle: each page ships both the desktop-frame markup
   and the mobile-frame markup from Figma; only one is shown at a time. The
   mobile frame is a fixed 430px-minimum design, not a fluid layout, so on
   any viewport between 430px and the 1023px breakpoint it's centered rather
   than left-aligned — otherwise the leftover width just sits as empty space
   on the right. */
.only-desktop { display: block; }
.only-mobile { display: none; }

@media (max-width: 1023px) {
  .only-desktop { display: none; }
  .only-mobile { display: flex; justify-content: center; }
}

/* ===================================================================
   Mobile hamburger drawer: tap the hamburger to open the main menu,
   tap a category (Who We Are, etc.) to slide into that category's
   sub-list, tap back to return, tap X (or the toggle again) to close.
   Mobile has no hover, so this is driven by real click JS (js/mobile-nav.js)
   toggling classes/attributes rather than :hover like the desktop nav.
   =================================================================== */
[data-name="Mobile Nav"] {
  position: relative;
}
/* When a category's sub-list is open, the top of the drawer swaps from
   logo/Donate/toggle to back-arrow/section-title/close (Figma node-id
   1111:28199) — a single shared top bar, not a header repeated inside each
   sub-list. Both rows sit in the same normal-flow slot, so only one is
   ever visible at a time. */
[data-name="Mobile Nav"].yp-mobile-subview-open [data-name="nav-bar"] {
  display: none;
}
.yp-mobile-subview-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 102px;
}
[data-name="Mobile Nav"].yp-mobile-subview-open .yp-mobile-subview-topbar {
  display: flex;
}
.yp-mobile-subview-topbar-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.yp-mobile-subview-topbar-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--dark-gray-100);
  text-transform: uppercase;
  margin: 0;
}
/* The nav bar (logo, Donate, toggle) never moves — only the toggle icon
   swaps between hamburger and X. The panel itself becomes a fixed overlay
   anchored right below the nav bar's bottom edge (measured in JS, since that
   height can vary) rather than pushing page content down or moving the nav
   bar. It's fixed to the viewport (not the 430px "Mobile Nav" box) so it can
   cover full width/height, but sized/centered to match the 430px design. */
.yp-mobile-panel {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 430px;
  max-width: 100vw;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  background: var(--white, #fff);
}
/* Locks background scroll while the drawer overlay is open. */
body.yp-mobile-nav-lock {
  overflow: hidden;
}

/* Hamburger / close (X) toggle button, using the real exported SVGs
   (Hamburger-default.svg / hamburger-close.svg) via mask-image so the color
   stays controllable. Both icons occupy the same spot; only one is visible
   at a time depending on whether the drawer is open. */
.yp-mobile-toggle {
  position: relative;
  width: 42px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.yp-hamburger-line {
  display: none;
}
.yp-hamburger-line:first-child {
  display: block;
  position: absolute;
  inset: 0;
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 42px 21px;
  mask-size: 42px 21px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2221%22%20viewBox%3D%220%200%2042%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2241.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%28-1%200%200%201%2042%2011%29%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2241.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%28-1%200%200%201%2042%2021%29%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2241.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%28-1%200%200%201%2042%201%29%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2221%22%20viewBox%3D%220%200%2042%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2241.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%28-1%200%200%201%2042%2011%29%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2241.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%28-1%200%200%201%2042%2021%29%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2241.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%28-1%200%200%201%2042%201%29%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3C/svg%3E");
}
.yp-close-x {
  display: none;
}
[data-name="Mobile Nav"].yp-mobile-open .yp-hamburger-line {
  display: none;
}
[data-name="Mobile Nav"].yp-mobile-open .yp-mobile-toggle {
  /* Keep the button's own width fixed at 42px (same as closed) so the
     nav-actions row never changes width — otherwise, since it's flush to
     the nav-bar's right edge (justify-between), shrinking it shifts the
     whole row (and the Donate button with it) a couple pixels right. The
     close icon below is absolutely centered inside this button regardless
     of its width, so this has no visual effect on the icon itself. */
  height: 40px;
}
[data-name="Mobile Nav"].yp-mobile-open .yp-mobile-toggle .yp-close-x {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 38px;
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2240%22%20viewBox%3D%220%200%2042%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%200.707107%200.707107%20-0.707107%2010%208%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%20-0.707107%20-0.707107%20-0.707107%2010%2031%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%2219.5%22%20stroke%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2240%22%20viewBox%3D%220%200%2042%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%200.707107%200.707107%20-0.707107%2010%208%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%20-0.707107%20-0.707107%20-0.707107%2010%2031%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%2219.5%22%20stroke%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
/* Standalone close (X) button used inside each sub-view header — always
   visible (not gated on .yp-mobile-open, since it lives inside an
   already-open panel). Same real hamburger-close.svg icon as the main
   toggle. The icon now bakes in its own circular border, so the button
   itself no longer draws one. */
.yp-close-x-static {
  display: block;
  width: 40px;
  height: 38px;
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2240%22%20viewBox%3D%220%200%2042%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%200.707107%200.707107%20-0.707107%2010%208%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%20-0.707107%20-0.707107%20-0.707107%2010%2031%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%2219.5%22%20stroke%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2240%22%20viewBox%3D%220%200%2042%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%200.707107%200.707107%20-0.707107%2010%208%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Cline%20x1%3D%220.5%22%20y1%3D%22-0.5%22%20x2%3D%2231.5%22%20y2%3D%22-0.5%22%20transform%3D%22matrix%280.707107%20-0.707107%20-0.707107%20-0.707107%2010%2031%29%22%20stroke%3D%22%230D0D12%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%0A%3Ccircle%20cx%3D%2221%22%20cy%3D%2220%22%20r%3D%2219.5%22%20stroke%3D%22%230D0D12%22/%3E%0A%3C/svg%3E");
}
.yp-mobile-close-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chevron used for category rows, sub-links, and the back button — same
   down-pointing arrowhead as the desktop nav caret, rotated per direction. */
.yp-mobile-chevron {
  display: inline-block;
  width: 15px;
  height: 7px;
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%207'%3E%3Cpath%20d='M1%201L7.5%206L14%201'%20stroke='black'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2015%207'%3E%3Cpath%20d='M1%201L7.5%206L14%201'%20stroke='black'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  flex-shrink: 0;
}
.yp-mobile-chevron-right { transform: rotate(-90deg); }
.yp-mobile-chevron-left { transform: rotate(90deg); }
/* Real exported Back Icon.svg — bakes in its own circular border and arrow,
   so the button no longer draws a border and the old chevron span inside it
   is hidden (see .yp-mobile-back .yp-mobile-chevron below). */
.yp-mobile-back {
  background: none;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background-color: var(--dark-gray-100);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2219.5%22%20stroke%3D%22%230D0D12%22/%3E%0A%3Cpath%20d%3D%22M24.3137%2031.6274L13%2020.3137L24.3137%209%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2219.5%22%20stroke%3D%22%230D0D12%22/%3E%0A%3Cpath%20d%3D%22M24.3137%2031.6274L13%2020.3137L24.3137%209%22%20stroke%3D%22%230D0D12%22%20stroke-linecap%3D%22round%22/%3E%0A%3C/svg%3E%0A");
}
.yp-mobile-back .yp-mobile-chevron {
  display: none;
}

/* Panel + views (base positioning/sizing is set earlier alongside the rest
   of the drawer-open rules; this fills in the inner layout). */
.yp-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* No top padding: the panel is already anchored flush against the nav
     bar's bottom edge (see mobile-nav.js's panelTop()), so the first
     divider should start right there too -- lining up with wherever page
     content (e.g. the homepage hero) starts below the nav bar, rather than
     leaving an extra 24px gap above it. */
  padding: 0 24px 24px;
  box-sizing: border-box;
}
[data-name="Mobile Nav"]:not(.yp-mobile-open) .yp-mobile-panel {
  display: none;
}
.yp-mobile-view {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.yp-mobile-view[hidden] {
  display: none;
}
.yp-mobile-divider {
  width: 100%;
  height: 2px;
  background: var(--dark-gray-20, #cfcfd0);
}
.yp-mobile-category,
.yp-mobile-link,
.yp-mobile-sublink {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: normal;
  color: var(--dark-gray-100);
  text-transform: uppercase;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
}
.yp-mobile-category,
.yp-mobile-sublink {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.yp-mobile-category-label,
.yp-mobile-sublink-label {
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: inherit;
}
.yp-mobile-link {
  display: block;
}
.yp-mobile-subview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.yp-mobile-subview-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--dark-gray-100);
  text-transform: uppercase;
  margin: 0;
}

/* "New Tab Icon" (external-link glyph) on the homepage's first and last
   LR Image Text Module buttons (CBS News, Explore the Flow). Same broken-
   sub-fill situation as the social icons above -- the raw Figma export
   nests empty placeholder SVGs (background/background-2/divider) inside
   this container. Hide those and mask the outer container with the real
   icon shape instead, filled white to sit on the buttons' Red-100 bg. */
[data-name="New Tab Icon"] {
  background-color: var(--white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.28333%203.66675H1V21.0001H18.3333V14.7167%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M11%201H21V11%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2211%22%20y1%3D%2210.0858%22%20x2%3D%2219.5858%22%20y2%3D%221.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M7.28333%203.66675H1V21.0001H18.3333V14.7167%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M11%201H21V11%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3Cline%20x1%3D%2211%22%20y1%3D%2210.0858%22%20x2%3D%2219.5858%22%20y2%3D%221.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
[data-name="New Tab Icon"] > * {
  display: none !important;
}

/* Homepage "LR Image Text Module" buttons (the 7 alternating photo+text
   modules): Red-100 default, Red-80 on hover, matching Primary Small
   Button's hover treatment elsewhere on the site. */
.yp-lr-module-btn {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-lr-module-btn:hover {
  background-color: var(--red-80) !important;
}

/* Homepage hero CTAs ("Hire a Young Adult" solid, "Find Opportunities"
   outline) sit on top of the hero photo, so the outline button's hover
   uses a real semi-transparent overlay (not a flattened design token)
   so it reads correctly against whatever part of the photo is behind it. */
.yp-hero-btn-solid,
.yp-hero-btn-outline {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-hero-btn-solid:hover {
  background-color: var(--yellow-80) !important;
}
.yp-hero-btn-outline:hover {
  background-color: rgba(255, 184, 0, 0.2) !important;
}

/* "Join Us on Instagram!" CTA module's "Stay Connected" button: outlined
   (Dark-Gray-100 border/text/icon, no fill) by default, Yellow-80 fill on
   hover. Icon matches the Dark-Gray-100 text instead of the White used on
   the Red-100 module buttons, so it needs its own scoped class rather than
   relying on the shared [data-name="New Tab Icon"] default. */
.yp-cta-instagram-btn {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-cta-instagram-btn:hover {
  background-color: var(--yellow-80) !important;
}
.yp-cta-instagram-btn [data-name="New Tab Icon"] {
  background-color: var(--dark-gray-100);
}

/* Homepage "LR Image Text Module" (the 7 alternating photo+text modules):
   module keeps Figma's 20px corner radius, but clip overflow so the
   image can never render outside/over the Dark-Gray-100 outline --
   without clipping, some of these modules showed the photo sitting
   visually on top of the border at the rounded corner instead of neatly
   inset behind it. Some of these instances are named "LR Image Text
   Module/Desktop" in the raw Figma export rather than the plain name
   (an inconsistency in the source file, not tied to layout direction),
   so match both with an attribute prefix selector. */
[data-name^="LR Image Text Module"] {
  overflow: hidden;
}

/* "Connect with Us IRL" (Blue-100 CTA) and "Monthly Inspiration" newsletter
   module: their buttons ("Find Upcoming Events" / "Sign Up") fill Blue-80
   on hover -- not the whole card. */
.yp-cta-blue-hover-btn {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-cta-blue-hover-btn:hover {
  background-color: var(--blue-80) !important;
}

/* Footer "Subscribe to Our Newsletter" Sign Up button: outlined (Dark
   Gray-100 border/text, no fill) by default, gets a 20%-opacity Dark
   Gray-100 tint fill on hover -- no "Gray-100" token exists in the design
   system, so this uses the same Dark Gray-100 the button's own border/text
   already use, just translucent. */
.yp-footer-newsletter-btn {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-footer-newsletter-btn:hover {
  background-color: rgba(13, 13, 18, 0.2) !important;
}

/* Footer newsletter email input: placeholder should render in Dark Gray-80,
   not the browser's own dimmed default (Firefox in particular renders
   placeholders at reduced opacity regardless of the color set on the input
   itself, so this needs its own rule rather than relying on the input's
   text color alone). */
.yp-footer-newsletter-input::placeholder {
  color: var(--dark-gray-80, #3d3d41);
  opacity: 1;
}

/* Interior-page hero breadcrumb ("Home / Current Page"): both crumbs are
   real links now (the current page links to itself), with an underline that
   only shows on hover -- previously "Home" had no hover treatment at all,
   and the current-page crumb was a plain non-link span permanently
   underlined. */
.yp-breadcrumb-link {
  cursor: pointer;
  text-decoration: none;
}
.yp-breadcrumb-link:hover {
  text-decoration: underline;
}

/* Homepage carousels (News & Blog, Merch): the raw Figma export clips
   overflow on the card track, showing only the first "page" with no way to
   see the rest. Make the track a real horizontally-scrollable strip (native
   touch/trackpad scrolling for free) and hide the scrollbar since the
   Back/Forward buttons (see js/carousel.js) are the intended way to
   navigate it. */
[data-name="Carousel Cards"],
[data-name="product-grid"] {
  overflow-x: auto !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-name="Carousel Cards"]::-webkit-scrollbar,
[data-name="product-grid"]::-webkit-scrollbar {
  display: none;
}
/* Carousel Back/Forward buttons (News & Blog + Merch): the raw Figma
   export bakes the circle + chevron into flat single-color SVG <img>s,
   which can't be recolored or hovered. Hide those and mask a plain
   circle/chevron shape onto the button instead (same technique as the
   "New Tab Icon" above), then recolor per module + state below.
   IMPORTANT: scoped to .yp-carousel-btn-newsblog/.yp-carousel-btn-merch
   (added only to these homepage carousel buttons), not the bare
   [data-name="Back Button"]/[data-name="Forward Button"] -- that's the
   same shared Figma component used for plain pagination arrows on several
   other pages (blog, videos, shop, find-opportunities, events-weekly,
   merch-itemized, blog-post), and an earlier unscoped version of this rule
   was masking those into blank circles too. */
.yp-carousel-btn-newsblog,
.yp-carousel-btn-merch {
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.yp-carousel-btn-newsblog > img,
.yp-carousel-btn-merch > img {
  display: none !important;
}
/* The chevron's own local box (before its ancestor's rotate-90/-90 flips it
   into a left/right arrow) is 24px wide x 12px tall -- the Figma export's
   container-query trick pre-swaps width/height so the rotated result fits
   the button's fixed 12x24 icon slot. The mask graphic needs a matching
   24x12 viewBox so mask-size:contain fills that box edge to edge; the
   previous 12x24 viewBox mismatched it and got letterboxed down to a
   sliver. Drawn here as a shallow, wide down-pointing chevron -- rotation
   turns "down" into "left" (Back) or "right" (Forward). Also scoped to the
   two homepage carousel button classes -- "vector-path" is a generic name
   Figma reuses for unrelated vector shapes elsewhere (e.g. the interior-
   page hero's own Back-to-Home arrow). */
.yp-carousel-btn-newsblog [data-name="vector-path"],
.yp-carousel-btn-merch [data-name="vector-path"] {
  transition: background-color 0.15s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M4 3L12 9L20 3' stroke='white' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M4 3L12 9L20 3' stroke='white' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.yp-carousel-btn-newsblog [data-name="vector-path"] img,
.yp-carousel-btn-merch [data-name="vector-path"] img {
  display: none !important;
}

/* Carousel Back/Forward buttons, per the "Module Components" page
   (node 549:1718 -> Back Button / Forward Button component sets) which
   defines Default/Hover/Deactivated for both a Yellow variant (News & Blog,
   on the Blue-100 bg) and a Red variant (Merch, on the Yellow-100 bg):
     Yellow -- Default: Yellow-100 bg / Dark-Gray-100 chevron
               Hover:   Yellow-80  bg / Dark-Gray-100 chevron
               Deactivated: Yellow-20 bg / White chevron
     Red    -- Default: Red-100 bg / White chevron
               Hover:   Red-80  bg / White chevron
               Deactivated: Red-20 bg / White chevron
   Deactivated is toggled by js/carousel.js as each track's scroll position
   reaches either end. */
.yp-carousel-btn-newsblog {
  background-color: var(--yellow-100);
}
.yp-carousel-btn-newsblog:hover {
  background-color: var(--yellow-80);
}
.yp-carousel-btn-newsblog [data-name="vector-path"] {
  background-color: var(--dark-gray-100);
}
.yp-carousel-btn-newsblog.yp-carousel-disabled {
  background-color: var(--yellow-20) !important;
  cursor: default;
  pointer-events: none;
}
.yp-carousel-btn-newsblog.yp-carousel-disabled [data-name="vector-path"] {
  background-color: var(--white);
}

.yp-carousel-btn-merch {
  background-color: var(--red-100);
}
.yp-carousel-btn-merch:hover {
  background-color: var(--red-80);
}
.yp-carousel-btn-merch [data-name="vector-path"] {
  background-color: var(--white);
}
.yp-carousel-btn-merch.yp-carousel-disabled {
  background-color: var(--red-20) !important;
  cursor: default;
  pointer-events: none;
}

/* Find Opportunities page: "Learn More" job card buttons (desktop + mobile),
   Red-100 by default, Red-80 on hover. */
.yp-jobcard-btn-hover {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-jobcard-btn-hover:hover {
  background-color: var(--red-80) !important;
}

/* Post an Opportunity page: "Upload Your Logo" + "Submit Your Opportunity"
   buttons (desktop + mobile), Red-100 by default, Red-80 on hover. */
.yp-postopp-btn-hover {
  transition: background-color 0.15s ease;
}
.yp-postopp-btn-hover:hover {
  background-color: var(--red-80) !important;
}

/* Post an Opportunity page: confirmation modal buttons. "Return to Homepage"
   is outlined yellow-100 by default (transparent fill, yellow-100 text) and
   gains a yellow-20 fill on hover while keeping the same border/text color.
   "Post Another Opportunity" is filled yellow-80 by default, yellow-100 on
   hover. */
.yp-confirm-btn-yellow20 {
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.yp-confirm-btn-yellow20:hover {
  background-color: var(--yellow-20) !important;
}
.yp-confirm-btn-yellow80 {
  transition: background-color 0.15s ease;
}
.yp-confirm-btn-yellow80:hover {
  background-color: var(--yellow-100) !important;
}

/* Post an Opportunity page: required Form Fields Group 01 inputs (First/Last
   Name, Email, Company Name) show a label + red asterisk overlay in place of
   a native placeholder, so the label can stay dark-gray-100 while only the
   asterisk is red-100. The overlay is hidden once the field actually has a
   value (native placeholder is a single space so :placeholder-shown still
   applies while the field is empty). */
.yp-required-input:not(:placeholder-shown) + .yp-required-label {
  display: none;
}

/* Find Opportunities page: job filter bar dropdowns (Industries, Onsite/
   Remote/Hybrid, Paid/Unpaid). Caret rotation is plain CSS keyed off the
   "yp-filter-open" state class rather than a Tailwind utility like
   "rotate-180", since that class only ever gets added by JS and never
   appears literally in the HTML, so Tailwind's JIT (CDN or any static
   build of it) has nothing to scan and won't generate a rule for it. */
.yp-filter-dropdown.yp-filter-open .yp-filter-caret {
  transform: rotate(180deg);
}

/* Find Opportunities page: the Onsite/Remote/Hybrid and Paid/Unpaid
   dropdowns only apply to job listings, so they're deactivated whenever
   the new "Opportunity Type" filter is set to anything other than
   "Jobs" (including its default "All Opportunities" state). */
.yp-filter-dropdown.yp-filter-disabled .yp-filter-toggle {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Single Opportunity page: "Apply Now" button, Red-100 by default,
   Red-80 on hover. */
.yp-singleopp-btn-hover {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-singleopp-btn-hover:hover {
  background-color: var(--red-80) !important;
}

/* Blog Post page: inline photo gallery carousel. Each slide (whether a
   single photo or a 2-up pair) is wrapped in a fixed-width box matching the
   carousel viewport's own width (1222px desktop / 430px mobile) with its
   actual photo content centered inside -- this is what lets the overlay
   Back/Forward buttons (fixed at the same spot regardless of scroll
   position) land symmetrically on every slide's edges, not just the first.
   Scroll-snap makes the browser self-correct to the nearest slide's exact
   center after any scroll (js/carousel.js's click-to-scroll step is only an
   approximate distance), so slides always land perfectly aligned with the
   buttons regardless of small step-size rounding. */
.yp-bloggallery-track {
  scroll-snap-type: x mandatory;
}
.yp-bloggallery-slide {
  scroll-snap-align: center;
}

/* Blog Post page: inline photo gallery carousel Back/Forward buttons.
   These sit as an overlay ON TOP of the photos (per Figma), not below them
   like the other carousels, so their positioning classes stay inline in the
   HTML -- only color/mask are handled here. Per the Figma component
   instance for this specific carousel, this one mixes variants: enabled
   uses the Red variant (Red-100, Hover Red-80) while disabled uses the
   Yellow variant's Deactivated state (Yellow-20) -- an intentional pairing
   since the pale Yellow-20 reads as a washed-out/disabled look sitting on
   a photo, and both variants' Deactivated chevron is White anyway, so the
   chevron never needs to change color between states here. */
.yp-carousel-btn-bloggallery {
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--red-100);
}
.yp-carousel-btn-bloggallery > img {
  display: none !important;
}
.yp-carousel-btn-bloggallery:hover {
  background-color: var(--red-80);
}
.yp-carousel-btn-bloggallery [data-name="vector-path"] {
  background-color: var(--white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M4 3L12 9L20 3' stroke='white' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M4 3L12 9L20 3' stroke='white' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.yp-carousel-btn-bloggallery.yp-carousel-disabled {
  background-color: var(--yellow-20) !important;
  cursor: default;
  pointer-events: none;
}

/* Blog page pagination Back/Forward buttons: same circle + chevron mask
   treatment as the homepage carousel buttons above, but a distinct class so
   js/carousel.js's querySelectorAll(".yp-carousel-btn-newsblog"/"-merch")
   never touches these -- Blog's pagination has no scrollable track behind
   it, so wireCarouselDisabledStates' "no track found" branch was forcibly
   disabling BOTH buttons here (that's why the page looked unchanged after
   the earlier fix). Disabled state is set once in the HTML instead, not
   toggled by JS. Uses the "Red" variant from the Module Components spec
   (Default Red-100/White chevron, Hover Red-80, Deactivated Red-20/White
   chevron) since Blog's UI is red-themed, not the homepage News & Blog
   carousel's yellow. */
.yp-pagination-btn {
  cursor: pointer;
  transition: background-color 0.15s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='28' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--red-100);
}
.yp-pagination-btn > img {
  display: none !important;
}
.yp-pagination-btn:hover {
  background-color: var(--red-80);
}
.yp-pagination-btn [data-name="vector-path"] {
  transition: background-color 0.15s ease;
  background-color: var(--white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M4 3L12 9L20 3' stroke='white' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M4 3L12 9L20 3' stroke='white' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.yp-pagination-btn [data-name="vector-path"] img {
  display: none !important;
}
.yp-pagination-btn.yp-pagination-disabled {
  background-color: var(--red-20) !important;
  cursor: default;
  pointer-events: none;
}
.yp-pagination-btn.yp-pagination-disabled [data-name="vector-path"] {
  background-color: var(--white);
}

/* Events (Weekly) page: "View in Google Calendar" outlined button, Red-20
   fill on hover (border/text stay Red-100). Icon uses the shared
   [data-name="New Tab Icon"] mask technique (see above), overridden to
   Red-100 since this button is white/outlined, not a solid Red-100 fill. */
.yp-events-gcal-btn-hover {
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.15s ease;
}
.yp-events-gcal-btn-hover:hover {
  background-color: var(--red-20) !important;
}
.yp-events-gcal-btn-hover [data-name="New Tab Icon"] {
  background-color: var(--red-100);
}

/* "Our Trusted Partners" logo strip: a true auto-scrolling marquee instead
   of a static row. js/carousel.js duplicates the logo strip once end-to-
   end (so the loop can reset invisibly onto a pixel-identical copy of the
   start) and sets --yp-partners-distance from the strip's actual measured
   width; one full loop takes a flat 10000ms, linear easing (no ease-in/out)
   so the speed never dips. */
.yp-partners-viewport {
  overflow: hidden;
}
.yp-partners-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  will-change: transform;
  animation: yp-partners-scroll var(--yp-partners-duration, 10000ms) linear infinite;
}
@keyframes yp-partners-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--yp-partners-distance, -2848px));
  }
}

/* News & Blog Carousel cards: the image sits flush against the card's top
   edge, inside a Dark-Gray-100 border frame that's rounded 20px on all four
   corners, measured from the OUTER edge of that 2px border. The image
   nests just inside the border, so its own radius needs to be the frame's
   radius minus the border width (20 - 2 = 18) to visually align with the
   border's inner curve -- at a flat 20px it reads as slightly larger
   (~21-22px) than the frame's rounding. */
[data-name="Carousel Card"] {
  overflow: hidden;
}
[data-name="Carousel Card"] > div:first-child img {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* News & Blog Carousel "Read more" links: Red-100 by default, Red-80 on
   hover (matches the site's other red text/button hovers). */
[data-name="Primary Text Link"] {
  cursor: pointer;
}
[data-name="Primary Text Link"] p {
  transition: color 0.15s ease;
}
[data-name="Primary Text Link"]:hover p {
  color: var(--red-80) !important;
}

/* Mission + Vision page: the two "View Our Brochure" outline buttons above
   the donation module. Their New Tab Icon defaults to White (see the base
   rule above, sized for sitting on a solid-color button fill) but these
   buttons are outlined/transparent with Red-100 text, so the icon needs to
   match that instead; text and border already read Red-100 from the
   Figma-exported classes, this only recolors the icon and adds the hover
   fill. */
.yp-brochure-btn {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-brochure-btn:hover {
  background-color: var(--red-20) !important;
}
.yp-brochure-btn [data-name="New Tab Icon"] {
  background-color: var(--red-100);
}

/* Mission + Vision page: "Donate Now" button in the donation CTA module. */
.yp-donate-btn-hover {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-donate-btn-hover:hover {
  background-color: var(--yellow-80) !important;
}

/* Download Icon (Financials + Donate pages): the raw Figma export nests two
   blank placeholder SVGs (icon-group, download-icon-path-3) here, same as
   the other broken-sub-fill icons above. Mask a plain arrow-into-tray
   download glyph onto the container instead, filled White by default to
   sit on these pages' solid Red-100 buttons. */
[data-name="Download Icon"] {
  background-color: var(--white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0V12M10 12L5 7M10 12L15 7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 16V18H19V16' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0V12M10 12L5 7M10 12L15 7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 16V18H19V16' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
[data-name="Download Icon"] > * {
  display: none !important;
}

/* Financials page: the 10 "Download" buttons (Annual Reports + Form 990s /
   Tax Documents), Red-100 by default, Red-80 on hover. */
.yp-download-btn-hover {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-download-btn-hover:hover {
  background-color: var(--red-80) !important;
}

/* Financials page: "Find Opportunities" button in the mentorship CTA. */
.yp-mentorship-btn-hover {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-mentorship-btn-hover:hover {
  background-color: var(--yellow-80) !important;
}

/* Blog page: all "Read More" buttons (2-Up, 3-Up cards, and the featured
   card), Red-100 by default, Red-80 on hover. */
.yp-blog-btn-hover {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.yp-blog-btn-hover:hover {
  background-color: var(--red-80) !important;
}

/* Merch Itemized page ------------------------------------------------- */

/* Color/Size dropdown pills: smaller variant of the shared
   .yp-filter-dropdown pattern (see job-filter.js), Blue-100 hover on the
   closed pill itself (individual options already get a Blue-100 hover via
   their own inline Tailwind utility). */
.yp-merch-select .yp-filter-toggle {
  transition: border-color 0.15s ease;
}
.yp-merch-select .yp-filter-toggle:hover {
  border-color: var(--blue-100);
}
.yp-merch-select .yp-filter-toggle:hover .yp-filter-label {
  color: var(--blue-100);
}
.yp-merch-select .yp-filter-toggle:hover svg path {
  stroke: var(--blue-100);
}

/* Quantity stepper Add/Subtract buttons: same two-layer CSS-mask technique
   as .yp-pagination-btn -- outer circle mask driven by background-color
   (Red-100 default, Red-80 hover, Red-20 once Subtract hits the minimum of
   1), inner "+"/"-" glyph mask always White. Matches the Property
   1=Add/Subtract icon assets' geometry (60x60 viewBox). */
.yp-qty-btn {
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background-color 0.15s ease;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='30' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: var(--red-100);
}
.yp-qty-btn:hover:not(:disabled) {
  background-color: var(--red-80);
}
.yp-qty-btn:disabled,
.yp-qty-btn.yp-qty-btn-disabled {
  background-color: var(--red-20) !important;
  cursor: default;
  pointer-events: none;
}
.yp-qty-btn > [data-name="vector-path"] {
  background-color: var(--white);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.yp-qty-btn[data-action="add"] > [data-name="vector-path"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M12 30.5L47.3553 30.5' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M29.6777 12.8223L29.6777 48.1776' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M12 30.5L47.3553 30.5' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M29.6777 12.8223L29.6777 48.1776' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.yp-qty-btn[data-action="subtract"] > [data-name="vector-path"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M12 30.5L47.3553 30.5' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M12 30.5L47.3553 30.5' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Add to Cart button: Red-20/white text by default (inert until the user
   has added at least one item and chosen both Color and Size), Red-100 with
   a Red-80 hover once merch-itemized.js marks it active. Text stays white
   in both states. */
.yp-addcart-btn {
  cursor: not-allowed;
  pointer-events: none;
  transition: background-color 0.15s ease;
}
.yp-addcart-btn.yp-addcart-active {
  background-color: var(--red-100) !important;
  cursor: pointer;
  pointer-events: auto;
}
.yp-addcart-btn.yp-addcart-active:hover {
  background-color: var(--red-80) !important;
}

/* Description / Additional Information side tabs: active tab reads
   Dark-gray-100, inactive Dark-gray-20 (and vice versa on click) --
   default view on load is Description active, matching Figma. */
.yp-merch-tab {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--dark-gray-20);
  cursor: pointer;
  transition: color 0.15s ease;
}
.yp-merch-tab.yp-merch-tab-active {
  color: var(--dark-gray-100);
}

/* Photo carousel under the hero image: small white-fill Back/Forward
   buttons, hidden by merch-itemized.js unless there are more than five
   thumbnails (Figma: 5 or fewer means no arrows at all -- this product has
   4). Track scrolls horizontally; JS drives infinite wraparound instead of
   disabling at the ends like the other carousels. */
.yp-merch-photo-track {
  overflow-x: auto;
  scroll-behavior: smooth;
}
.yp-merch-photo-track::-webkit-scrollbar {
  display: none;
}
.yp-merch-photo-btn {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.yp-merch-photo-btn:hover {
  opacity: 0.7;
}

/* My Account page: "Remember me" checkbox on the Login form. A plain native
   checkbox with appearance:none, styled with the same border/radius language
   as the rest of the form controls (dark-gray-80 border, 4px radius), filling
   red-100 with a white checkmark once checked -- no extra wrapper markup
   needed since the checkmark is a background-image data URI keyed off
   :checked, matching the project's other lightweight custom-control patterns
   (quantity stepper, dropdown carets) that lean on CSS rather than JS state. */
.yp-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--dark-gray-80, #3d3d41);
  border-radius: 4px;
  background-color: var(--white, #fff);
  cursor: pointer;
}
.yp-checkbox-input:checked {
  background-color: var(--red-100, #fe1412);
  border-color: var(--red-100, #fe1412);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'><path d='M1 6L5.5 10.5L15 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}