/* Global FTII colour theme. Loaded last by the shared frontend layout.
   Change --ftii-brand below to recolour the site; all brand roles derive from it.
   Darker action colours keep white labels readable. No Sass rebuild is needed. */
:root {
    --ftii-brand: #289fd7;
    --ftii-primary: var(--ftii-brand);
    /* Relative channels yield #0878b5 from the logo; changing the logo updates it. */
    --ftii-secondary: rgb(from var(--ftii-brand) calc(r * .2) calc(g * .754717) calc(b * .84186));
    --ftii-primary-strong: var(--ftii-secondary);
    --ftii-primary-hover: rgb(from var(--ftii-secondary) r calc(g * .833333) calc(b * .812155));
    --ftii-primary-soft: color-mix(in srgb, var(--ftii-brand) 30%, #fff);
    --ftii-primary-light: color-mix(in srgb, var(--ftii-brand) 12%, #fff);
    --ftii-surface: color-mix(in srgb, var(--ftii-brand) 4%, #fff);
    --ftii-border: color-mix(in srgb, var(--ftii-brand) 22%, #fff);
    --ftii-on-primary: #fff;
    --ftii-blue-key: var(--ftii-secondary);
    --ftii-blue-strong: var(--ftii-primary-strong);
    --ftii-blue-medium: var(--ftii-primary);
    --ftii-blue-soft: var(--ftii-primary-soft);
    --ftii-blue-light: var(--ftii-primary-light);
    --ftii-action: var(--ftii-primary-strong);
    --ftii-action-hover: var(--ftii-primary-hover);
    --ftii-accent: var(--ftii-primary);
    --ftii-accent-soft: var(--ftii-primary-soft);
    --ftii-accent-light: var(--ftii-primary-light);
    --bs-link-color: var(--ftii-action);
    --bs-link-hover-color: var(--ftii-action-hover);
    --bs-blue: var(--ftii-action);
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: var(--ftii-warning);
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: var(--ftii-action);
    --bs-secondary: var(--ftii-blue-key);
    --bs-success: var(--ftii-success);
    --bs-info: var(--ftii-secondary);
    --bs-warning: var(--ftii-warning);
    --bs-danger: var(--ftii-danger);
    --bs-light: var(--ftii-linen);
    --bs-dark: var(--ftii-text);
    --ftii-white: #ffffff;
    --ftii-linen: #ebeaea;
    --ftii-text: #172b36;
    --ftii-black: #000000;
    --ftii-success: #198754;
    --ftii-danger: #b42318;
    --ftii-muted: #52636e;
    --bs-danger-rgb: 180, 35, 24;
    --ftii-warning: #ffc107;
    --bs-body-color: var(--ftii-text);
    --bs-body-color-rgb: 23, 43, 54;
    --bs-body-bg: var(--ftii-white);
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-border-color: var(--ftii-border);
}

.btn-primary {
    --bs-btn-color: var(--ftii-on-primary);
    --bs-btn-bg: var(--ftii-action);
    --bs-btn-border-color: var(--ftii-action);
    --bs-btn-hover-color: var(--ftii-on-primary);
    --bs-btn-hover-bg: var(--ftii-action-hover);
    --bs-btn-hover-border-color: var(--ftii-action-hover);
    --bs-btn-active-color: var(--ftii-on-primary);
    --bs-btn-active-bg: var(--ftii-secondary);
    --bs-btn-active-border-color: var(--ftii-secondary);
    --bs-btn-disabled-color: var(--ftii-on-primary);
    --bs-btn-disabled-bg: var(--ftii-action);
    --bs-btn-disabled-border-color: var(--ftii-action);
}
.bg-primary, .text-bg-primary { background-color: color-mix(in srgb, var(--ftii-action) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important; }
.text-primary { color: color-mix(in srgb, var(--ftii-action) calc(var(--bs-text-opacity, 1) * 100%), transparent) !important; }
.border-primary { border-color: color-mix(in srgb, var(--ftii-action) calc(var(--bs-border-opacity, 1) * 100%), transparent) !important; }
.link-primary { color: var(--ftii-action) !important; }
.link-primary:hover, .link-primary:focus { color: var(--ftii-action-hover) !important; }

.btn-secondary {
    --bs-btn-color: var(--ftii-on-primary);
    --bs-btn-bg: var(--ftii-secondary);
    --bs-btn-border-color: var(--ftii-secondary);
    --bs-btn-hover-color: var(--ftii-on-primary);
    --bs-btn-hover-bg: var(--ftii-action-hover);
    --bs-btn-hover-border-color: var(--ftii-action-hover);
    --bs-btn-active-color: var(--ftii-on-primary);
    --bs-btn-active-bg: var(--ftii-secondary);
    --bs-btn-active-border-color: var(--ftii-secondary);
    --bs-btn-disabled-color: var(--ftii-on-primary);
    --bs-btn-disabled-bg: var(--ftii-secondary);
    --bs-btn-disabled-border-color: var(--ftii-secondary);
}
.bg-secondary, .text-bg-secondary { background-color: color-mix(in srgb, var(--ftii-secondary) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important; }
.text-secondary { color: color-mix(in srgb, var(--ftii-secondary) calc(var(--bs-text-opacity, 1) * 100%), transparent) !important; }
.border-secondary { border-color: color-mix(in srgb, var(--ftii-secondary) calc(var(--bs-border-opacity, 1) * 100%), transparent) !important; }
.link-secondary { color: var(--ftii-secondary) !important; }
.link-secondary:hover, .link-secondary:focus { color: var(--ftii-action-hover) !important; }

.pagination { --bs-pagination-color: var(--ftii-action); --bs-pagination-hover-color: var(--ftii-action-hover); --bs-pagination-focus-color: var(--ftii-action-hover); --bs-pagination-active-bg: var(--ftii-action); --bs-pagination-active-border-color: var(--ftii-action); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--ftii-action); }
.progress { --bs-progress-bar-bg: var(--ftii-action); }
.form-check-input:checked { background-color: var(--ftii-action); border-color: var(--ftii-action); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--ftii-primary); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ftii-brand) 25%, transparent); }
.btn:focus-visible { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--ftii-brand) 35%, transparent); }

.bg-info, .text-bg-info { background-color: color-mix(in srgb, var(--ftii-secondary) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important; }
.text-info { color: color-mix(in srgb, var(--ftii-secondary) calc(var(--bs-text-opacity, 1) * 100%), transparent) !important; }
.border-info { border-color: color-mix(in srgb, var(--ftii-secondary) calc(var(--bs-border-opacity, 1) * 100%), transparent) !important; }

/* Brand navigation uses white labels and controls on the logo blue. */
#site-display .home-header .navigation-section,
#site-display .navigation-portrait .nav-menus-wrapper { background-color: var(--ftii-primary); }
#site-display .home-header .logo-section { background-color: var(--ftii-white); }
#site-display .nav-menu > li > a { color: var(--ftii-on-primary); }
#site-display .nav-menu > li > a .submenu-indicator-chevron { border-color: transparent var(--ftii-on-primary) var(--ftii-on-primary) transparent; }
#site-display .nav-menu > li:hover > a,
#site-display .nav-menu > li.active > a,
#site-display .nav-menu > li.focus > a,
#site-display .nav-menu > li > a:focus-visible { color: var(--ftii-on-primary); background-color: var(--ftii-primary-hover); }
#site-display .nav-menu > li:is(:hover,.active,.focus) > a .submenu-indicator-chevron,
#site-display .nav-menu > li > a:focus-visible .submenu-indicator-chevron { border-color: transparent var(--ftii-on-primary) var(--ftii-on-primary) transparent; }
#site-display .nav-toggle::before { background-color: var(--ftii-on-primary); box-shadow: 0 .5em 0 0 var(--ftii-on-primary), 0 1em 0 0 var(--ftii-on-primary); }
#site-display .home-header .btn-admision { border-color: var(--ftii-secondary); }
#site-display .home-header .btn-admision:hover,
#site-display .home-header .btn-admision:focus-visible { background-color: var(--ftii-primary-hover); border-color: var(--ftii-primary-hover); }
#site-display .home-header .btn-search-icon { background-color: var(--ftii-primary-light); border-color: var(--ftii-primary); }
#site-display .home-header .btn-search-icon:hover { background-color: var(--ftii-primary-soft); }
:root { --bs-dark-rgb: 23, 43, 54; }

/* Keep nested navigation readable in every interaction state. */
#site-display .navigation .nav-dropdown > li > a {
    color: var(--ftii-on-primary);
}
#site-display .navigation .nav-dropdown > li:is(:hover,.focus,.active) > a,
#site-display .navigation .nav-dropdown > li > a:is(:hover,:focus-visible,:active) {
    color: var(--ftii-on-primary);
    background-color: var(--ftii-primary-hover);
}
#site-display .navigation .nav-dropdown .submenu-indicator-chevron {
    border-color: transparent var(--ftii-on-primary) var(--ftii-on-primary) transparent;
}