/**
 * SuperCoding Car — Redesign Layer (Sökkörskola.se)
 *
 * Design system extracted from the Lovable prototype:
 * https://school-driver-connect.lovable.app
 *
 * Loaded LAST so it overrides uikit.min.css, main.css (template),
 * custom.css and pages/*.css without editing them.
 *
 * Nothing here changes markup or behaviour — visual layer only.
 */

/* =============================================================
   1. TOKENS
   ============================================================= */

:root {
    /* Brand — admin settings still win via --sk-primary / --sk-secondary */
    --sk-brand: var(--sk-primary, #1c59db);
    --sk-brand-dark: var(--sk-secondary, #1841ab);
    --sk-brand-soft: #e0f0ff;
    --sk-on-brand: #ffffff;

    /* Neutrals */
    --sk-fg: #0f172b;
    --sk-muted: #62748e;
    --sk-surface: #f8fafc;
    --sk-subtle: #f1f5f9;
    --sk-border: #e2e8f0;
    --sk-card: #ffffff;

    /* Status */
    --sk-danger: #e7000b;
    --sk-success: #00a63e;
    --sk-star: #f0b100;

    /* Radii */
    --sk-r-pill: 999px;
    --sk-r-card: 18px;
    --sk-r-input: 14px;
    --sk-r-base: 10px;

    /* Elevation — hairline borders do the work, shadows stay subtle */
    --sk-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --sk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
    --sk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);

    /* Layout */
    --sk-container: 1152px;
    --sk-gutter: 32px;
    --sk-header-h: 65px;

    --sk-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* =============================================================
   2. BASE + TYPOGRAPHY
   ============================================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sk-font);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--sk-fg);
    background-color: var(--sk-card);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large {
    font-family: var(--sk-font);
    color: var(--sk-fg);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-top: 0;
}

h1, .uk-h1 { font-size: clamp(30px, 4.5vw, 52px); font-weight: 800; }
h2, .uk-h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 700; line-height: 1.25; }
h3, .uk-h3 { font-size: 20px; font-weight: 700; }
h4, .uk-h4 { font-size: 17px; font-weight: 700; }
h5, .uk-h5 { font-size: 15px; font-weight: 600; letter-spacing: normal; }
h6, .uk-h6 { font-size: 13px; font-weight: 600; letter-spacing: normal; }

p { color: var(--sk-fg); }

a {
    color: var(--sk-brand);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover { color: var(--sk-brand-dark); text-decoration: none; }

.sk-muted, .text-muted { color: var(--sk-muted); }

/* Container — match the prototype's max-w-6xl (1152px incl. 32px gutters) */
.uk-container {
    max-width: var(--sk-container);
    padding-left: var(--sk-gutter);
    padding-right: var(--sk-gutter);
}

@media (max-width: 640px) {
    .uk-container { padding-left: 20px; padding-right: 20px; }
}

/* Section rhythm: py-20 / lg:py-24 */
.uk-section {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (min-width: 960px) {
    .uk-section { padding-top: 96px; padding-bottom: 96px; }
}

.uk-section-muted,
.sk-section--surface {
    background-color: var(--sk-surface);
    border-top: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border);
}

/* Kill the template's decorative dashed rule under section titles */
.section-title:after { display: none !important; }

.section-title { margin-bottom: 40px; }

.section-title .uk-h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
}

/* Shared section header (sk-section-header) */
.sk-section-header { margin-bottom: 40px; }

.sk-section-header__title {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
    margin: 0 0 12px;
}

.sk-section-header__subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sk-muted);
    margin: 0;
    max-width: 60ch;
}

/* =============================================================
   3. HEADER / NAV
   ============================================================= */

/* The prototype sticks the bar with CSS, not a script. `:not(.uk-sticky)`
   keeps clear of header.php, where UIkit's data-uk-sticky owns positioning. */
.page-header__scroll {
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--sk-border);
    box-shadow: none;
    padding: 0;
}

.page-header__scroll:not(.uk-sticky) {
    position: sticky;
    top: 0;
    z-index: 980;
}

.page-header__scroll.uk-active {
    background: rgba(255, 255, 255, .9);
    box-shadow: none;
    border-bottom: 1px solid var(--sk-border);
}

.page-header__inner {
    min-height: var(--sk-header-h);
    gap: 16px;
}

img.logo__img { height: 30px; width: auto; }

.page-header .uk-navbar-nav { gap: 4px; }

.page-header .uk-navbar-nav > li > a {
    min-height: 38px;
    padding: 0 12px;
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--sk-muted);
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--sk-r-pill);
    transition: color .18s ease, background-color .18s ease;
}

.page-header .uk-navbar-nav > li > a:hover,
.page-header .uk-navbar-nav > li > a:focus,
.page-header .uk-navbar-nav > li.uk-active > a {
    color: var(--sk-fg);
    background-color: var(--sk-subtle);
}

/* The prototype's nav is text-only — icons read as clutter at 14px */
.page-header .uk-navbar-nav > li > a i { display: none; }

/* "Register your school" is the single primary action in the bar */
.page-header .uk-navbar-nav > li.nav-register > a,
.page-header .uk-navbar-nav > li > a.register-link {
    background-color: var(--sk-brand);
    color: var(--sk-on-brand);
    font-weight: 600;
    padding: 0 20px;
}

.page-header .uk-navbar-nav > li.nav-register > a:hover,
.page-header .uk-navbar-nav > li > a.register-link:hover {
    background-color: var(--sk-brand-dark);
    color: var(--sk-on-brand);
}

/* Phone button */
.page-header__phone .uk-button-danger {
    background: transparent !important;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
    color: var(--sk-fg);
    font-size: 14px;
    font-weight: 600;
    height: 38px;
    padding: 0 16px;
}

.page-header__phone .uk-button-danger:hover {
    background: var(--sk-subtle) !important;
    border-color: var(--sk-border);
    color: var(--sk-fg);
}

/* Language switcher */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--sk-subtle);
    border-radius: var(--sk-r-pill);
}

.lang-switcher .lang-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--sk-muted);
    background: transparent;
    border-radius: var(--sk-r-pill);
    transition: all .18s ease;
}

.lang-switcher .lang-btn:hover { color: var(--sk-fg); }

.lang-switcher .lang-btn.active {
    background: var(--sk-card);
    color: var(--sk-fg);
    box-shadow: var(--sk-shadow);
}

/* Mobile menu trigger */
.page-header__btn .uk-button-danger {
    background: transparent !important;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-base);
    color: var(--sk-fg);
    height: 38px;
    width: 38px;
    padding: 0;
}

/* =============================================================
   4. BUTTONS
   ============================================================= */

.uk-button,
.sk-btn,
.sk-search-box__btn,
.sk-school-card__btn,
.sk-package-card__btn {
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    border-radius: var(--sk-r-pill);
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.uk-button {
    height: auto;
    min-height: 40px;
    padding: 10px 20px;
    line-height: 20px;
}

/* Primary */
.uk-button-primary,
.uk-button-danger,
.sk-btn--primary,
.sk-school-card__btn--primary,
.sk-package-card__btn {
    background: var(--sk-brand) !important;
    background-image: none !important;
    border: 1px solid transparent;
    color: var(--sk-on-brand) !important;
    box-shadow: none;
}

.uk-button-primary:hover, .uk-button-primary:focus, .uk-button-primary:active,
.uk-button-danger:hover, .uk-button-danger:focus, .uk-button-danger:active,
.sk-btn--primary:hover,
.sk-school-card__btn--primary:hover,
.sk-package-card__btn:hover {
    background: var(--sk-brand-dark) !important;
    color: var(--sk-on-brand) !important;
}

/* Outline / secondary */
.uk-button-default,
.sk-btn--outline,
.sk-school-card__btn--outline {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--sk-border) !important;
    color: var(--sk-fg) !important;
    border-radius: var(--sk-r-pill);
}

.uk-button-default:hover, .uk-button-default:focus, .uk-button-default:active,
.sk-btn--outline:hover,
.sk-school-card__btn--outline:hover {
    background: var(--sk-subtle) !important;
    border-color: var(--sk-border) !important;
    color: var(--sk-fg) !important;
}

.uk-button-link {
    color: var(--sk-brand);
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    font-size: 14px;
}

.uk-button-link:hover { color: var(--sk-brand-dark); text-decoration: underline; }

.uk-button-large { min-height: 48px; padding: 13px 26px; font-size: 15px; }
.uk-button-small { min-height: 34px; padding: 7px 14px; font-size: 13px; }

/* On dark hero surfaces the outline button flips to white */
.sk-hero .uk-button-default,
.sk-hero .sk-btn--outline,
.sk-section--brand .uk-button-default {
    background: var(--sk-card) !important;
    border-color: var(--sk-card) !important;
    color: var(--sk-fg) !important;
}

.sk-hero .uk-button-default:hover,
.sk-hero .sk-btn--outline:hover,
.sk-section--brand .uk-button-default:hover {
    background: rgba(255, 255, 255, .9) !important;
    color: var(--sk-fg) !important;
}

/* =============================================================
   5. FORMS
   ============================================================= */

.uk-input, .uk-select, .uk-textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="search"],
input[type="password"], input[type="date"], select, textarea,
.sk-search-box__select {
    font-family: var(--sk-font);
    font-size: 14px;
    height: auto;
    min-height: 44px;
    padding: 12px 14px;
    color: var(--sk-fg);
    background-color: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-input);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

textarea, .uk-textarea { min-height: 120px; line-height: 1.6; }

.uk-input:focus, .uk-select:focus, .uk-textarea:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--sk-brand);
    box-shadow: 0 0 0 3px rgba(28, 89, 219, .12);
}

::placeholder { color: var(--sk-muted); opacity: 1; }

label, .uk-form-label, .sk-search-box__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-fg);
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 6px;
    display: block;
}

/* Search box — the flat bordered bar from the prototype */
.sk-search-box,
.search-filter-box {
    max-width: none;
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 16px;
}

.sk-search-box__btn {
    min-height: 44px;
    padding: 12px 20px;
    border-radius: var(--sk-r-input);
    background: var(--sk-brand);
    color: var(--sk-on-brand);
    border: none;
    width: 100%;
}

.sk-search-box__btn:hover { background: var(--sk-brand-dark); }

/* Select2 to match */
.select2-container--default .select2-selection--single {
    min-height: 44px;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-input);
    background: var(--sk-card);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px;
    font-size: 14px;
    color: var(--sk-fg);
    padding-left: 14px;
}

.select2-dropdown {
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-input);
    box-shadow: var(--sk-shadow-lg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sk-brand-soft);
    color: var(--sk-brand-dark);
}

/* =============================================================
   6. CARDS
   ============================================================= */

.uk-card,
.sk-school-card,
.sk-package-card,
.review-card,
.school-card {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    transition: box-shadow .18s ease, border-color .18s ease;
}

/* The old design lifted cards on hover — the prototype keeps them planted */
.sk-school-card:hover,
.school-card:hover,
.review-card:hover,
.sk-package-card:hover {
    transform: none;
    box-shadow: var(--sk-shadow-md);
    border-color: #cbd5e1;
}

.sk-school-card__media { height: 170px; }

.sk-school-card__body { padding: 20px; }

.sk-school-card__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    margin: 0 0 6px;
}

.sk-school-card__title a { color: var(--sk-fg); }
.sk-school-card__title a:hover { color: var(--sk-brand); }

.sk-school-card__rating { gap: 8px; align-items: center; }

.sk-school-card__stars i { color: var(--sk-star); font-size: 13px; }
.sk-school-card__stars i.empty { color: #cbd5e1; }

.sk-school-card__reviews { font-size: 14px; color: var(--sk-muted); }

.sk-school-card__description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sk-muted);
}

.sk-school-card__detail-row {
    font-size: 13px;
    color: var(--sk-muted);
}

.sk-school-card__detail-row i {
    color: var(--sk-muted);
    width: 16px;
}

/* Tags — hairline pills, not filled chips */
.sk-school-card__lesson-tag,
.sk-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sk-muted);
    background: transparent;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
}

/* Price badge — flat, on the brand tint */
.sk-school-card__price {
    background: var(--sk-brand) !important;
    color: var(--sk-on-brand);
    border-radius: var(--sk-r-pill);
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
}

/* Featured / verified badge */
.sk-school-card__featured,
.sk-badge--verified {
    background: var(--sk-brand-soft) !important;
    color: var(--sk-brand-dark) !important;
    border: none;
    border-radius: var(--sk-r-pill);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: none;
}

.sk-school-card__actions { gap: 8px; }

.sk-school-card__btn {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}

.sk-school-card__placeholder {
    background: var(--sk-subtle) !important;
}

.sk-school-card__placeholder i { color: #cbd5e1; }

/* =============================================================
   7. HERO
   ============================================================= */

/* home.css pins the hero to 600px and adds 180px of inner padding on top of
   that — the prototype's hero is sized by its content, so reset both. */
.sk-hero,
.section-banner {
    background-color: var(--sk-brand-dark);
    min-height: 0;
    padding: 88px 0 96px;
}

/* sk-hero__content is also the .uk-container, so its padding is reset
   alongside the other custom.css !important rules in section 15 —
   zeroing it outright here would strip the horizontal gutter too. */

.sk-hero__title,
.sk-hero__subtitle,
.sk-hero__note { max-width: 620px; }

.sk-hero__bg-overlay,
.section-banner__bg::after {
    background: linear-gradient(
        120deg,
        var(--sk-brand-dark) 0%,
        rgba(24, 65, 171, .92) 45%,
        rgba(28, 89, 219, .78) 100%
    ) !important;
}

.sk-hero__title,
.section-banner__title h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #fff;
    text-shadow: none;
    margin: 0 0 20px;
}

.sk-hero__subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    max-width: 56ch;
    margin: 0 0 28px;
}

/* Eyebrow pill above the hero title */
.sk-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--sk-r-pill);
}

.sk-hero__note {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    margin-top: 18px;
}

/* Brand-filled section (e.g. "everything included") */
.sk-section--brand {
    background: var(--sk-brand-dark);
    color: #fff;
}

.sk-section--brand h1, .sk-section--brand h2,
.sk-section--brand h3, .sk-section--brand p { color: #fff; }

.sk-section--brand p { color: rgba(255, 255, 255, .82); }

/* =============================================================
   8. STATS / STEPS / FEATURE TILES
   ============================================================= */

.step-item { padding: 0; text-align: left; }

.step-item__icon-box,
.sk-step__number {
    width: 40px;
    height: 40px;
    margin: 0 0 16px;
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    color: var(--sk-brand-dark);
    border-radius: var(--sk-r-pill);
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.step-item__icon-box i { color: var(--sk-brand-dark); }

.step-item__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--sk-fg);
    letter-spacing: -0.01em;
}

.step-item__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sk-muted);
}

/* =============================================================
   9. PACKAGE CARDS
   ============================================================= */

.sk-package-card { padding: 24px; }

/* The "popular" tier used to be a filled gradient card with white type.
   Flattening the background to white leaves that type invisible, so the
   whole colour set has to come back to the default dark-on-light. */
.sk-package-card--popular {
    background: var(--sk-card) !important;
    background-image: none !important;
    border-color: var(--sk-brand);
    border-width: 2px;
    box-shadow: var(--sk-shadow-md) !important;
    transform: none !important;
}

.sk-package-card--popular:hover { transform: none !important; }

.sk-package-card--popular .sk-package-card__title,
.sk-package-card--popular .sk-package-card__price-amount,
.sk-package-card--popular .sk-package-card__feature {
    color: var(--sk-fg) !important;
}

.sk-package-card--popular .sk-package-card__description,
.sk-package-card--popular .sk-package-card__price-period,
.sk-package-card--popular .sk-package-card__price-breakdown {
    color: var(--sk-muted) !important;
}

.sk-package-card--popular .sk-package-card__feature i { color: var(--sk-brand) !important; }

.sk-package-card--popular .sk-package-card__btn {
    background: var(--sk-brand) !important;
    color: var(--sk-on-brand) !important;
}

.sk-package-card__badge {
    background: var(--sk-brand) !important;
    background-image: none !important;
    color: var(--sk-on-brand);
    border-radius: var(--sk-r-pill);
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
}

.sk-package-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--sk-fg);
}

.sk-package-card__description,
.sk-package-card__price-period,
.sk-package-card__price-breakdown {
    font-size: 14px;
    color: var(--sk-muted);
}

.sk-package-card__price-amount {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sk-fg);
    background: none !important;
    -webkit-text-fill-color: currentColor;
}

.sk-package-card__feature {
    font-size: 14px;
    color: var(--sk-fg);
    padding: 7px 0;
}

.sk-package-card__feature i { color: var(--sk-brand); }

.sk-package-card__btn { width: 100%; justify-content: center; }

/* =============================================================
   10. FOOTER — light surface, not the old dark slab
   ============================================================= */

.page-footer {
    background: var(--sk-surface) !important;
    border-top: 1px solid var(--sk-border);
    color: var(--sk-fg);
    padding: 56px 0 32px;
}

.page-footer::before { display: none !important; }

.page-footer__inner { text-align: left; }

.page-footer__logo { margin-bottom: 16px; }

.page-footer__logo .logo__link span { color: var(--sk-fg) !important; }

.page-footer__logo .logo__img { filter: none !important; height: 28px; }

.page-footer__text p,
.page-footer__copy,
.page-footer a {
    font-size: 14px;
    color: var(--sk-muted);
}

.page-footer__copy {
    font-size: 14px;
    text-transform: none;
    color: var(--sk-muted);
    padding-top: 24px;
    margin-top: 32px;
    border-top: 1px solid var(--sk-border);
}

.page-footer a:hover { color: var(--sk-fg); }

.footer-columns {
    border-bottom: none;
    padding-bottom: 0;
}

.page-footer__links { margin: 20px 0 !important; }

.page-footer__links a { font-size: 14px; font-weight: 500; }

/* Social — plain links, no filled circles */
.page-footer__social { margin: 24px 0; }

.page-footer .social {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-footer .social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
    background: var(--sk-card);
    color: var(--sk-muted);
    transition: all .18s ease;
}

.page-footer .social li a:hover {
    border-color: var(--sk-brand);
    color: var(--sk-brand);
}

.page-footer .social li a i { color: inherit; }

/* Footer headings */
.page-footer h3, .page-footer h4, .page-footer h5,
.page-footer .footer-col__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-fg);
    letter-spacing: normal;
    margin-bottom: 12px;
}

/* =============================================================
   11. OFFCANVAS (mobile menu) — light to match
   ============================================================= */

.uk-offcanvas-bar {
    background: var(--sk-card);
    color: var(--sk-fg);
    padding: 24px 20px;
}

.uk-offcanvas-bar .logo__link span { color: var(--sk-fg) !important; }

.uk-offcanvas-bar .uk-nav-default > li > a {
    font-family: var(--sk-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--sk-fg);
    padding: 11px 12px;
    border-radius: var(--sk-r-base);
}

.uk-offcanvas-bar .uk-nav-default > li > a:hover {
    background: var(--sk-subtle);
    color: var(--sk-fg);
}

.uk-offcanvas-bar .uk-nav-default > li > a i {
    width: 20px;
    color: var(--sk-muted);
    margin-right: 8px;
}

.uk-offcanvas-bar .register-mobile-link {
    background: var(--sk-brand);
    color: var(--sk-on-brand) !important;
    font-weight: 600;
}

.uk-offcanvas-bar .register-mobile-link i { color: var(--sk-on-brand) !important; }

.uk-offcanvas-bar .uk-offcanvas-close { color: var(--sk-muted); }

.lang-switcher-mobile .uk-button-default {
    border-color: var(--sk-border) !important;
    color: var(--sk-fg) !important;
}

/* =============================================================
   12. PAGINATION / MISC
   ============================================================= */

.nav-links a,
.nav-links span,
.uk-pagination > * > * {
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-fg);
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-base);
    box-shadow: none;
    padding: 9px 14px;
}

.nav-links a:hover,
.uk-pagination > * > :hover {
    background: var(--sk-subtle) !important;
    background-image: none !important;
    color: var(--sk-fg) !important;
    border-color: var(--sk-border);
}

.nav-links .current,
.uk-pagination > .uk-active > * {
    background: var(--sk-brand) !important;
    background-image: none !important;
    border-color: var(--sk-brand);
    color: var(--sk-on-brand) !important;
}

/* Preloader — the template's tri-colour spinner clashes with a flat blue UI */
#page-preloader { background: var(--sk-card); }
#page-preloader .spinner { border-top-color: var(--sk-brand); }
#page-preloader .spinner:before { border-top-color: var(--sk-brand-soft); }
#page-preloader .spinner:after { border-top-color: var(--sk-brand); }

/* Results count line above the listing */
.sk-results-count {
    font-size: 14px;
    color: var(--sk-muted);
    margin-bottom: 20px;
}

/* Entry content (blog / static pages) */
.entry-content { color: var(--sk-fg); line-height: 1.7; }
.entry-content a { color: var(--sk-brand); }
.entry-content blockquote { border-left-color: var(--sk-brand); color: var(--sk-muted); }
.entry-content img { border-radius: var(--sk-r-card); }

.widget-title { border-bottom-color: var(--sk-border); color: var(--sk-fg); }

/* =============================================================
   13. RESPONSIVE
   ============================================================= */

@media (max-width: 959px) {
    .sk-hero, .section-banner { padding: 64px 0 72px; }
    .uk-section { padding-top: 64px; padding-bottom: 64px; }
    .page-footer { padding: 44px 0 28px; }
}

@media (max-width: 640px) {
    .sk-hero, .section-banner { padding: 48px 0 56px; }
    .uk-section { padding-top: 52px; padding-bottom: 52px; }
    .sk-section-header { margin-bottom: 28px; }
    .sk-school-card__actions { flex-direction: column; }
    .sk-school-card__btn { width: 100%; justify-content: center; }
    .page-footer__inner { text-align: left; }
}

/* =============================================================
   14. LAYOUT.PHP SHELL
   The platform pages (home / schools / school / about / contact)
   render through frontend/templates/layout.php, which has its own
   header + footer markup — these classes only exist there.
   ============================================================= */

/* --- Wordmark ------------------------------------------------ */

.sk-logo-text {
    font-family: var(--sk-font);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
}

.sk-logo-text--primary { color: var(--sk-fg); }
.sk-logo-text--white { color: var(--sk-fg); }

/* --- Account icon -------------------------------------------- */

.page-header__dashboard .dashboard-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--sk-muted);
    background: transparent;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
    transition: all .18s ease;
}

.page-header__dashboard .dashboard-icon-link:hover {
    background: var(--sk-subtle);
    color: var(--sk-fg);
    border-color: var(--sk-border);
}

.page-header__dashboard .dashboard-icon-link i { font-size: 14px; }

/* --- Header register CTA ------------------------------------- */

.page-header__cta .sk-header-cta {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-on-brand);
    background: var(--sk-brand);
    border-radius: var(--sk-r-pill);
    white-space: nowrap;
    transition: background-color .18s ease;
}

.page-header__cta .sk-header-cta:hover {
    background: var(--sk-brand-dark);
    color: var(--sk-on-brand);
}

@media (max-width: 959px) {
    .page-header__cta { display: none; }
}

/* --- Language dropdown --------------------------------------- */

.lang-dropdown-btn,
.mobile-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    font-family: var(--sk-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-fg);
    background: transparent;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
    cursor: pointer;
    transition: all .18s ease;
}

.lang-dropdown-btn:hover,
.mobile-lang-btn:hover {
    background: var(--sk-subtle);
}

.lang-dropdown-menu {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-input);
    box-shadow: var(--sk-shadow-lg);
    padding: 6px;
    min-width: 180px;
}

.lang-dropdown-menu ul { list-style: none; margin: 0; padding: 0; }

.lang-dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--sk-fg);
    border-radius: var(--sk-r-base);
}

.lang-dropdown-menu li a:hover { background: var(--sk-subtle); }

.lang-dropdown-menu li.uk-active a {
    background: var(--sk-brand-soft);
    color: var(--sk-brand-dark);
}

.lang-flag-img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
}

/* --- Footer (layout.php markup) ------------------------------ */

.footer-brand { margin-bottom: 8px; }

.footer-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
    margin-bottom: 12px;
}

.footer-logo i { color: var(--sk-brand); font-size: 20px; }

.footer-tagline {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sk-muted);
    margin: 0;
    max-width: 34ch;
}

/* custom.css colours the wordmark #fff for the old dark footer */
.footer-logo span {
    font-size: 19px;
    font-weight: 800;
    color: var(--sk-fg);
}

.footer-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-fg);
    letter-spacing: normal;
    margin: 0 0 12px;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li { padding: 0; border: none; }

.footer-links li a {
    display: inline-block;
    padding: 5px 0;
    font-size: 14px;
    color: var(--sk-muted);
    transition: color .18s ease;
}

.footer-links li a:hover { color: var(--sk-fg); }

.footer-bottom {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--sk-border);
}

.footer-copyright {
    font-size: 14px;
    color: var(--sk-muted);
    text-transform: none;
}

/* =============================================================
   15. OVERRIDES FOR custom.css's !important BLOCK
   custom.css (lines ~1220-1420) hard-locks the old look with
   !important on the hero, search box, cards and section headers.
   Matching specificity + !important is the only way past it
   without editing that file.
   ============================================================= */

section.sk-hero {
    min-height: 0 !important;
    display: block !important;
    background-color: var(--sk-brand-dark) !important;
}

/* custom.css pins the hero copy with !important at element+class
   specificity — match it exactly to get the fluid type back. */
.sk-hero__content {
    padding: 0 var(--sk-gutter) !important;
}

h1.sk-hero__title {
    font-size: clamp(32px, 5vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 20px 0 !important;
}

p.sk-hero__subtitle {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, .82) !important;
    margin: 0 0 28px 0 !important;
}

@media (max-width: 640px) {
    .sk-hero__content { padding: 0 20px !important; }
}

.sk-search-box {
    max-width: none !important;
    margin: 0 !important;
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card) !important;
    padding: 16px !important;
    box-shadow: var(--sk-shadow) !important;
}

@media (max-width: 768px) {
    .sk-search-box { margin: 0 !important; }
}

.sk-school-card {
    background: var(--sk-card) !important;
    border-radius: var(--sk-r-card) !important;
    box-shadow: var(--sk-shadow) !important;
    overflow: hidden !important;
    height: auto !important;
}

.sk-school-card:hover {
    box-shadow: var(--sk-shadow-md) !important;
}

/* Section headers read left-aligned in the prototype, not centred */
.sk-section-header {
    text-align: left !important;
    margin-bottom: 40px !important;
}

h2.sk-section-header__title {
    font-size: clamp(26px, 3.2vw, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: var(--sk-fg) !important;
    margin: 0 0 12px 0 !important;
}

p.sk-section-header__subtitle {
    font-size: 16px !important;
    color: var(--sk-muted) !important;
    margin: 0 !important;
    max-width: 60ch;
}

/* =============================================================
   16. HOMEPAGE SECTIONS (real home.php markup)
   These sections still paint themselves with var(--sk-gradient).
   The prototype has no gradients anywhere — flatten them.
   ============================================================= */

.sk-featured,
.sk-packages,
.sk-reviews { padding: 80px 0; }

/* CTA + stats bands — flat brand, white type.
   custom.css repaints the CTA #1a202c at element+class specificity, so this
   needs to match it rather than sit at plain .sk-cta. */
.sk-cta,
.sk-stats--gradient,
section.sk-cta {
    background: var(--sk-brand-dark) !important;
    background-image: none !important;
}

.sk-cta { padding: 80px 0; }

/* custom.css also locks the CTA copy — restore the fluid scale */
h2.sk-cta__title {
    font-size: clamp(26px, 3.2vw, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    color: #fff !important;
}

.sk-cta__title {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
}

.sk-cta__text {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

.sk-cta__btn { border-radius: var(--sk-r-pill); font-size: 14px; font-weight: 600; }

.sk-cta__btn--primary {
    background: var(--sk-card) !important;
    background-image: none !important;
    color: var(--sk-brand-dark) !important;
}

.sk-cta__btn--primary:hover { background: rgba(255, 255, 255, .9) !important; }

.sk-cta__btn--outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    color: #fff !important;
}

.sk-cta__btn--outline:hover {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.sk-stats__number {
    font-weight: 800;
    letter-spacing: -0.03em;
    background: none !important;
    -webkit-text-fill-color: currentColor;
}

.sk-stats__label { font-size: 14px; }

/* Reviews */
.sk-review-card {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 22px;
}

.sk-review-card__avatar {
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    color: var(--sk-brand-dark) !important;
    font-weight: 700;
}

.sk-review-card__name { font-size: 15px; font-weight: 700; color: var(--sk-fg); }
.sk-review-card__school { font-size: 13px; color: var(--sk-muted); }
.sk-review-card__stars i { color: var(--sk-star); font-size: 13px; }

.sk-review-card__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--sk-muted);
}

/* Free trial band */
.sk-free-trial {
    background: var(--sk-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border);
    padding: 80px 0;
}

.sk-free-trial__wrapper {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
}

.sk-free-trial__icon {
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    color: var(--sk-brand-dark) !important;
    border-radius: var(--sk-r-pill);
}

.sk-free-trial__icon i { color: var(--sk-brand-dark); }

.sk-free-trial__title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
}

.sk-free-trial__text { font-size: 16px; line-height: 1.6; color: var(--sk-muted); }

.sk-free-trial__btn {
    background: var(--sk-brand) !important;
    background-image: none !important;
    color: var(--sk-on-brand) !important;
    border-radius: var(--sk-r-pill);
    font-size: 14px;
    font-weight: 600;
}

.sk-free-trial__btn:hover { background: var(--sk-brand-dark) !important; }

.sk-free-trial__feature { font-size: 14px; color: var(--sk-fg); }
.sk-free-trial__feature i { color: var(--sk-brand); }

/* "View all schools" link under the featured grid */
.sk-featured__more .sk-btn--outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
}

/* Steps — number chip and copy share one left-aligned column */
.step-item,
.step-item__title,
.step-item__text { text-align: left; }

/* =============================================================
   17. INNER PAGES
   schools listing, school detail, and the static pages
   (about / contact / faq / terms / privacy).
   ============================================================= */

/* --- Page banner / header band ------------------------------- */

.sk-page-header,
.sk-page-banner,
.sk-page-header-gradient {
    background: var(--sk-brand-dark) !important;
    background-image: none !important;
    padding: 64px 0 !important;
    text-align: left !important;
}

.sk-page-header__title,
.sk-page-banner__title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 12px;
}

.sk-page-header__subtitle,
.sk-page-banner__subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    margin: 0;
    max-width: 60ch;
}

/* --- Filters sidebar ----------------------------------------- */

.sk-filters {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 20px;
}

.sk-filters__title,
.sk-filters__group-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-fg);
    letter-spacing: normal;
    text-transform: none;
}

/* --- Icon chips (features, info cards, contact) -------------- */

.sk-feature-item__icon,
.sk-info-card__icon,
.sk-contact-info-item__icon,
.sk-school-card__subtitle i {
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    color: var(--sk-brand-dark) !important;
    border-radius: var(--sk-r-pill);
}

.sk-feature-item__icon i,
.sk-info-card__icon i,
.sk-contact-info-item__icon i { color: var(--sk-brand-dark) !important; }

/* --- Buttons that still carry the gradient ------------------- */

.sk-cta-section__btn,
.sk-form-btn,
.sk-search-form__btn,
.sk-review-form__btn,
.sk-review-form__toggle,
.sk-inquiry-form__btn,
.sk-reviews-load-more,
.sk-social-link:hover {
    background: var(--sk-brand) !important;
    background-image: none !important;
    color: var(--sk-on-brand) !important;
    border-color: transparent !important;
    border-radius: var(--sk-r-pill) !important;
    font-size: 14px;
    font-weight: 600;
    box-shadow: none !important;
}

.sk-cta-section__btn:hover,
.sk-form-btn:hover,
.sk-search-form__btn:hover,
.sk-review-form__btn:hover,
.sk-review-form__toggle:hover,
.sk-inquiry-form__btn:hover,
.sk-reviews-load-more:hover {
    background: var(--sk-brand-dark) !important;
    color: var(--sk-on-brand) !important;
}

/* Focus rings on the page-level form fields */
.sk-form-textarea:focus,
.sk-search-form__input:focus,
.sk-review-form__textarea:focus {
    background-image: none !important;
    border-color: var(--sk-brand) !important;
    box-shadow: 0 0 0 3px rgba(28, 89, 219, .12) !important;
}

/* --- Stats band on static pages ------------------------------ */

.sk-stats-section {
    background: var(--sk-brand-dark) !important;
    background-image: none !important;
}

/* --- Misc detail-page bits ----------------------------------- */

.sk-working-hours__today-badge {
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    color: var(--sk-brand-dark) !important;
    border-radius: var(--sk-r-pill);
    font-size: 11px;
    font-weight: 600;
}

.sk-social-link {
    border-radius: var(--sk-r-pill);
    border: 1px solid var(--sk-border);
    color: var(--sk-muted);
}

/* =============================================================
   18. LISTING PAGE (schools.php — mirrors the prototype's /sok)
   ============================================================= */

/* --- Head band ----------------------------------------------- */

.sk-listing-head {
    background: var(--sk-surface);
    border-bottom: 1px solid var(--sk-border);
    padding: 48px 0;
}

.sk-listing-head__title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
    margin: 0 0 10px;
}

.sk-listing-head__subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sk-muted);
    margin: 0;
    max-width: 62ch;
}

/* --- Search bar ---------------------------------------------- */

.sk-searchbar {
    margin-top: 28px;
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 16px;
}

.sk-searchbar__row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 640px) {
    .sk-searchbar__row { flex-direction: row; align-items: center; }
}

.sk-searchbar__field { position: relative; }
.sk-searchbar__field--grow { flex: 1 1 auto; min-width: 0; }
.sk-searchbar__field--city { flex: 0 0 auto; }

@media (min-width: 640px) {
    .sk-searchbar__field--city { width: 224px; }
}

.sk-searchbar__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--sk-muted);
    pointer-events: none;
    z-index: 1;
}

/* Two classes deep on purpose: the generic form reset in section 5 matches
   input[type="text"], which outranks a single class. */
.sk-searchbar .sk-searchbar__input,
.sk-searchbar .sk-searchbar__select {
    width: 100%;
    min-height: 46px;
    padding: 12px 12px 12px 36px;
    font-family: var(--sk-font);
    font-size: 14px;
    color: var(--sk-fg);
    background-color: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-input);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.sk-searchbar .sk-searchbar__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 fill='none' stroke='%2362748e' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

.sk-searchbar .sk-searchbar__input:focus,
.sk-searchbar .sk-searchbar__select:focus {
    border-color: var(--sk-brand);
    box-shadow: 0 0 0 3px rgba(28, 89, 219, .12);
}

.sk-searchbar .sk-searchbar__input--plain { padding-left: 12px; }

.sk-searchbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 46px;
    padding: 12px 20px;
    font-family: var(--sk-font);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--sk-r-input);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}

.sk-searchbar__btn--filter {
    background: transparent;
    border-color: var(--sk-border);
    color: var(--sk-fg);
}

.sk-searchbar__btn--filter:hover { background: var(--sk-subtle); }

.sk-searchbar__btn--filter[aria-expanded="true"] {
    background: var(--sk-brand-soft);
    border-color: transparent;
    color: var(--sk-brand-dark);
}

.sk-searchbar__btn--submit {
    background: var(--sk-brand);
    color: var(--sk-on-brand);
}

.sk-searchbar__btn--submit:hover { background: var(--sk-brand-dark); }

/* Collapsible advanced panel */
.sk-searchbar__panel { display: none; }
.sk-searchbar__panel.is-open { display: block; }

.sk-searchbar__panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--sk-border);
}

@media (min-width: 640px) {
    .sk-searchbar__panel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
    .sk-searchbar__panel-grid { grid-template-columns: repeat(3, 1fr); }
}

.sk-searchbar__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-fg);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 6px;
}

.sk-searchbar .sk-searchbar__group .sk-searchbar__select { padding-left: 12px; }

.sk-searchbar__range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-searchbar__range-sep { color: var(--sk-muted); }

.sk-searchbar__panel-foot { margin-top: 14px; }

.sk-searchbar__reset {
    font-size: 13px;
    font-weight: 600;
    color: var(--sk-muted);
}

.sk-searchbar__reset:hover { color: var(--sk-danger); }

/* --- Results -------------------------------------------------- */

.sk-listing { padding: 48px 0 72px; }

.sk-results-count {
    font-size: 14px;
    color: var(--sk-muted);
    margin: 0 0 20px;
}

.sk-results-count strong { color: var(--sk-fg); font-weight: 700; }

.sk-school-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .sk-school-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
    .sk-school-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Card (text-only structure) ------------------------------- */

/* school-card.css zeroes the padding with
   `body:not(.page-school) .sk-school-card { padding: 0 !important }` (0,2,1).
   Doubling the class keeps us at the same weight so source order decides.
   The :not(.page-school) guard is kept for a reason — the school detail page
   reuses .sk-school-card for its content panels, and stretching those to
   height:100% leaves a tall empty column beside the sidebar. */
body:not(.page-school) .sk-school-card.sk-school-card {
    display: flex;
    flex-direction: column;
    padding: 20px !important;
    height: 100% !important;
    overflow: visible !important;
}

.sk-school-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sk-school-card__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.35;
    margin: 0;
}

.sk-school-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sk-brand-dark) !important;
    background: var(--sk-brand-soft) !important;
    border-radius: var(--sk-r-pill);
}

.sk-school-card__location,
.sk-school-card__languages {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--sk-muted);
    margin: 6px 0 0;
}

.sk-school-card__location i,
.sk-school-card__languages i { font-size: 12px; width: 13px; }

.sk-school-card__rating {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    margin: 12px 0 0;
}

.sk-school-card__rating i { color: var(--sk-star); font-size: 13px; }
.sk-school-card__rating-value { font-weight: 600; color: var(--sk-fg); }
.sk-school-card__rating-count { color: var(--sk-muted); }

.sk-school-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.sk-school-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--sk-muted);
    background: transparent;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-pill);
}

/* Was an absolutely-positioned badge over the old media header */
.sk-school-card__price {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: block;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sk-fg) !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.sk-school-card__price-unit {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--sk-muted);
}

.sk-school-card__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}

.sk-school-card__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border-radius: var(--sk-r-pill);
}

/* --- Pagination ---------------------------------------------- */

.sk-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 40px;
}

.sk-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sk-fg) !important;
    background: var(--sk-card) !important;
    background-image: none !important;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-base);
}

.sk-pagination__item:hover {
    background: var(--sk-subtle) !important;
    color: var(--sk-fg) !important;
}

.sk-pagination__item--active {
    background: var(--sk-brand) !important;
    border-color: var(--sk-brand);
    color: var(--sk-on-brand) !important;
}

/* --- Empty state ---------------------------------------------- */

.sk-empty-state {
    text-align: center;
    padding: 72px 20px;
    background: var(--sk-surface);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
}

.sk-empty-state__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--sk-brand-dark);
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    border-radius: var(--sk-r-pill);
}

.sk-empty-state__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--sk-fg);
    margin: 0 0 8px;
}

.sk-empty-state__text {
    font-size: 15px;
    color: var(--sk-muted);
    margin: 0 0 20px;
}

.sk-empty-state .sk-btn--outline {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
}

/* =============================================================
   19. HOMEPAGE STRUCTURE
   ============================================================= */

/* Hero search bar — same component as the listing, sat on the dark hero */
.sk-searchbar--hero {
    margin-top: 28px;
    max-width: 860px;
    padding: 14px;
}

.sk-searchbar--hero .sk-searchbar__field--grow { flex: 1 1 0; }

@media (min-width: 640px) {
    .sk-searchbar--hero .sk-searchbar__btn--submit { padding: 12px 26px; }
}

/* "How it works" — numbered steps, left aligned like the prototype */
.sk-how { padding: 80px 0; }

.sk-how__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .sk-how__grid { grid-template-columns: repeat(3, 1fr); }
}

.sk-how__item {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 24px;
}

.sk-how__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sk-brand-dark);
    background: var(--sk-brand-soft);
    border-radius: var(--sk-r-pill);
}

.sk-how__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sk-fg);
    margin: 0 0 8px;
}

.sk-how__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sk-muted);
    margin: 0;
}

/* Featured grid — 3 columns, matching the listing */
.sk-featured__grid,
.sk-packages__grid,
.sk-reviews__grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) {
    .sk-featured__grid,
    .sk-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
    .sk-featured__grid,
    .sk-packages__grid,
    .sk-reviews__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Cards inside the featured grid sit in a wrapper div */
.sk-featured__grid > div { display: flex; }
.sk-featured__grid > div > .sk-school-card { width: 100%; }

.sk-featured__more { margin-top: 36px; }

/* =============================================================
   20. HOMEPAGE — prototype section lineup
   ============================================================= */

/* --- "Why compare" two-column ------------------------------- */

.sk-why { padding: 80px 0; }

/* Single column: the stat cards that used to fill the right-hand side were
   removed, and a half-width empty column reads as a layout bug. */
.sk-why__grid {
    display: block;
}

.sk-why__content { max-width: 68ch; }

.sk-why__title {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sk-fg);
    margin: 0 0 16px;
}

.sk-why__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--sk-muted);
    margin: 0 0 24px;
    max-width: 56ch;
}

.sk-why__list { list-style: none; margin: 0; padding: 0; }

.sk-why__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--sk-fg);
    border: none;
}

.sk-why__list i {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 11px;
    color: var(--sk-brand-dark);
    background: var(--sk-brand-soft);
    border-radius: var(--sk-r-pill);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sk-why__aside {
    display: grid;
    gap: 14px;
}

.sk-why__stat {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 20px 24px;
}

.sk-why__stat-value {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sk-brand);
    line-height: 1.1;
}

.sk-why__stat-label {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--sk-muted);
}

/* --- Benefits grid on the surface band ---------------------- */

.sk-benefits {
    background: var(--sk-surface);
    border-top: 1px solid var(--sk-border);
    border-bottom: 1px solid var(--sk-border);
    padding: 80px 0;
}

.sk-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 640px) { .sk-benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .sk-benefits__grid { grid-template-columns: repeat(3, 1fr); } }

.sk-benefit {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 24px;
}

.sk-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    font-size: 15px;
    color: var(--sk-brand-dark);
    background: var(--sk-brand-soft);
    border-radius: var(--sk-r-pill);
}

.sk-benefit__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sk-fg);
    margin: 0 0 8px;
}

.sk-benefit__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sk-muted);
    margin: 0;
}

/* --- FAQ accordion ------------------------------------------ */

.sk-faq { padding: 80px 0; }

.sk-faq__list { max-width: 800px; }

.sk-faq__item {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    margin-bottom: 12px;
    overflow: hidden;
}

.sk-faq__item .uk-accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 18px 22px;
    font-family: var(--sk-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--sk-fg);
    text-transform: none;
    transition: background-color .18s ease;
}

.sk-faq__item .uk-accordion-title::before {
    width: 14px;
    height: 14px;
    margin-left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%2362748e' stroke-width='1.7' d='M1.5 4.5 7 10l5.5-5.5'/%3E%3C/svg%3E");
    transition: transform .2s ease;
}

.sk-faq__item.uk-open .uk-accordion-title::before { transform: rotate(180deg); }

.sk-faq__item .uk-accordion-title:hover { background: var(--sk-surface); color: var(--sk-fg); }

.sk-faq__item .uk-accordion-content {
    margin: 0;
    padding: 0 22px 20px;
}

.sk-faq__item .uk-accordion-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sk-muted);
}

/* =============================================================
   21. FAVOURITES + OPENING HOURS
   ============================================================= */

.sk-school-card__head-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sk-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 15px;
    color: var(--sk-muted);
    background: transparent;
    border: none;
    border-radius: var(--sk-r-pill);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}

.sk-fav-btn:hover { background: var(--sk-subtle); color: var(--sk-fg); }

.sk-fav-btn.is-active { color: var(--sk-danger); }
.sk-fav-btn.is-active:hover { color: var(--sk-danger); }

/* Nav item */
.page-header .uk-navbar-nav > li > a.sk-nav-fav { gap: 6px; }

.page-header .uk-navbar-nav > li > a.sk-nav-fav i {
    display: inline-block;
    font-size: 13px;
}

.sk-nav-fav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--sk-on-brand);
    background: var(--sk-brand);
    border-radius: var(--sk-r-pill);
}

.sk-nav-fav__count.is-empty { display: none; }

/* Opening hours line */
.sk-school-card__hours {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    margin: 6px 0 0;
}

.sk-school-card__hours i { font-size: 12px; width: 13px; }

.sk-school-card__hours.is-open { color: var(--sk-success); }
.sk-school-card__hours.is-closed { color: var(--sk-muted); }

/* =============================================================
   22. HOMEPAGE — measured against the Lovable preview
   Values below are read off the prototype, not eyeballed:
   h1 60/800/-1.5px/1.08 · h2 36/700/-0.9px/1.25 · sub 16/26px
   sections 96px · "Allt ingår" band brand-dark · final CTA surface
   ============================================================= */

/* Headings are 700, not 800 — 800 is only used by the hero */
.sk-section-header__title,
h2.sk-section-header__title,
.sk-why__title,
.sk-cta__title,
h2.sk-cta__title,
.sk-free-trial__title {
    font-size: clamp(28px, 3.4vw, 36px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.25 !important;
}

.sk-section-header__subtitle,
p.sk-section-header__subtitle,
.sk-why__text {
    font-size: 16px !important;
    line-height: 1.625 !important;
}

/* Hero headline reaches 60px on wide screens */
h1.sk-hero__title,
.sk-hero__title {
    font-size: clamp(34px, 5.2vw, 60px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
}

/* Section rhythm is 96px top and bottom */
.sk-why,
.sk-benefits,
.sk-how,
.sk-faq,
.sk-featured,
.sk-packages,
.sk-reviews {
    padding-top: 96px;
    padding-bottom: 96px;
}

@media (max-width: 959px) {
    .sk-why, .sk-benefits, .sk-how, .sk-faq,
    .sk-featured, .sk-packages, .sk-reviews {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* "Allt ingår i profilen" is a brand-dark band with white type */
.sk-free-trial {
    background: var(--sk-brand-dark) !important;
    background-image: none !important;
    border-top: none;
    border-bottom: none;
    padding: 96px 0;
}

.sk-free-trial__wrapper {
    background: transparent;
    border: none;
    box-shadow: none;
}

.sk-free-trial__title { color: #fff !important; }
.sk-free-trial__text { color: rgba(255, 255, 255, .82) !important; }
.sk-free-trial__feature { color: #fff; }
.sk-free-trial__feature i { color: #fff; }

.sk-free-trial__icon {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

.sk-free-trial__icon i { color: #fff !important; }

.sk-free-trial__btn {
    background: #fff !important;
    color: var(--sk-brand-dark) !important;
}

.sk-free-trial__btn:hover { background: rgba(255, 255, 255, .9) !important; }

/* The closing CTA sits on the light surface, not on brand */
.sk-cta,
section.sk-cta {
    background: var(--sk-surface) !important;
    background-image: none !important;
    border-top: 1px solid var(--sk-border);
    padding: 96px 0;
}

h2.sk-cta__title, .sk-cta__title { color: var(--sk-fg) !important; }
.sk-cta__text { color: var(--sk-muted) !important; font-size: 16px; line-height: 1.625; }

.sk-cta__btn--primary {
    background: var(--sk-brand) !important;
    color: var(--sk-on-brand) !important;
}

.sk-cta__btn--primary:hover { background: var(--sk-brand-dark) !important; }

.sk-cta__btn--outline {
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border) !important;
    color: var(--sk-fg) !important;
}

.sk-cta__btn--outline:hover { background: var(--sk-subtle) !important; color: var(--sk-fg) !important; }

/* =============================================================
   22b. HOMEPAGE — hero actions and the "Allt ingår" band
   ============================================================= */

.sk-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.sk-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 26px;
    font-family: var(--sk-font);
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--sk-r-pill);
    transition: background-color .18s ease, color .18s ease;
}

/* Buttons that sit on the brand-dark background */
.sk-btn--onbrand {
    background: var(--sk-brand);
    color: var(--sk-on-brand) !important;
}

.sk-btn--onbrand:hover { background: #1d63f0; color: var(--sk-on-brand) !important; }

.sk-btn--onbrand-outline {
    background: var(--sk-card);
    color: var(--sk-fg) !important;
}

.sk-btn--onbrand-outline:hover { background: rgba(255, 255, 255, .9); color: var(--sk-fg) !important; }

/* "Allt ingår i profilen" — brand-dark, two columns */
.sk-included {
    background: var(--sk-brand-dark);
    padding: 96px 0;
}

.sk-included__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 960px) {
    .sk-included__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}

.sk-included__title {
    font-size: clamp(28px, 3.4vw, 36px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 16px;
}

.sk-included__text {
    font-size: 16px;
    line-height: 1.625;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 26px;
    max-width: 52ch;
}

.sk-included__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.sk-included__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    font-size: 15px;
    color: #fff;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.sk-included__list li:last-child { border-bottom: none; }

.sk-included__list i {
    flex-shrink: 0;
    margin-top: 3px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--sk-brand-dark);
    background: #fff;
    border-radius: var(--sk-r-pill);
}

@media (max-width: 959px) {
    .sk-included { padding: 64px 0; }
}

/* =============================================================
   23. SCHOOL DETAIL PAGE
   school.php reuses .sk-school-card for its content panels, so the
   listing-card rules above have to be undone here before the page
   can be styled as panels.
   ============================================================= */

/* --- Undo the listing-card treatment ------------------------- */

.page-school .sk-school-card {
    display: block;
    height: auto !important;
    padding: 24px !important;
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card) !important;
    box-shadow: var(--sk-shadow) !important;
    margin-bottom: 20px;
}

.page-school .sk-school-card:hover {
    box-shadow: var(--sk-shadow) !important;
    border-color: var(--sk-border);
    transform: none;
}

/* Panel headings are section titles here, not card titles */
.page-school .sk-school-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--sk-fg);
    margin: 0 0 16px;
}

.page-school .sk-school-card__title i,
.page-school .sk-school-card__header i {
    font-size: 15px;
    color: var(--sk-brand);
    background: none;
    width: auto;
    height: auto;
}

.page-school .sk-school-card__subtitle {
    font-size: 14px;
    color: var(--sk-muted);
}

.page-school .sk-school-card__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--sk-brand-dark);
    background: var(--sk-brand-soft);
    border-radius: var(--sk-r-pill);
    padding: 3px 10px;
}

.page-school .sk-school-card__actions { padding-top: 0; }

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

.sk-school-hero {
    position: relative;
    min-height: 0;
    background: var(--sk-brand-dark);
    overflow: hidden;
}

.sk-school-hero__bg img {
    opacity: .85;
    filter: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* The banner has to read as a photo while the white headline stays legible:
   the veil is heavy only behind the text column and clears toward the right.
   It sits on __bg, which school.php only outputs when a banner exists — so a
   school without one keeps the plain brand panel. */
.sk-school-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(16, 42, 110, .92) 0%, rgba(16, 42, 110, .72) 38%, rgba(16, 42, 110, .28) 70%, rgba(16, 42, 110, .12) 100%),
        linear-gradient(180deg, rgba(16, 42, 110, .35) 0%, rgba(16, 42, 110, 0) 45%);
}

.sk-school-hero__content {
    position: relative;
    z-index: 2;
    padding: 56px 0 48px;
}

.sk-school-logo {
    width: 96px;
    height: 96px;
    border-radius: var(--sk-r-card);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: var(--sk-shadow-lg);
    background: #fff;
    flex-shrink: 0;
}

h1.sk-school-info__name,
.sk-school-info__name {
    font-size: clamp(26px, 3.4vw, 38px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 12px;
    text-shadow: none;
}

.sk-school-info__rating { gap: 8px; align-items: center; }
.sk-school-info__stars i { color: var(--sk-star); }
.sk-school-info__score { font-weight: 700; color: #fff; }
.sk-school-info__count { color: rgba(255, 255, 255, .75); font-size: 14px; }

.sk-school-info__quick { gap: 8px 20px; margin-top: 14px; }

.sk-school-info__quick-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.sk-school-info__quick-item i { color: rgba(255, 255, 255, .65); }

.sk-school-info__badge {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .24);
    color: #fff !important;
    border-radius: var(--sk-r-pill);
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* --- Sidebar panels ------------------------------------------ */

.page-school .sk-school-sidebar {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    padding: 24px;
    margin-bottom: 20px;
}

.page-school .sk-school-language-tag,
.page-school .sk-school-lesson__name {
    font-size: 13px;
    border-radius: var(--sk-r-pill);
}

.page-school .sk-school-feature {
    font-size: 15px;
    color: var(--sk-fg);
}

.page-school .sk-school-feature i { color: var(--sk-brand); }

/* =============================================================
   24. STATIC PAGES (about / contact / faq / terms / privacy)
   ============================================================= */

.sk-page-banner__title,
.sk-page-header__title,
.section-page-header h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 12px;
}

.sk-info-card,
.sk-feature-item,
.sk-contact-info-item,
.sk-faq-item,
.sk-legal-card {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
}

.sk-info-card__title,
.sk-feature-item__title,
.sk-contact-info-item__title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sk-fg);
}

.sk-info-card__text,
.sk-feature-item__text,
.sk-contact-info-item__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sk-muted);
}

/* FAQ accordion — static-pages.css numbers these in a red gradient */
.faq-number {
    background: var(--sk-brand-soft) !important;
    background-image: none !important;
    color: var(--sk-brand-dark) !important;
    border-radius: var(--sk-r-base);
    font-size: 12px;
    font-weight: 700;
}

.faq-item {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-r-card);
    box-shadow: var(--sk-shadow);
    margin-bottom: 12px;
}

.faq-item.active { border-color: var(--sk-brand); }

.faq-question-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--sk-fg);
}

.faq-answer {
    font-size: 15px;
    line-height: 1.65;
    color: var(--sk-muted);
}

.faq-icon {
    background: var(--sk-subtle) !important;
    background-image: none !important;
    color: var(--sk-muted) !important;
    border-radius: var(--sk-r-pill);
}

.faq-item.active .faq-icon {
    background: var(--sk-brand) !important;
    color: var(--sk-on-brand) !important;
}

/* Long-form legal copy */
.sk-legal-content h2,
.sk-legal-content h3 {
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--sk-fg);
    margin-top: 1.6em;
}

.sk-legal-content h2 { font-size: 24px; }
.sk-legal-content h3 { font-size: 18px; }

.sk-legal-content p,
.sk-legal-content li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--sk-fg);
}

/* =============================================================
   25. RTL
   ============================================================= */

[dir="rtl"] .page-footer .social,
[dir="rtl"] .page-footer__inner { text-align: right; }

[dir="rtl"] .sk-school-card__detail-row i { margin-left: 8px; margin-right: 0; }

[dir="rtl"] .uk-offcanvas-bar .uk-nav-default > li > a i {
    margin-left: 8px;
    margin-right: 0;
}