/* ===================================
   Tax Radar - Resources

   The library: a statement hero, then four ruled sections (Guides,
   Reference, Articles, Press) and a boxed CTA. Guides and Articles are
   ruled ledger rows; Reference is the one bordered card grid on the page;
   Press is the single full-bleed navy anchor.

   Loaded last, after css/tokens.css, css/fonts.css, css/cookie-consent.css,
   css/footer.css and css/nav.css. Every var() carries the tokens.css hex as a
   fallback so the page still renders correctly if tokens.css fails to load.
   The brand palette is not re-declared here; the two local custom properties
   below are mockup values that have no token, declared the same way the
   homepage, walkthrough, contact, bespoke, pricing and about stylesheets
   declare theirs.

   The global reset lives here because this page carries no inline <style>
   block and css/footer.css relies on list and heading margins being zeroed.

   Motion: the .reveal fade and lift, armed by html.js so that with
   JavaScript off the content is simply visible, plus the row and card hover
   tints. All of it is disabled under prefers-reduced-motion.
   ================================ */

:root {
    /* Mockup value with no token, as on the homepage, walkthrough, contact,
       bespoke, pricing and about pages. */
    --teal-hover: #238A7E;

    /* Body copy inside the navy press anchor. --ink-soft is correct on paper
       and far too dark on navy. Same value and same role as the pricing
       page's navy anchor; measured 8.1:1 on --navy. */
    --on-dark-body: #B8C4DA;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--paper, #F8F9FA);
    color: var(--navy, #1B2A4A);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--teal, #2A9D8F);
}

a:hover {
    color: var(--teal-hover, #238A7E);
}

img {
    max-width: 100%;
}

/* Skip link --------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-size: 15px;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

/* The main element takes focus from the skip link, so it must not paint a
   focus ring of its own around the whole page. */
#main-content:focus {
    outline: none;
}

/* Page shell --------------------------------------------------------- */

.resources-shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
}

/* Shared type -------------------------------------------------------- */

/* Page kicker: teal, with the short leading rule, above the h1. */
.kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--teal, #2A9D8F);
    text-transform: uppercase;
    margin-bottom: 26px;
}

.kicker-rule {
    width: 28px;
    height: 1px;
    background: var(--teal, #2A9D8F);
    flex: none;
}

/* The numbered section label above each h2. */
.section-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.section-num {
    color: var(--teal, #2A9D8F);
    font-weight: 500;
}

.section-heading {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 32px);
    line-height: 1.15;
}

/* Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.btn:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--teal, #2A9D8F);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--teal-hover, #238A7E);
    color: #FFFFFF;
}

.btn-lg {
    font-size: 17px;
    padding: 16px 32px;
}

/* Hero --------------------------------------------------------------- */

.hero {
    padding: 88px 0 56px;
}

.hero h1 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(34px, 5vw, 50px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: 22ch;
    margin-bottom: 24px;
}

.hero-lede {
    font-size: clamp(17px, 1.7vw, 19px);
    color: var(--ink-soft, #4A5568);
    max-width: 58ch;
    line-height: 1.65;
}

/* Library sections --------------------------------------------------- */

.library {
    padding: 64px 0;
    border-top: 1px solid var(--rule, #D6DAE1);
}

/* Ruled ledger rows: Guides and Articles ----------------------------- */

.ledger {
    margin-top: 32px;
    border-top: 1px solid var(--rule, #D6DAE1);
}

/* Each row is a single whole-row link, as mocked. The press rows use a
   different structure because some of them carry two destinations. */
.ledger-row {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    gap: 36px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--rule, #D6DAE1);
    text-decoration: none;
    color: var(--navy, #1B2A4A);
    transition: background 0.2s ease;
}

.ledger-row:hover {
    background: var(--paper-deep, #EFF1F4);
    color: var(--navy, #1B2A4A);
}

.ledger-row:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: 2px;
}

.ledger-tag {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--teal, #2A9D8F);
}

.ledger-title {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 6px;
}

.ledger-desc {
    font-size: 15px;
    color: var(--ink-soft, #4A5568);
    max-width: 64ch;
}

.ledger-byline {
    display: block;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--ink-soft, #4A5568);
    text-transform: uppercase;
    margin-top: 10px;
}

.ledger-action {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--teal, #2A9D8F);
    white-space: nowrap;
}

/* Reference cards ---------------------------------------------------- */

.ref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 32px;
    border: 1px solid var(--rule, #D6DAE1);
    background: #FFFFFF;
}

.ref-card {
    padding: 32px 28px;
    text-decoration: none;
    color: var(--navy, #1B2A4A);
    border-left: 1px solid var(--rule, #D6DAE1);
    transition: background 0.2s ease;
}

.ref-card:first-child {
    border-left: 0;
}

.ref-card:hover {
    background: var(--paper-deep, #EFF1F4);
    color: var(--navy, #1B2A4A);
}

.ref-card:focus-visible {
    outline: 2px solid var(--navy, #1B2A4A);
    outline-offset: -2px;
}

.ref-count {
    display: block;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--teal, #2A9D8F);
    margin-bottom: 12px;
}

.ref-title {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ref-desc {
    font-size: 14.5px;
    color: var(--ink-soft, #4A5568);
}

.ref-action {
    display: block;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--teal, #2A9D8F);
    margin-top: 16px;
}

/* Press: the one full-bleed navy anchor ------------------------------ */

.press {
    background: var(--navy, #1B2A4A);
    color: var(--paper, #F8F9FA);
    padding: 72px 0;
}

/* Lifted for contrast on navy, as on the pricing page's navy anchor.
   --ink-soft is a paper value and fails there. Measured 5.6:1. */
.press .section-tag {
    color: var(--ink-dim, #93A3BF);
}

.press .section-num {
    color: var(--teal-bright, #3DB9A4);
}

.press .section-heading {
    color: var(--paper, #F8F9FA);
}

.press-list {
    margin-top: 32px;
    border: 1px solid rgba(248, 249, 250, 0.18);
}

/* Not a whole-row link: the HardHats row carries two destinations, so
   every row states its actions explicitly and they stay consistent. */
.press-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 36px;
    align-items: baseline;
    padding: 26px 32px;
    border-bottom: 1px solid rgba(248, 249, 250, 0.14);
}

.press-row:last-child {
    border-bottom: 0;
}

.press-outlet {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--teal-bright, #3DB9A4);
}

.press-title {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--paper, #F8F9FA);
    margin-bottom: 6px;
}

.press-desc {
    font-size: 14.5px;
    color: var(--on-dark-body, #B8C4DA);
    max-width: 62ch;
}

.press-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.press-action {
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    color: var(--teal-bright, #3DB9A4);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.press-action:hover {
    color: var(--paper, #F8F9FA);
}

.press-action:focus-visible {
    outline: 2px solid var(--paper, #F8F9FA);
    outline-offset: 2px;
}

/* CTA ---------------------------------------------------------------- */

.cta-section {
    padding: 96px 0;
}

.cta {
    position: relative;
    border: 1px solid var(--navy, #1B2A4A);
    background: #FFFFFF;
    padding: 56px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 48px;
    align-items: center;
}

/* Breaks the top border, so the box reads as a stamped panel. */
.cta-caption {
    position: absolute;
    top: -9px;
    left: 48px;
    background: var(--paper, #F8F9FA);
    padding: 0 12px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--teal, #2A9D8F);
}

.cta h2 {
    font-family: var(--font-heading, 'Fraunces', Georgia, 'Times New Roman', serif);
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.15;
}

.cta p {
    color: var(--ink-soft, #4A5568);
    font-size: 16px;
    margin-top: 12px;
    max-width: 48ch;
}

.cta-action {
    text-align: right;
}

/* Reveal ------------------------------------------------------------- */

/* Armed only once js/reveal.js has swapped html.no-js for html.js, so with
   scripting off the content is simply visible and never hidden. */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 1024px) {
    .hero {
        padding: 72px 0 48px;
    }

    .library {
        padding: 56px 0;
    }

    .press {
        padding: 64px 0;
    }

    .cta-section {
        padding: 72px 0;
    }

    .cta {
        padding: 44px;
    }

    .cta-caption {
        left: 36px;
    }

    /* The tag columns lose their generous gutters first, before anything
       has to restack. */
    .ledger-row {
        grid-template-columns: 120px 1fr auto;
        gap: 24px;
    }

    .press-row {
        grid-template-columns: 150px 1fr auto;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .resources-shell {
        padding: 0 24px;
    }

    /* Three reference cards side by side stop being legible well before the
       ledger rows do. */
    .ref-grid {
        grid-template-columns: 1fr;
    }

    .ref-card {
        border-left: 0;
        border-top: 1px solid var(--rule, #D6DAE1);
    }

    .ref-card:first-child {
        border-top: 0;
    }

    .cta {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .cta-action {
        text-align: left;
    }

    .cta p {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .resources-shell {
        padding: 0 20px;
    }

    /* The 150px and 200px fixed tag tracks plus the nowrap action column
       overflow a 375px viewport once the shell padding and gap are taken
       out, so every multi-column row restacks. Nothing on this page keeps
       more than one column here. */
    .ledger-row,
    .press-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .press-row {
        padding: 24px;
    }

    .ledger-desc,
    .press-desc {
        max-width: none;
    }

    /* Free to wrap once the row is a single column. */
    .ledger-action,
    .press-action {
        white-space: normal;
    }

    .press-actions {
        flex-direction: row;
        align-items: baseline;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 4px;
    }

    .cta {
        padding: 36px 24px;
    }

    .cta-caption {
        position: static;
        display: block;
        background: none;
        padding: 0;
        margin-bottom: 16px;
    }
}

/* Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn,
    a,
    .ledger-row,
    .ref-card,
    .press-action {
        transition: none;
    }
}