/* EDIT THE SOURCE: _build/static/assets/css/site.css, then run npm run build (in _build/). The copy in
   Website/assets/css/ is overwritten by every build.

   2drive.co.za: the shared look, loaded on every page before the page family's own stylesheet (generated sections
   and PHP app pages: before hub.css; hand-built pages: before drivers-test.css, driving-schools.css or theme.css).
   Browsers revalidate it on every visit (Website/.htaccess, Cache-Control: no-cache), so an uploaded edit shows at once.

   Restyle the whole site by editing ONE token in :root below:
     menu buttons     --menu-bg, --menu-bg-hover, --menu-text
     button corners   --btn-radius (every text button: menu buttons, pills, form buttons, module and pagination
                      buttons, drop-down items)
     header           --header-bg (the bar and its drop-down / phone menus), --header-link, --header-link-hover,
                      --header-title, --header-icon, --header-line
     footer           --footer-bg, --footer-line, --footer-text, --footer-heading, --footer-email, ...
     fonts            --font-body (hand-built pages), --font-body-hub (generated sections)
   The family stylesheets (drivers-test.css, driving-schools.css, theme.css, hub.css) read these tokens for every
   header/footer colour, background and font; sizes, spacing and layout stay with each family. Where the families
   had different colours for one role there is a second token next to the first (e.g. --header-link-dt): set both
   to unify them. Not tokens: shadows, hover/current tints (social icons, the province list), the Driving Schools
   social icon colour (#333), the outer footer line and text of the Drivers Test province menu pages.

   Every rule is scoped by a class or id, so this file is safe on any page. Page-family stylesheets must not
   re-declare the menu buttons' colours or a literal button border-radius, or they win over this file. */

:root {
    /* palette (same values as theme.css / hub.css) */
    --bg-main: #f4f7fb;
    --text-main: #222222;
    --text-muted: #5b6b7f;
    --navy: #003366;
    --sky: #26a8d1;
    --brand-green: #22c55e;
    --brand-blue: #3b82f6;
    --brand-gradient: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
    /* fonts */
    --font-body: 'Poppins', sans-serif;                                            /* hand-built pages */
    --font-body-hub: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; /* generated sections */
    --font-display: 'Bungee', cursive;   /* footer headings of the Drivers Test province menu pages */
    /* buttons */
    --btn-radius: 8px;
    --menu-bg: #111111;
    --menu-bg-hover: #2a2a2a;
    --menu-text: #ffffff;
    /* header: the bar, its drop-down phone menus (Drivers Test, front pages, generated sections), the province list */
    --header-bg: #ffffff;
    --header-line: #eeeeee;          /* between the bar and its drop-down phone menu */
    --header-title: #111111;         /* the province title (Drivers Test, Driving Schools) */
    --header-link: #111111;          /* HOME, CONTACT US, ... */
    --header-link-hover: #2563eb;    /* front pages, generated sections */
    --header-link-dt: #000000;       /* Drivers Test module pages: their links and menu icon were always pure black */
    --header-icon: #111111;          /* hamburger and close icons */
    --phone-menu-dark-bg: #0c0e13;   /* Driving Schools: the dark slide-in phone menu */
    --phone-menu-dark-text: #f4f4f5;
    /* footer */
    --footer-bg: #ffffff;
    --footer-line: #eeeeee;
    --footer-heading: #111111;
    --footer-heading-dt: #0f172a;    /* Drivers Test province menu pages */
    --footer-text: #5b6b7f;          /* front pages, generated sections */
    --footer-text-light: #94a3b8;    /* Drivers Test, Driving Schools */
    --footer-link-hover: #2563eb;
    --footer-email: #16a34a;
    --footer-email-hover: #15803d;
    --footer-social-bg: #f1f5f9;
    --footer-social-icon: #1e293b;
    /* back to top */
    --back-to-top-bg: #111111;
    --back-to-top-bg-dt: #000000;    /* Drivers Test, Driving Schools */
    --back-to-top-icon: #ffffff;
}

/* ---------- Header menu buttons: black, white bold text, square corners ----------
   generated sections (desktop / phone menu) · home, contact, terms, 404 (desktop / phone menu) ·
   Drivers Test and Driving Schools pages. Size and spacing stay with each page family. */
.md-nav-pills a,
.md-mobile-menu .md-mm-pills a.md-mm-pill,
.nav-links .btn-pill,
.nav-links .btn-pill-outline,
#mobile-menu .mobile-menu-links a.accent,
.nav-btn {
    background: var(--menu-bg);
    color: var(--menu-text);
    font-weight: 700;
    border-radius: var(--btn-radius);
}
.md-nav-pills a:hover,
.md-mobile-menu .md-mm-pills a.md-mm-pill:hover,
.nav-links .btn-pill:hover,
.nav-links .btn-pill-outline:hover,
#mobile-menu .mobile-menu-links a.accent:hover,
.nav-btn:hover {
    background: var(--menu-bg-hover);
    color: var(--menu-text);
}
/* the buttons that lift on hover (generated sections, front pages) cast a neutral shadow */
.md-nav-pills a:hover,
.nav-links .btn-pill:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/* ---------- Button corners: every button keeps its colours, all share --btn-radius ----------
   generated: .md-btn (all variants), skip link, region/category tabs, filter chips, tags, service links, photo badge;
   hand-built: theme.css pills and buttons, Facebook button, contact/enquiry submit buttons, instructor box buttons,
   Drivers Test / Driving Schools menu buttons.
   Also on --btn-radius, set in their own stylesheets (their rules out-rank or follow this one): the Drivers Test
   module buttons (.module-btn) and pagination (.page-link), the Driving Schools province list
   (.province-dropdown-menu a), the generated drop-down items (.md-dropdown-menu a/button), the app pages' plan
   buttons (.plan-btn span) and the events admin tabs.
   Not buttons, so not here: round icon buttons (back to top, social icons, close/remove crosses), colour dots,
   badges/counts/labels, search boxes and inputs. */
.md-btn,
.md-skip,
.md-area-pill,
.md-chips button,
.md-tag-list a,
.md-service-tags button,
.md-service-list a,
.md-gallery-badge,
.btn-pill,
.btn-pill-outline,
.btn-action,
.btn-fb,
.submit-btn,
.instructor-btn,
.nav-btn {
    border-radius: var(--btn-radius);
}
/* a tag without a link is a pill too; on its own because a browser without :has() drops the whole rule it sits in */
.md-tag-list li:not(:has(a)) {
    border-radius: var(--btn-radius);
}