/* Custom Styles outside of Tailwind configs */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800&display=swap");

:root {
  overflow-x: hidden;
}

/* ========================
   NEWS CARD TITLE STYLES
   Inter Tight 800 + Navy
   ======================== */
.news-title {
  font-family: "Inter Tight", Arial, Helvetica, sans-serif;
  font-weight: 800;
  color: rgb(9, 54, 94);
  line-height: 1.25;
}
.news-title-light {
  font-family: "Inter Tight", Arial, Helvetica, sans-serif;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}
/* Ticker Animation */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  box-sizing: content-box;
}

.ticker-move {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  animation: ticker 40s linear infinite;
}

.ticker-move:hover {
  animation-play-state: paused;
}

@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.left-shadow::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 10px;
  background: linear-gradient(
    to right,
    rgba(27, 58, 122, 1),
    rgba(27, 58, 122, 0)
  );
}

/* Hide scrollbar for category links */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Base styles for Prose typography */
.prose p {
  margin-bottom: 1.5em;
  color: #475569;
}
.prose strong {
  color: #1e293b;
  font-weight: 600;
}

/* ===========================
   MOBILE RESPONSIVE OVERRIDES
   =========================== */

/* Smooth horizontal scroll for pills/cards */
.snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-x > * {
  scroll-snap-align: start;
}

/* Quick links pill bar - mobile */
.quick-links-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 8px 8px 8px;
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  transition: color 0.2s;
  flex-shrink: 0;
  font-family: inherit;
}
.quick-links-pill:hover {
  color: #ffffff;
}
.quick-links-pill.active {
  color: #ffffff;
}
.quick-links-pill.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 8px;
  right: 8px;
  height: 3px;
  background-color: #ed1b24;
}

/* Mobile card article list - thumb left, text right */
@media (max-width: 767px) {
  /* Global mobile padding reduction */
  .section-mobile-pad {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Hero section on mobile: stacked */
  #hero-left {
    display: none !important;
  }

  /* More news dark section: single column on mobile */
  #more-news-container {
    grid-template-columns: 1fr !important;
  }

  /* Economy scroll: reduce card width */
  #economy-container a {
    width: 220px !important;
  }

  /* Business focus top: single col on small */
  #business-focus-top {
    grid-template-columns: 1fr !important;
  }
  #business-focus-bottom {
    grid-template-columns: 1fr !important;
  }

  /* Just-in grid: single column on mobile */
  #just-in-grid {
    grid-template-columns: 1fr !important;
  }

  /* What to read container: stack */
  #what-to-read-container {
    flex-direction: column !important;
  }

  /* Featured grid: single column on mobile */
  #featured-container {
    grid-template-columns: 1fr !important;
  }

  /* Improve touch targets for nav items */
  .mobile-menu a {
    min-height: 48px;
  }
}

/* Mobile sticky header fix - ensure proper height */
@media (max-width: 1023px) {
  header {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}