/* =====================================================================
   slider.css  —  Page sliders (swap-slider)

   TYPOGRAPHY THEMES
   -----------------
   Each department can pick a slider typeface by adding ONE of the
   following classes to the outer <div class="swap-slider">:

       slider-theme--classic      Lato 900 heading + Lato body
                                  Clean, official, humanist sans
       slider-theme--condensed    Barlow Condensed 800 + Barlow body
                                  Modern, efficient, urban sans
       slider-theme--display      Oswald 700 UPPER + Quicksand body
                                  Bold, friendly, approachable
       slider-theme--editorial    Playfair Display 700 + Lato body
                                  Elegant, formal, magazine serif

   Example:
       <div class="swap-slider slider-theme--classic" role="region" ...>

   If no theme class is present the slider falls back to the default
   (currently the Display theme: Oswald + Quicksand).
   ===================================================================== */

/* Load every theme font in a single Google Fonts request */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@300;400&family=Lato:wght@400;700;900&family=Oswald:wght@700&family=Playfair+Display:wght@700&family=Quicksand:wght@400;600&display=swap');


/* ---------- Theme variables ---------- */

/* Default theme = Display (Oswald + Quicksand).
   A .slider-theme--X class on .swap-slider overrides these. */
.swap-slider {
  --slider-heading-font: 'Oswald', sans-serif;
  --slider-heading-weight: 700;
  --slider-heading-transform: uppercase;
  --slider-heading-tracking: 0.03em;
  --slider-body-font: 'Quicksand', sans-serif;
  --slider-body-weight: 400;
}

.swap-slider.slider-theme--classic {
  --slider-heading-font: 'Lato', sans-serif;
  --slider-heading-weight: 900;
  --slider-heading-transform: none;
  --slider-heading-tracking: 0;
  --slider-body-font: 'Lato', sans-serif;
  --slider-body-weight: 400;
}

.swap-slider.slider-theme--condensed {
  --slider-heading-font: 'Barlow Condensed', sans-serif;
  --slider-heading-weight: 800;
  --slider-heading-transform: uppercase;
  --slider-heading-tracking: 0.04em;
  --slider-body-font: 'Barlow', sans-serif;
  --slider-body-weight: 400;
}

.swap-slider.slider-theme--display {
  /* same as default — listed here so departments can be explicit */
  --slider-heading-font: 'Oswald', sans-serif;
  --slider-heading-weight: 700;
  --slider-heading-transform: uppercase;
  --slider-heading-tracking: 0.03em;
  --slider-body-font: 'Quicksand', sans-serif;
  --slider-body-weight: 400;
}

.swap-slider.slider-theme--editorial {
  --slider-heading-font: 'Playfair Display', Georgia, serif;
  --slider-heading-weight: 700;
  --slider-heading-transform: none;
  --slider-heading-tracking: 0;
  --slider-body-font: 'Lato', sans-serif;
  --slider-body-weight: 400;
}


/* ---------- Slide structure ---------- */

li.slide {
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Desktop: diagonal dark-blue overlay on the right side of the photo */
li.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(14, 30, 70, 0.65),
    rgba(14, 30, 70, 0.95)
  );
  clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 55% 100%);
  pointer-events: none;
}

/* Mobile: blue overlay covers the full image at 70% opacity
   so the centered message reads over any part of the photo */
@media (max-width: 768px) {
  li.slide::after {
    clip-path: none;
    background: rgba(14, 30, 70, 0.7);
  }

  /* An older rule in unslider2.css applies margin-left: 10% to
     .swap-message for 280–759px widths, pushing the centered box
     off-center. Reset it here so the message truly centers. */
  .swap-slider .swap-message {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ---------- Message content ---------- */

.swap-message {
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
}

.swap-logo {
  width: 250px;
  margin-bottom: 15px;
}

/* Eyebrow is theme-agnostic — always the handwritten accent */
.swap-slider .swap-message .swap-eyebrow {
  font-family: 'Shadows Into Light', cursive;
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1.2;
  margin-bottom: 8px;
}

/* Heading — typography pulled from the active theme */
.swap-slider .swap-message h2 {
  font-family: var(--slider-heading-font);
  font-weight: var(--slider-heading-weight);
  text-transform: var(--slider-heading-transform);
  letter-spacing: var(--slider-heading-tracking);
  /* Fluid: 1.75rem (28px) on small phones → 3.75rem (60px) on large screens */
  font-size: clamp(1.75rem, 1rem + 3vw, 3.75rem);
  line-height: 1.05;
  margin: 0 0 12px;
}

/* Body paragraph — typography pulled from the active theme */
.swap-slider .swap-message p:not(.swap-eyebrow) {
  font-family: var(--slider-body-font);
  font-weight: var(--slider-body-weight);
  font-size: 1.5rem;
  line-height: 1.5;
}


/* ---------- Legacy utility classes (deprecated) ----------
   .message-title / .message-txt are no longer applied by the
   normalization script. If they appear in legacy markup that
   hasn't been updated, these rules keep them looking reasonable
   by pulling from the active theme. */
.message-title {
  font-family: var(--slider-heading-font, 'Barlow Condensed'), sans-serif;
  font-weight: var(--slider-heading-weight, 800);
  text-transform: var(--slider-heading-transform, uppercase);
  letter-spacing: var(--slider-heading-tracking, 0.04em);
  font-size: clamp(1.75rem, 1rem + 3vw, 3.75rem);
  line-height: 1.1;
  margin-top: 20px;
}

.message-txt {
  font-family: var(--slider-body-font, 'Barlow'), sans-serif;
  font-weight: var(--slider-body-weight, 300);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
}