/* ==========================================================================
   DEAF SANTA CLAUS FOUNDATION — Consolidated CSS
   ==========================================================================

   File location:  /wp-content/themes/hello-elementor-child/dscf.css
   Loaded by:      functions.php (wp_enqueue_style at priority 100)

   TABLE OF CONTENTS
   -------------------------------------------------------------------------
   GLOBAL
     1.   Snowfall animation
     2.   Main nav underlines + Donate button
     3.   Hero (badge dot, underline, italic gold)
     4.   Garland divider
     5.   Tile top-bar accents
     6.   News card date badge
     7.   Video card
     8.   Footer pin-to-bottom (layout fix)
        Hero right-column overlays
        Hover lift (tiles + news cards)

   COMPONENTS
     9.   Elementor Posts widget (Homepage News & Events)
     10.  Reusable page hero (Search, Sitemap, Privacy, etc.)
     11.  404 page
     12.  Single post template (article body, sidebar, related posts)
     13.  Categories & Tags shortcodes
     14.  Search page
   -------------------------------------------------------------------------

   BRAND COLOR REFERENCE
     Evergreen        #1a3d2e
     Evergreen Dark   #0F2A1E
     Evergreen Deep   #0A1D14
     Cranberry        #b8232d
     Cranberry Dark   #8A1820  (hover)
     Gold Light       #e3b85a
     Gold (legible)   #c79a30  (for use on cream backgrounds)
     Cream / Snow     #faf5ec
     Cream Warm       #F3EAD7
     Ink              #1A1410
     Ink Soft         #4A3F36
     Accent Green     #2D8659
     Accent Orange    #e89030
     Accent Yellow    #e8c441
     Accent Red       #d94a3d
   ========================================================================== */


/* ============================================================
   1 — SNOWFALL
   ============================================================ */
.dscf-snow-container {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999; overflow: hidden;
}
.dscf-snowflake {
  position: absolute; top: -10px; color: white; user-select: none;
  animation: dscf-snowfall linear infinite;
}
@keyframes dscf-snowfall {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(110vh) translateX(40px) rotate(360deg); }
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .dscf-snowflake { display: none; }
}


/* ============================================================
   2 — MAIN NAV UNDERLINES + DONATE BUTTON
   ============================================================ */
.dscf-mainnav-link a {
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease !important;
  padding-bottom: 6px !important;
}
.dscf-mainnav-link.accent-experience a:hover { border-bottom-color: #d94a3d !important; color: #d94a3d !important; }
.dscf-mainnav-link.accent-film a:hover       { border-bottom-color: #e89030 !important; color: #e89030 !important; }
.dscf-mainnav-link.accent-shop a:hover       { border-bottom-color: #e8c441 !important; color: #b89800 !important; }
.dscf-mainnav-link.accent-involved a:hover   { border-bottom-color: #2d8659 !important; color: #2d8659 !important; }

/* Donate button as a menu item */
.dscf-donate-btn a {
  background: #b8232d !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 12px 22px !important;
  margin-left: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-bottom: none !important;
  box-shadow: 0 6px 20px rgba(184, 35, 45, 0.4);
  transition: all 0.2s ease !important;
}
.dscf-donate-btn a:hover {
  background: #8a1820 !important;
  color: #ffffff !important;
  border-bottom: none !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(184, 35, 45, 0.5);
}
.dscf-mainnav-link.dscf-donate-btn a {
  border-bottom: none !important;
}
.dscf-donate-btn a::before {
  content: '\2665';
  display: inline-block;
  margin-right: 8px;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 0.2s ease;
}
.dscf-donate-btn a:hover::before {
  transform: scale(1.15);
}


/* ============================================================
   3 — HERO
   ============================================================ */
.dscf-hero-badge::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: #e3b85a;
  border-radius: 50%;
  animation: dscf-pulse 2s infinite;
}
@keyframes dscf-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0   rgba(227, 184, 90, 0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 8px rgba(227, 184, 90, 0);   }
}
.dscf-underline {
  position: relative;
  display: inline-block;
}
.dscf-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: #b8232d;
  border-radius: 2px;
}
.dscf-italic-gold {
  color: #e3b85a;
  font-style: italic;
  font-weight: 400;
  font-family: Fraunces, serif;
}


/* ============================================================
   4 — GARLAND DIVIDER
   ============================================================ */
.dscf-garland {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: #faf5ec;
  clip-path: polygon(
    0 100%, 0 60%, 5% 30%, 10% 60%, 15% 20%, 20% 55%, 25% 35%,
    30% 65%, 35% 25%, 40% 50%, 45% 30%, 50% 60%, 55% 25%, 60% 55%,
    65% 35%, 70% 65%, 75% 25%, 80% 50%, 85% 30%, 90% 60%, 95% 20%,
    100% 50%, 100% 100%
  );
}


/* ============================================================
   5 — TILE TOP-BAR ACCENT
   ============================================================ */
.dscf-tile {
  position: relative;
  overflow: hidden;
}
.dscf-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  transition: height 0.3s ease;
}
.dscf-tile:hover::before {
  height: 12px;
}
.dscf-tile.accent-experience::before { background: #d94a3d; }
.dscf-tile.accent-film::before       { background: #e89030; }
.dscf-tile.accent-shop::before       { background: #e8c441; }
.dscf-tile.accent-involved::before   { background: #2d8659; }
.dscf-tile.accent-cranberry::before  { background: #b8232d; }
.dscf-tile.accent-evergreen::before  { background: #1a3d2e; }


/* ============================================================
   6 — NEWS CARD DATE BADGE
   ============================================================ */
.dscf-news-card-img {
  position: relative;
}
.dscf-news-card-date {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #ffffff;
  color: #b8232d;
  padding: 8px 14px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 60px;
  z-index: 2;
}
.dscf-news-card-date .day {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.dscf-news-card-date .month {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 2px;
  color: #4a3f36;
}


/* ============================================================
   7 — VIDEO CARD
   ============================================================ */
.dscf-video-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.dscf-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #b8232d;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.dscf-video-card:hover .dscf-video-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ffffff;
}
.dscf-video-card-asl {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #c89a3c;
  color: #0a1d14;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 2;
}
.dscf-video-card-cc {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 2;
}


/* ============================================================
   8 — PIN FOOTER TO BOTTOM
   ============================================================ */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
body > .elementor-location-header { flex-shrink: 0; }
body > .elementor-location-footer { margin-top: auto; flex-shrink: 0; }
body > #page,
body > .site,
body > main,
body > .elementor-location-single,
body > .elementor-location-archive,
body > .elementor-location-page,
body > [data-elementor-type="wp-page"],
body > [data-elementor-type="wp-post"] {
  flex: 1 0 auto;
}


/* ============================================================
   HERO RIGHT-COLUMN OVERLAYS
   ============================================================ */
.dscf-hero-visual {
  position: relative;
}
.dscf-featured-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #faf5ec;
  color: #1a1410;
  padding: 10px 18px;
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.dscf-featured-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #b8232d;
  border-radius: 50%;
  flex-shrink: 0;
}
.dscf-meet-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0a1d14;
  color: #faf5ec;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.dscf-meet-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e3b85a;
  color: #0a1d14;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dscf-meet-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.dscf-meet-eyebrow {
  color: #e3b85a;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dscf-meet-sub {
  color: rgba(250, 245, 236, 0.9);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-top: 2px;
}
.dscf-meet-caption-link {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 3;
  text-decoration: none;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dscf-meet-caption-link:hover {
  transform: translateY(-2px);
}
.dscf-meet-caption-link:hover .dscf-meet-caption {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}
.dscf-meet-caption-link:hover .dscf-meet-eyebrow {
  color: #f3cc6e;
}
.dscf-meet-caption-link .dscf-meet-caption {
  position: static;
  bottom: auto; left: auto; right: auto;
}


/* ============================================================
   HOVER LIFT — Tiles + News Cards
   ============================================================ */
.dscf-tile {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dscf-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.dscf-news-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dscf-news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.dscf-tile::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.dscf-tile.accent-experience::after { background: rgba(217, 74, 61, 0.08); }
.dscf-tile.accent-film::after       { background: rgba(232, 144, 48, 0.08); }
.dscf-tile.accent-shop::after       { background: rgba(232, 196, 65, 0.10); }
.dscf-tile.accent-involved::after   { background: rgba(45, 134, 89, 0.08); }
.dscf-tile.accent-cranberry::after  { background: rgba(184, 35, 45, 0.08); }
.dscf-tile.accent-evergreen::after  { background: rgba(26, 61, 46, 0.08); }
.dscf-tile .elementor-widget-icon-box {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   9 — ELEMENTOR POSTS WIDGET (Homepage News & Events)
   Pairs with dscf-elementor-cards.php (data-day, data-month, data-primary-cat)
   ========================================================================== */
.elementor-widget-posts .elementor-post,
.elementor-widget-posts article.elementor-post {
  position: relative;
  background: #faf5ec;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(26, 20, 16, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.elementor-widget-posts .elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(26, 20, 16, 0.12);
}

.elementor-widget-posts .elementor-post__thumbnail__link {
  display: block;
  position: relative;
  overflow: hidden;
}

.elementor-widget-posts .elementor-post__thumbnail {
  aspect-ratio: 16 / 9;
  background: transparent;
}

.elementor-widget-posts .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}


/* Date badge overlay — pseudo-elements from data-day / data-month */
.elementor-widget-posts .elementor-post[data-day]::before,
.elementor-widget-posts .elementor-post[data-day]::after {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: #faf5ec;
  color: #b8232d;
  font-family: "Fraunces", Georgia, serif;
  text-align: center;
  display: block;
}

.elementor-widget-posts .elementor-post[data-day]::before {
  content: attr(data-day);
  top: 14px;
  left: 14px;
  min-width: 56px;
  padding: 8px 10px 2px;
  border-radius: 10px 10px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
}

.elementor-widget-posts .elementor-post[data-month]::after {
  content: attr(data-month);
  top: calc(14px + 36px);
  left: 14px;
  min-width: 56px;
  padding: 2px 10px 6px;
  border-radius: 0 0 10px 10px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4a4036;
  line-height: 1;
}

.elementor-widget-posts .elementor-post:not([data-day])::before,
.elementor-widget-posts .elementor-post:not([data-month])::after {
  display: none;
}


/* Text section */
.elementor-widget-posts .elementor-post__text {
  padding: 24px 24px 28px;
}

.elementor-widget-posts .elementor-post__meta-data {
  display: none;
}


/* Category label — clickable <a class="dscf-cat-link"> injected by PHP.
   Replaces the old data-primary-cat pseudo-element approach so categories
   are real, clickable links to /category/<slug>/. */

.dscf-cat-link {
  display: inline-block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #1a3d2e;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.dscf-cat-link:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* Per-category accent colors */
.dscf-cat-link.is-cat-appearances   { color: #1a3d2e; }
.dscf-cat-link.is-cat-film          { color: #e89030; }
.dscf-cat-link.is-cat-foundation    { color: #c79a30; }
.dscf-cat-link.is-cat-resources     { color: #1a3d2e; }
.dscf-cat-link.is-cat-asl-culture   { color: #2d8659; }
.dscf-cat-link.is-cat-press-release { color: #b8232d; }
.dscf-cat-link.is-cat-letters       { color: #b8232d; }


/* Title */
.elementor-widget-posts .elementor-post__title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
  color: #1a1410;
}

.elementor-widget-posts .elementor-post__title a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.elementor-widget-posts .elementor-post__title a:hover {
  color: #b8232d;
}


/* Excerpt */
.elementor-widget-posts .elementor-post__excerpt {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #4a4036;
  margin: 0 0 16px;
}

.elementor-widget-posts .elementor-post__excerpt p {
  margin: 0;
}


/* Read More link — cranberry base, darker cranberry on hover.
   Unified across homepage, archive, and single-post cards. */
.elementor-widget-posts .elementor-post__read-more,
.elementor-widget-posts a.elementor-post__read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: #b8232d !important;
  text-decoration: none !important;
  transition: gap 200ms ease, color 200ms ease;
}

.elementor-widget-posts .elementor-post__read-more::after {
  content: "→";
  transition: transform 200ms ease;
}

.elementor-widget-posts .elementor-post__read-more:hover {
  color: #8a1820;
  gap: 10px;
}


/* Posts widget responsive */
@media (max-width: 768px) {
  .elementor-widget-posts .elementor-post__text {
    padding: 18px 18px 22px;
  }
  .elementor-widget-posts .elementor-post__title {
    font-size: 19px;
  }
  .elementor-widget-posts .elementor-post[data-day]::before {
    min-width: 48px;
    font-size: 24px;
    top: 10px;
    left: 10px;
  }
  .elementor-widget-posts .elementor-post[data-month]::after {
    top: calc(10px + 30px);
    left: 10px;
    min-width: 48px;
    font-size: 10px;
  }
}


/* --- Sidebar Posts widget override ------------------------------------------
       Shows the SAME date badge + category label as homepage cards, but
       WITHOUT the featured image, excerpt, or read-more link. Title-led
       compact list for the sidebar.

       Date badge and category label CSS comes from section 9 above —
       this block only adjusts spacing and hides the parts we don't want.
   ---------------------------------------------------------------------------- */

/* Card container: smaller padding, no image space, leave room at top
   for the date badge to anchor to */
.dscf-post-sidebar .elementor-widget-posts .elementor-post,
.dscf-post-sidebar .elementor-widget-posts article.elementor-post {
  background: #faf5ec !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(26, 20, 16, 0.04) !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  overflow: visible !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
}

.dscf-post-sidebar .elementor-widget-posts .elementor-post:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(26, 20, 16, 0.08) !important;
}

/* Hide the featured image entirely */
.dscf-post-sidebar .elementor-widget-posts .elementor-post__thumbnail,
.dscf-post-sidebar .elementor-widget-posts .elementor-post__thumbnail__link {
  display: none !important;
}

/* Smaller date badge for the narrow sidebar — top-left of the card */
.dscf-post-sidebar .elementor-widget-posts .elementor-post[data-day]::before {
  top: 12px !important;
  left: 12px !important;
  min-width: 44px !important;
  padding: 6px 8px 1px !important;
  font-size: 20px !important;
  border-radius: 8px 8px 0 0 !important;
}

.dscf-post-sidebar .elementor-widget-posts .elementor-post[data-month]::after {
  top: calc(12px + 26px) !important;
  left: 12px !important;
  min-width: 44px !important;
  padding: 1px 8px 4px !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  border-radius: 0 0 8px 8px !important;
}

/* Text section — give it left padding to clear the date badge */
.dscf-post-sidebar .elementor-widget-posts .elementor-post__text {
  padding: 14px 14px 14px 70px !important;
  min-height: 64px !important;
}

/* Title styling — smaller than homepage */
.dscf-post-sidebar .elementor-widget-posts .elementor-post__title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1A1410 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.dscf-post-sidebar .elementor-widget-posts .elementor-post__title a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.dscf-post-sidebar .elementor-widget-posts .elementor-post__title a:hover {
  color: #B8232D !important;
}

/* Category label inside sidebar mini-cards — smaller version of .dscf-cat-link */
.dscf-post-sidebar .elementor-widget-posts .dscf-cat-link {
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 4px !important;
}

/* Hide excerpt, read-more, and Elementor's built-in meta data
   (we use the date badge for the date instead) */
.dscf-post-sidebar .elementor-widget-posts .elementor-post__excerpt,
.dscf-post-sidebar .elementor-widget-posts .elementor-post__read-more,
.dscf-post-sidebar .elementor-widget-posts .elementor-post__read-more-wrapper,
.dscf-post-sidebar .elementor-widget-posts .elementor-post__meta-data {
  display: none !important;
}

/* ==========================================================================
   10 — REUSABLE PAGE HERO
   For dark-gradient hero sections (Search, Sitemap, Privacy, etc.)

   USAGE: add CSS class "dscf-page-hero" to the container. The CSS handles
   the gradient — no need to set it in Elementor.
   For gold italic accent in headings, wrap text in <em> tags.
   ========================================================================== */

.dscf-page-hero {
  position: relative;
  background: linear-gradient(180deg, #0F2A1E 0%, #1A3D2E 60%, #0A1D14 100%);
  overflow: hidden;
}

.dscf-page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 30%, rgba(200, 154, 60, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.dscf-page-hero > * {
  position: relative;
  z-index: 1;
}

.dscf-page-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.dscf-page-hero-crumb,
.dscf-page-hero .dscf-page-hero-crumb {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #E3B85A;
  margin-bottom: 24px;
  display: block;
}

.dscf-page-hero-crumb span,
.dscf-page-hero-crumb a {
  color: inherit;
  text-decoration: none;
}

.dscf-page-hero-crumb a:hover {
  color: #fff;
}

.dscf-page-hero-title,
.dscf-page-hero h1,
.dscf-page-hero .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  color: #FAF5EC;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.dscf-page-hero-title em,
.dscf-page-hero h1 em,
.dscf-page-hero .elementor-heading-title em {
  color: #E3B85A;
  font-style: italic;
  font-weight: 700;
}

.dscf-page-hero-lead,
.dscf-page-hero .elementor-widget-text-editor p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(250, 245, 236, 0.85);
  max-width: 580px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .dscf-page-hero-title,
  .dscf-page-hero h1,
  .dscf-page-hero .elementor-heading-title {
    font-size: 36px;
  }
  .dscf-page-hero-lead,
  .dscf-page-hero .elementor-widget-text-editor p {
    font-size: 16px;
  }
  .dscf-page-hero-crumb {
    font-size: 11px;
    margin-bottom: 18px;
  }
}


/* ==========================================================================
   11 — 404 PAGE
   ========================================================================== */

.dscf-error-code {
  display: inline-block;
}
.dscf-error-code .error-zero {
  color: #B8232D;
  font-style: italic;
}
.dscf-404-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(200,154,60,0.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.dscf-404-hero > * {
  position: relative;
  z-index: 1;
}
.dscf-helpful-link {
  transition: all 0.2s;
}
.dscf-helpful-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


/* ==========================================================================
   12 — SINGLE POST TEMPLATE
   Pairs with the dscf-related-posts.php shortcode
   ========================================================================== */

/* Hero polish */
.dscf-post-hero {
  position: relative;
}
.dscf-post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 70% 30%, rgba(200, 154, 60, 0.15), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.dscf-post-hero > * {
  position: relative;
  z-index: 1;
}


/* Article body typography */
.dscf-post-article .elementor-widget-theme-post-content p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #1A1410;
  line-height: 1.8;
  margin-bottom: 24px;
}

/* Drop cap on the first paragraph */
.dscf-post-article .elementor-widget-theme-post-content > .elementor-widget-container > p:first-of-type::first-letter {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 700;
  color: #B8232D;
  float: left;
  line-height: 0.85;
  padding: 6px 12px 0 0;
}

.dscf-post-article .elementor-widget-theme-post-content h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  color: #0A1D14;
  line-height: 1.2;
  margin: 40px 0 20px;
  letter-spacing: -0.02em;
}

.dscf-post-article .elementor-widget-theme-post-content h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: #0A1D14;
  line-height: 1.3;
  margin: 32px 0 16px;
  letter-spacing: -0.01em;
}

.dscf-post-article .elementor-widget-theme-post-content ul,
.dscf-post-article .elementor-widget-theme-post-content ol {
  padding-left: 28px;
  margin-bottom: 24px;
}

.dscf-post-article .elementor-widget-theme-post-content li {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #1A1410;
  line-height: 1.7;
  margin-bottom: 10px;
}

.dscf-post-article .elementor-widget-theme-post-content blockquote {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.4;
  color: #0A1D14;
  border-left: 4px solid #B8232D;
  padding: 8px 24px;
  margin: 32px 0;
}

.dscf-post-article .elementor-widget-theme-post-content a {
  color: #B8232D;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.dscf-post-article .elementor-widget-theme-post-content a:hover {
  color: #8A1820;
}


/* Featured image: force 16:9, crop from upper third for portraits */
.dscf-post-article .elementor-widget-theme-post-featured-image img,
.dscf-post-article .elementor-widget-theme-post-featured-image .elementor-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center 30%;
}


/* Sidebar */
.dscf-post-sidebar {
  font-family: 'Inter', sans-serif;
}

/* Sidebar section titles — ONLY target Elementor Heading widgets,
   NOT bare h2/h3 inside post cards or other content widgets.
   Post titles are h3 too; we must not accidentally restyle them. */
/* Sidebar section titles — no underline; just clean uppercase. */
.dscf-post-sidebar .elementor-widget-heading .elementor-heading-title,
.dscf-post-sidebar > h2,
.dscf-post-sidebar > h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: #B8232D !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-bottom: none !important;
  line-height: 1.2 !important;
}

/* Sidebar block cards.
   Each "block" in the sidebar = ONE Elementor Container (.e-con) that holds
   a Heading widget + a content widget/shortcode. That container becomes
   a cream card automatically.

   IMPORTANT: in Elementor, group your Heading widget + content widget
   inside a single Container per section. Don't drop them as separate
   top-level widgets — they need to be grouped to get the cream card. */

.dscf-post-sidebar > .e-con,
.dscf-post-sidebar > .elementor-section,
.dscf-post-sidebar .dscf-sidebar-card {
  background: #FAF5EC !important;
  padding: 24px !important;
  border-radius: 14px !important;
  margin-bottom: 24px !important;
}

.dscf-post-sidebar > .e-con:last-child,
.dscf-post-sidebar > .elementor-section:last-child,
.dscf-post-sidebar .dscf-sidebar-card:last-child {
  margin-bottom: 0 !important;
}

/* Inside a sidebar card, remove any extra margins from inner elements */
.dscf-post-sidebar > .e-con > .e-con-inner > .elementor-element,
.dscf-post-sidebar > .e-con > .elementor-widget {
  margin-bottom: 0 !important;
}

.dscf-post-sidebar input[type="search"],
.dscf-post-sidebar .elementor-search-form__input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background: #fff;
  color: #1A1410;
}

.dscf-post-sidebar input[type="search"]:focus,
.dscf-post-sidebar .elementor-search-form__input:focus {
  outline: none;
  border-color: #B8232D;
}

.dscf-post-sidebar .elementor-search-form__submit {
  position: absolute;
  left: -9999px;
}

.dscf-post-sidebar .elementor-widget-posts .elementor-post {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dscf-post-sidebar .elementor-widget-posts .elementor-post:last-child {
  border-bottom: none;
}

.dscf-post-sidebar .elementor-post__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.dscf-post-sidebar .elementor-post__title a {
  color: #1A1410;
}

.dscf-post-sidebar .elementor-post__title a:hover {
  color: #B8232D;
}

.dscf-post-sidebar .elementor-post__meta-data {
  font-size: 11px;
  color: #4A3F36;
  margin-top: 4px;
}


/* Share bar */
.dscf-share-bar .elementor-social-icon {
  width: 36px;
  height: 36px;
  background: #fff;
  color: #0A1D14;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.dscf-share-bar .elementor-social-icon:hover {
  background: #B8232D;
  color: #fff;
}


/* Related posts grid — 4 cards in a row, each card reuses .elementor-post
   markup so it inherits ALL homepage card styling from section 9
   (date badge, category link, Fraunces title, excerpt, Read More). */
.dscf-related-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

/* Tighter sizing for the smaller 4-column related cards */
.dscf-related-grid .elementor-post__title {
  font-size: 15px !important;
  line-height: 1.3 !important;
}

.dscf-related-grid .elementor-post__excerpt p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 2 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.dscf-related-grid .elementor-post__text {
  padding: 16px 18px 18px !important;
}

.dscf-related-grid .dscf-cat-link {
  font-size: 10px !important;
  margin-bottom: 6px !important;
}

/* Smaller date badge on the smaller related cards */
.dscf-related-grid .elementor-post[data-day]::before {
  min-width: 44px !important;
  font-size: 22px !important;
  padding: 6px 8px 1px !important;
  top: 12px !important;
  left: 12px !important;
}

.dscf-related-grid .elementor-post[data-month]::after {
  top: calc(12px + 28px) !important;
  left: 12px !important;
  min-width: 44px !important;
  font-size: 9px !important;
  padding: 1px 8px 4px !important;
}

.dscf-related-link:hover .dscf-related-title {
  color: #B8232D;
}


/* Single post responsive */
@media (max-width: 1024px) {
  .dscf-post-sidebar {
    display: none;
  }
  .dscf-post-body-wrap {
    grid-template-columns: 1fr;
  }
  .dscf-related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .dscf-post-article .elementor-widget-theme-post-content p,
  .dscf-post-article .elementor-widget-theme-post-content li {
    font-size: 16px;
  }
  .dscf-post-article .elementor-widget-theme-post-content h2 {
    font-size: 26px;
  }
  .dscf-post-article .elementor-widget-theme-post-content h3 {
    font-size: 20px;
  }
  .dscf-related-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   13 — CATEGORIES & TAGS SHORTCODES
   Pairs with dscf-categories-tags-shortcodes.php
   ========================================================================== */

/* Categories list */
.dscf-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dscf-categories-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.dscf-categories-item:last-child {
  border-bottom: none;
}

.dscf-categories-link {
  color: #1A1410;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  transition: color 0.15s ease;
}

.dscf-categories-link:hover {
  color: #B8232D;
}

.dscf-categories-count {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #B8232D;
  background: #FFFFFF;
  padding: 2px 10px;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.dscf-categories-empty {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4A3F36;
  font-style: italic;
  margin: 0;
}


/* Tag cloud (sized by frequency) */
.dscf-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.6;
}

.dscf-tag-cloud-link {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: #4A3F36;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dscf-tag-cloud-link:hover {
  background: #F3EAD7;
  color: #B8232D;
  border-color: #B8232D;
}

.dscf-tag-cloud-empty {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4A3F36;
  font-style: italic;
  margin: 0;
}


/* Current post's tags */
.dscf-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.dscf-post-tag-link {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1A3D2E;
  background: #F3EAD7;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.dscf-post-tag-link:hover {
  background: #B8232D;
  color: #fff;
}


/* ==========================================================================
   14 — SEARCH PAGE
   Pairs with dscf-search-shortcodes.php
   Selectors prefixed with `body` for specificity to win against Elementor.
   ========================================================================== */

/* Search input */
body .dscf-search-input-wrap {
  max-width: 720px;
  margin: 0 auto 32px;
  position: relative;
  display: block;
}

body .dscf-search-input-wrap .dscf-search-input {
  width: 100%;
  padding: 20px 24px 20px 60px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  background: #FFFFFF;
  color: #1A1410;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

body .dscf-search-input-wrap .dscf-search-input:focus {
  outline: none;
  border-color: #B8232D;
  box-shadow: 0 0 0 3px rgba(184, 35, 45, 0.1);
}

body .dscf-search-input-wrap .dscf-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #4A3F36;
  pointer-events: none;
  z-index: 2;
}


/* Filter pills */
body .dscf-search-filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 32px;
  padding: 0;
  list-style: none;
}

body .dscf-search-filters .dscf-search-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0A1D14;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

body .dscf-search-filters .dscf-search-filter:hover {
  background: #FFFFFF;
  border-color: #B8232D;
  color: #B8232D;
  text-decoration: none;
}

body .dscf-search-filters .dscf-search-filter.is-active {
  background: #B8232D;
  color: #FFFFFF;
  border-color: #B8232D;
}

body .dscf-search-filters .dscf-search-filter.is-active:hover {
  background: #8A1820;
  border-color: #8A1820;
  color: #FFFFFF;
}

body .dscf-search-filters .dscf-search-filter-count {
  font-weight: 500;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}


/* Stats line */
body .dscf-search-stats {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #4A3F36;
  font-size: 14px;
  margin: 0 0 24px;
  text-align: left;
}

body .dscf-search-stats strong {
  color: #1A1410;
  font-weight: 700;
}


/* Results */
body .dscf-search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 24px;
}

body .dscf-search-results .dscf-search-result {
  background: #FFFFFF;
  padding: 24px 28px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  list-style: none;
}

body .dscf-search-results .dscf-search-result:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.06);
}

body .dscf-search-results .dscf-search-result-type {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #B8232D;
  margin: 0 0 8px;
  line-height: 1.2;
}

body .dscf-search-results .dscf-search-result-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: #0A1D14;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

body .dscf-search-results .dscf-search-result-title a {
  color: #0A1D14;
  text-decoration: none;
  transition: color 0.15s ease;
}

body .dscf-search-results .dscf-search-result-title a:hover {
  color: #B8232D;
}

body .dscf-search-results .dscf-search-result-excerpt {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: #4A3F36;
  line-height: 1.55;
  margin: 0 0 10px;
}

body .dscf-search-results .dscf-search-result-url {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 12px;
  color: #2D8659;
  word-break: break-all;
  line-height: 1.3;
  margin: 0;
}


/* Highlighted matched terms */
body .dscf-search-results mark,
body .dscf-search-result-title mark,
body .dscf-search-result-excerpt mark {
  background: rgba(232, 196, 65, 0.4);
  color: inherit;
  padding: 0 3px;
  border-radius: 3px;
  font-weight: inherit;
  font-family: inherit;
}


/* Empty state */
body .dscf-search-empty {
  text-align: center;
  padding: 48px 24px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #4A3F36;
  margin: 0;
}

body .dscf-search-empty p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
}

body .dscf-search-empty p:last-child {
  margin-bottom: 0;
  font-size: 14px;
}

body .dscf-search-empty a {
  color: #B8232D;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Pagination */
body .dscf-search-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  flex-wrap: wrap;
}

body .dscf-search-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1410;
  text-decoration: none;
  transition: all 0.15s ease;
}

body .dscf-search-pagination .page-numbers:hover {
  background: #FFFFFF;
  border-color: #B8232D;
  color: #B8232D;
}

body .dscf-search-pagination .page-numbers.current {
  background: #B8232D;
  border-color: #B8232D;
  color: #FFFFFF;
}

body .dscf-search-pagination .page-numbers.dots {
  background: transparent;
  border: none;
  color: #4A3F36;
}


/* Search mobile */
@media (max-width: 600px) {
  body .dscf-search-input-wrap .dscf-search-input {
    font-size: 16px;
    padding: 16px 20px 16px 52px;
  }
  body .dscf-search-input-wrap .dscf-search-icon {
    left: 18px;
    width: 18px;
    height: 18px;
  }
  body .dscf-search-filters .dscf-search-filter {
    font-size: 13px;
    padding: 6px 14px;
  }
  body .dscf-search-results .dscf-search-result {
    padding: 20px 22px;
  }
  body .dscf-search-results .dscf-search-result-title {
    font-size: 17px;
  }
}


/* ==========================================================================
   15 — ARCHIVE PAGE (News & Events + Categories + Tags)
   Pairs with dscf-archive-shortcodes.php v1.2+

   STYLING APPROACH:
   The featured + grid cards reuse the .elementor-post markup from the
   homepage Posts widget, so they inherit ALL section 9 styling
   automatically (date badge, category label, cream card, hover lift).
   This section only adds:
     - Grid layout (2-column on archive page)
     - Featured card sizing (larger than grid)
     - Pagination
     - Sidebar mini-card adjustments
     - Categories list
   ========================================================================== */


/* --- Featured post (side-by-side: image left, body right) ---------------
       Hard-capped card height so a tall image cannot stretch the whole row.
       Card height is 380px on desktop, 300px on smaller screens.
       Image is constrained to that height, then object-fit covers/crops.
   ------------------------------------------------------------------------ */

.dscf-archive-featured-wrap {
  margin-bottom: 40px;
}

.dscf-archive-featured-wrap .elementor-post {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  background: #faf5ec !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  height: 380px !important;
  max-height: 380px !important;
  /* Prevent any inherited border or background tinting */
  border: none !important;
  box-shadow: 0 4px 20px rgba(26, 20, 16, 0.06) !important;
}

/* Wipe out any green tint from section 9's .elementor-post base */
.dscf-archive-featured-wrap .elementor-post,
.dscf-archive-featured-wrap .elementor-post__thumbnail__link,
.dscf-archive-featured-wrap .elementor-post__thumbnail {
  border: none !important;
}

/* Image column is constrained to the card height */
.dscf-archive-featured-wrap .elementor-post__thumbnail__link {
  position: relative;
  display: block;
  height: 380px !important;
  max-height: 380px !important;
  overflow: hidden;
}

.dscf-archive-featured-wrap .elementor-post__thumbnail {
  aspect-ratio: auto !important;
  height: 380px !important;
  width: 100% !important;
  overflow: hidden;
}

.dscf-archive-featured-wrap .elementor-post__thumbnail img {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  display: block;
}

/* Body column sits in right side, vertically centered */
.dscf-archive-featured-wrap .elementor-post__text {
  padding: 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden;
}

.dscf-archive-featured-wrap .elementor-post__title {
  font-size: 24px !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
}

.dscf-archive-featured-wrap .elementor-post__excerpt {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bigger date badge over the image */
.dscf-archive-featured-wrap .elementor-post[data-day]::before {
  min-width: 56px !important;
  padding: 8px 10px 2px !important;
  font-size: 28px !important;
  top: 16px !important;
  left: 16px !important;
}

.dscf-archive-featured-wrap .elementor-post[data-month]::after {
  top: calc(16px + 36px) !important;
  left: 16px !important;
  min-width: 56px !important;
  font-size: 11px !important;
}

/* Mobile: stack image above body, smaller heights */
@media (max-width: 768px) {
  .dscf-archive-featured-wrap .elementor-post {
    grid-template-columns: 1fr !important;
    height: auto !important;
    max-height: none !important;
  }
  .dscf-archive-featured-wrap .elementor-post__thumbnail__link,
  .dscf-archive-featured-wrap .elementor-post__thumbnail,
  .dscf-archive-featured-wrap .elementor-post__thumbnail img {
    height: 240px !important;
    max-height: 240px !important;
  }
}


/* --- Grid layout (2 columns) --------------------------------------------
       Higher specificity prefix (body selector) wins against Elementor's
       widget wrappers without needing as many !important rules.

       The .elementor-widget-posts > .elementor-posts > .dscf-archive-grid
       hierarchy is fragile. Forcing it from body level ensures CSS wins. */

body .dscf-archive-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  /* Reset any inherited flex/block layout from parent .elementor-posts */
  flex: none !important;
}

body .dscf-archive-grid .elementor-post {
  width: 100% !important;
  margin: 0 !important;
  max-width: 100% !important;
  flex: none !important;
}

body .dscf-archive-grid .elementor-post__thumbnail__link {
  display: block;
  width: 100%;
}

body .dscf-archive-grid .elementor-post__thumbnail {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden;
}

body .dscf-archive-grid .elementor-post__thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}


/* --- Pagination --------------------------------------------------------- */

.dscf-archive-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  flex-wrap: wrap;
}

.dscf-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: #FAF5EC;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1A1410;
  text-decoration: none;
  transition: all 0.15s ease;
}

.dscf-archive-pagination .page-numbers:hover {
  background: #FFFFFF;
  border-color: #B8232D;
  color: #B8232D;
}

.dscf-archive-pagination .page-numbers.current {
  background: #B8232D;
  border-color: #B8232D;
  color: #FFFFFF;
}

.dscf-archive-pagination .page-numbers.dots {
  background: transparent;
  border: none;
}


/* --- Empty state -------------------------------------------------------- */

.dscf-archive-empty {
  text-align: center;
  padding: 40px 20px;
  color: #4A3F36;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}


/* --- Sidebar mini-cards (Recent News / Recent Events) ------------------
       Uses the same .elementor-post markup as homepage cards, but inside
       .dscf-archive-sidebar-cards container. The single-post sidebar
       override in section 9 will already handle most of the styling.
       This block just adjusts spacing between cards. ----------------- */

.dscf-archive-sidebar-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tighter padding on sidebar mini-cards (they don't have images) */
.dscf-archive-sidebar-cards .elementor-post .elementor-post__text {
  padding: 14px 14px 14px 70px !important;
  min-height: 64px !important;
}

/* Smaller date badge for sidebar */
.dscf-archive-sidebar-cards .elementor-post[data-day]::before {
  top: 12px !important;
  left: 12px !important;
  min-width: 44px !important;
  padding: 6px 8px 1px !important;
  font-size: 20px !important;
  border-radius: 8px 8px 0 0 !important;
}

.dscf-archive-sidebar-cards .elementor-post[data-month]::after {
  top: calc(12px + 26px) !important;
  left: 12px !important;
  min-width: 44px !important;
  padding: 1px 8px 4px !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  border-radius: 0 0 8px 8px !important;
}

/* Hide image (sidebar cards are text-only) */
.dscf-archive-sidebar-cards .elementor-post__thumbnail,
.dscf-archive-sidebar-cards .elementor-post__thumbnail__link {
  display: none !important;
}

/* Hide excerpt + read-more in sidebar */
.dscf-archive-sidebar-cards .elementor-post__excerpt,
.dscf-archive-sidebar-cards .elementor-post__read-more {
  display: none !important;
}

/* Smaller title in sidebar */
.dscf-archive-sidebar-cards .elementor-post__title {
  font-size: 14px !important;
  font-family: 'Fraunces', Georgia, serif !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Tighter category label in archive sidebar mini-cards */
.dscf-archive-sidebar-cards .dscf-cat-link {
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  margin-bottom: 4px !important;
}


/* --- Categories sidebar list ------------------------------------------- */

.dscf-archive-sidebar-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dscf-archive-sidebar-categories li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dscf-archive-sidebar-categories li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dscf-archive-sidebar-categories li:first-child {
  padding-top: 0;
}

.dscf-archive-sidebar-categories a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1A1410;
  text-decoration: none;
  transition: color 0.15s ease;
}

.dscf-archive-sidebar-categories a:hover {
  color: #B8232D;
}

.dscf-archive-sidebar-cat-count {
  font-size: 12px;
  color: #4A3F36;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 100px;
}


/* --- Breadcrumb in hero ------------------------------------------------ */

.dscf-archive-crumb {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.dscf-archive-crumb a {
  color: inherit;
  text-decoration: none;
}

.dscf-archive-crumb a:hover {
  opacity: 0.85;
}


/* --- PHP-driven sidebar visibility ------------------------------------
       On cat/tag archives, the sidebar shortcodes return empty strings and
       [dscf_archive_sidebar_open] / [dscf_archive_sidebar_close] don't emit
       their wrapper DIV. This rule hides the Elementor sidebar container
       on those pages by adding `body.archive` targeting.

       The body classes WordPress adds on archive pages:
         /news-events/         -> body.blog (or body.home depending on setup)
         /category/foundation/ -> body.category.category-foundation
         /tag/whatever/        -> body.tag.tag-whatever

       We use body.category and body.tag to hide. The sidebar container in
       Elementor must have the CSS class `dscf-archive-sidebar` added so
       this rule can target it.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   Cat/tag archive layout: hide sidebar, force 3-column grid, lock body
   container to 1370px max width, and pull body up close to the hero.

   Triggered by body.dscf-archive-narrow which PHP adds on is_category()
   or is_tag(). No Elementor CSS classes required.
   ---------------------------------------------------------------------- */

/* Hide the entire sidebar column. Targets .dscf-archive-sidebar
   (if user added the class) AND the default Elementor column that
   sits as the second child of .dscf-archive-body. */
body.dscf-archive-narrow .dscf-archive-sidebar,
body.dscf-archive-narrow .dscf-archive-body > :nth-child(2) {
  display: none !important;
}

/* Lock body container to 1370px boxed and aggressively zero out
   ALL top spacing on cat/tag pages to eliminate the white gap. */
body.dscf-archive-narrow .dscf-archive-body {
  max-width: 1370px !important;
  margin: 0 auto !important;
  gap: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 60px !important;
}

/* Zero out the inner Elementor container padding/margin */
body.dscf-archive-narrow .dscf-archive-body > .e-con-inner,
body.dscf-archive-narrow .dscf-archive-body .e-con-inner {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Zero out top margin on the first child of the main column.
   This kills any spacing from the (now hidden) section heading
   widget that's still taking up vertical space even when hidden. */
body.dscf-archive-narrow .dscf-archive-main > *:first-child,
body.dscf-archive-narrow .dscf-archive-body > :first-child > *:first-child {
  margin-top: 0 !important;
}

/* Zero out the Elementor section wrapper that may wrap the entire
   archive body. This is the most common culprit for big gaps —
   Elementor's default section has 60-80px+ vertical padding. */
body.dscf-archive-narrow .elementor-section:has(.dscf-archive-body),
body.dscf-archive-narrow section:has(.dscf-archive-body),
body.dscf-archive-narrow .e-con:has(.dscf-archive-body) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Absolute last-resort: any element with role=main or main tag
   on cat/tag pages should not have top spacing */
body.dscf-archive-narrow main,
body.dscf-archive-narrow [role="main"],
body.dscf-archive-narrow .elementor-location-archive,
body.dscf-archive-narrow .elementor-archive-posts {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hide section title heading widgets on cat/tag pages.
   IMPORTANT: must hide the ENTIRE widget wrapper (.elementor-element or
   .elementor-widget), not just the inner content. Otherwise the wrapper
   keeps its width and vertical space even with the heading text hidden. */

/* Preferred: apply CSS class `dscf-archive-section-title` to the Heading
   widget in Elementor (Advanced -> CSS Classes). Hide its wrapper. */
body.dscf-archive-narrow .elementor-element.dscf-archive-section-title,
body.dscf-archive-narrow .elementor-widget.dscf-archive-section-title,
body.dscf-archive-narrow .dscf-archive-section-title {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fallback: hide ANY Heading widget inside the main column on cat/tag.
   Match the WRAPPER classes Elementor uses: .elementor-element-* with
   .elementor-widget-heading, or the standalone .elementor-widget-heading. */
body.dscf-archive-narrow .dscf-archive-main > .elementor-widget-heading,
body.dscf-archive-narrow .dscf-archive-main .e-con-inner > .elementor-widget-heading,
body.dscf-archive-narrow .dscf-archive-body > :first-child > .elementor-widget-heading,
body.dscf-archive-narrow .dscf-archive-body > :first-child .e-con-inner > .elementor-widget-heading {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Main column takes the full body width */
body.dscf-archive-narrow .dscf-archive-main,
body.dscf-archive-narrow .dscf-archive-body > :first-child {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* Grid goes from 2 columns -> 3 columns on cat/tag */
body.dscf-archive-narrow .dscf-archive-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  margin-top: 32px !important;
}

/* Smaller screens: drop to 2 columns, then 1 column */
@media (max-width: 1024px) {
  body.dscf-archive-narrow .dscf-archive-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  body.dscf-archive-narrow .dscf-archive-grid {
    grid-template-columns: 1fr !important;
  }
}


/* --- Responsive -------------------------------------------------------- */

@media (max-width: 600px) {
  .dscf-archive-grid {
    grid-template-columns: 1fr;
  }
  .dscf-archive-featured-wrap .elementor-post__title {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   15. Gravity Forms — global styling
   ==========================================================================
   Targets every Gravity Form on the site so they match the DSCF brand:
   rounded 8px inputs with subtle borders, cranberry submit button,
   Inter font, focus state in cranberry, and proper label/spacing.

   Gravity Forms 2.5+ uses class `.gform_wrapper` as the outer wrap.
   We support both the modern and legacy markup. Targets are kept
   highly specific so they win against the GF default stylesheet
   without needing !important on most properties.
   ========================================================================== */

/* --- Outer wrapper --------------------------------------------------- */
.gform_wrapper.gravity-theme,
.gform_wrapper {
  font-family: 'Inter', sans-serif;
  color: #1A1410;
  max-width: 100%;
  margin: 0;
}

/* --- Field row spacing ----------------------------------------------- */
.gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gform_wrapper .gfield {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* --- Labels ---------------------------------------------------------- */
.gform_wrapper .gfield_label,
.gform_wrapper label.gfield_label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1A1410;
  margin: 0 0 6px;
  line-height: 1.4;
}

.gform_wrapper .gfield_required {
  color: #B8232D;
  margin-left: 4px;
}

/* --- Description text (small helper text under label) ---------------- */
.gform_wrapper .gfield_description {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4A3F36;
  margin-top: 6px;
  line-height: 1.5;
}

/* --- Text inputs, email, tel, url, password -------------------------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #0A1D14;
  background: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gform_wrapper textarea {
  min-height: 120px;
  resize: vertical;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="url"]:focus,
.gform_wrapper input[type="password"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="date"]:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: #B8232D;
  box-shadow: 0 0 0 3px rgba(184, 35, 45, 0.1);
}

/* --- Placeholder text ------------------------------------------------ */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
  color: rgba(74, 63, 54, 0.5);
}

/* --- Checkbox & radio ------------------------------------------------ */
.gform_wrapper .gfield_checkbox,
.gform_wrapper .gfield_radio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.gform_wrapper .gfield_checkbox li,
.gform_wrapper .gfield_radio li,
.gform_wrapper .gchoice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.gform_wrapper .gfield_checkbox input[type="checkbox"],
.gform_wrapper .gfield_radio input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #B8232D;
  cursor: pointer;
  margin: 0;
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1A1410;
  margin: 0;
  cursor: pointer;
  line-height: 1.5;
}

/* --- Multi-select / dropdown native styles --------------------------- */
.gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1410' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
}

/* --- Submit button --------------------------------------------------- */
/* GF 2.7+ Orbital theme uses .gform-theme--framework as the form wrapper
   and adds .gform-theme-button to the submit. We use those + .button +
   .gform-button (newer) + #gform_submit_button_X (highest specificity)
   to beat its default primary button styling without losing our brand. */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
  margin: 24px 0 0;
  padding: 0;
}

.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform_page_footer .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button.gform_button,
.gform_wrapper button.gform-button,
.gform_wrapper .gform-theme-button,
.gform-theme--framework .gform_footer .gform_button,
.gform-theme--framework .gform_footer .gform-button,
.gform-theme--framework input[type="submit"],
.gform-theme--framework button[type="submit"],
.gform-theme--framework .gform-theme-button[type="submit"],
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_footer input[type="submit"],
form[id^="gform_"] .gform_button,
form[id^="gform_"] button[type="submit"],
form[id^="gform_"] input[type="submit"] {
  background: #B8232D !important;
  background-color: #B8232D !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.05s ease !important;
  display: inline-block !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  text-transform: none !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
}

.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_page_footer .gform_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper button.gform-button:hover,
.gform_wrapper .gform-theme-button:hover,
.gform-theme--framework .gform_footer .gform_button:hover,
.gform-theme--framework .gform_footer .gform-button:hover,
.gform-theme--framework input[type="submit"]:hover,
.gform-theme--framework button[type="submit"]:hover,
form[id^="gform_"] .gform_button:hover,
form[id^="gform_"] button[type="submit"]:hover,
form[id^="gform_"] input[type="submit"]:hover {
  background: #8A1820 !important;
  background-color: #8A1820 !important;
}

.gform_wrapper .gform_button:active,
.gform_wrapper input[type="submit"]:active,
.gform_wrapper button.gform_button:active,
.gform-theme--framework input[type="submit"]:active,
.gform-theme--framework button[type="submit"]:active,
form[id^="gform_"] button[type="submit"]:active {
  transform: translateY(1px) !important;
}

.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper button.gform_button:focus-visible,
.gform-theme--framework input[type="submit"]:focus-visible,
.gform-theme--framework button[type="submit"]:focus-visible,
form[id^="gform_"] button[type="submit"]:focus-visible {
  outline: 3px solid rgba(184, 35, 45, 0.3) !important;
  outline-offset: 2px !important;
}

/* --- Validation error states ----------------------------------------- */
.gform_wrapper .gfield_error input[type="text"],
.gform_wrapper .gfield_error input[type="email"],
.gform_wrapper .gfield_error input[type="tel"],
.gform_wrapper .gfield_error input[type="url"],
.gform_wrapper .gfield_error input[type="password"],
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
  border-color: #B8232D;
  background: rgba(184, 35, 45, 0.03);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gfield_description.validation_message {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #B8232D;
  margin-top: 6px;
  font-weight: 500;
}

.gform_wrapper .gform_validation_errors {
  background: rgba(184, 35, 45, 0.05);
  border: 1px solid rgba(184, 35, 45, 0.2);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_submission_error {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #B8232D;
  margin: 0 0 8px;
}

.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ul {
  margin: 0;
  padding-left: 20px;
}

.gform_wrapper .gform_validation_errors a {
  color: #B8232D;
  text-decoration: underline;
}

/* --- Confirmation message ------------------------------------------- */
.gform_confirmation_wrapper,
.gform_confirmation_message {
  background: rgba(26, 61, 46, 0.05);
  border: 1px solid rgba(26, 61, 46, 0.15);
  border-radius: 12px;
  padding: 24px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #1A3D2E;
}

/* --- File upload field ---------------------------------------------- */
.gform_wrapper input[type="file"] {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 8px 0;
}

/* --- Two-column row layout (for first-name / last-name pairs) ------- */
.gform_wrapper .gform_fields.top_label .ginput_complex {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.gform_wrapper .gform_fields.top_label .ginput_complex > span {
  flex: 1 1 calc(50% - 8px);
  min-width: 200px;
}

/* --- Honeypot / spam fields stay invisible -------------------------- */
.gform_wrapper .gform_validation_container,
.gform_wrapper input[name="input_-1"] {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

/* --- Inline form labels above input (default behavior anyway) ------- */
.gform_wrapper.gform_legacy_markup_wrapper .top_label .gfield_label {
  display: block;
}

/* --- Responsive: narrow viewports ----------------------------------- */
@media (max-width: 600px) {
  .gform_wrapper .gform_fields {
    gap: 16px;
  }
  .gform_wrapper input[type="text"],
  .gform_wrapper input[type="email"],
  .gform_wrapper input[type="tel"],
  .gform_wrapper input[type="url"],
  .gform_wrapper input[type="password"],
  .gform_wrapper textarea,
  .gform_wrapper select {
    font-size: 16px; /* prevents iOS Safari zoom on focus */
  }
  .gform_wrapper .gform_button,
  .gform_wrapper input[type="submit"] {
    width: 100%;
  }
}


/* ==========================================================================
   15.b. Gravity Forms — "form on hero" variant
   ==========================================================================
   When a Gravity Form is placed inside the green-gradient hero (or any
   dark-background section), the default form colors (dark text on white
   inputs, dark labels) become a card-against-dark composition.

   Apply class `dscf-form-on-hero` to the Elementor Container that wraps
   the Gravity Form. This wraps the form in a white floating card with
   subtle shadow, sized appropriately for inside a hero banner.

   USAGE:
     - Edit the Container in Elementor → Advanced tab → CSS Classes →
       add `dscf-form-on-hero`
     - The container should have NO background set (transparent) so the
       hero's green shows through around the card.
   ========================================================================== */

/* The "card" wrap around the form — white floating panel */
.dscf-form-on-hero .gform_wrapper {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Tighten field spacing in the on-hero variant (more compact card feel) */
.dscf-form-on-hero .gform_wrapper .gform_fields {
  gap: 16px;
}

/* Labels stay dark on the white card — same as default, but ensure no inherited
   light color from the hero context */
.dscf-form-on-hero .gform_wrapper .gfield_label,
.dscf-form-on-hero .gform_wrapper label.gfield_label {
  color: #1A1410 !important;
  font-size: 13px;
  font-weight: 600;
}

/* Inputs: subtle gray border that doesn't compete with the card edge */
.dscf-form-on-hero .gform_wrapper input[type="text"],
.dscf-form-on-hero .gform_wrapper input[type="email"],
.dscf-form-on-hero .gform_wrapper input[type="tel"],
.dscf-form-on-hero .gform_wrapper input[type="url"],
.dscf-form-on-hero .gform_wrapper input[type="password"],
.dscf-form-on-hero .gform_wrapper textarea,
.dscf-form-on-hero .gform_wrapper select {
  background: #FAF5EC;       /* cream — slight contrast against pure white card */
  border-color: rgba(0, 0, 0, 0.08);
}

/* Name sub-fields: First and Last sit side-by-side at 50/50 inside the card.
   Email and other fields below stay full-width per their parent .gfield. */
.dscf-form-on-hero .gform_wrapper .ginput_complex {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.dscf-form-on-hero .gform_wrapper .ginput_complex > span {
  flex: 1 1 calc(50% - 8px) !important;
  min-width: 120px !important;
  display: block !important;
}

/* Make sure visible sub-fields use the full half-width and hidden ones
   collapse cleanly. */
.dscf-form-on-hero .gform_wrapper .name_first,
.dscf-form-on-hero .gform_wrapper .name_last {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

.dscf-form-on-hero .gform_wrapper .name_middle,
.dscf-form-on-hero .gform_wrapper .name_prefix,
.dscf-form-on-hero .gform_wrapper .name_suffix {
  display: none !important;
}

/* Force every field row to span the full card width — overrides any
   Orbital theme width classes (gfield--width-half, --width-third, etc.)
   that might cap a single-input field at less than full card. The Name
   field's complex sub-inputs handle their own 50/50 inside this row. */
.dscf-form-on-hero .gform_wrapper .gfield,
.dscf-form-on-hero .gform_wrapper .gfield--type-email,
.dscf-form-on-hero .gform_wrapper .gfield--type-text,
.dscf-form-on-hero .gform_wrapper .gfield--type-phone,
.dscf-form-on-hero .gform_wrapper .gfield--width-half,
.dscf-form-on-hero .gform_wrapper .gfield--width-third,
.dscf-form-on-hero .gform_wrapper .gfield--width-quarter {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Every direct input under a non-complex field row: full width */
.dscf-form-on-hero .gform_wrapper .gfield > input[type="text"],
.dscf-form-on-hero .gform_wrapper .gfield > input[type="email"],
.dscf-form-on-hero .gform_wrapper .gfield > input[type="tel"],
.dscf-form-on-hero .gform_wrapper .gfield > input[type="url"],
.dscf-form-on-hero .gform_wrapper .gfield > input[type="password"],
.dscf-form-on-hero .gform_wrapper .gfield > textarea,
.dscf-form-on-hero .gform_wrapper .gfield > select,
.dscf-form-on-hero .gform_wrapper .ginput_container > input[type="text"],
.dscf-form-on-hero .gform_wrapper .ginput_container > input[type="email"],
.dscf-form-on-hero .gform_wrapper .ginput_container > input[type="tel"],
.dscf-form-on-hero .gform_wrapper .ginput_container > input[type="url"],
.dscf-form-on-hero .gform_wrapper .ginput_container > input[type="password"],
.dscf-form-on-hero .gform_wrapper .ginput_container > textarea,
.dscf-form-on-hero .gform_wrapper .ginput_container > select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* The ginput_container wrapper itself must also be full width */
.dscf-form-on-hero .gform_wrapper .ginput_container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Card stays narrow; widen it slightly so 50/50 inputs are comfortably sized */
.dscf-form-on-hero .gform_wrapper {
  max-width: 560px;
}

.dscf-form-on-hero .gform_wrapper input[type="text"]:focus,
.dscf-form-on-hero .gform_wrapper input[type="email"]:focus,
.dscf-form-on-hero .gform_wrapper input[type="tel"]:focus,
.dscf-form-on-hero .gform_wrapper input[type="url"]:focus,
.dscf-form-on-hero .gform_wrapper input[type="password"]:focus,
.dscf-form-on-hero .gform_wrapper textarea:focus,
.dscf-form-on-hero .gform_wrapper select:focus {
  background: #FFFFFF;
  border-color: #B8232D;
  box-shadow: 0 0 0 3px rgba(184, 35, 45, 0.15);
}

/* Submit button: full width inside the narrow card looks better */
.dscf-form-on-hero .gform_wrapper .gform_footer,
.dscf-form-on-hero .gform_wrapper .gform_page_footer {
  margin-top: 20px;
}

.dscf-form-on-hero .gform_wrapper .gform_button,
.dscf-form-on-hero .gform_wrapper input[type="submit"],
.dscf-form-on-hero .gform_wrapper button[type="submit"],
.dscf-form-on-hero .gform_wrapper .gform-theme-button {
  width: 100% !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
}

/* Confirmation message on white card */
.dscf-form-on-hero .gform_confirmation_wrapper,
.dscf-form-on-hero .gform_confirmation_message {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  font-size: 16px;
  color: #1A3D2E;
  border: none;
}

/* Validation errors on white card */
.dscf-form-on-hero .gform_wrapper .gform_validation_errors {
  background: rgba(184, 35, 45, 0.06);
  border: 1px solid rgba(184, 35, 45, 0.2);
}

/* Responsive: shrink card padding on small screens */
@media (max-width: 600px) {
  .dscf-form-on-hero .gform_wrapper {
    padding: 28px 24px;
    margin: 0 16px;
  }
}


/* ==========================================================================
   15.c. Gravity Forms — "form on cranberry" variant
   ==========================================================================
   For Subscribe-style sections placed on a cranberry (#B8232D) background.
   Layout (stacked, no joined pill):
     ┌────────────────────────────────┐
     │  [ First Name ] [ Last Name ]  │
     │                                │
     │  [ Email                    ]  │
     │                                │
     │  [    SUBSCRIBE             ]  │  ← own row, full width
     └────────────────────────────────┘

   USAGE:
     - Apply class `dscf-form-on-cranberry` to the Elementor Container
       wrapping the form (the same container that has the red bg).
     - The form sits directly on the cranberry — no white card behind it.
   ========================================================================== */

/* Form wrapper: no card, centered, 560px max width */
.dscf-form-on-cranberry .gform_wrapper {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.dscf-form-on-cranberry .gform_wrapper .gform_fields {
  gap: 20px;
}

/* Labels: cream on cranberry */
.dscf-form-on-cranberry .gform_wrapper .gfield_label,
.dscf-form-on-cranberry .gform_wrapper label.gfield_label {
  color: #FAF5EC !important;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* "(Required)" indicator: softer cream */
.dscf-form-on-cranberry .gform_wrapper .gfield_required {
  color: rgba(250, 245, 236, 0.7) !important;
}

/* Sub-labels under name inputs (First name / Last name): smaller, cream */
.dscf-form-on-cranberry .gform_wrapper .gform-field-label--type-sub,
.dscf-form-on-cranberry .gform_wrapper .ginput_complex label {
  color: rgba(250, 245, 236, 0.85) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  margin-top: 4px;
}

/* All text inputs: white pill, full width */
.dscf-form-on-cranberry .gform_wrapper input[type="text"],
.dscf-form-on-cranberry .gform_wrapper input[type="email"],
.dscf-form-on-cranberry .gform_wrapper input[type="tel"],
.dscf-form-on-cranberry .gform_wrapper input[type="url"],
.dscf-form-on-cranberry .gform_wrapper input[type="password"] {
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: #1A1410 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.dscf-form-on-cranberry .gform_wrapper input::placeholder {
  color: rgba(74, 63, 54, 0.55) !important;
}

.dscf-form-on-cranberry .gform_wrapper input:focus {
  outline: none !important;
  border-color: #1A3D2E !important;
  box-shadow: 0 0 0 3px rgba(26, 61, 46, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Name (First / Last) row at 50/50 */
.dscf-form-on-cranberry .gform_wrapper .ginput_complex {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.dscf-form-on-cranberry .gform_wrapper .ginput_complex > span {
  flex: 1 1 calc(50% - 6px) !important;
  min-width: 120px !important;
  display: block !important;
}

.dscf-form-on-cranberry .gform_wrapper .name_first,
.dscf-form-on-cranberry .gform_wrapper .name_last {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

.dscf-form-on-cranberry .gform_wrapper .name_middle,
.dscf-form-on-cranberry .gform_wrapper .name_prefix,
.dscf-form-on-cranberry .gform_wrapper .name_suffix {
  display: none !important;
}

/* Every field row spans full width (overrides Orbital grid widths) */
.dscf-form-on-cranberry .gform_wrapper .gfield,
.dscf-form-on-cranberry .gform_wrapper .gfield--type-email,
.dscf-form-on-cranberry .gform_wrapper .gfield--type-text,
.dscf-form-on-cranberry .gform_wrapper .gfield--width-half,
.dscf-form-on-cranberry .gform_wrapper .gfield--width-third,
.dscf-form-on-cranberry .gform_wrapper .gfield--width-quarter {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.dscf-form-on-cranberry .gform_wrapper .ginput_container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Footer: stays in normal flow below email — adds top margin for breathing room */
.dscf-form-on-cranberry .gform_wrapper .gform_footer {
  margin: 20px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  position: static !important;
  height: auto !important;
}

/* Subscribe button: cream pill, cranberry text, auto width, centered */
.dscf-form-on-cranberry .gform_wrapper .gform_footer .gform_button,
.dscf-form-on-cranberry .gform_wrapper .gform_footer input[type="submit"],
.dscf-form-on-cranberry .gform_wrapper .gform_footer button[type="submit"],
.dscf-form-on-cranberry .gform_wrapper .gform-theme-button {
  background: #FAF5EC !important;
  background-color: #FAF5EC !important;
  color: #B8232D !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 12px 36px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: static !important;
  width: auto !important;
  min-width: 200px !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: background 0.2s ease, transform 0.05s ease, color 0.2s ease !important;
  display: inline-block !important;
}

.dscf-form-on-cranberry .gform_wrapper .gform_footer .gform_button:hover,
.dscf-form-on-cranberry .gform_wrapper .gform_footer input[type="submit"]:hover,
.dscf-form-on-cranberry .gform_wrapper .gform_footer button[type="submit"]:hover {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #8A1820 !important;
}

.dscf-form-on-cranberry .gform_wrapper .gform_footer .gform_button:active,
.dscf-form-on-cranberry .gform_wrapper .gform_footer input[type="submit"]:active,
.dscf-form-on-cranberry .gform_wrapper .gform_footer button[type="submit"]:active {
  transform: translateY(1px) !important;
}

.dscf-form-on-cranberry .gform_wrapper .gform_footer .gform_button:focus-visible,
.dscf-form-on-cranberry .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.dscf-form-on-cranberry .gform_wrapper .gform_footer button[type="submit"]:focus-visible {
  outline: 3px solid rgba(250, 245, 236, 0.6) !important;
  outline-offset: 2px !important;
}

/* Validation messages: cream text, semi-dark backdrop */
.dscf-form-on-cranberry .gform_wrapper .gfield_validation_message,
.dscf-form-on-cranberry .gform_wrapper .validation_message {
  color: #FAF5EC !important;
  background: rgba(0, 0, 0, 0.15);
  padding: 6px 12px;
  border-radius: 8px;
  display: inline-block;
  font-size: 13px;
  margin-top: 8px;
}

.dscf-form-on-cranberry .gform_wrapper .gform_validation_errors {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FAF5EC;
}

.dscf-form-on-cranberry .gform_wrapper .gform_validation_errors h2,
.dscf-form-on-cranberry .gform_wrapper .gform_submission_error {
  color: #FAF5EC !important;
}

.dscf-form-on-cranberry .gform_wrapper .gform_validation_errors a {
  color: #E3B85A !important;
}

/* Error state on inputs */
.dscf-form-on-cranberry .gform_wrapper .gfield_error input[type="text"],
.dscf-form-on-cranberry .gform_wrapper .gfield_error input[type="email"] {
  border-color: #E3B85A !important;
  box-shadow: 0 0 0 3px rgba(227, 184, 90, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Confirmation message after submit: warm cream block on cranberry */
.dscf-form-on-cranberry .gform_confirmation_wrapper,
.dscf-form-on-cranberry .gform_confirmation_message {
  background: #FAF5EC;
  border: none;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #1A3D2E;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}


/* ==========================================================================
   16. Zeffy donation embed
   ==========================================================================
   The .dscf-zeffy-embed wrapper makes the Zeffy iframe responsive with a
   sensible default height (820px) that fits the full donation form without
   internal scrolling for most form configurations.

   USAGE:
     <div class="dscf-zeffy-embed">
       <iframe src="https://www.zeffy.com/embed/donation-form/..." ...></iframe>
     </div>
   ========================================================================== */

.dscf-zeffy-embed {
  position: relative;
  width: 100%;
  height: 820px;
  max-width: 720px;
  margin: 0 auto;
  background: #FAF5EC;       /* cream backdrop while iframe loads */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.dscf-zeffy-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

@media (max-width: 600px) {
  .dscf-zeffy-embed {
    height: 920px;            /* form often grows taller on mobile (stacked fields) */
    border-radius: 8px;
  }
}


/* ==========================================================================
   17. Long-form content pages — Privacy, Refund, Accessibility, Sitemap
   ==========================================================================
   These pages use a Text Editor widget with HTML headings inside a content
   container. The default h2/h3 sizing is too large for body content (they're
   tuned for hero sections). This scales them down for long-form reading
   without affecting heroes or section titles elsewhere.

   USAGE:
     - Apply class `dscf-longform` to the Elementor Container that wraps
       the Text Editor widget (the 780px-wide content container, NOT the hero).
   ========================================================================== */

/* Container baseline */
.dscf-longform {
  font-family: 'Inter', sans-serif;
  color: #1A1410;
  line-height: 1.7;
}

/* H2 — section headings (e.g. "What we collect", "How we use your information") */
.dscf-longform h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #1A3D2E;
  line-height: 1.3;
  margin: 48px 0 16px;
  padding: 0;
}

/* First h2 doesn't need the big top margin — it follows the intro paragraph */
.dscf-longform > h2:first-child,
.dscf-longform > *:first-child + h2 {
  margin-top: 24px;
}

/* H3 — sub-section headings (e.g. "Returns", "Damaged or incorrect items") */
.dscf-longform h3 {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #1A3D2E;
  line-height: 1.4;
  margin: 28px 0 12px;
  padding: 0;
}

/* H4 (rare in this content but defined for safety) */
.dscf-longform h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1A3D2E;
  margin: 24px 0 8px;
}

/* Body paragraphs */
.dscf-longform p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1A1410;
  margin: 0 0 16px;
}

/* Lead/intro italic line (the "Last updated: [DATE]" italicized line) */
.dscf-longform > p:first-child em,
.dscf-longform > p:first-of-type em {
  font-size: 14px;
  color: #4A3F36;
}

/* Bulleted and numbered lists */
.dscf-longform ul,
.dscf-longform ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.dscf-longform li {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #1A1410;
  margin-bottom: 8px;
}

.dscf-longform li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
.dscf-longform li ul,
.dscf-longform li ol {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Strong (bold) text */
.dscf-longform strong {
  font-weight: 600;
  color: #1A1410;
}

/* Links in body content — cranberry, underlined on hover */
.dscf-longform a {
  color: #B8232D;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 35, 45, 0.3);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.dscf-longform a:hover {
  color: #8A1820;
  border-bottom-color: #B8232D;
}

.dscf-longform a strong {
  color: inherit;
}

/* Address blocks — paragraphs with line breaks */
.dscf-longform p br {
  line-height: 1.7;
}

/* Mobile: smaller h2, tighter spacing */
@media (max-width: 600px) {
  .dscf-longform h2 {
    font-size: 22px;
    margin: 36px 0 14px;
  }
  .dscf-longform h3 {
    font-size: 16px;
    margin: 24px 0 10px;
  }
  .dscf-longform p,
  .dscf-longform li {
    font-size: 15px;
  }
}


/* ==========================================================================
   18. Letters to Santa — video recorder UI
   ==========================================================================
   Styles for the custom in-browser video recorder mounted inside the
   Gravity Forms HTML placeholder field on /letters-to-santa/.
   ========================================================================== */

#dscf-lts-recorder {
  width: 100%;
  margin: 16px 0 0;
}

.dscf-lts-recorder-wrap {
  background: #FAF5EC;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.dscf-lts-recorder-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #1A3D2E;
  margin: 0 0 8px;
}

.dscf-lts-recorder-sub,
.dscf-lts-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4A3F36;
  margin: 0 0 16px;
}

.dscf-lts-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4A3F36;
  margin: 8px 0 16px;
}

/* Buttons */
.dscf-lts-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.05s ease;
  margin: 4px;
  -webkit-appearance: none;
  appearance: none;
}

.dscf-lts-btn-primary {
  background: #B8232D;
  color: #FFFFFF;
}

.dscf-lts-btn-primary:hover {
  background: #8A1820;
}

.dscf-lts-btn-ghost {
  background: transparent;
  color: #1A3D2E;
  border: 1.5px solid rgba(26, 61, 46, 0.2);
}

.dscf-lts-btn-ghost:hover {
  background: rgba(26, 61, 46, 0.05);
}

.dscf-lts-btn-record {
  background: #1A3D2E;
  color: #FFFFFF;
}

.dscf-lts-btn-record:hover {
  background: #0F2A1E;
}

.dscf-lts-btn-recording {
  background: #B8232D !important;
  animation: dscf-lts-pulse 1.2s ease-in-out infinite;
}

@keyframes dscf-lts-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 35, 45, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(184, 35, 45, 0); }
}

.dscf-lts-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Video preview */
.dscf-lts-preview {
  width: 100%;
  max-width: 640px;
  max-height: 480px;
  background: #1A1410;
  border-radius: 8px;
  display: block;
  margin: 0 auto 16px;
}

/* Status bar */
.dscf-lts-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #4A3F36;
  margin-bottom: 16px;
}

.dscf-lts-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #B8B8B8;
  display: inline-block;
  flex-shrink: 0;
}

.dscf-lts-status-dot-active {
  background: #B8232D;
  animation: dscf-lts-blink 1s ease-in-out infinite;
}

@keyframes dscf-lts-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.dscf-lts-status-text {
  font-weight: 600;
  color: #1A1410;
}

.dscf-lts-timer {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #4A3F36;
  margin-left: auto;
  margin-right: 0;
}

/* Controls row */
.dscf-lts-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

/* Messages */
.dscf-lts-msg {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  text-align: left;
}

.dscf-lts-msg:empty {
  display: none;
}

.dscf-lts-msg-info {
  background: rgba(26, 61, 46, 0.05);
  color: #1A3D2E;
  border: 1px solid rgba(26, 61, 46, 0.15);
}

.dscf-lts-msg-error {
  background: rgba(184, 35, 45, 0.05);
  color: #8A1820;
  border: 1px solid rgba(184, 35, 45, 0.2);
}

/* Fallback file input */
.dscf-lts-fallback-input {
  display: block;
  margin: 12px auto;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 8px;
}

.dscf-lts-recorder-fallback {
  padding: 16px;
}

/* Progress bar */
.dscf-lts-progress {
  width: 100%;
  max-width: 480px;
  height: 16px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 16px auto 8px;
}

.dscf-lts-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #B8232D 0%, #E3B85A 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.3s ease;
}

.dscf-lts-progress-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1A3D2E;
  margin-top: 4px;
}

/* Success state */
.dscf-lts-success {
  background: rgba(26, 61, 46, 0.05);
  border-color: rgba(26, 61, 46, 0.2);
}

.dscf-lts-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1A3D2E;
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto 16px;
}

/* Mobile */
@media (max-width: 600px) {
  .dscf-lts-recorder-wrap {
    padding: 16px;
  }
  .dscf-lts-preview {
    max-width: 100%;
  }
  .dscf-lts-status {
    flex-direction: column;
    gap: 6px;
  }
  .dscf-lts-timer {
    margin: 0;
  }
}


/* ==========================================================================
   19 — EXPERIENCE HUB EVENT STRIPS
   ==========================================================================
   Wrapper for the [dscf_appearances_grid] shortcode output on the
   Experience Hub page. The cards themselves inherit styling from
   dscf-appearances.css (.dscf-appr-card --compact).

   IMPORTANT: dscf-appearances.css scopes its CSS variables
   (--appr-gold, --appr-cranberry, --appr-ink, etc.) to
   .dscf-appr-single and .dscf-appr-archive — which only exist on the
   appearance CPT pages. On the hub these wrappers don't exist, so the
   variables would be undefined and the badge backgrounds + title colors
   would collapse to nothing. We re-declare them here so they cascade
   into every .dscf-appr-card descendant.

   Desktop: 4 columns
   Tablet:  2 columns
   Phone:   1 column
   ========================================================================== */

.dscf-hub-events-grid {
  /* Re-declare the variables dscf-appearances.css needs */
  --appr-cranberry: #B8232D;
  --appr-evergreen: #1A3D2E;
  --appr-gold: #E3B85A;
  --appr-cream: #FAF5EC;
  --appr-ink: #1A1410;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) {
  .dscf-hub-events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dscf-hub-events-grid { grid-template-columns: 1fr; }
}