/* UltimaHub Daily - sleek professional mobile override */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  body {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  main,
  section,
  article,
  .container,
  .page,
  .app,
  .site,
  .wrapper,
  .content {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  header,
  nav,
  .header,
  .topbar,
  .masthead,
  .hero-header {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px 14px 16px !important;
    overflow: hidden !important;
  }

  header > *,
  nav > *,
  .header > *,
  .topbar > *,
  .masthead > * {
    max-width: 100% !important;
  }

  header img,
  nav img,
  .logo,
  .brand img,
  .site-logo {
    max-width: 150px !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  /* Fix giant clipped top text */
  header h1,
  nav h1,
  .brand-title,
  .site-title,
  .top-title {
    font-size: 19px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.08em !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  /* Main hero title must NOT be billboard sized on mobile */
  h1,
  .hero h1,
  .daily-hero h1,
  .intro h1,
  .title,
  .headline {
    font-size: 42px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;
    margin: 10px 0 14px !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  h2,
  .section-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin: 20px 0 10px !important;
  }

  h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }

  p,
  li,
  .subtitle,
  .description,
  .summary,
  .lede {
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
  }

  .hero,
  .intro,
  .daily-hero {
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 16px !important;
    margin: 0 0 14px !important;
    border-radius: 18px !important;
  }

  .card,
  .panel,
  .brief-card,
  .section-card,
  article {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 18px 16px !important;
    margin: 12px 0 !important;
    border-radius: 18px !important;
  }

  .generated,
  .date,
  .timestamp,
  .eyebrow,
  .meta {
    font-size: 13px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    word-break: normal !important;
  }

  .tabs,
  .nav-buttons,
  .button-grid,
  .quick-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 12px 0 16px !important;
  }

  .tabs a,
  .nav-buttons a,
  .button-grid a,
  .quick-links a,
  button,
  .button,
  .pill {
    min-height: 42px !important;
    padding: 8px 10px !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    border-radius: 15px !important;
    white-space: normal !important;
    text-align: center !important;
    letter-spacing: normal !important;
  }

  /* Brutal safety cap: no text should become absurdly large on phones */
  [style*="font-size"] {
    max-font-size: 42px;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    font-size: 13px !important;
  }

  th,
  td {
    font-size: 13px !important;
    padding: 8px !important;
  }

  pre,
  code {
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }
}

@media (max-width: 430px) {
  body {
    font-size: 14px !important;
  }

  main,
  section,
  article,
  .container,
  .page,
  .app,
  .site,
  .wrapper,
  .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  header,
  nav,
  .header,
  .topbar,
  .masthead,
  .hero-header {
    padding: 16px 12px 14px !important;
  }

  h1,
  .hero h1,
  .daily-hero h1,
  .intro h1,
  .title,
  .headline {
    font-size: 34px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
  }

  h2,
  .section-title {
    font-size: 23px !important;
  }

  p,
  li,
  .subtitle,
  .description,
  .summary,
  .lede {
    font-size: 15px !important;
  }

  .hero,
  .intro,
  .daily-hero,
  .card,
  .panel,
  .brief-card,
  .section-card,
  article {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .generated,
  .date,
  .timestamp,
  .eyebrow,
  .meta {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
  }

  .tabs a,
  .nav-buttons a,
  .button-grid a,
  .quick-links a,
  button,
  .button,
  .pill {
    min-height: 40px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 360px) {
  h1,
  .hero h1,
  .daily-hero h1,
  .intro h1,
  .title,
  .headline {
    font-size: 30px !important;
  }

  .tabs,
  .nav-buttons,
  .button-grid,
  .quick-links {
    grid-template-columns: 1fr !important;
  }
}