/* ============================================================
   TaxTami Hub Theme
   Shared styling for hub / menu landing pages:
     - tarmsmenu.html         (data-hub="tarms")
     - domestictaxesmenu.html (data-hub="domestic")
     - customsmenu.html       (data-hub="customs")
     - calculators.html       (data-hub="calc")

   Primary palette is always green. Each page picks a small
   accent (`--hub-accent`) used for the eyebrow, the lesson-num
   pill, the module-banner gradient and the hero left-stripe.
   ============================================================ */

/* ── Compact Hub Hero slider (only on hub pages, not the homepage) ──
   The shared main.css .banner-section .slide is 1000px tall; here we
   override to roughly half-height for the menu pages. Each rule is
   scoped by [data-hub] so the homepage hero is unaffected. */
[data-hub] .banner-section .slide {
    height: auto;
    min-height: 460px;
    padding-top: 0;
    padding-bottom: 0;
}
[data-hub] .banner-section .content-column .inner-column {
    margin-right: 0;
    padding: 36px 0 28px;
}
[data-hub] .banner-section .content-column .title {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}
[data-hub] .banner-section .content-column h1 {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 14px;
    font-weight: 700;
}
[data-hub] .banner-section .content-column .text {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 18px;
    max-width: 620px;
}
[data-hub] .banner-section .btn-box {
    margin-top: 6px;
}
[data-hub] .banner-section .btn-box .theme-btn {
    padding: 10px 22px;
    font-size: 13px;
    line-height: 1;
    min-height: 0;
    height: auto;
}
@media (max-width: 991px) {
    [data-hub] .banner-section .slide { min-height: 420px; }
    [data-hub] .banner-section .content-column h1 { font-size: 28px; }
    [data-hub] .banner-section .content-column .inner-column { padding: 28px 0 22px; }
}
@media (max-width: 575px) {
    [data-hub] .banner-section .slide { min-height: 380px; }
    [data-hub] .banner-section .content-column h1 { font-size: 24px; }
    [data-hub] .banner-section .content-column .text { font-size: 14px; }
}

/* ── Inline stat row inside Hub Hero slider slides ───────── */
.banner-section .slide-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}
.banner-section .slide-stats .stat-chip {
    background: rgba(255,255,255,0.92);
    color: #1a3a2a;
    border-left: 3px solid #2c724f;
    padding: 5px 11px 5px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.2;
    box-shadow: 0 3px 8px rgba(20,50,35,0.07);
}
.banner-section .slide-stats .stat-chip strong {
    color: #2c724f;
    font-weight: 700;
    margin-right: 5px;
}
@media (max-width: 575px) {
    .banner-section .slide-stats { gap: 8px; margin: 14px 0 18px; }
    .banner-section .slide-stats .stat-chip { font-size: 0.78rem; padding: 6px 10px 6px 9px; }
}

/* ── Family accent variables ─────────────────────────────── */
:root {
    --hub-primary:        #2c724f;
    --hub-primary-dark:   #1e5c3a;
    --hub-primary-soft:   #d6ede2;
    --hub-bg:             #f4f8f6;
    --hub-border:         #c5ddd0;
    --hub-ink:            #1a3a2a;
    --hub-text:           #4a5d52;
    --hub-accent:         #2c724f;
    --hub-accent-dark:    #1e5c3a;
    --hub-accent-soft:    #d6ede2;
}
/* All four pages share the brand green. Subtle shade differences only,
   so each page is distinguishable without breaking the unified look. */
[data-hub="tarms"],
[data-hub="domestic"],
[data-hub="customs"],
[data-hub="calc"] {
    --hub-accent:      #2c724f;
    --hub-accent-dark: #1e5c3a;
    --hub-accent-soft: #d6ede2;
}

/* ── Hero block (the title + stats card at top) ──────────── */
.hub-hero-block,
.tarms-hero-block {
    background: var(--hub-bg);
    border: 1px solid var(--hub-border);
    border-left: 4px solid var(--hub-accent);
    border-radius: 12px;
    padding: 40px 36px;
    margin: 30px 0;
    position: relative;
}
.hub-hero-block .sec-title .title,
.tarms-hero-block .sec-title .title {
    color: var(--hub-accent);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.hub-hero-block .sec-title h1,
.tarms-hero-block .sec-title h1,
.tarms-hero-block h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    color: var(--hub-ink);
    margin: 0 0 18px;
    font-weight: 700;
    font-family: inherit;
}
.hub-hero-block p,
.tarms-hero-block p {
    color: var(--hub-text);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 14px;
}

/* ── Stats strip ─────────────────────────────────────────── */
.hub-stats,
.tarms-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 24px;
}
.hub-stat,
.tarms-stat {
    background: #ffffff;
    border: 1px solid var(--hub-primary-soft);
    border-top: 3px solid var(--hub-accent);
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 140px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.hub-stat:hover,
.tarms-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(20,50,35,0.10);
}
.hub-stat .num,
.tarms-stat .num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--hub-accent);
    line-height: 1;
}
.hub-stat .label,
.tarms-stat .label {
    color: var(--hub-text);
    font-size: 0.82rem;
    margin-top: 6px;
}

/* ── Module section banner ───────────────────────────────── */
/* Small ~8px gap between every section, expanded or collapsed.
   Each banner keeps its rounded corners. */
.hub-module-section,
.tarms-module-section,
.domestic-module-section,
.customs-module-section,
.calc-module-section {
    margin: 8px 0 0;
}
.hub-module-section:first-of-type,
.tarms-module-section:first-of-type,
.domestic-module-section:first-of-type,
.customs-module-section:first-of-type,
.calc-module-section:first-of-type {
    margin-top: 18px;
}
/* Last section: give breathing room before the footer */
.hub-module-section:last-of-type,
.tarms-module-section:last-of-type,
.domestic-module-section:last-of-type,
.customs-module-section:last-of-type,
.calc-module-section:last-of-type {
    margin-bottom: 32px;
}
/* Collapsed sections: same 8px gap, but strip auto-container
   padding so the banner is the only thing taking vertical space. */
.tt-feat-section.is-collapsed > .auto-container {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Sub-course menu pages (ITC / VAT / CGT / Debt) ──
   These pages have a single .tt-feat-section with a .sec-title
   toggle. Tighten the outer padding so they feel as compact as
   the hub pages. */
.tt-feat-section:has(.sec-title.tt-flat-collapsible) {
    padding-top: 12px;
    padding-bottom: 12px;
    margin: 8px 0;
}
.tt-feat-section.is-collapsed:has(.sec-title.tt-flat-collapsible) {
    padding-top: 0;
    padding-bottom: 0;
    margin: 8px 0 0;
}
.sec-title.tt-flat-collapsible {
    margin-bottom: 12px;
}
.tt-feat-section.is-collapsed .sec-title.tt-flat-collapsible {
    margin-bottom: 0;
}
.hub-module-header,
.tarms-module-header,
.domestic-module-header,
.customs-module-header,
.calc-module-header {
    background: linear-gradient(to right, var(--hub-accent), var(--hub-accent-dark));
    color: #ffffff;
    padding: 20px 26px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 4px 12px rgba(20,50,35,0.08);
}
.hub-module-header h3,
.tarms-module-header h3,
.domestic-module-header h3,
.customs-module-header h3,
.calc-module-header h3 {
    color: #ffffff;
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
}
.hub-module-header .module-theme,
.tarms-module-header .module-theme,
.domestic-module-header .module-theme,
.customs-module-header .module-theme,
.calc-module-header .module-theme {
    color: rgba(255,255,255,0.92);
    font-size: 0.9rem;
    font-style: italic;
}

/* ── Module banner uses flex layout so the "Open course menu" link
   sits on the right edge of the green banner. */
.hub-module-header,
.tarms-module-header,
.domestic-module-header,
.customs-module-header,
.calc-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.hub-module-header > div,
.tarms-module-header > div,
.domestic-module-header > div:not(.module-theme),
.customs-module-header > div:not(.module-theme),
.calc-module-header > div:not(.module-theme) {
    /* Wrapper around h3 + theme should not stretch */
    flex: 0 1 auto;
}

/* ── "Open course menu →" badge on each module banner ─────── */
.hub-module-header a.module-link,
.tarms-module-header a.module-link,
.domestic-module-header a.module-link,
.customs-module-header a.module-link,
.calc-module-header a.module-link {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    margin-right: 36px;     /* keep clear of the chevron */
    line-height: 1.2;
}
.hub-module-header a.module-link:hover,
.tarms-module-header a.module-link:hover,
.domestic-module-header a.module-link:hover,
.customs-module-header a.module-link:hover,
.calc-module-header a.module-link:hover,
.hub-module-header a.module-link:focus-visible,
.tarms-module-header a.module-link:focus-visible,
.domestic-module-header a.module-link:focus-visible,
.customs-module-header a.module-link:focus-visible,
.calc-module-header a.module-link:focus-visible {
    background: #fdd116;
    color: #1a3a2a;
    border-color: #fdd116;
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

/* ── Collapsible module headers ────────────────────────────────
   Click a green banner to collapse / expand the lesson grid below.
   Triggered by hub-collapsible.js which toggles `.is-collapsed`
   on the parent `<section>`. */
.hub-module-header,
.tarms-module-header,
.domestic-module-header,
.customs-module-header,
.calc-module-header {
    cursor: pointer;
    user-select: none;
    padding-right: 56px;          /* room for chevron */
    transition: background 0.18s ease;
    position: relative;
}
.hub-module-header:hover,
.tarms-module-header:hover,
.domestic-module-header:hover,
.customs-module-header:hover,
.calc-module-header:hover {
    background: linear-gradient(to right, var(--hub-accent-dark), #143d2a);
}
.hub-module-header::after,
.tarms-module-header::after,
.domestic-module-header::after,
.customs-module-header::after,
.calc-module-header::after {
    content: '';
    position: absolute;
    right: 26px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid #ffffff;
    border-bottom: 2.5px solid #ffffff;
    transform: translate(0, -75%) rotate(45deg);
    transition: transform 0.25s ease;
}
.tt-feat-section.is-collapsed .hub-module-header::after,
.tt-feat-section.is-collapsed .tarms-module-header::after,
.tt-feat-section.is-collapsed .domestic-module-header::after,
.tt-feat-section.is-collapsed .customs-module-header::after,
.tt-feat-section.is-collapsed .calc-module-header::after {
    transform: translate(0, -50%) rotate(-45deg);
}
.tt-feat-section.is-collapsed .hub-module-header,
.tt-feat-section.is-collapsed .tarms-module-header,
.tt-feat-section.is-collapsed .domestic-module-header,
.tt-feat-section.is-collapsed .customs-module-header,
.tt-feat-section.is-collapsed .calc-module-header {
    border-radius: 10px;
}
.tt-feat-section.is-collapsed .tt-feat-grid {
    display: none;
}
.hub-module-header:focus-visible,
.tarms-module-header:focus-visible,
.domestic-module-header:focus-visible,
.customs-module-header:focus-visible,
.calc-module-header:focus-visible {
    outline: 3px solid #fdd116;
    outline-offset: 2px;
}

/* ── Flat sub-course menus (ITC/VAT/CGT/Debt): the .sec-title
   acts as the toggle for the single .tt-feat-grid that follows. */
.sec-title.tt-flat-collapsible {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 56px;
    transition: opacity 0.18s ease;
}
.sec-title.tt-flat-collapsible:hover {
    opacity: 0.88;
}
.sec-title.tt-flat-collapsible::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2.5px solid #2c724f;
    border-bottom: 2.5px solid #2c724f;
    transform: translate(0, -75%) rotate(45deg);
    transition: transform 0.25s ease;
}
.tt-feat-section.is-collapsed .sec-title.tt-flat-collapsible::after {
    transform: translate(0, -50%) rotate(-45deg);
}
.sec-title.tt-flat-collapsible:focus-visible {
    outline: 3px solid #fdd116;
    outline-offset: 4px;
    border-radius: 4px;
}

/* ── Lesson / item card grid ─────────────────────────────── */
.tt-feat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    margin: 0;
}

/* 2-column variant — force exactly two cards per row regardless of count.
   Used for small modules (e.g. Course 5.3 with 4 lessons) where a clean 2x2
   reads better than four narrow cards on one row. */
.tt-feat-grid.tt-feat-grid-2col > .tt-feat-card {
    flex: 0 0 50%;
    min-width: 0;
    max-width: 50%;
}
@media (max-width: 640px) {
    .tt-feat-grid.tt-feat-grid-2col > .tt-feat-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* Cards grow to fill the row width — no empty cells.
   `flex: 1 1 280px` = grow=1 (stretch), shrink=1, base=280px.
   Cards never shrink below min-width 280px (which forces a wrap on narrow
   screens instead of an unreadable card). */
.tt-feat-card {
    flex: 1 1 280px;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    min-height: 220px;
    position: relative;
    text-decoration: none;
    background: #ffffff;
    transition: background 220ms ease, box-shadow 220ms ease;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    overflow: hidden;
}

/* ── Row-balancing for grids that would otherwise leave a single orphan ──
   Uses :has() (supported in all modern browsers). For modules where
   N % 4 == 1, the last row would contain one card stretched alone —
   so we switch to a 3-column basis to get a 3+2 / 3+3+3 layout instead. */

/* N = 5 → 3+2 layout */
.tt-feat-grid:has(> .tt-feat-card:nth-child(5):last-child) .tt-feat-card {
    flex: 1 1 33.333%;
}
/* N = 9 → 3+3+3 layout */
.tt-feat-grid:has(> .tt-feat-card:nth-child(9):last-child) .tt-feat-card {
    flex: 1 1 33.333%;
}
/* N = 13 → 3+3+3+3 plus a final row of 3+1 still has an orphan, so go to 4-col;
   handled by default basis already. (No rule needed.) */

/* N = 1 → the lone card stretches to fill the full row width,
   matching the "no empty white space" rule used elsewhere. */
.tt-feat-grid:has(> .tt-feat-card:only-child) .tt-feat-card {
    flex: 1 1 100%;
    max-width: none;
}
.tt-feat-card:hover {
    background: #f8faf9;
    box-shadow: inset 0 -3px 0 0 var(--hub-accent);
    text-decoration: none;
}
.tt-feat-lesson-num {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--hub-accent);
    border: 1.5px solid var(--hub-accent);
    border-radius: 4px;
    padding: 3px 9px;
    display: inline-block;
    margin: 0 0 20px;
    width: fit-content;
    transition: background 220ms, border-color 220ms;
}
.tt-feat-card:hover .tt-feat-lesson-num {
    background: var(--hub-accent-dark);
    border-color: var(--hub-accent-dark);
}
.tt-feat-icon {
    margin-bottom: 18px;
    padding: 0;
    color: #9ca3af;
    font-size: 1.75rem;
    line-height: 1;
    transition: color 220ms ease;
}
.tt-feat-card:hover .tt-feat-icon {
    color: var(--hub-accent);
}
.tt-feat-title-wrap {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 0;
    line-height: 1.35;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tt-feat-accent {
    width: 3px;
    height: 18px;
    background: var(--hub-accent);
    border-radius: 2px;
    flex-shrink: 0;
    transition: background 220ms ease, height 220ms ease;
}
.tt-feat-card:hover .tt-feat-accent {
    background: var(--hub-accent-dark);
    height: 22px;
}
.tt-feat-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 0;
    background: linear-gradient(to top, rgba(244,250,246,0.9), transparent);
}
.tt-feat-card:hover .tt-feat-overlay {
    opacity: 1;
}
.tt-feat-card > *:not(.tt-feat-overlay) {
    position: relative;
    z-index: 1;
}
.tt-feat-title-text {
    color: #111827;
    display: inline;
    transition: color 220ms ease;
}
.tt-feat-card:hover .tt-feat-title-text {
    color: var(--hub-accent);
}
.tt-feat-desc {
    font-size: 0.845rem;
    color: #6b7280;
    padding: 0;
    line-height: 1.7;
    margin: 0;
    flex: 1;
}

/* ── Card meta footer: reading-time + difficulty badges ─── */
.tt-feat-meta {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed #e5e7eb;
    font-size: 0.72rem;
    align-items: center;
    flex-wrap: wrap;
}
.tt-feat-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}
.tt-feat-meta-time {
    background: #f3f6f4;
    color: #4a5d52;
    border: 1px solid #e5ebe7;
}
.tt-feat-meta-time::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    margin-right: 1px;
    box-sizing: border-box;
}
.tt-feat-meta-diff {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.65rem;
}
.tt-feat-meta-diff-beginner {
    background: #e8f3ec;
    color: #1a5038;
    border: 1px solid #c5ddd0;
}
.tt-feat-meta-diff-intermediate {
    background: #fef3e0;
    color: #92400e;
    border: 1px solid #f5d9b0;
}
.tt-feat-meta-diff-advanced {
    background: #fde8e8;
    color: #991b1b;
    border: 1px solid #f5c8c8;
}

/* ── Visual difficulty meter (3 dots, colour-coded) ────────
   Replaces the text label inside .tt-feat-meta-diff. Three dots
   show progression: ●○○ beginner, ●●○ intermediate, ●●● advanced.
   Original text is still in the DOM (for screen readers) but
   hidden visually via `font: 0/0` then overridden by ::before. */
.tt-feat-meta-diff {
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ── Form / return badge — Zimbabwe-flag red. Sits next to the
   lesson-num pill. The form-code part stays uppercase via
   .tt-feat-form-code-key, while the purpose phrase reads in
   normal case for legibility. */
/* ── Form / Document badge — full-width Zimbabwe-red pill, matches the
   "Form to Fill: CODE — Purpose" pattern used on the index page. */
.tt-feat-form-code {
    display: block;
    background: #ce1126;        /* solid Zimbabwe flag red */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0 0 10px;
    line-height: 1.4;
    max-width: 100%;
    white-space: normal;
    text-decoration: none;
}
.tt-feat-form-code-key {
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;            /* white code on red background */
    margin: 0 2px;
}
/* "Form to Fill:" label that prefixes every badge */
.tt-feat-form-code-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: #ffffff;
    margin-right: 3px;
    opacity: 1;
}
/* Generic variant (no specific form code) — same styling */
.tt-feat-form-code-generic {
    font-weight: 600;
    letter-spacing: 0;
}

/* ── Key-term chips row (rounded pills matching the index theme) */
.tt-feat-keychips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 12px 0 0;
}
.tt-feat-keychip {
    display: inline-block;
    background: #f0f7f3;
    color: #2c724f;
    border: 1px solid rgba(44, 114, 79, 0.18);
    border-radius: 999px;       /* fully rounded pill */
    padding: 3px 9px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tt-feat-card:hover .tt-feat-keychip {
    background: #e8f3ec;
    color: #1a5038;
    border-color: rgba(44, 114, 79, 0.35);
}

/* ── Legislative-reference chip (auto-detected from leg-ref spans) ──
   Sits between the title and the form badge. Brand-green ink on a
   pale-green wash so it reads at a glance without competing with the
   red form pill below it. Wraps naturally — no truncation. */
.tt-feat-legref {
    display: block;
    background: #f8fbf6;
    color: #1a5038;
    border-left: 3px solid #2c724f;
    padding: 4px 10px;
    margin: 0 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 0 4px 4px 0;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
}

/* ── "New" / "Updated" ribbon — top-right of the card */
.tt-feat-fresh {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    line-height: 1.2;
    z-index: 2;
}
.tt-feat-fresh-new {
    background: #fdd116;
    color: #1a3a2a;
    box-shadow: 0 2px 4px rgba(253,209,22,0.4);
}
.tt-feat-fresh-updated {
    background: #2c724f;
    color: #ffffff;
}

/* ── "Next →" sequenced learning path arrow — sits at the right
   of the .tt-feat-meta row via margin-left:auto. The meta row
   itself is a flex container so margin-auto pushes the arrow to
   the far right of the dashed-divider line. */
.tt-feat-meta {
    justify-content: flex-start;
}
.tt-feat-next {
    margin-left: auto;          /* push to the right edge */
    color: #6b7670;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 4px;
    line-height: 1.2;
    align-self: center;
}
.tt-feat-card:hover .tt-feat-next {
    color: #2c724f;
    transform: translateX(2px);
}
.tt-feat-next:hover,
.tt-feat-next:focus-visible {
    color: #1a3a2a !important;
    outline: 2px solid #fdd116;
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Bookmark star (top-right of each lesson card) ────────
   Shares localStorage with the search modal's bookmarks. */
.tt-feat-bookmark {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    background: transparent;
    border: none;
    color: #cfd8d3;
    font-size: 1.05rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    z-index: 5;
    transition: color 0.15s ease, transform 0.15s ease;
}
.tt-feat-bookmark:hover,
.tt-feat-bookmark:focus-visible {
    color: #c97a37;
    transform: scale(1.15);
    outline: 2px solid #fdd116;
    outline-offset: 2px;
    border-radius: 4px;
}
.tt-feat-bookmark.is-bookmarked {
    color: #c97a37;
}

/* ── Page-level filter chip strip (above the first module) */
.tt-hub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 8px;
    padding: 12px 16px;
    background: #f4f8f6;
    border: 1px solid #c5ddd0;
    border-radius: 8px;
    align-items: center;
}
.tt-hub-filters-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4a5d52;
    margin-right: 6px;
}
.tt-hub-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    color: #4a5d52;
    border: 1px solid #d6ede2;
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.tt-hub-filter-chip:hover,
.tt-hub-filter-chip:focus-visible {
    background: #e8f3ec;
    color: #1a5038;
    border-color: #2c724f;
    outline: none;
}
.tt-hub-filter-chip.is-active {
    background: #2c724f;
    color: #ffffff;
    border-color: #2c724f;
}
.tt-hub-filter-chip-count {
    background: rgba(255,255,255,0.85);
    color: #2c724f;
    border-radius: 8px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 2px;
}
.tt-hub-filter-chip.is-active .tt-hub-filter-chip-count {
    background: rgba(255,255,255,0.2);
    color: #ffffff;
}

/* Cards hidden by active filter */
.tt-feat-card.is-filtered {
    display: none !important;
}

/* ── Module-banner bookmark count ─────────────────────────
   Small bookmark icon + count appended next to the module-theme. */
.tt-module-bookmark-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 12px;
    border: 1px solid rgba(255,255,255,0.2);
}
.tt-module-bookmark-count.is-empty {
    display: none;
}

/* ── Per-card CTA pill ("Open course menu →") ──
   A small green pill at the bottom of each lesson card that
   navigates to the relevant course menu. Click is intercepted
   by hub-collapsible.js so it doesn't also fire the card click. */
.tt-feat-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 12px;
    padding: 6px 13px;
    border-radius: 14px;
    background: #f0f7f3;
    color: #2c724f;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    border: 1px solid #c5ddd0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    z-index: 2;
}
.tt-feat-cta:hover,
.tt-feat-cta:focus-visible {
    background: #2c724f;
    color: #ffffff;
    border-color: #2c724f;
    transform: translateY(-1px);
    outline: none;
}
.tt-feat-card:hover .tt-feat-cta {
    border-color: #2c724f;
}
.tt-feat-cta:focus-visible {
    outline: 2px solid #fdd116;
    outline-offset: 2px;
}

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 991px) {
    .hub-hero-block,
    .tarms-hero-block { padding: 30px 22px; }
    .hub-hero-block .sec-title h1,
    .tarms-hero-block .sec-title h1,
    .tarms-hero-block h1 { font-size: 1.8rem; }
    .hub-module-header h3,
    .tarms-module-header h3,
    .domestic-module-header h3,
    .customs-module-header h3,
    .calc-module-header h3 { font-size: 1.2rem; }
}
@media (max-width: 575px) {
    .hub-hero-block,
    .tarms-hero-block { padding: 22px 16px; }
    .hub-hero-block .sec-title h1,
    .tarms-hero-block .sec-title h1,
    .tarms-hero-block h1 { font-size: 1.5rem; }
    .hub-stats,
    .tarms-stats { gap: 12px; }
    .hub-stat,
    .tarms-stat { min-width: 110px; padding: 12px 14px; }
    .hub-stat .num,
    .tarms-stat .num { font-size: 1.5rem; }
}