/* ==========================================================
   HORMUUD UNIVERSITY — GLOBAL BRAND THEME 2026
   Light + Dark mode
   Load this file AFTER page-specific CSS so it can normalize
   older page palettes without rewriting every page.
   ========================================================== */


/* ==========================================================
   01. BRAND TOKENS — LIGHT MODE (DEFAULT)
   ========================================================== */

:root,
html[data-theme="light"] {

    color-scheme: light;

    /* Official HU brand */
    --hu-primary: #148154;
    --hu-primary-dark: #0F6843;
    --hu-primary-soft: #E8F3EE;

    --hu-secondary: #2C85B7;
    --hu-secondary-dark: #236E98;
    --hu-secondary-soft: #EAF4F9;

    /* Adaptive accents used by redesigned pages */
    --hu-green: #148154;
    --hu-green-dark: #0F6843;
    --hu-green-soft: #E8F3EE;

    --hu-blue: #2C85B7;
    --hu-blue-dark: #236E98;
    --hu-blue-soft: #EAF4F9;

    /* Neutral system */
    --hu-background: #F8FAF9;
    --hu-paper: #F8FAF9;
    --hu-surface: #FFFFFF;
    --hu-surface-alt: #F1F5F2;
    --hu-surface-elevated: #FFFFFF;

    --hu-ink: #18201B;
    --hu-text: #202522;
    --hu-text-soft: #606862;
    --hu-soft: #68716B;
    --hu-muted: #8D9690;

    --hu-border: #D9E0DC;
    --hu-line: #D9E0DC;
    --hu-line-strong: #C8D1CB;

    --hu-black: #060606;
    --hu-white: #FFFFFF;

    --hu-focus: #2C85B7;

    --hu-shadow-sm: 0 6px 18px rgba(24, 49, 35, 0.06);
    --hu-shadow-md: 0 16px 42px rgba(24, 49, 35, 0.10);
    --hu-shadow-lg: 0 26px 70px rgba(24, 49, 35, 0.14);

    /* Header / footer */
    --hu-header-bg: #148154;
    --hu-header-text: #FFFFFF;
    --hu-header-hover: rgba(255, 255, 255, 0.12);

    --hu-subnav-bg: #E8F3EE;
    --hu-subnav-text: #0F6843;

    --hu-dropdown-bg: #FFFFFF;
    --hu-dropdown-text: #202522;
    --hu-dropdown-muted: #8A938D;
    --hu-dropdown-hover: #E8F3EE;

    --hu-footer-bg: #2C85B7;
    --hu-footer-text: #FFFFFF;
    --hu-footer-soft: rgba(255, 255, 255, 0.74);
    --hu-footer-line: rgba(255, 255, 255, 0.22);
}


/* ==========================================================
   02. BRAND TOKENS — DARK MODE
   ========================================================== */

html[data-theme="dark"] {

    color-scheme: dark;

    /*
       Keep official HU brand values available,
       but use lighter adaptive accents for dark surfaces.
    */
    --hu-primary: #148154;
    --hu-primary-dark: #0F6843;
    --hu-primary-soft: #183A2C;

    --hu-secondary: #2C85B7;
    --hu-secondary-dark: #236E98;
    --hu-secondary-soft: #173442;

    /* Adaptive page accents */
    --hu-green: #66C59B;
    --hu-green-dark: #86D5B2;
    --hu-green-soft: #183A2C;

    --hu-blue: #72BCE3;
    --hu-blue-dark: #97D1EC;
    --hu-blue-soft: #173442;

    /* Dark neutral system */
    --hu-background: #0E1511;
    --hu-paper: #0E1511;
    --hu-surface: #151E18;
    --hu-surface-alt: #19241D;
    --hu-surface-elevated: #1D2921;

    --hu-ink: #F4F7F5;
    --hu-text: #EDF3EF;
    --hu-text-soft: #A9B5AE;
    --hu-soft: #A1ADA6;
    --hu-muted: #7F8B84;

    --hu-border: #2D3A32;
    --hu-line: #2D3A32;
    --hu-line-strong: #3A493F;

    --hu-black: #060606;
    --hu-white: #FFFFFF;

    --hu-focus: #72BCE3;

    --hu-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.18);
    --hu-shadow-md: 0 16px 42px rgba(0, 0, 0, 0.28);
    --hu-shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.38);

    /* Header / footer */
    --hu-header-bg: #0D1510;
    --hu-header-text: #F4F7F5;
    --hu-header-hover: #1B2A21;

    --hu-subnav-bg: #141E18;
    --hu-subnav-text: #C6D3CB;

    --hu-dropdown-bg: #18221B;
    --hu-dropdown-text: #F1F5F2;
    --hu-dropdown-muted: #7D8981;
    --hu-dropdown-hover: #253129;

    --hu-footer-bg: #0D1510;
    --hu-footer-text: #EDF3EF;
    --hu-footer-soft: #A9B5AE;
    --hu-footer-line: #2D3A32;
}


/* ==========================================================
   03. GLOBAL PAGE FOUNDATION
   ========================================================== */

html,
body {
    background: var(--hu-background) !important;
    color: var(--hu-text) !important;
}

body,
main {
    background-color: var(--hu-background) !important;
}

main {
    color: var(--hu-text);
}


/*
   Bridge the redesigned HU pages to one shared global palette.
   Most previous pages already use these variables.
*/

main [class*="hu-"] {
    --hu-primary: var(--hu-primary);
    --hu-primary-dark: var(--hu-primary-dark);
    --hu-primary-soft: var(--hu-primary-soft);

    --hu-green: var(--hu-green);
    --hu-green-dark: var(--hu-green-dark);
    --hu-green-soft: var(--hu-green-soft);

    --hu-blue: var(--hu-blue);
    --hu-blue-dark: var(--hu-blue-dark);
    --hu-blue-soft: var(--hu-blue-soft);

    --hu-background: var(--hu-background);
    --hu-paper: var(--hu-paper);
    --hu-surface: var(--hu-surface);

    --hu-ink: var(--hu-ink);
    --hu-text: var(--hu-text);
    --hu-text-soft: var(--hu-text-soft);
    --hu-soft: var(--hu-soft);
    --hu-muted: var(--hu-muted);

    --hu-border: var(--hu-border);
    --hu-line: var(--hu-line);
    --hu-line-strong: var(--hu-line-strong);
}


/* Common surfaces used throughout the public site */

.hu-card,
.hu-panel,
.hu-surface,
.hu-content-panel {
    background-color: var(--hu-surface);
    color: var(--hu-text);
    border-color: var(--hu-border);
}


/* Accessible text selection */

::selection {
    color: #FFFFFF;
    background: #148154;
}

html[data-theme="dark"] ::selection {
    color: #0E1511;
    background: #86D5B2;
}


/* Global focus */

:focus-visible {
    outline: 3px solid var(--hu-focus);
    outline-offset: 3px;
}


/* ==========================================================
   04. GLOBAL HEADER — LIGHT MODE
   ========================================================== */

.hu-global-header {
    color: var(--hu-header-text) !important;
    background: var(--hu-header-bg) !important;
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

.hu-nav-brand,
.hu-nav-brand span {
    color: var(--hu-header-text) !important;
}

.hu-nav-trigger,
.hu-nav-direct {
    color: rgba(255, 255, 255, 0.94) !important;
}

.hu-nav-chevron.material-symbols-outlined {
    color: rgba(255, 255, 255, 0.76) !important;
}

.hu-nav-trigger:hover,
.hu-nav-trigger:focus-visible,
.hu-nav-item.is-open > .hu-nav-trigger,
.hu-nav-direct:hover,
.hu-nav-direct:focus-visible,
.hu-nav-direct.is-current {
    color: #FFFFFF !important;
    background: var(--hu-header-hover) !important;
}


/* Header action buttons */

.hu-nav-portal {
    color: #FFFFFF !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

.hu-nav-portal:hover,
.hu-nav-portal:focus-visible {
    color: #0F6843 !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.hu-nav-apply {
    color: #0F6843 !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

.hu-nav-apply:hover,
.hu-nav-apply:focus-visible {
    color: #FFFFFF !important;
    background: #0F6843 !important;
    border-color: #0F6843 !important;
}


/* ==========================================================
   05. SECONDARY NAVIGATION
   ========================================================== */

.hu-subnav {
    color: var(--hu-subnav-text) !important;
    background: var(--hu-subnav-bg) !important;
    border-bottom-color: var(--hu-border) !important;
}

.hu-subnav-context,
.hu-subnav-context a,
.hu-subnav-utilities a,
.hu-subnav-explore > button {
    color: var(--hu-subnav-text) !important;
}

.hu-subnav-utilities a:hover,
.hu-subnav-utilities a:focus-visible,
.hu-subnav-explore > button:hover,
.hu-subnav-explore > button:focus-visible,
.hu-subnav-explore.is-open > button {
    color: var(--hu-text) !important;
    background: var(--hu-dropdown-hover) !important;
}

.hu-subnav .open-in-new {
    color: var(--hu-blue) !important;
}


/* ==========================================================
   06. MEGA MENUS + UTILITY DROPDOWNS
   ========================================================== */

.hu-mega,
.hu-subnav-menu {
    color: var(--hu-dropdown-text) !important;
    background: var(--hu-dropdown-bg) !important;
    border-color: var(--hu-border) !important;
    box-shadow: var(--hu-shadow-md) !important;
}

.hu-mega-group {
    border-right-color: var(--hu-border) !important;
}

.hu-mega-label {
    color: var(--hu-green-dark) !important;
}

.hu-mega-link,
.hu-subnav-menu a {
    color: var(--hu-dropdown-text) !important;
}

.hu-mega:hover .hu-mega-link,
.hu-subnav-menu:hover a {
    color: var(--hu-dropdown-muted) !important;
}

.hu-mega .hu-mega-link:hover,
.hu-mega .hu-mega-link:focus-visible,
.hu-subnav-menu a:hover,
.hu-subnav-menu a:focus-visible {
    color: var(--hu-dropdown-text) !important;
    background: var(--hu-dropdown-hover) !important;
}

.hu-mega-link.is-current {
    color: var(--hu-green-dark) !important;
    background: var(--hu-green-soft) !important;
}

.hu-mega .open-in-new,
.hu-subnav-menu .open-in-new {
    color: var(--hu-blue) !important;
}


/* ==========================================================
   07. MOBILE NAVIGATION
   ========================================================== */

.hu-mobile-nav {
    color: var(--hu-text) !important;
    background: var(--hu-surface) !important;
    border-left-color: var(--hu-border) !important;
}

.hu-mobile-nav-head,
.hu-mobile-nav-actions {
    background: var(--hu-surface) !important;
    border-color: var(--hu-border) !important;
}

.hu-mobile-brand,
.hu-mobile-brand span {
    color: var(--hu-green-dark) !important;
}

.hu-mobile-close {
    color: var(--hu-text-soft) !important;
}

.hu-mobile-direct,
.hu-mobile-section-trigger,
.hu-mobile-section-panel a {
    color: var(--hu-text) !important;
    border-color: var(--hu-border) !important;
}

.hu-mobile-direct:hover,
.hu-mobile-section-trigger:hover,
.hu-mobile-section-panel a:hover,
.hu-mobile-section-panel a:focus-visible {
    color: var(--hu-green-dark) !important;
}

.hu-mobile-nav .open-in-new {
    color: var(--hu-blue) !important;
}

.hu-mobile-primary {
    color: #FFFFFF !important;
    background: #148154 !important;
    border-color: #148154 !important;
}

.hu-mobile-primary:hover,
.hu-mobile-primary:focus-visible {
    background: #0F6843 !important;
    border-color: #0F6843 !important;
}

.hu-mobile-secondary {
    color: var(--hu-green-dark) !important;
    background: var(--hu-surface) !important;
    border-color: var(--hu-border) !important;
}


/* ==========================================================
   08. THEME TOGGLE
   ========================================================== */

.hu-theme-toggle {
    width: 40px;
    height: 40px;

    display: inline-grid;
    place-items: center;
    flex: none;

    padding: 0;

    color: #FFFFFF;
    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;

    cursor: pointer;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.hu-theme-toggle:hover,
.hu-theme-toggle:focus-visible {
    color: #0F6843;
    background: #FFFFFF;
    border-color: #FFFFFF;

    transform: translateY(-1px);
}

.hu-theme-toggle .material-symbols-outlined {
    font-size: 20px;
    line-height: 1;

    transition:
        transform .34s cubic-bezier(.16, 1, .3, 1),
        opacity .18s ease;
}

.hu-theme-toggle.is-changing .material-symbols-outlined {
    opacity: .3;
    transform: rotate(90deg) scale(.78);
}


/* Dark header toggle */

html[data-theme="dark"] .hu-theme-toggle {
    color: #DCE7E0;
    border-color: #3A493F;
}

html[data-theme="dark"] .hu-theme-toggle:hover,
html[data-theme="dark"] .hu-theme-toggle:focus-visible {
    color: #0E1511;
    background: #86D5B2;
    border-color: #86D5B2;
}


/* Hamburger */

.hu-nav-menu-button {
    color: var(--hu-header-text) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}


/* ==========================================================
   09. FOOTER — HU SECONDARY BLUE / DARK NAV MATCH
   ========================================================== */


/* ----------------------------------------------------------
   MAIN FOOTER
   Light mode: HU secondary blue
   Dark mode: same background as dark navbar
   ---------------------------------------------------------- */

.hu-global-footer {
    color: var(--hu-footer-text) !important;
    background: var(--hu-footer-bg) !important;
    border-top-color: var(--hu-footer-line) !important;
}


/* ----------------------------------------------------------
   BRAND / ADDRESS / COPYRIGHT
   ---------------------------------------------------------- */

.hu-footer-brand,
.hu-footer-brand span {
    color: var(--hu-footer-text) !important;
}

.hu-footer-address,
.hu-footer-copyright span,
.hu-footer-finder-status {
    color: var(--hu-footer-soft) !important;
}

.hu-footer-heading,
.hu-footer-subheading,
.hu-footer-copyright strong {
    color: var(--hu-footer-soft) !important;
}


/* ----------------------------------------------------------
   FOOTER LINKS
   ---------------------------------------------------------- */

.hu-footer-column a,
.hu-footer-contact a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.hu-footer-column:hover a {
    color: rgba(255, 255, 255, 0.60) !important;
}

.hu-footer-column a:hover,
.hu-footer-column a:focus-visible,
.hu-footer-contact a:hover,
.hu-footer-contact a:focus-visible {
    color: #FFFFFF !important;
}


/* ----------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------- */

.hu-footer-rule {
    background: var(--hu-footer-line) !important;
}


/* ==========================================================
   FOOTER FINDER / SEARCH
   ========================================================== */

.hu-footer-finder label {
    color: var(--hu-footer-soft) !important;
}


/* Light mode search surface */

.hu-footer-finder-control {
    background: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
}

.hu-footer-finder-control input {
    color: #202522 !important;
    background: transparent !important;
}

.hu-footer-finder-control input::placeholder {
    color: #7B857E !important;
}


/* Search action */

.hu-footer-finder-control button {
    color: #FFFFFF !important;
    background: #148154 !important;
    border-color: #148154 !important;
}

.hu-footer-finder-control button:hover,
.hu-footer-finder-control button:focus-visible {
    color: #FFFFFF !important;
    background: #0F6843 !important;
    border-color: #0F6843 !important;
}


/* ==========================================================
   FOOTER QUICK LINKS
   Programmes / News / Apply
   ========================================================== */

.hu-footer-quick a {
    color: #0F6843 !important;
    background: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

.hu-footer-quick a:hover,
.hu-footer-quick a:focus-visible {
    color: #FFFFFF !important;
    background: #148154 !important;
    border-color: #148154 !important;
}


/* ==========================================================
   SOCIAL ICONS
   ========================================================== */

.hu-footer-social a {
    color: var(--hu-footer-text) !important;
    background: transparent !important;
    border-color: var(--hu-footer-line) !important;
}

.hu-footer-social a:hover,
.hu-footer-social a:focus-visible {
    color: #2C85B7 !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}


/* ==========================================================
   DARK FOOTER
   Background intentionally matches the dark navbar:
   --hu-header-bg = #0D1510
   ========================================================== */

html[data-theme="dark"] .hu-global-footer {
    color: #EDF3EF !important;
    background: #0D1510 !important;
    border-top-color: #2D3A32 !important;
}


/* Dark brand / labels */

html[data-theme="dark"] .hu-footer-brand,
html[data-theme="dark"] .hu-footer-brand span {
    color: #EDF3EF !important;
}

html[data-theme="dark"] .hu-footer-address,
html[data-theme="dark"] .hu-footer-copyright span,
html[data-theme="dark"] .hu-footer-finder-status,
html[data-theme="dark"] .hu-footer-heading,
html[data-theme="dark"] .hu-footer-subheading,
html[data-theme="dark"] .hu-footer-copyright strong,
html[data-theme="dark"] .hu-footer-finder label {
    color: #A9B5AE !important;
}


/* Dark links */

html[data-theme="dark"] .hu-footer-column a,
html[data-theme="dark"] .hu-footer-contact a {
    color: #EDF3EF !important;
}

html[data-theme="dark"] .hu-footer-column:hover a {
    color: #7F8B84 !important;
}

html[data-theme="dark"] .hu-footer-column a:hover,
html[data-theme="dark"] .hu-footer-column a:focus-visible,
html[data-theme="dark"] .hu-footer-contact a:hover,
html[data-theme="dark"] .hu-footer-contact a:focus-visible {
    color: #FFFFFF !important;
}


/* Dark divider */

html[data-theme="dark"] .hu-footer-rule {
    background: #2D3A32 !important;
}


/* Dark search surface */

html[data-theme="dark"] .hu-footer-finder-control {
    background: #151E18 !important;
    border-color: #2D3A32 !important;
}

html[data-theme="dark"] .hu-footer-finder-control input {
    color: #EDF3EF !important;
    background: transparent !important;
}

html[data-theme="dark"] .hu-footer-finder-control input::placeholder {
    color: #7F8B84 !important;
}


/* Dark search action */

html[data-theme="dark"] .hu-footer-finder-control button {
    color: #0E1511 !important;
    background: #66C59B !important;
    border-color: #66C59B !important;
}

html[data-theme="dark"] .hu-footer-finder-control button:hover,
html[data-theme="dark"] .hu-footer-finder-control button:focus-visible {
    color: #0E1511 !important;
    background: #86D5B2 !important;
    border-color: #86D5B2 !important;
}


/* Dark quick links */

html[data-theme="dark"] .hu-footer-quick a {
    color: #EDF3EF !important;
    background: #18241D !important;
    border-color: #3A493F !important;
}

html[data-theme="dark"] .hu-footer-quick a:hover,
html[data-theme="dark"] .hu-footer-quick a:focus-visible {
    color: #0E1511 !important;
    background: #66C59B !important;
    border-color: #66C59B !important;
}


/* Dark social icons */

html[data-theme="dark"] .hu-footer-social a {
    color: #A9B5AE !important;
    background: transparent !important;
    border-color: #2D3A32 !important;
}

html[data-theme="dark"] .hu-footer-social a:hover,
html[data-theme="dark"] .hu-footer-social a:focus-visible {
    color: #0D1510 !important;
    background: #EDF3EF !important;
    border-color: #EDF3EF !important;
}


/* ==========================================================
   10. DARK MODE — HEADER / NAV SPECIALIZATION
   ========================================================== */

html[data-theme="dark"] .hu-global-header {
    background: var(--hu-header-bg) !important;
    border-bottom-color: var(--hu-border) !important;
}

html[data-theme="dark"] .hu-nav-brand,
html[data-theme="dark"] .hu-nav-brand span,
html[data-theme="dark"] .hu-nav-trigger,
html[data-theme="dark"] .hu-nav-direct {
    color: var(--hu-header-text) !important;
}

html[data-theme="dark"] .hu-nav-trigger:hover,
html[data-theme="dark"] .hu-nav-trigger:focus-visible,
html[data-theme="dark"] .hu-nav-item.is-open > .hu-nav-trigger,
html[data-theme="dark"] .hu-nav-direct:hover,
html[data-theme="dark"] .hu-nav-direct:focus-visible,
html[data-theme="dark"] .hu-nav-direct.is-current {
    color: #FFFFFF !important;
    background: var(--hu-header-hover) !important;
}

html[data-theme="dark"] .hu-nav-portal {
    color: #E8F0EB !important;
    background: transparent !important;
    border-color: #3A493F !important;
}

html[data-theme="dark"] .hu-nav-portal:hover,
html[data-theme="dark"] .hu-nav-portal:focus-visible {
    color: #0E1511 !important;
    background: #86D5B2 !important;
    border-color: #86D5B2 !important;
}

html[data-theme="dark"] .hu-nav-apply {
    color: #0E1511 !important;
    background: #86D5B2 !important;
    border-color: #86D5B2 !important;
}

html[data-theme="dark"] .hu-nav-apply:hover,
html[data-theme="dark"] .hu-nav-apply:focus-visible {
    color: #FFFFFF !important;
    background: #148154 !important;
    border-color: #148154 !important;
}


/* ==========================================================
   11. COMMON DARK-MODE SURFACE FIXES
   These are intentionally conservative.
   They target frequent public-page patterns without destroying
   custom visualizations.
   ========================================================== */

html[data-theme="dark"] main .bg-white,
html[data-theme="dark"] main .bg-light {
    background-color: var(--hu-surface) !important;
}

html[data-theme="dark"] main .text-dark,
html[data-theme="dark"] main .text-black {
    color: var(--hu-text) !important;
}

html[data-theme="dark"] main .border,
html[data-theme="dark"] main .border-top,
html[data-theme="dark"] main .border-bottom {
    border-color: var(--hu-border) !important;
}

html[data-theme="dark"] main input,
html[data-theme="dark"] main textarea,
html[data-theme="dark"] main select {
    color: var(--hu-text);
    background: var(--hu-surface);
    border-color: var(--hu-border);
}


/* ==========================================================
   12. THEME TRANSITION
   Avoid a universal transition because it makes large pages janky.
   ========================================================== */

body,
main,
.hu-global-header,
.hu-subnav,
.hu-mega,
.hu-subnav-menu,
.hu-mobile-nav,
.hu-global-footer,
.hu-card,
.hu-panel,
.hu-surface,
.hu-content-panel {
    transition:
        background-color .24s ease,
        color .24s ease,
        border-color .24s ease;
}


/* ==========================================================
   13. RESPONSIVE THEME TOGGLE
   ========================================================== */

@media (max-width: 1240px) {

    .hu-theme-toggle {
        width: 40px;
        height: 40px;
    }

}

@media (max-width: 620px) {

    .hu-theme-toggle {
        width: 38px;
        height: 38px;
    }

}


/* ==========================================================
   14. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    body,
    main,
    .hu-global-header,
    .hu-subnav,
    .hu-mega,
    .hu-subnav-menu,
    .hu-mobile-nav,
    .hu-global-footer,
    .hu-theme-toggle,
    .hu-theme-toggle .material-symbols-outlined {
        transition: none !important;
    }

}