/* =============================================================================
   ADS brand tokens — derived from the live africadigitalsuccess.com Elementor
   kit. Confirm with Lungi when she supplies the formal brand guidelines
   (Schedule C Day 10 deliverable). Until then these are the source of truth.
   =============================================================================
*/
:root {
    /* Brand palette (from live WordPress / Elementor kit) */
    --ads-primary:        #105997;   /* Main navy blue — wordmark, headings */
    --ads-primary-dark:   #003366;   /* Deep navy — depth, contrast */
    --ads-primary-light:  #00AEEF;   /* Bright light blue — highlights */
    --ads-accent:         #FF7D2D;   /* Brand orange — CTAs, warmth, Africa-shape colour */
    --ads-accent-dark:    #E56A1B;   /* Hover state for orange */
    --ads-teal:           #008080;   /* Tertiary — rare use */
    --ads-purple:         #5E3C98;   /* Tertiary — rare use */

    /* Neutrals */
    --ads-bg:             #F2F2F2;   /* Page background */
    --ads-surface:        #FFFFFF;   /* Card / panel background */
    --ads-text:           #333333;   /* Body text */
    --ads-text-muted:     #6E7578;   /* Secondary text, metadata */
    --ads-border:         #E0E0E0;   /* Hairlines, dividers */

    /* Semantic (not in brand palette; derived to harmonise) */
    --ads-success:        #2ECC71;   /* Positive — green */
    --ads-warning:        #F39C12;   /* Attention — amber, harmonises with brand orange */
    --ads-danger:         #E74C3C;   /* Action needed — red */
    --ads-info:           var(--ads-primary-light);

    /* Typography */
    --ads-font-heading:   "Roboto Slab", Georgia, "Times New Roman", serif;
    --ads-font-body:      "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Spacing scale (rem-based, matches Tailwind-ish) */
    --ads-space-1: 0.25rem;
    --ads-space-2: 0.5rem;
    --ads-space-3: 0.75rem;
    --ads-space-4: 1rem;
    --ads-space-5: 1.25rem;
    --ads-space-6: 1.5rem;
    --ads-space-8: 2rem;
    --ads-space-10: 2.5rem;

    /* Radius + shadow */
    --ads-radius-sm:      4px;
    --ads-radius:         8px;
    --ads-radius-lg:      12px;
    --ads-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
    --ads-shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
    --ads-shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.12);
}

/* -----------------------------------------------------------------------------
   Shared admin components — used in admin/dashboard.php and will be reused as
   more admin pages are built (tracks, sessions, bookings, etc.).
   ----------------------------------------------------------------------------- */

.ads-admin-body {
    background: var(--ads-bg);
    color: var(--ads-text);
    font-family: var(--ads-font-body);
}

.ads-admin-body h1,
.ads-admin-body h2,
.ads-admin-body h3,
.ads-admin-body h4 {
    font-family: var(--ads-font-heading);
    color: var(--ads-primary-dark);
    margin: 0;
}

/* Top banner above the content area */
.ads-admin-banner {
    background: var(--ads-surface);
    border-bottom: 1px solid var(--ads-border);
    padding: var(--ads-space-5) var(--ads-space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ads-space-4);
}

.ads-admin-banner h2 { font-size: 1.5rem; }

.ads-banner-meta {
    color: var(--ads-text-muted);
    font-size: 0.9rem;
}

/* Content region */
.ads-admin-content {
    padding: var(--ads-space-8);
    max-width: 1400px;
}

/* Stat card — used in the primary metrics row */
.ads-stat-card {
    background: var(--ads-surface);
    border-radius: var(--ads-radius);
    box-shadow: var(--ads-shadow-sm);
    padding: var(--ads-space-5);
    border-left: 4px solid var(--ads-primary);
    height: 100%;
}

.ads-stat-card.ads-stat-today    { border-left-color: var(--ads-primary); }
.ads-stat-card.ads-stat-month    { border-left-color: var(--ads-primary-light); }
.ads-stat-card.ads-stat-upcoming { border-left-color: var(--ads-accent); }
.ads-stat-card.ads-stat-alerts   { border-left-color: var(--ads-warning); }

.ads-stat-label {
    color: var(--ads-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: var(--ads-space-2);
}

.ads-stat-value {
    font-family: var(--ads-font-heading);
    font-weight: 600;
    font-size: 2rem;
    color: var(--ads-primary-dark);
    line-height: 1.1;
}

.ads-stat-sub {
    color: var(--ads-text-muted);
    font-size: 0.85rem;
    margin-top: var(--ads-space-2);
}

/* Section card — for tables / alerts / quick actions */
.ads-section {
    background: var(--ads-surface);
    border-radius: var(--ads-radius);
    box-shadow: var(--ads-shadow-sm);
    padding: var(--ads-space-6);
    margin-bottom: var(--ads-space-6);
}

.ads-section-title {
    font-size: 1.1rem;
    margin-bottom: var(--ads-space-4);
    padding-bottom: var(--ads-space-3);
    border-bottom: 1px solid var(--ads-border);
}

/* Table styling inside sections */
.ads-table {
    width: 100%;
    border-collapse: collapse;
}
.ads-table th {
    text-align: left;
    padding: var(--ads-space-3) var(--ads-space-2);
    color: var(--ads-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    border-bottom: 1px solid var(--ads-border);
}
.ads-table td {
    padding: var(--ads-space-4) var(--ads-space-2);
    border-bottom: 1px solid var(--ads-border);
    vertical-align: middle;
}
.ads-table tr:last-child td { border-bottom: none; }
.ads-table tr:hover td { background: var(--ads-bg); }

/* Status tag — colour-coded by state */
.ads-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.6;
}
.ads-tag-success { background: rgba(46, 204, 113, 0.15); color: #1e8449; }
.ads-tag-info    { background: rgba(0, 174, 239, 0.15);  color: #0679a8; }
.ads-tag-warning { background: rgba(243, 156, 18, 0.15); color: #935a00; }
.ads-tag-danger  { background: rgba(231, 76, 60, 0.15);  color: #a93226; }
.ads-tag-muted   { background: rgba(110, 117, 120, 0.15); color: #4a4f51; }

/* Alert row in sidebar */
.ads-alert {
    padding: var(--ads-space-3);
    border-radius: var(--ads-radius-sm);
    border-left: 3px solid var(--ads-warning);
    background: rgba(243, 156, 18, 0.08);
    margin-bottom: var(--ads-space-3);
    font-size: 0.9rem;
}
.ads-alert.ads-alert-danger {
    border-left-color: var(--ads-danger);
    background: rgba(231, 76, 60, 0.08);
}
.ads-alert-title {
    font-weight: 600;
    color: var(--ads-primary-dark);
    margin-bottom: var(--ads-space-1);
}
.ads-alert-body {
    color: var(--ads-text);
    font-size: 0.85rem;
}

/* Quick action button */
.ads-btn-primary {
    display: block;
    width: 100%;
    padding: var(--ads-space-3) var(--ads-space-4);
    background: var(--ads-primary);
    color: var(--ads-surface);
    border: none;
    border-radius: var(--ads-radius-sm);
    font-family: var(--ads-font-body);
    font-weight: 500;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    margin-bottom: var(--ads-space-3);
    text-decoration: none;
    transition: background 0.15s ease;
}
.ads-btn-primary:hover { background: var(--ads-primary-dark); color: var(--ads-surface); }
.ads-btn-accent { background: var(--ads-accent); }
.ads-btn-accent:hover { background: var(--ads-accent-dark); }

/* Empty state */
.ads-empty {
    text-align: center;
    padding: var(--ads-space-8);
    color: var(--ads-text-muted);
}

/* -----------------------------------------------------------------------------
   Public-page layout primitives — shared by every marketing-facing page
   (track.php, course-calendar.php, services.php, about-us.php, etc.).
   Pages opt in by setting <body class="ads-public-body">; older legacy
   pages without this class remain untouched (Playfair/Poppins, W3.CSS
   paddings) until we retouch them one by one.
   ----------------------------------------------------------------------------- */

body.ads-public-body {
    font-family: var(--ads-font-body);
    color: var(--ads-text);
    background: var(--ads-surface);
    margin: 0;
}
.ads-public-body h1,
.ads-public-body h2,
.ads-public-body h3,
.ads-public-body h4 {
    font-family: var(--ads-font-heading);
    color: var(--ads-primary-dark);
    margin: 0;
}

/* A .section is a full-width horizontal band containing one block of content.
   Max-width controls line length; consistent vertical padding gives uniform
   rhythm across pages. Pair with .section-alt for the grey-background variant. */
.ads-public-body .section {
    padding: 40px 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.ads-public-body .section h2 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    margin-bottom: var(--ads-space-4);
}
.ads-public-body .section p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ads-text);
    max-width: 780px;
}

/* Grey-tinted section for visual alternation. Use on full-bleed parent so the
   tint spans the viewport width, then nest .section inside if you also want
   the max-width constraint — or apply .section-alt directly on the .section. */
.ads-public-body .section-alt {
    background: var(--ads-bg);
}

/* Closing call-to-action band at the bottom of a public page. Dark navy bg,
   centered heading, orange button. Every customer-facing page ends with this. */
.ads-public-body .final-cta {
    background: var(--ads-primary-dark);
    color: var(--ads-surface);
    padding: 48px 24px;
    text-align: center;
}
.ads-public-body .final-cta h2 {
    color: var(--ads-surface);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.ads-public-body .final-cta p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
    margin: 12px auto var(--ads-space-5);
}

/* Orange primary CTA button, sized for public pages (bigger than admin's
   .ads-btn-primary). Use for any "Enrol now" / "Book" / "Get started" action. */
.ads-public-body .ads-cta {
    display: inline-block;
    background: var(--ads-accent);
    color: var(--ads-surface);
    padding: 14px 36px;
    border-radius: var(--ads-radius-sm);
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background 0.15s ease;
    border: 0;
    cursor: pointer;
}
.ads-public-body .ads-cta:hover { background: var(--ads-accent-dark); }

/* Responsive card grid used for "what's included" / "upcoming sessions" /
   "related tracks" — anywhere 2-4 cards of similar weight line up. */
.ads-public-body .public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ads-space-4);
}

/* -----------------------------------------------------------------------------
   Original customise.css — public site navigation / social icons.
   Kept intact; brand tokens above layer on top.
   ----------------------------------------------------------------------------- */

/* MAIN TOP NAV ALWAYS ON TOP */
.w3-top {
    position: fixed;
    width: 100%;
    z-index: 99999;
}

/* Dropdown buttons inside the top bar: W3.CSS applies padding to both the
   wrapper (.w3-bar-item) and the inner <button class="w3-button">, causing
   dropdown buttons to sit lower than plain <a class="w3-bar-item w3-button">
   links. Zero the inner padding so the wrapper alone positions the text,
   matching the vertical baseline of plain links. */
.w3-bar .w3-dropdown-hover > .w3-button {
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: inherit;
}

/* MOBILE MENU OVERLAY */
#navDemo {
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    z-index: 99998;
    display: none;
}

/* PUSH HERO DOWN SO IT DOESN'T SIT UNDER NAV */
.hero-image { margin-top: 120px; }

/* STICKY FILTER BAR STAYS BELOW MENU */
.sticky-header { top: 130px; z-index: 100; }

/* Social Icons */
#facebook, #instagram, #linkedin { padding: 10px; font-size: 20px; width: 40px; text-align: center; text-decoration: none; margin: 5px 2px; border-radius: 50%; }
.fa-facebook , #facebook  { background: #3B5998; color: white; }
.fa-instagram , #instagram { background: #125688; color: white; }
.fa-linkedin, #linkedin    { background: #007bb5; color: white; }