/* ADMEbio — Article 04 scoped article styles. (ARTICLE-04-PREVIEW-1)
 *
 * Article 04 reuses the APPROVED values of Articles 01-03 verbatim -- the 900px centred column,
 * the type scale, the gold table header, the figure frame, the quick-answer callout, the CTA and
 * the reference list -- so the series reads as one design rather than four. The ONLY differences
 * from Article 03's stylesheet are the scope class and the component prefix. If the approved look
 * changes, update this file to match it rather than letting it drift.
 *
 * EVERY rule is scoped under .article-04. There are no bare element selectors, because basic.css
 * is global and an unscoped `h2{}` or `table{}` here would reach the shared header, the navbar and
 * every other page. Articles 01, 02 and 03 are untouched by this file.
 *
 * COLOURS ARE REUSED, NOT INVENTED. Each value was read out of assets/css/basic.css:
 *   #eeb800  the brand gold          .btn-s3 background-color, .bg-red
 *   #0071bb  the site blue           used 9x in basic.css
 *   #333 #666 #ddd #eee #f4f4f4      basic.css neutrals
 *   #fcf8e3 #faebcc                  the theme's notice fill/border
 *
 * ACCESSIBLE CTA FROM THE START. The button label is #333 on the brand gold, not the site's
 * white-on-gold. White on #eeb800 measures 1.83:1 and fails WCAG AA at 15px bold (15px bold is NOT
 * "large text", which needs >=18.66px bold or >=24px). #333 on the same gold measures 6.91:1, and
 * 5.75:1 on the #d9a800 hover. This is the correction Articles 02 and 03 adopted, applied here from the
 * first build. The global .btn-s3 and Article 01 still use white on gold and are deliberately
 * untouched -- correcting those is an estate-wide brand change, not this article's business.
 * DO NOT "restore" this to #fff for consistency with basic.css.
 *
 * NO @media QUERIES, DELIBERATELY. The storefront has no viewport meta and .container is a fixed
 * 1008px, so a component-level breakpoint fires on a narrow device while the container around it
 * is still 1008px. Measured on Article 02: injecting a viewport meta raised horizontal overflow
 * from 28px to 633px at 375px wide, because the container never becomes fluid. Reflow here is
 * container-driven only, exactly as Articles 01-03.
 */

/* ---- the article column -------------------------------------------------------------- */
.article-04{max-width:900px;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box;
    padding:18px 16px 40px;color:#333;font-size:15px;line-height:1.72;}

/* basic.css line 7 zeroes the margin on every heading and p; restore it inside the article only,
   or headings collapse onto the block that follows them. */
.article-04 h1,
.article-04 h2,
.article-04 h3,
.article-04 p,
.article-04 ul,
.article-04 ol{margin:0 0 14px;}

/* No standfirst: the H1 already asks the question, and a subtitle restating it was removed from
   Article 02 for that reason. The H1's bottom margin carries the gap instead. */
.article-04 h1{font-size:32px;line-height:1.22;color:#0071bb;margin:6px 0 18px;font-weight:bold;}
.article-04 h2{font-size:23px;line-height:1.3;color:#0071bb;margin:34px 0 12px;font-weight:bold;
    padding-bottom:7px;border-bottom:2px solid #eee;}
/* h3 carries no rule and a smaller step, so the FAQ questions and any sub-points read
   as subordinate rather than as further top-level sections. */
.article-04 h3{font-size:17px;line-height:1.35;color:#333;margin:22px 0 7px;font-weight:bold;}
.article-04 a{color:#0071bb;text-decoration:none;}
.article-04 a:hover{text-decoration:underline;}
/* basic.css line 11 sets ol,ul{list-style:none} globally, so the checklist and bullet lists lose their
   bullets and the references lose their numbers -- while the body cites [1]..[3]. Markers are
   restored here only, which is how the theme already handles it elsewhere. */
.article-04 ul,.article-04 ol{padding-left:24px;}
.article-04 ul li{list-style-type:disc;}
.article-04 ol.a04-refs{list-style-type:decimal;}
.article-04 ol.a04-refs li{list-style-type:decimal;}
.article-04 li{margin-bottom:7px;}
.article-04 .a04-fineprint{font-size:13px;color:#666;font-style:italic;}
.article-04 .a04-scope{font-size:13.5px;color:#666;margin:0 0 20px;}

/* ---- quick answer: the direct-answer block, gold accent ------------------------------- */
/* Same treatment as Articles 01 and 02's key-point callout, reused rather than restyled. */
.article-04 .a04-quick{background:#f4f4f4;border-left:4px solid #eeb800;padding:14px 18px;margin:0 0 22px;}
.article-04 .a04-quick p{margin:0;}
.article-04 .a04-quick strong{color:#0071bb;}

/* ---- development-only notice (never rendered on Production) --------------------------- */
.article-04 .a04-devnote{background:#fcf8e3;border:1px solid #faebcc;color:#8a6d3b;
    padding:9px 14px;margin:0 0 18px;font-size:13px;}

/* ---- tables: the theme's look, with a gold header ------------------------------------- */
.article-04 .a04-table-wrap{overflow-x:auto;max-width:100%;margin:0 0 22px;}
.article-04 .a04-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;}
.article-04 .a04-table th{background:#eeb800;color:#333;text-align:left;padding:9px 11px;
    font-weight:bold;border:1px solid #e0ad00;vertical-align:bottom;}
.article-04 .a04-table td{padding:9px 11px;border:1px solid #ddd;vertical-align:top;}
/* Row headers keep scope="row" for screen readers, but must LOOK like an ordinary first column:
   without this the gold rule above paints the whole column and the table reads as two header
   bands. Same decision as Articles 02 and 03. */
.article-04 .a04-table tbody th{background:transparent;color:#333;font-weight:bold;
    text-align:left;padding:9px 11px;border:1px solid #ddd;vertical-align:top;}
.article-04 .a04-table tbody tr:nth-child(even) td,
.article-04 .a04-table tbody tr:nth-child(even) th{background:#f9f9f9;}

/* ---- figures -------------------------------------------------------------------------- */
/* The image fills the figure and is capped at 100%, so inside the 1008px site container it
   renders near 870px. overflow-x:auto is a safety net: if the figure is ever placed somewhere
   narrower it scrolls rather than forcing the PAGE to scroll. The figcaption sits OUTSIDE that
   scrolling box on purpose. */
.article-04 .a04-fig{max-width:100%;box-sizing:border-box;margin:0 0 24px;padding:12px;border:1px solid #ddd;background:#fff;}
.article-04 .a04-fig-scroll{overflow-x:auto;}
.article-04 .a04-fig-scroll:focus{outline:2px solid #0071bb;outline-offset:2px;}
.article-04 .a04-fig-img{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;}
.article-04 .a04-fig figcaption{font-size:13px;line-height:1.55;color:#666;margin:11px 2px 0;}
.article-04 .a04-fig figcaption a{color:#0071bb;}
.article-04 .a04-fig-full{display:inline-block;margin-top:6px;font-weight:bold;}

/* ---- call to action -------------------------------------------------------------------- */
.article-04 .a04-cta{background:#f4f4f4;border:1px solid #ddd;border-top:3px solid #eeb800;
    padding:22px 24px;margin:30px 0;}
.article-04 .a04-cta h2{margin-top:0;border-bottom:none;padding-bottom:0;}
/* color:#333 is the accessible choice documented in this file's header. Not a mistake. */
.article-04 .a04-btn{display:inline-block;margin:8px 10px 0 0;padding:0 18px;min-height:34px;
    line-height:34px;border-radius:4px;font-size:15px;font-weight:bold;text-transform:uppercase;
    text-decoration:none;color:#333;background-color:#eeb800;border:1px solid #ffdd66;}
.article-04 .a04-btn:hover{background-color:#d9a800;text-decoration:none;}
.article-04 .a04-btn-alt{color:#0071bb;background:#fff;border:1px solid #0071bb;}
.article-04 .a04-btn-alt:hover{background:#f4f4f4;}

/* ---- references ----------------------------------------------------------------------- */
.article-04 .a04-refs{font-size:13.5px;color:#666;}
.article-04 .a04-refs li{margin-bottom:10px;}