/* =========================
   HOLYARD — FULL PROFESSIONAL CSS (REFactor)
   (No duplicates • Stable • Responsive • Clean)
   ========================= */

/* =========================
   THEME
   ========================= */
:root{
  --bg: #f8f8f8;
  --text: #141414;
  --muted: #666;

  --black: #000;
  --white: #fff;

  --pill-dark: #2b2b2b;
  --pill-dark-2: #3a3a3a;

  --card-border: rgba(0,0,0,0.06);
  --card-shadow: 0 18px 45px rgba(0,0,0,0.10);

  --accent-yellow: #facc15;
  --accent-yellow-2: #eab308;
  --accent-yellow-3: #ca8a04;

  --accent-green: #22c55e;
  --accent-green-2: #16a34a;

  --blue: #6cc5ff;
  --blue-hover: #559cd9;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden; /* prevents “side scroll” glitches */
}

body{
  font-family: "Century Gothic", system-ui, -apple-system, Arial, sans-serif;
  background-color: var(--bg);
  background-image: none;
  color: var(--text);
}

/* =========================
   FLOATING BACKGROUND ICONS
   ========================= */
#hol-yard-container{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hol-yard{
  position: absolute;
  width: 200px;
  height: 200px;
  animation: floatRotate 6s ease-in-out infinite;
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.5));
}

@keyframes floatRotate{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-20px) rotate(180deg); }
}

/* =========================
   HERO
   ========================= */
.header{
  background-color: #ff06060f;
  background-image: url("https://res.cloudinary.com/dlt7z5poq/image/upload/f_auto,q_auto/hero_header_white_mqdqpk.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 250px;
  padding: 20px 0;
  z-index: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner{
  width: 100%;
  max-width: 980px;
  padding: 0 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-title{
  margin: 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 10px 26px rgba(0,0,0,0.14);
}

.hero-title-accent{
  display: block;
  margin-top: 6px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(
    90deg,
    var(--accent-green-2) 0%,
    var(--accent-green) 20%,
    var(--accent-yellow) 50%,
    var(--accent-yellow-2) 75%,
    var(--accent-yellow-3) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.15);
}

.hero-subtitle{
  margin: 14px auto 0;
  max-width: 720px;
  font-size: 15px;
  font-weight: 600;
  color: #2f2f2f;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 8px 20px rgba(0,0,0,0.10);
}

@media (max-width: 600px){
  .hero-title{ font-size: 28px; }
  .hero-title-accent{ font-size: 24px; }
  .hero-subtitle{ font-size: 13px; }
}

/* =========================
   NAV
   ========================= */
.nav{
  background: var(--black);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-inner{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nav-left, .nav-right{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav-center{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transform-origin: center;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.brand:hover{
  transform: scale(1.06);
  filter: drop-shadow(0 0 12px rgba(255,230,0,0.55));
  transition-timing-function: cubic-bezier(.2,.9,.2,1.35);
}

.logo-icon{
  height: 52px;
  width: auto;
  display: block;
}

.brand-text{
  display: flex;
  flex-direction: column;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "Arial Black", Impact, sans-serif;
  color: var(--white);
  text-shadow: 0 6px 12px rgba(0,0,0,0.55);
}
.brand-top{ font-size: 24.5px; font-weight: 900; }
.brand-bottom{ font-size: 15px; font-weight: 900; margin-top: 2px; }

.nav-links{
  display: flex;
  align-items: center;
  height: 70px;
}

.nav-links a{
  color: var(--white);
  text-decoration: none;
  padding: 0 14px;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  line-height: 70px;
  transition: color 0.25s ease;
}

.nav-links > a::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-right: 2px dotted var(--white);
  height: 18px;
}
.nav-links > a:last-of-type::after{ display:none; }
.nav-links > .dropdown::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-left: 2px dotted var(--white);
  height: 18px;
}

.nav-links a span{
  display: inline-block;
  transition: transform 0.25s ease;
}
.nav-links a:hover span{ transform: scale(1.1); }
.nav-links a:hover{ color: #ffe600; }

.cta-button{
  height: 38px;
  padding: 0 18px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.06);
  color: #ffe600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.25s ease;
}
.cta-button:hover{
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 25px rgba(255,230,0,0.35);
  transition-timing-function: cubic-bezier(.2,.9,.2,1.35);
}

/* Dropdown */
.dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 70px;
}
.dropdown-trigger{ display: inline-flex; align-items: center; height: 70px; }

.dropdown-content{
  display: none;
  position: absolute;
  top: 70px;
  left: 0;
  background: var(--white);
  min-width: 170px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
  border-radius: 10px;
  overflow: hidden;
  z-index: 2000;
}
.dropdown-content a{
  color: var(--black);
  padding: 12px 14px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
}
.dropdown-content a:hover{
  background: var(--black);
  color: var(--white);
}
.dropdown.is-keyboard-open .dropdown-content,
.dropdown:hover:not(.is-keyboard-closed) .dropdown-content,
.dropdown:focus-within:not(.is-keyboard-closed) .dropdown-content{ display:block; }

.arrow{
  margin-left: 8px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--white);
}

/* Mobile toggle */
.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span{
  display:block;
  width: 20px;
  height: 2px;
  background: var(--white);
}

@media (max-width: 900px){
  .nav-inner{
    max-width: 100%;
    height: auto;
    padding: 12px 16px;
    flex-wrap: wrap;
  }
  .nav-toggle{ display:inline-flex; }

  .nav-center{
    width: 100%;
    order: 3;
    justify-content: flex-start;
    display: none;
  }
  .nav-center.is-open{ display:flex; }

  .nav-links{
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
  }
  .nav-links a{
    width: 100%;
    line-height: 1.2;
    padding: 12px 10px;
  }
  .nav-links > a::after{ display:none; }
  .nav-links > .dropdown::before{ display:none; }

  .dropdown{ width:100%; height:auto; }
  .dropdown-trigger{ width:100%; height:auto; padding: 12px 10px; }
  .dropdown-content{
    position: static;
    display: none;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 8px;
  }
  .dropdown:hover:not(.is-keyboard-closed) .dropdown-content{ display:none; }
  .dropdown.is-keyboard-open .dropdown-content,
  .dropdown:focus-within:not(.is-keyboard-closed) .dropdown-content{ display:block; }
}

/* =========================
   CONTENT
   ========================= */
.content{ text-align:center; padding: 20px; }

.section-title{
  font-size: 28px;
  font-weight: 900;
  margin: 20px 0 30px;
}

/* =========================
   FLAT GRID (Articles/Intel/Favorites)
   ========================= */
.articles-container,
.interviews-container,
.favorites-container{
  display: flex;
  justify-content: center;
  gap: clamp(28px, 4vw, 52px);
  flex-wrap: wrap;
  align-items: flex-start;
  padding-bottom: 10px;
}

.article, .interview, .favorite{
  width: min(100%, 320px);
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.thumb-link{ display:block; }

.article img,
.interview img,
.favorite img{
  width: 100%;
  max-width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 0;
  display: block;
  margin: 0 auto 18px;
}

.info-link{
  display:block;
  text-decoration:none;
  color: var(--black);
}

.card-title{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  margin: 0 auto 8px;
  text-align:center;
}

.card-meta{
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  text-align:center;
  font-weight: 500;
}

/* Trending embed */
.viral-mini-embed{
  width: 440px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  display: block;
  margin: 0 auto 18px;
}
.viral-mini-link{
  display:block;
  text-decoration:none;
  color: var(--black);
}

/* =========================
   FLAT CARD SYSTEM
   ========================= */
.flat-card,
.flat-card-box,
.story-card,
.article-card.flat-card,
.feature-card,
.service-card,
.heat-card,
.media-card,
.route-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.article.flat-card,
.interview.flat-card,
.favorite.flat-card,
.latest-production .forecast-right.flat-card {
  padding: 12px;
}

.flat-card img,
.flat-card iframe,
.flat-card video,
.media-card img,
.media-card iframe,
.media-card video {
  border-radius: 4px;
}

.resource-card.flat-card,
.feed-story.flat-card {
  overflow: hidden;
}

/* Blog editorial reset: keep the card classes, remove the dashboard tiles. */
.blog-page .article.flat-card,
.blog-page .interview.flat-card,
.blog-page .favorite.flat-card,
.blog-page .article.flat-card.flat-card-box,
.blog-page .interview.flat-card.flat-card-box,
.blog-page .favorite.flat-card.flat-card-box,
.blog-page .article.media-card,
.blog-page .interview.media-card,
.blog-page .favorite.media-card,
.blog-page .article.route-card,
.blog-page .interview.route-card,
.blog-page .favorite.route-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.blog-page .article .thumb-link,
.blog-page .interview .thumb-link,
.blog-page .favorite .thumb-link {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.blog-page .article.flat-card img,
.blog-page .interview.flat-card img,
.blog-page .favorite.flat-card img,
.blog-page .media-card img {
  border-radius: 0;
  box-shadow: none;
}

.blog-page .article.flat-card img {
  object-fit: contain;
}

.blog-page .article .info-link,
.blog-page .interview .info-link,
.blog-page .favorite .info-link {
  display: block;
  margin-top: 0;
  padding: 0 2px;
}

.blog-page .favorite .favorite-shop-image {
  object-fit: contain;
  background: transparent;
}

.blog-page .shop-product-rotator {
  position: relative;
}

.blog-page .shop-product-rotator .thumb-link {
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-page .shop-rotator-image,
.blog-page .shop-rotator-info {
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.blog-page .shop-product-rotator.is-changing .shop-rotator-image,
.blog-page .shop-product-rotator.is-changing .shop-rotator-info {
  opacity: 0.18;
  transform: translateY(2px);
}

.blog-page .shop-rotator-dots {
  min-height: 24px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.blog-page .shop-rotator-dots:empty {
  display: none;
}

.blog-page .shop-rotator-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.blog-page .shop-rotator-dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

.blog-page .shop-rotator-dots button.is-active::before {
  background: rgba(0, 0, 0, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .blog-page .shop-rotator-image,
  .blog-page .shop-rotator-info {
    transition: none;
  }

  .blog-page .hol-yard,
  .blog-page .spinning-logo {
    animation: none;
  }

  .blog-page .popup-container {
    animation: none;
    transition: none;
    opacity: 0;
    visibility: hidden;
  }
}

.blog-page .latest-production,
.blog-page .new-section {
  background: transparent;
}

.blog-page .latest-production .production-details,
.blog-page .new-section-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.blog-page .new-section-image img {
  border-radius: 0;
  box-shadow: none;
}

.blog-page .new-section-image img:hover {
  box-shadow: none;
}

/* =========================
   LATEST PRODUCTION
   ========================= */
.latest-production{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 40px 0;
  padding: 100px 0;
  background-color: var(--bg);
}

.production-details{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 20px;
  width: 75%;
  max-width: 1200px;
}

.latest-production .production-details,
.new-section-content,
.interviews-container .interview,
.favorites-container .favorite {
  box-sizing: border-box;
}

.latest-production .forecast-right.forecast-wide {
  border-radius: 6px;
}

.hoodie-feature {
  padding: 84px 0;
}

.hoodie-feature-grid {
  align-items: center;
}

.hoodie-feature .production-text {
  max-width: 34%;
}

.hoodie-feature .production-header h3 {
  font-weight: 800;
}

.hoodie-showcase-visual {
  flex: 1;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.hoodie-product-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 560px);
  min-height: 420px;
  color: inherit;
  text-decoration: none;
}

.hoodie-product-cutout {
  display: block;
  width: min(82vw, 500px);
  max-height: 520px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 34px 42px rgba(0, 0, 0, 0.16));
}

@media (max-width: 600px) {
  .hoodie-feature .hoodie-feature-grid {
    flex-direction: column;
    width: calc(100% - 32px);
  }

  .hoodie-feature .production-text {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .hoodie-feature .hoodie-showcase-visual {
    width: 100%;
  }
}

.shop-visual-placeholder {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f7f8ef 55%, #eaf7cc 100%);
  color: #141414;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.production-text{
  max-width: 35%;
  margin-right: 20px;
}

.production-header h3{
  font-size: 19px;
  font-weight: 300;
  margin-left: 30px;
  color: #1b1b1b;
  display:flex;
  align-items:center;
}

.holyard-logo{
  width: 50px;
  height: auto;
  margin-left: 10px;
}

.shop-product-card {
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  margin: 0 auto;
  padding: 18px;
  color: var(--black);
  text-align: center;
  text-decoration: none;
}

.shop-product-card img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #080808;
}

.shop-product-kicker {
  color: #0f7a3a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shop-product-card strong {
  font-size: 22px;
  line-height: 1.15;
}

.shop-product-hero {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  background: #080808;
  border-radius: 4px;
}

.production-text h4,
.production-text p,
.watch-now-button{ text-align:left; }

.production-text h4{
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 30px;
}

.production-text p{
  font-size: 15px;
  color: #555;
  margin: 0 0 20px 30px;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}

.watch-now-button{
  display:inline-block;
  padding: 10px 20px;
  background-color: var(--blue);
  color: var(--white);
  text-decoration:none;
  border-radius: 5px;
  transition: background-color 0.25s ease;
  margin: 20px 0 0 30px;
  font-weight: 300;
}
.watch-now-button:hover{ background-color: var(--blue-hover); }

/* =========================
   FORECAST BOX (WIDE + PREMIUM)
   ========================= */
.forecast-right.forecast-wide{
  width: 760px;
  max-width: 100%;
}

@media (min-width: 1300px){
  .forecast-right.forecast-wide{ width: 820px; }
}
@media (max-width: 900px){
  .forecast-right.forecast-wide{ width: 100%; }
}

.forecast-right.forecast-wide .forecast-ui{
  width: 100%;
  border-radius: 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 14px;
}

/* Top pills row */
.forecast-right.forecast-wide .fx-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.forecast-right.forecast-wide .fx-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pill-dark);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  letter-spacing: .4px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
.forecast-right.forecast-wide .fx-ico{ font-size: 14px; }

.forecast-right.forecast-wide .fx-brand{ background: var(--pill-dark); }
.forecast-right.forecast-wide .fx-week{ background: var(--pill-dark); font-weight: 900; opacity: 1; }

@media (max-width: 520px){
  .forecast-right.forecast-wide .fx-week{
    width: 100%;
    justify-content: center;
  }
}

/* Temp bar */
.forecast-right.forecast-wide .fx-tempbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: linear-gradient(90deg,
    rgba(250,204,21,0.55),
    rgba(250,204,21,0.35),
    rgba(34,197,94,0.16)
  );
  border: 1px solid rgba(250,204,21,0.35);
}

.forecast-right.forecast-wide .fx-temp{
  font-size: 38px;
  font-weight: 1000;
  color: var(--white);
  text-shadow: 0 10px 25px rgba(0,0,0,0.18);
}

.forecast-right.forecast-wide .fx-status{
  font-size: 14px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

/* Intel bars */
.forecast-right.forecast-wide .fx-intel{
  display:grid;
  gap: 10px;
  margin-bottom: 14px;
}

.forecast-right.forecast-wide .fx-intelbar,
.forecast-right.forecast-wide .fx-intel p{
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    rgba(250,204,21,0.85),
    rgba(250,204,21,0.65),
    rgba(34,197,94,0.35)
  );
  color: #1b1b1b;
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.2px;
}

/* Accordion */
.forecast-right.forecast-wide .fx-accordions{
  display:grid;
  gap: 12px;
}

.forecast-right.forecast-wide .fx-group{
  border-radius: 16px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(34,197,94,0.28);
  overflow: hidden;
}

.forecast-right.forecast-wide .fx-group > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-radius: 999px;
  margin: 12px;
  background: var(--pill-dark);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,0.90);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.forecast-right.forecast-wide .fx-group > summary::-webkit-details-marker{ display:none; }

.forecast-right.forecast-wide .fx-caret{
  font-size: 18px;
  opacity: .75;
  transform: rotate(0deg);
  transition: transform .18s ease;
}
.forecast-right.forecast-wide details[open] .fx-caret{ transform: rotate(90deg); }

.forecast-right.forecast-wide .fx-body{ padding: 0 12px 12px; }

.forecast-right.forecast-wide .fx-list{
  display:grid;
  gap: 10px;
  max-height: 170px;
  overflow: auto;
  padding-right: 6px;
}
.forecast-right.forecast-wide .fx-list::-webkit-scrollbar{ width: 10px; }
.forecast-right.forecast-wide .fx-list::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.25);
  border-radius: 999px;
}
.forecast-right.forecast-wide .fx-list::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
}

.forecast-right.forecast-wide .fx-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #5c5959;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: var(--white);
  font-weight: 900;
}

.forecast-right.forecast-wide .fx-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}
.forecast-right.forecast-wide .fx-rank{
  opacity: 0.9;
  font-weight: 1000;
}

.forecast-right.forecast-wide .fx-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
  background: linear-gradient(
    90deg,
    #ffcc00 0%,
    var(--accent-yellow) 30%,
    var(--accent-green-2) 70%,
    #0f7a3a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  font-weight: 950;
  letter-spacing: 0.3px;

  -webkit-text-stroke: 0.55px rgba(0,0,0,0.35);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 8px 20px rgba(0,0,0,0.35);
}

.forecast-right.forecast-wide .fx-right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 0 auto;
  opacity: 0.9;
}

/* Forecast full-page buttons */
.fx-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 12px;
}

.fx-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(0,0,0,0.88);
  color: var(--white);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
}

.fx-mini{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .3px;
  color: rgba(0,0,0,0.75);
  text-decoration: none;
}

.forecast-page-wrap{
  width: 100%;
  display:flex;
  justify-content:center;
  padding: 10px 0 40px;
}

.forecast-right.forecast-wide.forecast-full{
  width: min(1400px, calc(100vw - 50px));
  max-width: 100%;
}

@media (max-width: 520px){
  .forecast-right.forecast-wide .fx-temp{ font-size: 32px; }
  .forecast-right.forecast-wide .fx-title{ max-width: 240px; }
  .fx-actions{ flex-direction: column; align-items: stretch; }
  .fx-mini{ text-align:center; }
}

.fx-actions a,
.fx-cta,
.fx-mini{
  text-decoration: none !important;
}
.fx-actions a:hover,
.fx-cta:hover,
.fx-mini:hover,
.fx-actions a:focus,
.fx-cta:focus,
.fx-mini:focus{
  text-decoration: none !important;
}

/* =========================
   NEW SECTION
   ========================= */
.new-section{
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 40px 0;
  padding: 100px 0;
  background-color: var(--bg);
}

.new-section-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 30px;
  width: 75%;
  max-width: 1200px;
  flex-wrap: wrap;
}

.new-section-text{
  flex: 1 1 380px;
  max-width: 520px;
}

.new-section-text h3{
  font-size: 24px;
  font-weight: 800;
  color: #1b1b1b;
  margin: 0 0 14px;
}

.new-section-text p{
  font-size: 19px;
  color: #555;
  font-weight: 300;
  margin: 0;
}

.visit-website-button{
  display:inline-block;
  padding: 10px 20px;
  background-color: var(--blue);
  color: var(--white);
  text-decoration:none;
  border-radius: 5px;
  transition: background-color 0.25s ease;
  font-weight: 300;
  margin-top: 20px;
}
.visit-website-button:hover{ background-color: var(--blue-hover); }

.new-section-image{
  flex: 1 1 420px;
  display:flex;
  justify-content:center;
}

.new-section-image img{
  width: min(450px, 100%);
  height: auto;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  object-fit: cover;
}

.new-section-image img:hover{
  transform: scale(1.03);
  box-shadow: 0 0 28px rgba(0,0,0,0.45);
}

/* =========================
   FOOTER (RESTORED)
   ========================= */
footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 12px 0 18px;
  margin-top: 0;
}

.footer-container {
  display: flex;
  justify-content: center;
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 32px 16px 24px;
}

.footer-shell {
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo {
  display: flex;
  justify-content: center;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-logo img {
  width: 112px;
  height: auto;
  display: block;
}

.footer-social-media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-social-media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
}

.footer-social-media a img {
  width: 28px;
  height: auto;
  margin: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.footer-social-media a img:hover {
  transform: scale(1.15);
  opacity: 0.92;
}

.footer-heading {
  margin: 0;
  max-width: 28ch;
  color: #fff;
  font-family: 'Century Gothic';
  font-size: 22px;
  line-height: 1.2;
}

.footer-newsletter,
.footer-search {
  width: min(100%, 360px);
}

#newsletter-form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

#newsletter-form input[type="email"]::placeholder {
  color: #b0b0b0;
  font-family: 'Century Gothic';
}

#newsletter-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  margin-right: 0;
  box-sizing: border-box;
}

#newsletter-form button {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 22px;
  border: none;
  background-color: #b7ee53;
  color: #000000;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
}

#newsletter-form button:hover {
  filter: brightness(1.03);
}

#search {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  margin-top: 0;
  border: 3px solid #ffffff;
  border-radius: 8px;
  font-size: 16px;
  color: #333;
  background-color: #b7ee53;
}

#search::placeholder {
  color: #fff;
  font-family: 'Century Gothic';
  font-weight: bold;
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

.footer-links a {
  color: #99caff;
  text-decoration: none;
  font-family: 'Century Gothic';
  display: inline-block;
}

.footer-links a:hover {
  color: #c9e7ff;
}

.footer-copy {
  margin-top: 0;
}

.footer-copy p {
  color: #ffffff;
  margin: 0;
  font-family: 'Comic Sans MS';
}

/* =========================
   POPUP
   ========================= */
.popup-container{
  position: fixed;
  inset: 0;
  background-color: rgb(255,255,0);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 1500;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  animation: popupAutoDismiss 1.1s ease 0.85s forwards;
  transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out;
}

.spinning-logo{
  width: 100px;
  animation: spin 2s linear infinite;
}
@keyframes spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

@keyframes popupAutoDismiss{
  0%{ opacity: 1; visibility: visible; }
  99%{ opacity: 0; visibility: visible; }
  100%{ opacity: 0; visibility: hidden; }
}

/* =========================
   FULL WIDTH CINEMA ARTICLE PAGE
   ========================= */
.article-page{
  max-width: 980px;
  margin: 0 auto 100px;
  text-align: left;
}

.article-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--black);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  overflow:hidden;
}
.article-hero img{
  width: 100%;
  height: 540px;
  object-fit: cover;
  display:block;
}
.article-hero::before,
.article-hero::after{
  content:"";
  display:block;
  height: 24px;
  background: var(--black);
}

.article-page-title{
  margin: 35px 20px 12px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1.1;
  text-align:center;
}
.article-page-meta{
  margin: 0 20px 35px;
  text-align:center;
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
}
.article-body{
  padding: 0 20px;
  font-size: 18px;
  line-height: 1.8;
  color: #222;
}
.article-body p{ margin-bottom: 20px; }

.article-watch{
  display:inline-block;
  margin-top: 20px;
  padding: 14px 22px;
  background: var(--blue);
  color: var(--white);
  text-decoration:none;
  border-radius: 6px;
  font-weight: 700;
}
.article-watch:hover{ background: var(--blue-hover); }

@media (max-width: 768px){
  .article-hero img{ height: 320px; }
  .article-page-title{ font-size: 30px; }
}

@media (max-width: 520px){
  .footer-container {
    padding: 28px 14px 22px;
  }

  .footer-shell {
    width: 100%;
    gap: 14px;
  }

  .footer-heading {
    max-width: none;
    font-size: 20px;
  }

  #newsletter-form {
    flex-direction: column;
  }

  #newsletter-form input[type="email"],
  #newsletter-form button {
    width: 100%;
  }

  .footer-newsletter,
  .footer-search {
    width: 100%;
  }
}

/* =========================
   NO HOVER UNDERLINES
   ========================= */
.articles-container a,
.interviews-container a,
.favorites-container a,
.viral-mini-link,
.info-link,
.thumb-link,
.footer-links a{
  text-decoration: none !important;
}
.articles-container a:hover,
.interviews-container a:hover,
.favorites-container a:hover,
.viral-mini-link:hover{
  opacity: 0.88;
}

/* Scoped overflow guard for the main blog/home route. */
@media (max-width: 900px) {
  body.blog-page,
  body.blog-page .content,
  body.blog-page .nav-inner,
  body.blog-page .nav-center,
  body.blog-page .nav-links,
  body.blog-page .articles-container,
  body.blog-page .interviews-container,
  body.blog-page .favorites-container,
  body.blog-page .production-details,
  body.blog-page .new-section-content {
    max-width: 100%;
    min-width: 0;
  }

  body.blog-page img,
  body.blog-page video,
  body.blog-page iframe {
    max-width: 100%;
  }

  body.blog-page .hero-title,
  body.blog-page .hero-subtitle,
  body.blog-page .section-title,
  body.blog-page .card-title,
  body.blog-page .card-meta,
  body.blog-page .text-container {
    overflow-wrap: anywhere;
  }
}