/**
 * TDN Marquee Mobile Enhance — front-end overrides only.
 * Scoped to mobile / tablet; leaves desktop Marquee layout alone.
 */

/* -------------------------------------------------------------------------
   1. Sticky header + WP admin bar on small screens
   WP sets #wpadminbar to position:absolute below 783px, so it scrolls away
   while .site-header stays at top:46px — content leaks through the gap.
   Keep the admin bar fixed and pin the site header under it.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
  html #wpadminbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }

  body.admin-bar {
    padding-top: 46px;
    scroll-padding-top: calc(var(--header-h, 68px) + 1.25rem + 46px);
  }

  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .reading-progress {
    top: 46px;
  }

  /* When scrolled, admin bar still fixed — no transparent leak gap. */
  body.admin-bar.is-scrolled .site-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  body.admin-bar {
    padding-top: 46px;
  }
}

/* Logged-out / no admin bar: ensure sticky header is flush. */
@media (max-width: 1099px) {
  body:not(.admin-bar) .site-header {
    top: 0;
  }
}

/* -------------------------------------------------------------------------
   2. Mobile nav drawer — full remaining viewport cover
   ------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .mobile-nav.is-open,
  [data-mobile-nav].is-open {
    display: block;
    min-height: calc(100dvh - var(--header-h, 68px));
    background: var(--surface, #fff);
    box-shadow: 0 12px 40px color-mix(in srgb, var(--fg, #000) 18%, transparent);
    z-index: 1001;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Soften background page so the drawer feels modal without fighting theme. */
  body.nav-open .site-main,
  body.nav-open .site-footer,
  body.nav-open .tdnpr-bar,
  body.nav-open [class*="tdnpr"] {
    visibility: hidden;
  }
}

/* -------------------------------------------------------------------------
   3. Touch targets ≥ 44px on common controls
   ------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .icon-btn,
  .site-header .icon-btn,
  [data-menu-toggle],
  [data-theme-toggle],
  [data-search-toggle] {
    min-width: 44px;
    min-height: 44px;
  }

  .utility-strip a,
  .utility-strip__nav a,
  .utility-strip__social a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .share-btn,
  .share-row .share-btn {
    min-height: 44px;
    padding-block: 0.55rem;
  }

  .footer-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .breadcrumbs a,
  .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0.25rem;
  }
}

/* -------------------------------------------------------------------------
   4. Hero title — slightly tighter on narrow phones so excerpt stays nearer fold
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .must-see__title,
  .must-see__lead .must-see__title {
    font-size: clamp(1.65rem, 5.2vw + 0.6rem, 2.1rem);
    line-height: 1.12;
  }
}

/* -------------------------------------------------------------------------
   5. Popular Right Now — give the scroller more room on narrow screens
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tdnpr-bar__label,
  [class*="tdnpr"] .tdnpr-bar__label,
  .tdnpr-label {
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    max-width: 4.5rem;
    line-height: 1.15;
  }
}

/* -------------------------------------------------------------------------
   6. Light perf / layout hygiene (safe with LiteSpeed)
   ------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .entry-content iframe,
  .entry-content video,
  .entry-content embed {
    max-width: 100%;
  }

  .entry-content img {
    height: auto;
  }
}