/* EDIT THE SOURCE: _build/static/assets/css/drivers-test.css, then run npm run build (in _build/). The copy in
   Website/assets/css/ is overwritten by every build. */
/* 2drive.co.za — Drivers Test pages (module pages, province menu pages): 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).

   Built (shared-styles conversion, 2026-10-08) from the union of the pages' inline <style> variants, in their
   original order. A rule shared by every variant is written once; a rule only some variants 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):
     dt-module   every module page (Drivers Test/<province>/<Road|Vehicle Controls|Yard|Bike|overview>/pageN.html)
       dt-m-a      image lightbox styles                       (most pages)
       dt-m-b      no lightbox                                 (Road 1 + 10, overview 1, Vehicle Controls 1, Yard 1)
       dt-m-c      no lightbox, second phone-layout block      (overview 2-6, Road 2-7, Vehicle Controls 2-7, Yard 2-3)
       dt-m-d      as dt-m-c, header nav position: relative    (Road 8)
       dt-m-e      lightbox, phone pagination block placed before the base pagination rules, so those win
                   (Vehicle Controls 9)
     dt-province the province menu pages (Drivers Test/<province>/index.html)
       dt-p-a      every province but Western Cape
       dt-p-b      Western Cape (module-page footer)
   Road 16 keeps its own second lightbox block inline (it redefines @keyframes zoomIn). */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: var(--font-body);
    background: #f4f7fb;
    color: #222;
    padding-top: 80px;
}
:where(.dt-module) 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;
}
:where(.dt-province) 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;
}
:where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-e, .dt-p-a, .dt-p-b) nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}
:where(.dt-m-d) nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}
.logo-container img {
    height: 60px;
    width: auto;
}
.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;
    gap: 30px;
}
:where(.dt-module) .nav-links a {
    text-decoration: none;
    color: var(--header-link-dt) !important;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}
:where(.dt-province) .nav-links a {
    text-decoration: none;
    color: var(--header-link);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.button-group {
    display: flex;
    gap: 10px;
}
.nav-btn {
    padding: 10px 22px;
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
    white-space: nowrap;
}
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    padding: 10px;
}
:where(.dt-module) .menu-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--header-link-dt);
    border-radius: 3px;
    transition: 0.3s;
}
:where(.dt-module) .main-container {
    max-width: 2000px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: 250px 1.4fr 250px;
    gap: 40px;
    padding: 0 5%;
}
:where(.dt-module) .content-box {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    width: 100%;
}
:where(.dt-module) .redtext {
    color: #e11d48;
    font-weight: 700;
}
:where(.dt-module) h1 {
    color: #003366;
    margin-bottom: 20px;
    font-size: 28px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
}
:where(.dt-module) .info-section {
    margin-bottom: 25px;
    line-height: 1.6;
}
:where(.dt-module) .sign-img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 8px;
}
:where(.dt-module) .sidebar h5 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #003366;
}
:where(.dt-module) .sidebar ul {
    list-style: none;
}
:where(.dt-module) .sidebar ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}
:where(.dt-module) .sidebar ul li a:hover {
    background: #f8fafc;
    color: #3b82f6;
}
:where(.dt-province) .menu-toggle span {
    display: block;
    width: 30px;
    height: 3px;
    background: var(--header-icon);
    border-radius: 3px;
    transition: 0.3s;
}
@media (max-width: 1150px) {
    .menu-toggle {
        display: flex;
    }
    :where(.dt-module) .nav-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--header-bg);
        flex-direction: column;
        padding: 20px;
        display: none;
        border-top: 1px solid var(--header-line);
    }
    :where(.dt-province) .nav-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--header-bg);
        flex-direction: column;
        padding: 20px;
        gap: 20px;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        display: none;
        border-top: 1px solid var(--header-line);
    }
    .nav-content.active {
        display: flex;
    }
    :where(.dt-module) .main-container {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }
    :where(.dt-module) .main-container > .sidebar:first-of-type {
        order: 1;
    }
    :where(.dt-module) .main-container > .content-box {
        order: 2;
    }
    :where(.dt-module) .main-container > .sidebar:last-of-type {
        order: 3;
    }
}
@media (max-width: 768px) {
    :where(.dt-m-e) .pagination-container {
        max-width: 100%;
        width: 100%;
        margin: 30px 0;
        padding: 0 8px;
        box-sizing: border-box;
    }
    :where(.dt-m-e) .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    :where(.dt-m-e) .page-link {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 16px;
        border-radius: var(--btn-radius);
    }
    :where(.dt-m-e) .page-arrow {
        padding: 0 16px;
        width: auto;
        min-width: 78px;
        height: 50px;
        flex: 0 1 auto;
        font-size: 13px;
        letter-spacing: 0.5px;
    }
}
html:where(:has(> body:is(.dt-module))) {
    scroll-behavior: smooth;
}
:where(.dt-module) #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: 2000;
    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;
}
:where(.dt-module) #backToTop:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}
:where(.dt-module) .video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 30px 0;
}
:where(.dt-module) .video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    border-radius: 12px;
}
@media (max-width: 1150px) {
    :where(.dt-province) .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    :where(.dt-province) .button-group {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    :where(.dt-province) .nav-btn {
        width: 80%;
        text-align: center;
    }
    :where(.dt-province) .menu-toggle.open span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    :where(.dt-province) .menu-toggle.open span:nth-child(2) {
        opacity: 0;
    }
    :where(.dt-province) .menu-toggle.open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}
:where(.dt-province) .hero {
    padding: 60px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
:where(.dt-province) .hero-text {
    flex: 1;
    min-width: 300px;
}
:where(.dt-province) .hero-text h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #003366;
}
:where(.dt-province) .hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
}
:where(.dt-province) .top-menu {
    width: 90%;
    margin: 20px auto;
    background: #26a8d1;
    display: flex;
    flex-wrap: wrap;
    border-radius: 8px;
    overflow: hidden;
}
:where(.dt-province) .top-menu a {
    color: #fff;
    text-decoration: none;
    padding: 14px 20px;
    font-size: 15px;
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: 0.3s;
}
:where(.dt-province) .top-menu a:hover,
:where(.dt-province) .top-menu a.active {
    background: #111;
}
:where(.dt-province) .button-wrapper {
    width: 90%;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px 18px;
}
:where(.dt-province) .module-btn {
    background: #fff;
    color: #000;
    text-decoration: none;
    padding: 12px;
    border: 1px solid #c8c8c8;
    border-radius: var(--btn-radius);
    font-size: 15px;
    transition: 0.2s;
}
:where(.dt-province) .module-btn:hover {
    background: #26a8d1;
    color: #fff;
}
:where(.dt-province) footer {
    text-align: center;
    padding: 40px;
    color: #666;
    border-top: 1px solid #ddd;
}
@media (max-width: 1024px) {
    :where(.dt-province) .button-wrapper {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 600px) {
    :where(.dt-province) .button-wrapper {
        grid-template-columns: 1fr;
    }
    :where(.dt-province) .hero-text h1 {
        font-size: 32px;
    }
}
.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;
}
:where(.dt-p-b) .footer-left {
    flex: 1;
    min-width: 250px;
}
:where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d, .dt-m-e, .dt-p-b) .footer-left img {
    height: 40px;
    width: auto;
    margin-bottom: 15px;
}
:where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d, .dt-m-e, .dt-p-b) .footer-left p {
    color: var(--footer-text-light);
    font-size: 13px;
}
:where(.dt-p-a) .footer-left {
    flex: 1;
    min-width: 250px;
}
:where(.dt-p-a) .footer-left img {
    height: 50px;
    margin-bottom: 15px;
}
:where(.dt-p-a) .footer-left p {
    color: var(--footer-text-light);
    font-size: 13px;
    line-height: 1.5;
}
:where(.dt-province) .footer-center {
    flex: 1;
    text-align: center;
    min-width: 250px;
}
:where(.dt-p-a) .footer-center h4 {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--footer-heading-dt);
}
.footer-email {
    color: var(--footer-email);
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
}
:where(.dt-module) .social-box {
    background-color: var(--footer-social-bg);
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: var(--footer-social-icon);
    transition: 0.3s;
}
@media (max-width: 1150px) {
    :where(.dt-m-c, .dt-m-d) .menu-toggle {
        display: flex;
    }
    :where(.dt-m-c, .dt-m-d) .nav-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--header-bg);
        flex-direction: column;
        padding: 20px;
        display: none;
        border-top: 1px solid var(--header-line);
    }
    :where(.dt-m-c, .dt-m-d) .nav-content.active {
        display: flex;
    }
    :where(.dt-m-c, .dt-m-d) .main-container {
        grid-template-columns: 1fr;
    }
    :where(.dt-m-c, .dt-m-d) .sidebar {
        order: 2;
    }
    :where(.dt-m-c, .dt-m-d) .content-box {
        order: 1;
    }
}
:where(.dt-module) .pagination-container {
    max-width: 1600px;
    margin: 40px auto;
    padding: 0 5%;
    display: flex;
    justify-content: center;
}
:where(.dt-module) .pagination {
    display: flex;
    gap: 10px;
    align-items: center;
}
:where(.dt-module) .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    text-decoration: none;
    color: #1e293b;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--btn-radius);
    font-weight: 600;
    transition: 0.3s;
}
:where(.dt-module) .page-link:hover {
    border-color: black;
    color: black;
    transform: translateY(-2px);
}
:where(.dt-module) .page-link.active {
    background: black;
    color: white;
    border: none;
}
:where(.dt-module) .page-arrow {
    padding: 0 20px;
    width: auto;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
:where(.dt-module) .highlight {
    background-color: cadetblue;
    color: white;
    padding: 2px 5px;
    border-radius: 4px;
}
@media (max-width: 768px) {
    :where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d) .pagination-container {
        max-width: 100%;
        width: 100%;
        margin: 30px 0;
        padding: 0 8px;
        box-sizing: border-box;
    }
    :where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d) .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    :where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d) .page-link {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 16px;
        border-radius: var(--btn-radius);
    }
    :where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d) .page-arrow {
        padding: 0 16px;
        width: auto;
        min-width: 78px;
        height: 50px;
        flex: 0 1 auto;
        font-size: 13px;
        letter-spacing: 0.5px;
    }
}
:where(.dt-m-a, .dt-m-e) .enlargeable-image {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
:where(.dt-m-a, .dt-m-e) .enlargeable-image:hover {
    opacity: 0.9;
}
:where(.dt-m-a, .dt-m-e) .lightbox {
    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;
}
:where(.dt-m-a, .dt-m-e) .lightbox-content {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    animation: zoomIn 0.25s ease;
}
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
:where(.dt-province) .footer-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 250px;
}
:where(.dt-p-a) .footer-right h4 {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--footer-heading-dt);
}
:where(.dt-p-a) .social-icons-row {
    display: flex;
    gap: 15px;
}
:where(.dt-p-a) .social-box {
    background-color: var(--footer-social-bg);
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    color: var(--footer-social-icon);
    transition: 0.3s;
}
:where(.dt-p-a) .social-box:hover {
    background-color: #e2e8f0;
    transform: translateY(-3px);
}
:where(.dt-p-b) .social-box {
    background-color: var(--footer-social-bg);
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: var(--footer-social-icon);
    transition: 0.3s;
}
:where(.dt-p-b) #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: 2000;
    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;
}
:where(.dt-p-b) #backToTop:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}
html:where(:has(> body:is(.dt-p-b))) {
    scroll-behavior: smooth;
}
@media (max-width: 768px) {
    :where(.dt-province) .custom-footer {
        flex-direction: column;
        text-align: center;
    }
    :where(.dt-province) .footer-right {
        align-items: center;
    }
}

/* ==== Added after the shared-styles conversion ==== (tools/convert-shared-styles.js compares only the rules above
   this line with the pages' old inline CSS; later look changes go below it) */
/* Footer logo size from the site.css token (2026-10-12: made 50% bigger, 40px -> 60px and 50px -> 75px) */
.custom-footer .footer-left img {
    height: var(--footer-logo-h);
}
:where(.dt-p-a) footer.custom-footer .footer-left img {
    height: calc(var(--footer-logo-h) * 1.25);
}

/* 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;
    }
}

/* Header fit (2026-10-12). Since the active section's button comes first (site.css, class is-active) the module pages
   carry the Driving Test button too: five buttons, as the province menu pages. Between the burger breakpoint and
   1339px the header uses tightened sizes (as the Driving Schools province pages' compact header) so the title stays
   on one line, also beside a classic scrollbar; the module pages' phone menu wraps its button row instead of running
   off the screen. */
@media (min-width: 1151px) and (max-width: 1339px) {
    header .nav-content {
        gap: 16px;
    }
    header .nav-links {
        gap: 16px;
    }
    header .nav-links a {
        font-size: 13px;
        letter-spacing: 0.6px;
    }
    header .button-group {
        gap: 8px;
    }
    header .nav-btn {
        padding: 9px 14px;
        font-size: 12.5px;
    }
}
@media (max-width: 1150px) {
    :where(.dt-module) header .button-group {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
    }
}

/* Driving Test province pages: the section's round badge above the heading, shown whole (2026-10-14) */
:where(.dt-province) .hero-text .dt-badge {
    display: block;
    width: clamp(120px, 18vw, 170px);
    height: auto;
    margin: 0 0 18px;
    border-radius: 50%;
    box-shadow: 0 10px 28px rgba(0, 51, 102, .18);
}

/* Page width on a computer (2026-10-14): the header bar uses the site.css --page-max (1440px, as wide as
   gumtree.co.za), like the other page families. */
:where(.dt-m-a, .dt-m-b, .dt-m-c, .dt-m-d, .dt-m-e, .dt-p-a, .dt-p-b) nav { max-width: var(--page-max, 1440px); }