body { font-family: 'PPNeueMontreal-Book'; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: 'PPNeueMontreal-Bold'; }
b, strong { font-family: 'PPNeueMontreal-Bold'; }

@font-face {
  font-family: 'Canela-Condensed-Light';
  src: url('../../Contents/Assets/Fonts/CanelaCondensed-Light.otf') format('opentype');
}

@font-face {
  font-family: 'PPNeueMontreal-Bold';
  src: url('../../Contents/Assets/Fonts/PPNeueMontreal-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'PPNeueMontreal-Book';
  src: url('../../Contents/Assets/Fonts/PPNeueMontreal-Book.otf') format('opentype');
}

@font-face {
  font-family: 'Roc-Grotesk-Compressed-Extra-Bold';
  src: url('../../Contents/Assets/Fonts/Roc-Grotesk-Compressed-Extra-Bold.otf') format('opentype');
}


.carousel-slide-headline,
div.carousel-slide-headline,
.h1.carousel-slide-headline,
.carousel-slide h1,
.carousel-slide h2 {
  font-family: 'Roc-Grotesk-Compressed-Extra-Bold' !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em;
  font-size: 5.6rem !important;
  line-height: 1.05 !important;
  color: #2c2c2c; /* optional: ensures dark text on light background */
}

@media (min-width: 1200px) {
  div.h1.carousel-slide-headline {
    font-size: 6rem !important;
  }
}

/* Custom button color just for the hero section ("Welcome [Name]") */
.carousel-content-container .btn.btn-primary {
  background-color: #DEF45C !important;  /* button color */
  color: #2c2c2c !important;             /* text color */
  border: none !important;
}

.carousel-content-container .btn.btn-primary:hover {
  background-color: #9bc3cc !important;  /* slightly darker hover color */
  color: #000 !important;
}


/* 1) Outer tile background = cream */
.tiles .mag-tile-card,
.tiles .mag-tile-card-with-description,
.mag-tile-card,
.mag-tile-card-with-description {
  background: #f7f2e9 !important; /* AEP cream */
}

/* 2) Remove the small rounded header box inside the tile */
.mag-tile-card .tile-header,
.mag-tile-card .tile-title,
.mag-tile-card .mag-tile-card-header,
.mag-tile-card-with-description .tile-header,
.mag-tile-card-with-description .tile-title,
.mag-tile-card-with-description .mag-tile-card-header,
.mag-tile-card [class*="header"],
.mag-tile-card-with-description [class*="header"] {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Some builds add the pill via pseudo-elements; turn those off too */
.mag-tile-card .tile-header::before,
.mag-tile-card .tile-header::after,
.mag-tile-card .tile-title::before,
.mag-tile-card .tile-title::after,
.mag-tile-card .mag-tile-card-header::before,
.mag-tile-card .mag-tile-card-header::after,
.mag-tile-card-with-description .tile-header::before,
.mag-tile-card-with-description .tile-header::after,
.mag-tile-card-with-description .tile-title::before,
.mag-tile-card-with-description .tile-title::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* === TILE TYPOGRAPHY ONLY (no layout/box/shadow changes) === */

/* Tile titles → Canela */
.tiles-container .mag-tile-card h4.tile-header,
.tiles-container .mag-tile-card-with-description h4.tile-header,
.mag-tile-card h4.tile-header,
.mag-tile-card-with-description h4.tile-header,
h4.tile-header {
  font-family: 'Canela-Condensed-Light', 'Canela', serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
  font-size: clamp(20px, 2.2vw, 28px) !important; /* adjustable */
  line-height: 1.2 !important;
}

/* Tile body copy & links → PPNeueMontreal */
.tiles-container .mag-tile-card p,
.tiles-container .mag-tile-card-with-description p,
.tiles-container .mag-tile-card a,
.tiles-container .mag-tile-card-with-description a,
.mag-tile-card p,
.mag-tile-card a,
.mag-tile-card-with-description p,
.mag-tile-card-with-description a {
  font-family: 'PPNeueMontreal-Book', sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* (Safety) Keep the pill from reappearing—no visual change if you already removed it */
.tiles-container .tile-header,
.mag-tile-card .tile-header,
.mag-tile-card-with-description .tile-header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
h4.tile-header {
  letter-spacing: 0 !important;
  margin-bottom: 0.25rem !important;
}
.mag-tile-card p,
.mag-tile-card-with-description p {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
.mag-tile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

/* === Apply Roc Grotesk to section headings === */
#mainCol h1,
#mainCol h2,
#mainCol .page-component-container > h2,
#mainCol .components-container > h2,
#mainCol .content-width > h2,
#sidebarCol h2,
#sidebarCol .widget-title,
#sidebarCol .widget-title > h2 {
  font-family: 'Roc-Grotesk-Compressed-Extra-Bold' !important;
  font-weight: normal !important;
  letter-spacing: 0.01em !important;
  line-height: 1.1 !important;
  text-transform: none !important; /* change to uppercase if you want caps */
  color: #2c2c2c !important;
}

/* Keep the tile/card title pills in Canela */
.mag-tile-card .tile-header,
h4.tile-header {
  font-family: 'Canela-Condensed-Light' !important;
  font-weight: normal !important;
}

/* === Force Roc Grotesk Compressed headings in widgets === */
#sidebarCol h1.widget-title,
#sidebarCol h2.widget-title,
#sidebarCol .widget-title h2,
#mainCol h1.widget-title,
#mainCol h2.widget-title,
#mainCol .widget-title h2,
#sidebarCol h2,
#mainCol h2.section-title,
#mainCol h2,
.widget-title,
.widget-title > h2 {
  font-family: 'Roc-Grotesk-Compressed-Extra-Bold' !important;
  font-weight: normal !important;
  text-transform: uppercase !important;
  font-size: 38px !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  color: #2c2c2c !important;
}

/* Reduce space only below the Hometown Week Info heading */
h1:contains("Hometown Week Info"),
h1:has-text("Hometown Week Info") {
  margin-bottom: 0.2em !important;
  padding-bottom: 0 !important;
}

/* Remove padding on the element immediately following it */
h1:contains("Hometown Week Info") + *,
h1:has-text("Hometown Week Info") + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* === MOBILE HERO FIXES — KEEP THESE LAST === */

/* Hide the CTA button on small screens (portrait & landscape) */
@media (max-width: 960px) {
  .carousel-content-container .btn.btn-primary,
  .carousel-slide .btn.btn-primary,
  .carousel-content-container a.btn,
  .carousel-slide a.btn {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Portrait: keep headline, but scale it down */
@media (max-width: 960px) and (orientation: portrait) {
  .carousel-slide h1,
  .carousel-slide .h1,
  .carousel-slide h2,
  .carousel-slide .h2,
  .carousel-slide [class*="headline"],
  .carousel-content-container [class*="headline"] {
    display: block !important;            /* ensure it shows in portrait */
    font-size: clamp(24px, 5.5vw, 40px) !important;
    line-height: 1.05 !important;
    margin: 0.3em 0 !important;
  }
}

/* === MOBILE HERO FIXES — KEEP THESE LAST === */

/* Hide the CTA button on small screens (portrait & landscape) */
@media (max-width: 960px) {
  .carousel-content-container .btn.btn-primary,
  .carousel-slide .btn.btn-primary,
  .carousel-content-container a.btn,
  .carousel-slide a.btn {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Portrait: keep headline, but scale it down */
@media (max-width: 960px) and (orientation: portrait) {
  .carousel-slide h1,
  .carousel-slide .h1,
  .carousel-slide h2,
  .carousel-slide .h2,
  .carousel-slide [class*="headline"],
  .carousel-content-container [class*="headline"] {
    display: block !important;            /* ensure it shows in portrait */
    font-size: clamp(24px, 5.5vw, 40px) !important;
    line-height: 1.05 !important;
    margin: 0.3em 0 !important;
  }
}

/* Landscape: hide the headline completely */
@media (max-width: 960px) and (orientation: landscape) {
  .carousel-slide h1,
  .carousel-slide .h1,
  .carousel-slide h2,
  .carousel-slide .h2,
  .carousel-slide [class*="headline"],
  .carousel-content-container [class*="headline"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}