/* 5am-market additions to the core-market stylesheet (site.css).
   Additive only — site.css stays a verbatim copy of the 6amcity.com bundle. */

/* Cloudflare tells browsers to keep this file for 4 hours. When you change
   it, change the ?v= value on every link to it in views/ (28 links), so
   that browsers load the new file immediately. */

/* News briefs have no per-story image; promote the component's own
   single-column (mobile) state to all widths for rows without a thumb. */
.article-row.no-thumb { grid-template-columns: 1fr; }

/* One content width everywhere: header (.nav-inner), body, and footer
   (.footer-inner) all align at var(--max) with the same 24px gutters. */
.page-wrapper { max-width: var(--max); }
.page-container {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding: 40px 24px 60px;
}
.page-container-x {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Content-edge alignment. nav-inner and body wrappers carry their 24px
   gutter inside the 1200px box; hero-inner and footer-inner carry none,
   so their content sat 24px further left. Give them the same inner gutter,
   and keep every band on the same gutter as the core's breakpoints shrink
   it (24 → 16 at 1024px → 12 at 480px). */
.hero-inner, .footer-inner { padding-left: 24px; padding-right: 24px; }
@media (max-width: 1024px) {
  .nav-inner { padding-left: 16px; padding-right: 16px; }
  .hero-inner, .footer-inner { padding-left: 0; padding-right: 0; }
  footer { padding-left: 16px; padding-right: 16px; }
  .page-wrapper, .page-container, .page-container-x { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 480px) {
  .nav-inner { padding-left: 12px; padding-right: 12px; }
  footer { padding-left: 12px; padding-right: 12px; }
  .page-wrapper, .page-container, .page-container-x { padding-left: 12px; padding-right: 12px; }
}

/* site.css resets all anchors to inherit/none; give unclassed prose links
   (legal pages, newsletter card copy) their affordance back. */
main p a:not([class]),
main li a:not([class]) { color: var(--cta); text-decoration: underline; }
.rail-card .rail-body p a:not([class]) { color: var(--cta); text-decoration: underline; }
.rail-card .rail-body p + p { margin-top: 10px; }

/* Palette utilities for legacy Tailwind form elements (replace emerald/indigo
   hardcodes so every market's forms follow its own brand ramp). */
.cta-solid { background: var(--cta); border-color: var(--shadow); }
.cta-solid:hover { background: var(--highlight); }
.cta-text { color: var(--cta); }
.cta-band { background: var(--subtle); }

/* Core-market names are short codes (GVL, WS); 5am names run long
   (Good Day Great Falls). Shrink the nav on small screens so the logo
   and subscribe button share the bar without clipping. */
@media (max-width: 600px) {
  .nav-logo { font-size: 16px; letter-spacing: -0.3px; }
  .nav-sub-btn { font-size: 12px; padding: 8px 10px; white-space: nowrap; }
}

/* Latest-issue bar above the nav (.ticker, partials/sixam-nav.ejs). In
   site.css the label, the headline and the "Read now" button can all
   shrink, so a long headline broke the label onto two lines and pressed
   the button into a circle. The label and the button stay on one line;
   only the headline becomes shorter. */
.ticker-eyebrow, .ticker-btn { flex-shrink: 0; white-space: nowrap; }
.ticker-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phones have no space for all three on one line. The label is above the
   headline, as in the hero card's latest-issue link, and the headline
   shows a maximum of two lines. The button stays at the right, and a tap
   anywhere on the bar opens the issue. */
@media (max-width: 480px) {
  .ticker {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
  }
  .ticker-eyebrow { grid-column: 1; grid-row: 1; font-size: 11px; line-height: 1.3; }
  .ticker-title {
    grid-column: 1;
    grid-row: 2;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }
  .ticker-btn { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; padding: 6px 12px; }
  .ticker-btn::after { content: ""; position: absolute; inset: 0; }
}

/* Pages that load both dist/styles.css (Tailwind v3) and site.css lose
   v3's responsive variants to site.css's same-specificity base utilities
   (.hidden, .grid-cols-1, …) purely by source order. Restore the sm:
   variants those templates use — Tailwind's own declarations, loaded last. */
@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:inline { display: inline; }
  .sm\:inline-block { display: inline-block; }
  .sm\:flex { display: flex; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:col-span-1 { grid-column: span 1 / span 1; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-left { text-align: left; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:mt-0 { margin-top: 0; }
  .sm\:ml-6 { margin-left: 1.5rem; }
  .sm\:gap-4 { gap: 1rem; }
}