/* ==========================================================================
   Colour system - DBIM v3.0: Blue colour group + functional palette
   Central tokens + component rules. Loaded after style.css; the legacy theme
   CSS (5.css, style.css, ...) references these variables instead of hex values.
   ========================================================================== */
:root {
    /* Core palette */
    --color-linen: #EBEAEA;          /* image backgrounds, highlighted areas, outlines, boxes */
    --color-white: #FFFFFF;          /* page background, headings/text on dark, emblem on dark */
    --color-earthy-brown: #150202;   /* text on light backgrounds, lines and borders */
    --color-black: #000000;          /* State Emblem on light, important dark text */
    /* Selected primary group: BLUE (key colour = darkest shade) */
    --brand-key: #162F6A;            /* key colour: header/nav, footer background, icons, primary buttons */
    --brand-v1: #214AAB;             /* variant: hover on key colour, active items */
    --brand-v2: #3270D7;             /* variant: accents, borders (large text only with white) */
    --brand-v3: #A3BBF3;             /* variant: dividers, light accents */
    --brand-v4: #D2DFFF;             /* variant: very light highlights */
    --gradient-brand: linear-gradient(90deg, var(--brand-key) 0%, var(--brand-v1) 100%); /* only two variants of the group */

    /* Semantic status */
    --color-success: #198754;        /* Liberty Green */
    --color-warning: #FFC107;        /* Mustard Yellow */
    --color-danger: #DC3545;         /* Coral Red */
    --color-info: #0D6EFD;           /* Blue: information + hyperlinks */

    /* Functional greys */
    --color-grey-01: #C6C6C6;
    --color-grey-02: #8E8E8E;
    --color-grey-03: #606060;

    /* Roles */
    --text-primary: var(--color-earthy-brown);
    --text-strong: var(--color-black);
    --text-secondary: var(--color-grey-03);
    --text-muted: var(--color-grey-02);
    --text-on-dark: var(--color-white);
    --bg-page: var(--color-white);
    --bg-section: var(--color-linen);
    --bg-dark: var(--color-earthy-brown);
    --bg-brand: var(--brand-key);
    --border-default: var(--color-grey-01);
    --border-subtle: var(--color-linen);
    --link: var(--color-info);
    --focus-ring: var(--brand-key);

    /* Bootstrap 5 integration */
    --bs-primary: #162F6A;  --bs-primary-rgb: 22, 47, 106;
    --bs-success: #198754;  --bs-success-rgb: 25, 135, 84;
    --bs-warning: #FFC107;  --bs-warning-rgb: 255, 193, 7;
    --bs-danger: #DC3545;   --bs-danger-rgb: 220, 53, 69;
    --bs-info: #0D6EFD;     --bs-info-rgb: 13, 110, 253;
    --bs-body-color: #150202; --bs-body-bg: #FFFFFF;
    --bs-link-color: #0D6EFD; --bs-link-hover-color: #214AAB;
    --bs-border-color: #C6C6C6; --bs-secondary-color: #606060;
}

/* ---------- Page ---------- */
body { background: var(--bg-page); color: var(--text-primary); }
h1, h2, h3, h4, h5, h6 { color: var(--text-primary); }
.text-muted, small.muted { color: var(--text-secondary) !important; }
hr, .divider { border-color: var(--border-default); }

/* ---------- Links ---------- */
a { color: var(--link); }
a:hover { color: var(--brand-v1); }
#innerContent .mcontent a, .contentPart p a, .contentPart li a, .breadcrumb a, .info-footer a, .connect-info a {
    color: var(--link);text-underline-offset: 2px;
}
#innerContent .mcontent a:hover, .contentPart p a:hover, .breadcrumb a:hover { color: var(--brand-v1); text-decoration-thickness: 2px; }
/* Linen backgrounds: Blue (#0D6EFD) is only 3.7:1 there, so use the darker shade */
.bg-linen a, .info-header a, .gallery-section a { color: var(--brand-v1); text-decoration: underline; }

/* ---------- Focus (always visible; light ring on dark areas) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .9);
}
.mainNavigation a:focus-visible, .footerCont a:focus-visible, .marquees a:focus-visible,
.innerBanner a:focus-visible, .bannerCaption a:focus-visible, #menuPartWrapper a:focus-visible,
.grid-box:focus-visible, .button:focus-visible, .view-all-btn:focus-visible, input[type="submit"]:focus-visible {
    outline-color: var(--color-white);
    box-shadow: 0 0 0 5px var(--brand-key);
}

/* ---------- Top strip, logo area ---------- */
.topStrip { background: var(--color-linen); }
.topStrip, .topStrip a, #accessControl input { color: var(--text-primary); }
.topStrip a:hover { color: var(--brand-key); text-decoration: underline; }
.logoAndSearchRow { background: var(--color-white); }
.logo .logo-text { color: var(--color-black); }
.logo .logo-subtext, .logo .logo-subtext1 { color: var(--text-secondary); }
.social-icons a, .social-icons a i { color: var(--brand-key) !important; } /* DB stores per-platform colours */
.social-icons a:hover, .social-icons a:focus-visible { color: var(--brand-key) !important; outline: 2px solid var(--brand-key); outline-offset: 2px; border-radius: 50%; }

/* ---------- Main navigation ---------- */
.mainNavigation { background: var(--brand-key); }
.mainNavigation #nav > li > a { color: var(--color-white); border-bottom: 3px solid transparent; transition: background-color .15s, color .15s; }
.mainNavigation #nav > li > a:hover, .mainNavigation #nav > li > a:focus-visible,
.mainNavigation #nav > li.hover > a, .mainNavigation #nav > li.focus > a {
    background: var(--color-white); color: var(--brand-key); border-bottom-color: var(--brand-key);
}
.mainNavigation #nav > li.active > a, .mainNavigation #nav > li > a[aria-current], .mainNavigation #nav > li.highlight > a {
    border-bottom-color: var(--color-white); font-weight: 600;
}
/* Submenu and next-level submenu */
#nav ul, #nav ul ul { background: var(--color-white); border: 1px solid var(--border-default); border-top: 3px solid var(--brand-key); box-shadow: 0 4px 10px rgba(21, 2, 2, .15); }
#nav ul li a { background: var(--color-white); color: var(--text-primary); border-bottom: 1px solid var(--color-linen); }
#nav ul li a:hover, #nav ul li a:focus-visible, #nav li ul li > a.selected, #nav ul .highlight > a {
    background: var(--color-linen); color: var(--brand-key); text-decoration: underline; text-underline-offset: 3px;
}
/* Mobile menu */
#menuPartWrapper, .mp-menu, .mobMenuPart { background: var(--brand-key); color: var(--color-white); }
#menuPartWrapper a { color: var(--color-white); border-bottom: 1px solid rgba(255, 255, 255, .25); }
#menuPartWrapper a:hover, #menuPartWrapper a:focus-visible { background: var(--color-white); color: var(--brand-key); }
.menu-trigger, .menu-trigger em { color: var(--color-white); }

/* ---------- Banner / hero / page title ---------- */
.innerBanner { background: var(--brand-key); }
.innerBanner, .innerBanner .container > span, .innerBanner h1 { color: var(--color-white); }
.indexBanner .bannerCaption, .bannerCaption { background: var(--brand-key); color: var(--color-white); }
.bannerCaption a, .bannerCaption .title, .bannerCaption .title span, .bannerCaption .title strong, .bannerCaption i { color: var(--color-white); }
.owl-dots .owl-dot span { background: var(--color-grey-01); }
.owl-dots .owl-dot.active span, .owl-dots .owl-dot:hover span { background: var(--brand-key); }

/* ---------- Ticker ("UPDATES") ---------- */
#marquees, .marquees { background: #DC3545; border-bottom: 0; }
#marquees .mar_up, .mar_up { background: var(--brand-key); color: var(--color-white); }
#marquees a, .marquees a, a.mar, a.mar1 { color: var(--color-white); }
#marquees a:hover { color: var(--color-linen); text-decoration: underline; }

/* ---------- Breadcrumb and left menu ---------- */
.breadcrumb, .breadcrumb li, .breadcrumb span { color: var(--text-primary); background: transparent; }
.rightPart .menuTitle, #innerContent h2 { color: var(--color-earthy-brown); }
.rightPart .menuTitle { border-bottom: 3px solid var(--brand-key); display: block; padding-bottom: 6px; }
#menuLeft a { color: var(--text-primary); }
#menuLeft a:hover, #menuLeft a:focus-visible { color: var(--brand-key); text-decoration: underline; }
#menuLeft a.active, #menuLeft .selected a { color: var(--brand-key); font-weight: 600; }

/* ---------- Cards and panels ---------- */
.info-box, .profile-card, .profiles-card, .profiles-card1, .profiles-cards, .important-link-card, .gallery-item,
.connect-item {
    background: var(--color-white); border: 1px solid var(--border-default); box-shadow: none; border-radius: 4px;
}
.info-box:hover, .important-link-card:hover, .gallery-item:hover, .profile-card:hover {
    box-shadow: 0 2px 8px rgba(21, 2, 2, .18); border-color: var(--brand-key);
}
/* .info-header { background: var(--color-linen); color: var(--color-earthy-brown); border-top: 4px solid var(--brand-key); border-bottom: 1px solid var(--border-default); } */
/* .info-header, .info-header * { color: var(--color-earthy-brown); } */
.important-links-title, .connect-title, .grid-section h2, .profile-name, .connect-info h4 { color: var(--color-earthy-brown); }
.important-link-text span, .gallery-item .album-content a.title, .recordBox a { color: var(--text-primary); }
.recordBox a:hover, .gallery-item a:hover, .important-link-card:hover .important-link-text span { color: var(--brand-key); text-decoration: underline; }
.recordBox span.date, .album-content div, .designation, .date, p.designation { color: var(--text-secondary); }
.profile-section .profiles-card1 a, .info-footer a, .view-all b { color: var(--link); }

/* ---------- Buttons ---------- */
button, .btn, .button, input[type="submit"], input[type="button"], input[type="reset"], .view-all-btn, .tab-btn, .grid-box {
    min-height: 40px; cursor: pointer; border-radius: 4px;
    transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s;
}
/* Primary */
.btn-primary, .button, input[type="submit"], .view-all-btn, .grid-box, .tab-btn.active, button.tab-btn.active {
    background: var(--brand-key); color: var(--color-white); border: 2px solid var(--brand-key);
}
.btn-primary:hover, .button:hover, input[type="submit"]:hover, .view-all-btn:hover, .grid-box:hover, .tab-btn.active:hover {
    background: var(--brand-v1); border-color: var(--brand-v1); color: var(--color-white);
    box-shadow: 0 2px 6px rgba(21, 2, 2, .3);
}
.grid-box p, .grid-box a, .grid-box span { color: inherit; }
.button:active, input[type="submit"]:active, .view-all-btn:active { box-shadow: none; transform: translateY(1px); }
/* Secondary */
.btn-secondary, .btn-outline-primary, input[type="reset"], input[type="button"], .tab-btn {
    background: var(--color-white); color: var(--brand-key); border: 2px solid var(--brand-key);
}
.btn-secondary:hover, .btn-outline-primary:hover, input[type="reset"]:hover, input[type="button"]:hover, .tab-btn:hover {
    background: var(--color-linen); color: var(--brand-v1); border-color: var(--brand-v1);
}
/* Status buttons */
.btn-success { background: var(--color-success); border-color: var(--color-success); color: var(--color-white); }
.btn-success:hover { box-shadow: inset 0 0 0 2px var(--color-white), 0 0 0 2px var(--color-success); color: var(--color-white); }
.btn-warning { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-earthy-brown); }
.btn-warning:hover { box-shadow: inset 0 0 0 2px var(--color-earthy-brown); color: var(--color-earthy-brown); }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-white); }
.btn-danger:hover { box-shadow: inset 0 0 0 2px var(--color-white), 0 0 0 2px var(--color-danger); color: var(--color-white); }
.btn-info { background: var(--color-info); border-color: var(--color-info); color: var(--color-white); }
.btn-info:hover { box-shadow: inset 0 0 0 2px var(--color-white), 0 0 0 2px var(--color-info); color: var(--color-white); }
/* Disabled */
button[disabled], .btn.disabled, input[disabled][type="submit"], input[disabled][type="button"], .button[disabled], .button.disabled {
    background: var(--color-linen) !important; color: var(--color-grey-03) !important; border-color: var(--color-grey-01) !important;
    cursor: not-allowed; box-shadow: none; transform: none;
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"],
input[type="date"], input[type="url"], select, textarea, .textBox {
    background: var(--color-white); border: 1px solid var(--color-grey-01); color: var(--text-primary); border-radius: 4px;
}
::placeholder { color: var(--color-grey-03); opacity: 1; }
input:focus, select:focus, textarea:focus, .textBox:focus { border-color: var(--brand-key); outline: 3px solid var(--brand-key); outline-offset: 0; }
input:disabled, select:disabled, textarea:disabled { background: var(--color-linen); color: var(--color-grey-03); border-color: var(--color-grey-01); cursor: not-allowed; }
.is-invalid, input.error, select.error, textarea.error, .has-error input, .has-error select, .has-error textarea { border: 2px solid var(--color-danger) !important; }
.is-valid, input.valid, select.valid, textarea.valid { border: 2px solid var(--color-success) !important; }
.text-danger, .error, .invalid-feedback, span.error, span.red { color: var(--color-danger) !important; font-weight: 600; }
.valid-feedback, .text-success { color: var(--color-success) !important; font-weight: 600; }
/* Messages always carry an icon + text, never colour alone */
.invalid-feedback::before, span.error::before, .text-danger[role="alert"]::before, span.red:not(:empty)::before { content: "\26A0\00a0"; }
.fLabel span.red::before, label span.red::before { content: none; }
.valid-feedback::before, .text-success[role="status"]::before { content: "\2714\00a0"; }

/* ---------- Alerts / status ---------- */
.alert { padding: 12px 16px; border: 1px solid var(--border-default); border-left-width: 6px; border-radius: 4px; background: var(--color-white); color: var(--text-primary); }
.alert::before { font-weight: 700; margin-right: 8px; }
.alert-success { border-color: var(--color-success); }
.alert-success::before { content: "\2714  Success:"; color: var(--color-success); }
.alert-warning { border-color: var(--color-warning); }
.alert-warning::before { content: "\26A0  Warning:"; color: var(--color-earthy-brown); background: var(--color-warning); padding: 0 6px; border-radius: 3px; }
.alert-danger, .alert-error { border-color: var(--color-danger); }
.alert-danger::before, .alert-error::before { content: "\2716  Error:"; color: var(--color-danger); }
.alert-info { border-color: var(--color-info); }
.alert-info::before { content: "\2139  Information:"; color: var(--brand-v1); }
.badge-success, .bg-success { background: var(--color-success); color: var(--color-white); }
.badge-warning, .bg-warning { background: var(--color-warning); color: var(--color-earthy-brown); }
.badge-danger, .bg-danger { background: var(--color-danger); color: var(--color-white); }
.badge-info, .bg-info { background: var(--color-info); color: var(--color-white); }

/* ---------- Tables ---------- */
table th, .table thead th, .web th { background: var(--color-linen); color: var(--color-earthy-brown); border-bottom: 2px solid var(--brand-key); }
table td, table th { border-color: var(--border-default); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--color-linen); }

/* ---------- Pagination ---------- */
.pagination a, .pagination li a { color: var(--brand-key); border: 1px solid var(--border-default); background: var(--color-white); }
.pagination .active a, .pagination .active span, .pagination a:hover { background: var(--brand-key); border-color: var(--brand-key); color: var(--color-white); }

/* ---------- Footer: dark section ---------- */
.footerCont { background: var(--brand-key); color: var(--color-white); }
.footerCont p, .footerCont span, .footerCont strong, .footerLineage { color: var(--color-white); }
.footerCont a, .footerLinks li a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }
.footerCont a:hover, .footerLinks li a:hover, .footerCont a:focus-visible { color: var(--brand-v4); text-decoration-thickness: 2px; }
.footerCont hr { border-color: var(--brand-v3); opacity: .6; }
.footerLinksMore { margin-top: 8px; }
.footerSocial { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.footerSocial li { margin: 0; padding: 0; border: 0; }
.footerSocial a {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid var(--color-white); color: var(--color-white); text-decoration: none;
}
.footerSocial a:hover, .footerSocial a:focus-visible { background: var(--color-white); color: var(--brand-key); }
.footerSocial a i { font-size: 18px; line-height: 1; color: inherit; }
.footerLineage { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--brand-v3); font-weight: 600; }

/* ---------- Dropdown widgets / language ---------- */
.goog-te-gadget-simple span, .goog-te-gadget-simple a span { color: var(--text-secondary) !important; }
.goog-te-gadget-simple { border: 1px solid var(--border-default) !important; background: var(--color-white) !important; }
.ui.dropdown .menu > .item:hover, .ui.selection.dropdown .menu > .item:hover { background: var(--color-linen); }
.ui.dropdown .menu > .active.item { background: var(--color-linen); color: var(--brand-key); }

/* The external-link indicator is a small red PNG glyph (not the State Emblem) */
#menuPartWrapper img[src*="ext-link-icon"], .footerCont img[src*="ext-link-icon"] { filter: brightness(0) invert(1); }
#nav img[src*="ext-link-icon"], #innerContent img[src*="ext-link-icon"] { filter: brightness(0) saturate(100%) invert(8%) sepia(94%) saturate(7000%) hue-rotate(247deg) brightness(90%); }

/* "View All" links sit on Linen: use the darker Blue so they keep >= 4.5:1 */
.info-footer a, .info-footer b, .view-all b, .view-all a { color: var(--brand-v1); }

/* Header search: the wrapper already draws the border */
.search-box input[type="text"], .search-box input[type="search"], .search-box input { border: 0; box-shadow: none; outline-offset: 0; background: transparent; }
.search-box:focus-within { border-color: var(--brand-key); box-shadow: 0 0 0 3px var(--brand-key); }
.search-box input:focus { outline: 0; }

/* Reset / cancel buttons are secondary: outlined, never filled with matching text colour */
input.button[type="reset"], input.submitButton[type="reset"], input[type="reset"].button, .submitButton.resetButton, .cancelBtn {
    background: var(--color-white); color: var(--brand-key); border: 2px solid var(--brand-key);
}
input.button[type="reset"]:hover, input.submitButton[type="reset"]:hover, .submitButton.resetButton:hover, .cancelBtn:hover {
    background: var(--color-linen); color: var(--brand-v1); border-color: var(--brand-v1);
}