/* ==========================================================================
   Morning Edition — landing page
   Custom CSS (everything that doesn't fit cleanly in Tailwind utilities)
   ========================================================================== */

[x-cloak] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'cv11' on;
}

/* Better default focus ring across the page */
:focus-visible {
  outline: 2px solid #d97706;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Phone mockup: hide scrollbar but keep scrollable */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Marquee edge fade */
.mask-edges {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* Smooth in-page anchor offset for the sticky nav */
section[id] {
  scroll-margin-top: 80px;
}

/* Slight serif tightening for big headlines */
h1,
h2,
h3 {
  font-feature-settings: 'liga' on, 'dlig' on, 'ss01' on;
  text-wrap: balance;
}

/* CTA buttons: tighter tap target on touch */
a[href],
button {
  -webkit-tap-highlight-color: transparent;
}

/* Reduced motion: respect user preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tailwind Play CDN: hide banner (it shows in dev only, but silence it) */
body > div[style*='tw-'] {
  display: none !important;
}