/* =====================================================================
   EDUTEE GLOBAL — RETRO-MODERN DESIGN SYSTEM
   One shared stylesheet, loaded from navbar.php (included on every
   public page), that reskins the existing Bootstrap 5 / MDB markup
   already used across the site. It intentionally does NOT introduce
   new colors or fonts — every value below reuses the site's existing
   brand red (#980000), ink (#12151c) and Inter typeface. What changes
   is the *treatment*: soft grey drop-shadows and fully rounded pills
   are replaced with chunky ink borders and hard, offset "retro
   desktop-window" shadows that press in on click.

   Variable names match the ones already used inline across navbar.php,
   footer.php, index.php, etc. so existing var(--brand-primary) references
   keep working and pick up one consistent value everywhere.
   ===================================================================== */

:root {
    --brand-primary: #980000;
    --brand-primary-dark: #780000;
    --brand-dark: #12151c;
    --text-dark: #1a202c;
    --text-light: #ffffff;
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;

    /* Retro-modern system tokens */
    --line: #12151c;
    --line-width: 2.5px;
    --radius-md: 10px;
    --radius-sm: 7px;
    --shadow-ink: 6px 6px 0 var(--line);
    --shadow-ink-sm: 4px 4px 0 var(--line);
    --shadow-red: 6px 6px 0 var(--brand-primary);
    --shadow-red-sm: 4px 4px 0 var(--brand-primary);
}

body {
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Buttons — every button variant already in use across the site
   (.btn-nav-primary/.btn-nav-dark in navbar.php, .btn-brand-primary/
   .btn-brand-outline in hero sections, .btn-footer-cta in footer.php,
   plus plain Bootstrap .btn-primary/.btn-outline-*) gets the same
   chunky-border, hard-shadow, press-on-click treatment.
   --------------------------------------------------------------------- */
.btn,
.btn-nav-primary,
.btn-nav-dark,
.btn-brand-primary,
.btn-brand-outline,
.btn-footer-cta {
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

.btn:not(.btn-link),
.btn-nav-primary,
.btn-nav-dark,
.btn-brand-primary,
.btn-brand-outline,
.btn-footer-cta {
    border: var(--line-width) solid var(--line) !important;
    box-shadow: var(--shadow-ink-sm) !important;
}

.btn:not(.btn-link):hover,
.btn-nav-primary:hover,
.btn-nav-dark:hover,
.btn-brand-primary:hover,
.btn-brand-outline:hover,
.btn-footer-cta:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--line) !important;
}

.btn:not(.btn-link):active,
.btn-nav-primary:active,
.btn-nav-dark:active,
.btn-brand-primary:active,
.btn-brand-outline:active,
.btn-footer-cta:active {
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 var(--line) !important;
}

.btn-primary, .btn-nav-primary, .btn-brand-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-nav-primary:hover, .btn-brand-primary:hover {
    background-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}

.btn-nav-dark {
    background-color: var(--brand-dark) !important;
    color: #fff !important;
}

.btn-outline-primary, .btn-brand-outline {
    background-color: #fff !important;
    color: var(--text-dark) !important;
}
.btn-outline-primary:hover, .btn-brand-outline:hover {
    background-color: #fff !important;
    color: var(--brand-primary) !important;
}

.btn-footer-cta {
    background-color: transparent !important;
    border-color: #fff !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.35) !important;
}
.btn-footer-cta:hover {
    background-color: #fff !important;
    color: var(--brand-primary) !important;
}

/* ---------------------------------------------------------------------
   Cards — this codebase uses Bootstrap's .card in places, but each
   page also invents its own bespoke card class (.service-card,
   .feature-card, .initiative-card, .news-card, etc). List them
   explicitly rather than a blanket [class*="-card"] attribute
   selector, since that would also catch unrelated classes like
   Font Awesome's "fa-credit-card" icon or Bootstrap's ".card-body"
   sub-component. .kpi-card/.stat-card are intentionally excluded —
   they're shared with the bespoke survey-report.php dashboard and
   the homepage's plain stat strip, both of which already read well
   without a border.
   --------------------------------------------------------------------- */
.card, .hover-card, .work-card,
.feature-card, .feature-cardz, .form-card,
.initiative-card, .initiatives-card, .insight-card, .media-card,
.news-card, .quote-card, .side-card, .executive-card {
    border: var(--line-width) solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-ink) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.card:hover:not(.no-hover-lift),
.hover-card:hover, .feature-card:hover, .feature-cardz:hover,
.form-card:hover, .initiative-card:hover, .initiatives-card:hover,
.insight-card:hover, .media-card:hover, .news-card:hover, .quote-card:hover,
.side-card:hover, .executive-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--line) !important;
}

.work-card { border-color: #333 !important; }
.work-card:hover { box-shadow: 8px 8px 0 var(--brand-primary) !important; }

/* .service-card (index.php "Our Core Services", on a deep-red section)
   and .collab-card (index.php "How We Can Work Together", on a dark
   navy section) sit on colored backgrounds, so they get a light
   border + shadow instead of ink, or the chunky border would just
   disappear into the backdrop. */
.service-card, .collab-card {
    border-width: var(--line-width) !important;
    border-style: solid !important;
    border-color: rgba(255,255,255,0.55) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.28) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease !important;
}
.service-card:hover, .collab-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 rgba(0,0,0,0.28) !important;
}

/* ---------------------------------------------------------------------
   Navbar & dropdowns
   --------------------------------------------------------------------- */
.navbar-main {
    background-color: #ffffff !important;
    border-bottom: var(--line-width) solid var(--line) !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
}

.navbar-main .nav-link {
    border-radius: var(--radius-sm) !important;
    border: 2px solid transparent !important;
    padding: 8px 14px !important;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-link.active {
    border-color: var(--line) !important;
    box-shadow: 3px 3px 0 var(--line) !important;
    background-color: #fff;
}

.dropdown-menu {
    border: var(--line-width) solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-ink) !important;
}

.dropdown-item:hover {
    background-color: #fbf3f3 !important;
}

.promo-bar {
    border-bottom: var(--line-width) solid var(--line);
}

/* ---------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------- */
.badge, .badge-brand {
    border: 2px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 3px 3px 0 var(--line) !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------------------
   Forms — inputs, selects, textareas get the same chunky border and
   a hard red focus shadow instead of Bootstrap's default blue glow.
   --------------------------------------------------------------------- */
.form-control, .form-select {
    border: var(--line-width) solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 3px 3px 0 var(--brand-primary) !important;
}

.form-check-input {
    border: 2px solid var(--line) !important;
}
.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--line) !important;
}

/* ---------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------- */
.alert {
    border: var(--line-width) solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-ink-sm) !important;
}

/* ---------------------------------------------------------------------
   Pagination
   --------------------------------------------------------------------- */
.pagination .page-link {
    border: 2px solid var(--line) !important;
    margin: 0 3px;
    border-radius: var(--radius-sm) !important;
    color: var(--text-dark);
}
.pagination .page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--line) !important;
    box-shadow: 3px 3px 0 var(--line);
}

/* ---------------------------------------------------------------------
   Modals
   --------------------------------------------------------------------- */
.modal-content {
    border: var(--line-width) solid var(--line) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 8px 8px 0 var(--line) !important;
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
    border-top: var(--line-width) solid var(--line);
}

.top-social-bar a {
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
}
.top-social-bar a:hover {
    border-color: rgba(255,255,255,0.4);
    transform: none;
}

/* ---------------------------------------------------------------------
   Reusable "window" component — available for any page/section that
   wants the explicit retro-desktop treatment with a title bar.
   --------------------------------------------------------------------- */
.win {
    background: #fff;
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-ink);
}

.win-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: var(--line-width) solid var(--line);
    border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0;
    background: var(--brand-dark);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
}

.win-bar .dot {
    width: 9px;
    height: 9px;
    border: 1.5px solid #fff;
    background: var(--brand-primary);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Motion & accessibility
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .card, .navbar-main .nav-link, .work-card {
        transition: none !important;
    }
}

.form-control:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}