:root {
  --x-navy: #06213D;
  --x-yellow: #FFC62F;
  --x-cream: #F7F2E8;
  --x-accent: #E5A812;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #FFFFFF;
  color: #06213D;
}

.headline-font {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.editorial-title {
  font-family: 'Merriweather', serif;
}

.handwriting-slogan {
  font-family: 'Caveat', cursive;
}

.video-card-gradient {
  background: linear-gradient(to top, rgba(6, 33, 61, 0.95) 0%, rgba(6, 33, 61, 0.4) 50%, rgba(6, 33, 61, 0.05) 100%);
}

.hero-gradient {
  background: linear-gradient(to top, rgba(6, 33, 61, 0.95) 0%, rgba(6, 33, 61, 0.75) 45%, rgba(6, 33, 61, 0.2) 80%, rgba(6, 33, 61, 0) 100%);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article body — styles content written in the block editor without
   requiring writers to hand-add Tailwind classes to every paragraph. */
.article-body { font-size: 19px; line-height: 1.65; color: #06213D; }
.article-body > * + * { margin-top: 1.35em; }
.article-body h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.3; letter-spacing: -0.015em; color: #06213D; padding-top: 0.6em; border-top: 1px solid rgba(6,33,61,0.15); }
.article-body h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.35; color: #06213D; }
.article-body p { font-size: 18px; }
.article-body a { color: #06213D; text-decoration: underline; text-decoration-color: #FFC62F; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-body strong { font-weight: 700; }
.article-body ul, .article-body ol { padding-left: 1.4em; }
.article-body ul { list-style: none; }
.article-body ul > li { position: relative; padding-left: 1.5em; }
.article-body ul > li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: #FFC62F; border: 2px solid #06213D; }
.article-body ol { list-style: decimal; }
.article-body blockquote { margin: 0; padding: 1.5rem 2rem; background: #06213D; color: #fff; border-top: 4px solid #FFC62F; border-bottom: 4px solid #FFC62F; font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: italic; font-size: 26px; line-height: 1.35; }
.article-body figure { margin: 0; }
.article-body figure img { width: 100%; border-radius: 0.25rem; }
.article-body figcaption { font-size: 13px; color: #43474D; margin-top: 0.5em; }
.article-body .xsns-callout { background: #F8F3E9; border: 1px solid rgba(6,33,61,0.15); border-left: 4px solid #FFC62F; padding: 1.25rem 1.5rem; font-size: 16px; }
.article-body .xsns-callout p:first-child { margin-top: 0; }

/* Live-indicators ticker (Home, magazine layout) */
.ticker-wrapper {
  animation: xsnsTicker 40s linear infinite;
}
.ticker-wrapper:hover {
  animation-play-state: paused;
}
@keyframes xsnsTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.news-card-transition {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.news-card-transition:hover {
  transform: translateY(-4px);
}
/* Sticky header: shrinks on scroll (see header.php inline script) */
#xsns-site-header.is-shrunk .header-top-row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#xsns-site-header.is-shrunk .site-logo {
  height: 2.25rem;
}
#xsns-site-header.is-shrunk .site-slogan {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
#xsns-site-header.is-shrunk .header-socials {
  max-width: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
#xsns-site-header.is-shrunk .header-nav {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.site-slogan {
  max-height: 3rem;
}

/* Weather widget: background + effects vary with real conditions */
.weather-widget {
  background: linear-gradient(135deg, #06213D 0%, #0b3a63 100%);
  transition: background 0.6s ease;
}
.weather-widget.weather-sunny {
  background: linear-gradient(135deg, #06213D 0%, #a9660a 130%);
}
.weather-widget.weather-cloudy {
  background: linear-gradient(135deg, #06213D 0%, #3c4c5e 130%);
}
.weather-widget.weather-fog {
  background: linear-gradient(135deg, #06213D 0%, #556072 130%);
}
.weather-widget.weather-rain {
  background: linear-gradient(135deg, #06213D 0%, #103a5e 130%);
}
.weather-widget.weather-storm {
  background: linear-gradient(135deg, #030a16 0%, #2a1f4d 130%);
}
.weather-widget.weather-snow {
  background: linear-gradient(135deg, #06213D 0%, #4a6b8a 130%);
}
.weather-widget.weather-hot {
  box-shadow: inset 0 0 0 1.5px rgba(255, 140, 30, 0.6);
}
.weather-icon {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

/* Sunny: soft glow in the corner */
.weather-sun-glow {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(255, 198, 47, 0.55) 0%, rgba(255, 198, 47, 0) 70%);
  pointer-events: none;
}

/* Rain / storm: a few soft falling lines */
.weather-rain-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.weather-rain-layer span {
  position: absolute;
  top: -20%;
  width: 1.5px;
  height: 26px;
  background: rgba(255, 255, 255, 0.35);
  animation: xsnsRainFall 1.1s linear infinite;
}
.weather-rain-layer span:nth-child(1) { left: 8%; animation-delay: 0s; }
.weather-rain-layer span:nth-child(2) { left: 20%; animation-delay: 0.3s; }
.weather-rain-layer span:nth-child(3) { left: 34%; animation-delay: 0.6s; }
.weather-rain-layer span:nth-child(4) { left: 48%; animation-delay: 0.15s; }
.weather-rain-layer span:nth-child(5) { left: 61%; animation-delay: 0.45s; }
.weather-rain-layer span:nth-child(6) { left: 74%; animation-delay: 0.75s; }
.weather-rain-layer span:nth-child(7) { left: 86%; animation-delay: 0.2s; }
.weather-rain-layer span:nth-child(8) { left: 95%; animation-delay: 0.55s; }
@keyframes xsnsRainFall {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(140px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-rain-layer span { animation: none; opacity: 0; }
}

.magazine-badge {
  background-color: #FFC62F;
  color: #06213D;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}