/* History of the United States — site theme, loaded after core/css/style.css,
   the rulers-groups module CSS and css/usa-map.css. Only rules where the
   USA's original stylesheet differs from core in a way that shows on its
   pages. Where core sets a property inside a @media block and a base rule
   here overrides it, the media rule is restated below so the original
   breakpoints still apply. */

/* ════════════════════════════════════════
   1. Design tokens — fonts (same set as Lithuania)
════════════════════════════════════════ */
:root {
  --f-heading: 'Inria Serif', Georgia, serif;
  --f-body: 'Source Sans 3', 'Crimson Text', Georgia, serif;
  --f-ui: 'Source Sans 3', system-ui, sans-serif;
}

/* ════════════════════════════════════════
   2. Intro overlay — keeps the picture open at the edges and shades the
      timeline column and the text area
════════════════════════════════════════ */
#bg-overlay-intro {
  background:
    linear-gradient(to right,
      rgba(3,2,7,0.72) 0%,
      rgba(3,2,7,0.56) calc(var(--tl-x) + 40px),
      rgba(3,2,7,0.26) var(--panel-w),
      rgba(3,2,7,0) calc(var(--panel-w) + 200px)
    ),
    radial-gradient(ellipse 60% 55% at 60% 47%,
      rgba(3,2,7,0.8) 0%,
      rgba(3,2,7,0.62) 45%,
      rgba(3,2,7,0.3) 75%,
      rgba(3,2,7,0) 100%
    ),
    linear-gradient(to top,
      rgba(3,2,7,0.32) 0%,
      rgba(3,2,7,0) 26%
    ),
    linear-gradient(to bottom,
      rgba(3,2,7,0.08) 0%,
      rgba(3,2,7,0.14) 100%
    );
}
@media (max-width:760px) {
  #bg-overlay-intro {
    background:
      radial-gradient(ellipse 85% 42% at 50% 40%,
        rgba(3,2,7,0.72) 0%,
        rgba(3,2,7,0.4) 55%,
        rgba(3,2,7,0) 100%
      ),
      linear-gradient(to bottom, rgba(3,2,7,0.08), rgba(3,2,7,0.18));
  }
}

/* ════════════════════════════════════════
   3. Logo — the USA wordmark is wider than core's default
════════════════════════════════════════ */
#app-logo { width:180px; }
@media (max-width:1200px) { #app-logo { width:142.5px; } }
@media (max-width:960px)  { #app-logo { width:170px; } }
@media (max-width:760px)  { #app-logo { width:150px; } }
@media (max-width:520px)  { #app-logo { width:130px; } }

/* ════════════════════════════════════════
   4. Presidents page — party tabs with 26px party logos, closer legend
════════════════════════════════════════ */
.rp-tabs-group { gap:8px; }
.rp-tab {
  gap:10px; white-space:nowrap;
  padding:12px 18px;
  font-family:var(--f-heading); font-size:13.6px; font-weight:400; letter-spacing:0;
  border-color:rgba(255,255,255,0.16);
}
.rp-tab:hover { border-color:rgba(255,255,255,0.35); }
.rp-tab .rp-tab-icon { width:26px; height:26px; }
.rp-tab img.rp-tab-icon { object-fit:contain; }
.rp-tab svg.rp-tab-icon * { stroke-width:0.95; }
@media (max-width:600px) {
  .rp-tab { padding:9px 13px; font-size:12px; }   /* module rule, restated */
}
.rp-legend { margin-bottom:32px; }
.rp-dynasty-info { margin:0 0 30px; }

/* ════════════════════════════════════════
   5. At a Glance — six era cards, map figure, quieter rulers link
════════════════════════════════════════ */
.ag-intro-country { color:#ffffff; }
.ag-intro-map img { padding:14px 14px 0; }
.ag-collage-caption {
  display:block; margin-top:8px;
  font-family:var(--f-ui); font-size:12px; color:var(--white-dim);
  font-style:italic; line-height:1.4; text-align:center;
}
.ag-intro-map .ag-collage-caption { margin:8px 12px; text-align:left; }
.ag-era-list { grid-template-columns:repeat(6, minmax(0, 1fr)); }
@media (max-width:900px) {
  .ag-era-list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width:560px) {
  .ag-era-list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ag-detail-lede { font-size:16px; }
}
.ag-explore-rulers.ag-rulers-link {
  justify-content:center; margin-top:14px; padding:6px 0;
  border:none; text-transform:none; letter-spacing:0.2px; font-size:14px;
  color:var(--white-mid);
}
.ag-explore-rulers.ag-rulers-link:hover { background:none; color:var(--gold); }
.ag-explore-rulers.ag-rulers-link span { margin-left:0; font-size:14px; }

/* ════════════════════════════════════════
   6. Legacy — four equal columns, reference links under each card
════════════════════════════════════════ */
.legacy-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
@media (max-width:1200px) { .legacy-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:760px)  { .legacy-grid { grid-template-columns:1fr; } }
.legacy-reference {
  display:inline-block; margin-top:16px;
  font-family:var(--f-body); font-size:13px; line-height:1.5;
  color:var(--gold); text-decoration:underline; text-underline-offset:3px;
  overflow-wrap:anywhere;
}
.legacy-reference:hover { color:#fff; }
.legacy-reference:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }