/*
 * ACAD1 Review Center: page frame and slabs (2026-11-08)
 *
 * One rule for the whole site: everything sits inside one frame, and every band inside it is a
 * rounded slab with the same side padding, the same corner and the same gap above and below.
 *
 * Before this, the header and footer ran to the viewport edge while the page body sat in a narrower
 * GeneratePress box, and only the dark and accent bands had a radius. The paper, white and surface
 * bands were square rectangles, and the text inside them sat 20px from an edge that was meant to curve.
 *
 * Loads after 30-components.css, so it overrides the older slab rule there. The tokens it adds live
 * here rather than in 00-tokens.css, which keeps that file a clean copy of the guide.
 */
:root {
  --a1-frame:        1320px;                      /* widest the slabs get */
  --a1-frame-pad:    clamp(10px, 2vw, 28px);      /* space between the frame and the screen edge */
  --a1-slab-pad-x:   clamp(20px, 4.4vw, 64px);    /* space between a slab's edge and its content */
  --a1-slab-gap:     clamp(10px, 1.4vw, 18px);    /* space between two slabs */
  --a1-r-slab:       clamp(22px, 2.6vw, 32px);    /* larger on a desktop, tighter on a phone */
}

/* ── The frame ──────────────────────────────────────────────────────────────────── */
body #page.grid-container {
  max-width: calc(var(--a1-frame) + 2 * var(--a1-frame-pad));
  padding-inline: var(--a1-frame-pad);
  box-sizing: border-box;
}
body .site-content,
body:not(.home) .site-content { padding-top: var(--a1-slab-gap); padding-bottom: var(--a1-slab-gap); }

/* ── Every band is a slab ───────────────────────────────────────────────────────── */
.a1-section {
  margin-block: var(--a1-slab-gap);
  padding-inline: var(--a1-slab-pad-x);
  border-radius: var(--a1-r-slab);
}
.entry-content > .a1-section:first-child,
.entry-content > :first-child > .a1-section:first-child { margin-top: 0; }
.entry-content > .a1-section:last-child { margin-bottom: 0; }

/* The slab already pads its content, so the container inside it adds none of its own. */
.a1-section .a1-container { padding-inline: 0; }

/* Paper slabs share the page ground and stay frameless, held by space alone. The first one on a page
   (the hero, or an inner page's opening band) and the white slabs get a hairline, so the edge is
   visible where it should be and the page does not turn into a column of outlined boxes. */
.a1-section--white,
.entry-content > .a1-section--bg:first-child { background: var(--a1-contrast); border: 1px solid var(--a1-border); }
.a1-section--surface { background: var(--a1-surface); }

/* ── Header: ribbon and nav read as one rounded unit ───────────────────────────── */
.a1-header__utility {
  width: min(100% - 2 * var(--a1-frame-pad), var(--a1-frame));
  margin: var(--a1-frame-pad) auto 0;
  padding-inline: var(--a1-slab-pad-x);
  box-sizing: border-box;
  border-radius: var(--a1-r-slab) var(--a1-r-slab) 0 0;
}
/* The header wrapper comes from a GeneratePress Block Element with an inline white background and
   bottom rule, so the override has to be !important. Left alone it paints a full-width strip behind
   the rounded unit and puts the square edge straight back. */
.a1-header__utility + div { background: transparent !important; border-bottom: 0 !important; }
.a1-header__utility + div > .a1-header,
.a1-header.a1-container {
  width: min(100% - 2 * var(--a1-frame-pad), var(--a1-frame));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--a1-slab-pad-x);
  box-sizing: border-box;
  border: 1px solid var(--a1-border);
  border-top: 0;
  border-radius: 0 0 var(--a1-r-slab) var(--a1-r-slab);
}

/* ── Footer: a slab inside the same frame ──────────────────────────────────────── */
.site-footer {
  max-width: calc(var(--a1-frame) + 2 * var(--a1-frame-pad));
  margin-inline: auto;
  padding: var(--a1-slab-gap) var(--a1-frame-pad) var(--a1-frame-pad);
  box-sizing: border-box;
}
/* The dark footer element carries its padding inline, so the side padding needs !important too. */
.site-footer .a1-site-footer {
  border-radius: var(--a1-r-slab);
  padding-inline: var(--a1-slab-pad-x) !important;
  padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 32px) !important;
  box-sizing: border-box;
}
.site-footer .a1-site-footer > .a1-container { padding-inline: 0; }

/* ── Tables and wide content never poke through a slab's curve ─────────────────── */
.a1-section .a1-table__wrap { border-radius: var(--a1-r-card); }
.a1-section :is(img, video, iframe) { max-width: 100%; }

@media (max-width: 620px) {
  .a1-section { padding-block: clamp(28px, 7vw, 44px); }
}

/* ── Component fixes found while checking the slabs ────────────────────────────── */
/* A flush card keeps no padding of its own at any width. A later responsive rule was giving it back
   20px on phones, which insets the picture and doubles the padding on the text under it. */
.a1-card.a1-card--flush { padding: 0; }

/* Figures on a dark slab are white, like the headings. They were inheriting the 80% paragraph grey. */
.a1-section--dark .a1-stat-number,
.a1-section--dark .a1-stat-number + .a1-card__kicker { color: var(--a1-on-dark); }
.a1-section--dark .a1-stat-number + .a1-card__kicker { color: var(--a1-accent-on-dark); }

/* A two-column grid with an odd number of cards lets the last one take the full row, so there is never
   an empty cell beside it. Only applies while the grid really has two columns. */
@media (min-width: 821px) {
  .a1-grid--2 > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}

/* Headings balance their lines and paragraphs avoid a lone last word. */
:is(h1, h2, h3, h4) { text-wrap: balance; }
.a1-section p { text-wrap: pretty; }

/* On a phone the schedule table turns into a stack of cards, so the frame around the whole table only
   doubles every card's own edge. */
@media (max-width: 620px) {
  .a1-table__wrap { border: 0; background: transparent; border-radius: 0; }
  .a1-table__wrap > .a1-table { border: 0; }
}

/* ── Table pagination (assets/js/a1-paginate.js) ───────────────────────────────── */
.a1-table tbody tr.is-paged-out { display: none !important; }
.a1-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; margin-top: var(--a1-s-5, 20px);
}
.a1-pager[hidden] { display: none; }
.a1-pager__btn {
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--a1-border); border-radius: 999px;
  background: var(--a1-contrast); color: var(--a1-text, inherit);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.a1-pager__btn:hover:not(:disabled):not(.is-current) { border-color: var(--a1-accent); color: var(--a1-accent); }
.a1-pager__btn:focus-visible { outline: 2px solid var(--a1-accent); outline-offset: 2px; }
.a1-pager__btn.is-current { background: var(--a1-accent); border-color: var(--a1-accent); color: #fff; }
.a1-pager__btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) {
  /* Keep the numbers on one row: only the current page and its arrows show. */
  .a1-pager__btn:not(.is-current):not(:first-child):not(:last-child) { display: none; }
}

/* The utility ribbon is hidden at 700px and below, so the header card is the whole unit there and
   needs its own top edge and all four corners. */
@media (max-width: 700px) {
  .a1-header__utility + div { margin-top: var(--a1-frame-pad); }
  .a1-header__utility + div > .a1-header,
  .a1-header.a1-container { border-top: 1px solid var(--a1-border); border-radius: var(--a1-r-slab); }
}