/* Garnet Families — Moodle Boost Theme Brand Overrides */

/* ── Top Navigation Bar ─────────────────────────────── */
/*
 * Override Bootstrap 5 CSS custom properties directly on the navbar so every
 * descendant inherits correct values for a dark surface — no per-element
 * whack-a-mole needed. Individual rules below handle the few exceptions.
 */
nav.navbar {
    background-color: #001725 !important;
    border-bottom: 3px solid #8f001a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;

    /* Bootstrap 5 tokens — cascade white onto all children */
    --bs-body-color:            rgba(255, 255, 255, 0.88);
    --bs-body-color-rgb:        255, 255, 255;
    --bs-emphasis-color:        #ffffff;
    --bs-emphasis-color-rgb:    255, 255, 255;
    --bs-secondary-color:       rgba(255, 255, 255, 0.75);
    --bs-link-color:            rgba(255, 255, 255, 0.88);
    --bs-link-color-rgb:        255, 255, 255;
    --bs-link-hover-color:      #FEF8E6;
    --bs-link-hover-color-rgb:  254, 248, 230;
    --bs-navbar-color:          rgba(255, 255, 255, 0.88);
    --bs-navbar-hover-color:    #FEF8E6;
    --bs-navbar-active-color:   #ffffff;
}

/* Site name / logo text */
nav.navbar .navbar-brand,
nav.navbar .navbar-brand:hover,
nav.navbar .navbar-brand:focus {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

/* Nav links */
nav.navbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
}

nav.navbar .nav-link:hover,
nav.navbar .nav-link:focus {
    color: #FEF8E6 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* User avatar initials — light grey bg makes white text invisible; use garnet */
nav.navbar .userinitials {
    background-color: #8f001a !important;
    color: #ffffff !important;
}

/* Edit mode label and any other form labels / plain text in the navbar */
nav.navbar label,
nav.navbar .editmode-switch-form label,
nav.navbar .editmode-switch-form {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Edit mode toggle / header buttons */
nav.navbar .btn-secondary,
nav.navbar .editmode-switch-form .btn,
nav.navbar .btn.dropdown-toggle,
[data-region="drawer-toggle"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

nav.navbar .btn-secondary:hover,
nav.navbar .editmode-switch-form .btn:hover {
    background-color: rgba(143, 0, 26, 0.4) !important;
    border-color: #8f001a !important;
}

/* Icons */
nav.navbar .icon,
nav.navbar .fa {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Dropdown menus that open FROM the navbar should flip back to light */
nav.navbar .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #ddd5c4 !important;
    --bs-body-color:         #001725;
    --bs-body-color-rgb:     0, 23, 37;
    --bs-emphasis-color:     #001725;
    --bs-link-color:         #001725;
    --bs-link-color-rgb:     0, 23, 37;
}

nav.navbar .dropdown-menu .dropdown-item,
nav.navbar .dropdown-menu .dropdown-item span,
nav.navbar .dropdown-menu a {
    color: #001725 !important;
}

nav.navbar .dropdown-menu .dropdown-item:hover,
nav.navbar .dropdown-menu .dropdown-item:focus {
    background-color: #FEF8E6 !important;
    color: #001725 !important;
}

/* ── Left Sidebar / Drawer ──────────────────────────── */

#nav-drawer {
    background-color: #001725 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#nav-drawer .list-group-item,
#nav-drawer .list-group-item-action {
    background-color: transparent !important;
    color: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

#nav-drawer .list-group-item:hover,
#nav-drawer .list-group-item-action:hover,
#nav-drawer .list-group-item:focus {
    background-color: rgba(143, 0, 26, 0.22) !important;
    color: #ffffff !important;
    border-left: 3px solid #8f001a !important;
}

#nav-drawer .list-group-item.active,
#nav-drawer [aria-current="true"] {
    background-color: rgba(143, 0, 26, 0.3) !important;
    color: #ffffff !important;
    border-left: 3px solid #8f001a !important;
}

#nav-drawer .icon,
#nav-drawer .fa {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Page Header ────────────────────────────────────── */

#page-header,
.activity-header,
.page-context-header {
    background-color: #FEF8E6 !important;
    border-bottom: 1px solid #ddd5c4 !important;
}

.page-header-headings h1,
#page-header h1,
#page-header h2 {
    color: #001725 !important;
    font-weight: 700 !important;
}

/* ── Breadcrumbs ────────────────────────────────────── */

.breadcrumb {
    background-color: transparent !important;
}

.breadcrumb-item a {
    color: #8f001a !important;
    text-decoration: none !important;
}

.breadcrumb-item a:hover {
    color: #6b0013 !important;
    text-decoration: underline !important;
}

.breadcrumb-item.active {
    color: #555 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #999 !important;
}

/* ── Primary & Action Buttons ───────────────────────── */

.btn-primary,
.btn-primary.dropdown-toggle {
    background-color: #8f001a !important;
    border-color: #8f001a !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #6b0013 !important;
    border-color: #6b0013 !important;
    color: #ffffff !important;
}

/* ── Content Links ──────────────────────────────────── */

#page-content a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item),
#region-main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item),
.course-content a:not(.btn):not(.nav-link) {
    color: #8f001a !important;
}

#page-content a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover,
#region-main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
    color: #6b0013 !important;
}

/* ── Tab navigation ─────────────────────────────────── */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #8f001a !important;
    border-bottom: 2px solid #8f001a !important;
    font-weight: 600 !important;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: #001725 !important;
    border-color: transparent transparent #ddd5c4 !important;
}

/* ── Checkboxes, radios, toggles ────────────────────── */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #8f001a !important;
}

/* ── Moodle activity completion / progress ──────────── */

.completion-progressbar,
.progress-bar {
    background-color: #8f001a !important;
}

/* ── Admin / Settings forms ─────────────────────────── */

.admintable .form-check-input:checked {
    background-color: #8f001a !important;
    border-color: #8f001a !important;
}

/* ── Login / Signup Pages ────────────────────────────── */
/* Applies to both /login/index.php and /login/signup.php */

/* Cream background — matches home.php */
body.pagelayout-login,
body.pagelayout-login #page {
    background-color: #FEF8E6 !important;
    background-image: none !important;
}

/* Style .login-container as an ft-card, same max-width as home.php's .ft-main */
body.pagelayout-login .login-container {
    background: #ffffff;
    border: 1px solid #ddd5c4;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0, 23, 37, 0.10);
    width: 100% !important;   /* override Boost's hardcoded 500px */
    max-width: 720px !important;
    margin-left: auto;
    margin-right: auto;
}

/* Page heading — match ft-card__heading */
body.pagelayout-login h1.login-heading {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #001725 !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
}

/* Text inputs — clean border + garnet focus ring */
body.pagelayout-login input[type="text"],
body.pagelayout-login input[type="email"],
body.pagelayout-login input[type="password"] {
    border: 1px solid #ddd5c4 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    box-shadow: none !important;
}

body.pagelayout-login input[type="text"]:focus,
body.pagelayout-login input[type="email"]:focus,
body.pagelayout-login input[type="password"]:focus {
    border-color: #8f001a !important;
    box-shadow: 0 0 0 3px rgba(143, 0, 26, 0.12) !important;
    outline: none !important;
}

/* Login button row — flex so Log in + Cancel sit side by side */
body.pagelayout-login .login-form-submit {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Submit button — matches home.php ft-btn--primary */
body.pagelayout-login .btn-primary {
    border-radius: 9999px !important;
    padding: 14px 30px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(143, 0, 26, 0.28) !important;
    line-height: 1 !important;
}

/* Cancel button — matches home.php ft-btn--secondary (garnet outline pill) */
body.pagelayout-login .btn-secondary {
    background-color: transparent !important;
    color: #8f001a !important;
    border: 2px solid #8f001a !important;
    border-radius: 9999px !important;
    padding: 14px 30px !important;  /* increased from 12px to reach ≥ 44px touch target */
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body.pagelayout-login .btn-secondary:hover,
body.pagelayout-login .btn-secondary:focus {
    background-color: #8f001a !important;
    color: #ffffff !important;
}

/* ── Focus Visible Rings (WCAG 2.4.7) ─────────────────────────── */

body.pagelayout-login .btn:focus-visible,
body.pagelayout-login a:focus-visible {
    outline: 3px solid #8f001a !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px rgba(143, 0, 26, 0.18) !important;
}

/* ── Hide distracting Moodle chrome */
body.pagelayout-login #page-footer,
body.pagelayout-login .login-divider,
body.pagelayout-login .login-instructions,
body.pagelayout-login .login-signup,
body.pagelayout-login #guestlogin,
body.pagelayout-login h2.login-heading,
body.pagelayout-login .loginform > .d-flex,
body.pagelayout-login hr {
    display: none !important;
}

/* ── Forgot-password button row — match login page layout ──────── */

/* Remove the col-md-9 offset so buttons start from the left edge */
#page-login-forgot_password .fitem.femptylabel .felement[data-fieldtype="submit"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
}

/* Side-by-side with gap, vertically centred — same as .login-form-submit */
#page-login-forgot_password .felement[data-fieldtype="submit"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    align-items: center !important;
}