/*
Theme Name: Color Of Change Theme
Theme URI: https://github.com/colorofchange/coc-new-main-website
Author: Danne Woo, Tiana Horn, Reginald Peterson, Jenny Sum
Description: Wordpress theme for Color of Change main website.
Version: 1.0
License: License: Proprietary License
License URI: https://colorofchange.org/license
Text Domain: coc-theme
*/

/* Proprietary License
This theme is the proprietary property of Color Of Change. You may not copy, modify, or distribute this theme or any part of it without prior written consent from Color Of Change.

©2024 Color Of Change. All rights reserved.
*/

/* COC Font Families */
/* Manaka, Manuka Condensed, Manuka Slab, Martin, Metric */
@import url('assets/css/fonts.css');

body {
    font-family: 'Metric', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F4EFE3;
}

footer {
    background-color: #f8f9fa;
    padding: 0px;
    text-align: center;
}

main {
    padding: 80px 60px;
    max-width: 1340px;
    margin: 0px auto;
    min-height: 400px;
    background-color: #F4EFE3;
}

main.coc-elementor {
    padding: 0px;
    max-width: none;
    margin: 0px;
    min-height: auto;
}

article {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

.text-highlight mark {
    padding: 10px 15px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    margin: 20px 0;
    line-height: 1.2em;
}

.title, h1, h2, h3, h4, h5, h6 {
    font-family: MARTIN;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    color: #2c2c2c;
    margin: 30px 0px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}

.title {
    font-size: 200px;
    line-height: 66%; /* 132px */
}

h1 {
    font-size: 128px;
    line-height: 70%; /* 89.6px */
}

h2 {
    font-size: 96px;
    line-height: 70%; /* 67.2px */
}

h3 {
    font-size: 76px;
    line-height: 78%; /* 59.28px */
}

h4 {
    font-size: 64px;
    line-height: 70%; /* 44.8px */
}

h5 {
    font-size: 40px;
    line-height: 70%; /* 28px */
}

h6 {
    font-size: 34px;
    line-height: 70%; /* 23.8px */
}

p, input, li {
    font-family: Metric;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 28.6px */
    color: #2c2c2c;
    hyphens: none;
}

p.one, input {
    font-size: 20px;
}

p.two {
    font-size: 18px;
}

p.three {
    font-size: 22px;
    font-weight: 700;
    line-height: 130%;
}

.subhead {
    font-family: Metric;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 116.667% */
}

.subhead.large {
    font-size: 29px;
    line-height: 120%; /* 34.8px */
}

.subhead.red-border {
    border-left: 6px solid #BF2D21;
    padding: 9px 0px 0px 10px;
    vertical-align: middle;
    line-height: 45%;
}

.card {
    font-family: Metric;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 38.4px */
}

.section-title {
    font-family: Metric;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 18px */
    letter-spacing: 2.16px;
    text-transform: uppercase;
}

ul {
    margin: 0px;
    padding: 0px;
}

/* Main bullet lists */
article ul {
    padding-left: 1em;           /* Adjust as needed */
    list-style-position: outside; /* Ensures bullets are outside the content */
    margin: 0 0 1em 0;            /* Optional: adds spacing below the list */
}
  
  /* Nested bullet lists */
article ul ul {
    padding-left: 2em; /* Additional indent for secondary bullets */
    margin: 0.5em 0 1em 0; /* Adjust spacing if needed */
}
  
  /* Optional: adjust individual list items */
article ul li {
    margin: 0.5em 0;
}

.tag-spotlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.tag-spotlight h5 {
    color: white;
    padding: 4px 16px 8px;
    margin: 0px;
}

.tag-category, .tag-issue-area-container {
    display: inline-flex;
    padding: 11px 17px 7px 17px;
    align-items: baseline;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 100px;
}

.tag-category, .tag-issue-area-container .issue-area {
    display: inline-block;
    vertical-align: middle;
    font-family: Metric;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 13px */
    text-transform: uppercase;
    margin-right: 5px;
}

.tag-category {
    color: #2C2C2C;
    border: 1px solid #2C2C2C;
}

.tag-category.white {
    background: #F4EDDD;
}

.red-highlight {
    color: #BF2D21;
}

.tag-issue-area-container {
    display: inline-flex;
    padding: 11px 17px 7px 17px;
    align-items: baseline;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 100px;
}

.tag-issue-area-container.white {
    background: #FFF;
    color: #2C2C2C;
}

.tag-issue-area-container.gray {
    background: #2C2C2C;
    color: #fff;
}

.tag-issue-area-container.color {
    color: #fff;
}

.tag-issue-area-container .issue-area-dot.color {
    background: #fff;
}

/* Issue Area Dot */
.tag-issue-area-container .issue-area-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px; /* Space between dot and text */
    vertical-align: middle;
}

/* Justice System */
.justice-system {
    background-color: #cb1904 !important;
}

/* Economic Justice */
.economic-justice {
    background-color: #428f2b !important;
}

/* Voter Freedom */
.voter-freedom {
    background-color: #e3b008 !important;
}

/* Create Digital Safety */
.create-digital-safety {
    background-color: #38a6d6 !important;
}

/* Media & Culture */
.media-culture {
    background-color: #45304f !important;
}

/* Emergent */
.emergent {
    background-color: #fa521a !important;
}

/* Justice System */
.justice-system-text-color {
    color: #cb1904;
}

/* Economic Justice */
.economic-justice-text-color {
    color: #428f2b;
}

/* Voter Freedom */
.voter-freedom-text-color {
    color: #e3b008;
}

/* Create Digital Safety */
.create-digital-safety-text-color {
    color: #38a6d6;
}

/* Media & Culture */
.media-culture-text-color {
    color: #45304f;
}

/* Emergent */
.emergent-text-color {
    color: #fa521a;
}

/* Justice System */
.justice-system-text-color-light {
    color: #D36C64;
}

/* Economic Justice */
.economic-justice-text-color-light {
    color: rgba(44, 99, 27, 0.70);
}

/* Voter Freedom */
.voter-freedom-text-color-light {
    color: rgba(227, 176, 8, 0.70);
}

/* Create Digital Safety */
.create-digital-safety-text-color-light {
    color: rgba(21, 109, 148, 0.70);
}

/* Media & Culture */
.media-culture-text-color-light {
    color: rgba(91, 56, 114, 0.70);
}

/* Emergent */
.emergent-text-color-light {
    color: rgba(250, 82, 26, 0.70);
}

a {
    color: inherit;
    transition: 0.3s ease;
}

a:hover, a:visited {
    color: #e3b008;
}

a.card-link {
    text-decoration: none;
}

.button:visited, .button:hover, .dropdown:visited, .dropdown:hover {
    color: #fff;
}

.breadcrumb:visited {
    color: #fff;
}

.button, .wp-block-button .wp-block-button__link, .dropdown {
    font-family: MARTIN;
    font-size: 29px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 43.5px */
    text-transform: uppercase;
    border-width: 1px;
    border-radius: 3px;
    background: #2C2C2C;
    color: #fff;
}

.button, .wp-block-button .wp-block-button__link, .dropdown {
    position: relative; /* Needed for positioning the pseudo-element */
    display: inline-block;
    margin: 10px 0px;
    align-items: center;
    padding: 10px 60px 10px 32px;
    text-decoration: none;
    text-align: center;
    font-family: MARTIN, sans-serif;
    font-size: 29px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.3s;
}

.button.black {
    background: #2C2C2C;
}

.button.black.outline {
    border: 1px solid #ffffff;
}

.button.white, .wp-block-button.is-style-outline .wp-block-button__link {
    background: #fff;
    color: #2C2C2C;
    transition: all 0.3s;
    border: 1px solid #F4EDDD;
}

.button.white:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: #fff;
}

.button.beige {
    color: #2C2C2C;
    transition: all 0.3s;
    background: #F4EDDD;
    border: 1px solid #F4EDDD;
}

.button.beige:hover {
    background: #F4EDDD;
}

.button.red, .wp-block-button.red a {
    background: #be2e22;
    border: 1px solid #be2e22;
    color: #fff;
    transition: all 0.3s;
}

.button.red:hover, .wp-block-button.red a:hover {
    background: #be2e22;
}

.button.purple {
    background: #5B3872;
    border: 1px solid #5B3872;
    color: #fff;
    transition: all 0.3s;
}

.button.purple:hover {
    background: #5B3872;
}

.button:hover, .wp-block-button .wp-block-button__link:hover {
    /* box-shadow: 0px 4px 20.4px 0px rgba(0, 0, 0, 0.59);
    backdrop-filter: blur(20px); */
    transition: 0.3s;
    padding-right: 70px;
    cursor: pointer;
}

/* CTA Button Animation */
.button, .wp-block-button__link a {
    position: relative;
    transition: padding-right 0.3s;
}

.button::after, .wp-block-button a::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 25px; /* Initial position off the button */
    transition: all 0.3s ease;
    width: 17px; /* Width of SVG */
    height: 17px; /* Height of SVG */
    background-image: url("assets/images/arrow-white.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-45deg);
    /* Ensure browser compatibility */
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

.dropdown::after {
    content: '';
    position: absolute;
    top: 43%;
    right: 25px; /* Initial position off the button */
    width: 17px; /* Width of SVG */
    height: 17px; /* Height of SVG */
    background-image: url("assets/images/dropdown-carrot.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.dropdown:hover::after {
    top: 40%;
    right: 22px; /* Initial position off the button */
    width: 23px; /* Width of SVG */
    height: 23px; /* Height of SVG */
}

.button.beige::after, .button.white::after, .is-style-outline a::after {
    background-image: url("assets/images/arrow-black.svg");
}

.button-arrow {
    display: flex;
    width: 12px;
    height: 12px;
    padding: 18px;
}

button.button-arrow {
    padding: 25px;
    border: none;
}

.button-arrow.border-top-left {
    border-left: 18px solid;
    border-top: 18px solid;
}

.button-arrow.border-all {
    border: 18px solid;
}

.button-arrow.white, .button-arrow.purple, 
.button-arrow.yellow, .button-arrow.red {
    border-color: #2c2c2c;
}

.button-arrow.white {
    background: #fff;
}

.button-arrow.purple {
    background: #5B3872;
}

.button-arrow.yellow {
    background: #E3B008;
}

.button-arrow.red {
    background: #BF2D21;
}

.button-arrow.red-light {
    background: #BF2D21;
    border-color: #F4EDDD;
}

.button-arrow.black {
    background: #2C2C2C;
    border-color: #F4EDDD;
}

.button-arrow span {
    display: inline-block;
    position: relative;
}

.button-arrow span.arrow::after {
    position: absolute;
    height: 12px;
    width: 12px;
    content: "";
    right: calc(50% - 12px);
    top: 50%;
    transform: translateY(-45%) rotate(-45deg);
    -moz-transform: translateY(-45%) rotate(-45deg);
    -webkit-transform: translateY(-45%) rotate(-45deg);
    -o-transform: translateY(-45%) rotate(-45deg);
    -ms-transform: translateY(-45%) rotate(-45deg);
    transition: all .6s ease;
}

button.button-arrow span.arrow::after {
    right: calc(50% - 6px);
}

.button-arrow span.arrow::after {
    background: url(assets/images/arrow-white.svg) no-repeat;
    background-size: contain;
}

.button-arrow.white span.arrow::after {
    background: url(assets/images/arrow-black.svg) no-repeat;
    background-size: contain;
}

.button-arrow span.play-icon::after {
    position: absolute;
    height: 12px;
    width: 12px;
    content: "";
    right: calc(50% - 12px);
    top: calc(50% - 6px);
    transition: all .3s ease;
}

.button-arrow span.play-icon::after {
    background: url(assets/images/play-arrow-icon-white.svg) no-repeat;
    background-size: contain;
}

.button-arrow.white span.play-icon::after {
    background: url(assets/images/play-arrow-icon-black.svg) no-repeat;
    background-size: contain;
}

.button-arrow:hover {
    cursor: pointer;
    transition: all .6s ease;
}

.button-arrow:hover span.arrow::after {
    transform: translateY(-45%) rotate(-360deg);
    -moz-transform: translateY(-45%) rotate(-360deg);
    -webkit-transform: translateY(-45%) rotate(-360deg);
    -o-transform: translateY(-45%) rotate(-360deg);
    -ms-transform: translateY(-45%) rotate(-360deg);
    transition: all .6s ease;
}

.button-arrow:hover span.play-icon::after {
    height: 18px;
    width: 18px;
    right: calc(50% - 17px);
    top: calc(50% - 8px);
    transition: all .3s ease;
}

.pagination-buttons {
    width: 40px;
    height: 40px;
    align-items: center;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 50%;
    box-shadow: 0 4px 20.4px 0 rgba(0, 0, 0, .59);
    cursor: pointer;
    display: flex;
    justify-content: center;
    outline: none;
    transition: background-color .3s ease;
    transition: .3s;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

.pagination-buttons.yellow {
    background-color: #e3b008;
    background-image: url("assets/images/arrow-white.svg");
}

.pagination-buttons.white {
    background-color: #fff;
    background-image: url("assets/images/arrow-black.svg");
}

.pagination-buttons.right {
    transform: rotate(0deg);
    /* Ensure browser compatibility */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}

.pagination-buttons.left {
    transform: rotate(180deg);
    /* Ensure browser compatibility */
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.pagination-buttons.yellow:hover {
    background-color: rgba(227,176,8,.725);
}

.pagination-buttons.white:hover {
    background-color: rgba(210,210,210);
}

/* Fix for swiper.js styling */
.custom-image-cards__content .swiper-button-next,
.custom-image-cards__content .swiper-button-prev {
    width: 40px;
    height: 40px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    content: none;
    display: none;
}

.breadcrumb {
    position: relative; /* Needed for positioning the pseudo-element */
    display: inline-block;
    margin: 0px;
    align-items: center;
    transition: all 0.3s;

    font-family: Metric;
    color: #ffffff;
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 70%; /* 14px */
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px 0px 7px 30px;
}

.breadcrumb::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 0px; /* Initial position off the button */
    width: 17px; /* Width of SVG */
    height: 17px; /* Height of SVG */
    background-image: url("assets/images/arrow-white.svg");
    /* background-image: url("assets/images/arrow-black.svg"); */
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.3s;
}

.breadcrumb:hover {
    cursor: pointer;
    color: #fff;
}

.breadcrumb:hover::before {
    transform: rotate(180deg);
    /* Ensure browser compatibility */
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    background-image: url("assets/images/arrow-white.svg");
}

form {
    display: flex;
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    padding: 8px 10px 8px 24px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    gap: 20px;
    border-radius: 2px;
    flex-wrap: wrap;
}

input {
    flex: 1 1 auto; 
    min-width: 0;
    height: 28px;
    border: none;
    padding: 14px 10px 10px 10px;
    box-sizing: border-box;
}

input.divider {
    border-left: 1px solid rgba(0, 0, 0, 0.10);
}

input:focus-visible {
    outline-width: 0;
}

.sidebar h3 {
    margin: 0px 0px 30px 0px;
}

#akPetitionForm, .newmode-campaign-form  {
    padding: 0px;
    background-color: #ffffff00;
}

#akPetitionForm #akPetitionFields, 
.newmode-campaign-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: flex-start;
}

#akPetitionForm #akPetitionFields .field-wrap {
    width: 100%;
}

#akPetitionForm input[type=text], .newmode-campaign-form input[type=text], 
#akPetitionForm input[type=email], .newmode-campaign-form input[type=email], 
#akPetitionForm input[type=tel], .newmode-campaign-form input[type=tel] {
    width: 100%;
    padding: 25px 10px;
}

#newmode-target-results h4 {
    margin-top: 0px;
}

#akPetitionForm select {
    width: 100%;
    padding: 10px;
}

#akPetitionForm .radio-option {
    display: flex;
    gap: 10px;
    align-content: stretch;
    align-items: flex-end;
    justify-content: flex-start;
    width: auto;
}

#akPetitionForm .radio-option input[type=radio], 
#akPetitionForm  input[type=checkbox] {
    flex: 0 0 auto;
    width: 15px;
}

#akPetitionForm  input[type=checkbox] {
    margin: 0px;
    height: auto;
}

#akPetitionForm  .field-wrap:has(input[type=checkbox]) {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-direction: row;
}

#akPetitionForm  textarea {
    width: calc(100% - 20px);
    border: none;
    min-height: 100px;
    padding: 10px;
    font-size: 16px;
}

#akPetitionForm  button[type=submit] {
    margin: 0px 0px 0px auto;
}

#akPetitionThankYou {
    padding: 10px 0px;
    background-color: #ffffff00;
}

.thank-you {
    display: flex;
    /* Let the form shrink/grow and take all available width */
    /* flex: 1 1 auto; */
    flex-direction: row;
    box-sizing: border-box;
    min-width: 0; /* crucial for flex items to shrink below their intrinsic size */
  
    /* padding: 8px 10px 8px 24px; */
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    gap: 20px;
    border-radius: 2px;
    width: 100%;
}

.thank-you .check {
    display: flex;
    width: 12px;
    height: 12px;
    padding: 18px;
    background: #E3B008;
}

.thank-you .check span::after {
    position: absolute;
    height: 12px;
    width: 17px;
    content: "";
    background: url(assets/images/check.svg) no-repeat;
    background-size: contain;
    margin-left: -2px;
}

#footerThankYouMessage p, #footerThankYouMessage a {
    color: #2C2C2C;
}

img {
    width: 100%;
}

.social-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    flex-shrink: 0;
    list-style-type: none;
}

.social-icons li a {
    display: flex;
    width: 22px;
    height: 22px;
    padding: 12px;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
}

.social-icons.white li a {
    background: #FFF;
}

.social-icons.black li a {
    background: #2C2C2C;
}

/* Primary Navigation Styling ---------------------------------------------------- */
header {
    display: flex;
    width: 100%;
    height: 55px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #5B5B5B;
    background: #2C2C2C;
}

/* Utility bar strip */
.utility-bar {
	display:flex;
	justify-content:flex-end;
	align-items:center;
	padding:0.5rem 1rem;
    gap: 20px;
	background:#2C2C2C;            /* match header background */
}

.utility-search {
	display:flex;
    flex: none;
	align-items:center;
    border-radius: 4px;
    padding: 2px 10px 0px 10px;
}

.header-mobile-social .utility-search {
    width: 100%;
}

.utility-search input {
	border:0;
	padding:0.4rem 0.6rem;
    font-size: 14px;
    border-radius: 50px;
}

/* Style the built-in clear "x" on search inputs */
.utility-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;   /* remove default glyph */
  appearance: none;
  height: 10px;
  width: 10px;
  cursor: pointer;

  /* paint it red using an SVG mask */
  background-color: #BF2D21;  /* ← red */
  -webkit-mask-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">\
<path d="M7.41 6l4.3-4.29a1 1 0 0 0-1.42-1.42L6 4.59 1.71.29A1 1 0 1 0 .29 1.71L4.59 6 .29 10.29A1 1 0 0 0 1.71 11.71L6 7.41l4.29 4.3a1 1 0 0 0 1.42-1.42Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 80% 80%;
}

/* Optional hover tweak */
.utility-search input[type="search"]::-webkit-search-cancel-button:hover {
  background-color: #e34a3e;  /* lighter red on hover */
}

.utility-bar .social-icons {
    gap: 5px;
}

.utility-bar .social-icons li a {
    width: 18px;
    height: 18px;
    padding: 8px;
}

.utility-social-icons img {
	height:20px;
	width:20px;
}

/* hide on viewports below 1024px (adjust as needed) */
@media(max-width:840px){
	.utility-bar.desktop-only{display:none;}
}

.header-logo {
    display: flex;
    margin: 30px 0px 0px 30px;
    z-index: 9999;
}

.header-logo img {
    width: 130px;
}

.header-navigation {
    display: flex;
}

.header-navigation .header-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0px;
    flex-shrink: 0;
    list-style-type: none;
}

.header-navigation .header-menu li a {
    color: #FFF;
    text-align: center;
    padding: 22px 14px 7px;
    margin: 0px;

    font-family: Metric;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    text-decoration: none;
    text-transform: uppercase;
}
.header-navigation .header-menu li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    border-bottom: 6px solid #bf2e2100;
    transition: 0.3s ease;
}

.header-navigation .header-menu li:hover {
    border-bottom: 6px solid #BF2D21;
    cursor: pointer;
}

.header-navigation .header-menu li.current-menu-item,
.header-navigation .header-menu li.current-menu-ancestor,
.header-navigation .header-menu li.current_page_item,
.header-navigation .header-menu li.current_page_ancestor {
    border-bottom: 6px solid #BF2D21;
}

.header-navigation .donate-btn, 
.header-navigation-mobile .donate-btn {
    display: flex;
    padding: 7px 18px 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #BF2D21;
    margin: 10px 16px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;   
}

.donate-btn:hover {
    background-color: #bf2e217a;
}

.donate-btn h6 {
    color: #FFF;
    margin: 0px;
}

/* Desktop: vertical list */
/* Styling for detail pages with sidebar */
#controlshift-embed-sign-form {
    padding: 10px;
    background-color: #fff;
}

.share-links {
    margin-bottom: 40px;
}

.share-links p, .entry-authors p {
    color: #2C2C2C;
    font-family: Metric;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
}

.secondary-nav, .sidebar {
    min-width: 250px;
    float: right;
    margin: 0px 0px 100px 60px;
    display: block;
    height: 100%;
    /* min-height: 300px; */
}

.secondary-nav li {
    display: block;
    margin-bottom: 1em;
    padding: 0px 0px 0px 18px;
}
  
.secondary-nav li a {
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    text-decoration: none;
    text-transform: uppercase;
    color: #2C2C2C;
    opacity: 0.5;
    vertical-align: -webkit-baseline-middle;
    line-height: 0px;
}

.secondary-nav li a:hover,
.secondary-nav li.current-page a {
    opacity: 1;
}

.secondary-nav li {
    border-left: 6px solid #bf2e2100;
}

.secondary-nav li.current-page {
    border-left: 6px solid #BF2D21;
}

/* 1. Make main a flex container */
.site-main {
    display: flex;
    flex-direction: row; /* Default: side-by-side on desktop */
    align-items: flex-start; /* Align items at the top */
    /* Optional spacing or width limits, e.g.:
       max-width: 1220px;
       margin: 0 auto;
    */
}

/* 2. Let the article expand as needed. */
.site-main > article {
    flex: 1; /* Take remaining space */
    /* Optional min-width to prevent excessive squishing on very narrow screens */
    min-width: 0; 
}
  
  /* 3. Fix a narrower width for sidebar, or let flex shrink it. */
.sidebar {
    width: 320px;        /* or whatever width suits you */
    margin-left: 60px;   /* spacing between content & sidebar */
}
  
.site-main.sidebar-layout .coc-press-component, 
.site-main.sidebar-layout .image-cards-main-container,
.site-main.sidebar-layout .coc-cta-component, 
.site-main.sidebar-layout .coc-featured-cta, 
.site-main.sidebar-layout .coc-related-resources,
.site-main.sidebar-layout .coc-about-video-component,
.site-main.sidebar-layout .coc-image-cards-main-container {
    left: calc(50% + 250px - 60px);
}

.hamburger-btn {
    display: none; /* hidden on desktop */
}

.mobile-menu {
    display: none; /* or block, but we’re using [hidden] attribute, so it's hidden by default anyway */
}

/* The hamburger icon style (optional) */
.hamburger-icon {
    width: 24px;
    height: 4px;
    background: #fff;
    position: relative;
    display: block;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: "";
    display: block;
    width: 24px;
    height: 4px;
    background: #fff;
    position: absolute;
    left: 0;
}
.hamburger-icon::before {
    top: -8px;
}
.hamburger-icon::after {
    top: 8px;
}

/* 
   WHEN aria-expanded="true", morph into "X":
   1) Remove center bar by making .hamburger-icon itself transparent
   2) Move & rotate the ::before & ::after bars into an X shape
*/
.hamburger-btn[aria-expanded="true"] .hamburger-icon {
    background: transparent; /* Hide the middle bar */
}

/* The top bar rotates 45deg and centers */
.hamburger-btn[aria-expanded="true"] .hamburger-icon::before {
    top: 0;
    transform: rotate(45deg);
}

/* The bottom bar rotates -45deg and centers */
.hamburger-btn[aria-expanded="true"] .hamburger-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* Footer container */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F4EFE3;
    padding-top: 40px;
    background-image: url("assets/images/donate-ribbon-bkgd.png");
    background-repeat: no-repeat;
    background-position: -275px calc(100% - 200px);
    background-size: 400px;
}

footer.donate {
    background: none;
}

.footer-base-container {
    width: calc(100% - 140px);
    padding: 64px 70px 35px;
    border-bottom: 56px solid #1C1C1C;
    background: #2C2C2C;
}

.footer-base {
    max-width: 1280px;
    margin: 0px auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo {
    width: 107px;
    flex-shrink: 0;
}

.footer-navigation {
    display: flex;
    flex-direction: column; 
    flex-wrap: wrap;
    flex: 1 1 auto; /* allows it to shrink/grow */
    gap: 10px;
    max-width: 450px;
}

.footer-menu-title {
    width: 100%;
    color: #BF2D21;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    text-align: left;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 135px; 
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    margin-bottom: 10px;
    margin-right: 10px;
    text-align: left;
    min-width: 100px;
}

.footer-navigation a {
    color: #FFF;
    text-decoration: none;
}

.footer-navigation a:hover {
    color: #e3b008;
}

.footer-social .social-icons li a {
    width: 18px;
    height: 18px;
}

.footer-donate-container {
    display: flex;
    flex-direction: column;
    max-width: calc(1340px - 30%);
    margin: 0px auto;
    text-align: left;
    padding: 60px 30% 60px 60px;
    background-image: url("assets/images/donate-section-graphic.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}

.footer-donate-container h3 {
    margin: 20px 0px 70px;
}

footer .donor-section {
    display: flex;
    align-items: center;
    padding: 20px 0px;
}
  
footer .donor-avatars {
    display: flex;
    margin-right: 30px; /* space between avatars cluster & text */
}
  
footer .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden; /* ensures images are clipped to circle */
    border: 2px solid #fff; /* white border ring */
    margin-left: -12px;
}
  
footer .avatar:first-child {
    margin-left: 0;
}
  
footer .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; /* remove any default inline spacing */
}
  
footer .circle-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E3B008; 
    color: #fff;
    font-weight: bold;
    border: 2px solid #E3B008; /* white border ring */
    font-size: 0.875rem; /* Adjust as you like */
}
  
footer .donor-text {
    flex: 1;
    max-width: 300px;
}

/* Overall Get In Touch banner container */
footer .get-in-touch-banner {
    background-image: url("assets/images/get-in-touch-bkgd.png");
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: calc(100% + 50px) -100px;
    background-color: #2C2C2C; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 80px;
    margin: 30px;
    border-radius: 5px;
    max-width: calc(1340px - 200px);
    width: calc(100% - 280px);
}
  
footer .banner-title h2 {
    color: #ffffff;
    text-transform: uppercase;
    margin: 13px 0px 25px 0px;
    text-align: left;
}
  
footer .banner-title .highlight {
    color: #D4A331;
}
  
footer .banner-text {
    flex: 1;
    margin: 0 20px;
    max-width: 400px;
    min-width: 250px;
    text-align: left;
}
  
footer .banner-text p {
    color: #ffffff;
}

footer .newsletter-section {
    display: flex;
    align-items: stretch; /* Ensures child elements stretch to the height of the container */
    justify-content: space-between;
    padding: 0px 50px 30px;
    margin: 60px;
    border-radius: 5px;
    background: url('assets/images/footer-newsletter-bkgd.png'), url('assets/images/footer-newsletter-circles.png');
    background-color: #BF2D21;
    background-size: cover, 50%;
    background-repeat: no-repeat;
    background-position: 50%, calc(100% - 20px);
    background-blend-mode: darken, normal;
    text-align: left;
    width: calc(100% - 220px);
    max-width: calc(1340px - 140px);
    gap: 30px;
}

footer .newsletter-content {
    flex: 1;
}

footer .newsletter-section h3 {
    margin: 60px 0px 0px 0px;
}

footer .newsletter-section h3 span {
    background-color: #fff;
    padding: 10px 15px;
    /*
    Critical: replicate the padding + background 
    for each line that wraps.
    */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; /* Safari prefix */
    margin: 20px 0;
    line-height: 1.2em;
}

footer .newsletter-section form {
    margin: 50px 0px 40px 0px;
}

footer .newsletter-section p,
footer .newsletter-section p a {
    color: white;
}

footer .newsletter-section p a:hover {
    color: #D4A331;
}

footer .newsletter-image {
    flex: 0.85; /* Make it take up equal height as its sibling */
    display: flex;
    align-items: center; /* Center the content vertically, optional */
    justify-content: center; /* Center the content horizontally, optional */
    width: 90%;
    /* background: url('assets/images/footer-newsletter-circles.png'); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 40px;
}

footer .newsletter-section input#name {
    flex: 0.5;
}

footer .newsletter-section input {
    flex: 1;
}

#footerFormFields {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
}

#footerThankYouMessage {
    display: none;
}

/* HERO styling ***************************************** */
/* Homepage Hero */
.hero.hero-home {
    position: relative;
    height: calc(100vh - 140px);
    width: 100%;
    overflow: hidden;

    /* Flex for vertical + horizontal center */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero.hero-home .video-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero.hero-home .video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.hero.hero-home .title-container {
    position: relative;
    z-index: 1;
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 60px;
    transform: translateY(-60px);
}

.hero.hero-home .title-container .title {
    color: #F4EDDD;
    text-align: center;
}

.hero.hero-secondary .title-container .title, 
.hero.hero-detail .title-container h1,
.hero.hero-detail .title-container h2  {
    color: #F4EDDD;
    text-align: left;
}

.hero.hero-detail .title-container h1  {
    margin: 0px 0px 20px 0px;
}

.hero.hero-detail .title-container p.one  {
    margin: 0px 0px 20px 0px;
    text-align: left;
    width: 50%;
}

.hero p {
    color: #ffffff;
}
  
.hero.hero-secondary {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 250px;
  
    background:
      url('assets/images/ribbon-bw-bkgd-graphic.png'),
      url('assets/images/footer-newsletter-bkgd.png');
    background-size: 600px, cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply, multiply;
  
    background-position: calc(50% - 500px) calc(100% + 100px), 50% center;
    overflow: hidden;
}

.hero.hero-secondary div.people-circle {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 700px;
    background: radial-gradient(67.95% 41.98% at 29.86% 44.46%, #FFBC11 68%, #FF9C11 100%);
    bottom: -180px;
    left: calc(50% + 50px);
}

.hero.hero-secondary img.people {
    position: absolute;
    width: 750px;
    bottom: 0;
    left: calc(50% + 50px);
}

.hero.hero-secondary .title-container {
    max-width: 1340px;
    width: calc(100% - 120px);
    padding: 60px 60px 250px 60px;
    margin: 0px auto;
}

.hero.hero-secondary .subtitle {
    padding: 100px 50% 0px 0px;
}

.hero.hero-detail {
    position: relative;
    width: 100%;
    min-height: 300px;
    /* Flex for vertical + horizontal center */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    background:
      url('assets/images/ribbon-bw-bkgd-graphic.png'),
      url('assets/images/footer-newsletter-bkgd.png');
    background-size: 500px, cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-position: calc(50% + 350px) 50%, 50% center;
}

.hero.hero-detail.red {
    background:
      url('assets/images/ribbon-red.png'),
      url('assets/images/footer-newsletter-bkgd.png');
    background-size: 500px, cover;
    background-repeat: no-repeat;
    background-blend-mode: normal, multiply;
    background-position: calc(50% + 350px) 50%, 50% center;
}

.hero.hero-detail .title-container {
    display: flex;
    align-items: center;
    flex-direction: row;
    max-width: 1340px;
    width: 100%;
    padding: 60px;
    text-align: left;
    gap: 40px;
}

.hero.hero-detail .title-container .post-thumbnail {
    flex: 0 0 40%;
    margin-left: auto;
}

.hero.hero-detail .title-container .post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Archive Search Page Styling */

main.archive-container {
    display: flex;
    gap: 5%;
}

main.archive-container .archive-filter-container {
    flex: 0.3;
    display: block;
}

main.archive-container .archive-results-container {
    flex: 0.7;
}

main.archive-container .archive-filter-container form {
    background-color: transparent;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: normal;
    padding: 0px;
}

main.archive-container .archive-filter-container form p.subhead {
    margin: 0px;
}

main.archive-container .toggle-filter-button {
    display: none;
}

form fieldset {
    width: 100%;
    border: none;
    padding: 0px;
    margin: 0px;
}

form fieldset.checkbox label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 18px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

form fieldset.checkbox label input[type=checkbox] {
    /* flex: 0 1 auto; */
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Hide the browser's default checkbox */
form fieldset.checkbox label input[type=checkbox] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    border: 2px solid #373737;
}
  
/* When the checkbox is checked, add a blue background */
form fieldset.checkbox label input[type=checkbox]:checked ~ .checkmark {
    background-color: #BF2D21;
}
  
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
/* Show the checkmark when checked */
form fieldset.checkbox label input[type=checkbox]:checked ~ .checkmark:after {
    display: block;
}
  
/* Style the checkmark/indicator */
form fieldset.checkbox label .checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* =============
   RADIO Buttons
   =============
   Make radio inputs look identical to your styled checkboxes.
*/

/* Hide the native radio input */
form fieldset.checkbox label input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Use the same .checkmark as the checkbox */
form fieldset.checkbox label .checkmark {
    position: absolute;
    top: -5px;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 3px; /* keep it square (3px) if you want them the same as your checkboxes */
    border: 2px solid #373737;
    transition: background-color 0.2s ease;
}

/* When the radio is checked, show the red background */
form fieldset.checkbox label input[type=radio]:checked ~ .checkmark {
    background-color: #BF2D21;
}

/* The checkmark (the white "tick") is hidden by default */
form fieldset.checkbox label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Show the white checkmark when radio is checked */
form fieldset.checkbox label input[type=radio]:checked ~ .checkmark:after {
    display: block;
}

main.archive-container .tag-category, main .tag-issue-area-container {
    margin: 5px;
}

main.archive-container .subhead {
    margin: 0px 0px 20px 0px;
}

main.archive-container .archive-results-tags {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #DCD5C7;
}

main.archive-container article {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #DCD5C7;
}

/* If the article does NOT have a thumbnail, hide the direct child anchor (the image link) */
main.archive-container article:not(.has-post-thumbnail) > a {
    display: none;
}

/* Also, make the .content take full width */
main.archive-container article:not(.has-post-thumbnail) .content {
    flex: 1 1 100%;
}

main.archive-container .archive-results-container {
    width: 100%;
}

main.archive-container .archive-results-container .pagination .nav-links {
    display: flex;
}

main.archive-container article a {
    flex: 0 0 250px; /* fixes the width to 300px */
    margin-left: auto;
}

main.archive-container article a img {
    width: 100%;
    height: auto;
    object-fit: cover; /* crop the image if needed */
}

main.archive-container .archive-results-container .pagination .nav-links .page-numbers {
    display: flex;
    width: 52px;
    height: 52px;
    padding: 22px;
    justify-content: center;
    align-items: center;
    gap: 69px;

    font-family: MARTIN;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: 70%; /* 23.8px */
    text-transform: uppercase;
    text-decoration: none;
}

main.archive-container .archive-results-container .pagination .nav-links .page-numbers.dots:hover {
    color: #2C2C2C;
    background: transparent;
}

main.archive-container .archive-results-container .pagination .nav-links .page-numbers:visited {
    color: #2C2C2C;
}

main.archive-container .archive-results-container .pagination .nav-links .page-numbers.current, 
main.archive-container .archive-results-container .pagination .nav-links .page-numbers:hover {
    background: #BF2D21;
    color: #ffffff;
}

main.archive-container .archive-results-container .pagination .nav-links .prev span, 
main.archive-container .archive-results-container .pagination .nav-links .next span {
    display: inline-block;
    position: relative;
}

main.archive-container .archive-results-container .pagination .nav-links .prev span.arrow::after, 
main.archive-container .archive-results-container .pagination .nav-links .next span.arrow::after {
    position: absolute;
    height: 24px;
    width: 24px;
    content: "";
    transition: all .6s ease;
}

main.archive-container .archive-results-container .pagination .nav-links .next span.arrow.next::after {
    right: calc(50% - 11px);
    top: -12px;
}

main.archive-container .archive-results-container .pagination .nav-links .prev span.arrow.prev::after {
    right: calc(50% - 8px);
    top: 32px;
    transform: translateY(-180%) rotate(-180deg);
    -moz-transform: translateY(-180%) rotate(-180deg);
    -webkit-transform: translateY(-180%) rotate(-180deg);
    -o-transform: translateY(-180%) rotate(-180deg);
    -ms-transform: translateY(-180%) rotate(-180deg);
}

main.archive-container .archive-results-container .pagination .nav-links .prev span.arrow.prev::after, 
main.archive-container .archive-results-container .pagination .nav-links .next span.arrow.next::after {
    background: url(assets/images/arrow-black.svg) no-repeat;
    background-size: contain;
}

main.archive-container .archive-results-container .pagination .nav-links .prev:hover span.arrow.prev::after, 
main.archive-container .archive-results-container .pagination .nav-links .next:hover span.arrow.next::after {
    background: url(assets/images/arrow-white.svg) no-repeat;
    background-size: contain;
}

/* Sort dropdown styled like your checkbox rows */
main.archive-container .archive-filter-container form fieldset.select {
    margin: 0 0 18px 0;
}

/* Wrapper for custom arrow */
.select-wrap {
  position: relative;
}

/* Hide native arrows and style like your checkboxes */
.sort-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  max-width: 250px;      /* cap the control itself */
  width: 100%;           /* fill the wrapper up to the cap */
  background: #F4EFE3;              /* keep plain, arrow drawn via wrapper */
  border: 2px solid #373737;
  border-radius: 3px;

  padding: 12px 44px 10px 14px;  /* right pad for arrow */

  font-family: Metric, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #2C2C2C;
  text-transform: uppercase;
  cursor: pointer;
}

/* Remove the default arrow in old Edge/IE */
.sort-select::-ms-expand { display: none; }

/* Replace your current .select-wrap::after block with this */
.select-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 50%;
  right: 14px;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  background-color: #2C2C2C;                 /* ← arrow color (black) */
  -webkit-mask-image: url("assets/images/dropdown-carrot.svg");
  mask-image: url("assets/images/dropdown-carrot.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease;
}

/* Optional fallback for browsers without mask support */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .select-wrap::after {
    background: url("assets/images/dropdown-carrot.svg") no-repeat center / contain;
    filter: invert(1); /* white → black */
  }
}

/* Limit Sort dropdown width on desktop */
main.archive-container .archive-filter-container form fieldset.select .select-wrap {
  max-width: 250px;
  width: 100%;
  display: inline-block; /* prevents the wrapper from stretching to 100% */
}

/* Keep it full-width on mobile */
@media (max-width: 840px) {
  main.archive-container .archive-filter-container form fieldset.select .select-wrap,
  .sort-select {
    max-width: none;
    width: 100%;
  }
}

.staff-grid, .resource-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 100px;
}
.staff-item, .resource-item {
    flex: 0 0 calc(33% - 20px);
    box-sizing: border-box;
    text-align: left;
}
.staff-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    margin-bottom: 10px;
    text-decoration: none;
}
.staff-name, .resource-name {
    margin-bottom: 5px;
}
.staff-custom-title, .resource-custom-title {
    font-style: italic;
    margin-bottom: 0;
}
.resource-item {
    background-color: #F0E7D2;
    padding: 48px;
}
.resource-item .tag-issue-area-container {
    margin-left: 0px;
}

a.resource-item {
    text-decoration: none;
}

a.resource-item:hover {
    text-decoration: none;
    background-color: #E3B008;
}

.wp-post-image {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Careers page styling 17483 */
.youtube-embed div {
    aspect-ratio: 16 / 9;
    width: 100%;
    /* Optional: enforce max-width, if desired */
    /* max-width: 800px; */
    margin: 0px auto;
}

.youtube-embed div iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Current Job Openings section */
.currentopenings {
    margin-bottom: 50px;
}
.currentopenings p {
    width: 100%;
    text-align: center;
}
.currentopenings .rbox-opening-detail p {
    text-align: left;
}
.currentopenings .rbox-opening-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.currentopenings .rbox-opening-li {
    display: flex;
    padding: 48px;
    margin: 10px;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 calc(33% - 96px - 20px);
    align-self: stretch;
    border-radius: 3px;
    background: #F0E7D2;
}
.currentopenings a.rbox-opening-li-title {
    color: #2C2C2C;
    font-family: Metric;
    font-size: 29px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 34.8px */
}
.currentopenings .rbox-job-shortdesc {
    color: #2C2C2C;
    font-family: Metric;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}
.currentopenings .rbox-opening-position-info small {
    display: block;
}
.currentopenings .rbox-loading-gif {
    width: 20px;
    margin: 0px auto;
}
/* Contact Page */
.wpforms-container {
    background-color: #F0E7D2 !important;
    padding: 64px 48px !important;
}

.wpforms-container .wpforms-field-container {
    width: 100%;
}

.wpforms-container .wpforms-field-container label {
    font-family: Metric;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 18px */
    letter-spacing: 2.16px;
    text-transform: uppercase;
}

div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
div.wpforms-container-full button[type=submit]:hover, 
div.wpforms-container-full button[type=submit]:active, 
div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
    font-family: MARTIN;
    font-size: 29px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 43.5px */
    text-transform: uppercase;
    border-width: 1px;
    border-radius: 3px;
    background: #BE2E22;
    color: #fff;
}

div.wpforms-container-full button[type=submit]:not(:hover):not(:active),
div.wpforms-container-full button[type=submit]:hover, 
div.wpforms-container-full button[type=submit]:active, 
div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
    position: relative; /* Needed for positioning the pseudo-element */
    display: inline-block;
    margin: 10px 0px;
    align-items: center;
    padding: 0px 60px 0px 32px;
    text-decoration: none;
    text-align: center;
    font-family: MARTIN, sans-serif;
    font-size: 29px;
    font-style: normal;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.3s;
}

div.wpforms-container-full button[type=submit]::after,
div.wpforms-container-full button[type=submit]:not(:hover):not(:active)::after,
div.wpforms-container-full button[type=submit]:focus:after {
    content: '';
    position: absolute;
    top: 35%;
    right: 25px; /* Initial position off the button */
    left: auto;
    bottom: auto;
    border: none;
    transition: all 0.3s ease;
    width: 17px; /* Width of SVG */
    height: 17px; /* Height of SVG */
    background-image: url("assets/images/arrow-white.svg");
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-45deg);
    /* Ensure browser compatibility */
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}

div.wpforms-container-full .wpforms-confirmation-container-full, 
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #e0ffc700;
    border: 0px;
}

div.wpforms-container-full .wpforms-confirmation-container-full, 
div[submit-success]>.wpforms-confirmation-container-full {
    padding: 0px;
    margin: 0px;
}

/* Pop up Modal */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    display: none;
}
  
.modal-content {
    background-color: #F4EDDD;
    margin: 10% auto;
    padding: 20px;
    max-width: 400px;
    position: relative;
}

.modal-content input {
    height: 100%;
}
  
.close-modal {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
}

#pdfModalSignupForm {
    padding: 0px;
}

#pdfModalFormFields {
    display: flex;
    width: 100%;
}

#yourvoice-video-modal h5 {
    margin: 0px 0px 10px 0px;
}

.image-cards-main-container .image-cards-content h2, 
.image-cards-main-container .image-cards-content h5, 
.image-cards-main-container .image-cards-content p, 
.image-cards-main-container .image-cards-content .section-title {
    color: #fff;
}

/* Swiper Carousel Container */
.image-cards-content .swiper-carousel-container {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0px; /* Adjust padding as needed */
}

.image-cards-content .swiper-container {
    width: 100%;
    margin: 40px 0px;
    overflow: hidden;
    box-sizing: border-box;
}

.image-cards-content .swiper-container .swiper-wrapper, 
.image-cards-content .swiper-container .swiper-wrapper .swiper-slide {
    height: auto;
}

/* Card Styles */
.coc-image-cards-main-container .image-cards-content .card {
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding-bottom: 70px;
    height: 100%;
}

.image-cards-main-container .image-cards-content .card {
    background-color: #373737;
}

.image-cards-content .card:hover {
    cursor: grab;
    cursor: -moz-grab;
}

.image-cards-content .card:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
}

.image-cards-main-container .image-cards-content .card a {
    color: #fff;
    text-decoration: none;
}

.image-cards-main-container .image-cards-content .card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    height: 100%;
    overflow: hidden;
    padding-bottom: 70px;
}

/* Card Styling */
.image-cards-content .card img.card-image {
    width: 100%;
    height: 200px; /* Set the desired fixed height */
    object-fit: cover; /* Crop the image to fill the container */
    display: block;
}

.image-cards-content .card-content {
    padding: 20px;
    box-sizing: border-box;
}

.image-cards-content .tag-issue-area-container {
    position: absolute;
    margin-top: -35px;
}

.image-cards-content .button-arrow {
    position: absolute;
    right: 0px;
    bottom: 0px;
}

/* Call to Action Button */
.image-cards-content .section-cta {
    width: 100%;
    display: flex;
    justify-content: left; /* Center the button */
    padding: 0px;
}

.image-cards-content .swiper-button-next {
    margin-right: -60px;
}

.image-cards-content .swiper-button-prev {
    margin-left: -60px;
}

.image-cards-content .swiper-button-next,
.image-cards-content .swiper-button-prev {
    width: 36px;
    height: 36px;
}

/* Donate Page Styles */
.hero.hero-secondary.donate {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 250px;
    background:
        url('assets/images/donate-hero-graphic-1.png'),
        url('assets/images/donate-hero-graphic-2.png'),
        url('assets/images/footer-newsletter-bkgd.png');
    background-size: 20%, 20%, cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply, multiply, multiply;
    background-position: bottom left, top right, 50% center;
    overflow: visible;
}

footer.donate {
    position: relative;
    overflow-x: clip;
}

.donate .title-container h2 {
    color: #ffffff;
}

.donate .section-title {
    background-color: #2C2C2C;
    display: inline-block;
    padding: 12px 10px 7px 10px;
    margin-bottom: 0px;
}

.donate-footer-text {
    color: #ffffff;
    text-align: left;
    width: 65%;
}

.actblue-donate-form {
    position: absolute;
    top: 70px;
    left: calc(50% + 30px);
    width: calc(50% - 90px);
    max-width: 600px;
    margin-right: 60px;
    z-index: 99999;
}

.hero.hero-secondary.donate .title-container {
    max-width: 540px;
    width: calc(50% - 60px);
    padding: 60px;
    margin: 0px calc(50% + 60px) 0px auto;
}

.donate-page-graphic-container {
    position: relative;
}

.donate-page-graphic img {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.donate-page-graphic .alignright.size-large {
    margin: 0px;
}
.donate-reasons-container {
    margin: 0px;
}

.donate-reason {
    background-color: #F1E8D4;
    padding: 10px;
    gap: 0px;
}

.donate-reason div {
    align-content: center;
}

.donate-reason .wp-block-image.size-full {
    width: 20px;
    padding: 10px;
    border-radius: 20px;
    background-color: #fff;
    margin: auto;
}

details.wp-block-details {
    padding: 32px 0px;
    border-top: 1px solid #DCD5C7;
}

details.wp-block-details summary {
    color: #2C2C2C;
    font-family: Metric;
    font-size: 29px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 34.8px */
}

.donate-ribbon-graphic {
    width: 350px;
    position: absolute;
    top: -230px;
    right: -200px;
    z-index: 10;
}

.focus-area-page-container {
    background-color: #F1E8D4;
    padding: 40px 80px;
}

/* Make all Wordpress YouTube embeds full width of the container */
.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

blockquote {
    background-color: #F0E7D2;
    padding: 80px 90px;
    margin: 16px 0px;
    text-align: left;
}

blockquote p {
    color: #2C2C2C;
    font-family: Metric;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 116.667% */
}

blockquote p:first-of-type {
    position: relative;
}

blockquote p:first-of-type::before {
    content: "“"; /* Opening quote */
    position: absolute;
    padding-right: 10px;
    left: 0; /* starting point */
    top: 15px;
    transform: translateX(-100%); /* moves the quote fully to the left outside the text box */
    color: #BF2D21;
    font-size: 2.5em;
}

blockquote p:last-of-type::after {
    content: "”"; /* Closing quote */
    margin-left: 8px; /* Optional spacing */
}

cite {
    font-family: Metric;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}

/* Fix for the homepage hero title on mobile landscape view. */
@media (max-width: 940px) {
    .hero.hero-home .title-container .title {
        font-size: 84px;
    }
}

/* MOBILE BREAKPOINT */
@media (max-width: 840px) {
    body {
        background-color: #000000;
    }
    main {
        flex-direction: column;
        padding: 80px 30px;
    }
    
    .title {
        font-size: 74px;
        line-height: 70%; /* 51.8px */
    }
    h1 {
        font-size: 58px;
        line-height: 70%; /* 40.6px */
    }
    h2 {
        font-size: 42px;
        line-height: 70%; /* 29.4px */
    }
    h3 {
        font-size: 38px;
        line-height: 78%; /* 29.64px */
    }
    h4 {
        font-size: 32px;
        line-height: 78%; /* 24.96px */
    }
    h5 {
        font-size: 26px;
        line-height: 78%; /* 20.28px */
    }
    .subhead {
        font-size: 20px;
        line-height: 120%; /* 24px */
    }
    .subhead.large {
        font-size: 22px;
    }
    .card {
        font-size: 24px;
    }
    p.one, input {
        font-size: 18px;
    }
    
    p.two {
        font-size: 14px;
    }
    
    p.three {
        font-size: 20px;
    }
    /* Hide the desktop nav, show hamburger */
    .header-navigation {
        display: none;
    }

    .breadcrumb {
        position: relative; /* Needed for positioning the pseudo-element */
        display: inline-block;
        margin: 0px;
        align-items: center;
        transition: all 0.3s;
    
        font-family: Metric;
        color: #ffffff;
        font-size: 16px;
        font-style: normal;
        font-weight: 900;
        line-height: 70%; /* 14px */
        text-transform: uppercase;
        text-decoration: none;
        padding: 20px 0px 7px 25px;
    }
    
    .breadcrumb::before {
        top: 40%;
        width: 14px; /* Width of SVG */
        height: 14px; /* Height of SVG */
    }

    .hamburger-btn {
        display: flex;
        padding: 20px 12px;
        margin-right: 10px;
        background: #373737;
        border: none;
        cursor: pointer;
        z-index: 999;
    }
    .header-logo {
        margin: 40px 0px 0px 20px;
    }

    .header-logo img {
        width: 100px;
    }
    .hero.hero-home {
        height: calc(100vh - 100px);
    }
    .mobile-menu {
        background: #2C2C2C;
        min-height: calc(100vh - 149px);
        position: absolute;
        top: 55px; /* below the header */
        left: 0;
        right: 0;
        padding: 0px 0px 20px;
        display: block;
        z-index: 888;
    }

    /* Using the [hidden] attribute, we only show the menu if 'hidden' is removed. */
    .mobile-menu[hidden] {
        display: none; /* overrides the block style above */
    }

    .header-navigation-mobile {
        background: repeat url('assets/images/mobile-nav-bkgd.png');
        border-bottom: 1px solid #5B5B5B;
        padding-top: 55px;
    }
    
    .header-navigation-mobile .header-menu {
        display: flex;
        flex-direction: column;
        gap: 0px;
        list-style: none;
    }

    .header-navigation .donate-btn, .header-navigation-mobile .donate-btn {
        margin: 20px 40px;
        margin-right: 40px;
    }   

    /* optional: style links for mobile */
    .header-navigation-mobile .header-menu li a {
        display: flex;
        justify-content: space-between; /* text on left, arrow on right */
        align-items: center;
        position: relative; /* pseudo-element is absolutely positioned inside link? not strictly necessary with flex, but can help */
        color: rgba(255, 255, 255, 0.50);
        text-decoration: none;
        padding: 10px 10px 10px 20px;
        margin: 0px 40px;
        font-family: Metric;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        text-decoration: none;
        text-transform: uppercase;
    }

    .header-navigation-mobile .header-menu li a::after {
        content: "";
        display: inline-block;
        width: 30px;     /* Box width */
        height: 30px;    /* Box height */
        background-color: #BF2D21; /* The red box color */
        background-image: url("assets/images/arrow-white.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 10px 10px; /* scale arrow inside the box */
    
        opacity: 0;              /* Hide by default */
        transition: opacity 0.3s ease; /* Smooth fade-in */
    }

    .header-navigation-mobile .header-menu li a:hover {
        background: #373737;
        color: #fff;
    }

    .header-navigation-mobile .header-menu li a:hover::after {
        opacity: 1;
    }

    .header-navigation-mobile .header-menu li.current-menu-item a,
    .header-navigation-mobile .header-menu li.current-menu-ancestor a,
    .header-navigation-mobile .header-menu li.current_page_item a,
    .header-navigation-mobile .header-menu li.current_page_ancestor a {
        background: #373737;
        color: #fff;
    }

    .secondary-nav {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 40px;
    }

    .secondary-nav li {
        display: inline-block;
        margin-right: 1.5em;
    }

    .header-mobile-social {
        display: flex;
        align-self: stretch;
        padding: 40px;
        justify-content: start;
        align-items: center;
        gap: 0px;
        flex-shrink: 0;
        list-style-type: none;
        flex-wrap: wrap;
    }

    .header-mobile-social .social-title {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 25px;
        font-family: Metric;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%;
        text-decoration: none;
        text-transform: uppercase;
        color: #fff;
    }

    footer {
        background-position: -120px calc(100% - 520px);
        background-size: 200px;    
    }

    .footer-base-container {
        border-bottom: 56px solid #1C1C1C;
        background: #2C2C2C;
        padding: 30px;
        width: calc(100% - 60px);
    }

    .footer-base {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* Remove or reduce this gap so columns can shrink/grow */
        gap: 30px; /* for instance, less than 206px */
    }

    .footer-logo {
        margin: 0px auto;
    }

    /* The UL itself also flexes/grows */
    .footer-menu {
        height: 200px; 
    }

    .footer-donate-container {
        padding: 40px 20% 120px 30px;
    }
    
    .footer-donate-container h3 {
        margin: 0px 0px 20px;
    }

    footer .donor-section {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 30%;
    }

    footer .footer-donate-container {
        background-position: 110% bottom;
        background-size: 50%;
    }
    footer .avatar {
        width: 40px;
        height: 40px;
    }

    /* Overall Get In Touch banner container */
    footer .get-in-touch-banner {
        flex-direction: column;
        align-items: flex-end;
        padding: 22px 30px;
        width: calc(100% - 125px);
        margin: 30px;
        background-size: 50%;
        background-position: 100% 30px;    
    }

    footer .banner-text {
        margin: 0px;
        max-width: 100%;
        min-width: 0px;
    }

    footer .banner-title, footer .banner-text {
        text-align: left;
        width: 100%;
    }

    footer .banner-title h2 {
        margin: 13px 0px 0px 0px;
    }

    footer .newsletter-section {
        flex-direction: column;
        background-size: cover, 140%;
        background-position: 50%, 50% calc(100% + 200px);
        width: calc(100% - 125px);
        padding: 0px 30px;
        margin: 0px;
    }
    
    footer .newsletter-image {
        background-position: top center;
        /* background-size: cover; */
        /* padding: 40px; */
    }

    footer .newsletter-image {
        width: calc(100% - 20px);
        padding: 0px 0px 40px 0px;
    }

    /* form {
        padding: 8px 10px 8px 24px;
        justify-content: flex-end;
        gap: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    } */
    .footer-navigation {
        width: 100%;
        max-width: none;
    }

    #formFields {
        flex-direction: column;
        align-items: flex-end;
    }

    input {
        width: 100%;
    }
    
    input.divider {
        border-left: 0px solid rgba(0, 0, 0, 0.10);
    }

    body .is-layout-flex {
        display: block;
    }

    .hero.hero-secondary {
        gap: 0px;
        justify-content: normal;

        background: url('assets/images/ribbon-bw-bkgd-graphic.png'), url('assets/images/footer-newsletter-bkgd.png');
        background-size: 300px, cover;
        background-repeat: no-repeat;
        background-position: calc(50% - 150px) calc(100% + 10px), 50%;
    }
    
    .hero.hero-secondary div.people-circle {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 400px;
        background: radial-gradient(67.95% 41.98% at 29.86% 44.46%, #FFBC11 68%, #FF9C11 100%);
        bottom: -100px;
        left: 10%;
    }
        
    .hero.hero-secondary img.people {
        position: absolute;
        width: 450px;
        bottom: 0;
        left: 10%;
    }
    
    .hero.hero-secondary .title-container {
        padding: 50px 25px 0px 25px;
        width: calc(100% - 60px);
    }

    .hero.hero-secondary .subtitle {
        padding: 0px;
        margin-bottom: 110%;
        width: 100%;
    }
    
    .hero.hero-detail {
        min-height: 0px;
        background-size: 400px, cover;
        background-position: calc(100% + 200px) calc(50% + 50px), 50% center;
    }
    
    .hero.hero-detail .title-container {
        padding: 60px 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
        
    .hero.hero-detail .title-container p.one  {
        width: 100%;
    }

    .hero.hero-detail .title-container .title-container-text {
        align-items: flex-start;
    }

    .staff-item, .resource-item {
        flex: 0 0 calc(50% - 20px); 
    }
    .resource-item {
        padding: 30px;
    }
    .currentopenings .rbox-opening-li {
        padding: 30px;
        flex: 0 0 calc(50% - 60px - 20px);
    }
    .site-main {
        flex-direction: column-reverse;
    }
    
    .site-main > article {
        width: 100%;
    }
      
    .site-main.sidebar-layout .coc-press-component, 
    .site-main.sidebar-layout .image-cards-main-container,
    .site-main.sidebar-layout .coc-featured-cta,
    .site-main.sidebar-layout .resource-grid,
    .site-main.sidebar-layout .coc-related-resources,
    .site-main.sidebar-layout .coc-about-video-component,
    .site-main.sidebar-layout .coc-cta-component, 
    .site-main.sidebar-layout .coc-image-cards-main-container {
        left: 50%;
    }
      
    /* Remove left margin, optionally add top margin for spacing. */
    .sidebar {
        width: 100%;
        margin-left: 0;
        margin-top: 20px; /* so it sits below the article with some space */
    }

    .site-main.sidebar-layout .resource-grid {
        width: calc(100vw - 60px);
        padding: 30px;
    }   
    .site-main.sidebar-layout .coc-related-resources-content .resource-grid {
        width: auto;
        padding: 0px;
    }   
    .wpforms-container {
        padding: 30px 20px !important;
    }
    .donate-footer-text {
        width: 100%;
    }    
    .actblue-donate-form {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 60px);
        /* max-width: 800px; */
        margin: 30px;
    }
    .donate-page-graphic img {
        position: relative;
        bottom: 0px;
        right: -100px;
    }
    .hero.hero-secondary.donate {
        gap: 0px;
    }
    .hero.hero-secondary.donate .title-container {
        width: calc(100% - 60px);
        padding: 30px;
    }    
    .is-layout-flex.donate-reasons-container {
        display: inline-block;
    }
    .is-layout-flex.donate-reason {
        display: flex;
    }
    details.wp-block-details {
        padding: 32px 0px;
        border-top: 1px solid #DCD5C7;
    }
    details.wp-block-details summary {
        font-size: 20px;
    }
    .donate-ribbon-graphic {
        display: none;
    }
    main.archive-container article {
        flex-direction: column-reverse;
    }
    main.archive-container article a {
        flex: 1;
    }
    main.archive-container .archive-filter-container {
        position: fixed;
        top: 0px;
        right: -100vw;
        z-index: 99999;
        background: #F4EDDD;
        width: calc(100vw - 60px);
        height: calc(100vh - 80px);
        padding: 40px 20px;
        overflow: scroll;
        transition: right 0.6s ease;
        /* display: none; */
    }
    main.archive-container .archive-filter-container.open {
        right: 0;
    }
    main.archive-container .toggle-filter-button.open,
    main.archive-container .toggle-filter-button.close {
        position: relative;
        padding-left: 24px;
        display: block;
    }
    main.archive-container .toggle-filter-button.open {
        text-decoration: underline;
        float: right;
        margin: 0px;
    }
    main.archive-container .toggle-filter-button.open::before {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px; /* Initial position off the button */
        width: 19px; /* Width of SVG */
        height: 19px; /* Height of SVG */
        background-image: url("assets/images/filter-funnel-icon.png");
        background-size: contain;
        background-repeat: no-repeat;
    }
    main.archive-container .toggle-filter-button.open.filters-active::before {
        width: 22px; /* Width of SVG */
        height: 22px; /* Height of SVG */
        background-image: url("assets/images/filter-funnel-icon-checked.png");
    }
    .focus-area-page-container {
        padding: 40px 30px;
    }    
}

@media (max-width: 480px) {
    .staff-item, .resource-item {
        flex: 0 0 100%; 
    }
    .currentopenings .rbox-opening-li {
        margin: 10px 0px;
        flex: 0 0 calc(100% - 60px);
    }
    .site-main.sidebar-layout .resource-grid {
        width: calc(100vw - 60px);
        padding: 30px;
    }
}

.coc-jobs { margin: 2rem 0; }
.coc-jobs__title { margin-bottom: 1rem; }
.coc-jobs__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.coc-jobs__item { padding: 3rem; background-color: #373737; }
.coc-job__title { margin: 0 0 .25rem; color: #ffffff; }
.coc-job__meta { display: flex; gap: 1rem; font-size: .9rem; color: #ffffff; margin: .25rem 0 .75rem; padding: 0; list-style: none; }
.coc-job__desc { margin: .5rem 0 1rem; color: #ffffff; }
.coc-job__meta-item { color: #ffffff; }
.coc-jobs__empty { text-align: center; }
.coc-jobs.error { color: #b91c1c; }

html {
  scroll-behavior: smooth;
}