/*
  Penn Manor Information Technology — CONTENT styles for standard pages.

  The masthead / district utility nav / translate panel / footer chrome and
  the district fonts live in chrome.css, which every page links. This file is
  content only, and is linked alongside chrome.css on the standard pages
  (index, coppa, archive). screentime.html does NOT link this file — it carries
  its own content design system.

  Colors, fonts, and typography mirror the district penn-manor-2023 theme.
*/

/* ---------- Design tokens (from the district theme palette) ---------- */
:root {
  --navy: #002554;              /* primary — headings */
  --gold: #d0a92c;              /* tertiary/accent */
  --royal: #0047a1;             /* links */
  --body-text: #1a1a1a;         /* body copy — near-black for readability */
  --pm-light-blue: #e5ecf5;     /* callout backgrounds */
  --pm-light-gold: #faf6e9;
  --pm-medium-gold: #ecdcaa;
  --pm-gray: #f0eff0;
  --pm-contrast: #070313;       /* (legacy) */

  --display: "Atkinson Hyperlegible", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  --maxw: 1120px;
  --pm-content-width: 60rem;

  /* legacy aliases (older pages/edits may reference these) */
  --pm-primary: var(--navy);
  --pm-gold: var(--gold);
  --pm-medium-blue: var(--royal);
  --pm-font: var(--display);
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #ffffff;
  color: var(--body-text);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--navy);
  line-height: 1.2;
}

h1 { font-size: 2.25rem; }

/* District theme rules h2s with a bottom border */
h2 {
  font-size: 1.6rem;
  border-bottom: 2px solid;
  padding-bottom: 0.25rem;
  margin-top: 2.5rem;
}

h3 { font-size: 1.25rem; }

/* Content links only — header and footer style their own links (chrome.css) */
main a:not(.button) {
  color: var(--royal);
  text-decoration: underline;
}
main a:not(.button):hover {
  color: var(--navy);
}

img {
  max-width: 100%;
  height: auto;
}

ul, ol {
  padding-left: 1.5rem;
}
li {
  margin-bottom: 0.4rem;
}

/* ---------- Main content ---------- */
main {
  max-width: var(--pm-content-width);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* Callout boxes, in the style of the district's light panels */
.callout {
  background-color: var(--pm-light-blue);
  border-left: 6px solid var(--navy);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.callout.gold {
  background-color: var(--pm-light-gold);
  border-left-color: var(--gold);
}

/* Simple responsive card grid for resource links */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}
.resource-grid li {
  margin: 0;
  background-color: var(--pm-gray);
  border-top: 4px solid var(--gold);
  padding: 1rem 1.25rem;
}
.resource-grid a {
  font-weight: 700;
}

/* Blog archive listing — one flat list, newest first */
.archive-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}
.archive-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--pm-gray);
}
.archive-list a {
  font-weight: 700;
}
.archive-list .post-meta {
  /* override the base .post-meta bottom margin, which would otherwise apply as
     a flex-item margin and pad out every row */
  margin: 0 0 0 auto;
}
.post-meta {
  color: var(--navy);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}
article.post h1 {
  margin-bottom: 0.25rem;
}
figure {
  margin: 1.5rem 0;
}
figcaption {
  font-size: 0.9rem;
  font-style: italic;
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  h1 { font-size: 1.75rem; }
}