/* ADMEbio — Article 01 scoped article styles. (ARTICLE-01-TEMPLATE-1)
 *
 * EVERY rule is scoped under .article-01. 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 that loads this file.
 *
 * COLOURS ARE REUSED, NOT INVENTED. Each value below was read out of
 * assets/css/basic.css, with the rule it comes from named beside it:
 *   #eeb800  the brand gold          .btn-s3 background-color, .bg-red
 *   #0071bb  the site blue           used 9x in basic.css
 *   #00a9c8  the site cyan           .fc-lb colour, the standard link class
 *   #ca2031  the site red            reserved, not used here
 *   #333 #666 #ddd #eee #f4f4f4      basic.css neutrals
 *
 * TWO CONTRAST DECISIONS, both deliberate:
 *   - Table headers use #333 ON gold, not white on gold. White on #eeb800 measures about
 *     1.9:1, which fails WCAG AA; #333 on #eeb800 measures about 6.7:1 and passes. The
 *     site uses white-on-gold for short uppercase BUTTON labels, which is a different
 *     reading task from a table header.
 *   - Body links use #0071bb (about 5.2:1) rather than the .fc-lb cyan #00a9c8 (about
 *     2.8:1). Both are site colours; the cyan is kept for non-essential accents.
 *
 * NO @media QUERIES, DELIBERATELY. The storefront has no viewport meta and .container is
 * a fixed 1008px, so a component-level width breakpoint fires on a narrow device while the
 * container around it is still 1008px -- that combination has already pushed a primary CTA
 * off screen once on this site. Reflow here is container-driven only.
 */

/* ---- the article column -------------------------------------------------------------- */
/* ONE centred column. Everything -- title, subtitle, paragraphs, heading rules, callouts,
   tables, figures, checklist, FAQ, CTA and references -- shares this width, so the left and
   right gutters are symmetric and nothing extends past the text.
   The previous build capped PARAGRAPHS at 820px while rules, tables and figures ran to the
   full container, which is the uneven right-hand gap this replaces. There is deliberately
   no element-level width limit anywhere below. */
.article-01{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-01 h1,
.article-01 h2,
.article-01 h3,
.article-01 p,
.article-01 ul,
.article-01 ol{margin:0 0 14px;}

.article-01 h1{font-size:32px;line-height:1.22;color:#0071bb;margin:6px 0 10px;font-weight:bold;}
.article-01 .a01-standfirst{font-size:18px;line-height:1.5;color:#666;margin:0 0 18px;}
.article-01 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;}
.article-01 h3{font-size:17px;line-height:1.35;color:#333;margin:22px 0 7px;font-weight:bold;}
.article-01 a{color:#0071bb;text-decoration:none;}
.article-01 a:hover{text-decoration:underline;}
/* basic.css line 11 sets ol,ul{list-style:none} globally, so the checklist lost its bullets
   and the references lost their numbers -- while the body text cites them as [1]..[5].
   Markers are restored here only, which is how the theme already handles it elsewhere
   (.list li and .ulist-1 li each re-enable disc for their own component). */
.article-01 ul,.article-01 ol{padding-left:24px;}
.article-01 ul li{list-style-type:disc;}
.article-01 ol.a01-refs{list-style-type:decimal;}
.article-01 ol.a01-refs li{list-style-type:decimal;}
.article-01 li{margin-bottom:7px;}
.article-01 .a01-fineprint{font-size:13px;color:#666;font-style:italic;}

/* ---- key-point callout: gold accent, matching the brand ------------------------------- */
.article-01 .a01-callout{background:#f4f4f4;border-left:4px solid #eeb800;padding:14px 18px;margin:0 0 20px;}
.article-01 .a01-callout p{margin:0;}

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

/* ---- tables: the theme's .table look, with a gold header ------------------------------ */
.article-01 .a01-table-wrap{overflow-x:auto;max-width:100%;margin:0 0 22px;}
.article-01 .a01-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;}
.article-01 .a01-table th{background:#eeb800;color:#333;text-align:left;padding:9px 11px;
    font-weight:bold;border:1px solid #e0ad00;vertical-align:bottom;}
.article-01 .a01-table td{padding:9px 11px;border:1px solid #ddd;vertical-align:top;}
.article-01 .a01-table tbody tr:nth-child(even) td{background:#f9f9f9;}

/* ---- figures -------------------------------------------------------------------------- */
/* The image is capped at its natural 1200px and otherwise fills the figure, so inside the
   1008px site container it renders near 970px. 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 is OUTSIDE that scrolling box on purpose. */
.article-01 .a01-fig{max-width:100%;box-sizing:border-box;margin:0 0 24px;padding:12px;border:1px solid #ddd;background:#fff;}
.article-01 .a01-fig-scroll{overflow-x:auto;}
.article-01 .a01-fig-scroll:focus{outline:2px solid #0071bb;outline-offset:2px;}
.article-01 .a01-fig-img{display:block;width:100%;height:auto;max-width:100%;margin:0 auto;}
.article-01 .a01-fig figcaption{font-size:13px;line-height:1.55;color:#666;margin:11px 2px 0;}
.article-01 .a01-fig figcaption a{color:#0071bb;}
.article-01 .a01-fig-full{display:inline-block;margin-top:6px;font-weight:bold;}

/* ---- call to action: brand gold, replacing the former navy gradient ------------------- */
.article-01 .a01-cta{background:#f4f4f4;border:1px solid #ddd;border-top:3px solid #eeb800;
    padding:22px 24px;margin:30px 0;}
.article-01 .a01-cta h2{margin-top:0;border-bottom:none;padding-bottom:0;}
.article-01 .a01-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:#fff;background-color:#eeb800;border:1px solid #ffdd66;}
.article-01 .a01-btn:hover{background-color:#d9a800;text-decoration:none;}
.article-01 .a01-btn-alt{color:#0071bb;background:#fff;border:1px solid #0071bb;}
.article-01 .a01-btn-alt:hover{background:#f4f4f4;}

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