/*
File:         site.css  (assets/css)
Title:        Site styles — slate grey, teal and amber, set large for easy reading
Description:  Built for older eyes: an 18px base, generous line height, strong contrast, links that
              are always underlined in body text, and buttons and form controls big enough to hit
              first time. Class names keep the bi- prefix of the fleet skeleton; gs- is this site's.
Created:      2026-11-12   Created By: Seb & AI
Last Updated: 2026-11-12   Updated By: Seb & AI
*/
:root {
  --bi-night: #263238;
  --bi-night-deep: #1b2428;
  --bi-glow: #ffc94d;
  --bi-glow-2: #ffdb85;
  --bi-sea: #00695c;
  --bi-ink: #1c2326;
  --bi-soft: #eef4f2;
  --gs-warn: #b3261e;
}

html { font-size: 112.5%; }               /* 18px base */
html.gs-big { font-size: 131.25%; }       /* 21px: the navbar "AA" button, remembered in localStorage */
body { font-family: 'Inter', system-ui, sans-serif; color: var(--bi-ink); line-height: 1.65; }
h1, h2, h3, h4, .navbar-brand { font-family: 'Poppins', 'Inter', system-ui, sans-serif; }

.bg-night { background-color: var(--bi-night) !important; }
.bg-night-deep { background-color: var(--bi-night-deep) !important; }
.bg-soft { background-color: var(--bi-soft) !important; }
.text-glow { color: var(--bi-glow) !important; }
.text-sea { color: var(--bi-sea) !important; }

a { color: #00574c; text-underline-offset: .15em; }
a:hover { color: #003d35; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 3px solid #1a73e8; outline-offset: 2px; box-shadow: none; }

.btn-glow { background-color: var(--bi-glow); border-color: #e0a92b; color: #1c2326; font-weight: 600; }
.btn-glow:hover, .btn-glow:focus { background-color: var(--bi-glow-2); border-color: #e0a92b; color: #1c2326; }
.btn-outline-glow { border-color: var(--bi-glow); color: var(--bi-glow); }
.btn-outline-glow:hover { background: var(--bi-glow); color: #1c2326; }

.bi-brand-mark { display:inline-flex; width:34px; height:34px; border-radius:.5rem; align-items:center; justify-content:center;
  background: var(--bi-glow); color:#1c2326; font-size:1.1rem; }
.navbar .nav-link { color: rgba(255,255,255,.92); }
.navbar .nav-link:hover { color: #fff; text-decoration: underline; }
.navbar .nav-link.active { color: var(--bi-glow) !important; }
.navbar .form-control-sm { font-size: .9rem; min-width: 11rem; }

.bi-skip-link { position:absolute; left:-9999px; top:0; background:#fff; color:#000; padding:.75rem 1rem; z-index:2000; }
.bi-skip-link:focus { left:0; }

.breadcrumb { font-size: .9rem; }

/* Hero */
.bi-hero { position:relative; overflow:hidden; border-radius:1rem; color:#fff;
  background: linear-gradient(150deg, #263238 0%, #2f4a4a 55%, #00695c 100%); }
.bi-hero > * { position:relative; z-index:1; }
.bi-hero .lead { color: rgba(255,255,255,.93); font-size: 1.15rem; }
.gs-hero-icon { font-size: 9rem; color: var(--bi-glow); }

/* Tiles */
.bi-tile { border:1px solid #d5dbd9; border-radius:.75rem; background:#fff; transition: box-shadow .15s ease, border-color .15s ease; color: var(--bi-ink); }
a.bi-tile:hover { box-shadow: 0 6px 18px rgba(28,35,38,.14); border-color: var(--bi-sea); color: var(--bi-ink); }
.bi-tile-icon { font-size:1.9rem; color: var(--bi-sea); }
.gs-tile-text { font-size:.92rem; color:#414a4e; }
.gs-tile-links li { padding:.15rem 0; font-size:.95rem; }
.gs-age-num { font-family:'Poppins',sans-serif; font-weight:700; font-size:2.2rem; line-height:1.1; color: var(--bi-sea); }

/* Panels */
.gs-panel { background: var(--bi-soft); border:1px solid #d5dbd9; border-radius:.75rem; padding:1.25rem 1.4rem; }
.gs-panel-warn { background:#fff7e0; border-color:#ecd28a; }

/* Article body */
.bi-article { line-height:1.75; font-size:1.02rem; }
.bi-article h2 { font-size:1.4rem; margin-top:2.2rem; margin-bottom:.75rem; }
.bi-article h3 { font-size:1.12rem; margin-top:1.5rem; }
.bi-article .lead { font-size:1.18rem; color:#2c3539; font-weight:400; }
.bi-article li { margin-bottom:.35rem; }
.bi-article table { width:100%; font-size:.95rem; }
.bi-article th { background: var(--bi-soft); }
.bi-article .gs-tip, .gs-tip { border-left:5px solid var(--bi-sea); background:#e9f4f1; padding:.9rem 1.1rem; border-radius:.4rem; margin:1.25rem 0; }
.bi-article .gs-warn, .gs-warn { border-left:5px solid var(--gs-warn); background:#fdecea; padding:.9rem 1.1rem; border-radius:.4rem; margin:1.25rem 0; }
.gs-checked { border-bottom:1px solid #e3e7e6; padding-bottom:.6rem; }

/* Glossary */
.gs-glossary dt { font-family:'Poppins',sans-serif; font-size:1.08rem; margin-top:1.1rem; scroll-margin-top:90px; }
.gs-glossary dd { margin-left:0; }

/* Tools */
.gs-tool { background: var(--bi-soft); border:1px solid #d5dbd9; border-radius:.75rem; padding:1.25rem 1.4rem; }
.gs-tool .form-check { padding:.25rem 0 .25rem 1.9rem; }
.gs-tool .form-check-input { width:1.3rem; height:1.3rem; margin-left:-1.9rem; margin-top:.2rem; border-color:#5f6b70; }
.gs-tool .form-control, .gs-tool .form-select { border-color:#5f6b70; }
.gs-results { list-style:none; padding:0; }
.gs-results li { border:1px solid #d5dbd9; border-radius:.6rem; padding:.75rem 1rem; margin-bottom:.6rem; background:#fff; }
.gs-results li a, .gs-results li strong { display:block; font-weight:600; }
.gs-results li span { display:block; font-size:.95rem; color:#414a4e; }

/* Sidebar */
.bi-sidebar-sticky { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
@media (max-width: 991.98px) { .bi-sidebar-sticky { position: static; max-height: none; overflow: visible; } }
.gs-side-list { font-size:.92rem; }
.gs-side-list .list-group-item { padding-top:.3rem; padding-bottom:.3rem; background:transparent; }

.bi-honeypot { position:absolute; left:-9999px; top:-9999px; }

/* Amazon card */
.bi-shop-card { border:1px solid #e3c877; background:#fffaf0; }
.bi-shop-img { width:72px; height:72px; object-fit:contain; background:#fff; border:1px solid #eee; border-radius:.3rem; flex-shrink:0; }
.bi-shop-title { font-size:.95rem; font-weight:600; line-height:1.3; }
.bi-shop-price { font-size:1.1rem; font-weight:700; color: var(--bi-sea); margin-top:.25rem; }

.bi-prevnext a { font-weight:600; }

/* Footer */
footer a.link-light { text-decoration: underline; }
.gs-foot-text { color:#c9d2d0; font-size:.9rem; }
.gs-foot-head { color:#c9d2d0; letter-spacing:.05em; }

/* Print: article only */
@media print {
  nav, footer, aside, .bi-prevnext, .btn, .gs-print, form { display:none !important; }
  html { font-size: 100%; }
  main { padding:0 !important; }
  .bi-article { font-size:12pt; }
  .col-lg-8 { width:100% !important; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:.85em; color:#444; }
}

/* "More" dropdown and the text-size button */
.gs-more-menu { min-width: 15rem; font-size: .95rem; }
.gs-more-menu .dropdown-item { padding: .45rem 1rem; }
.gs-more-menu .dropdown-item.active { background: var(--bi-sea); }
.gs-textsize { font-weight: 700; line-height: 1; padding: .3rem .55rem; }
.gs-textsize .gs-textsize-big { font-size: 1.35em; margin-left: .1em; }
.gs-textsize[aria-pressed="true"] { background: var(--bi-glow); color: #1c2326; border-color: var(--bi-glow); }

/* Printable checklists, report link, tool verdicts */
.gs-checklist { list-style: none; padding-left: 0; }
.gs-checklist li { position: relative; padding: .45rem 0 .45rem 2.2rem; border-bottom: 1px solid #e3e7e6; }
.gs-checklist li::before { content: ""; position: absolute; left: 0; top: .6rem; width: 1.3rem; height: 1.3rem; border: 2px solid #414a4e; border-radius: .2rem; background: #fff; }
.gs-report { font-size: .9rem; }
.gs-verdict { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-weight: 700; }
