/* ==========================================================================
   Iceland - Osaka (DBIM) header design
   Government header, utility bar, main navigation (desktop dropdowns + mobile
   accordion), language menu, accessibility panel, dark theme for the whole site,
   Google Translate clean-up and accessibility feature classes.

   Load LAST in partials/header.blade.php (after style.css).
   Works with iceland-header-ui.js (same folder pattern: constants.JS_PATH).
   Breakpoints: >= 1024px desktop, <= 1023px tablet/mobile, <= 767px phone.
   ========================================================================== */

/* ---------- 1. Design tokens ----------
   Iceland does not load Osaka's colours.css / typography.css, so the tokens the
   header uses are defined here. Values come from the existing Iceland palette
   (#162e6a navigation, #efefef strip, #eef1f5 submenu, #595656 text) plus the
   Blue group variants used by Osaka's dark theme (#A3BBF3, #D2DFFF). */
:root {
    --brand-key: #162e6a;
    --brand-v1: #24438c;
    --brand-v2: #4a6cb8;
    --brand-v3: #a3bbf3;
    --brand-v4: #e8eefc;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-grey-01: #d0d3da;
    --color-grey-02: #8e8e8e;
    --color-grey-03: #595656;
    --color-linen: #eef1f5;
    --surface-strip: #efefef;
    --bg-page: #ffffff;
    --text-primary: #1f1f1f;
    --text-strong: #162e6a;
    --text-secondary: #595656;

    /* px (not rem): 18.css changes the root size below 1024px */
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-body: 16px;
    --fs-body-small: 14px;
    --fs-small: 12px;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
}
@media (max-width: 767px) {
    :root {
        --fs-h2: 20px;
        --fs-h3: 16px;
        --fs-body: 14px;
        --fs-body-small: 13px;
        --fs-small: 11px;
    }
}

/* ---------- 2. Base ---------- */
/* The flag strip image above the header is not part of the DBIM header */
india-flag { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#header .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Skip link (first tab stop, visible on focus) */
#header .skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 10000;
    background: var(--brand-key); color: var(--color-white) !important;
    padding: 10px 16px; border-radius: 0 0 6px 6px; font-weight: 600; text-decoration: underline;
    transition: top .15s;
}
#header .skip-link:focus { top: 0; outline: 3px solid var(--color-white); box-shadow: 0 0 0 5px var(--brand-key); }

/* Icons: line icons from the sprite (.ic) and solid 64px-grid icons (.ic-solid) */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic--sm { width: 16px; height: 16px; stroke-width: 2.25; }
.ic--lg { width: 32px; height: 32px; stroke-width: 1.5; }
.ic-solid { width: 24px; height: 24px; flex: none; display: block; }

/* ---------- 3. Header shell ---------- */
#header { position: relative; z-index: 50; background: var(--bg-page); float: none; width: 100%; }
#header .gov-header { background: var(--bg-page); }

/* Legacy clearfix/pseudo elements become empty flex items inside the new flex rows */
#header .gov-header__row::before, #header .gov-header__row::after,
#header .gov-tools::before, #header .gov-tools::after,
#header .logo::before, #header .logo::after,
#header .gov-topbar__row::before, #header .gov-topbar__row::after { content: none !important; display: none !important; }

/* ---------- 4. Utility bar (social + Contact / Feedback) ---------- */
#header .gov-topbar {
    background: var(--surface-strip); border-bottom: 1px solid var(--color-grey-01);
    float: none; width: 100%; height: auto; min-height: 0; padding: 0; margin: 0;
}
#header .gov-topbar__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; min-height: 40px; }
#header .gov-social { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; float: none; position: static; }
#header .gov-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0;
    border-radius: 6px; font-size: 18px; line-height: 1; text-decoration: none; transition: background-color .15s;
}
#header .gov-social a:hover, #header .gov-social a:focus-visible { background: var(--brand-v4); }
#header .gov-social a:focus-visible { outline: 3px solid var(--brand-key); outline-offset: 0; }
#header .gov-topbar__links { display: flex; align-items: center; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; float: none; }
#header .gov-topbar__links li { margin: 0; padding: 0; border: 0; background: none; float: none; list-style: none; }
#header .gov-topbar__links a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 4px;
    color: var(--brand-key); font-size: var(--fs-body-small); text-decoration: none; background: none;
}
#header .gov-topbar__links a:hover, #header .gov-topbar__links a:focus-visible { background: var(--brand-v4); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 5. Header row: logo left, tools right ---------- */
#header .gov-header__row {
    display: flex; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: space-between !important;
    gap: 24px; padding: 14px 0; position: relative; float: none; width: auto; height: auto; min-height: 0; text-align: left; background: transparent;
}
@media (min-width: 1024px) { #header .gov-header__row { flex-wrap: nowrap; } }

/* Logo lockup */
#header .logo { display: flex; flex-direction: row !important; align-items: flex-end; justify-content: flex-start !important; gap: 10px; min-width: 0; float: none; width: auto; height: auto; margin: 0; padding: 0; background: none; text-align: left !important; }
#header .logo .logo-img { height: 88px; width: auto; max-width: none; flex: none; object-fit: contain; }
#header .logo .logo-text-wrapper { min-width: 0; margin: 0; padding: 0 0 8px; float: none; width: auto; text-align: left !important; }
#header .logo .logo-text { margin: 0; font-size: var(--fs-h2); font-weight: var(--font-bold); line-height: 1.25; color: var(--text-strong); text-shadow: none; }
#header .logo .logo-subtext { margin: 2px 0 0; font-size: var(--fs-body); font-weight: var(--font-regular); line-height: 1.3; color: var(--text-secondary); text-shadow: none; }
#header .logo .logo-subtext1 { font-size: inherit; color: inherit; }

/* Tools cluster */
#header .gov-tools { display: flex; flex-direction: row !important; align-items: center; gap: 18px; flex: none; position: static; margin: 0; }
#header .tool-sep { width: 1px; height: 38px; background: var(--brand-v3); flex: none; }

#header .tool {
    appearance: none; -webkit-appearance: none; background: transparent; border: 0; margin: 0; padding: 4px 6px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 44px; min-height: 44px; border-radius: 6px; cursor: pointer; box-shadow: none;
    color: var(--brand-key); font: inherit; font-size: var(--fs-body-small); font-weight: var(--font-regular); line-height: 1.2; text-decoration: none;
    transition: background-color .15s, color .15s;
}
#header .tool:hover, #header .tool:focus-visible { background: var(--brand-v4); color: var(--brand-key); }
#header .tool:focus-visible { outline: 3px solid var(--brand-key); outline-offset: 1px; }
#header .tool--icon { width: 48px; height: 48px; padding: 0; border-radius: 8px; }
#header .tool--access[aria-expanded="true"] { background: var(--brand-key); color: var(--color-white); }
#header .tool--search-toggle, #header .tool--navtoggle { display: none; }

/* Theme toggle: show the icon of the mode you would switch to */
#header .tool--icon .ic--sun { display: none; }
html[data-theme="dark"] #header .tool--icon .ic--sun { display: block; }
html[data-theme="dark"] #header .tool--icon .ic--moon { display: none; }

/* Menu toggle: hamburger / close */
#header .tool--navtoggle .ic--close { display: none; }
#header .tool--navtoggle[aria-expanded="true"] .ic--menu { display: none; }
#header .tool--navtoggle[aria-expanded="true"] .ic--close { display: block; }

/* Search */
#header .gov-search { margin: 0; padding: 0; float: none; width: 340px; max-width: 100%; position: static; background: none; border: 0; }
#header .gov-search .search-box {
    display: flex; align-items: center; width: 100%; height: 48px; padding: 0 4px 0 14px; margin: 0; box-sizing: border-box;
    background: var(--color-white); border: 1px solid var(--color-grey-01); border-bottom: 3px solid var(--brand-v1);
    border-radius: 4px; box-shadow: none; float: none; position: static;
}
#header .gov-search .search-box:focus-within { border-color: var(--brand-key); border-bottom-color: var(--brand-key); box-shadow: 0 0 0 3px var(--brand-v3); }
#header .gov-search .search-box input {
    flex: 1; min-width: 0; width: auto; height: 100%; border: 0; background: transparent; box-shadow: none; outline: 0; border-radius: 0;
    color: var(--text-primary); font-size: var(--fs-body); padding: 0; margin: 0;
}
#header .gov-search .search-box input::placeholder { color: var(--text-secondary); opacity: 1; }
#header .gov-search .search-box button {
    flex: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--brand-v1); cursor: pointer; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; min-height: 0; box-shadow: none;
}
#header .gov-search .search-box button:hover, #header .gov-search .search-box button:focus-visible { background: var(--brand-v4); color: var(--brand-key); }

/* Language menu */
#header .lang { position: relative; }
#header .lang__list {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; margin: 0; padding: 6px; list-style: none;
    background: var(--color-white); border: 1px solid var(--color-grey-01); border-top: 3px solid var(--brand-key); border-radius: 6px; box-shadow: 0 6px 18px rgba(21, 2, 2, .2);
}
#header .lang__list[hidden], #header .a11y-panel[hidden], #header .a11y-legacy[hidden] { display: none !important; }
#header .lang__list li { margin: 0; padding: 0; border: 0; background: none; float: none; list-style: none; }
#header .lang__list button {
    width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
    font: inherit; font-size: var(--fs-body); color: var(--text-primary); min-height: 44px;
}
#header .lang__list button:hover, #header .lang__list button:focus-visible { background: var(--brand-v4); color: var(--brand-key); }
#header .lang__list button[aria-checked="true"] { font-weight: var(--font-semibold); box-shadow: inset 4px 0 0 var(--brand-key); }

/* ---------- 6. Accessibility panel ---------- */
#header .a11y-panel {
    position: absolute; right: 0; top: calc(100% - 4px); z-index: 70; width: 440px; max-width: calc(100vw - 24px); box-sizing: border-box;
    background: var(--color-white); color: var(--text-primary); border: 1px solid var(--color-grey-01); border-radius: 10px;
    box-shadow: 0 10px 28px rgba(21, 2, 2, .25); padding: 16px; text-align: left;
}
#header .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#header .a11y-panel__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-body); font-weight: var(--font-semibold); color: var(--text-primary); }
#header .a11y-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#header .a11y-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
    min-height: 92px; padding: 10px 6px; margin: 0; border: 1px solid var(--color-grey-01); border-radius: 8px; background: var(--color-white);
    color: var(--brand-key); cursor: pointer; font: inherit; font-size: var(--fs-small); font-weight: var(--font-semibold); line-height: 1.25; letter-spacing: .02em; text-transform: uppercase;
    transition: background-color .15s, border-color .15s, color .15s;
}
#header .a11y-tile span { color: inherit; }
#header .a11y-tile:hover, #header .a11y-tile:focus-visible { background: var(--brand-v4); border-color: var(--brand-v1); }
#header .a11y-tile:focus-visible { outline: 3px solid var(--brand-key); outline-offset: 1px; }
#header .a11y-tile[aria-pressed="true"] { background: var(--brand-key); border-color: var(--brand-key); color: var(--color-white); }
#header .a11y-tile[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
#header .a11y-status { margin: 10px 0 0; min-height: 1.4em; font-size: var(--fs-body-small); color: var(--text-secondary); }
#header .a11y-panel__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--color-grey-01); }
#header .a11y-link {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: var(--fs-body-small); color: var(--brand-v1); text-decoration: underline; text-underline-offset: 3px; border-radius: 4px;
}
#header .a11y-link:hover { color: var(--brand-key); }

/* ---------- 7. Google Translate: hidden engine, no banner, no tooltips ---------- */
#header .translator-box { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); display: block; }
html body { top: 0 !important; }
body > .skiptranslate, iframe.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }
/* Indic scripts need more line height once Google Translate sets <html lang="hi"> */
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(hi) h4 { line-height: 1.5; }
:lang(hi) p, :lang(hi) li { line-height: 1.7; }

/* ---------- 8. Main navigation: shared ---------- */
#header .mainNavigation { background: var(--brand-key); border: 0; margin: 0; padding: 0; float: none; width: 100%; box-shadow: none; position: relative; z-index: 40; }
/* Items start at the left edge and sit next to each other: no space-between, no gaps,
   no stretched or percentage-width items left over from the legacy theme */
#header #nav {
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start !important; gap: 0 !important;
    margin: 0 !important; padding: 0 !important; list-style: none; width: 100%; max-width: 100%; float: none; background: transparent;
}
#header #nav li { position: relative; float: none; margin: 0; padding: 0; border: 0; background: none; list-style: none; }
/* style.css paints the whole <li> white on hover, which hid the white link text */
#header #nav li:hover { background: none; color: inherit; }
#header #nav > li {
    flex: 0 0 auto; width: auto !important; min-width: 0; max-width: none; display: block !important; float: none !important;
    position: relative !important; margin: 0 !important; padding: 0 !important;
}
#header #nav > li > a {
    display: flex; align-items: center; gap: 6px; height: 100%; width: auto !important; box-sizing: border-box; padding: 14px 14px; margin: 0; border: 0;
    color: var(--color-white); background: transparent; font-size: 15px; font-weight: var(--font-regular); line-height: 1.3; letter-spacing: normal;
    text-align: left; text-decoration: none; white-space: nowrap; transition: background-color .15s;
}
/* Legacy theme pseudo-elements on menu links drew lines through / under the labels */
#header #nav a::before { content: none !important; display: none !important; }
#header #nav > li > a::after, #header #nav ul li:not(.has-sub) > a::after { content: none !important; display: none !important; }
#header #nav > li:hover > a, #header #nav > li.hover > a, #header #nav > li.focus > a, #header #nav > li.is-open > a,
#header #nav > li > a:hover, #header #nav > li > a:focus-visible { background: var(--brand-v1); color: var(--color-white); }
#header #nav > li.is-active > a { background: var(--brand-v1); color: var(--color-white); font-weight: var(--font-semibold); box-shadow: inset 0 -3px 0 var(--color-white); }
#header #nav > li > a:focus-visible { outline: 3px solid var(--color-white); outline-offset: -3px; box-shadow: none; }

#header #nav ul { list-style: none; margin: 0; padding: 4px 0; background: var(--color-white); }
#header #nav ul li { display: block; width: auto; }
#header #nav ul li a {
    display: block; padding: 11px 18px; margin: 0; background: var(--color-white); color: var(--text-primary); border: 0; border-bottom: 1px solid var(--color-linen);
    font-size: var(--fs-body-small); font-weight: var(--font-regular); line-height: 1.4; text-align: left; white-space: normal; text-decoration: none; text-transform: none;
}
#header #nav ul li:last-child > a { border-bottom: 0; }
#header #nav ul li a:hover, #header #nav ul li a:focus-visible, #header #nav ul li.focus > a, #header #nav ul li.hover > a, #header #nav ul li.is-open > a {
    background: var(--brand-v4); color: var(--brand-key); text-decoration: underline; text-underline-offset: 3px;
}
#header #nav ul li a:focus-visible { outline: 3px solid var(--brand-key); outline-offset: -3px; box-shadow: none; }

/* Submenu toggle buttons (added by iceland-header-ui.js; used on mobile only) */
#header .nav-sub-toggle { display: none; }

/* ---------- 9. Main navigation: desktop dropdowns (>= 1024px) ---------- */
@media (min-width: 1024px) {
    /* One row: items never wrap onto a second line on desktop */
    #header #nav { flex-wrap: nowrap; }

    /* Dropdown arrow: small chevron right after the label. Every geometry property is
       reset so a legacy a::after (absolute underline / strike line) cannot leak through. */
    #header #nav > li.has-sub > a::after {
        content: "" !important; display: inline-block !important; position: static !important; top: auto; right: auto; bottom: auto; left: auto;
        width: 6px; height: 6px; margin: -3px 0 0 2px; padding: 0; background: none !important; opacity: 1;
        border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); flex: none; transition: transform .15s;
    }
    #header #nav > li.has-sub:hover > a::after, #header #nav > li.has-sub.hover > a::after,
    #header #nav > li.has-sub:focus-within > a::after { transform: rotate(-135deg); margin-top: 3px; }

    #header #nav ul {
        display: none !important; position: absolute; z-index: 80; min-width: 280px; width: auto;
        border: 1px solid var(--color-grey-01); border-top: 3px solid var(--brand-v2); border-radius: 0 0 6px 6px;
        box-shadow: 0 8px 20px rgba(21, 2, 2, .2);
    }
    #header #nav > li > ul { top: 100%; left: 0; right: auto; }
    #header #nav ul ul { top: -4px; left: 100%; right: auto; }
    /* Last two items open towards the left so they stay on screen */
    #header #nav > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
    #header #nav > li:nth-last-child(-n+2) ul ul { left: auto; right: 100%; }

    #header #nav li:hover > ul, #header #nav li.hover > ul, #header #nav li.focus > ul, #header #nav li:focus-within > ul { display: block !important; }

    /* Items with a next level: arrow on the right */
    #header #nav ul li.has-sub > a { padding-right: 34px; position: relative; }
    #header #nav ul li.has-sub > a::after {
        content: "" !important; display: block !important; position: absolute !important; left: auto !important; right: 16px; top: 50%; bottom: auto;
        width: 7px; height: 7px; margin: -4px 0 0; padding: 0; background: none !important;
        border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg);
    }
    #header #nav > li:nth-last-child(-n+2) ul li.has-sub > a::after { transform: rotate(135deg); }
}

/* Small desktops / landscape tablets (1024-1279) */
@media (min-width: 1024px) and (max-width: 1279px) {
    #header .gov-header__row { gap: 16px; }
    #header .logo { flex: 1 1 auto; min-width: 0; gap: 12px; }
    #header .logo .logo-img { height: 72px; }
    #header .logo .logo-text { font-size: var(--fs-h3); }
    #header .logo .logo-subtext { font-size: var(--fs-body-small); }
    #header .gov-tools { gap: 10px; }
    #header .gov-search { width: 230px; }
    #header .tool-sep { display: none; }
}

/* Compact menu sizing per desktop width, so the whole menu fits on one row */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Narrow desktops: items may shrink and a long label breaks inside its own item,
       so nothing drops to a second menu row */
    #header #nav > li { flex: 0 1 auto; }
    #header #nav > li > a { padding: 10px 7px; font-size: 13px; gap: 4px; white-space: normal; line-height: 1.25; }
}
@media (min-width: 1200px) and (max-width: 1365px) {
    #header #nav > li > a { padding: 13px 10px; font-size: 14px; gap: 5px; }
}
@media (min-width: 1366px) {
    #header #nav > li > a { padding: 14px 14px; font-size: 15px; }
}

/* ---------- 10. Tablet / mobile header + accordion menu (<= 1023px) ---------- */
@media (max-width: 1023px) {
    #header .gov-header__row { gap: 10px 12px; padding: 10px 0; }
    #header .logo { flex: 1 1 0; gap: 10px; }
    #header .logo .logo-img { height: 56px; }
    #header .logo .logo-text { font-size: var(--fs-h3); }
    #header .logo .logo-subtext { font-size: var(--fs-body-small); }
    #header .gov-tools { gap: 4px; margin-left: 0; }
    #header .tool-sep, #header .tool--sitemap { display: none; }
    #header .tool--search-toggle { display: inline-flex; }
    #header .tool--icon { width: 44px; height: 44px; }
    #header .tool--navtoggle { display: inline-flex; background: var(--brand-key); color: var(--color-white); }
    #header .tool--navtoggle:hover, #header .tool--navtoggle:focus-visible { background: var(--brand-v1); color: var(--color-white); }

    #header .gov-search { display: none; order: 3; flex: 1 1 100%; width: 100%; }
    #header .gov-search.is-open { display: block; }

    #header .a11y-panel { top: 100%; right: 0; left: auto; }

    /* The legacy off-canvas trigger is replaced by #navToggle */
    #header #trigger, #header .menu-trigger { display: none !important; }

    /* Menu panel: hidden until #navToggle opens it */
    #header:not(.nav-open) .mainNavigation, #header:not(.nav-open) #nav { display: none !important; }
    #header.nav-open .mainNavigation { display: block !important; }
    #header.nav-open #nav { display: flex !important; }
    #header .mainNavigation { max-height: calc(100vh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

    #header #nav { flex-direction: column; flex-wrap: nowrap; }
    #header #nav li { width: 100% !important; display: block; }
    #header #nav li.has-sub { display: flex !important; flex-wrap: wrap; align-items: stretch; }
    #header #nav li.has-sub > a { flex: 1 1 0; min-width: 0; order: 0; }
    #header #nav li.has-sub > .nav-sub-toggle { order: 1; }
    #header #nav li.has-sub > ul { order: 2; flex: 1 1 100%; }

    #header #nav > li { border-bottom: 1px solid rgba(255, 255, 255, .18); }
    #header #nav > li > a { padding: 14px 16px; white-space: normal; height: auto; }
    #header #nav > li.is-active > a { box-shadow: inset 4px 0 0 var(--color-white); }

    #header .nav-sub-toggle {
        display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; min-height: 48px; margin: 0; padding: 0;
        background: transparent; color: var(--color-white); border: 0; border-left: 1px solid rgba(255, 255, 255, .18); border-radius: 0; cursor: pointer;
    }
    #header .nav-sub-toggle:focus-visible { outline: 3px solid var(--color-white); outline-offset: -3px; }
    #header .nav-sub-toggle .ic { transition: transform .15s; }
    #header #nav li.is-open > .nav-sub-toggle .ic { transform: rotate(180deg); }
    #header #nav ul .nav-sub-toggle { color: var(--brand-key); border-left-color: var(--color-linen); }
    #header #nav ul .nav-sub-toggle:focus-visible { outline-color: var(--brand-key); }

    /* Submenus stack inside the panel and open on tap */
    #header #nav ul {
        position: static !important; left: auto !important; right: auto !important; top: auto !important;
        width: auto !important; min-width: 0; box-shadow: none; border: 0; border-radius: 0; padding: 0; overflow: visible;
    }
    /* Mobile uses the toggle buttons as indicators, so no arrows/lines on the links themselves */
    #header #nav ul li.has-sub > a::after { content: none !important; display: none !important; }
    #header #nav li:not(.is-open) > ul { display: none !important; }
    #header #nav li.is-open > ul { display: block !important; }
    #header #nav ul li a { padding: 12px 16px 12px 28px; }
    #header #nav ul ul li a { padding-left: 44px; background: var(--color-linen); }
    #header #nav ul ul ul li a { padding-left: 60px; }
}
@media (max-width: 767px) {
    #header .gov-topbar__row { justify-content: center; }
    #header .gov-topbar__links { margin: 0; }
    #header .gov-header__row { row-gap: 8px; }
    #header .logo { flex: 1 1 100%; }
    #header .logo .logo-img { height: 48px; }
    #header .gov-tools { flex: 1 1 100%; justify-content: space-between; order: 2; padding-top: 6px; border-top: 1px solid var(--color-linen); }
    #header .gov-search { order: 3; }
    #header .a11y-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: calc(100vh - 80px); overflow-y: auto; }
    #header .a11y-tile { min-height: 84px; }
}
@media (max-width: 380px) {
    #header .logo .logo-text { font-size: var(--fs-body); }
    #header .tool, #header .tool--icon { min-width: 40px; }
    #header .tool--icon { width: 40px; height: 40px; }
    #header .a11y-grid { gap: 6px; }
    #header .a11y-tile { font-size: 10px; letter-spacing: 0; }
}

/* ---------- 11. Accessibility feature classes (set on <html> by iceland-header-ui.js) ---------- */
html { filter: var(--a11y-filter, none); }
html.a11y-invert img, html.a11y-invert video, html.a11y-invert iframe, html.a11y-invert .logo-img { filter: invert(1) hue-rotate(180deg); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; background: var(--brand-v4) !important; color: var(--brand-key) !important; outline: 2px solid var(--brand-v2); outline-offset: 1px; }
html.a11y-noimg img:not(.logo-img) { visibility: hidden; }
html.a11y-noimg .dataSlider, html.a11y-noimg .sliderImg { background-image: none !important; }
html.a11y-cursor, html.a11y-cursor * { cursor: default !important; }

@media (prefers-reduced-motion: reduce) { #header * { transition: none !important; } }

/* ==========================================================================
   12. Dark mode - whole site (html[data-theme="dark"], header toggle, localStorage)
   Palette from Osaka: page #150202, borders #606060, key #162F6A, text #FFFFFF,
   secondary #C6C6C6, links #A3BBF3, focus #D2DFFF.
   Separate from the legacy yellow/green "High Contrast" mode (Dark Contrast tile).
   ========================================================================== */
html[data-theme="dark"] {
    color-scheme: dark;
    --bg-page: #150202;
    --text-primary: #FFFFFF;
    --text-strong: #FFFFFF;
    --text-secondary: #C6C6C6;
}

html[data-theme="dark"] body,
html[data-theme="dark"] #wrapper,
html[data-theme="dark"] .page,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] #header,
html[data-theme="dark"] #header .gov-header,
html[data-theme="dark"] .footer, html[data-theme="dark"] #footer { background: #150202; color: #FFFFFF; }

/* Emblem: the official asset is black, so it is shown white on dark backgrounds */
html[data-theme="dark"] #header .logo .logo-img { filter: invert(1); }

/* Utility bar */
html[data-theme="dark"] #header .gov-topbar { background: #150202; border-bottom-color: #606060; }
html[data-theme="dark"] #header .gov-topbar__links a { color: #A3BBF3; }
html[data-theme="dark"] #header .gov-topbar__links a:hover, html[data-theme="dark"] #header .gov-topbar__links a:focus-visible { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] #header .gov-social a { color: #FFFFFF !important; }
html[data-theme="dark"] #header .gov-social a:hover, html[data-theme="dark"] #header .gov-social a:focus-visible { background: #162F6A; }

/* Text and headings */
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] #innerContent h2, html[data-theme="dark"] .rightPart .menuTitle,
html[data-theme="dark"] .important-links-title, html[data-theme="dark"] .connect-title,
html[data-theme="dark"] .profile-name, html[data-theme="dark"] .connect-info h4,
html[data-theme="dark"] .missionBlock h2, html[data-theme="dark"] .contentHead,
html[data-theme="dark"] .photo-gallery-heading, html[data-theme="dark"] .card h2 { color: #FFFFFF; }
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] span,
html[data-theme="dark"] label, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb li,
html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] .mcontent strong,
html[data-theme="dark"] dt, html[data-theme="dark"] dd, html[data-theme="dark"] figcaption { color: #FFFFFF; }
html[data-theme="dark"] .recordBox span.date, html[data-theme="dark"] .recordBox .date, html[data-theme="dark"] .album-content div,
html[data-theme="dark"] .designation, html[data-theme="dark"] .date, html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .description, html[data-theme="dark"] .card p { color: #C6C6C6 !important; }
html[data-theme="dark"] .name { color: #A3BBF3; }
html[data-theme="dark"] #header .logo .logo-text { color: #FFFFFF; }
html[data-theme="dark"] #header .logo .logo-subtext, html[data-theme="dark"] #header .logo .logo-subtext1 { color: #C6C6C6; }

/* Links */
html[data-theme="dark"] a { color: #A3BBF3; }
html[data-theme="dark"] a:hover { color: #D2DFFF; }
html[data-theme="dark"] #innerContent .mcontent a, html[data-theme="dark"] #innerContent a, html[data-theme="dark"] .contentPart p a,
html[data-theme="dark"] .breadcrumb a, html[data-theme="dark"] .info-footer a, html[data-theme="dark"] .connect-info a,
html[data-theme="dark"] .profile-section .profiles-card1 a, html[data-theme="dark"] .view-all { color: #A3BBF3; }
html[data-theme="dark"] .recordBox a, html[data-theme="dark"] .important-link-text span, html[data-theme="dark"] .gallery-item .album-content a.title,
html[data-theme="dark"] .album-content .title, html[data-theme="dark"] #menuLeft a, html[data-theme="dark"] .ambassadorDetailList li a { color: #FFFFFF; }
html[data-theme="dark"] .recordBox a:hover, html[data-theme="dark"] #menuLeft a:hover, html[data-theme="dark"] .ambassadorDetailList li a:hover { color: #D2DFFF; }
html[data-theme="dark"] .info-footer a, html[data-theme="dark"] .info-footer b, html[data-theme="dark"] .view-all b, html[data-theme="dark"] .view-all a { color: #A3BBF3; }

/* Header controls */
html[data-theme="dark"] #header .tool { color: #FFFFFF; }
html[data-theme="dark"] #header .tool:hover, html[data-theme="dark"] #header .tool:focus-visible { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] #header .tool:focus-visible { outline-color: #D2DFFF; }
html[data-theme="dark"] #header .tool--access, html[data-theme="dark"] #header .tool--navtoggle { background: #162F6A; }
html[data-theme="dark"] #header .tool--access[aria-expanded="true"] { background: #D2DFFF; color: #162F6A; }
html[data-theme="dark"] #header .tool-sep { background: #606060; }
html[data-theme="dark"] #header .gov-search .search-box { background: #150202; border-color: #8E8E8E; border-bottom-color: #A3BBF3; }
html[data-theme="dark"] #header .gov-search .search-box input { color: #FFFFFF; background: transparent; }
html[data-theme="dark"] #header .gov-search .search-box input::placeholder { color: #C6C6C6; }
html[data-theme="dark"] #header .gov-search .search-box button { color: #A3BBF3; }
html[data-theme="dark"] #header .gov-search .search-box button:hover { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] #header .lang__list, html[data-theme="dark"] #header .a11y-panel { background: #150202; border-color: #606060; color: #FFFFFF; }
html[data-theme="dark"] #header .lang__list { border-top-color: #A3BBF3; }
html[data-theme="dark"] #header .lang__list button, html[data-theme="dark"] #header .a11y-panel__head h2 { color: #FFFFFF; }
html[data-theme="dark"] #header .lang__list button:hover, html[data-theme="dark"] #header .lang__list button:focus-visible { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] #header .lang__list button[aria-checked="true"] { box-shadow: inset 4px 0 0 #A3BBF3; }
html[data-theme="dark"] #header .a11y-tile { background: #150202; border-color: #606060; color: #D2DFFF; }
html[data-theme="dark"] #header .a11y-tile:hover, html[data-theme="dark"] #header .a11y-tile:focus-visible { background: #162F6A; border-color: #A3BBF3; }
html[data-theme="dark"] #header .a11y-tile[aria-pressed="true"] { background: #D2DFFF; border-color: #D2DFFF; color: #162F6A; }
html[data-theme="dark"] #header .a11y-status { color: #C6C6C6; }
html[data-theme="dark"] #header .a11y-panel__foot { border-top-color: #606060; }
html[data-theme="dark"] #header .a11y-link { color: #A3BBF3; }
html[data-theme="dark"] #header .skip-link { background: #D2DFFF; color: #162F6A !important; }

/* Navigation: key colour in both modes */
html[data-theme="dark"] #header .mainNavigation { background: #162F6A; border-bottom: 1px solid #606060; }
html[data-theme="dark"] #header #nav ul { background: #150202; border-color: #606060; border-top-color: #A3BBF3; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); }
html[data-theme="dark"] #header #nav ul li a { background: #150202; color: #FFFFFF; border-bottom-color: #606060; }
html[data-theme="dark"] #header #nav ul li a:hover, html[data-theme="dark"] #header #nav ul li a:focus-visible,
html[data-theme="dark"] #header #nav ul li.hover > a, html[data-theme="dark"] #header #nav ul li.focus > a,
html[data-theme="dark"] #header #nav ul li.is-open > a { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] #header #nav ul .nav-sub-toggle { color: #FFFFFF; border-left-color: #606060; }
@media (max-width: 1023px) {
    html[data-theme="dark"] #header #nav ul ul li a { background: #1f0a0a; }
}

/* Panels, cards, forms, tables */
html[data-theme="dark"] .info-box, html[data-theme="dark"] .profile-card, html[data-theme="dark"] .profiles-card, html[data-theme="dark"] .profiles-card1,
html[data-theme="dark"] .profiles-cards, html[data-theme="dark"] .important-link-card, html[data-theme="dark"] .gallery-item,
html[data-theme="dark"] .connect-item, html[data-theme="dark"] .social-container, html[data-theme="dark"] .contentRightBlock,
html[data-theme="dark"] .contentRightBlock_1, html[data-theme="dark"] .contentRightBlock_2, html[data-theme="dark"] .contentRightBlock_3,
html[data-theme="dark"] .card, html[data-theme="dark"] .tab__content, html[data-theme="dark"] .ambassadorBox, html[data-theme="dark"] .service-sec,
html[data-theme="dark"] .notification, html[data-theme="dark"] .emergencybox, html[data-theme="dark"] .rightContent_shadow_1,
html[data-theme="dark"] .rightContent_shadow_2 { background: #150202; border-color: #606060; color: #FFFFFF; }
html[data-theme="dark"] .info-header { background: #162F6A; color: #FFFFFF; border-top-color: #A3BBF3; border-bottom-color: #606060; }
html[data-theme="dark"] .info-header, html[data-theme="dark"] .info-header * { color: #FFFFFF; }
html[data-theme="dark"] .important-link-card:hover, html[data-theme="dark"] .info-box:hover { border-color: #A3BBF3; box-shadow: none; }
html[data-theme="dark"] li.recordBox:hover, html[data-theme="dark"] li.gallery-item:hover { background: #162F6A; }
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] select,
html[data-theme="dark"] textarea, html[data-theme="dark"] .textBox { background: #150202; border-color: #8E8E8E; color: #FFFFFF; }
html[data-theme="dark"] ::placeholder { color: #C6C6C6; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: #A3BBF3; outline-color: #D2DFFF; }
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled { background: #606060; color: #FFFFFF; }
html[data-theme="dark"] table th, html[data-theme="dark"] .table thead th, html[data-theme="dark"] .web th { background: #162F6A; color: #FFFFFF; border-bottom-color: #A3BBF3; }
html[data-theme="dark"] table td, html[data-theme="dark"] table th { border-color: #606060; }
html[data-theme="dark"] .pagination a, html[data-theme="dark"] .pagination li a, html[data-theme="dark"] .page-link { background: #150202; color: #A3BBF3; border-color: #606060; }
html[data-theme="dark"] .pagination .active a, html[data-theme="dark"] .pagination a:hover, html[data-theme="dark"] .page-item.active .page-link { background: #162F6A; color: #FFFFFF; border-color: #A3BBF3; }
html[data-theme="dark"] hr, html[data-theme="dark"] .divider { border-color: #606060; }

/* Buttons keep the key colour; secondary buttons invert */
html[data-theme="dark"] .btn-secondary, html[data-theme="dark"] .btn-outline-primary, html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] input[type="button"], html[data-theme="dark"] .tab-btn { background: #150202; color: #D2DFFF; border-color: #A3BBF3; }
html[data-theme="dark"] .tab-btn:hover, html[data-theme="dark"] input[type="reset"]:hover { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] .tab-btn.active { background: #162F6A; color: #FFFFFF; border-color: #A3BBF3; }
html[data-theme="dark"] .button, html[data-theme="dark"] input[type="submit"], html[data-theme="dark"] .view-all-btn, html[data-theme="dark"] .grid-box,
html[data-theme="dark"] a.bttn-more { border-color: #A3BBF3; }

/* Tabs (legacy responsive tabs) */
html[data-theme="dark"] .resTab .tabNav, html[data-theme="dark"] .resTab .tabNav1 { background: #150202; border-color: #606060; }
html[data-theme="dark"] .resTab .tabNav li, html[data-theme="dark"] .resTab .tabNav1 li,
html[data-theme="dark"] .socialBlockCont .resTab .tabNav li { background: #150202; }
html[data-theme="dark"] .socialBlockCont .resTab .tabNav li a, html[data-theme="dark"] .resTab .tabNav li a { color: #FFFFFF; border-color: #606060; }
html[data-theme="dark"] .socialBlockCont .resTab .tabNav .r-tabs-state-active a,
html[data-theme="dark"] .tabNav1 .r-tabs-state-active a { background: #162F6A; color: #FFFFFF; }

/* Alerts and status messages stay readable on dark */
html[data-theme="dark"] .alert { background: #150202; color: #FFFFFF; border-color: #606060; }
html[data-theme="dark"] .text-danger, html[data-theme="dark"] .error, html[data-theme="dark"] span.red { color: #FF6B78 !important; }

/* Footer: key colour in both modes */
html[data-theme="dark"] .footerCont { background: #162F6A; color: #FFFFFF; border-top: 1px solid #606060; }
html[data-theme="dark"] .footerCont a, html[data-theme="dark"] .footerLinks li a { color: #FFFFFF; }
html[data-theme="dark"] .footerCont p, html[data-theme="dark"] .footerCont span, html[data-theme="dark"] .footerCont strong { color: #FFFFFF; }
html[data-theme="dark"] .footerPart, html[data-theme="dark"] .footerText, html[data-theme="dark"] .post { background: #150202; color: #FFFFFF; }

/* Legacy off-canvas menu panel (kept in the DOM) */
html[data-theme="dark"] #menuPartWrapper, html[data-theme="dark"] .mp-menu, html[data-theme="dark"] .mobMenuPart { background: #162F6A; }

/* Legacy surfaces that hard-code a white / light background */
html[data-theme="dark"] #header .header-container, html[data-theme="dark"] #header .gov-header__row, html[data-theme="dark"] .logoAndSearchRow { background: transparent; }
html[data-theme="dark"] td, html[data-theme="dark"] th.evenRow, html[data-theme="dark"] .responsiveTable, html[data-theme="dark"] .evenRow, html[data-theme="dark"] .tableOut { background: transparent; }
html[data-theme="dark"] tr, html[data-theme="dark"] tbody tr, html[data-theme="dark"] .web tr { background: transparent !important; }
html[data-theme="dark"] tbody tr:nth-child(even), html[data-theme="dark"] .holidaytable tr:nth-child(even),
html[data-theme="dark"] .tableData tr:nth-child(even) { background: #162F6A !important; }
html[data-theme="dark"] .str_wrap, html[data-theme="dark"] .footerLogos, html[data-theme="dark"] .footerLogosSlider, html[data-theme="dark"] .mfoot { background: #150202; }
html[data-theme="dark"] .main-section, html[data-theme="dark"] .impHomeLinks li,
html[data-theme="dark"] .info-footer, html[data-theme="dark"] .social-tabs { background: #150202 !important; color: #FFFFFF; }
html[data-theme="dark"] .info-footer { border-top: 1px solid #606060; }
html[data-theme="dark"] .important-link-icon, html[data-theme="dark"] .connect-icon { background: #162F6A; color: #FFFFFF; }
html[data-theme="dark"] .important-link-icon *, html[data-theme="dark"] .connect-icon * { color: #FFFFFF; }
html[data-theme="dark"] .social-tabs .tab-btn:not(.active) { background: #150202; }

/* Breadcrumb bar + left menu */
html[data-theme="dark"] .bdrAddOut, html[data-theme="dark"] .breadcrumb, html[data-theme="dark"] .breadcrumb li, html[data-theme="dark"] .bdrNoLink { background: #150202; border-color: #606060; color: #FFFFFF; }
html[data-theme="dark"] .bdrAddOut { border-bottom: 1px solid #606060; }
html[data-theme="dark"] #menuLeft, html[data-theme="dark"] #menuLeft li, html[data-theme="dark"] .rightPart { background: #150202; }
html[data-theme="dark"] span.menuTitle, html[data-theme="dark"] .menuTitle { background: #150202 !important; color: #FFFFFF !important; border-bottom: 3px solid #A3BBF3; }

/* Content links: legacy rules colour them with the key colour, which vanishes on #150202 */
html[data-theme="dark"] #wrapper a:not(.button):not(.view-all-btn):not(.grid-box):not(.skip-link):not(.tool):not(.a11y-link):not(.menu-trigger):not([class*="btn"]):not(.footerCont a):not(#nav a) { color: #A3BBF3; }
html[data-theme="dark"] #wrapper a:not(.button):not(.view-all-btn):not(.grid-box):not(.skip-link):not(.tool):not(.a11y-link):not(.menu-trigger):not([class*="btn"]):not(.footerCont a):not(#nav a):hover { color: #D2DFFF; }
html[data-theme="dark"] #header #nav > li > a { color: #FFFFFF; }
html[data-theme="dark"] .site_map li a span, html[data-theme="dark"] .site_map li a { color: #A3BBF3 !important; }
html[data-theme="dark"] #wrapper .grid-box, html[data-theme="dark"] #wrapper .view-all-btn, html[data-theme="dark"] #wrapper .button,
html[data-theme="dark"] #wrapper a.bttn-more { color: #FFFFFF; }