/*
 * Public frontend styles: layered on top of stock Bootstrap 5.3.
 * Admin uses assets/css/style.css; this file is loaded only by the public templates.
 *
 * Theme: matched to the Business Catalysts main site (Asentus theme,
 * ../theme/css/layout.css + custom.css). The palette below is the single source
 * of truth; Bootstrap's own --bs-* variables are re-pointed at it, so every
 * stock component (buttons, cards, badges, alerts, forms, pagination) inherits
 * the look without needing a rule of its own.
 *
 * Main-site reference values, for anyone changing these later:
 *   accent   #17bed2  (hover #63cbd7)   headings #515769
 *   body     #81848f  muted #a6a7aa     alt band #fafafa
 *   borders  #e8e8e8 / #f0f0f0          font Hind, square corners, flat
 *
 * Light mode reproduces the main site. Dark mode is the same palette on a dark
 * field, so the theme toggle keeps working; the accent is unchanged in both.
 */

/* ══════════════ Shared, theme-independent ══════════════ */
:root {
    /* The main site is square-cornered throughout: .btn-theme, .service and
       .accordion-item all carry no radius. Pills stay round where Bootstrap
       needs them (badges, .rounded-pill). */
    --radius-sm: 0;
    --radius: 0;
    --radius-lg: 0;

    --transition: .3s cubic-bezier(0.7, 1, 0.7, 1);

    --bs-border-radius:    var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-lg);
    --bs-body-font-family: Hind, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 15px;
}

/* Light: the main site's own values. */
[data-bs-theme="light"] {
    --primary: #17bed2;   --primary-hover: #63cbd7;   --primary-light: #e3f7fa;
    --secondary: #17bed2; --secondary-hover: #63cbd7; --secondary-light: #e3f7fa;
    --accent: #17bed2;    --accent-hover: #63cbd7;    --accent-light: #e3f7fa;

    --success: #46b3a0;
    --warning: #e2a55a;
    --error:   #e66262;
    --info:    #17bed2;

    --background:    #ffffff;
    --surface:       #ffffff;
    --surface-alt:   #fafafa;
    --surface-hover: #f4f4f4;

    --heading:    #515769;
    --text:       #515769;
    --text-light: #81848f;
    --text-muted: #a6a7aa;

    --border:       #e8e8e8;
    --border-light: #f0f0f0;

    /* The main site uses no elevation at all. */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --zebra:      #fafafa;
    --row-hover:  rgba(23, 190, 210, .07);
    --code-bg:    #fafafa;
    --code-color: #17bed2;
    --link:       var(--primary);
    --link-hover: var(--primary-hover);
    --footer-bg:  #272c37;
    --footer-text: #cbd3e1;

    --primary-rgb:   23, 190, 210;
    --secondary-rgb: 23, 190, 210;
    --accent-rgb:    23, 190, 210;
    --success-rgb:   70, 179, 160;
    --warning-rgb:   226, 165, 90;
    --error-rgb:     230, 98, 98;
    --info-rgb:      23, 190, 210;
}

/* Dark: the same accent on a dark field. Text tones are the main site's own
   footer colours (#cbd3e1 body, #a6a7aa muted), which is where it already
   renders light-on-dark. */
[data-bs-theme="dark"] {
    --primary: #17bed2;   --primary-hover: #63cbd7;   --primary-light: #8ddbe4;
    --secondary: #17bed2; --secondary-hover: #63cbd7; --secondary-light: #8ddbe4;
    --accent: #17bed2;    --accent-hover: #63cbd7;    --accent-light: #8ddbe4;

    --success: #57c4b1;
    --warning: #e8b673;
    --error:   #ec7b7b;
    --info:    #17bed2;

    --background:    #1b1f27;
    --surface:       #232833;
    --surface-alt:   #2b313d;
    --surface-hover: #343b49;

    --heading:    #ffffff;
    --text:       #cbd3e1;
    --text-light: #a6a7aa;
    --text-muted: #8b8f9c;

    --border:       #333a47;
    --border-light: #3d4553;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --zebra:      rgba(255, 255, 255, .03);
    --row-hover:  rgba(23, 190, 210, .12);
    --code-bg:    #12151b;
    --code-color: #63cbd7;
    --link:       var(--primary);
    --link-hover: var(--primary-hover);
    --footer-bg:  #12151b;
    --footer-text: #cbd3e1;

    --primary-rgb:   23, 190, 210;
    --secondary-rgb: 23, 190, 210;
    --accent-rgb:    23, 190, 210;
    --success-rgb:   87, 196, 177;
    --warning-rgb:   232, 182, 115;
    --error-rgb:     236, 123, 123;
    --info-rgb:      23, 190, 210;
}

/* Re-point Bootstrap's variables at the palette. */
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-primary: var(--primary);   --bs-primary-rgb: var(--primary-rgb);
    --bs-success: var(--success);   --bs-success-rgb: var(--success-rgb);
    --bs-danger:  var(--error);     --bs-danger-rgb:  var(--error-rgb);
    --bs-warning: var(--warning);   --bs-warning-rgb: var(--warning-rgb);
    --bs-info:    var(--info);      --bs-info-rgb:    var(--info-rgb);

    --bs-body-bg:         var(--background);
    --bs-body-color:      var(--text);
    --bs-emphasis-color:  var(--heading);
    --bs-heading-color:   var(--heading);
    --bs-secondary-color: var(--text-muted);
    --bs-secondary-bg:    var(--surface-alt);
    --bs-tertiary-bg:     var(--surface-alt);
    --bs-border-color:    var(--border);

    --bs-link-color:              var(--link);
    --bs-link-hover-color:        var(--link-hover);
    --bs-link-color-rgb:          var(--primary-rgb);
    --bs-code-color:              var(--code-color);

    /* Bootstrap resolves .card / .navbar / .list-group off these. */
    --bs-card-bg:       var(--surface);
    --bs-card-color:    var(--text);
    --bs-card-cap-bg:   var(--surface-alt);
}

/* ══════════════ Base typography ══════════════ */
body {
    background: var(--background);
    font-family: Hind, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Main site: 700 weight, #515769, 1.4 line-height, 0 0 15px margins. */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 15px;
}
h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; }
h4, h5 { font-size: 18px; }

p { margin-bottom: 15px; }

a { transition: color var(--transition); }

/* The main site sets list items a shade darker and heavier than body copy. */
li { font-weight: 500; }

/* ══════════════ Surfaces ══════════════ */
.card, .list-group-item, .navbar, .accordion-item, .offcanvas {
    background-color: var(--surface);
}

/* Flat theme: neutralise Bootstrap's elevation utilities rather than let them
   reintroduce shadows the main site never uses. */
.shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; }

.card {
    transition: border-color var(--transition), background-color var(--transition);
    border-color: var(--border);
}
/* exam.php marks its subject cards `border-top border-primary border-3`, i.e.
   an accent bar across the top. Bootstrap's .border-primary recolours all four
   edges, which reads as a heavy outline, so the other three are put back to the
   neutral border and only the top bar carries the accent.
   !important is required: Bootstrap's own .border-primary carries it. */
.card.border-top.border-primary {
    border-right-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
    border-left-color: var(--border) !important;
}
/* Card links pick up the accent border on hover; no lift, since the main site
   never translates anything on hover. */
a.card:hover {
    background-color: var(--surface-alt) !important;
    border-color: var(--primary);
}
a.card:hover .card-title,
a.card:hover .h6 { color: var(--primary); }

.card-title, .card .h6, .card .h5 { transition: color var(--transition); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-alt); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

code { color: var(--code-color); }
pre {
    background: var(--code-bg);
    border: 1px solid var(--border);
    padding: 1rem;
    overflow-x: auto;
}

/* ══════════════ Buttons ══════════════
   Main site .btn-theme / .btn-theme-sm: square, uppercase, 13px, 600. */
.btn {
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: var(--transition);
}
.btn-sm { font-size: 12px; padding: .4rem .9rem; }

.btn-primary {
    --bs-btn-color: #fff;                     --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);  --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
}
.btn-outline-primary {
    --bs-btn-color: var(--primary);        --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);     --bs-btn-hover-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    border-width: 1px;
}
.btn-outline-secondary {
    --bs-btn-color: var(--text-light);       --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--surface-alt);   --bs-btn-hover-border-color: var(--border);
    --bs-btn-hover-color: var(--primary);
}
.btn-warning {
    --bs-btn-color: #fff;                  --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning); --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warning);     --bs-btn-hover-border-color: var(--warning);
}

/* ══════════════ Forms ══════════════
   Main site .contact-form .form-control: 1px #e8e8e8, no shadow, accent on focus. */
.form-control, .form-select {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    box-shadow: none;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: none;
}
.form-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ══════════════ Alerts ══════════════
   Main site .alert-theme: 3px accent bar on the left over a #fafafa field. */
.alert {
    border: 0;
    border-left: 3px solid var(--primary);
    border-radius: 0;
    background: var(--surface-alt);
    color: var(--text);
    padding: 18px 22px;
}
.alert-success { border-left-color: var(--success); }
.alert-warning { border-left-color: var(--warning); }
.alert-danger  { border-left-color: var(--error); }
.alert-info    { border-left-color: var(--primary); }
.alert p:last-child { margin-bottom: 0; }

/* ══════════════ Badges ══════════════
   Kept as pills: the main site has no badge equivalent, and rounded-pill is
   applied inline in the page markup. */
.badge {
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.text-bg-primary   { background-color: rgba(var(--primary-rgb), .12) !important; color: var(--primary) !important; }
.text-bg-info      { background-color: rgba(var(--info-rgb), .12) !important;    color: var(--info) !important; }
.text-bg-success   { background-color: rgba(var(--success-rgb), .14) !important; color: var(--success) !important; }
.text-bg-warning   { background-color: rgba(var(--warning-rgb), .16) !important; color: var(--warning) !important; }
.text-bg-danger    { background-color: rgba(var(--error-rgb), .14) !important;   color: var(--error) !important; }
.text-bg-secondary { background-color: var(--surface-alt) !important;            color: var(--text-light) !important; }
.text-bg-light     { background-color: var(--surface-alt) !important;            color: var(--text) !important; }

/* ══════════════ Navbar ══════════════
   Main site header: flat white bar, 1px #f0f0f0 bottom rule, uppercase 13px/600
   links, accent on hover. The logo is uppercase, letter-spaced, with a cyan
   full stop after it. */
.navbar {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: var(--surface) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: none;
}
.navbar-brand {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--heading);
    transition: color var(--transition);
}
.navbar-brand::after {
    content: ".";
    color: var(--primary);
}
.navbar-brand:hover { color: var(--primary); }

.navbar .btn-sm { font-size: 12px; }

.navbar-toggler {
    border: 0;
    border-radius: 0;
    padding: .25rem .5rem;
}
.navbar-toggler:focus { box-shadow: none; }

/* ══════════════ Sidebar ══════════════
   Echoes the main site's nav: uppercase, 13px/600, accent on hover. Active gets
   a 2px accent bar, the flat counterpart of the header's underline marker. */
.app-sidebar .nav-link {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 0;
    border-left: 2px solid transparent;
    padding: .6rem .75rem;
    transition: var(--transition);
}
.app-sidebar .nav-link:hover {
    background-color: var(--surface-alt);
    color: var(--primary);
}
.app-sidebar .nav-link.active {
    background-color: var(--surface-alt);
    border-left-color: var(--primary);
    color: var(--primary);
}
.app-sidebar .sidebar-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--primary);
}
.offcanvas-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--heading);
}

@media (min-width: 768px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        background-color: var(--surface-alt);
        border-right: 1px solid var(--border-light);
        overflow-y: auto;
    }
}

/* ══════════════ Breadcrumb ══════════════ */
.breadcrumb {
    font-size: 13px;
    margin-bottom: 1.5rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.breadcrumb-item a { color: var(--text-light); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--primary); }
.breadcrumb-item.active { color: var(--text-muted); }

/* ══════════════ Footer ══════════════
   Main site footer: dark photographic field, white headings, #cbd3e1 text,
   accent links. The image is the main site's own; if the blog is ever deployed
   away from that docroot the background-color carries it. */
footer.border-top {
    background-color: var(--footer-bg);
    background-image: url(../../../theme/img/1920x1080/03.jpg);
    background-size: cover;
    background-position: center center;
    border-top: 0 !important;
    color: var(--footer-text);
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    margin-top: 3rem !important;
}
footer.border-top .text-secondary { color: var(--footer-text) !important; }
footer.border-top a.link-secondary {
    color: var(--footer-text) !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
footer.border-top a.link-secondary:hover { color: var(--primary) !important; }

/* ══════════════ List groups ══════════════ */
.list-group-item {
    border-color: var(--border-light);
    border-radius: 0 !important;
    color: var(--text);
}
.list-group-item-action:hover {
    background-color: var(--surface-alt);
    color: var(--primary);
}

/* ══════════════ Math rendering ══════════════ */
/* Inline math flows with the text: no box and no inner scrollbar. */
.math-render { max-width: 100%; }
span.math-render { display: inline; }
/* Only block/display math can be wide enough to need horizontal scroll. */
div.math-render { display: block; margin: .5rem 0; overflow-x: auto; }

/* Markdown blocks produced by prepareMathText(): keep the first and last
   block flush with the container so a one-paragraph field is not offset. */
.math-render p, .preview-pane p { margin: 0 0 .75rem; }
.math-render ul, .math-render ol,
.preview-pane ul, .preview-pane ol { margin: 0 0 .75rem; padding-left: 1.5rem; }
.math-render li, .preview-pane li { margin-bottom: .25rem; }
.math-render h1, .math-render h2, .math-render h3,
.math-render h4, .math-render h5, .math-render h6,
.preview-pane h1, .preview-pane h2, .preview-pane h3,
.preview-pane h4, .preview-pane h5, .preview-pane h6 {
    margin: 1rem 0 .5rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.math-render > :first-child, .preview-pane > :first-child { margin-top: 0; }
.math-render > :last-child, .preview-pane > :last-child { margin-bottom: 0; }

/* ══════════════ Inline SVG figures ══════════════ */
/* SVG pasted into a question or solution renders as an inline figure. */
.inline-svg { display: inline-block; max-width: 100%; vertical-align: middle; }
.inline-svg svg { max-width: 100%; height: auto; }
.inline-svg-error { display: block; white-space: pre-wrap; word-break: break-all; color: #b91c1c; }

/* ══════════════ Uploaded question / solution figures ══════════════ */
/* Only rendered when a question or solution actually has images. */
.question-figures {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .75rem 0 0;
}
.question-figure { margin: 0; max-width: 100%; overflow-x: auto; }
.question-figure img { cursor: zoom-in; }
.question-figure img.is-zoomed { cursor: zoom-out; max-width: none; }
.question-figures + .math-render { margin-top: .75rem; }
.question-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: .375rem;
    background: #fff;
}

/* ══════════════ Question card difficulty accent ══════════════ */
.question-card { border-left: 4px solid var(--border); }
.question-card.easy   { border-left-color: var(--success); }
.question-card.medium { border-left-color: var(--warning); }
.question-card.hard   { border-left-color: var(--error); }

/* ══════════════ Answer options ══════════════ */
.option-item .option-label { font-weight: 700; min-width: 1.5rem; color: var(--primary); }
.option-item.correct {
    border-color: var(--success) !important;
    background-color: rgba(var(--success-rgb), .1);
}

/* ══════════════ Pagination ══════════════
   renderPagination() emits flat .page-link markup. */
.pagination { flex-wrap: wrap; gap: .25rem; justify-content: center; }
.pagination .page-link {
    border-radius: 0;
    border-color: var(--border);
    background-color: var(--surface);
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.pagination .page-link:hover {
    background-color: var(--surface-alt);
    border-color: var(--primary);
    color: var(--primary);
}
.pagination .page-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.page-ellipsis { display: inline-flex; align-items: center; padding: 0 .4rem; color: var(--text-muted); }

/* ══════════════ Ad container (Google AdSense) ══════════════ */
.ad-container { margin: 2rem 0 .5rem; text-align: center; }
.ad-container .ad-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .35rem;
}
.ad-container .adsbygoogle { display: block; }
.ad-container .ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    border: 1px dashed var(--border);
    background: var(--surface-alt);
    color: var(--text-muted);
    font-size: .8rem;
}

/* ══════════════ Dark-mode toggle icon ══════════════ */
#theme-toggle .icon-sun  { display: none; }
[data-bs-theme="dark"] #theme-toggle .icon-sun  { display: inline; }
[data-bs-theme="dark"] #theme-toggle .icon-moon { display: none; }

/* ══════════════ Account pages & members-only gate ══════════════ */
.auth-page { display: flex; justify-content: center; padding: 1rem 0 2rem; }
.auth-card { width: 100%; max-width: 460px; }
.members-gate { border-style: dashed; }