/* =========================================================
   FOREST GREEN TOPLIST THEME
   Deep forest green page, cream logo tiles, bright yellow buttons.

   HOW TO RE-SKIN THE SITE
   Change the colours in the block below. That is the whole skin.
   The same colour names also sit in data/site.json, and site.json
   WINS, so for a normal re-skin you only edit site.json.

   Written MOBILE FIRST. The rules you read first ARE the phone
   layout. Everything under a "min-width" heading further down is
   the extra styling that only bigger screens get.
   ========================================================= */

:root {
    /* ----- colours ----- */
    --page:         #0D2519;   /* the page background, the deepest green */
    --panel:        #133027;   /* a raised box: ranked rows, review cards */
    --ink:          #14301F;   /* dark green text that sits ON the yellow */
    --line:         #2A5443;   /* every border line */
    --line-bright:  #3A6B55;   /* the border when you hover a ranked row */
    --accent:       #FFE03D;   /* the bright yellow: buttons, rules, markers */
    --accent-hover: #F0CE2E;   /* the yellow, one shade deeper, for hover */
    --text:         #EEF4EF;   /* headings and bright text, almost white */
    --body:         #CFE0D6;   /* normal paragraph text */
    --muted:        #A9C4B4;   /* quiet text: dates, small print, table heads */
    --tile:         #F7F5EE;   /* the cream tile a brand logo sits on */

    /* ----- widths ----- */
    --wide:   1520px;          /* widest the header and ranked list ever get */
    --shell:  1160px;          /* the ranked list and review cards */
    --read:    880px;          /* the reading column for long text */

    /* ----- corners ----- */
    --curve-l: 10px;           /* big boxes: ranked rows, review cards */
    --curve-s:  8px;           /* small boxes: buttons, logo tiles */

    /* ----- fonts ----- */
    --font-display: 'Bricolage Grotesque', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
    --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------
   BASE: the plain building blocks
   --------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--page);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.65;
    overflow-wrap: break-word;   /* long words wrap instead of pushing the page wide */
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--ink); }

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

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Any word you want picked out in yellow: wrap it in <span class="hl"> */
.hl { color: var(--accent); }

/* The keyboard-only "jump past the header" link */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--accent); color: var(--ink);
    padding: 10px 16px; font-weight: 700; text-decoration: none;
    border-radius: 0 0 var(--curve-s) 0;
}
.skip-link:focus { left: 0; }

/* The centring wrapper every block sits inside.
   On a phone that leaves a 14px gutter down each side. */
.container { width: calc(100% - 28px); margin-inline: auto; }

/* ---------------------------------------------------------
   THE YELLOW RULE (the chequered-flag stripe)
   A 3px yellow bar that stops short of the right edge, with two
   small yellow squares trailing off it. Sits under the header and
   above the footer.
   --------------------------------------------------------- */
.accent-rule { position: relative; height: 3px; }
.accent-rule::before {
    content: ""; position: absolute; inset: 0 56px 0 0;
    background: var(--accent);
}
.accent-rule i { position: absolute; width: 9px; height: 9px; background: var(--accent); }
.accent-rule i:first-child { right: 30px; top: -4px; }
.accent-rule i:last-child  { right: 17px; top: 2px; }

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.site-header { background: var(--page); }

.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 14px 0 10px;
}
.header-brand { display: flex; align-items: center; min-width: 0; text-decoration: none; }
.header-brand img { height: 30px; width: auto; max-width: 200px; object-fit: contain; }

/* Used instead of a logo image if you have no logo file yet */
.header-name {
    font-family: var(--font-display); font-weight: 800; font-size: 25px;
    letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}

/* The short line of text on the right of the logo. Hidden on phones. */
.header-tagline { display: none; font-size: 13.5px; font-weight: 500; color: var(--muted); text-align: right; }

.header-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0 0 12px; }
.header-nav a {
    font-size: 14.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; padding: 4px 0; transition: color .12s;
}
.header-nav a:hover, .header-nav a[aria-current] { color: var(--text); }

/* ---------------------------------------------------------
   HERO: the page title, the updated date, the intro
   --------------------------------------------------------- */
.hero { padding: 34px 0 22px; }
.hero-title {
    font-size: 29px; font-weight: 800; line-height: 1.06; letter-spacing: -.01em;
    max-width: 24ch; margin-inline: auto; text-align: center;
}
.hero-meta {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: 6px 10px; margin-top: 16px;
    font-size: 14px; color: var(--muted); text-align: center;
}
.hero-meta b { font-weight: 600; color: var(--text); }

.hero-lede-wrap { margin-top: 20px; max-width: var(--read); margin-inline: auto; text-align: center; }
.hero-lede { font-size: 17.5px; line-height: 1.62; color: var(--body); }
.hero-lede p { margin-bottom: 12px; }
.hero-lede p:last-child { margin-bottom: 0; }

/* An optional wide picture under the intro */
.hero-image { max-width: var(--read); margin: 26px auto 0; }
.hero-image img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--curve-s); }

/* ---------------------------------------------------------
   SECTIONS AND HEADINGS
   --------------------------------------------------------- */
.section { padding: 32px 0 6px; }
.section-head { margin-bottom: 24px; }
.section-head h2 {
    font-size: 24px; line-height: 1.15; text-align: center;
    max-width: var(--read); margin-inline: auto;
}

/* ---------------------------------------------------------
   PROSE: the long-text blocks. Centred text, left-aligned lists.
   --------------------------------------------------------- */
.prose { max-width: var(--read); margin-inline: auto; text-align: center; color: var(--body); hyphens: auto; }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 26px; color: var(--text); margin: 28px 0 12px; }
.prose h3 { font-size: 21px; color: var(--text); margin: 24px 0 10px; }
.prose h4 { font-size: 18px; color: var(--text); margin: 20px 0 8px; }
.prose ul, .prose ol { margin: 0 0 14px 22px; text-align: left; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--curve-s); margin: 0 auto 16px; }
.prose blockquote {
    background: var(--panel); border-left: 3px solid var(--accent);
    border-radius: 0 var(--curve-s) var(--curve-s) 0;
    padding: 18px 24px; margin: 22px 0;
    font-size: 16.5px; color: var(--body); text-align: left;
}

/* ---------------------------------------------------------
   THE RANKED LIST
   On a phone each entry is one stacked card:
   rank number and score on one line, then the cream logo tile,
   then the name and the offer, then the yellow button.
   --------------------------------------------------------- */
.rank-list { display: flex; flex-direction: column; gap: 14px; max-width: var(--shell); margin-inline: auto; }

.rank-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--curve-l);
    padding: 16px 12px;
    transition: border-color .12s;
}
.rank-row:hover { border-color: var(--line-bright); }

/* the "1" and the yellow score box, side by side on a phone */
.rank-badges { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.rank-number {
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    color: var(--muted); line-height: 1; font-variant-numeric: tabular-nums;
}
.rank-score {
    width: 48px; height: 48px; border-radius: var(--curve-s);
    background: var(--accent); color: var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
.rank-score b { font-size: 17px; font-weight: 800; line-height: 1; }
.rank-score span { font-size: 9.5px; font-weight: 700; line-height: 1; margin-top: 3px; opacity: .72; }

/* the cream tile the brand logo sits on */
.rank-logo {
    width: 100%; height: 104px; border-radius: var(--curve-s);
    background: var(--tile);
    display: flex; align-items: center; justify-content: center;
    padding: 14px; overflow: hidden; flex: none;
}
.rank-logo img { width: auto; height: auto; max-width: 70%; max-height: 76px; object-fit: contain; }
/* the text shown inside the tile if a brand has no logo image */
.rank-logo-text { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--ink); line-height: 1; }

.rank-detail { min-width: 0; text-align: center; }
.rank-name {
    display: block; font-family: var(--font-display);
    font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 7px;
}
.rank-offer {
    font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; color: var(--text);
    /* keep every row the same height by cutting the offer after 3 lines */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
/* optional small extras under the offer, e.g. "Min £10" */
.rank-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--muted); }

.rank-action { display: flex; flex-direction: column; gap: 8px; }
.btn-cta {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 54px; padding: 12px 18px;
    background: var(--accent); color: var(--ink);
    font-size: 16px; font-weight: 700; text-decoration: none;
    border-radius: var(--curve-s);
    transition: background-color .12s;
}
.btn-cta:hover { background: var(--accent-hover); color: var(--ink); }
.rank-terms { font-size: 12px; font-weight: 500; color: var(--muted); text-align: center; }

/* ---------------------------------------------------------
   SHOW MORE
   No JavaScript. The button is a label joined to a hidden
   tickbox. Ticking it reveals the rest of the ranked rows, so
   it still works with scripts switched off.
   --------------------------------------------------------- */
.show-more-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rank-row.is-extra { display: none; }
.show-more-toggle:checked ~ .rank-list .rank-row.is-extra { display: flex; }
.show-more-toggle:checked ~ .show-more-wrap { display: none; }

.show-more-wrap { display: flex; justify-content: center; margin-top: 22px; }
.btn-ghost {
    background: none; color: var(--text);
    border: 1px solid var(--line); border-radius: var(--curve-s);
    padding: 13px 30px; font-size: 15px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: border-color .12s;
}
.btn-ghost:hover { border-color: var(--muted); }
/* give the label a focus ring when the hidden tickbox is focused */
.show-more-toggle:focus-visible ~ .show-more-wrap .btn-ghost { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------
   TABLES
   Wide tables scroll sideways inside their own box, so they can
   never push the whole page sideways on a phone.
   --------------------------------------------------------- */
.table-scroll { overflow-x: auto; max-width: var(--read); margin: 6px auto 16px; }
.table-scroll table { border-collapse: collapse; min-width: 640px; width: 100%; font-size: 15.5px; margin: 0; }
.table-scroll th {
    font-family: var(--font-display); font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    text-align: left; padding: 10px 16px 12px; border-bottom: 2px solid var(--line);
}
.table-scroll td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--body); text-align: left; }
.table-scroll td:first-child { font-weight: 600; color: var(--text); }

/* A table with only two columns already fits a phone, so it is let off the
   640px minimum and never scrolls sideways. The builder adds this class for
   you when it counts two columns. */
.table-scroll.is-narrow table { min-width: 0; }

/* The "label then value" spec table used inside a review card */
.spec-table th { border-bottom: 1px solid var(--line); white-space: nowrap; }

/* ---------------------------------------------------------
   REVIEW CARDS
   The longer write-up for each brand: a heading, an optional
   screenshot that runs edge to edge, then the text.
   --------------------------------------------------------- */
.review-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--curve-l);
    padding: 20px 16px; overflow: hidden;
    max-width: var(--shell); margin-inline: auto;
}
.review-card h3 { font-size: 22px; line-height: 1.25; margin-bottom: 6px; text-align: center; }
/* the negative margin is what makes the screenshot reach the card edges */
.review-shot { margin: 16px -16px; }
.review-shot img { width: 100%; height: auto; }
.review-body { color: var(--body); }
.review-body p { margin: 0 0 13px; }
.review-body p:last-child { margin-bottom: 0; }
.review-body h4 { font-size: 17px; color: var(--text); margin: 18px 0 8px; }
.review-body ul, .review-body ol { margin: 0 0 13px 22px; }
.review-body li { margin-bottom: 5px; }
.review-body li::marker { color: var(--muted); }
.review-body strong { color: var(--text); font-weight: 600; }
.review-body img { border: 1px solid var(--line); border-radius: var(--curve-s); margin: 0 auto 13px; }

/* ---------------------------------------------------------
   FAQ
   Uses the browser's own open and shut dropdown, so it needs no
   JavaScript. The yellow square turns into a diamond when open.
   --------------------------------------------------------- */
.faq { max-width: var(--read); margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: center; gap: 14px;
    list-style: none; cursor: pointer; padding: 19px 2px;
    font-family: var(--font-display); font-size: 18px; font-weight: 700;
    line-height: 1.3; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq-marker { flex: none; width: 10px; height: 10px; background: var(--accent); font-style: normal; transition: transform .12s; }
.faq details[open] summary .faq-marker { transform: rotate(45deg); }
.faq-answer { padding: 0 2px 20px 24px; color: var(--body); font-size: 16.5px; text-align: left; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.site-footer { margin-top: 56px; }

/* the small-print band, one shade lighter than the page */
.footer-note-band { background: var(--panel); }
.footer-note { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; }
.footer-note-text { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.footer-note-text p { margin: 0 0 8px; }
.footer-note-text p:last-child { margin-bottom: 0; }
.footer-note-text a { color: var(--text); }

/* the round 18+ badge */
.age-badge {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    border: 1.5px solid var(--muted); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; letter-spacing: .02em; margin-top: 2px;
}

.footer-bar {
    display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
    justify-content: space-between; padding: 18px 0 26px;
}
.footer-copy { font-size: 12.5px; color: var(--muted); }

/* Helpers: show a thing only on phones, or only on bigger screens */
.mobile-only { display: block; }
.desktop-only { display: none; }

/* =========================================================
   FROM 409px WIDE UP  (bigger phones)
   Slightly wider gutters and a bigger headline.
   ========================================================= */
@media (min-width: 409px) {
    .container { width: calc(100% - 40px); }
    .rank-row { padding: 18px 16px; }
    .hero-title { font-size: clamp(30px, 5vw, 42px); }
    .header-brand img { height: 32px; max-width: 220px; }
}

/* =========================================================
   FROM 721px WIDE UP  (tablets and small laptops)
   The ranked row stops stacking and becomes a real row:
   number, logo, offer across the top, button underneath.
   ========================================================= */
@media (min-width: 721px) {
    body { font-size: 17px; }
    .container { width: min(var(--wide), 100% - 64px); }

    .header-inner { padding: 20px 0 14px; }
    .header-brand img { height: 40px; max-width: 280px; }
    .header-tagline { display: block; }
    .header-nav { gap: 6px 26px; padding-bottom: 14px; }
    .header-nav a { font-size: 15px; }

    .hero { padding-top: 42px; }
    .section-head h2 { font-size: clamp(25px, 3vw, 30px); }

    .rank-row {
        display: grid;
        grid-template-columns: 56px 176px minmax(0, 1fr);
        grid-template-areas: 'num logo detail' 'act act act';
        gap: 24px; align-items: center;
        padding: 20px 24px;
    }
    .rank-badges { grid-area: num; flex-direction: column; justify-content: flex-start; gap: 10px; }
    .rank-logo { grid-area: logo; width: 176px; height: 100px; padding: 12px; }
    .rank-logo img { width: 100%; height: 100%; max-width: none; max-height: none; }
    .rank-detail { grid-area: detail; text-align: left; }
    .rank-name { font-size: 20px; }
    .rank-offer { font-size: 21px; -webkit-line-clamp: 2; }
    .rank-facts { justify-content: flex-start; }
    .rank-action { grid-area: act; flex-direction: row; align-items: center; gap: 16px; }
    .btn-cta { flex: 1 1 auto; width: auto; min-height: 52px; }
    .rank-terms { flex: none; text-align: right; }
    .show-more-toggle:checked ~ .rank-list .rank-row.is-extra { display: grid; }

    .prose { hyphens: manual; }
    .review-card { padding: 28px; }
    .review-shot { margin: 20px -28px; }

    .footer-note { padding: 22px 0; }
    .footer-bar { padding: 18px 0 30px; }

    .mobile-only { display: none; }
    .desktop-only { display: block; }
}

/* =========================================================
   FROM 1021px WIDE UP  (laptops)
   A little more breathing room and a bigger headline.
   ========================================================= */
@media (min-width: 1021px) {
    .hero { padding-top: 56px; }
    .hero-title { font-size: clamp(32px, 4.6vw, 50px); }
    .section { padding-top: 40px; }
}

/* =========================================================
   FROM 1241px WIDE UP  (wide screens)
   The button moves up onto the same line as everything else,
   so each entry is one clean four-column row.
   ========================================================= */
@media (min-width: 1241px) {
    .rank-row {
        grid-template-columns: 64px 210px minmax(0, 1fr) 232px;
        grid-template-areas: 'num logo detail act';
    }
    .rank-logo { width: 210px; height: 120px; padding: 16px; }
    .rank-action { flex-direction: column; align-items: stretch; gap: 8px; }
    .btn-cta { min-height: 54px; }
    .rank-terms { text-align: center; }
}

/* Respect the visitor's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    .rank-row, .btn-cta, .btn-ghost, .faq-marker, .header-nav a { transition: none; }
}