/* ============================================================================
   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:     #e4e4e4;   /* hairlines */
  --wash:     #f6f7f8;   /* panel backgrounds */
  --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: #fff;
  -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: #fff;
}

/* --- 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 #c9c9c9;
  background: #fff;
  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: #f2f2f2; color: #555; }
.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); }
}