/*
 * Static-build supplement.
 *
 * theme.css is the client's design and divi-base.css reproduces the Divi
 * primitives it sits on. What is left are the layout skeletons that WordPress
 * plugins supplied at runtime - the carousels' track markup, the WooCommerce
 * loop grid, the product-table plugin, Contact Form 7 - plus the few surfaces
 * this static build owns (the photo lightbox, the API-backed forms). The
 * client's own rules in theme.css still do the styling; nothing here restates
 * a colour, typeface, or size the theme already sets.
 */

/* --------- carousels rendered as their static, all-items-visible form ------ */
/* The homepage events carousel (Owl), news slider (Owl), sponsor strip
   (Swiper) and Marcus' Impact band (Slick) all scrolled on production. A
   static page shows every slide instead, laid out on the same track. */
.mec-event-carousel-type3 { display: flex; flex-wrap: wrap; gap: 30px; }
.mec-event-carousel-type3 > .mec-event-article { flex: 1 1 0; min-width: 0; }
.event-carousel-type3-head { position: relative; }
.event-carousel-type3-head .mec-event-image img { display: block; width: 340px; height: 340px; max-width: 100%; object-fit: cover; border-radius: 20px; }

.mec-event-grid-classic .row { display: flex; flex-wrap: wrap; margin-bottom: 40px; }
.mec-event-grid-classic .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.mec-event-grid-classic .mec-event-article { position: relative; }
.mec-event-grid-classic .mec-event-image img { display: block; }

.app-slider-wrap .aps-slider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 50px; row-gap: 40px; }
.app-slider-wrap .aps-slider .item { min-width: 0; }
.app-slider-wrap .aps_main { display: flow-root; }

.sponsor-strip ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; margin: 0; padding: 0; list-style: none; }
.sponsor-strip li { flex: 0 1 auto; margin: 0; }
.sponsor-strip img { display: block; max-height: 90px; width: auto; }

.impact_slider { list-style: none; padding: 0; margin: 0; }
.impact_slider > li { list-style: none; }
.home-impact-list-img img { display: block; width: 100%; height: auto; }

.home-post-list-main, .get-involved-post-list-main { display: flow-root; }

/* The homepage hero video: production played it through the html5-video-player
   plugin's chrome-less autoplaying surface. */
.home-hero-video { display: block; width: 100%; height: auto; }

/* -------------------------------------------- WooCommerce archive + product */
.woocommerce-products-header { padding-top: 0; }
.woocommerce-result-count { float: left; margin: 0 0 20px; }
.woocommerce-ordering { float: right; margin: 0 0 20px; }
.woocommerce-ordering select { padding: 8px 10px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; }
/* WooCommerce's own four-across float layout does the work; the plugin marks
   the row end with a .last class this build does not emit, so the wrap point
   is expressed positionally instead. */
.woocommerce ul.products li.product:nth-child(4n) { margin-right: 0; }
.woocommerce ul.products li.product:nth-child(4n+1) { clear: both; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 14px 0 4px; font-family: "Inter", sans-serif; font-size: 17px; line-height: 24px; font-weight: 700; color: #141414; }
.woocommerce ul.products li.product .price { font-family: "Inter", sans-serif; font-weight: 700; color: #141414; }
.woocommerce ul.products li.product img { border-radius: 12px; }
.woocommerce-pagination ul { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.woocommerce-pagination li { list-style: none; }
.woocommerce-pagination .page-numbers { display: inline-block; min-width: 38px; padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 10px; text-align: center; font-family: "Inter", sans-serif; font-weight: 700; color: #141414; }
.woocommerce-pagination .page-numbers.current { background: #ffc72c; }

.single-product .woocommerce-product-gallery img { border-radius: 12px; }
.single-product .product_title { font-family: "Inter", sans-serif; color: #141414; }
.single-product .price { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 700; color: #141414; padding-bottom: 12px; }
.single-product .product_meta { padding-top: 16px; font-family: "Inter", sans-serif; }
.single-product .etmfw_expiration_message { font-family: "Inter", sans-serif; font-weight: 700; color: #b3261e; }
.donation-amount-field { display: grid; gap: 6px; max-width: 320px; margin-bottom: 18px; font-family: "Inter", sans-serif; }
.donation-amount-field select { padding: 10px; border: 1px solid #d9d9d9; border-radius: 8px; background: #fff; }
.woocommerce-tabs { clear: both; padding-top: 50px; }
.woocommerce-tabs ul.tabs { margin: 0 0 20px; padding: 0; list-style: none; }
.woocommerce-tabs ul.tabs li { list-style: none; font-family: "Inter", sans-serif; font-weight: 700; }
.related.products { padding-top: 50px; }

/* ------------------------------------------- WooCommerce Product Table Lite */
.wcpt-table { width: 100%; border-collapse: collapse; font-family: "Inter", sans-serif; }
.wcpt-table th, .wcpt-table td { padding: 18px 16px; border-bottom: 1px solid #e6e6e6; text-align: left; vertical-align: top; }
.wcpt-heading .wcpt-text { font-size: 20px; font-weight: 700; color: #141414; }
.wcpt-title { display: inline; font-weight: 700; color: #141414; }
/* No white-space override: the live table computes white-space: normal on
   .wcpt-content (verified in-browser 2026-08-29; no pre-line rule exists in
   the plugin, theme, or inline CSS), so the raw newlines the plugin prints
   between "-item" lines collapse and the description flows as one wrapped
   paragraph. A pre-line rule here would draw line breaks live does not have. */
.wcpt-content { padding-top: 8px; }
.wcpt-price { font-size: 18px; font-weight: 700; color: #141414; white-space: nowrap; }
/* The label inside the BUY NOW button. WC Product Table Lite lays it out from
   the per-table CSS it generates under hashed class names (.wcpt-1704908233853
   and friends), which this build does not reproduce; these are the values the
   live table computes for that label, so the button keeps production's size. */
.wcpt-button .wcpt-button-label { vertical-align: middle; margin-right: 3px; }
.wcpt-button .wcpt-item-row { display: inline-block; }
.wcpt-button .wcpt-text { display: inline-block; vertical-align: middle; margin-right: 3px; font-size: 18px; }

/* ------------------------------------------------------- category archive -- */
.archive .et_pb_post { margin-bottom: 50px; }
.archive .et_pb_post img { display: block; width: 100%; height: auto; border-radius: 15px; }
.archive .entry-title { padding-top: 16px; font-family: "Inter", sans-serif; color: #141414; }
.archive .post-meta { font-family: "Inter", sans-serif; font-size: 14px; }
.archive .page-title { padding-bottom: 30px; font-family: "Inter", sans-serif; color: #141414; }
.mec-container > h1 { padding: 190px 0 30px; font-family: "Inter", sans-serif; color: #141414; text-align: center; }

/* ------------------------------------------------------------- galleries -- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery button { overflow: hidden; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px; background: #e6e5df; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery button:hover img { transform: scale(1.035); }
.photos-gallery-section { padding-top: 60px; }
.content-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block: 30px; }
.content-gallery figure { overflow: hidden; aspect-ratio: 1; margin: 0; border-radius: 12px; background: #e6e5df; }
.content-gallery img { width: 100%; height: 100%; object-fit: cover; }
.content-video { width: 100%; margin-block: 30px; border-radius: 15px; background: #111; }

dialog { width: min(92vw, 76rem); max-height: 92vh; padding: 0; border: 0; border-radius: 15px; background: #141414; color: #fff; }
dialog::backdrop { background: rgb(0 0 0 / 78%); }
dialog img { max-height: 82vh; width: 100%; object-fit: contain; }
dialog button { position: absolute; top: 12px; right: 12px; border: 0; border-radius: 999px; padding: 10px 16px; background: #ffc72c; color: #141414; font-family: "Inter", sans-serif; font-weight: 700; cursor: pointer; }

/* ----------------------------------------------------------------- forms -- */
/* Contact Form 7 supplied this styling on production; the fields, labels and
   submit text are the client's, the layout here is ours. */
.form-card { max-width: 900px; margin: 0 auto; padding: 30px 0 0; font-family: "Inter", sans-serif; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: grid; gap: 6px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-weight: 700; color: #141414; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #a9a9a9; border-radius: 10px; background: #fff; color: #141414; }
.form-field textarea { min-height: 150px; resize: vertical; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.form-actions button { border: 0; cursor: pointer; }
.form-actions button:disabled { opacity: .6; cursor: wait; }
.form-status { min-height: 1.5em; font-weight: 700; }
.button { display: inline-block; padding: 14px 28px; border-radius: 14px; background: linear-gradient(to left, #ffc72c 50%, #141414 50%) right; background-size: 201%; transition: .5s ease-out; color: #323439; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 700; line-height: 20px; text-transform: uppercase; }
.button:hover { background-position: left; color: #ffc72c; }
.legacy-form { display: grid; gap: 18px; max-width: 640px; margin-bottom: 30px; font-family: "Inter", sans-serif; }
.legacy-form label { font-weight: 700; color: #141414; }
.legacy-form textarea, .legacy-form input, .legacy-form select { width: 100%; max-width: 420px; min-height: 52px; padding: 12px 14px; border: 1px solid #a9a9a9; border-radius: 10px; background: #fff; color: #141414; }
.legacy-form textarea { min-height: 150px; resize: vertical; }
.legacy-acceptance { display: flex; gap: 10px; align-items: baseline; }
.legacy-acceptance input { width: auto; min-height: 0; }
.legacy-form-note { padding-top: 10px; }
/* WordPress's default page template has no banner, so these pages start
   underneath the fixed header on production; they are padded clear here. */
#left-area { padding-top: 190px; }
.et_full_width_page #left-area, .et_no_sidebar #left-area { float: none; width: 100% !important; }

/* Pages whose source content is plain text rather than markup. */
.legal { white-space: pre-line; }
.plain-copy, .legal { font-family: "Inter", sans-serif; color: #141414; }

@media only screen and (max-width: 1179px) {
  .gallery, .content-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media only screen and (max-width: 980px) {
  .mec-event-carousel-type3 { display: block; }
  .mec-event-carousel-type3 > .mec-event-article { margin-bottom: 30px; }
  .mec-event-grid-classic .col-md-4 { flex: 0 0 100%; max-width: 100%; }
  .app-slider-wrap .aps-slider { grid-template-columns: 1fr; }
  .woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: 100%; }
}

@media only screen and (max-width: 767px) {
  .gallery, .content-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .woocommerce-result-count, .woocommerce-ordering { float: none; }
  .woocommerce-products-header, #left-area { padding-top: 120px; }
  .mec-container > h1 { padding-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Titles production does not print: kept in the document outline, drawn nowhere. */
.page_title--hidden { padding: 0; margin: 0; }