/* ============================================================
   K53 South Africa — App CSS Design System
   Mobile-first hybrid: iOS-native feel (mobile) + clean
   professional website (desktop >= 768px)

   All selectors match the BEM class names used in templates.
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
    --color-primary:     #CC0000;
    --color-text:        #1a1a1a;
    --color-body:        #555;
    --color-muted:       #8e8e93;
    --color-accent:      #0094da;
    --color-success:     #34c759;
    --color-warning:     #ff9500;
    --color-danger:      #CC0000;
    --color-bg-mobile:   #f2f2f7;
    --color-bg-desktop:  #ffffff;
    --color-card:        #ffffff;
    --color-border:      #ebebeb;
    --font-stack:        -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    --radius-mobile:     16px;
    --radius-desktop:    10px;
    --radius-button:     8px;
}


/* ============================================================
   2. RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   3. BASE
   ============================================================ */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-stack);
    background-color: var(--color-bg-mobile);
    color:            var(--color-body);
    line-height:      1.6;
    overflow-x:       hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

ul,
ol {
    list-style: none;
}

button {
    font-family: var(--font-stack);
    cursor: pointer;
    border: none;
    background: none;
}

/* Tab bar clearance on mobile */
main {
    padding-bottom: 80px;
}


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    color:          var(--color-text);
    font-weight:    800;
    letter-spacing: -1px;
    line-height:    1.15;
}

h1 { font-weight: 900; letter-spacing: -2px; }
h2 { font-weight: 900; letter-spacing: -1.5px; }
h3 { font-weight: 800; letter-spacing: -1px; }
h4 { font-weight: 700; letter-spacing: -0.5px; }
h5 { font-weight: 700; letter-spacing: 0; }
h6 { font-weight: 700; letter-spacing: 0; }

.text-primary { color: var(--color-primary); }
.text-muted   { color: var(--color-muted); }
.text-body    { color: var(--color-body); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-accent  { color: var(--color-accent); }


/* ============================================================
   5. BUTTONS
   ============================================================ */

/* Base .btn — shared reset for all button variants */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    font-family:     var(--font-stack);
    font-size:       14px;
    font-weight:     700;
    line-height:     1;
    padding:         14px 32px;
    border-radius:   var(--radius-button);
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    transition:      all 0.15s ease;
    white-space:     nowrap;
}

/* .btn-red — solid red primary CTA */
.btn-red,
.btn-primary,
.btn--primary {
    background: var(--color-primary);
    color:      #fff;
}

.btn-red:hover,
.btn-red:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn--primary:hover,
.btn--primary:focus {
    background: #a80000;
}

.btn-red:active,
.btn-primary:active,
.btn--primary:active {
    background: #900000;
    transform: scale(0.98);
}

/* .btn-outline-red — white with red border */
.btn-outline-red {
    background: #fff;
    color:      var(--color-primary);
    border:     2px solid var(--color-primary);
    padding:    13px 30px;
}

.btn-outline-red:hover,
.btn-outline-red:focus {
    background: #fff8f8;
}

.btn-outline-red:active {
    background: #ffeeee;
    transform: scale(0.98);
}

/* .btn--secondary — outline style for secondary actions */
.btn--secondary {
    background: #fff;
    color:      var(--color-text);
    border:     2px solid var(--color-border);
    padding:    13px 30px;
}

.btn--secondary:hover,
.btn--secondary:focus {
    border-color: var(--color-text);
    background: #f9f9f9;
}

/* .btn-ghost — text-only style for tertiary actions */
.btn-ghost {
    background: transparent;
    color:      var(--color-body);
    padding:    14px 16px;
}

.btn-ghost:hover,
.btn-ghost:focus {
    background: #f5f5f5;
    color: var(--color-text);
}

/* .btn-white — white button on dark backgrounds */
.btn-white {
    background:  #fff;
    color:       var(--color-primary);
    font-weight: 800;
    border-radius: 12px;
}

.btn-white:active {
    transform: scale(0.97);
}

/* .btn-sm — compact size modifier */
.btn-sm {
    padding:   10px 20px;
    font-size: 13px;
}


/* ============================================================
   6. CONTAINER
   ============================================================ */
.container {
    max-width: 1140px;
    margin:    0 auto;
    padding:   0 16px;
    width:     100%;
}

.container--narrow,
.narrow {
    max-width: 720px;
    margin:    0 auto;
    width:     100%;
}


/* ============================================================
   7. DESKTOP NAV
   ============================================================ */
.desktop-nav {
    display:       none; /* Hidden on mobile by default */
    background:    #fff;
    border-bottom: 1px solid #f0f0f0;
    position:      sticky;
    top:           0;
    z-index:       100;
    width:         100%;
}

.desktop-nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          64px;
    max-width:       1140px;
    margin:          0 auto;
    padding:         0 32px;
}

.desktop-nav__logo {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    line-height:     1;
}

.desktop-nav__logo-badge {
    background:    var(--color-primary);
    color:         #fff;
    font-size:     12px;
    font-weight:   900;
    padding:       4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    line-height:   1;
}

.desktop-nav__logo-text {
    font-size:      18px;
    font-weight:    800;
    color:          var(--color-text);
    letter-spacing: -0.5px;
}

.desktop-nav__links {
    display: flex;
    align-items: center;
}

.desktop-nav__links ul {
    display:     flex;
    align-items: center;
    gap:         4px;
    list-style:  none;
}

.desktop-nav__link {
    font-size:       14px;
    font-weight:     500;
    color:           var(--color-text);
    text-decoration: none;
    padding:         7px 14px;
    border-radius:   6px;
    transition:      all 0.15s ease;
    white-space:     nowrap;
}

.desktop-nav__link:hover {
    background: #f5f5f5;
}

.desktop-nav__link.active {
    color:       var(--color-accent);
    font-weight: 600;
}


/* ============================================================
   8. MOBILE HEADER
   ============================================================ */
.mobile-header {
    display:       block; /* Shown on mobile by default */
    background:    #fff;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.12);
    position:      sticky;
    top:           0;
    z-index:       100;
    width:         100%;
}

.mobile-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          52px;
    padding:         0 16px;
}

.mobile-header__title {
    font-size:       17px;
    font-weight:     700;
    color:           var(--color-text);
    letter-spacing:  -0.3px;
}

.mobile-header__back {
    display:     flex;
    align-items: center;
    gap:         2px;
    color:       var(--color-primary);
    font-size:   15px;
    font-weight: 500;
    padding:     8px 0;
    background:  none;
    border:      none;
    cursor:      pointer;
}

.mobile-header__back svg {
    width:  10px;
    height: 16px;
}

.mobile-header__action {
    width:   32px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================================
   9. MOBILE TAB BAR
   ============================================================ */
.mobile-tab-bar {
    display:        flex;
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    background:     #fff;
    border-top:     0.5px solid rgba(0, 0, 0, 0.12);
    z-index:        100;
    padding-bottom: env(safe-area-inset-bottom, 8px);
}

.mobile-tab-bar__tab {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         8px 4px 4px;
    background:      none;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    transition:      opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
    color:           var(--color-muted);
}

.mobile-tab-bar__icon {
    display:     flex;
    align-items: center;
    justify-content: center;
}

.mobile-tab-bar__icon svg {
    width:  24px;
    height: 24px;
    color:  var(--color-muted);
}

.mobile-tab-bar__label {
    font-size:   10px;
    color:       var(--color-muted);
    font-weight: 500;
    margin-top:  3px;
    line-height: 1;
}

/* Active tab state */
.mobile-tab-bar__tab.is-active .mobile-tab-bar__icon svg {
    color: var(--color-primary);
}

.mobile-tab-bar__tab.is-active .mobile-tab-bar__label {
    color: var(--color-primary);
}


/* ============================================================
   10. DESKTOP FOOTER
   ============================================================ */
.desktop-footer {
    display:    none; /* Hidden on mobile by default */
    background: #f9f9f9;
    padding:    64px 32px 0;
    border-top: 1px solid var(--color-border);
    width:      100%;
}

.desktop-footer__inner {
    max-width:       1140px;
    margin:          0 auto;
    display:         flex;
    gap:             40px;
    flex-wrap:       wrap;
    align-items:     flex-start;
    justify-content: space-between;
}

.desktop-footer__brand {
    flex:      1;
    min-width: 200px;
    max-width: 280px;
}

.desktop-footer__logo {
    display:         flex;
    align-items:     center;
    gap:             10px;
    text-decoration: none;
    margin-bottom:   12px;
}

.desktop-footer__logo-badge {
    background:    var(--color-primary);
    color:         #fff;
    font-size:     12px;
    font-weight:   900;
    padding:       4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    line-height:   1;
}

.desktop-footer__logo-name {
    font-size:      18px;
    font-weight:    800;
    color:          var(--color-text);
    letter-spacing: -0.5px;
}

.desktop-footer__desc {
    font-size:   13px;
    color:       var(--color-muted);
    line-height: 1.7;
    max-width:   240px;
}

.desktop-footer__col {
    min-width: 120px;
}

.desktop-footer__col-heading {
    font-size:      14px;
    font-weight:    700;
    color:          var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:  12px;
}

.desktop-footer__col-list {
    list-style: none;
}

.desktop-footer__col-link {
    font-size:       13px;
    color:           var(--color-body);
    display:         block;
    margin-bottom:   8px;
    text-decoration: none;
    transition:      color 0.15s;
}

.desktop-footer__col-link:hover {
    color: var(--color-primary);
}

.desktop-footer__bottom {
    border-top:      1px solid var(--color-border);
    margin-top:      32px;
    padding:         16px 0;
    font-size:       13px;
    color:           var(--color-muted);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    flex-wrap:       wrap;
    gap:             8px;
    max-width:       1140px;
    margin-left:     auto;
    margin-right:    auto;
}

.desktop-footer__copy {
    font-size: 13px;
    color:     var(--color-muted);
}

.desktop-footer__legal {
    display: flex;
    gap:     16px;
}

.desktop-footer__legal a {
    font-size:       13px;
    color:           var(--color-muted);
    text-decoration: none;
    transition:      color 0.15s;
}

.desktop-footer__legal a:hover {
    color: var(--color-primary);
}


/* ============================================================
   11. SECTIONS
   ============================================================ */
.section {
    padding: 48px 0;
}

.section--alt-bg {
    background: #f9f9f9;
}

.section__heading {
    font-size:      clamp(22px, 4vw, 38px);
    font-weight:    900;
    color:          var(--color-text);
    letter-spacing: -1px;
    line-height:    1.1;
    margin-bottom:  8px;
}

.section__subheading {
    font-size:     15px;
    color:         var(--color-body);
    max-width:     520px;
    line-height:   1.7;
    margin-bottom: 32px;
}

/* Page header section (used on learners-test) */
.section--page-header {
    padding-bottom: 0;
}


/* ============================================================
   12. HERO — MOBILE
   ============================================================ */
.hero-mobile {
    display: block;
    padding: 12px 16px 0;
}

.hero-mobile__card {
    background:    var(--color-primary);
    border-radius: 20px;
    padding:       24px;
    color:         #fff;
    position:      relative;
    overflow:      hidden;
}

/* Decorative circle */
.hero-mobile__card::after {
    content:        '';
    position:       absolute;
    right:          -20px;
    top:            -20px;
    width:          120px;
    height:         120px;
    border-radius:  50%;
    background:     rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.hero-mobile__tag {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity:        0.75;
    margin-bottom:  8px;
    display:        block;
}

.hero-mobile__heading {
    font-size:      24px;
    font-weight:    800;
    color:          #fff;
    line-height:    1.15;
    margin-bottom:  6px;
    letter-spacing: -0.5px;
}

.hero-mobile__subtitle {
    font-size:     13px;
    color:         #fff;
    opacity:       0.8;
    line-height:   1.5;
    margin-bottom: 20px;
}

.hero-mobile__cta {
    position: relative;
    z-index:  1;
}


/* ============================================================
   13. HERO — DESKTOP
   ============================================================ */
.hero-desktop {
    display:    none;
    background: #fff;
    padding:    80px 32px 72px;
    text-align: center;
}

.hero-desktop__inner {
    max-width: 720px;
    margin:    0 auto;
}

.hero-desktop__heading {
    font-size:      clamp(38px, 6vw, 68px);
    font-weight:    900;
    color:          var(--color-text);
    line-height:    1.05;
    letter-spacing: -2px;
    margin-bottom:  24px;
}

.hero-desktop__heading .text-primary {
    color: var(--color-primary);
}

.hero-desktop__subtitle {
    font-size:   17px;
    color:       #444;
    line-height: 1.75;
    max-width:   580px;
    margin:      0 auto 36px;
}

.hero-desktop__subtitle strong {
    color:       var(--color-text);
    font-weight: 700;
}

.hero-desktop__actions {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             14px;
    flex-wrap:       wrap;
}


/* ============================================================
   14. QUIZ CARDS (homepage)
   ============================================================ */
.quiz-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap:                   16px;
}

.quiz-card {
    background:    var(--color-card);
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-mobile);
    padding:       20px;
    transition:    all 0.2s ease;
    cursor:        pointer;
    text-decoration: none;
    display:       block;
}

.quiz-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 20px rgba(204, 0, 0, 0.08);
    transform:    translateY(-2px);
}

.quiz-card__icon-wrap {
    width:           44px;
    height:          44px;
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   14px;
    flex-shrink:     0;
}

.quiz-card__icon-wrap svg {
    width:  22px;
    height: 22px;
}

.quiz-card__body {
    margin-bottom: 12px;
}

.quiz-card__title {
    font-size:      16px;
    font-weight:    700;
    color:          var(--color-text);
    margin-bottom:  6px;
    letter-spacing: -0.3px;
}

.quiz-card__desc {
    font-size:   13px;
    color:       var(--color-muted);
    line-height: 1.6;
}

.quiz-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    color:           var(--color-primary);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity 0.15s;
}

.quiz-card:hover .quiz-card__cta {
    opacity: 0.75;
}


/* ============================================================
   15. TEST CARDS (learners-test page)
   ============================================================ */
.test-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap:                   16px;
}

.test-cards-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.test-card {
    background:      var(--color-card);
    border:          1.5px solid var(--color-border);
    border-radius:   var(--radius-mobile);
    padding:         20px;
    display:         flex;
    align-items:     center;
    gap:             16px;
    transition:      all 0.2s ease;
    cursor:          pointer;
    text-decoration: none;
    color:           inherit;
}

.test-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 20px rgba(204, 0, 0, 0.08);
    transform:    translateY(-2px);
}

.test-card--featured {
    border-color: var(--color-primary);
    background:   #fff8f8;
}

.test-card__number {
    width:           44px;
    height:          44px;
    border-radius:   10px;
    background:      #fff0f0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    font-size:       18px;
    font-weight:     800;
    color:           var(--color-primary);
}

.test-card__icon {
    width:           44px;
    height:          44px;
    border-radius:   10px;
    background:      #fff0f0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--color-primary);
}

.test-card__icon svg {
    width:  24px;
    height: 24px;
}

.test-card__body {
    flex: 1;
    min-width: 0;
}

.test-card__title {
    font-size:      16px;
    font-weight:    700;
    color:          var(--color-text);
    margin-bottom:  4px;
    letter-spacing: -0.3px;
}

.test-card__meta {
    font-size: 13px;
    color:     var(--color-muted);
}

.test-card__highlight {
    font-size:   12px;
    font-weight: 700;
    color:       var(--color-primary);
    margin-top:  4px;
}

.test-card__arrow {
    font-size:   18px;
    color:       var(--color-muted);
    flex-shrink: 0;
    transition:  color 0.15s;
}

.test-card:hover .test-card__arrow {
    color: var(--color-primary);
}


/* ============================================================
   16. RESOURCE CARDS (homepage)
   ============================================================ */
.resource-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:                   16px;
}

.resource-card {
    background:      var(--color-card);
    border:          1.5px solid var(--color-border);
    border-radius:   var(--radius-mobile);
    padding:         20px;
    display:         flex;
    align-items:     center;
    gap:             16px;
    transition:      all 0.2s ease;
    cursor:          pointer;
    text-decoration: none;
    color:           inherit;
}

.resource-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 20px rgba(204, 0, 0, 0.08);
    transform:    translateY(-2px);
}

.resource-card__icon {
    width:           44px;
    height:          44px;
    border-radius:   10px;
    background:      #fff0f0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    color:           var(--color-primary);
}

.resource-card__icon svg {
    width:  24px;
    height: 24px;
}

.resource-card__body {
    flex: 1;
    min-width: 0;
}

.resource-card__title {
    font-size:      16px;
    font-weight:    700;
    color:          var(--color-text);
    margin-bottom:  4px;
    letter-spacing: -0.3px;
}

.resource-card__desc {
    font-size:   13px;
    color:       var(--color-muted);
    line-height: 1.6;
}

.resource-card__arrow {
    font-size:   18px;
    color:       var(--color-muted);
    flex-shrink: 0;
    transition:  color 0.15s;
}

.resource-card:hover .resource-card__arrow {
    color: var(--color-primary);
}


/* ============================================================
   17. PROGRESS (homepage)
   ============================================================ */
.progress-card {
    background:    var(--color-card);
    border-radius: var(--radius-mobile);
    padding:       16px;
}

.progress-card__empty {
    font-size:   15px;
    color:       var(--color-muted);
    text-align:  center;
    padding:     24px 0;
}

.progress-card__actions {
    display:   flex;
    gap:       12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Summary row (JS-injected) */
.progress-card__summary {
    margin-bottom: 16px;
}

.progress-card__summary-label {
    font-size:   16px;
    font-weight: 700;
    color:       var(--color-text);
}

.progress-card__summary-pct {
    font-size:   16px;
    font-weight: 800;
    color:       var(--color-primary);
    margin-bottom: 8px;
}

.progress-card__rows {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

/* Individual progress row */
.progress-row {
    margin-bottom: 10px;
}

.progress-row__meta {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   5px;
}

.progress-row__label {
    font-size:   13px;
    color:       var(--color-text);
    font-weight: 500;
}

.progress-row__fraction {
    font-size: 13px;
    color:     var(--color-muted);
}

.progress-row__track {
    height:        6px;
    background:    var(--color-bg-mobile);
    border-radius: 3px;
    overflow:      hidden;
}

.progress-row__fill {
    height:        100%;
    background:    var(--color-primary);
    border-radius: 3px;
    transition:    width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-row__fill--overall {
    background: var(--color-primary);
}


/* ============================================================
   18. BREADCRUMB
   ============================================================ */
.breadcrumb {
    padding: 0;
}

.breadcrumb__list {
    display:     flex;
    align-items: center;
    list-style:  none;
    gap:         4px;
    padding:     12px 16px;
    flex-wrap:   wrap;
}

.breadcrumb__list li {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   13px;
    color:       var(--color-body);
}

.breadcrumb__link {
    color:           var(--color-body);
    text-decoration: none;
    transition:      color 0.15s;
}

.breadcrumb__link:hover {
    color:           var(--color-primary);
    text-decoration: underline;
}

.breadcrumb__label {
    color: var(--color-text);
    font-weight: 500;
}

.breadcrumb__sep {
    color:     var(--color-muted);
    font-size: 12px;
}


/* ============================================================
   19. PAGE HEADER
   ============================================================ */
.page-header {
    padding: 0;
}

.page-header__heading,
.page-header__title {
    font-size:      28px;
    font-weight:    900;
    color:          var(--color-text);
    letter-spacing: -1px;
    line-height:    1.1;
    margin-bottom:  12px;
}

.page-header__intro {
    font-size:     16px;
    color:         var(--color-body);
    line-height:   1.7;
    margin-bottom: 24px;
    max-width:     640px;
}

/* Page title/intro used on blog, about, contact */
.page-title {
    font-size:      28px;
    font-weight:    900;
    color:          var(--color-text);
    letter-spacing: -1px;
    line-height:    1.1;
    margin-bottom:  12px;
}

.page-intro {
    font-size:     16px;
    color:         var(--color-body);
    line-height:   1.7;
    margin-bottom: 24px;
}


/* ============================================================
   20. CONTENT PAGES
   ============================================================ */
.content-page {
    line-height: 1.7;
}

.content-page__intro {
    font-size:     16px;
    color:         var(--color-body);
    line-height:   1.7;
    margin-bottom: 24px;
}

.content-page h2 {
    font-size:      22px;
    font-weight:    800;
    color:          var(--color-text);
    margin-top:     32px;
    margin-bottom:  12px;
    letter-spacing: -0.5px;
}

.content-page h3 {
    font-size:     18px;
    font-weight:   700;
    color:         var(--color-text);
    margin-top:    24px;
    margin-bottom: 10px;
}

.content-page p {
    font-size:     15px;
    color:         var(--color-body);
    line-height:   1.7;
    margin-bottom: 16px;
}

.content-page ul,
.content-page ol {
    margin:       12px 0;
    padding-left: 24px;
    list-style:   disc;
}

.content-page ol {
    list-style: decimal;
}

.content-page li {
    font-size:   15px;
    color:       var(--color-body);
    line-height: 1.7;
    margin:      6px 0;
}

.content-page__cta {
    background:    #fff8f8;
    border:        1.5px solid var(--color-primary);
    border-radius: var(--radius-desktop);
    padding:       24px;
    margin-top:    40px;
    text-align:    center;
}

.content-page__cta h3 {
    font-size:     20px;
    font-weight:   800;
    color:         var(--color-text);
    margin-bottom: 8px;
    margin-top:    0;
}

.content-page__cta p {
    font-size:     15px;
    color:         var(--color-body);
    margin-bottom: 20px;
    line-height:   1.6;
}

/* About page content */
.about-content h2 {
    font-size:      22px;
    font-weight:    800;
    color:          var(--color-text);
    margin-top:     32px;
    margin-bottom:  12px;
    letter-spacing: -0.5px;
}

.about-content p {
    font-size:     15px;
    color:         var(--color-body);
    line-height:   1.7;
    margin-bottom: 16px;
}

.about-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.about-list {
    margin:       12px 0;
    padding-left: 24px;
    list-style:   disc;
}

.about-list li {
    font-size:   15px;
    color:       var(--color-body);
    line-height: 1.7;
    margin:      8px 0;
}

/* Table of contents (content pages) */
.toc {
    background:    var(--color-card);
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-desktop);
    padding:       20px;
    margin:        24px 0;
    counter-reset: toc-counter;
}

.toc h3 {
    font-size:      14px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-muted);
    margin-bottom:  12px;
    margin-top:     0;
}

.toc ol {
    counter-reset: toc-counter;
    padding-left:  0;
    list-style:    none;
}

.toc li {
    counter-increment: toc-counter;
    padding:           6px 0;
    border-bottom:     1px solid var(--color-border);
}

.toc li:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.toc li::before {
    content:     counter(toc-counter) ". ";
    color:       var(--color-muted);
    font-size:   13px;
    font-weight: 600;
}

.toc a {
    color:           var(--color-primary);
    text-decoration: none;
    font-size:       13px;
    font-weight:     500;
    transition:      opacity 0.15s;
}

.toc a:hover {
    opacity: 0.75;
    text-decoration: underline;
}


/* ============================================================
   21. FORMS
   ============================================================ */
.contact-form {
    max-width: 500px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display:       block;
    font-size:     14px;
    font-weight:   600;
    color:         var(--color-text);
    margin-bottom: 6px;
}

.form-label .required {
    color: var(--color-primary);
}

.form-input,
.form-select,
.form-textarea {
    width:         100%;
    padding:       12px;
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-button);
    font-family:   var(--font-stack);
    font-size:     15px;
    color:         var(--color-text);
    background:    #fff;
    transition:    border-color 0.15s ease;
    appearance:    none;
    -webkit-appearance: none;
    outline:       none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);
    outline:      none;
}

.form-textarea {
    resize:     vertical;
    min-height: 120px;
    line-height: 1.6;
}

.form-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238e8e93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    padding-right:       36px;
    cursor:              pointer;
}

.form-status {
    font-size:   14px;
    font-weight: 500;
    margin-top:  12px;
    margin-bottom: 12px;
    min-height:  20px;
}

.form-status--success {
    color: var(--color-success);
}

.form-status--error {
    color: var(--color-danger);
}


/* ============================================================
   22. SIGNS
   ============================================================ */
.sign-filter {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 20px;
}

.filter-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    #f5f5f5;
    border:        1px solid #e8e8e8;
    color:         var(--color-body);
    font-family:   var(--font-stack);
    font-size:     12px;
    font-weight:   600;
    padding:       6px 14px;
    border-radius: 6px;
    cursor:        pointer;
    transition:    all 0.15s ease;
    white-space:   nowrap;
}

.filter-btn:hover {
    background:   #eeeeee;
    border-color: #ddd;
}

.filter-btn.active {
    background:   var(--color-primary);
    color:        #fff;
    border-color: var(--color-primary);
}

.filter-btn__count {
    font-size:   11px;
    opacity:     0.7;
    font-weight: 500;
}

.filter-btn.active .filter-btn__count {
    opacity: 0.85;
}

.sign-search-wrap {
    margin-bottom: 4px;
}

.sign-search {
    width:         100%;
    padding:       12px;
    border:        1.5px solid var(--color-border);
    border-radius: var(--radius-button);
    font-family:   var(--font-stack);
    font-size:     15px;
    color:         var(--color-text);
    background:    #fff;
    outline:       none;
    margin-bottom: 0;
    transition:    border-color 0.15s;
    appearance:    none;
    -webkit-appearance: none;
}

.sign-search:focus {
    border-color: var(--color-primary);
}

.signs-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap:                   12px;
}

.sign-card {
    background:    #fff;
    border-radius: var(--radius-mobile);
    padding:       12px;
    text-align:    center;
    cursor:        pointer;
    transition:    all 0.2s ease;
    border:        1.5px solid var(--color-border);
}

.sign-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 2px 12px rgba(204, 0, 0, 0.1);
    transform:    translateY(-1px);
}

.sign-card:active {
    transform: scale(0.96);
}

.sign-card__image-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   8px;
}

.sign-card__image {
    width:      80px;
    height:     80px;
    object-fit: contain;
    display:    block;
}

.sign-card__body {
    text-align: center;
}

.sign-card__name,
.sign-card-name {
    font-size:   12px;
    font-weight: 600;
    color:       var(--color-text);
    margin-top:  0;
    line-height: 1.3;
}

.sign-card__category,
.sign-card-category {
    font-size:  10px;
    color:      var(--color-muted);
    margin-top: 2px;
}

.sign-card-meaning {
    font-size:   11px;
    color:       var(--color-body);
    margin-top:  4px;
    line-height: 1.4;
}

.signs-no-results {
    text-align: center;
    font-size:  15px;
    color:      var(--color-muted);
    padding:    40px 16px;
}

.signs-empty {
    text-align: center;
    font-size:  15px;
    color:      var(--color-muted);
    padding:    40px 16px;
}


/* ============================================================
   23. BLOG
   ============================================================ */
.blog-list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.blog-card {
    background:      var(--color-card);
    border:          1.5px solid var(--color-border);
    border-radius:   var(--radius-mobile);
    padding:         24px;
    transition:      all 0.2s ease;
    cursor:          pointer;
    text-decoration: none;
    display:         block;
}

.blog-card:hover {
    border-color: var(--color-primary);
    box-shadow:   0 4px 20px rgba(204, 0, 0, 0.08);
    transform:    translateY(-2px);
}

.blog-card__body {
    margin-bottom: 12px;
}

.blog-card__title {
    font-size:      16px;
    font-weight:    700;
    color:          var(--color-text);
    margin-bottom:  6px;
    letter-spacing: -0.3px;
}

.blog-card__excerpt {
    font-size:   13px;
    color:       var(--color-body);
    line-height: 1.6;
}

.blog-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             4px;
    color:           var(--color-primary);
    font-size:       13px;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity 0.15s;
}

.blog-card:hover .blog-card__cta {
    opacity: 0.75;
}

/* Blog article (single post) */
.blog-article {
    padding-top: 0;
}

.blog-article .blog-content {
    max-width: 720px;
    margin:    0 auto;
}

.blog-content h2 {
    font-size:      22px;
    font-weight:    800;
    color:          var(--color-text);
    margin-top:     32px;
    margin-bottom:  12px;
    letter-spacing: -0.5px;
}

.blog-content h3 {
    font-size:     18px;
    font-weight:   700;
    color:         var(--color-text);
    margin-top:    24px;
    margin-bottom: 10px;
}

.blog-content p {
    font-size:     15px;
    color:         var(--color-body);
    line-height:   1.7;
    margin-bottom: 16px;
}

.blog-content ul,
.blog-content ol {
    margin:       12px 0;
    padding-left: 24px;
    list-style:   disc;
}

.blog-content ol {
    list-style: decimal;
}

.blog-content li {
    font-size:   15px;
    color:       var(--color-body);
    line-height: 1.7;
    margin:      6px 0;
}

.blog-date {
    font-size:     13px;
    color:         var(--color-muted);
    display:       block;
    margin-bottom: 16px;
}


/* ============================================================
   24. ERROR PAGE (404)
   ============================================================ */
.page--404 {
    min-height: 60vh;
}

.error-block {
    text-align: center;
    padding:    48px 16px 80px;
}

.error-block__inner {
    max-width: 480px;
    margin:    0 auto;
}

.error-block__code {
    font-size:      120px;
    font-weight:    900;
    color:          var(--color-primary);
    line-height:    1;
    letter-spacing: -4px;
    margin-bottom:  8px;
}

.error-block__heading {
    font-size:      28px;
    font-weight:    900;
    color:          var(--color-text);
    margin-bottom:  12px;
    letter-spacing: -1px;
}

.error-block__message {
    font-size:     16px;
    color:         var(--color-body);
    margin-bottom: 32px;
    line-height:   1.6;
}

.error-block__actions {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             12px;
    flex-wrap:       wrap;
}


/* ============================================================
   25. QUIZ APP
   ============================================================ */
.quiz-app {
    min-height: 300px;
}

.quiz-app__noscript {
    text-align: center;
    font-size:  15px;
    color:      var(--color-muted);
    padding:    40px 16px;
}

/* Quiz option (shared mobile + desktop — used by quiz.js) */
.opt {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    #f8f8f8;
    border:        1.5px solid transparent;
    border-radius: 14px;
    padding:       15px 16px;
    margin-bottom: 10px;
    cursor:        pointer;
    transition:    all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.opt:active { background: #f0f0f0; }

.opt.selected {
    background:   #fff8f8;
    border-color: var(--color-primary);
}

.opt.correct {
    background:   #f0fff4;
    border-color: var(--color-success);
}

.opt.wrong {
    background:   #fff2f2;
    border-color: var(--color-primary);
}

.opt-circle {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    border:          1.5px solid #ddd;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    font-weight:     700;
    color:           var(--color-muted);
    flex-shrink:     0;
    transition:      all 0.15s ease;
}

.opt.selected .opt-circle {
    border-color: var(--color-primary);
    color:        var(--color-primary);
    background:   #fff0f0;
}

.opt.correct .opt-circle {
    border-color: var(--color-success);
    color:        var(--color-success);
    background:   #f0fff4;
}

.opt.wrong .opt-circle {
    border-color: var(--color-primary);
    color:        var(--color-primary);
    background:   #fff0f0;
}

.opt-text {
    font-size:   15px;
    font-weight: 500;
    color:       var(--color-text);
    line-height: 1.4;
}

.opt.correct .opt-text { color: #1a5c2a; }
.opt.wrong   .opt-text { color: #991a1a; }

/* Feedback box (quiz) */
.feedback-box {
    border-radius: 14px;
    padding:       14px 16px;
    margin-top:    4px;
    margin-bottom: 16px;
    display:       none;
}

.feedback-box.show { display: block; }

.feedback-box.correct {
    background: #f0fff4;
    border:     1px solid var(--color-success);
}

.feedback-box.wrong {
    background: #fff2f2;
    border:     1px solid #ffb3b3;
}

.feedback-title {
    font-size:     14px;
    font-weight:   700;
    margin-bottom: 4px;
}

.feedback-title.correct { color: #1a5c2a; }
.feedback-title.wrong   { color: #991a1a; }

.feedback-text {
    font-size:   13px;
    color:       #3c3c43;
    line-height: 1.5;
}

/* Next / result button (quiz) */
.next-btn {
    display:       none;
    background:    var(--color-primary);
    color:         #fff;
    border:        none;
    border-radius: 14px;
    padding:       16px;
    width:         100%;
    font-family:   var(--font-stack);
    font-size:     16px;
    font-weight:   700;
    cursor:        pointer;
    margin-top:    8px;
    transition:    transform 0.1s ease;
}

.next-btn:active { transform: scale(0.98); }
.next-btn.show   { display: block; }

/* Result / score screen */
.result-circle {
    width:           120px;
    height:          120px;
    border-radius:   50%;
    border:          6px solid var(--color-primary);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 24px;
}

.result-pct {
    font-size:   32px;
    font-weight: 900;
    color:       var(--color-primary);
}

.result-label {
    font-size:      11px;
    color:          var(--color-muted);
    font-weight:    600;
    text-transform: uppercase;
}

.result-title {
    font-size:     22px;
    font-weight:   800;
    color:         var(--color-text);
    margin-bottom: 8px;
    text-align:    center;
}

.result-sub {
    font-size:     15px;
    color:         var(--color-muted);
    text-align:    center;
    line-height:   1.6;
    margin-bottom: 32px;
}

.result-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:                   10px;
    width:                 100%;
    margin-bottom:         28px;
}

.result-stat {
    background:    #f8f8f8;
    border-radius: 12px;
    padding:       12px;
    text-align:    center;
}

.result-stat-num {
    font-size:   22px;
    font-weight: 800;
    color:       var(--color-text);
}

.result-stat-label {
    font-size:  11px;
    color:      var(--color-muted);
    margin-top: 2px;
}

/* Pass marks bar (quiz section) */
.pass-marks {
    background:     var(--color-card);
    border:         1.5px solid var(--color-border);
    border-radius:  var(--radius-desktop);
    padding:        16px 20px;
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.pm-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
}

.pm-label {
    font-size:   13px;
    color:       var(--color-body);
    font-weight: 500;
    flex-shrink: 0;
}

.pm-bar {
    flex:          1;
    height:        6px;
    background:    #f0f0f0;
    border-radius: 3px;
    overflow:      hidden;
}

.pm-fill {
    height:        100%;
    background:    var(--color-primary);
    border-radius: 3px;
}

.pm-score {
    font-size:   13px;
    font-weight: 700;
    color:       var(--color-text);
    white-space: nowrap;
}


/* ============================================================
   26. UTILITY
   ============================================================ */
.visually-hidden,
.sr-only {
    position:    absolute;
    width:       1px;
    height:      1px;
    padding:     0;
    margin:      -1px;
    overflow:    hidden;
    clip:        rect(0, 0, 0, 0);
    white-space: nowrap;
    border:      0;
}

.empty-state {
    text-align: center;
    font-size:  15px;
    color:      var(--color-muted);
    padding:    40px 16px;
}

/* Divider */
.divider {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     0;
}

/* Stats strip (red background) */
.stats-section {
    background: var(--color-primary);
    padding:    48px 32px;
    text-align: center;
}

.stats-inner {
    max-width:             1140px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   8px;
}

.stat { padding: 24px 16px; }

.stat-num {
    font-size:      48px;
    font-weight:    900;
    color:          #fff;
    line-height:    1;
    letter-spacing: -2px;
}

.stat-label {
    font-size:      13px;
    color:          rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top:     6px;
}

/* Tip card */
.tip-card {
    border-left:   3px solid var(--color-primary);
    padding:       16px 20px;
    background:    #fff9f9;
    border-radius: 0 8px 8px 0;
}

.tip-num {
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--color-primary);
    margin-bottom:  6px;
}

.tip-title {
    font-size:     15px;
    font-weight:   700;
    color:         var(--color-text);
    margin-bottom: 6px;
}

.tip-desc {
    font-size:   13px;
    color:       var(--color-body);
    line-height: 1.6;
}


/* ============================================================
   27. MEDIA QUERY — DESKTOP (min-width: 768px)
   ============================================================ */
@media (min-width: 768px) {

    /* --- Body background switches to desktop white --- */
    body {
        background-color: var(--color-bg-desktop);
    }

    /* --- main: no tab bar clearance needed --- */
    main {
        padding-bottom: 0;
    }

    /* --- Show desktop nav, hide mobile nav elements --- */
    .desktop-nav {
        display: block;
    }

    .mobile-header {
        display: none;
    }

    .mobile-tab-bar {
        display: none;
    }

    /* --- Show desktop footer --- */
    .desktop-footer {
        display: block;
    }

    /* --- Card border-radius switches to desktop var --- */
    .quiz-card,
    .test-card,
    .resource-card,
    .blog-card,
    .progress-card,
    .sign-card {
        border-radius: var(--radius-desktop);
    }

    /* --- Hero: hide mobile, show desktop --- */
    .hero-mobile {
        display: none;
    }

    .hero-desktop {
        display: block;
    }

    /* --- Container padding --- */
    .container {
        padding: 0 32px;
    }

    /* --- Section padding --- */
    .section {
        padding: 64px 0;
    }

    /* --- Page header/title --- */
    .page-title,
    .page-header__heading,
    .page-header__title {
        font-size: 36px;
    }

    /* --- Breadcrumb container padding --- */
    .breadcrumb__list {
        padding: 12px 32px;
    }

    /* --- Signs grid wider min column --- */
    .signs-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    /* --- Error page heading --- */
    .error-block__code {
        font-size: 160px;
    }

    /* --- Stats section padding --- */
    .stats-section {
        padding: 64px 32px;
    }

    /* --- Footer brand block --- */
    .desktop-footer__brand {
        max-width: 280px;
    }
}