/* EDIT THE SOURCE: _build/static/assets/css/driving-schools.css, then run npm run build (in _build/). The copy in
   Website/assets/css/ is overwritten by every build. */
/* 2drive.co.za — Driving Schools province pages (Driving Schools/<province>/index.html): everything they used to
   carry inline. Loaded after site.css, which owns the menu buttons' look, every button's corners (--btn-radius) and
   the header/footer colours and fonts (tokens: do not write those values here, use the site.css tokens), and before
   instructors.css (the live instructor boxes).

   Built (shared-styles conversion, 2026-10-08) from the union of the 10 pages' inline <style> blocks, in their
   original order. A rule every page had is written once; a rule only some pages had is scoped with
   :where(<body classes>), which adds no specificity, so the cascade is the same as it was inline.
   Body classes (set on <body> by _build/tools/convert-shared-styles.js): ds-province + the province's slug
   (ds-western-cape, ds-gauteng, ds-tshwane = the pretoria folder, ds-kwazulu-natal = KZN, ds-eastern-cape,
   ds-free-state, ds-limpopo, ds-mpumalanga, ds-northern-cape, ds-north-west). The per-province rules are the
   coloured suburb-section headings (#<area>-header) and KwaZulu-Natal's wider suburb sidebar. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-body);
    background: #f4f7fb;
    color: #222;
    padding-top: 100px;
}
header {
    background: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 5%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
.logo-container img {
    height: 60px;
    width: auto;
}
.logo-container .province-logo-text {
    font-weight: 800;
    font-size: 22px;
    color: var(--header-title);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nav-content {
    display: flex;
    align-items: center;
    gap: 30px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}
.nav-links a {
    text-decoration: none;
    color: var(--header-link);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}
.province-dropdown {
    position: relative;
}
.province-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--header-link);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}
.province-dropdown-toggle .dropdown-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
}
.province-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}
.province-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    background: var(--header-bg);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    padding: 8px;
    min-width: 220px;
    z-index: 1100;
    flex-direction: column;
    gap: 2px;
}
.province-dropdown.active .province-dropdown-menu {
    display: flex;
}
.province-dropdown-menu a {
    padding: 10px 14px;
    border-radius: var(--btn-radius);
    text-decoration: none;
    color: var(--header-link);
    font-weight: 600;
    font-size: 14px;
    text-transform: none;
}
.province-dropdown-menu a:hover {
    background: #f1f5f9;
    color: #16a34a;
}
.province-dropdown-menu a.current {
    color: #16a34a;
    background: #f0fdf4;
}
.nav-btn {
    padding: 10px 22px;
    text-decoration: none;
    font-size: 13px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.company-header {
    background: white;
    padding: 30px;
    border-radius: 15px;
    display: flex;
    gap: 30px;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}
.business-card {
    width: 300px;
    height: 180px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.business-card img {
    max-width: 80%;
    max-height: 80%;
}
.company-info h1 {
    color: #003366;
    font-size: 32px;
    margin-bottom: 10px;
}
.action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.btn-action {
    padding: 12px 20px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    transition: 0.3s;
}
.btn-tel {
    background: #3b82f6;
}
.btn-email {
    background: #FF0004;
}
.btn-web {
    background: #0f172a;
}
.btn-whatsapp {
    background: #25D366;
}
.btn-whatsapp:hover {
    background: #128C7E;
}
.btn-gallery {
    background: #7c3aed;
}
.btn-gallery:hover {
    background: #6d28d9;
}
.btn-location {
    background: #0891b2;
}
.btn-location:hover {
    background: #0e7490;
}
.btn-action {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}
.info-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,0.75);
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.info-modal-overlay.active {
    display: flex;
}
.info-modal {
    background: white;
    border-radius: 16px;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
}
.info-modal h3 {
    color: #003366;
    margin-bottom: 20px;
}
.info-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
}
.info-modal-close:hover {
    color: #111;
}
.info-modal .slideshow-container {
    margin-bottom: 0;
}
.info-modal iframe {
    width: 100%;
    height: 350px;
    border: none;
    border-radius: 10px;
}
.slideshow-container {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    overflow-x: auto;
    padding: 10px 0;
}
.slide-thumb {
    width: 250px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    cursor: zoom-in;
    transition: 0.3s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.slide-thumb:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
.lightbox-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}
.lightbox-content {
    max-width: 85%;
    max-height: 80%;
    border-radius: 8px;
    animation: zoom 0.3s;
}
@keyframes zoom {
    from { transform:scale(0.7); }
    to { transform:scale(1); }
}
.close-btn {
    position: absolute;
    top: 30px;
    right: 50px;
    color: white;
    font-size: 60px;
    font-weight: bold;
    cursor: pointer;
}
.media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}
.media-box {
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.media-box h3 {
    margin-bottom: 15px;
    color: #003366;
}
iframe {
    width: 100%;
    border-radius: 10px;
    border: none;
    min-height: 300px;
}
.contact-section {
    background: white;
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 40px;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}
.submit-btn {
    background: linear-gradient(135deg,#22c55e 0%,#3b82f6 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
}
.custom-footer {
    background-color: var(--footer-bg);
    padding: 40px 5%;
    border-top: 1px solid var(--footer-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
}
.footer-left p {
    color: var(--footer-text-light);
    font-size: 13px;
    line-height: 1.5;
}
.footer-email {
    color: var(--footer-email);
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
}
.social-box {
    background: var(--footer-social-bg);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #333;
    transition: 0.3s;
    text-decoration: none;
}
.social-box:hover {
    background: #e2e8f0;
    color: #16a34a;
}
@media (max-width: 768px) {
    .company-header {
        flex-direction: column;
        text-align: center;
    }
    .media-grid {
        grid-template-columns: 1fr;
    }
    .action-buttons {
        flex-direction: column;
    }
    .close-btn {
        right: 20px;
        top: 10px;
    }
}
:root {
    --suburb-bg: #0c0e13;
    --suburb-card: #171a21;
    --suburb-card-hover: #1e222b;
    --suburb-border: rgba(255,255,255,0.08);
    --suburb-text: #f4f4f5;
    --suburb-muted: #9aa0ab;
}
.layout-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}
@media (min-width: 901px) {
    .layout-shell {
        display: flex;
        align-items: flex-start;
        gap: 32px;
    }
    .page-content {
        flex: 1;
        min-width: 0;
    }
}
.suburb-nav {
    display: block;
    background: var(--suburb-bg);
    border-radius: 16px;
    max-width: none;
}
.suburb-nav-title {
    color: var(--suburb-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 22px 20px 6px;
}
.suburb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 20px;
}
.suburb-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--suburb-card);
    border: 1px solid var(--suburb-border);
    color: var(--suburb-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.2s ease,background 0.2s ease,border-color 0.2s ease;
}
.suburb-pill:hover {
    background: var(--suburb-card-hover);
    border-color: var(--dot-color,#3b82f6);
    transform: translateX(3px);
}
.suburb-pill .dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: var(--dot-color,#3b82f6);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
@media (min-width: 901px) {
    :where(.ds-kwazulu-natal) .suburb-nav {
        width: 320px;
        flex-shrink: 0;
        position: sticky;
        top: 110px;
        margin: 24px 0;
    }
    :where(.ds-western-cape, .ds-gauteng, .ds-tshwane, .ds-eastern-cape, .ds-free-state, .ds-limpopo, .ds-mpumalanga, .ds-northern-cape, .ds-north-west) .suburb-nav {
        width: 260px;
        flex-shrink: 0;
        position: sticky;
        top: 110px;
        margin: 24px 0;
    }
}
@media (max-width: 900px) {
    .suburb-nav {
        position: fixed;
        top: 82px;
        left: 0;
        right: 0;
        z-index: 950;
        border-radius: 0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
        transition: transform 0.3s ease;
    }
    .suburb-nav.suburb-nav--hidden {
        transform: translateY(-130%);
    }
    .suburb-nav-title {
        display: none;
    }
    .suburb-list {
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        padding: 12px 14px;
        -webkit-overflow-scrolling: touch;
    }
    .suburb-list::-webkit-scrollbar {
        display: none;
    }
    .suburb-pill {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .page-content {
        padding-top: 64px;
    }
}
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}
.menu-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--header-icon);
    border-radius: 2px;
    transition: 0.3s;
}
@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
    }
    header .nav-content {
        display: none;
    }
}
#mobileMenu {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--phone-menu-dark-bg);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 24px 24px 60px;
}
#mobileMenu.active {
    transform: translateX(0);
}
.mobile-menu-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
.mobile-menu-close {
    background: none;
    border: none;
    color: var(--phone-menu-dark-text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}
.mobile-menu-links a {
    color: var(--phone-menu-dark-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}
.mobile-menu-section-title {
    color: var(--suburb-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.mobile-menu-suburbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.search-entire {
    grid-column: span 2;
    background: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.category-header {
    background-color: #f4e869;
    color: #333;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.category-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
#southern-suburbs-header {
    background-color: #3b82f6;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
#southern-suburbs-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-north-west) #potchefstroom-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-north-west) #potchefstroom-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-north-west) #rustenburg-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-north-west) #rustenburg-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-north-west) #vryburg-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-north-west) #vryburg-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-north-west) #brits-header {
    background-color: #c9a66b;
    color: #333;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-north-west) #brits-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-north-west) #orkney-header {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-north-west) #orkney-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-northern-cape) #namaqualand-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-northern-cape) #namaqualand-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-northern-cape) #upper-karoo-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-northern-cape) #upper-karoo-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-mpumalanga) #emalahleni-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-mpumalanga) #emalahleni-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-mpumalanga) #middelburg-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-mpumalanga) #middelburg-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-mpumalanga) #secunda-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-mpumalanga) #secunda-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-mpumalanga) #ermelo-header {
    background-color: #c9a66b;
    color: #333;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-mpumalanga) #ermelo-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-mpumalanga) #standerton-header {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-mpumalanga) #standerton-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-limpopo) #tzaneen-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-limpopo) #tzaneen-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-limpopo) #mokopane-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-limpopo) #mokopane-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-limpopo) #musina-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-limpopo) #musina-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-limpopo) #phalaborwa-header {
    background-color: #c9a66b;
    color: #333;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-limpopo) #phalaborwa-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-free-state) #fezile-dabi-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-free-state) #fezile-dabi-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-free-state) #thabo-mofutsanyana-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-free-state) #thabo-mofutsanyana-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-free-state) #xhariep-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-free-state) #xhariep-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-eastern-cape) #kariega-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-eastern-cape) #kariega-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-eastern-cape) #bhisho-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-eastern-cape) #bhisho-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-eastern-cape) #makhanda-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-eastern-cape) #makhanda-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-eastern-cape) #komani-header {
    background-color: #c9a66b;
    color: #333;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-eastern-cape) #komani-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-kwazulu-natal) #durban-south-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-kwazulu-natal) #durban-south-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-kwazulu-natal) #durban-west-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-kwazulu-natal) #durban-west-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-kwazulu-natal) #durban-west-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-kwazulu-natal) #pietermaritzburg-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-kwazulu-natal) #pietermaritzburg-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-tshwane) #pretoria-west-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-tshwane) #pretoria-west-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-tshwane) #pretoria-east-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-tshwane) #pretoria-east-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-tshwane) #pretoria-east-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-tshwane) #centurion-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-tshwane) #centurion-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-gauteng) #central-west-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-gauteng) #central-west-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-gauteng) #east-rand-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-gauteng) #east-rand-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-gauteng) #east-rand-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-gauteng) #midrand-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-gauteng) #midrand-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #west-coast-header {
    background-color: #44de2e;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-western-cape) #west-coast-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #atlantic-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #atlantic-header {
    background-color: #000;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-western-cape) #atlantic-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #helderberg-header {
    background-color: #ef4444;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-western-cape) #helderberg-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #winelands-header {
    background-color: #c9a66b;
    color: #333;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-western-cape) #winelands-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #garden-route-header {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-western-cape) #garden-route-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
:where(.ds-western-cape) #central-karoo-header {
    background-color: #9f1239;
    color: white;
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
:where(.ds-western-cape) #central-karoo-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.search-container {
    background: white;
    padding: 40px 20px;
    border-radius: 15px;
    margin-bottom: 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.search-header-red {
    color: #e11d48;
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 30px;
}
.search-bar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.search-input {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 50px;
    width: 250px;
    background: #f9f9f9;
}
.data-table-wrapper {
    overflow-x: auto;
    display: none;
}
.data-table-wrapper.show {
    display: block;
}
.supplier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.supplier-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid #eee;
    color: #111;
    position: relative;
}
.supplier-table th::after {
    content: '↕';
    font-size: 10px;
    color: #ccc;
    margin-left: 5px;
}
.supplier-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}
.supplier-table tr:hover {
    background-color: #fcfcfc;
}
.col-supplier a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}
.col-supplier a:hover {
    text-decoration: underline;
}
.col-tel {
    color: #2563eb;
    font-weight: 500;
}
.search-header-red {
    color: #e11d48;
    text-align: center;
    font-weight: 800;
    font-size: 24px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.search-header-red::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #e11d48;
    margin: 10px auto 0;
    border-radius: 2px;
}
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--back-to-top-bg-dt);
    color: var(--back-to-top-icon);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    z-index: 1001;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s,opacity 0.3s;
    align-items: center;
    justify-content: center;
}
#backToTop:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}
@media (max-width: 768px) {
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* ==== Added after the shared-styles conversion ==== (tools/convert-shared-styles.js compares only the rules above
   this line with the pages' old inline CSS) */

/* Suburb sections added for the free driving school listings (tools/update-instructor-pages.js): the heading of the
   original #<area>-header rules, in the pages' section colours (the pill dot colour is noted per class). */
.area-header {
    padding: 15px 5%;
    max-width: 900px;
    margin: 20px auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.area-header h2 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}
.area-header--yellow { background-color: #f4e869; color: #333; }                           /* dot #f5c242 */
.area-header--blue { background-color: #3b82f6; color: white; }                            /* dot #3b82f6 */
.area-header--green { background-color: #44de2e; color: white; }                           /* dot #22c55e */
.area-header--black { background-color: #000; color: white; }                              /* dot #64748b */
.area-header--red { background-color: #ef4444; color: white; }                             /* dot #f97362 */
.area-header--tan { background-color: #c9a66b; color: #333; }                              /* dot #c9a66b */
.area-header--white { background-color: #ffffff; color: #1f2937; border: 1px solid #e2e8f0; } /* dot #e2e8f0 */
.area-header--crimson { background-color: #9f1239; color: white; }                         /* dot #9f1239 */

/* Free driving school listings (spec 2026-10-09-driving-school-listings §1), stamped by the build after each section's
   instructor box: compact rows of name, address and tap-to-call numbers; phones as small buttons (--btn-radius). */
.school-listings {
    padding-top: 0;
}
.school-listings-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 10px;
}
.school-list {
    list-style: none;
    background: #ffffff;
    border: 1px solid #e3e9f2;
    border-radius: 15px;
    overflow: hidden;
}
.school-row {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); /* the same columns on every row */
    gap: 4px 16px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #edf1f7;
}
.school-row:first-child {
    border-top: 0;
}
.school-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.school-address {
    font-size: 13px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.school-phones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}
.school-tel {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--btn-radius);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
a.school-tel {
    background: var(--brand-blue);
    color: #ffffff;
    text-decoration: none;
}
a.school-tel:hover {
    background: #2563eb;
}
.school-tel--text {
    border: 1px solid #c9d6e6;
    color: var(--text-muted);
}
@media (max-width: 700px) {
    .school-row {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 14px;
    }
    .school-phones {
        justify-content: flex-start;
        margin-top: 4px;
    }
}

/* Section anchors (Ruling L3): a suburb pill's jump stops below the fixed header (on phones also below the suburb bar)
   instead of under it. */
:where(.ds-province) .page-content [id] {
    scroll-margin-top: 110px;
}
@media (max-width: 900px) {
    :where(.ds-province) .page-content [id] {
        scroll-margin-top: 150px;
    }
}

/* Page top (spec 2026-10-09-driving-school-listings §2), put there by tools/update-instructor-pages.js: Premium
   placement panel, search row and its results, Featured listing panel, register button. White panels with a dashed
   border; assets/js/instructors.js puts the tier's adverts (instructors.css, pa-*) in place of a panel's placeholder
   (texts + 'Register as a driving school' button) or example advert, and fills the search results
   (count line, Clear search button, cards and listing rows). Buttons: --btn-radius. */
.page-top > * + * {
    margin-top: 18px;
}
.placement-panel {
    background: #ffffff;
    border: 2px dashed #b9c8db;
    border-radius: 15px;
    padding: 22px 24px 24px;
    text-align: center;
}
.placement-panel--premium {
    border-color: var(--brand-green);
}
.placement-panel--featured {
    border-color: var(--brand-blue);
}
.placement-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.placement-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy);
}
.placement-text {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--text-muted);
}
.placement-panel--filled {
    text-align: left;
}
.placement-link {
    color: var(--navy);
    font-weight: 600;
}
.school-search {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e3e9f2;
    border-radius: 15px;
    padding: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    container-type: inline-size; /* the row's wrapping (below) follows the form's own width, not the window's */
}
.school-search-input,
.school-search-province,
.school-search-code {
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid #c9d6e6;
    border-radius: var(--btn-radius);
    background: #ffffff;
    color: var(--text-main);
    font-family: inherit;
    font-size: 15px;
}
/* One row when the form's content box fits the text field's 240px, the drop-downs, the button and the gaps (810px):
   the text field takes what the others leave. Narrower: the text field on its own row, then province + licence code
   + Search; under 480px: the text field, then province + licence code side by side, then Search, each row full width. */
.school-search-input {
    flex: 1 1 240px;
}
.school-search-province {
    flex: 0 1 230px;
}
.school-search-code {
    flex: 0 1 200px;
}
@container (max-width: 809.98px) {
    .school-search-input {
        flex-basis: 100%;
    }
    .school-search-province,
    .school-search-code {
        flex: 1 1 0;
    }
}
@container (max-width: 479.98px) {
    .school-search-btn {
        flex: 1 1 100%;
    }
    .school-search-province,
    .school-search-code {
        padding: 11px 6px 11px 10px; /* half the row each: room for "Western Cape" next to the arrow */
        font-size: 14px;
    }
}
.school-search-input:focus,
.school-search-province:focus,
.school-search-code:focus {
    border-color: var(--brand-blue);
    outline: 2px solid var(--brand-blue);
    outline-offset: 0;
}
.school-search-btn,
.school-search-clear {
    border-radius: var(--btn-radius);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}
.school-search-btn {
    padding: 11px 28px;
    border: 0;
    background: var(--navy);
    color: #ffffff;
    font-size: 15px;
}
.school-search-btn:hover {
    background: #00264d;
}
.school-search-btn:focus-visible,
.school-search-clear:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}
.page-top > .school-search-results {
    margin-top: 0; /* nothing to show: no gap */
}
.page-top > .school-search-results.is-active {
    margin-top: 18px;
}
.school-search-results {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
}
.school-search-status {
    flex: 1 1 auto;
    margin: 0;
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}
.school-search-clear {
    padding: 7px 14px;
    border: 1.5px solid #c9d6e6;
    background: #ffffff;
    color: var(--navy);
    font-size: 13px;
}
.school-search-clear:hover {
    border-color: var(--brand-blue);
}
.school-search-clear[hidden],
.school-search-found:empty {
    display: none;
}
.school-search-found {
    flex: 1 1 100%;
    min-width: 0;
}
.school-search-found > * + * {
    margin-top: 14px;
}
.school-search-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}
.page-top > .instructor-register-cta {
    margin-top: 18px;
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (max-width: 600px) {
    .placement-panel {
        padding: 18px 16px 20px;
    }
    .placement-panel--filled {
        padding: 14px 10px; /* a card inside: leave it the width */
    }
    .placement-title {
        font-size: 19px;
    }
}

/* Header (2026-10-12). Buttons: Driving Instructors (is-active: cyan, site.css --menu-active-bg), Driving Test, Events,
   Mall, Classifieds, 8px apart. From 1,181px the header's content box uses the page content's frame: the province
   title starts at the suburb sidebar's left edge and the last button ends at the content column's right edge (the
   hero's edges): .layout-shell's max-width 1400px and 5% side padding, + the content boxes' 20px on the right.
   That frame is at most 1,240px wide (at 1,400px) and narrows on both sides (0.9 x width - 20px below 1,400px,
   1,380px - 10% of the width above). The full-size header would need 1,173-1,341px (title + 24px + menu; longest:
   "North West Province"), more than the frame ever gives, so it comes in two sizes, chosen per width for the longest
   title (natural widths measured in headless Edge, 24px title gap included). Media queries count the scrollbar, the
   frame does not: the narrowest fit is at 1,181px with a scrollbar (6px to spare for "North West Province"):
     compact  1,345-2,000px: title 18px, links 14px 16px apart, buttons 12.5px 9px 14px -> needs 1,158px (frame >= 1,177)
     tight    1,181-1,344px and from 2,001px: title 15px, links 13px 12px apart, buttons 12px 8px 9px -> needs 1,023px
              (frame >= 1,029px with a 15px scrollbar; it fits up to ~3,370px)
   Up to 1,180px the burger menu takes over (unchanged). Supersedes the "Header fit (2026-10-09)" rules. */
@media (max-width: 1180px) {
    .menu-toggle {
        display: flex;
    }
    header .nav-content {
        display: none;
    }
}
header .button-group {
    display: flex;
    gap: 8px;
}
header .nav-btn {
    white-space: nowrap;
}
@media (min-width: 1181px) {
    header {
        padding-left: 0;
        padding-right: 0;
    }
    header nav {
        padding: 0 calc(5% + 20px) 0 5%;
    }
    header .nav-links > a,
    header .province-dropdown-toggle {
        white-space: nowrap;
    }
    header .logo-container {
        flex-shrink: 0;
        margin-right: 24px;
    }
    /* compact (1,345-2,000px; the tight band below overrides it) */
    header .nav-content,
    header .nav-links {
        gap: 16px;
    }
    header .nav-btn {
        padding: 9px 14px;
        font-size: 12.5px;
    }
    .logo-container .province-logo-text {
        font-size: 18px;
    }
}
@media (min-width: 1181px) and (max-width: 1344px), (min-width: 2001px) {
    header .nav-content,
    header .nav-links {
        gap: 12px;
    }
    header .nav-links > a,
    header .province-dropdown-toggle {
        font-size: 13px;
    }
    header .nav-btn {
        padding: 8px 9px;
        font-size: 12px;
    }
    .logo-container .province-logo-text {
        font-size: 15px;
    }
}
/* the phone menu's active section link: a cyan pill (colours: site.css .mobile-menu-links a.is-active), its text in
   line with the other links */
.mobile-menu-links a.is-active {
    align-self: flex-start;
    padding: 6px 14px;
    margin: -6px 0 -6px -14px;
    border-radius: var(--btn-radius);
}

/* Footer copyright on one line (2026-10-12) from 1025px; below that the footer keeps its original two lines so the
   footer columns stay side by side */
@media (min-width: 1025px) {
    .footer-left p br {
        display: none;
    }
    .footer-left p {
        white-space: nowrap;
    }
}

/* Hero (2026-10-12), put there by tools/update-instructor-pages.js right above the two-column area (suburb sidebar +
   content): the look of the Motor Mall region heroes (hub.css .md-hero--shop with a photo) - a rounded banner, the
   province photo under a navy veil, white text, breadcrumb, gradient icon tile, the page's h1, sub line, tagline and
   the instructor register / sign-in buttons (--btn-radius). It spans .layout-shell's content width. On phones and
   tablets (<= 900px) the suburb bar is fixed under the header, so the hero takes the room .page-content kept for it. */
.school-hero-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 5% 0;
}
.school-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 380px;
    padding: 46px 0 42px;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--navy);
    background-size: cover;
    background-position: top center;
    box-shadow: 0 8px 24px rgba(0,51,102,0.08);
    color: #ffffff;
    text-align: center;
    font-family: var(--font-body);
    line-height: 1.6;
}
.school-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--brand-gradient);
}
.school-hero-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.school-hero-crumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: none;
    margin: 0 0 14px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
}
.school-hero-crumbs a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
}
.school-hero-crumbs a:hover {
    text-decoration: underline;
}
/* the Driving Schools round badge (2026-10-14): the whole logo, never cropped; the circle hides the image's light corners */
.school-hero-badge {
    display: block;
    width: clamp(120px, 20vw, 180px);
    height: auto;
    margin: 0 auto 16px;
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.school-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0,20,40,0.35);
}
.school-hero-sub {
    margin: 10px 0 0;
    color: #bfe9f7;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.school-hero-tagline {
    max-width: 640px;
    margin: 14px auto 0;
    color: rgba(255,255,255,0.92);
    font-size: 1rem;
}
.school-hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.school-hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border: 1.5px solid transparent;
    border-radius: var(--btn-radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.school-hero-btn--primary {
    background: var(--brand-gradient);
    color: #ffffff;
}
.school-hero-btn--primary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(59,130,246,0.25);
}
.school-hero-btn--secondary {
    background: #ffffff;
    border-color: var(--brand-blue);
    color: #2563eb;
}
.school-hero-btn--secondary:hover {
    background: #eff5ff;
    color: #1d4ed8;
}
@media (min-width: 901px) {
    .school-hero-shell {
        padding-right: calc(5% + 20px); /* ends with the page content's boxes (.container's 20px padding) */
    }
}
@media (max-width: 900px) {
    .school-hero-shell {
        padding-top: 80px; /* clears the fixed suburb bar (.page-content keeps 64px for it on pages without a hero) */
    }
    .school-hero-shell + .layout-shell .page-content {
        padding-top: 0;
    }
}
@media (max-width: 560px) {
    .school-hero {
        min-height: 0;
        padding: 36px 0 34px;
        border-radius: 18px;
    }
    .school-hero-inner {
        padding: 0 16px;
    }
}

/* Free listings: mobile numbers as WhatsApp buttons (2026-10-12; provinces in lib/stamp.js WHATSAPP_PROVINCES) */
a.school-tel--wa {
    gap: 6px;
    background: #25d366;
    color: #ffffff;
}
a.school-tel--wa:hover {
    background: #1ebe5b;
}
.school-tel-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* Page width on a computer (2026-10-14): the header, the province hero and the two-column area (suburb sidebar +
   content) use the site.css --page-max (1440px, as wide as gumtree.co.za). */
nav, .layout-shell, .school-hero-shell { max-width: var(--page-max, 1440px); }
/* the same page width as the Motor Mall, Classifieds and African Bikers World (user 2026-11-02): a 24px side gap like
   hub.css .container (16px on phones) instead of 5% of the screen, which left wide empty sides on big screens */
body > header { padding-left: 24px; padding-right: 24px; }
.layout-shell { padding-left: 24px; padding-right: 24px; }
/* the province banner runs across the full screen width, like African Bikers World (2026-11-02; was a rounded card) */
.school-hero-shell { max-width: none; padding-left: 0; padding-right: 0; }
@media (min-width: 901px) {
    .school-hero-shell { padding-right: 0; padding-top: 0; }
}
.school-hero { border-radius: 0; box-shadow: none; }
@media (min-width: 1181px) {
    body > header { padding-left: 0; padding-right: 0; }
    body > header nav { padding: 0 44px 0 24px; } /* the menu lines up with the hero and the page content */
}
@media (max-width: 560px) {
    body > header, .layout-shell { padding-left: 16px; padding-right: 16px; }
}

/* List / Grid switch (2026-10-15), put at the end of the page top by assets/js/instructors.js: Grid shows the paid
   listings and the free school listings as cards in columns. Computer screens only; phones keep the list. */
.md-view-toggle { display: none; }
@media (min-width: 901px) {
    .md-view-toggle { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
    .md-view-toggle button { font: inherit; font-weight: 600; padding: 6px 14px; border: 1px solid #c9d6e6; background: #ffffff; color: var(--text-main); border-radius: var(--btn-radius); cursor: pointer; }
    .md-view-toggle button[aria-pressed="true"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #ffffff; }
    [data-schools-view="grid"] .instructor-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    [data-schools-view="grid"] .instructor-card { flex-direction: column; gap: 14px; }
    [data-schools-view="grid"] .school-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
    [data-schools-view="grid"] .school-row,
    [data-schools-view="grid"] .school-row:first-child { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 14px 16px; background: #ffffff; border: 1px solid #e3e9f2; border-radius: 12px; }
    [data-schools-view="grid"] .school-phones { justify-content: flex-start; }
}