/* Shared rules the rebuild adds on top of the page sheets and theme.css.
   Loaded last on every page. Keep it small: anything page-specific belongs in the
   page sheet, anything that changes the look belongs in theme.css. */

/* Skip link: off-screen until focused by keyboard. The homepage had one as an
   inline style; now every page has one. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99999;
  background: var(--accent); color: var(--bg, #06070a);
  padding: 8px 16px; border-radius: 0 0 8px 8px;
  font: 600 14px/1.4 "Archivo", sans-serif; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* The generator embedded on a tool page (heart, Wi-Fi, vCard, ...). A copy of
   the homepage's .app grid, so it looks the same: 1400px wide, form, preview,
   and the page's own skyscraper as the third column (both slots moved into the
   embed 2026-09-27; at 1100px the old 2-column 1100px box wrapped the type tabs
   and left the skyscraper down beside the article). */
.gen-embed {
  position: relative; z-index: 1;
  max-width: 1400px; margin: 8px auto 48px; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 380px var(--banner-skyscraper-w, 160px);
  gap: 24px; align-items: start;
}
.gen-embed > .left-col { min-width: 0; }
.gen-embed > .banner-skyscraper {
  width: var(--banner-skyscraper-w, 160px); min-height: 600px; flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 24px;
  align-self: stretch;
}
.gen-embed > .banner-skyscraper .banner-inner {
  width: var(--banner-skyscraper-w, 160px); height: 600px; position: sticky; top: 24px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1100px) {
  .gen-embed { grid-template-columns: 1fr 360px; }
  .gen-embed > .banner-skyscraper { display: none; }
}
@media (max-width: 900px) {
  .gen-embed { grid-template-columns: 1fr; }
  .gen-embed .preview-panel { position: static; }
}
@media (max-width: 600px) {
  .gen-embed { padding: 0 12px; gap: 16px; margin-bottom: 32px; }
}

/* Footer column labels became <p> (they were <h2>, four per page, outlining
   nothing). Keep the face the <h2> had. */
.footer-col-h { font-family: 'Syne', sans-serif; }

/* Main navigation (new with the rebuild). Pills in the site's own colours:
   muted until hovered, the current page in the accent. On a phone the row
   drops under the logo and scrolls sideways instead of wrapping. */
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a, .site-nav span[aria-current] {
  padding: 8px 12px; border-radius: 100px; white-space: nowrap;
  font: 500 14px/1.2 'Archivo', sans-serif; text-decoration: none;
  color: var(--muted); transition: color .2s, background .2s;
}
.site-nav a:hover { color: var(--text); background: var(--surface); }
.site-nav a.is-section { color: var(--text); }
.site-nav span[aria-current] { color: var(--accent); }
@media (max-width: 820px) {
  header[role="banner"] { flex-wrap: wrap; row-gap: 6px; }
  .site-nav {
    order: 3; width: calc(100% + 8px); margin: 0 -4px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a, .site-nav span[aria-current] { padding: 8px 10px; font-size: 13px; }
}

/* A new post's index card before its photograph exists (new_post.py). */
.blog-card-thumb-empty {
  aspect-ratio: 16 / 9; width: 100%;
  background: linear-gradient(135deg, var(--surface, #0d0f13), var(--border, #282d36));
}

/* The QR type tabs scrolled sideways inside their panel, so the last ones
   (vCard, WhatsApp) were cut off with no sign there was more. Wrap them. */
.type-tabs { flex-wrap: wrap; overflow-x: visible; }
/* Wrapping left vCard alone on a second row wherever the seven tabs don't fit
   on one line (below ~1400px). There they form an even 4 + 3 grid instead;
   where they fit (panel 740px and wider) they stay one row, as before. */
.left-col .panel { container-type: inline-size; }
.type-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.type-tabs .type-tab { justify-content: center; min-width: 0; }
@container (min-width: 740px) {
  .type-tabs { display: flex; flex-wrap: nowrap; }
}
/* equal cells are centred, so the side padding can give way on small phones */
@container (max-width: 739px) {
  .type-tabs .type-tab { padding-left: 4px; padding-right: 4px; }
}
@container (max-width: 400px) {
  .type-tabs { padding-left: 12px; padding-right: 12px; column-gap: 4px; }
  .type-tabs .type-tab { gap: 4px; }
}
@container (max-width: 310px) {
  .type-tabs .type-tab { font-size: 10px; }
}

/* The copyright line sat flush against the last row of footer links. */
footer .footer-copy { margin-top: 28px; }

/* A tool page's rectangle sits under the download button (2026-09-27), with
   the homepage's spacing there rather than the article's 24px. */
.gen-embed .banner-rect { margin: 16px 0; }
@media (max-width: 600px) { .gen-embed .banner-rect { margin: 12px 0; } }

/* Sticky ad: the close button sits 8px from the right edge of the bar. Where
   the 728px creative reaches that edge (bars narrower than ~800px) it covered
   the creative's button, so keep a strip free for it. */
@media (max-width: 800px) {
  .banner-sticky-mobile .banner-inner { padding-right: 40px; box-sizing: border-box; }
}

/* Scroll to top (2026-09-27). Appears after one screen of scrolling and sits
   above the sticky ad (the script lowers it when the ad is closed). */
.to-top {
  position: fixed; right: 16px; bottom: calc(var(--to-top-bottom, 76px) + env(safe-area-inset-bottom, 0px));
  z-index: 9001; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--line-lit, #3a4150); cursor: pointer; padding: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, border-color .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible { border-color: var(--accent); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }