/* ============================================================================
   Architect Cert Prep — stylesheet
   ----------------------------------------------------------------------------
   One file for the whole site. Every page loads this.

   Design intent: this should read like a well-set document, not a software
   landing page. The buyer is a senior professional who has seen a lot of
   exam-dump sites and distrusts them. Restraint reads as credible; gradients,
   stock photos and animated badges read as the opposite.

   Light mode only, deliberately. The exam papers are deliberately light-only
   (they mimic a test-centre screen), so a dark storefront leading into a light
   exam would jar. Consistency is worth more here than the feature.
   ========================================================================== */

/* --- Design tokens ---------------------------------------------------------
   Values used in more than one place live here. Change a colour once and it
   updates everywhere it is used. */
:root {
  --ink:      #1a1a1a;   /* body text */
  --muted:    #5a5a5a;   /* secondary text, footer */
  --accent:   #14507a;   /* links, headings that need weight */
  --accent-d: #0d3a5a;   /* accent, darker — hover states */
  --rule:     #ddd8cd;   /* hairlines, warmed and darkened to match the page */

  /* Surfaces. Three tones, not one.

     --paper  the page itself. A warm off-white rather than #fff. At 21px over
              a long read, pure white is genuinely tiring: it is the brightest
              value a screen can emit, and every line of text sits against it.

              This started at #faf9f7, about 2% off white, and that was too
              timid to be worth doing: indistinguishable from white on most
              screens. It is now roughly 6% off, which is the point where the
              page reads as paper instead of as a lightbox, while staying well
              clear of looking yellowed or dimmed.

              THIS IS THE DIAL. If it is still too bright, go darker in small
              steps: #f1eee6, then #eeeae0. If it has gone too far, come back
              via #f7f5f0. Nothing else needs touching; every other surface is
              defined against it.
     --card   panels and the sample question. Pure white, so they sit slightly
              ABOVE the page rather than below it. Cards lifting off paper is
              the right relationship; the alternative reads as holes.
     --wash   the one highlighted callout. Warmer and a shade deeper than the
              page, so it stands apart from both.

     The free paper is deliberately excluded. It mimics a test-centre screen,
     which is white, and it is self-contained so it never loads this file. */
  --paper:    #f4f1ea;
  --card:     #ffffff;
  --wash:     #eae5da;   /* callout: deeper again, so it still separates */
  --warn:     #8a5a00;   /* the "second-best answer" colour */

  /* Two widths, not one. This is the layout in a nutshell.

     --frame   the page's outer column. Header, footer, tables, panels and the
               sample question all span this. It sets where the left edge of
               everything sits.
     --measure the widest a line of PROSE is allowed to get. Past roughly 75
               characters the eye loses its place returning to the next line.

     Everything shares the same LEFT edge; only the right edge varies. That is
     what stops the text reading as a narrow ribbon floating in white space. */
  --frame:    62rem;     /* 992px */

  /* --measure is in ch, not px or rem, and that matters. 1ch is the width of
     the digit zero at whatever font size the element itself uses. One value
     therefore gives roughly the same CHARACTERS per line everywhere, and the
     smaller type in the panels, rationales and footer gets a proportionally
     narrower column automatically, instead of running on to 100 characters
     the way a fixed pixel width lets it. */
  --measure:  70ch;
}

/* --- Reset -----------------------------------------------------------------
   box-sizing: border-box means padding is counted INSIDE an element's stated
   width. Without it, a 100%-wide box with padding is wider than its container
   and the page scrolls sideways. This one line prevents a whole class of bug. */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }

/* --- Page ------------------------------------------------------------------ */
body {
  /* A font "stack": the browser uses the first one the device actually has.
     This resolves to the native system font everywhere — nothing to download,
     so text renders immediately instead of flashing. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Body size scales with the viewport: 17px on a phone, 21px on a desktop.

     Why large on desktop: this is a reading site, the audience skews 35+, and
     type size is the only lever that widens the text column without pushing
     lines past a readable length. 21px at 70ch gives a 792px column.

     Why it MUST come down on a phone: at a fixed 21px, a 375px screen fits
     only 33 characters per line, which reads as a stack of fragments. The
     clamp keeps it near 17px there, which is about 40 characters, and that is
     as good as a screen that narrow gets.

     clamp(minimum, preferred, maximum). The middle value grows half a pixel
     per 100px of viewport width; the two ends stop it going anywhere silly. */
  font-size: clamp(1.0625rem, 0.9375rem + 0.5vw, 1.3125rem);
  line-height: 1.65;      /* Generous. The single biggest readability win. */
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* The reading column. Text running the full width of a wide monitor is the
   main thing that makes a hand-built site look amateur — past roughly 80
   characters the eye loses its place returning to the next line. */
.wrap {
  max-width: var(--frame);
  margin: 0 auto;         /* auto left+right centres the block */
  padding: 0 1.25rem;     /* keeps text off the screen edge on a phone */
}

/* Prose is capped at the reading measure, but keeps the frame's left edge
   rather than being centred inside it. Structural blocks below opt out and
   span the full frame, which gives the page some width without ever making a
   line of text too long to read comfortably. */
main .wrap > p,
main .wrap > ul,
main .wrap > ol,
main .wrap > h2,
main .wrap > h3 { max-width: var(--measure); }

main .wrap > h1 { max-width: 24ch; }    /* large type: fewer characters, wider column */

/* Blocks that span the full frame still have to keep their TEXT readable, or
   the callouts end up with 90-character lines while the prose around them sits
   at 74. Cap the text, not the box: the panel keeps its width and its text
   wraps where the eye expects. */
.claim > p,
.panel > p,
.buy > p,
.question .scenario p,
.question .option-text,
.question li,
.rationale,
.evidence,
.site-footer .disclaimer,
.lede,
.small { max-width: var(--measure); }

/* The spec table is the one thing that genuinely wants the full width: it is
   two columns of short phrases, not prose, and cramping it forces wrapping
   that makes it harder to scan. */
.spec { max-width: none; }

/* Retired. Both wrappers are now the same width; kept so any page still using
   the class does not break. */
.wrap-wide { max-width: var(--frame); }

/* --- Typography ------------------------------------------------------------ */
/* The type scale. Every size here is a multiple of the 21px body, so the
   hierarchy holds: each level is visibly bigger than the one below it, and
   nothing is ever smaller than the body text it introduces.

   Sizes are in em, which means they are multiples of the BODY size and follow
   it automatically. The body size is clamped to the viewport, so the whole
   scale shrinks together on a phone and grows together on a desktop. One
   number controls all of it.

   They were rem at first, which does not follow the body. The result was a
   24px lede sitting above 17px body text on a phone, eating a third of the
   screen before the reader reached a sentence. */
h1 {
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem);   /* 30px to 44px */
  line-height: 1.15;
  letter-spacing: -0.02em;   /* large text looks loose at default tracking */
  margin-bottom: 0.85rem;
}
h2 {
  font-size: 1.35em;         /* 23px phone, 28px desktop */
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 3rem;
  margin-bottom: 0.7rem;
}
h3 {
  font-size: 1.08em;         /* 18px phone, 23px desktop: always above body */
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.4rem;
}
p { margin-bottom: 1.05rem; }
p:last-child { margin-bottom: 0; }

/* The opening paragraph under an h1. Larger, sets the tone. */
.lede {
  font-size: 1.16em;         /* 20px phone, 24px desktop */
  line-height: 1.45;
  color: #333;
  margin-bottom: 1.6rem;
}

small, .small { font-size: 0.82em; line-height: 1.55; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-d); }

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

strong { font-weight: 650; }

/* --- Header ---------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  margin-bottom: 2.5rem;
}
.site-header .wrap {
  display: flex;          /* lays children out in a row */
  flex-wrap: wrap;        /* lets them stack on a narrow phone instead of
                             squashing into each other */
  align-items: baseline;
  gap: 0.75rem 1.5rem;
}
.brand {
  font-weight: 680;
  font-size: 1.05em;         /* tracks the body size */
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  margin-right: auto;     /* pushes the nav to the far right */
}
.brand:hover { color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-nav a {
  text-decoration: none;
  font-size: 0.85em;
  color: var(--muted);
}
.site-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Panels ---------------------------------------------------------------- */
/* The key-claim box. Used sparingly — once per page at most, or it stops
   meaning anything. */
.claim {
  border-left: 3px solid var(--accent);
  background: var(--wash);
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
}
.claim p:last-child { margin-bottom: 0; }

.panel {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.4rem;
  margin: 1.75rem 0;
  background: var(--card);
}

/* --- The buy panel --------------------------------------------------------- */
.buy {
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 1.6rem;
  margin: 2rem 0;
}
.price {
  font-size: 2.1em;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-note { color: var(--muted); font-size: 0.82em; margin-top: 0.35rem; }

/* --- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 620;
  font-size: 0.95em;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  border: 0;
  cursor: pointer;
  /* 44px is the minimum comfortable tap target on a phone. Padding above
     clears it; this is a floor in case the font is smaller than expected. */
  min-height: 44px;
}
.btn:hover { background: var(--accent-d); color: #fff; }
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.btn-secondary:hover { background: var(--wash); color: var(--accent-d); }

/* --- The sample question --------------------------------------------------- */
/* Deliberately plainer than the rest of the page. It should look like the
   exam, not like marketing. */
.question {
  border: 1px solid #cec8ba;
  background: var(--card);
  padding: 1.4rem;
  margin: 1.5rem 0;
  font-size: 0.88em;     /* follows the body size, always a step below it */
}
.question .scenario p { margin-bottom: 0.85rem; }
.option {
  border-top: 1px solid var(--rule);
  padding: 1rem 0 0.85rem;
  margin-top: 1rem;
}
.option:first-of-type { margin-top: 1.25rem; }
.option-text { margin-bottom: 0.6rem; }
.score {
  display: inline-block;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}
.score-5 { background: #e3f0e3; color: #1d5c1d; }
.score-3 { background: #fdf0dc; color: var(--warn); }
.score-1 { background: #e4e0d6; color: #4a4a4a; }
.score-0 { background: #fbe6e6; color: #8a1f1f; }
.rationale { font-size: 0.85em; color: #333; }
.evidence {
  font-size: 0.8em;
  color: var(--muted);
  margin-top: 0.5rem;
  font-style: italic;
}

/* --- Specification table --------------------------------------------------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.85em;
}
.spec th, .spec td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.spec th { font-weight: 620; width: 42%; }

/* Any table can overflow a phone. This wrapper lets it scroll sideways on its
   own instead of making the whole page scroll. */
.scroll-x { overflow-x: auto; }

/* --- Article list ---------------------------------------------------------- */
.article-list { list-style: none; padding: 0; }
.article-list li {
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0;
  margin: 0;
}
.article-list a { font-weight: 600; text-decoration: none; font-size: 1.12em; }
.article-list a:hover { text-decoration: underline; }
.article-list p { color: var(--muted); font-size: 0.88em; margin: 0.3rem 0 0; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: 4.5rem;
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 3rem;
  color: var(--muted);
  font-size: 0.8em;
  line-height: 1.55;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.9rem; }
.footer-nav a { color: var(--muted); }


/* --- Utilities ------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.center { text-align: center; }

/* Visible only to screen readers. Used for the skip link and for labels that
   would be redundant on screen but are needed for navigation by keyboard. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: 0.7rem 1rem; z-index: 10;
}
.skip-link:focus { left: 0; top: 0; }

/* Visible keyboard focus. Never remove focus outlines without replacing them —
   keyboard users navigate entirely by seeing where focus is. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* --- Small screens ---------------------------------------------------------
   Below 30rem the padding is the problem, not the type. A 320px screen was
   losing 85px to nested padding: 20px each side from .wrap, plus 22px each
   side again from the box inside it. That left 235px of text, which came out
   at 27 characters per line on the product page.

   Tighten the nesting and the same screen gets back roughly a third more
   text per line. Everything else about the layout is unchanged. */
@media (max-width: 30rem) {
  .wrap { padding: 0 0.9rem; }

  /* The header was consuming roughly a third of a phone screen before any
     content appeared: generous vertical padding, then a nav that wrapped onto
     a second line with one item stranded on it. */
  .site-header { padding: 0.8rem 0; margin-bottom: 1.6rem; }
  .site-header .wrap { gap: 0.4rem 1rem; }
  .site-nav { gap: 0.9rem; }
  .site-nav a { font-size: 0.8em; }

  .claim,
  .panel,
  .buy,
  .question { padding: 0.9rem 1rem; }

  .question { margin-left: -0.15rem; margin-right: -0.15rem; }

  /* Headings can afford to be a little tighter here too, so a long title does
     not eat half the first screen. */
  h1 { letter-spacing: -0.025em; }
  h2 { margin-top: 2.25rem; }

  /* Buttons go full width: easier to hit, and it stops two of them wrapping
     into an awkward stack of different lengths. */
  .btn { display: block; width: 100%; text-align: center; }
  .btn + .btn { margin-top: 0.6rem; }
}

/* --- Very wide screens -----------------------------------------------------
   Nothing here changes the reading column, which is already at its comfortable
   limit. This only stops the page hugging a hard pixel cap: the frame may use
   up to 92% of the viewport, so a 1280-1440px laptop fills out rather than
   sitting inside fixed margins, while the text itself never gets longer. */
@media (min-width: 62rem) {
  :root { --frame: min(92vw, 68rem); }
}