/* ===========================================================================
   Blog, phones only (<= 767px / <= 575px). Loaded last, after blog-modern.css.
   Delete this file and its <link> in header.php to revert; nothing else is
   touched.

   Why this file exists
   --------------------
   The theme scales the whole design by shrinking the rem base as the viewport
   narrows: assets/css/default.css sets `html { font-size: var(--font-size) }`
   and assets/css/responsive.css steps that variable down 16px -> 9 -> 7.5 -> 7
   -> 6.5 -> 6 -> 5px. On a phone the root is 5px, so every rem-sized thing in
   blog-modern.css renders at roughly a third of its intended size. Measured on
   an iPhone-width viewport (393px) before this file:

       article body text     9px / 15.3px line-height
       post h1              15px
       h2 / h3              13px / 11px
       card grid            two 180px columns, body text 7.5px

   For comparison, an Anxiety University article on the same viewport runs
   14px / 22.4px body and a 23.4px h1.

   responsive.css does set absolute heading sizes at <= 575px, but
   blog-modern.css loads afterwards and re-sizes the same elements in rem, so
   those absolute values never apply on the blog.

   Rather than restate a size for every component - there are hundreds, and any
   one missed stays at 5px-scale - this restores the rem base to 8px on phones.
   That lifts everything that was already proportioned correctly, landing body
   text at 14.4px and the post title at 24px: the Anxiety University article
   sizes, which is what was asked for.

   The three things that do not follow the rem base are fixed individually
   below: the logo (sized in absolute px), the header's wrap behaviour, and the
   card grid.
   =========================================================================== */

@media (max-width: 575px) {
  :root {
    /* Was 5px. Text was unreadable and every rem-based dimension with it. */
    --font-size: 8px;
  }
}

/* --- Header: logo + app badges + menu on one row -------------------------- */
/* blog-modern.css gives .ac-header-app `width: 100%; order: 1` below 768px, so
   the badges drop to a second row and the header stands 108px tall - against
   80px on the main site. */
@media (max-width: 767px) {
  .ac-header .ac-header-row {
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* 195px was wider than the logo on the main site (120px) and dominated the
     row. Matching the main site also frees the width the badges need. */
  .ac-header .logo.ac-logo {
    max-width: 120px;
    flex: 0 0 auto;
  }

  .ac-header .ac-header-app {
    width: auto;
    order: 0;
    margin-top: 0;
    max-height: none;
    flex: 0 1 auto;
    min-width: 0;
  }

  /* The row has no vertical space for a caption once it is one line. */
  .ac-header .ac-header-app-title {
    display: none;
  }

  .ac-header .ac-header-app-badges {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .ac-header .ac-header-app .ac-app-img-wrap {
    max-width: 84px;
    min-width: 62px;
  }

  .ac-header .ac-header-right {
    flex: 0 0 auto;
  }
}

/* Very narrow phones: keep one store badge rather than squeeze both to nothing. */
@media (max-width: 359px) {
  .ac-header .ac-header-app-badges .ac-app-img-wrap:nth-child(2) {
    display: none;
  }
}

/* --- Blog index: one card per row ---------------------------------------- */
/* `minmax(min(30rem, 100%), 1fr)` is 150px at the old 5px root, so two columns
   fitted and the card text rendered at 7.5px. The rem fix above already makes
   this one column; stated explicitly so it cannot come back. */
@media (max-width: 575px) {
  .ac-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* A card now has the full width of the screen rather than half of it, so its
     text can be read at the size the article body uses instead of the size that
     was needed to fit two across. */
  .ac-card-title {
    font-size: 19px;
    line-height: 1.3;
  }

  .ac-card-excerpt {
    font-size: 14.5px;
    line-height: 1.55;
  }

  .ac-card-meta {
    font-size: 12px;
  }

  .ac-card-more {
    font-size: 14px;
  }
}

/* --- Article body: the Anxiety University reading size -------------------- */
/* The rem fix carries most of this. These few rules cover the places that set a
   size in absolute px (so the rem change cannot reach them) or that sit below a
   comfortable reading size on a phone even after it. */
@media (max-width: 575px) {
  .ac-article-body {
    font-size: 1.8rem; /* 14.4px at the restored root */
    line-height: 1.65;
  }

  .ac-article-body p,
  .ac-article-body li {
    font-size: inherit;
    line-height: inherit;
  }

  /* Enough room between paragraphs to read a long article comfortably. */
  .ac-article-body p {
    margin-bottom: 1.5rem;
  }

  .ac-post .ac-post-title,
  .ac-post h1.primary-title {
    font-size: 24px;
    line-height: 1.25;
  }

  .ac-article-body h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  .ac-article-body h3 {
    font-size: 18px;
    line-height: 1.35;
  }

  .ac-article-body h4 {
    font-size: 16px;
    line-height: 1.4;
  }

  /* Small print that should stay small, but not invisible. */
  .ac-breadcrumb,
  .ac-post-eyebrow,
  .ac-post-meta {
    font-size: 12px;
  }
}