/* =====================================================================
   mathema-theme.css  —  one shared look for the whole public site
   public_html/css/mathema-theme.css                     1 October 2026

   WHAT THIS IS
   The colours, buttons, cards, form controls and typography from the
   Interest Groups page, written once and loaded by every page outside
   the admin dashboard, so the site reads as one thing instead of three.

   WHAT THIS IS NOT
   It does not move anything. No page gains or loses a sidebar, a column
   or a section. Nothing here sets display, position, float, width or
   margin on a structural element. If this file is deleted, every page
   goes back to exactly the layout it has today — which is also how to
   undo it if anything looks wrong on a page I have not seen.

   HOW IT IS LOADED
   Last in the <head>, after Bootstrap and after Argon, so it wins on
   ordinary rules without needing !important everywhere. The handful of
   !important declarations below are only where a Bootstrap utility
   class (.bg-primary, .text-primary) already carries one, and losing to
   it would leave the page half-themed.

   PATH
   Absolute from the site root, never relative. Three separate bugs this
   week came from a relative asset path being counted from the wrong
   folder, and this file is loaded from pages at four different depths.
   ===================================================================== */

:root {
    /* The palette, taken from the Interest Groups page */
    --mc-teal:        #0e7490;
    --mc-teal-dark:   #155e75;
    --mc-teal-pale:   #e8f4f8;
    --mc-ink:         #344767;   /* body and heading text */
    --mc-muted:       #67748e;   /* secondary text */
    --mc-bg:          #f8f9fa;   /* page background */
    --mc-surface:     #ffffff;   /* cards and panels */
    --mc-border:      #e2e8f0;
    --mc-radius:      12px;
    --mc-radius-sm:   8px;
    --mc-shadow:      0 2px 10px rgba(0, 0, 0, .06);
}

/* ---------------------------------------------------------------------
   1. Type and page background
   Open Sans is what the Interest Groups page uses. Several pages were on
   Poppins and a few on the browser default, which is most of why they
   did not look related.
   --------------------------------------------------------------------- */
body {
    font-family: 'Open Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background-color: var(--mc-bg);
    color: var(--mc-ink);
}

/* Headings INHERIT their colour rather than being given one.
   The first version of this file set every heading to the ink colour,
   and the "Team Registration" heading - which sits on a dark teal bar
   and had been white by inheritance - turned dark teal on dark teal and
   vanished. Enumerating every container with a dark background is a
   losing game on a site this size; inheriting is correct by default and
   lets each page keep whatever colour it already set. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: inherit;
    color: inherit;
    font-weight: 700;
}

/* DELIBERATELY NOT RECOLOURING LINKS.
   A global "a { color: teal }" turned the white "Sign up here" link on
   the dark teal registration bar into teal on teal, and keeping a list
   of every dark container on a site this size is a losing game - the
   same mistake that had just made a heading invisible. Links keep
   whatever colour their page already gives them. The shared look comes
   from the buttons, cards, forms and type below, which is where it is
   actually visible. */

.text-muted, .text-secondary { color: var(--mc-muted) !important; }

/* ---------------------------------------------------------------------
   2. Brand colour
   Bootstrap's "primary" is a blue; Argon's is an indigo. Both are now
   the Mathema teal, so a card header, a badge and a hero band on three
   different pages are finally the same colour.
   --------------------------------------------------------------------- */
.bg-primary,
.bg-gradient-primary { background-color: var(--mc-teal) !important; background-image: none !important; }

.text-primary { color: var(--mc-teal) !important; }
.border-primary { border-color: var(--mc-teal) !important; }
.badge.bg-primary, .badge.bg-info { background-color: var(--mc-teal) !important; }

/* ---------------------------------------------------------------------
   3. Cards and panels
   The white rounded card with a soft shadow and no hard border is the
   single most recognisable thing about the Interest Groups page.
   --------------------------------------------------------------------- */
.card, .panel, .signup-container, .stat-card {
    background-color: var(--mc-surface);
    border: 0;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow);
}

.card-header {
    background-color: transparent;
    border-bottom: 0;
}

/* ---------------------------------------------------------------------
   4. Buttons
   One teal button. Red, green and amber are left exactly as they are —
   a Delete button must not quietly become the same colour as Save.
   --------------------------------------------------------------------- */
.btn {
    border-radius: var(--mc-radius-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.btn-primary, .btn-info, .btn-mathema,
.bg-gradient-primary.btn, .btn.bg-gradient-primary {
    background-color: var(--mc-teal) !important;
    background-image: none !important;
    border-color: var(--mc-teal) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-info:hover, .btn-mathema:hover,
.btn.bg-gradient-primary:hover {
    background-color: var(--mc-teal-dark) !important;
    border-color: var(--mc-teal-dark) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--mc-teal);
    border-color: var(--mc-teal);
}
.btn-outline-primary:hover {
    background-color: var(--mc-teal);
    border-color: var(--mc-teal);
    color: #fff;
}

.btn:focus, .btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(14, 116, 144, .25);
}

/* ---------------------------------------------------------------------
   5. Form controls
   Same corner radius as the buttons and a teal focus ring instead of
   Bootstrap's blue one.
   --------------------------------------------------------------------- */
.form-control, .form-select, textarea, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="date"], input[type="number"] {
    border-radius: var(--mc-radius-sm);
    border-color: var(--mc-border);
    color: var(--mc-ink);
}

.form-control:focus, .form-select:focus, textarea:focus {
    border-color: var(--mc-teal);
    box-shadow: 0 0 0 .2rem rgba(14, 116, 144, .2);
}

.form-check-input:checked {
    background-color: var(--mc-teal);
    border-color: var(--mc-teal);
}

.form-label { font-weight: 600; color: var(--mc-ink); }

/* ---------------------------------------------------------------------
   6. Alerts
   A pale tint, dark readable text and a coloured bar down the left.
   White text on a saturated background is what made the error message
   on Quantum Vault unreadable, and the same pattern was spreading here.
   Nested lists are included because Django-style error lists and
   Bootstrap alerts both put a <ul> inside the box, and the list's own
   colour otherwise wins on specificity.
   --------------------------------------------------------------------- */
.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: var(--mc-radius-sm);
    color: var(--mc-ink);
}
.alert ul, .alert li, .alert p, .alert h4, .alert strong { color: inherit; }

.alert-primary, .alert-info    { background-color: var(--mc-teal-pale); border-left-color: var(--mc-teal);  color: #0b4f63; }
.alert-success                 { background-color: #e7f6ec;             border-left-color: #1a7f45;        color: #14502f; }
.alert-warning                 { background-color: #fdf4e3;             border-left-color: #b8860b;        color: #6b4e07; }
.alert-danger                  { background-color: #fdecea;             border-left-color: #c81e1e;        color: #8a1c1c; }

/* ---------------------------------------------------------------------
   7. Tables
   Left mostly alone on purpose. Only the heading row and the borders
   are touched, because several pages rely on their own column widths.
   --------------------------------------------------------------------- */
.table { color: var(--mc-ink); }
.table > thead th {
    border-bottom: 1px solid var(--mc-border);
    font-weight: 700;
    color: var(--mc-muted);
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .3px;
}
.table > tbody td { border-color: var(--mc-border); }

/* ---------------------------------------------------------------------
   8. Odds and ends that appear on more than one page
   --------------------------------------------------------------------- */
.breadcrumb { background-color: transparent; }
.badge { border-radius: 6px; font-weight: 600; }
hr { border-color: var(--mc-border); opacity: 1; }

/* Print: the certificate and the results pages are documents, not web
   pages. Drop the page background so nothing prints a grey wash. */
@media print {
    body { background: #fff; }
    .card, .panel { box-shadow: none; }
}

/* ---------------------------------------------------------------------
   9. (removed)
   This section used to define .min-height-300 so the decorative band
   behind each page title would have a height. That is what made the band
   paint over the sidebar on the live server. The bands are gone from the
   pages now and the header bar below carries the colour instead, so
   nothing here needs to give them a size or a stacking order.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   10. The page header bar carries its own background
   The breadcrumb and page title on these pages are written as white
   text, on the assumption that the decorative band above is behind
   them. Whether that is true depends on how the sidebar and the main
   content end up positioned - which differs between the two builds of
   the theme on this server, and is exactly how the title ended up white
   on a white page.

   Giving the header bar its own teal background removes the assumption.
   It is an ordinary in-flow element, so there is no stacking to get
   wrong: the white text has teal underneath it on every build, whether
   or not the band behind it lines up.
   --------------------------------------------------------------------- */
.navbar-main {
    background-color: var(--mc-teal) !important;
    border-radius: var(--mc-radius);
}
.navbar-main .breadcrumb-item,
.navbar-main .breadcrumb-item a,
.navbar-main h6,
.navbar-main .nav-link {
    color: #fff !important;
}
.navbar-main .form-control {
    background-color: #fff;
}