/**
 * НККМ / NCCL Custom CSS — qtcorpus.css
 * Національний корпус кримськотатарської мови
 * National Crimean Tatar Corpus of Language
 * Modern Web Guidance: performance, CLS, LCP, content-visibility
 */

html {
    color-scheme: light dark;
}

html.dark {
    color-scheme: dark !important;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* ============================================================
   MOBILE CONTENT — OVERFLOW & BOX-SIZING FIX
   ============================================================ */
@media (max-width: 575px) {
    /* Prevent text overflow on narrow viewports */
    .com-content-article__body,
    .article-info,
    .g-content,
    #g-mainbody p, #g-mainbody li, #g-mainbody td,
    .item-page p, .item-page li {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Ensure content area does not exceed viewport */
    .g-grid, .g-block, .g-content, .container, .g-container {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Content padding on mobile */
    .com-content-article__body {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    img, iframe, video {
        max-width: 100% !important;
        height: auto !important;
    }
}

#g-page-surround {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

@supports not (overflow: clip) {
    html,
    body,
    #g-page-surround {
        overflow-x: hidden !important;
    }
}

/* ============================================================
   FONTS: e-Ukraine (Дія / Мінцифра) — всі накреслення
   Self-hosted WOFF2 для максимального Lighthouse score
   Джерело: github.com/bennetfabian/e-Ukraine (CC BY 4.0)
   ============================================================ */
@font-face {
    font-family: 'e-Ukraine';
    src: url('/templates/g5_helium/custom/fonts/e-Ukraine-Thin.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('/templates/g5_helium/custom/fonts/e-Ukraine-UltraLight.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('/templates/g5_helium/custom/fonts/e-Ukraine-Light.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('/templates/g5_helium/custom/fonts/e-Ukraine-Regular.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('/templates/g5_helium/custom/fonts/e-Ukraine-Medium.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine';
    src: url('/templates/g5_helium/custom/fonts/e-Ukraine-Bold.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine Head';
    src: url('/templates/g5_helium/custom/fonts/e-UkraineHead-Regular.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine Head';
    src: url('/templates/g5_helium/custom/fonts/e-UkraineHead-Medium.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}
@font-face {
    font-family: 'e-Ukraine Head';
    src: url('/templates/g5_helium/custom/fonts/e-UkraineHead-Bold.woff2') format('woff2'),
         url('/templates/g5_helium/custom/fonts/e-Ukraine-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0400-04FF, U+2000-206F;
}

/* ============================================================
   FONTS: Font Awesome Absolute Overrides (JCH Optimize bypass)
   ============================================================ */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
}
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2');
}
@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: 'Font Awesome v4 Compatibility';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/media/vendor/fontawesome-free/webfonts/fa-v4compatibility.woff2') format('woff2');
}

/* Global e-Ukraine application: purge all legacy/theme fonts and force e-Ukraine Head for headings/logo */
h1, h2, h3, h4, h5, h6, 
.g-logo-title, .hero-title, .g-showcase-title, .fp-intro h1,
.g-owlcarousel-item-title, .g-owlcarousel-item-desc,
legend, .g-title, .g-lead {
    font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
    text-rendering: auto; /* optimizeLegibility breaks ClearType/DirectWrite font rendering in Chrome on Windows */
}

/* Enable greyscale antialiasing only on macOS/iOS high-res devices to avoid breaking Windows ClearType rendering */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi) {
    h1, h2, h3, h4, h5, h6, 
    .g-logo-title, .hero-title, .g-showcase-title, .fp-intro h1,
    .g-owlcarousel-item-title, .g-owlcarousel-item-desc,
    legend, .g-title, .g-lead {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Force e-Ukraine (body font) for all text-containing elements, UI components, and controls */
html, body, p, li, td, th, a, span, label, input, textarea, select, button,
.item-page p, .g-content p,
.button, .btn, .btn-primary, .btn-secondary, .button-outline,
.g-owlcarousel-item-button, .dropdown-toggle,
#g-navigation .g-main-nav, .g-main-nav .g-menu-item-container,
.g-logo, .g-logo-helium,
.se-char-btn, .se-search-btn,
.mod-languages__select button, .mod-languages__select .dropdown-menu a,
.breadcrumb, .breadcrumb-item,
table, thead, tbody, tr,
.search-container, #table_filter_input,
.se-search-notice, .se-chars-label {
    font-family: 'e-Ukraine', 'Inter', sans-serif !important;
    text-rendering: auto;
}

/* Enable greyscale antialiasing only on macOS/iOS high-res devices to avoid breaking Windows ClearType rendering */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-resolution: 144dpi) {
    html, body, p, li, td, th, a, span, label, input, textarea, select, button,
    .item-page p, .g-content p,
    .button, .btn, .btn-primary, .btn-secondary, .button-outline,
    .g-owlcarousel-item-button, .dropdown-toggle,
    #g-navigation .g-main-nav, .g-main-nav .g-menu-item-container,
    .se-char-btn, .se-search-btn,
    .mod-languages__select button, .mod-languages__select .dropdown-menu a,
    .breadcrumb, .breadcrumb-item,
    table, thead, tbody, tr,
    .search-container, #table_filter_input,
    .se-search-notice, .se-chars-label {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ============================================================
   LAYOUT: Two-column search + phone mockup
   ============================================================ */
#custom-5807-particle.g-content,
#custom-5807-particle.g-particle,
#custom-5807-particle > .g-content,
.intro-search-block > .g-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 2rem !important;
}
#custom-5807-particle .fp-intro,
.intro-search-block .fp-intro {
    flex: 1 1 55% !important;
    min-width: 0 !important;
}
#custom-5807-particle .ipad-mockup,
.intro-search-block .ipad-mockup {
    flex: 0 0 32% !important;
    max-width: 32% !important;
    margin-top: -10px !important;
}
#custom-5807-particle .ipad-mockup img,
.intro-search-block .ipad-mockup img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

@media (max-width: 767px) {
    #custom-5807-particle.g-content,
    #custom-5807-particle.g-particle,
    #custom-5807-particle > .g-content,
    .intro-search-block > .g-content {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    #custom-5807-particle .fp-intro,
    .intro-search-block .fp-intro {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    #custom-5807-particle .ipad-mockup,
    .intro-search-block .ipad-mockup {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
}

/* ============================================================
   SEARCH MODULE — Inline button + special chars UX
   ============================================================ */

/* Input + button inline wrapper */
.se-input-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 2px solid #24a0ce;
    border-radius: 30px;
    overflow: hidden;
    background: #ffffff;
    transition: box-shadow 0.2s ease;
    max-width: 520px;
}
.se-input-wrapper:focus-within {
    box-shadow: 0 0 0 3px rgba(36, 160, 206, 0.25);
    border-color: #1b7fa5;
}

/* Hide old standalone anchor button */
a.se-search-action { display: none !important; }

/* Input field */
.se-input-wrapper input[type="search"],
#se-word-input {
    flex: 1;
    border: none !important;
    padding: 12px 18px !important;
    font-size: 1rem !important;
    background: transparent !important;
    -webkit-appearance: none;
    color: #333;
}
.se-input-wrapper input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Search button inside field */
.se-search-btn {
    background: #24a0ce;
    border: none;
    color: #fff;
    padding: 0 22px;
    min-height: 48px;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0 28px 28px 0;
}
.se-search-btn:hover  { background: #1b7fa5; }
.se-search-btn:active { background: #166482; }
.se-search-btn:focus  { outline: 2px solid #fff; outline-offset: -3px; }

@media (max-width: 480px) {
    .se-input-wrapper input[type="search"],
    #se-word-input {
        padding: 12px 12px !important;
        font-size: 0.88rem !important;
    }
    .se-input-wrapper input[type="search"]::placeholder,
    #se-word-input::placeholder {
        font-size: 0.82rem !important;
    }
    .se-search-btn {
        padding: 0 16px;
        font-size: 0.95rem;
    }
}

/* Cyrillic notice — hidden by default, shown via JS */
.se-search-notice {
    display: none;
    align-items: center;
    gap: 6px;
    color: #c0392b;
    font-size: 0.88rem;
    margin-top: 8px;
    padding: 6px 12px;
    background: #fff5f5;
    border-left: 3px solid #c0392b;
    border-radius: 4px;
    max-width: 520px;
}
.se-search-notice i { flex-shrink: 0; }

/* ============================================================
   CRIMEAN TATAR SPECIAL CHARACTERS PANEL
   ============================================================ */
.se-special-chars,
.se-chars-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    margin-top: 10px !important;
    max-width: 100% !important;
    min-height: 40px !important; /* Reserve vertical space to prevent CLS */
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.se-special-chars::-webkit-scrollbar,
.se-chars-wrapper::-webkit-scrollbar {
    display: none !important;
}
.se-chars-label {
    font-size: 0 !important;
    color: transparent !important;
    margin-right: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}
.se-chars-label::before {
    content: "\f11c" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome" !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: #24a0ce !important;
    display: inline-block !important;
}
.se-char-btn {
    background: #f0f8fc !important;
    border: 1.5px solid #b8dff0 !important;
    border-radius: 7px !important;
    color: #1b5e73 !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s !important;
    font-family: 'e-Ukraine' !important;
    min-width: 25px;
    text-align: center;
    line-height: 1.4;
    user-select: none;
}
.se-char-btn:hover {
    background: #24a0ce;
    border-color: #24a0ce;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(36,160,206,0.3);
}
.se-char-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.se-char-btn:focus {
    outline: 2px solid #24a0ce;
    outline-offset: 2px;
}

/* Search settings link */
.se-search-settings {
    margin-top: 10px;
    font-size: 0.82rem;
}
.se-search-settings a { color: #aaa; text-decoration: none; }
.se-search-settings a:hover { color: #24a0ce; }

/* ============================================================
   CLS FIX — carousel aspect-ratio (Modern Web Guidance)
   ============================================================ */
.g-owlcarousel-item-img {
    aspect-ratio: 16 / 6;
    overflow: hidden;
}
.g-owlcarousel-item-img img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9 !important;
}
.g-owlcarousel,
.g-owlcarousel-item-wrapper,
.g-owlcarousel-item-img {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ============================================================
   PERFORMANCE — content-visibility (Modern Web Guidance)
   ============================================================ */
#g-features,
#g-testimonials,
.g-content-tabs,
section.testimonials {
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}

/* ============================================================
   ACCESSIBILITY — Color contrast (WCAG 2 AA ≥ 4.5:1)
   ============================================================ */
.se-search-module a,
div#se_search_module a,
.fp-intro a {
    color: #166482 !important;
}

.g-contenttabs-tab-title,
.g-contenttabs-tab-wrapper:not(.ui-tabs-active) .g-contenttabs-tab-title,
.g-contenttabs-tab-wrapper:not(.ui-tabs-active) a.g-contenttabs-tab {
    color: #f1f5f9 !important;
}

.ui-tabs-active .g-contenttabs-tab-wrapper-head,
li.g-contenttabs-tab-wrapper.ui-tabs-active {
    background: #166482 !important;
}
li.g-contenttabs-tab-wrapper.ui-tabs-active .g-contenttabs-tab-title,
li.g-contenttabs-tab-wrapper.ui-tabs-active a.g-contenttabs-tab {
    color: #ffffff !important;
}

.translit-main .tab {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.45) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    gap: 4px !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(27, 94, 115, 0.15) !important;
}
.translit-main .tab button {
    flex: 1 1 50% !important;
    width: 50% !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #1b5e73 !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.translit-main .tab button.active {
    background: #166482 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(22, 100, 130, 0.2) !important;
}
.translit-main .tab button:hover:not(.active) {
    background: rgba(22, 100, 130, 0.08) !important;
    color: #166482 !important;
}

.g-nav a { color: #ffffff; }

a.g-logo:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ============================================================
   NAVIGATION: Prevent wrap & resolve switcher overlap
   ============================================================ */
/* 1. Ensure logo, menu, and switcher columns never wrap and are vertically centered */
#g-navigation .g-grid:has(.g-main-nav) {
    display: flex !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#g-navigation .g-block.size-20 {
    flex: 0 1 auto !important;
    max-width: 300px !important;
    width: auto !important;
}
#g-navigation .g-logo,
#g-navigation .g-logo-helium {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: 1.5rem !important; /* Prevent brand text from touching the first menu item */
}
#g-navigation .g-block.size-62 {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
}
#g-navigation .g-block.size-18.mod-languages-block,
#g-navigation .mod-languages-block {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    overflow: visible !important;
}

/* 2. Reset navigation menu margin/padding to maximize space and prevent overlap */
#g-navigation .g-block .g-content .g-main-nav,
#g-navigation .g-block .g-main-nav,
#g-navigation .g-content .g-main-nav,
#g-navigation .g-main-nav,
nav.g-main-nav,
#g-navigation .g-main-nav ul.g-toplevel {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
}
#g-navigation .g-main-nav ul.g-toplevel {
    flex-wrap: nowrap !important;
}
#g-navigation .g-main-nav .g-toplevel > li {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}
#g-navigation .g-main-nav .g-toplevel > li[style*="display: none"],
#g-navigation .g-main-nav .g-toplevel > li[style*="display:none"] {
    display: none !important;
}
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
    display: flex !important;
    align-items: center !important;
}

/* 3. Reset left/right padding and margins on the menu block particle to maximize space */
#g-navigation .g-grid:has(.g-main-nav) > .g-block:nth-child(2) > .g-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 3b. Make the last-child g-content flex so theme toggle + lang switcher are inline */
#g-navigation .g-grid:has(.g-main-nav) > .g-block:last-child > .g-content {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-item-title {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: color 0.2s ease !important;
}
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title {
    color: #ffffff !important;
}

#g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title {
    color: #ffffff !important;
}

@media (min-width: 992px) {
    .g-main-nav ul.g-toplevel {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
    }
    /* Desktop Logo width auto fix */
    #g-logo,
    .g-logo,
    .g-logo-helium,
    .g-logo img,
    .g-logo-image {
        width: auto !important;
        height: 48px !important;
    }
    .g-logo svg,
    .g-logo-helium svg {
        width: auto !important;
        height: 100% !important;
    }
}
.g-main-nav .g-menu-item {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
/* Reduce nav item padding and font size dynamically to fit in one row */
.g-main-nav .g-menu-item-container {
    padding: 10px 14px !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
}
@media (max-width: 1300px) {
    .g-main-nav ul.g-toplevel {
        gap: 6px !important;
    }
    .g-main-nav .g-menu-item-container {
        padding: 10px 10px !important;
        font-size: 0.95rem !important;
    }
}
@media (max-width: 1200px) {
    .g-main-nav ul.g-toplevel {
        gap: 4px !important;
    }
    .g-main-nav .g-menu-item-container {
        padding: 8px 8px !important;
        font-size: 0.9rem !important;
    }
}
@media (max-width: 1024px) {
    .g-main-nav ul.g-toplevel {
        gap: 2px !important;
    }
    .g-main-nav .g-menu-item-container {
        padding: 8px 6px !important;
        font-size: 0.88rem !important;
    }
}
@media (max-width: 991px) {
    /* Let Gantry's mobile hamburger menu trigger normally */
}
/* "Інше" dropdown — always last in nav (no auto margin to avoid overlapping switcher) */
.g-main-nav ul.g-toplevel > li:last-child { margin-left: 0 !important; }

/* ============================================================
   HEADER BACKGROUND: Ornament illustration for all pages
   ============================================================ */
/* Custom navigation header background with 35% overlay for all inner pages */
#g-navigation {
    background-image: none !important;
    background-color: #0a2850 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* Glassmorphism for sticky header when scrolled */
#g-navigation.scrolled,
#g-navigation.g-flt {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* Exclude homepages by restoring transparent background so it overlays the header ornament */
body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled),
body.itemid-138 #g-navigation:not(.scrolled),
body.itemid-146 #g-navigation:not(.scrolled),
body.itemid-104 #g-navigation:not(.scrolled) {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    box-shadow: none !important;
}

/* Restrict title container width on homepage to avoid overlapping the ornament on the right */
@media (min-width: 768px) {
    .g-owlcarousel-item-content {
        max-width: 70% !important;
    }
}

/* Ensure showcase on inner pages uses the ornament too */
.g-showcase:not(.home-showcase) {
    background-image: url("/images/pages/ornament_banner1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 120px;
    margin-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* Fix stretched vacancies header image */
body.itemid-141 .item-image img,
body.itemid-vakansii .item-image img {
    object-fit: cover !important;
    width: 100% !important;
    aspect-ratio: 16/3 !important;
}
/* Set vacancies page header background to ornament and remove distorted image */
body.itemid-141 #g-header,
body.itemid-vakansii #g-header {
    background-image: url("/images/pages/ornament_banner1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
body.itemid-141 .item-image,
body.itemid-vakansii .item-image {
    display: none !important;
}

/* ============================================================
   SOURCES TABLE (Джерела page) — table_filter_data
   ============================================================ */
#table_filter_data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
}
#table_filter_data thead tr {
    background: #166482;
    color: #fff;
}
#table_filter_data th {
    background: #166482 !important;
    color: #fff !important;
    padding: 12px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
#table_filter_data th:hover { background: #1b7fa5; }
#table_filter_data tbody tr {
    border-bottom: 1px solid #e8f0f4;
    transition: background 0.15s;
}
#table_filter_data tbody tr:nth-child(even) { background: #f7fbfc; }
#table_filter_data tbody tr:hover { background: #e3f3f8; }
#table_filter_data td {
    padding: 10px 14px;
    vertical-align: middle;
    color: #333;
    border: none;
}
#table_filter_data td.s2 { text-align: center; color: #666; }

@media screen and (min-width: 768px) {
    #table_filter_data {
        table-layout: fixed !important;
        width: 100% !important;
    }
    #table_filter_data th {
        overflow-wrap: normal !important;
        word-break: normal !important;
        white-space: nowrap !important;
    }
    #table_filter_data td {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        white-space: normal !important;
    }
    
    /* Reduced padding on tablet viewports to give more space for text */
    @media (max-width: 991px) {
        html body #table_filter_data th,
        html body #table_filter_data td {
            padding: 8px 6px !important;
        }
        html body #table_filter_data th {
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: break-word !important;
        }
    }

    #table_filter_data.hide-lang-col th:nth-child(1) {
        width: 32% !important;
    }
    #table_filter_data.hide-lang-col th:nth-child(3) {
        width: 34% !important;
    }
    #table_filter_data.hide-lang-col th:nth-child(4) {
        width: 14% !important;
    }
    #table_filter_data.hide-lang-col th:nth-child(5) {
        width: 20% !important;
    }
    
    #table_filter_data:not(.hide-lang-col) th:nth-child(1) {
        width: 26% !important;
    }
    #table_filter_data:not(.hide-lang-col) th:nth-child(2) {
        width: 10% !important;
    }
    #table_filter_data:not(.hide-lang-col) th:nth-child(3) {
        width: 28% !important;
    }
    #table_filter_data:not(.hide-lang-col) th:nth-child(4) {
        width: 15% !important;
    }
    #table_filter_data:not(.hide-lang-col) th:nth-child(5) {
        width: 21% !important;
    }
    #table_filter_data th:nth-child(4),
    #table_filter_data td:nth-child(4),
    #table_filter_data th:nth-child(5),
    #table_filter_data td:nth-child(5) {
        text-align: center !important;
    }

    /* Tablet viewport specific table adjustments to optimize space and prevent header wrapping */
    @media screen and (min-width: 768px) and (max-width: 991px) {
        #table_filter_data {
            font-size: 0.82rem !important;
        }
        #table_filter_data th {
            font-size: 0.8rem !important;
        }
        #table_filter_data.hide-lang-col th:nth-child(1) {
            width: 30% !important;
        }
        #table_filter_data.hide-lang-col th:nth-child(3) {
            width: 38% !important;
        }
        #table_filter_data.hide-lang-col th:nth-child(4) {
            width: 15% !important;
        }
        #table_filter_data.hide-lang-col th:nth-child(5) {
            width: 17% !important;
        }
    }
}

@media screen and (min-width: 1024px) {
    .table-responsive-wrapper {
        overflow: visible !important;
    }
}

/* Override inline widths from Google Sheets exports to prevent table cell overflow */
#table_filter_data .softmerge-inner {
    width: auto !important;
    left: auto !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    position: static !important;
}

/* Reduce excessive spacing between lists and subheadings (e.g. online sources to printed sources) */
.g-content ul + h2,
.g-content ul + h3 {
    margin-top: 1.25rem !important;
}

/* Search box above table */
.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    max-width: 360px;
    border: 1.5px solid #24a0ce;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}
#table_filter_input {
    flex: 1;
    border: none !important;
    padding: 8px 14px;
    font-size: 0.9rem;
    background: transparent;
}
.search-icon {
    padding: 0 12px;
    color: #24a0ce;
    font-size: 1rem;
    cursor: default;
}

/* Guide page and article table column width optimization */
.item-page table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.5rem 0 !important;
}

.item-page table th,
.item-page table td {
    padding: 12px 16px !important;
    vertical-align: middle !important;
}

.item-page table th:nth-child(1),
.item-page table td:nth-child(1) {
    width: 85px !important;
    text-align: center !important;
}

.item-page table th:nth-child(2),
.item-page table td:nth-child(2) {
    width: 28% !important;
    min-width: 200px !important;
}

.item-page table th:nth-child(3),
.item-page table td:nth-child(3) {
    width: auto !important;
}

/* Online sources list — styled */
.item-page ul li {
    padding: 3px 0;
    line-height: 1.6;
}
@media screen and (min-width: 992px) {
    body.itemid-144 .com-content-article__body > ul,
    body.itemid-137 .com-content-article__body > ul,
    body.itemid-210 .com-content-article__body > ul,
    body.itemid-151 .com-content-article__body > ul,
    body.itemid-200 .com-content-article__body > ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px 40px !important;
        padding-left: 20px !important;
    }
    body.itemid-144 .com-content-article__body > ul li,
    body.itemid-137 .com-content-article__body > ul li,
    body.itemid-210 .com-content-article__body > ul li,
    body.itemid-151 .com-content-article__body > ul li,
    body.itemid-200 .com-content-article__body > ul li {
        display: list-item !important;
        list-style-type: disc !important;
    }
}
.item-page h3,
.item-page h2 {
    color: #166482;
    margin-top: 1.5rem;
    border-bottom: 2px solid #e3f3f8;
    padding-bottom: 6px;
}
.item-page p:empty,
.item-page p:has(> br:only-child) {
    display: none !important;
}

/* ============================================================
   LANGUAGE SWITCHER: Compact & Responsive Styling (Joomla 4)
   ============================================================ */
.mod-languages-block {
    flex: 0 0 auto !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 10px !important;
    margin-left: auto !important; /* Push language switcher to the far right */
    pointer-events: none !important;
}
.mod-languages-block * {
    pointer-events: auto !important;
}
.mod-languages {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    max-width: 100% !important;
    gap: 8px !important;
}
.mod-languages__select button.dropdown-toggle {
    background: transparent !important;
    border: 1.5px solid currentColor !important;
    color: inherit !important;
    opacity: 0.85;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}
.mod-languages__select button.dropdown-toggle:hover,
.mod-languages__select button.dropdown-toggle:focus {
    opacity: 1;
    background: rgba(128, 128, 128, 0.1) !important;
}
.mod-languages__select .dropdown-menu {
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    min-width: 80px !important;
}
.mod-languages__select .dropdown-menu a {
    padding: 6px 16px !important;
    font-size: 0.85rem !important;
    color: #333 !important;
    font-weight: 600 !important;
    display: block !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}
.mod-languages__select .dropdown-menu a:hover {
    background: #e3f3f8 !important;
    color: #166482 !important;
}

/* Open language dropdown on hover */
.mod-languages__select:hover .dropdown-menu {
    display: block !important;
    margin-top: 0 !important;
}

/* ============================================================
   ACCESSIBILITY: Readability & Contrast Overrides
   ============================================================ */
/* Force white color for offcanvas toggle hamburger and dropdown menu links */
.g-offcanvas-toggle {
    color: #ffffff !important;
}
#g-navigation .g-main-nav .g-dropdown a,
#g-navigation .g-main-nav .g-dropdown .g-menu-item-container {
    color: #ffffff !important;
}
#g-navigation .g-main-nav .g-dropdown {
    background-color: rgba(10, 40, 75, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
}

/* Force high-contrast blue for dropdown hover/active states (non-yellow, no underline) */
#g-navigation .g-main-nav .g-dropdown a:hover,
#g-navigation .g-main-nav .g-dropdown a:active,
#g-navigation .g-main-nav .g-dropdown li:hover > .g-menu-item-container,
#g-navigation .g-main-nav .g-dropdown li:hover > .g-menu-item-container a,
#g-navigation .g-main-nav .g-dropdown li.active > .g-menu-item-container,
#g-navigation .g-main-nav .g-dropdown li.active > .g-menu-item-container a {
    color: #24a0ce !important;
    text-decoration: none !important;
}

/* ============================================================
   SOURCES TABLE FILTERING & RESPONSIVENESS
   ============================================================ */

/* Era filter buttons container */
.table-era-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px 0;
}

/* Liquid Gloss Clear Style for Filter Buttons */
.era-filter-btn {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    color: #0d3846 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    font-family: 'e-Ukraine' !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    user-select: none !important;
}

.era-filter-btn:hover {
    background: rgba(36, 160, 206, 0.15) !important;
    border-color: rgba(36, 160, 206, 0.5) !important;
    color: #166482 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(36, 160, 206, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.era-filter-btn.active {
    background: linear-gradient(135deg, rgba(22, 100, 130, 0.85), rgba(36, 160, 206, 0.85)) !important;
    border-color: rgba(22, 100, 130, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(22, 100, 130, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
    transform: translateY(0px) !important;
}

/* Mobile responsive stacked-cards reflow */
@media screen and (max-width: 767px) {
    /* Hide the standard table header */
    #table_filter_data thead {
        display: none !important;
    }
    
    #table_filter_data, 
    #table_filter_data tbody, 
    #table_filter_data tr, 
    #table_filter_data td {
        display: block !important;
        width: 100% !important;
    }

    #table_filter_data {
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    #table_filter_data tr {
        background: #ffffff !important;
        border: 1.5px solid #e3f3f8 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(36, 160, 206, 0.06) !important;
        margin-bottom: 16px !important;
        padding: 12px 16px !important;
        transition: transform 0.2s, box-shadow 0.2s !important;
    }
    
    #table_filter_data tr:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(36, 160, 206, 0.12) !important;
        background: #ffffff !important;
    }

    #table_filter_data td {
        border-bottom: 1px solid #f2f8fa !important;
        padding: 8px 10px 8px 40% !important;
        position: relative !important;
        text-align: left !important;
        font-size: 0.88rem !important;
        min-height: 38px !important;
        box-sizing: border-box !important;
    }

    #table_filter_data td:last-child {
        border-bottom: none !important;
    }

    /* Inject column headers dynamically as pseudo-labels */
    #table_filter_data td::before {
        content: attr(data-label) !important;
        position: absolute !important;
        left: 0 !important;
        top: 8px !important;
        width: 35% !important;
        font-weight: 700 !important;
        color: #166482 !important;
        font-size: 0.82rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
    }

    #table_filter_data tr[style*="display: none"],
    #table_filter_data tr.nothing-found-row[style*="display: none"] {
        display: none !important;
    }

    /* Dark theme overrides for mobile reflow */
    [data-theme="dark"] #table_filter_data tr {
        background: rgba(255, 255, 255, 0.03) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: none !important;
    }
    [data-theme="dark"] #table_filter_data tr:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    [data-theme="dark"] #table_filter_data td {
        border-bottom-color: rgba(255, 255, 255, 0.05) !important;
    }
    [data-theme="dark"] #table_filter_data td::before {
        color: #38bdf8 !important;
    }

    /* Compact bibliography entries on mobile */
    .bibliography-entry {
        padding: 10px 14px !important;
        margin-bottom: 8px !important;
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }
}

/* ============================================================
   RESPONSIVE LAYOUT & CAROUSEL OVERLAP FIXES
   ============================================================ */
/* Prevent menu items overlapping switcher on narrow desktops/tablets */
#g-navigation .g-grid > .g-block.size-20 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
#g-navigation .g-grid > .g-block.size-62 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}
#g-navigation .g-grid > .g-block.size-18 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* Carousel title & desc responsive adjustments to avoid vertical overlap */
.g-owlcarousel-item-title,
.g-owlcarousel-item-content h1 {
    font-size: 2.25rem !important; /* 36px */
    line-height: 1.25 !important;
}
.g-owlcarousel-item-desc,
.g-owlcarousel-item-content h2 {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
}

@media (max-width: 1200px) {
    .g-owlcarousel-item-title,
    .g-owlcarousel-item-content h1 {
        font-size: 2rem !important; /* 32px */
    }
    .g-owlcarousel-item-desc,
    .g-owlcarousel-item-content h2 {
        font-size: 1.05rem !important;
    }
    .g-owlcarousel-item-content {
        max-width: 85% !important;
    }
    /* Shift carousel content down to avoid overlapping the header navigation */
    .g-owlcarousel .g-owlcarousel-item-wrapper .g-owlcarousel-item-content-container {
        top: 90px !important;
        bottom: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }
}

@media (min-width: 992px) {
    /* Allow wider container so theme toggle fits alongside lang switcher */
    #g-navigation .mod-languages-block .g-content {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        max-width: 210px !important;
        overflow: visible !important;
    }
    #g-navigation .platform-content:has(.mod-languages),
    #g-navigation .moduletable:has(.mod-languages) {
        max-width: 210px !important;
        overflow: visible !important;
    }
    #g-navigation .mod-languages__select {
        max-width: 168px !important;
    }
    #g-navigation .mod-languages__select button.dropdown-toggle {
        max-width: 168px !important;
    }
}

@media (max-width: 576px) {
    .item-page table:not(#table_filter_data),
    .g-content table:not(#table_filter_data) {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .item-page table:not(#table_filter_data) th,
    .item-page table:not(#table_filter_data) td,
    .g-content table:not(#table_filter_data) th,
    .g-content table:not(#table_filter_data) td {
        padding: 8px 6px !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}

@media (max-width: 991px) {
    .g-owlcarousel-item-title,
    .g-owlcarousel-item-content h1 {
        font-size: 1.75rem !important; /* 28px */
    }
    .g-owlcarousel-item-desc,
    .g-owlcarousel-item-content h2 {
        font-size: 0.95rem !important;
    }
    .g-owlcarousel-item-content {
        max-width: 90% !important;
    }
}

@media (max-width: 768px) {
    .g-owlcarousel-item-title,
    .g-owlcarousel-item-content h1 {
        font-size: 1.5rem !important; /* 24px */
    }
    .g-owlcarousel-item-desc,
    .g-owlcarousel-item-content h2 {
        font-size: 0.9rem !important;
    }
    .g-owlcarousel-item-content {
        max-width: 95% !important;
    }
}

/* ============================================================
   REMEDIATION EXTRA RULES: Focus Outlines, Contrast, Mobile, R7
   ============================================================ */

/* Standard focus outline for keyboard accessibility */
input[type="search"]:focus-visible,
#se-word-input:focus-visible,
#table_filter_input:focus-visible {
    outline: 2px solid #166482 !important;
    outline-offset: 2px !important;
}

/* Color contrast fix for body text in blue content blocks */
.g-owlcarousel-item-desc {
    color: #ffffff !important;
}

/* Color contrast fix for links on Sources page */
#table_filter_data td a {
    color: #166482 !important;
    text-decoration: none !important;
}
#table_filter_data td a:hover {
    color: #1b7fa5 !important;
}

/* Color contrast fix for footer links */
#g-footer a {
    color: #ffffff !important;
    text-decoration: none !important;
}
#g-footer a:hover {
    color: #f7db03 !important; /* gold-yellow */
}

/* Color contrast fix for top-level navigation links hover (non-yellow, no underline) */
.g-main-nav .g-toplevel > li > .g-menu-item-container a:hover,
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container a {
    color: #24a0ce !important;
    text-decoration: none !important;
}

/* Mobile responsive adjustments for header text clipping and overlaps */
@media (max-width: 768px) {
    .g-title,
    h1,
    .g-owlcarousel-item-content h1,
    .g-logo-title,
    .hero-title,
    .page-header h1 {
        font-size: 1.35rem !important; /* Decrease font size to prevent clipping */
        line-height: 1.3 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .g-owlcarousel-item-title,
    .g-owlcarousel-item-content h1 {
        font-size: 1.25rem !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
        padding-bottom: 0 !important;
    }

    /* Reserve taller aspect-ratio on mobile so text fits nicely above transition border */
    .g-owlcarousel-item-img {
        aspect-ratio: 16 / 10 !important;
    }
    
    .g-owlcarousel .g-owlcarousel-item-wrapper .g-owlcarousel-item-content-container {
        top: 60px !important;
    }
}

/* Unique Page Header Background Images (R7 Change of Concept) */

/* About */
/* About */
body.itemid-139 #g-intro,
body.itemid-108 #g-intro,
body.itemid-205 #g-intro,
body.itemid-147 #g-intro,
body.itemid-195 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_about.webp") !important;
}
body.itemid-139 #g-header,
body.itemid-139 .g-showcase:not(.home-showcase),
body.itemid-108 #g-header,
body.itemid-108 .g-showcase:not(.home-showcase),
body.itemid-205 #g-header,
body.itemid-205 .g-showcase:not(.home-showcase),
body.itemid-147 #g-header,
body.itemid-147 .g-showcase:not(.home-showcase),
body.itemid-195 #g-header,
body.itemid-195 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_about.webp") !important;
}

/* Partners */
body.itemid-140 #g-intro,
body.itemid-130 #g-intro,
body.itemid-206 #g-intro,
body.itemid-148 #g-intro,
body.itemid-196 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_partners.webp") !important;
}
body.itemid-140 #g-header,
body.itemid-140 .g-showcase:not(.home-showcase),
body.itemid-130 #g-header,
body.itemid-130 .g-showcase:not(.home-showcase),
body.itemid-206 #g-header,
body.itemid-206 .g-showcase:not(.home-showcase),
body.itemid-148 #g-header,
body.itemid-148 .g-showcase:not(.home-showcase),
body.itemid-196 #g-header,
body.itemid-196 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_partners.webp") !important;
}

/* Vacancies */
body.itemid-141 #g-intro,
body.itemid-132 #g-intro,
body.itemid-207 #g-intro,
body.itemid-149 #g-intro,
body.itemid-197 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_vacancies.webp") !important;
}
body.itemid-141 #g-header,
body.itemid-141 .g-showcase:not(.home-showcase),
body.itemid-132 #g-header,
body.itemid-132 .g-showcase:not(.home-showcase),
body.itemid-207 #g-header,
body.itemid-207 .g-showcase:not(.home-showcase),
body.itemid-149 #g-header,
body.itemid-149 .g-showcase:not(.home-showcase),
body.itemid-197 #g-header,
body.itemid-197 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_vacancies.webp") !important;
}

/* Transliterator */
body.itemid-176 #g-navigation,
body.itemid-174 #g-navigation,
body.itemid-208 #g-navigation,
body.itemid-175 #g-navigation,
body.itemid-198 #g-navigation,
body.translit-page #g-navigation {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}
body.itemid-176 #g-header,
body.itemid-174 #g-header,
body.itemid-208 #g-header,
body.itemid-175 #g-header,
body.itemid-198 #g-header,
body.translit-page #g-header,
body.itemid-176 .g-showcase:not(.home-showcase),
body.itemid-174 .g-showcase:not(.home-showcase),
body.itemid-208 .g-showcase:not(.home-showcase),
body.itemid-175 .g-showcase:not(.home-showcase),
body.itemid-198 .g-showcase:not(.home-showcase),
body.translit-page .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}

/* Sources */
body.itemid-144 #g-intro,
body.itemid-137 #g-intro,
body.itemid-210 #g-intro,
body.itemid-151 #g-intro,
body.itemid-200 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_sources.webp") !important;
}
body.itemid-144 #g-header,
body.itemid-144 .g-showcase:not(.home-showcase),
body.itemid-137 #g-header,
body.itemid-137 .g-showcase:not(.home-showcase),
body.itemid-210 #g-header,
body.itemid-210 .g-showcase:not(.home-showcase),
body.itemid-151 #g-header,
body.itemid-151 .g-showcase:not(.home-showcase),
body.itemid-200 #g-header,
body.itemid-200 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_sources.webp") !important;
}

/* Software */
body.itemid-142 #g-intro,
body.itemid-214 #g-intro,
body.itemid-133 #g-intro,
body.itemid-213 #g-intro,
body.itemid-150 #g-intro,
body.itemid-203 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_software.webp") !important;
}
body.itemid-142 #g-header,
body.itemid-142 .g-showcase:not(.home-showcase),
body.itemid-214 #g-header,
body.itemid-214 .g-showcase:not(.home-showcase),
body.itemid-133 #g-header,
body.itemid-133 .g-showcase:not(.home-showcase),
body.itemid-213 #g-header,
body.itemid-213 .g-showcase:not(.home-showcase),
body.itemid-150 #g-header,
body.itemid-150 .g-showcase:not(.home-showcase),
body.itemid-203 #g-header,
body.itemid-203 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_software.webp") !important;
}

/* Development */
body.itemid-162 #g-intro,
body.itemid-169 #g-intro,
body.itemid-211 #g-intro,
body.itemid-166 #g-intro,
body.itemid-201 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_development.webp") !important;
}
body.itemid-162 #g-header,
body.itemid-162 .g-showcase:not(.home-showcase),
body.itemid-169 #g-header,
body.itemid-169 .g-showcase:not(.home-showcase),
body.itemid-211 #g-header,
body.itemid-211 .g-showcase:not(.home-showcase),
body.itemid-166 #g-header,
body.itemid-166 .g-showcase:not(.home-showcase),
body.itemid-201 #g-header,
body.itemid-201 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_development.webp") !important;
}

/* User Guide */
body.itemid-177 #g-intro,
body.itemid-161 #g-intro,
body.itemid-168 #g-intro,
body.itemid-212 #g-intro,
body.itemid-165 #g-intro,
body.itemid-202 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_guide.webp") !important;
}
body.itemid-177 #g-header,
body.itemid-161 #g-header,
body.itemid-168 #g-header,
body.itemid-212 #g-header,
body.itemid-165 #g-header,
body.itemid-202 #g-header,
body.itemid-177 .g-showcase:not(.home-showcase),
body.itemid-161 .g-showcase:not(.home-showcase),
body.itemid-168 .g-showcase:not(.home-showcase),
body.itemid-212 .g-showcase:not(.home-showcase),
body.itemid-165 .g-showcase:not(.home-showcase),
body.itemid-202 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_guide.webp") !important;
}

/* Terms */
body.itemid-154 #g-intro,
body.itemid-153 #g-intro,
body.itemid-209 #g-intro,
body.itemid-152 #g-intro,
body.itemid-199 #g-intro {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_terms.webp") !important;
}
body.itemid-154 #g-header,
body.itemid-154 .g-showcase:not(.home-showcase),
body.itemid-153 #g-header,
body.itemid-153 .g-showcase:not(.home-showcase),
body.itemid-209 #g-header,
body.itemid-209 .g-showcase:not(.home-showcase),
body.itemid-152 #g-header,
body.itemid-152 .g-showcase:not(.home-showcase),
body.itemid-199 #g-header,
body.itemid-199 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_terms.webp") !important;
}

/* ============================================================
   RESPONSIVE CAROUSEL & NAVIGATION OVERRIDES (M9 Remediation)
   ============================================================ */
@media (max-width: 480px) {
    .g-owlcarousel-item-img,
    .g-owlcarousel .owl-item {
        min-height: 280px !important;
        aspect-ratio: unset !important;
    }
    #g-navigation {
        position: relative !important;
    }
    .g-owlcarousel-item-wrapper {
        min-height: 280px !important;
    }
    .g-owlcarousel-item-content-container {
        top: 10px !important;
        padding: 10px !important;
    }
    .g-owlcarousel-item-title {
        font-size: 1.1rem !important;
        word-wrap: break-word !important;
    }
}

@media (max-width: 1024px) {
    .g-owlcarousel-item-wrapper {
        min-height: 320px !important;
    }
    .g-owlcarousel-item-content-container {
        max-width: unset !important; /* Do not restrict to 60% as it hides ornament */
    }
}

@media (max-width: 768px) {
    /* Carousel on 768px content vertical alignment */
    .g-owlcarousel-item-content-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        top: 0 !important;
        padding: 40px 20px !important;
    }

    /* Carousel Right Ornament on 768px */
    .g-owlcarousel-item-img {
        display: block !important; /* Ensure ornament remains visible */
        visibility: visible !important;
    }

    /* DETAILS Button Cut Off on 768px */
    .g-owlcarousel-item-btn,
    .g-owlcarousel .btn,
    [class*="owlcarousel"] a.btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 15px !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

/* Wrapping of text via CSS balance */
.g-content h2, .g-content .section-title {
    text-wrap: balance !important;
}

/* ============================================================
   HEADER LOGO DISPLAY CORRECTION (1024px viewport)
   ============================================================ */
#g-logo,
.g-logo,
.g-logo-helium,
.g-logo img,
.g-logo-image {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 300px !important;
    max-width: 100% !important;
    height: auto !important;
}

.g-logo svg,
.g-logo-helium svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
}

/* ============================================================
   CAROUSEL CONTENT VERTICAL CENTERING (1024px viewport)
   ============================================================ */
@media (max-width: 1024px) {
    .g-owlcarousel-item-content-container {
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-top: 60px !important;
        min-height: 300px !important;
    }
}

/* ============================================================
   PARTNERS PAGE & HOMEPAGE: Remove all borders, cards and cell frames
   ============================================================ */
body.itemid-140 table,
body.itemid-140 td,
body.itemid-140 th,
body.itemid-140 .mod-custom table,
body.itemid-140 .mod-custom td,
body.itemid-140 .mod-custom th,
body.itemid-130 table,
body.itemid-130 td,
body.itemid-130 th,
body.itemid-130 .mod-custom table,
body.itemid-130 .mod-custom td,
body.itemid-130 .mod-custom th,
body.itemid-148 table,
body.itemid-148 td,
body.itemid-148 th,
body.itemid-148 .mod-custom table,
body.itemid-148 .mod-custom td,
body.itemid-148 .mod-custom th,
body.itemid-206 table,
body.itemid-206 td,
body.itemid-206 th,
body.itemid-196 table,
body.itemid-196 td,
body.itemid-196 th,
.fp-features .card,
.fp-features .g-features-item,
.fp-features .g-block,
.g-features .card,
.g-features .g-block {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Also remove borders from images inside partners table cells */
body.itemid-140 td img,
body.itemid-130 td img,
body.itemid-148 td img,
body.itemid-206 td img,
body.itemid-196 td img {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================================
   GLASSMORPHISM STICKY NAVIGATION — Modern UI, Lighthouse-safe
   backdrop-filter is CSS-native, no JS, no extra assets.
   @supports guard ensures graceful fallback for older browsers.
   ============================================================ */
#g-navigation {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

#g-navigation {
    background-color: rgba(10, 40, 75, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled),
body.itemid-138 #g-navigation:not(.scrolled),
body.itemid-146 #g-navigation:not(.scrolled),
body.itemid-104 #g-navigation:not(.scrolled) {
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

[data-theme="dark"] body.home #g-navigation,
[data-theme="dark"] body.g-home-particles #g-navigation,
[data-theme="dark"] body.itemid-138 #g-navigation,
[data-theme="dark"] body.itemid-146 #g-navigation,
[data-theme="dark"] body.itemid-104 #g-navigation {
    background-color: rgba(10, 40, 75, 0.3) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
}

/* Fix: header / showcase sits below sticky nav, never behind it */
#g-header,
#g-showcase,
.g-showcase {
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================================
   CONTENT TYPOGRAPHY: Readable max-width, spacing, line-height
   ============================================================ */
.g-content .article-body,
.g-content .item-page,
.itemView .g-content .g-block > div {
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    line-height: 1.78 !important;
}
.g-content p { margin-bottom: 1.3em !important; }
.g-content h1, .g-content h2, .g-content h3 {
    margin-top: 1.8em !important;
    margin-bottom: 0.6em !important;
}
.g-content #table_filter_data { max-width: 100% !important; }

@media (max-width: 768px) {
    .g-content .article-body,
    .g-content .item-page,
    .itemView .g-content .g-block > div {
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 0.95rem !important;
    }
}

/* ============================================================
   SEARCH PILL STYLE (sources table)
   ============================================================ */
#table_filter_input {
    padding: 10px 16px 10px 42px !important;
    background: rgba(255, 255, 255, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2324a0ce' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 13px center !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 24px !important;
    min-width: 240px !important;
    width: 100% !important;
    max-width: 340px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: #0d3846 !important;
    font-family: 'e-Ukraine' !important;
}
#table_filter_input:focus {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(36, 160, 206, 0.6) !important;
    box-shadow: 0 6px 20px rgba(36, 160, 206, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    outline: none !important;
}

/* Sortable table header indicators */
#table_filter_data thead th { cursor: pointer !important; user-select: none !important; }
#table_filter_data thead th:hover { background: rgba(22, 100, 130, 0.85) !important; }
#table_filter_data thead th[aria-sort="ascending"]::after  { content: " \2191"; opacity: 0.75; }
#table_filter_data thead th[aria-sort="descending"]::after { content: " \2193"; opacity: 0.75; }

/* Social icons vector SVG fallbacks for footer to avoid FontAwesome missing/blocked issues and banish emojis */
.fa-instagram::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'%3E%3C/rect%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'%3E%3C/path%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}
.fa-facebook-f::before,
.fa-facebook::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}
.fa-telegram-plane::before,
.fa-telegram::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'%3E%3C/path%3E%3Cpath d='M22 2 11 13'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Ensure all inner page header backgrounds span full width, are centered, and repeat-free */
body:not(.home):not(.g-home-particles) #g-navigation,
body:not(.home):not(.g-home-particles) #g-header,
body:not(.home):not(.g-home-particles) .g-showcase:not(.home-showcase) {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Hide redundant old inline banner images from the main article content area */
body:not(.home):not(.g-home-particles) figure.item-image,
body:not(.home):not(.g-home-particles) .item-image,
body:not(.home):not(.g-home-particles) img[src*="/images/pages/about.webp"],
body:not(.home):not(.g-home-particles) img[src*="/images/pages/partners1.webp"],
body:not(.home):not(.g-home-particles) img[src*="/images/pages/vacancy.webp"],
body:not(.home):not(.g-home-particles) img[src*="/images/pages/sources.webp"],
body:not(.home):not(.g-home-particles) img[src*="/images/pages/development1.webp"],
body:not(.home):not(.g-home-particles) img[src*="/images/pages/terms.webp"],
body:not(.home):not(.g-home-particles) img[src*="ChatGPT"] {
    display: none !important;
}

/* ============================================================
   MILESTONE 13 REMEDIATION RULES
   ============================================================ */

/* 0. Smooth Scroll Behavior */
html {
    scroll-behavior: smooth !important;
}

/* 1. Header Transition (Shrink) & Glassmorphism Navigation */
#g-navigation {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease !important;
    padding: 24px 0 !important;
}

#g-navigation.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
}

[data-theme="dark"] #g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
}

@media (min-width: 768px) {
    #g-navigation {
        padding: 40px 0 !important; /* Taller on load (match prev2026) */
    }
    #g-navigation.scrolled {
        padding: 0 !important;
    }
}

@supports not (backdrop-filter: blur(10px)) {
    #g-navigation.scrolled {
        background-color: rgba(10, 40, 75, 0.98) !important;
    }
}

/* Force clean glassmorphic background when scrolled on all page variants */
body[class*="itemid-"] #g-navigation.scrolled,
body.translit-page #g-navigation.scrolled,
body.home #g-navigation.scrolled,
body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
}

/* 2. Prevent Menu Wrapping on Desktop Viewports */
@media (min-width: 992px) {
    .g-main-nav ul.g-toplevel {
        flex-wrap: nowrap !important;
        flex-direction: row !important;
    }
    .g-main-nav .g-menu-item {
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
}

/* 3. Language Switcher Dropdown Alignment (Prevent menu overlapping) */
.mod-languages__select .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

/* 4. Opportunities Tab Contrast Fix & jQuery UI Tab Reset */
.g-content-tabs .ui-tabs-nav li,
.g-contenttabs-container .ui-tabs-nav li,
.g-content-tabs .ui-tabs-nav li.ui-state-default,
.g-contenttabs-container .ui-tabs-nav li.ui-state-default,
.g-content-tabs .ui-tabs-nav li.g-contenttabs-tab-wrapper,
.g-contenttabs-container .ui-tabs-nav li.g-contenttabs-tab-wrapper,
.g-content-tabs .ui-tabs-nav li.g-contenttabs-tab-wrapper .g-contenttabs-tab-wrapper-head,
.g-contenttabs-container .ui-tabs-nav li.g-contenttabs-tab-wrapper .g-contenttabs-tab-wrapper-head {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
}

/* Inactive tabs - high contrast on dark showcase background */
.g-content-tabs ul.ui-tabs-nav li:not(.ui-tabs-active) a.g-contenttabs-tab,
.g-contenttabs-container ul.ui-tabs-nav li:not(.ui-tabs-active) a.g-contenttabs-tab {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    display: inline-block !important;
}
.g-content-tabs ul.ui-tabs-nav li:not(.ui-tabs-active) .g-contenttabs-tab-title,
.g-contenttabs-container ul.ui-tabs-nav li:not(.ui-tabs-active) .g-contenttabs-tab-title,
.g-content-tabs ul.ui-tabs-nav li:not(.ui-tabs-active) .g-contenttabs-tab-wrapper-head,
.g-contenttabs-container ul.ui-tabs-nav li:not(.ui-tabs-active) .g-contenttabs-tab-wrapper-head {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}

/* Active tabs - high contrast on dark showcase background */
.g-content-tabs ul.ui-tabs-nav li.ui-tabs-active a.g-contenttabs-tab,
.g-contenttabs-container ul.ui-tabs-nav li.ui-tabs-active a.g-contenttabs-tab {
    color: #0f172a !important;
    background: #38bdf8 !important;
    border: 1.5px solid #38bdf8 !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    display: inline-block !important;
    font-weight: bold !important;
}
.g-content-tabs ul.ui-tabs-nav li.ui-tabs-active .g-contenttabs-tab-title,
.g-contenttabs-container ul.ui-tabs-nav li.ui-tabs-active .g-contenttabs-tab-title,
.g-content-tabs ul.ui-tabs-nav li.ui-tabs-active .g-contenttabs-tab-wrapper-head,
.g-contenttabs-container ul.ui-tabs-nav li.ui-tabs-active .g-contenttabs-tab-wrapper-head {
    color: #0f172a !important;
    background: transparent !important;
    border: none !important;
}

/* 5. Prevent Placeholder Truncation on Mobile */
@media screen and (max-width: 576px) {
    #se-word-input::placeholder,
    input[type="search"]::placeholder,
    input[type="text"]::placeholder,
    #table_filter_input::placeholder {
        font-size: 0.8rem !important;
        text-overflow: clip !important;
    }
}

/* 6. Partners Logo Grid Reflow to Single Column on Mobile */
@media screen and (max-width: 576px) {
    .fp-features .g-grid,
    .fp-features .g-grid .g-block,
    body.itemid-140 .g-grid,
    body.itemid-140 .g-grid .g-block {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .fp-features .g-grid .g-block {
        padding: 0 !important;
        margin: 0 0 15px 0 !important;
    }
    .fp-features .card {
        padding: 10px !important;
        margin: 0 !important;
    }
    .fp-features .card-block {
        padding: 0 !important;
    }
    .fp-features .card img,
    .fp-features .g-block img {
        max-width: 80px !important;
        max-height: 80px !important;
        height: auto !important;
        margin: 0 auto 8px auto !important;
        display: block !important;
    }
    .fp-features .card p,
    .fp-features .g-block p {
        margin: 0 !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }
}

/* 7. FontAwesome Vector SVG Replacements (crisp on mobile, no empty box glyphs) */

/* Hamburger Bars Icon */
.fa-bars::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Keyboard Icon */
.fa-keyboard-o::before,
.fa-keyboard::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='6' y1='8' x2='6' y2='8'%3E%3C/line%3E%3Cline x1='10' y1='8' x2='10' y2='8'%3E%3C/line%3E%3Cline x1='14' y1='8' x2='14' y2='8'%3E%3C/line%3E%3Cline x1='18' y1='8' x2='18' y2='8'%3E%3C/line%3E%3Cline x1='6' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='10' y1='12' x2='10' y2='12'%3E%3C/line%3E%3Cline x1='14' y1='12' x2='14' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='18' y2='12'%3E%3C/line%3E%3Cline x1='7' y1='16' x2='17' y2='16'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Copy Icon */
.fa-copy::before,
.fa-clone::before,
.fa-files-o::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Trash Icon */
.fa-trash::before,
.fa-trash-o::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'%3E%3C/path%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Close/Times Icon */
.fa-times::before,
.fa-close::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Exchange Icon */
.fa-exchange::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 1 21 5 17 9'%3E%3C/polyline%3E%3Cline x1='3' y1='5' x2='21' y2='5'%3E%3C/line%3E%3Cpolyline points='7 23 3 19 7 15'%3E%3C/polyline%3E%3Cline x1='21' y1='19' x2='3' y2='19'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Refresh/Sync Icon */
.fa-refresh::before,
.fa-sync::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'%3E%3C/path%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Search Icon */
.fa-search::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

.se-special-chars .fa-search::before,
#se-word-input + button .fa-search::before,
.search-container .fa-search::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Warning Circle Icon */
.fa-exclamation-circle::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c92a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Cog/Settings Icon */
.fa-cog::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Link Icon */
.fa-link::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Expand Icon */
.fa-expand::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Edit / Pencil Icon */
.fa-pencil-square-o::before,
.fa-pencil-square::before,
.fa-edit::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* File Text Icon */
.fa-file-text-o::before,
.fa-file-text::before,
.fa-file-o::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Spinner Icon */
.fa-spinner::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
    animation: fa-spin 2s infinite linear !important;
}

/* Spinner animation helper */
@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Upload Icon */
.fa-upload::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Check / Success Icon */
.fa-check::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b8a3e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Download Icon */
.fa-download::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* Long Arrow Right Icon */
.fa-long-arrow-right::before {
    content: "" !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* 8. Table Client-Side Pagination UI */
.table-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 20px 0 30px 0 !important;
}

.table-pagination .page-btn {
    background: #ffffff !important;
    border: 1.5px solid #b8dff0 !important;
    border-radius: 4px !important;
    color: #1b5e73 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    font-family: 'e-Ukraine' !important;
}

.table-pagination .page-btn:hover:not(:disabled) {
    background: #e3f3f8 !important;
    border-color: #24a0ce !important;
    color: #166482 !important;
}

.table-pagination .page-btn.active {
    background: #166482 !important;
    border-color: #166482 !important;
    color: #ffffff !important;
    cursor: default !important;
}

.table-pagination .page-btn:disabled {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #bdbdbd !important;
    cursor: not-allowed !important;
}

/* ============================================================
   PARTNERS MOBILE RESPONSIVE STACKING
   ============================================================ */
@media (max-width: 576px) {
    body.itemid-140 table, 
    body.itemid-140 tbody, 
    body.itemid-140 tr, 
    body.itemid-140 td,
    body.itemid-130 table, 
    body.itemid-130 tbody, 
    body.itemid-130 tr, 
    body.itemid-130 td,
    body.itemid-148 table, 
    body.itemid-148 tbody, 
    body.itemid-148 tr, 
    body.itemid-148 td,
    body.itemid-206 table, 
    body.itemid-206 tbody, 
    body.itemid-206 tr, 
    body.itemid-206 td,
    body.itemid-196 table, 
    body.itemid-196 tbody, 
    body.itemid-196 tr, 
    body.itemid-196 td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border: none !important;
    }
    body.itemid-140 td img,
    body.itemid-130 td img,
    body.itemid-148 td img,
    body.itemid-206 td img,
    body.itemid-196 td img {
        margin: 0 auto 12px auto !important;
        max-width: 160px !important;
        width: 100% !important;
        height: auto !important;
        border: none !important;
    }
}

/* ============================================================
   LANGUAGE SWITCHER: Select Dropdown Style overrides
   ============================================================ */
.mod-languages-block .mod-languages__select select.form-select {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    padding: 6px 30px 6px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    height: auto !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 12px !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'e-Ukraine' !important;
    transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

.mod-languages-block .mod-languages__select select.form-select:hover,
.mod-languages-block .mod-languages__select select.form-select:focus {
    border-color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mod-languages-block .mod-languages__select select.form-select option {
    background-color: #166482 !important; /* Matches main menu theme background */
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* ============================================================
   ROBUST FLEX CENTERING FOR SITE HEADER NAVIGATION
   ============================================================ */
#g-navigation .g-grid > .g-block {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}
#g-navigation .g-grid > .g-block:nth-child(2) {
    flex: 1 1 auto !important;
}

/* ============================================================
   MILESTONE 14 FIXES (Sticky Scroll, Mob Logo, Dark Dropdown, Bg Cover, Partners Table Borders)
   ============================================================ */

/* 1. Enable Sticky Scroll by making page surround overflow visible */
#g-page-surround {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* 2. Glassmorphism navigation bar border and background tweaks - deep semi-transparent blue for main site theme */
#g-navigation.scrolled {
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
}

/* 3. Dark Language Switcher Dropdown Style - Completely transparent background per user request */
.mod-languages__select .dropdown-menu {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.mod-languages__select .dropdown-menu a {
    color: #ffffff !important;
    transition: color 0.2s ease !important;
}
.mod-languages__select .dropdown-menu a:hover,
.mod-languages__select .dropdown-menu a:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: #24a0ce !important;
    text-decoration: none !important;
}

/* 4. Desktop Navigation Grid Width Overrides */
@media (min-width: 992px) {
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:first-child {
        flex: 0 0 300px !important;
        max-width: 300px !important;
        width: 300px !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:nth-child(2) {
        flex: 1 1 auto !important;
        max-width: none !important;
        width: auto !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:last-child {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        overflow: visible !important;
    }
}

/* 5. Mobile Navigation Grid & Logo Sizing (320px - 991px viewports) */
@media (max-width: 991px) {
    #g-navigation .g-grid:has(.g-main-nav) {
        display: flex !important;
        flex-flow: row nowrap !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block {
        width: auto !important;
        max-width: none !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:first-child {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        width: 60% !important;
        padding-left: 56px !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:nth-child(2) {
        display: none !important; /* Hide main menu block to prevent squeezing */
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:last-child {
        flex: 0 0 35% !important;
        max-width: 35% !important;
        width: 35% !important;
        display: flex !important;
        justify-content: flex-end !important;
    }
    #g-navigation .g-logo,
    #g-navigation .g-logo-helium {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 50% !important;
        margin-top: -24px !important;
        z-index: 1000 !important;
        width: 180px !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

/* 6. Ensure All Inner Page Header Background Images Span Full-Width (No White Spaces) */
body[class*="itemid-"] #g-navigation,
body[class*="itemid-"] #g-header,
body[class*="itemid-"] #g-intro,
body[class*="itemid-"] .g-showcase:not(.home-showcase),
body.translit-page #g-navigation,
body.translit-page #g-header,
body.translit-page #g-intro,
body.translit-page .g-showcase:not(.home-showcase),
#g-header,
#g-intro,
.g-showcase:not(.home-showcase) {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 7. Remove Borders and Shadows from Partners Tables/Elements */
body.itemid-140 table, body.itemid-130 table, body.itemid-206 table, body.itemid-148 table, body.itemid-196 table,
body.itemid-140 tbody, body.itemid-130 tbody, body.itemid-206 tbody, body.itemid-148 tbody, body.itemid-196 tbody,
body.itemid-140 tr, body.itemid-130 tr, body.itemid-206 tr, body.itemid-148 tr, body.itemid-196 tr,
body.itemid-140 td, body.itemid-130 td, body.itemid-206 td, body.itemid-148 td, body.itemid-196 td,
body.itemid-140 img, body.itemid-130 img, body.itemid-206 img, body.itemid-148 img, body.itemid-196 img {
    border: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}



/* ============================================================
   INNER PAGES UNIQUE HEADER SEAMLESS INTEGRATION
   ============================================================ */

/* Make #g-navigation opaque on inner pages when not scrolled */
body:not(.home):not(.g-home-particles) #g-navigation:not(.scrolled) {
    background-image: none !important;
    background-color: #0a2850 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] body:not(.home):not(.g-home-particles) #g-navigation:not(.scrolled) {
    background-color: #0a2850 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Push #g-intro content below the absolute navigation bar (nav height matched with small elegant gap) */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
    margin-top: 0 !important;
    padding-top: 178px !important; /* 168px height + 10px gap */
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        margin-top: 0 !important;
        padding-top: 92px !important; /* 80px height + 12px gap */
    }
}

@media (max-width: 768px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        margin-top: 0 !important;
        padding-top: 76px !important; /* 64px height + 12px gap */
    }
}

/* Eliminate white top space inside the content card so the page-header banner touches the card top boundary */
body[class*="itemid-"]:not(.home):not(.g-home-particles) .com-content-article,
body[class*="itemid-"]:not(.home):not(.g-home-particles) .item-page {
    padding-top: 0 !important;
    overflow: visible !important;
}

/* 8. Shrink Logo and Navigation Height on Sticky Scroll by 15-20% */
#g-navigation.scrolled #g-logo,
#g-navigation.scrolled .g-logo,
#g-navigation.scrolled .g-logo-helium,
#g-navigation.scrolled #g-logo img,
#g-navigation.scrolled .g-logo img,
#g-navigation.scrolled .g-logo-helium img,
#g-navigation.scrolled .g-logo svg,
#g-navigation.scrolled .g-logo-helium svg {
    width: auto !important;
    height: 38px !important;
    transition: height 0.3s ease, width 0.3s ease !important;
}

@media (max-width: 991px) {
    #g-navigation.scrolled #g-logo,
    #g-navigation.scrolled .g-logo,
    #g-navigation.scrolled .g-logo-helium,
    #g-navigation.scrolled #g-logo img,
    #g-navigation.scrolled .g-logo img,
    #g-navigation.scrolled .g-logo-helium img,
    #g-navigation.scrolled .g-logo svg,
    #g-navigation.scrolled .g-logo-helium svg {
        width: 150px !important;
        transition: width 0.3s ease !important;
    }
}
#g-logo, .g-logo, .g-logo-helium, #g-logo img, .g-logo img, .g-logo-helium img, .g-logo svg, .g-logo-helium svg {
    transition: width 0.3s ease !important;
}

/* ============================================================
   REMEDIATIONS: Visual & Font styling
   ============================================================ */

/* 1. Absolute FontAwesome overrides (prevent squares instead of icons) */
@font-face {
    font-family: 'Font Awesome 5 Free';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 5 Free';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 5 Brands';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 6 Free';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FontAwesome';
    src: url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2'),
         url('/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* 2. Subpage header banner illustration restyling */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
    position: relative !important;
    background-color: #ffffff !important;
    background-image: none !important;
    z-index: 1 !important;
    box-shadow: none !important;
    border: none !important;
}

body[class*="itemid-"]:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 320px !important; /* Constrained height on desktop */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      url("/images/pages/ornament_banner1.webp") !important; /* Smooth fade-out in light theme */
    background-size: cover !important;
    background-position: center top !important; /* Align to top */
    background-repeat: no-repeat !important;
    z-index: -1 !important;
}

[data-theme="dark"] body[class*="itemid-"]:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      url("/images/pages/ornament_banner1.webp") !important; /* Smooth fade-out to dark theme background */
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before {
        height: 180px !important; /* Constrained height on mobile/tablet */
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 55px, #ffffff 92px, #ffffff 100%),
                          url("/images/pages/ornament_banner1.webp") !important;
    }
    [data-theme="dark"] body[class*="itemid-"]:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before {
        background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 55px, #0b0f19 92px, #0b0f19 100%),
                          url("/images/pages/ornament_banner1.webp") !important;
    }
}

@media (max-width: 768px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 45px, #ffffff 76px, #ffffff 100%),
                          url("/images/pages/ornament_banner1.webp") !important;
    }
    [data-theme="dark"] body[class*="itemid-"]:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before {
        background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 45px, #0b0f19 76px, #0b0f19 100%),
                          url("/images/pages/ornament_banner1.webp") !important;
    }
}

/* Page title styles inside intro banner */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Content spacing under banner */
body[class*="itemid-"]:not(.home):not(.g-home-particles) .com-content-article__body {
    margin-top: 32px !important;
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) .com-content-article__body {
        margin-top: 24px !important;
    }
}

/* 3. Page-specific backgrounds for #g-navigation.scrolled */
#g-navigation.scrolled {
    padding: 6px 0 !important;
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
}

[data-theme="dark"] #g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
}

@media (max-width: 991px) {
    #g-navigation.scrolled {
        padding: 4px 0 !important;
    }
}

/* Homepage scrolled navigation background */

/* About page scrolled navigation background */
body.itemid-139 #g-intro::before,
body.itemid-108 #g-intro::before,
body.itemid-205 #g-intro::before,
body.itemid-147 #g-intro::before,
body.itemid-195 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_about.webp") !important;
}
[data-theme="dark"] body.itemid-139 #g-intro::before,
[data-theme="dark"] body.itemid-108 #g-intro::before,
[data-theme="dark"] body.itemid-205 #g-intro::before,
[data-theme="dark"] body.itemid-147 #g-intro::before,
[data-theme="dark"] body.itemid-195 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_about.webp") !important;
}

/* Partners page scrolled navigation background */
body.itemid-140 #g-intro::before,
body.itemid-130 #g-intro::before,
body.itemid-206 #g-intro::before,
body.itemid-148 #g-intro::before,
body.itemid-196 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_partners.webp") !important;
}
[data-theme="dark"] body.itemid-140 #g-intro::before,
[data-theme="dark"] body.itemid-130 #g-intro::before,
[data-theme="dark"] body.itemid-206 #g-intro::before,
[data-theme="dark"] body.itemid-148 #g-intro::before,
[data-theme="dark"] body.itemid-196 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_partners.webp") !important;
}

/* Vacancies page scrolled navigation background */
body.itemid-141 #g-intro::before,
body.itemid-132 #g-intro::before,
body.itemid-207 #g-intro::before,
body.itemid-149 #g-intro::before,
body.itemid-197 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_vacancies.webp") !important;
}
[data-theme="dark"] body.itemid-141 #g-intro::before,
[data-theme="dark"] body.itemid-132 #g-intro::before,
[data-theme="dark"] body.itemid-207 #g-intro::before,
[data-theme="dark"] body.itemid-149 #g-intro::before,
[data-theme="dark"] body.itemid-197 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_vacancies.webp") !important;
}

/* Transliterator page scrolled navigation background */
body.itemid-176 #g-intro::before,
body.itemid-174 #g-intro::before,
body.itemid-208 #g-intro::before,
body.itemid-175 #g-intro::before,
body.itemid-198 #g-intro::before,
body.translit-page #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}
[data-theme="dark"] body.itemid-176 #g-intro::before,
[data-theme="dark"] body.itemid-174 #g-intro::before,
[data-theme="dark"] body.itemid-208 #g-intro::before,
[data-theme="dark"] body.itemid-175 #g-intro::before,
[data-theme="dark"] body.itemid-198 #g-intro::before,
[data-theme="dark"] body.translit-page #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0) 120px, #0f172a 178px, #0f172a 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}


/* Sources page scrolled navigation background */
body.itemid-144 #g-intro::before,
body.itemid-137 #g-intro::before,
body.itemid-210 #g-intro::before,
body.itemid-151 #g-intro::before,
body.itemid-200 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_sources.webp") !important;
}
[data-theme="dark"] body.itemid-144 #g-intro::before,
[data-theme="dark"] body.itemid-137 #g-intro::before,
[data-theme="dark"] body.itemid-210 #g-intro::before,
[data-theme="dark"] body.itemid-151 #g-intro::before,
[data-theme="dark"] body.itemid-200 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_sources.webp") !important;
}

/* Development page scrolled navigation background */
body.itemid-162 #g-intro::before,
body.itemid-169 #g-intro::before,
body.itemid-211 #g-intro::before,
body.itemid-166 #g-intro::before,
body.itemid-201 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_development.webp") !important;
}
[data-theme="dark"] body.itemid-162 #g-intro::before,
[data-theme="dark"] body.itemid-169 #g-intro::before,
[data-theme="dark"] body.itemid-211 #g-intro::before,
[data-theme="dark"] body.itemid-166 #g-intro::before,
[data-theme="dark"] body.itemid-201 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_development.webp") !important;
}

/* User Guide page scrolled navigation background */
body.itemid-177 #g-intro::before,
body.itemid-161 #g-intro::before,
body.itemid-168 #g-intro::before,
body.itemid-212 #g-intro::before,
body.itemid-165 #g-intro::before,
body.itemid-202 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_guide.webp") !important;
}
[data-theme="dark"] body.itemid-177 #g-intro::before,
[data-theme="dark"] body.itemid-161 #g-intro::before,
[data-theme="dark"] body.itemid-168 #g-intro::before,
[data-theme="dark"] body.itemid-212 #g-intro::before,
[data-theme="dark"] body.itemid-165 #g-intro::before,
[data-theme="dark"] body.itemid-202 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_guide.webp") !important;
}

/* Software page scrolled navigation background */
body.itemid-142 #g-intro::before,
body.itemid-214 #g-intro::before,
body.itemid-133 #g-intro::before,
body.itemid-213 #g-intro::before,
body.itemid-150 #g-intro::before,
body.itemid-203 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_software.webp") !important;
}
[data-theme="dark"] body.itemid-142 #g-intro::before,
[data-theme="dark"] body.itemid-214 #g-intro::before,
[data-theme="dark"] body.itemid-133 #g-intro::before,
[data-theme="dark"] body.itemid-213 #g-intro::before,
[data-theme="dark"] body.itemid-150 #g-intro::before,
[data-theme="dark"] body.itemid-203 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_software.webp") !important;
}

/* Terms page scrolled navigation background */
body.itemid-154 #g-intro::before,
body.itemid-153 #g-intro::before,
body.itemid-209 #g-intro::before,
body.itemid-152 #g-intro::before,
body.itemid-199 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_terms.webp") !important;
}
[data-theme="dark"] body.itemid-154 #g-intro::before,
[data-theme="dark"] body.itemid-153 #g-intro::before,
[data-theme="dark"] body.itemid-209 #g-intro::before,
[data-theme="dark"] body.itemid-152 #g-intro::before,
[data-theme="dark"] body.itemid-199 #g-intro::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_terms.webp") !important;
}

/* 4. Menu link color legibility overrides on sticky header scroll */
#g-navigation.scrolled .g-main-nav .g-toplevel > li > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li > .g-menu-item-container a {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
#g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 5. Mobile hamburger menu layout and scroll fixes */
@media (max-width: 991px) {
    .g-offcanvas-toggle {
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        z-index: 10005 !important;
        transition: background-color 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: rgba(10, 40, 75, 0.5) !important;
    }
    .g-offcanvas-toggle.scrolled {
        background: rgba(10, 40, 75, 0.85) !important;
    }
    .g-offcanvas-toggle i {
        font-size: 1.3rem !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}
@media (min-width: 992px) {
    .g-offcanvas-toggle {
        display: none !important;
    }
}

/* ============================================================
   TRANSLITERATOR ACTION BUTTONS & ICONS (Vector SVG Fallbacks)
   ============================================================ */

/* Common base styles for replacement vector icons */
.fa-link::before,
.fa-expand::before,
.fa-pencil-square-o::before,
.fa-file-text-o::before,
.fa-spinner::before,
.fa-upload::before,
.fa-check::before,
.fa-download::before,
.fa-long-arrow-right::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    vertical-align: -0.15em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Pencil Square (Edit Inline Mode Tab Icon) */
.fa-pencil-square-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") !important;
}
.translit-main .tab button.active .fa-pencil-square-o::before,
.translit-main .tab button:hover .fa-pencil-square-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* File Text (File Mode Tab Icon) */
.fa-file-text-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
.translit-main .tab button.active .fa-file-text-o::before,
.translit-main .tab button:hover .fa-file-text-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Link Icon */
.fa-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E") !important;
}
.custom-to-clip3:hover .fa-link::before,
.custom-to-clip3:focus .fa-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Expand Icon */
.fa-expand::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") !important;
}
.custom-to-clip2:hover .fa-expand::before,
.custom-to-clip2:focus .fa-expand::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Spinner (Loading) Icon */
.fa-spinner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E") !important;
    animation: fa-spin 2s infinite linear !important;
}
.btn-primary .fa-spinner::before,
button .fa-spinner::before,
#transliterate_file .fa-spinner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Upload Icon */
.fa-upload::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}
.tr-file-upload:hover .fa-upload::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Checkmark Icon */
.fa-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
#transliterate_file .fa-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Download Icon */
.fa-download::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") !important;
}
.link-container a:hover .fa-download::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* Long Arrow Right Icon */
.fa-long-arrow-right::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Keyframes for spinning animation */
@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================
   CLS FIX: Transliterator Interface Min-Height Reserve Space
   ============================================================ */
body.itemid-141 #g-features .g-container,
body.itemid-132 #g-features .g-container,
body.itemid-207 #g-features .g-container {
    min-height: 520px;
}

@media (max-width: 991px) {
    body.itemid-141 #g-features .g-container,
    body.itemid-132 #g-features .g-container,
    body.itemid-207 #g-features .g-container {
        min-height: 600px;
    }
}

@media (max-width: 768px) {
    body.itemid-141 #g-features .g-container,
    body.itemid-132 #g-features .g-container,
    body.itemid-207 #g-features .g-container {
        min-height: 750px;
    }
}

@media (max-width: 390px) {
    body.itemid-141 #g-features .g-container,
    body.itemid-132 #g-features .g-container,
    body.itemid-207 #g-features .g-container {
        min-height: 780px;
    }
}

/* ============================================================
   CLS FIX: About Page Article Body Image Aspect Ratio
   ============================================================ */
body.itemid-139 .com-content-article__body img,
body.itemid-108 .com-content-article__body img,
body.itemid-205 .com-content-article__body img,
body.itemid-147 .com-content-article__body img,
body.itemid-195 .com-content-article__body img,
body.itemid-139 .item-image img,
body.itemid-108 .item-image img,
body.itemid-205 .item-image img,
body.itemid-147 .item-image img,
body.itemid-195 .item-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1920 / 350 !important;
}

body.itemid-139 .item-image,
body.itemid-108 .item-image,
body.itemid-205 .item-image,
body.itemid-147 .item-image,
body.itemid-195 .item-image {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1920 / 350 !important;
    overflow: hidden !important;
}





/* Reserve height for Transliterator toggle block to prevent CLS shift */
#tr_inline {
    min-height: 48px !important;
}

/* Ensure stable height for subpage header intro section to prevent CLS shifts */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
    min-height: 300px !important;
}
@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        min-height: 220px !important;
    }
}

/* CLS FIX: Hide sources table rows beyond page size before JS pagination runs */
#table_filter_data:not(.js-initialized) tbody tr:nth-child(n+21) {
    display: none;
}

/* CLS FIX: Prevent layout shift during H2 -> H1 replacement on Transliterator page */
.translit-page .module-heading h2,
.translit-page .module-heading h1 {
    font-size: 2.2rem !important;
    line-height: 1.2 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}
@media (max-width: 768px) {
    .translit-page .module-heading h2,
    .translit-page .module-heading h1 {
        font-size: 1.8rem !important;
    }
}

/* CLS FIX: Ensure stable height for Transliterator page main content area to anchor footer */
body.translit-page #g-main {
    min-height: 400px !important;
}
@media (max-width: 768px) {
    body.translit-page #g-main {
        min-height: 320px !important;
    }
}

/* Optimize homepage vertical spacing */
body.home #g-intro,
body.home #g-features,
body.home #g-utility,
body.home #g-expanded {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
body.home #g-intro {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
body.home .g-content {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Dropdown Arrow Vector SVG Replacement (no empty box glyphs) */
.g-menu-parent-indicator::before,
.fa-angle-down::before {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    vertical-align: middle !important;
    margin-left: 5px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* ============================================================
   SPRINT 3 - ADDITIONAL STYLING FIXES (Header, Mobile Toggle, Language Switcher, Transliterator, Footer, Lists)
   ============================================================ */

/* 1. Scrolled Header - Glassmorphism, Transition and Height */
#g-navigation {
    transition: padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s ease, background-image 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease !important;
}

#g-navigation.scrolled {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure intermediate header container elements vertically center the logo and language switcher */
#g-navigation .g-block,
#g-navigation .g-content,
#g-navigation .platform-content,
#g-navigation .moduletable {
    display: flex !important;
    align-items: center !important;
}

/* 2. Mobile Hamburger Menu / Offcanvas Toggle Alignment */
@media (max-width: 991px) {
    .g-offcanvas-toggle {
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        right: auto !important;
        z-index: 10005 !important;
        transition: background-color 0.2s ease !important;
    }
    .g-offcanvas-toggle.scrolled {
        width: 36px !important;
        height: 36px !important;
    }
    /* Shift mobile/tablet logo to the right to leave safe space for hamburger menu */
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:first-child {
        padding-left: 54px !important;
    }
}

/* 3. Language Switcher Button & Dropdown Styles (No Clipping, Full Words) */
.mod-languages-block {
    margin-left: auto !important; /* Align to the right */
}
.mod-languages__select button.dropdown-toggle {
    white-space: nowrap !important; /* Prevent text wrapping inside button */
    max-width: 100% !important;
}
.mod-languages__select .dropdown-menu {
    min-width: 160px !important; /* Ensure dropdown fits the widest name */
    width: max-content !important;
}
@media (max-width: 991px) {
    .mod-languages__select button.dropdown-toggle {
        font-size: 0.72rem !important; /* Slightly smaller font size on mobile/tablet to avoid overflow */
        padding: 4px 8px !important;
    }
}

/* Dropdown Arrow Vector SVG Replacement for language switcher */
.mod-languages__select button.dropdown-toggle::after {
    content: "" !important;
    display: inline-block !important;
    width: 9px !important;
    height: 9px !important;
    vertical-align: middle !important;
    margin-left: 5px !important;
    border: none !important; /* Remove bootstrap border caret */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
    background-size: contain !important;
}

/* 4. Remove Dropdown Arrow Empty Glyphs */
.g-menu-parent-indicator::after,
.fa-angle-down::after {
    display: none !important;
    content: "" !important;
}

/* 5. Remove Hover Underlines on Menu Links & Switchers */
.g-main-nav a:hover,
.g-main-nav a:focus,
.g-main-nav .g-menu-item-container:hover,
.mod-languages a:hover,
.mod-languages a:focus,
.mod-languages__select button:hover,
.mod-languages__select button:focus,
.g-offcanvas-toggle:hover,
.g-offcanvas-toggle:focus {
    text-decoration: none !important;
}

/* 6. Sticky Footer & Footer Styling (Absolute Bottom) */
#g-page-surround {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
footer, #g-footer {
    margin-top: auto !important; /* Push footer to absolute bottom */
}
#g-footer,
#g-footer *,
#g-footer .g-copyright,
#g-footer .g-horizontalmenu a,
#g-footer .g-social a {
    font-family: 'e-Ukraine', sans-serif !important;
}

/* 7. e-Ukraine Font Coverage on Transliterator Page */
.translit-page,
.translit-page *,
.translit-main,
.translit-main *,
.key, .caps, .space, .delete, .shift,
#source_text, #target_text,
#translit_inp, #translit_out {
    font-family: 'e-Ukraine', sans-serif !important;
}

/* 8. Transliterator Character Selector / Action buttons layout wraps */
@media (min-width: 768px) {
    #tr_inline .g-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
    #tr_inline .g-grid > .g-block.size-46 {
        flex: 0 0 46% !important;
        width: 46% !important;
        max-width: 46% !important;
    }
    #tr_inline .g-grid > .g-block.size-8 {
        flex: 0 0 8% !important;
        width: 8% !important;
        max-width: 8% !important;
    }
}
@media (max-width: 767px) {
    #tr_inline .g-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    #tr_inline .g-grid > .g-block {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #tr_inline .g-grid > .g-block.size-8 {
        text-align: center !important;
        margin: 15px 0 !important;
    }
    #tr_inline .translit-arrow i {
        transform: rotate(90deg) !important;
    }
}

/* 9. Professional Bullet List Spacings inside articles */
.com-content-article__body ul {
    list-style-type: disc !important;
    margin-top: 12px !important;
    margin-bottom: 18px !important;
    padding-left: 28px !important;
}
.com-content-article__body li {
    margin-bottom: 8px !important;
    line-height: 1.62 !important;
    padding-left: 4px !important;
}

/* 10. Mobile/Tablet Content Offset (Prevent overlay hide) */
@media (max-width: 768px) {
    body:not(.home) #g-showcase,
    body:not(.home) #g-intro,
    body:not(.home) #g-main {
        margin-top: 90px !important; /* Push down content from sticky transparent header */
    }
}


/* 11. Search Input Vertical Centering, Height Stability & Focus Outline Overrides */
.se-input-wrapper {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
}
.se-input-wrapper input[type="search"],
#se-word-input {
    height: 100% !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 48px !important;
}
.se-input-wrapper input[type="search"]:focus,
#se-word-input:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* ============================================================
   GLASSMORPHISM AND HEADER STYLING REINFORCEMENTS
   ============================================================ */

/* Force clean glassmorphic background (no background image) when scrolled on all page variants */
#g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Ensure homepage not scrolled is completely transparent */
body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled),
body.itemid-138 #g-navigation:not(.scrolled),
body.itemid-146 #g-navigation:not(.scrolled),
body.itemid-104 #g-navigation:not(.scrolled) {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* ============================================================
   UNIFIED TABLE STYLING & MOBILE CARD LAYOUT
   ============================================================ */
.item-page table,
.g-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 20px 0 !important;
    font-size: 0.9rem !important;
    text-align: left !important;
}

.item-page table th,
.item-page table td,
.g-content table th,
.g-content table td {
    padding: 10px 12px !important;
    border: 1px solid #e0e0e0 !important;
}

.item-page table td:first-child,
.g-content table td:first-child {
    width: 15% !important;
    min-width: 80px !important;
    font-weight: 600 !important;
}

.item-page table td:nth-child(2),
.g-content table td:nth-child(2) {
    width: 25% !important;
    min-width: 120px !important;
}

.item-page table td:last-child,
.g-content table td:last-child {
    width: auto !important;
}
@media screen and (max-width: 767px) {
    #table_filter_data td:first-child,
    #table_filter_data td:nth-child(2),
    #table_filter_data td:last-child {
        width: auto !important;
        min-width: unset !important;
        font-weight: normal !important;
    }
}

@media (max-width: 768px) {
    .item-page table:not(#table_filter_data),
    .g-content table:not(#table_filter_data) {
        border: none !important;
    }
    
    .item-page table:not(#table_filter_data) thead,
    .g-content table:not(#table_filter_data) thead,
    .item-page table:not(#table_filter_data) tr:first-child:not(:has(td)),
    .g-content table:not(#table_filter_data) tr:first-child:not(:has(td)) {
        display: none !important;
    }

    .item-page table:not(#table_filter_data) tr,
    .g-content table:not(#table_filter_data) tr {
        display: block !important;
        border: 1px solid #ddd !important;
        margin-bottom: 12px !important;
        border-radius: 6px !important;
        background: #fff !important;
        padding: 8px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }

    .item-page table:not(#table_filter_data) td,
    .g-content table:not(#table_filter_data) td {
        display: block !important;
        text-align: right !important;
        padding: 8px 10px !important;
        border: none !important;
        border-bottom: 1px dashed #eee !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .item-page table:not(#table_filter_data) td:last-child,
    .g-content table:not(#table_filter_data) td:last-child {
        border-bottom: none !important;
    }

    .item-page table:not(#table_filter_data) td::before,
    .g-content table:not(#table_filter_data) td::before {
        content: attr(data-label) !important;
        float: left !important;
        font-weight: bold !important;
        color: #166482 !important;
        margin-right: 15px !important;
        text-transform: uppercase !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   ADDITIONAL OVERRIDES: SPRINT 4 SKEPTIC Rework & Alignment
   ============================================================ */
#g-navigation {
    position: relative !important;
}

/* Hide Language Column (second column of table) */
.hide-lang-col th:nth-child(2),
.hide-lang-col td:nth-child(2) {
    display: none !important;
}

/* Cell Alignments (text left-aligned, numbers/pagination centered) */
.item-page table th,
.item-page table td,
.g-content table th,
.g-content table td {
    text-align: left !important;
}

.item-page table td.num,
.item-page table td.words,
.item-page table td.year,
.item-page table td.pages,
.g-content table td.num,
.g-content table td.words,
.g-content table td.year,
.g-content table td.pages {
    text-align: center !important;
}

.item-page table th.num,
.item-page table th.words,
.item-page table th.year,
.item-page table th.pages,
.g-content table th.num,
.g-content table th.words,
.g-content table th.year,
.g-content table th.pages {
    text-align: center !important;
}

/* Pagination container alignment: centered */
.table-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 24px 0 !important;
    width: 100% !important;
    font-family: 'e-Ukraine' !important;
}

/* Modern, subtle alternative to traditional underlines site-wide */
a {
    text-decoration: none !important;
}

html:not(.dark):not([data-theme="dark"]) .item-page a:not(.btn):not(.button):not(.page-btn):not(.era-filter-btn):not(.view-toggle-btn),
html:not(.dark):not([data-theme="dark"]) .g-content a:not(.btn):not(.button):not(.page-btn):not(.era-filter-btn):not(.view-toggle-btn) {
    color: #1b759c !important;
    border-bottom: 1px dashed rgba(27, 117, 156, 0.4) !important;
}

.item-page a:not(.btn):not(.button):not(.page-btn):not(.era-filter-btn):not(.view-toggle-btn),
.g-content a:not(.btn):not(.button):not(.page-btn):not(.era-filter-btn):not(.view-toggle-btn) {
    border-bottom: 1px dashed rgba(36, 160, 206, 0.4) !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    padding-bottom: 1px !important;
}

.item-page a:not(.btn):not(.button):not(.page-btn):not(.era-filter-btn):not(.view-toggle-btn):hover,
.g-content a:not(.btn):not(.button):not(.page-btn):not(.era-filter-btn):not(.view-toggle-btn):hover {
    border-bottom-style: solid !important;
    border-bottom-color: rgba(36, 160, 206, 1.0) !important;
    color: #24a0ce !important;
    text-decoration: none !important;
}

/* Bibliography View Styles (APA / Citation format) */
.bibliography-container {
    display: none;
    margin: 20px 0 !important;
}

.bibliography-entry {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    font-family: 'e-Ukraine' !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #1a4957 !important;
    transition: all 0.2s ease !important;
}

.bibliography-entry:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

.bib-author {
    font-weight: 700 !important;
    color: #166482 !important;
}

.bib-year {
    font-weight: 600 !important;
}

.bib-title {
    font-style: italic !important;
    color: #0b2e3a !important;
}

/* View Toggle Button Styles */
.view-toggle-container {
    display: flex;
    gap: 8px;
    margin: 16px 0 !important;
    justify-content: flex-start;
}

.view-toggle-btn {
    background: rgba(240, 248, 255, 0.85) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    border: 1px solid rgba(36, 160, 206, 0.3) !important;
    border-radius: 20px !important;
    color: #0d3846 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-family: 'e-Ukraine' !important;
}

.view-toggle-btn:hover {
    background: rgba(36, 160, 206, 0.15) !important;
    border-color: rgba(36, 160, 206, 0.5) !important;
    color: #166482 !important;
}

.view-toggle-btn.active {
    background: linear-gradient(135deg, rgba(22, 100, 130, 0.85), rgba(36, 160, 206, 0.85)) !important;
    border-color: rgba(22, 100, 130, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(22, 100, 130, 0.25) !important;
}

/* Unify all subpage header banners to use the standard ornament banner */
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-intro::before,
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) #g-header,
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101):not(.itemid-139):not(.itemid-108):not(.itemid-205):not(.itemid-147):not(.itemid-195):not(.itemid-140):not(.itemid-130):not(.itemid-206):not(.itemid-148):not(.itemid-196):not(.itemid-141):not(.itemid-132):not(.itemid-207):not(.itemid-149):not(.itemid-197):not(.itemid-154):not(.itemid-153):not(.itemid-209):not(.itemid-152):not(.itemid-199):not(.itemid-144):not(.itemid-137):not(.itemid-210):not(.itemid-151):not(.itemid-200):not(.itemid-142):not(.itemid-214):not(.itemid-133):not(.itemid-213):not(.itemid-150):not(.itemid-203):not(.itemid-162):not(.itemid-169):not(.itemid-211):not(.itemid-166):not(.itemid-201):not(.itemid-177):not(.itemid-161):not(.itemid-168):not(.itemid-212):not(.itemid-165):not(.itemid-202) .g-showcase:not(.home-showcase) {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/images/pages/ornament_banner1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Unify all footer backgrounds to use the standard ornament banner */
#g-footer,
#g-copyright {
    background-color: #0a284b !important; /* Stable dark-blue fallback color */
    background-image: linear-gradient(rgba(10, 40, 75, 0.90), rgba(10, 40, 75, 0.90)),
                      url("/images/pages/ornament_banner1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: #ffffff !important;
}

/* Neutralize default template backgrounds on footer particles and copyright blocks */
#g-footer *,
#g-copyright * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Align the footer logo left with proper spacing from the edge for visual balance */
#g-footer .g-logo,
#g-footer .g-logo-helium,
#g-footer .g-logo svg,
#g-footer .g-logo img,
#g-footer .g-logo-helium svg,
#g-footer .g-logo-helium img {
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
}

/* Fix footer side margins/padding to prevent squishing on tablet and mobile */
#g-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
}
#g-footer .g-container,
#g-copyright .g-container {
    max-width: 100% !important;
    width: auto !important;
    box-sizing: border-box !important;
}
@media (min-width: 768px) {
    #g-footer {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
    #g-footer .g-grid,
    #g-copyright .g-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    #g-footer .g-block,
    #g-copyright .g-block {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #g-footer .g-horizontalmenu,
    #g-footer .g-social {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Center mobile logo horizontally on mobile devices */
@media (max-width: 991px) {
    #g-navigation .g-logo,
    #g-navigation .g-logo-helium,
    #g-navigation .g-logo img,
    #g-navigation .g-logo svg {
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
    }
}

/* Center mobile hamburger button vertically in the navigation bar */
@media (max-width: 991px) {
    .g-offcanvas-toggle {
        position: fixed !important;
        top: 16px !important;
        transform: none !important;
        left: 16px !important;
        z-index: 10005 !important;
        margin: 0 !important;
    }
    .g-offcanvas-toggle.scrolled {
        top: 16px !important;
        transform: none !important;
    }
}

/* Ensure font family is strictly e-Ukraine throughout (excluding FontAwesome) */
body, html, p, span, a, h1, h2, h3, h4, h5, h6, li, ul, ol, div:not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]), input, button, select, textarea {
    font-family: 'e-Ukraine', sans-serif !important;
}
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
}

/* Remove link underlines globally site-wide, including in footer links */
a,
a:hover,
a:focus,
#g-footer a,
#g-footer a:hover,
#g-footer a:focus,
.g-main-nav a,
.mod-languages a {
    text-decoration: none !important;
}

/* Prevent social media links wrapping and align them cleanly */
#g-footer .g-social a {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Offset subpage content below absolute navigation bar (nav height matched with small elegant gap) */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
    padding-top: 178px !important;
}
@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        padding-top: 92px !important;
    }
}
@media (max-width: 767px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        padding-top: 76px !important;
    }
}

/* Language switcher glassmorphism styling */
.mod-languages ul.lang-block,
.mod-languages ul.lang-inline,
.mod-languages .lang-dropdown,
.mod-languages select {
    background-color: rgba(10, 40, 75, 0.65) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    padding: 8px !important;
}

/* Page header and visual heading hierarchy */
#g-intro .page-header h1,
.item-page h1,
.com-content-article h1,
h1 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
    color: #0b284b !important;
}

/* Override: Inner page banner title — direct dark background for reliable contrast */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header {
    background: linear-gradient(135deg, rgba(10, 40, 80, 0.92), rgba(22, 100, 130, 0.85));
    padding: 178px 0 95px 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: -178px !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* contain the pseudo-element fade overlay */
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header {
        margin-top: -92px !important;
        padding: 92px 0 65px 0 !important;
    }
}

@media (max-width: 767px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header {
        margin-top: -76px !important;
        padding: 76px 0 50px 0 !important;
    }
}

body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header h1 {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 0 !important;
    font-size: 2rem !important;
    position: relative !important;
    z-index: 2 !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

/* Software page wider layout overrides for desktop */
@media (min-width: 1200px) {
    body.itemid-142 .g-content .item-page,
    body.itemid-214 .g-content .item-page,
    body.itemid-133 .g-content .item-page,
    body.itemid-213 .g-content .item-page,
    body.itemid-150 .g-content .item-page,
    body.itemid-203 .g-content .item-page {
        max-width: 960px !important;
    }
    body.itemid-142 #g-intro .page-header h1,
    body.itemid-214 #g-intro .page-header h1,
    body.itemid-133 #g-intro .page-header h1,
    body.itemid-213 #g-intro .page-header h1,
    body.itemid-150 #g-intro .page-header h1,
    body.itemid-203 #g-intro .page-header h1 {
        max-width: 960px !important;
    }
}

/* Premium Glassmorphic Gradient Overlay with Soft Fade-out for Full-Width Page Header */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.8) 85%, #ffffff 100%) !important;
    transition: background 0.3s ease !important;
}

[data-theme="dark"] body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header::after {
    background: linear-gradient(to bottom, rgba(11, 15, 25, 0) 60%, rgba(11, 15, 25, 0.8) 85%, #0b0f19 100%) !important;
}

h2 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    color: #113860 !important;
}

h3 {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    color: #166482 !important;
}

h4 {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    color: #1b7fa5 !important;
}

/* Page text readability formatting */
.item-page p,
.com-content-article__body p {
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
    color: #333333 !important;
    margin-bottom: 1.5rem !important;
}

.text-highlight {
    background: linear-gradient(120deg, rgba(36, 160, 206, 0.15) 0%, rgba(36, 160, 206, 0.05) 100%) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* ============================================================
   SPRINT 4 - MOBILE HOMEPAGE & LOCALIZATION CORRECTIONS
   ============================================================ */

/* Global absolute positioning for unscrolled header overlay */
#g-navigation:not(.scrolled) {
    background-image: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Align and layout mobile header items on illustration background */
@media (max-width: 991px) {
    #g-navigation {
        min-height: 64px !important;
        display: flex !important;
        align-items: center !important;
    }
    #g-navigation:not(.scrolled) {
        background-color: rgba(10, 40, 75, 0.45) !important;
        backdrop-filter: blur(12px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
        border-bottom: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    }
    #g-navigation .g-container {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
    }
    #g-navigation .g-grid {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        position: relative !important;
    }
    #g-navigation .g-block {
        width: auto !important;
        flex: 0 0 auto !important;
    }
    #g-navigation .g-logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10002 !important;
    }
    #g-navigation .mod-languages-block {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10003 !important;
        width: auto !important;
        max-width: 170px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
    }
    #g-navigation .mod-languages-block .theme-toggle-btn {
        margin: 0 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
    }
    #g-navigation .mod-languages__select button.dropdown-toggle {
        max-width: 110px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 0.75rem !important;
        padding-left: 6px !important;
        padding-right: 18px !important;
        letter-spacing: -0.01em !important;
    }
    .g-offcanvas-toggle {
        position: fixed !important;
        top: 16px !important;
        transform: none !important;
        left: 16px !important;
        z-index: 10005 !important;
        margin: 0 !important;
    }
}

/* Shift homepage content below absolute header overlay */
body.home #g-header,
body.home #g-showcase,
body.home #g-intro {
    padding-top: 100px !important;
}
@media (max-width: 991px) {
    body.home #g-header,
    body.home #g-showcase,
    body.home #g-intro {
        padding-top: 75px !important;
    }
}

/* Fix header illustration repeating twice and cover positioning */
#g-header,
#g-showcase,
.g-showcase,
#g-intro {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: top center !important;
}

/* Fix top white stripes and margins */
html, body, #g-page-surround {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Special character helper buttons mobile alignment */
@media (max-width: 767px) {
    .se-special-chars {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        margin: 10px 0 0 0 !important;
        width: 100% !important;
    }
    .se-chars-label {
        width: auto !important;
        margin-bottom: 0 !important;
    }
}

/* Force view toggle switchers to a single line on mobile */
.view-toggle-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 15px auto !important;
}
.view-toggle-btn {
    flex: 1 1 auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
@media (max-width: 480px) {
    .view-toggle-btn {
        font-size: 0.72rem !important;
        padding: 6px 8px !important;
    }
}

/* Subtle premium glassmorphism effect for content containers */
.item-page,
.com-content-article,
#se_search_module,
.se-search-module,
#table_filter_data {
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px -12px rgba(10, 40, 75, 0.06), 0 1px 3px rgba(0, 0, 0, 0.01) !important;
    padding: 36px 40px !important; /* Premium inner padding to prevent text touching borders */
}

@media (max-width: 768px) {
    .item-page,
    .com-content-article,
    #se_search_module,
    .se-search-module,
    #table_filter_data {
        padding: 24px 20px !important;
    }
}

/* Global Mobile and Tablet Layout Spacing and Footer fixes (Sprint 4 Audit Fixes) */
@media (max-width: 768px) {
    /* 1. Prevent absolute header overlapping content */
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-mainbody,
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-mainbody .item-page {
        padding-top: 80px !important;
    }
    
    /* 2. Responsive stacking for partners tables and generic tables with logos */
    .item-page table:not(#table_filter_data), 
    .item-page table:not(#table_filter_data) tbody, 
    .item-page table:not(#table_filter_data) tr, 
    .item-page table:not(#table_filter_data) td,
    .g-content table:not(#table_filter_data), 
    .g-content table:not(#table_filter_data) tbody, 
    .g-content table:not(#table_filter_data) tr, 
    .g-content table:not(#table_filter_data) td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border: none !important;
        padding: 8px 0 !important;
    }
    .item-page td img,
    .g-content td img {
        margin: 0 auto 12px auto !important;
        max-width: 160px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        border: none !important;
    }
    
    /* 3. Footer Gantry columns wrapping and alignment */
    #g-footer .g-grid,
    #g-copyright .g-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        text-align: center !important;
    }
    #g-footer .g-block,
    #g-copyright .g-block {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    #g-footer .g-social,
    #g-copyright .g-social {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    #g-footer .g-horizontalmenu,
    #g-footer .g-horizontalmenu ul,
    #g-footer ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 15px !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    #g-footer .g-horizontalmenu li,
    #g-footer li {
        display: inline-block !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   JOOMLA GANTRY 5 DARK THEME (Slate Dark Mode Override)
   ============================================================ */
[data-theme="dark"] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}
[data-theme="dark"] body,
[data-theme="dark"] #g-page-surround {
    background-color: #0f172a !important;
    background-image: none !important; /* Remove Gantry light bg images */
    color: #cbd5e1 !important;
}

/* Sections */
[data-theme="dark"] #g-header,
[data-theme="dark"] #g-navigation {
    background-color: rgba(15, 23, 42, 0.75) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #g-navigation.scrolled {
    background-color: rgba(15, 23, 42, 0.9) !important;
}
[data-theme="dark"] #g-showcase,
[data-theme="dark"] #g-mainbody,
[data-theme="dark"] #g-intro,
[data-theme="dark"] #g-features,
[data-theme="dark"] #g-utility,
[data-theme="dark"] #g-expanded {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] #g-intro,
[data-theme="dark"] #g-utility {
    background-color: #0b0f19 !important; /* Slightly darker slate-950 panels for contrast */
}
/* Fix white side strips on inner pages in dark theme */
[data-theme="dark"] #g-intro .g-container,
[data-theme="dark"] #g-intro .g-grid,
[data-theme="dark"] #g-intro .g-block,
[data-theme="dark"] #g-intro .g-content,
[data-theme="dark"] #g-intro .item-page,
[data-theme="dark"] #g-intro .com-content-article,
[data-theme="dark"] #g-mainbar,
[data-theme="dark"] #g-sidebar,
[data-theme="dark"] #g-container-main,
[data-theme="dark"] #g-mainbody .g-container,
[data-theme="dark"] #g-mainbody .g-grid,
[data-theme="dark"] #g-mainbody .g-block,
[data-theme="dark"] #g-mainbody .g-content,
[data-theme="dark"] #g-mainbody .item-page,
[data-theme="dark"] #g-mainbody .com-content-article {
    background-color: transparent !important;
    background: transparent !important;
}
[data-theme="dark"] body[class*="itemid-"]:not(.home) #g-intro {
    background-color: #0b0f19 !important;
}
[data-theme="dark"] #g-footer,
[data-theme="dark"] #g-copyright {
    background-color: #070a12 !important;
    color: #94a3b8 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Card components */
[data-theme="dark"] .card,
[data-theme="dark"] .fp-features .card,
[data-theme="dark"] .g-features .card,
html.dark .card,
html.dark .fp-features .card,
html.dark .g-features .card {
    background-color: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
}

/* Input wrappers */
[data-theme="dark"] .se-input-wrapper {
    background-color: #1e293b !important;
    border-color: #38bdf8 !important;
}
[data-theme="dark"] .se-input-wrapper input[type="search"] {
    color: #f8fafc !important;
}

/* Headings & Text */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .g-logo-title,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .g-showcase-title,
[data-theme="dark"] .fp-intro h1 {
    color: #f8fafc !important;
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] span,
[data-theme="dark"] a {
    color: #cbd5e1 !important;
}
[data-theme="dark"] a:hover {
    color: #38bdf8 !important;
}

/* Gantry Navigation Links */
[data-theme="dark"] .g-main-nav .g-toplevel > li > .g-menu-item-container,
[data-theme="dark"] .g-main-nav .g-toplevel > li > .g-menu-item-container a {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
[data-theme="dark"] .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
[data-theme="dark"] .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
[data-theme="dark"] .g-main-nav .g-toplevel > li:hover > .g-menu-item-container a {
    color: #38bdf8 !important;
}

/* Theme toggle button (.theme-toggle-btn injected by custom.js) */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    cursor: pointer !important;
    padding: 6px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #ffffff !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
}
.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}
[data-theme="dark"] .theme-toggle-btn {
    color: #f8fafc !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Language switcher button overrides */
[data-theme="dark"] .mod-languages__select button,
[data-theme="dark"] .lang-btn {
    color: #cbd5e1 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .mod-languages__select button:hover,
[data-theme="dark"] .lang-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .mod-languages__select ul.lang-block {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}
[data-theme="dark"] .mod-languages__select ul.lang-block li a {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .mod-languages__select ul.lang-block li a:hover {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* Custom premium card containers glassmorphism in Dark Mode */
[data-theme="dark"] .item-page,
[data-theme="dark"] .com-content-article,
[data-theme="dark"] #se_search_module,
[data-theme="dark"] .se-search-module {
    background: rgba(15, 23, 42, 0.75) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="dark"] #table_filter_data {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] #table_filter_data tbody tr {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #table_filter_data tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
[data-theme="dark"] #table_filter_data tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
[data-theme="dark"] #table_filter_data td {
    color: #cbd5e1 !important;
}
@media (max-width: 767px) {
    [data-theme="dark"] #table_filter_data tr {
        background-color: #1e293b !important;
        background: #1e293b !important;
        border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
    [data-theme="dark"] #table_filter_data tr:hover {
        background-color: #334155 !important;
        background: #334155 !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
    }
    [data-theme="dark"] #table_filter_data td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    [data-theme="dark"] #table_filter_data td::before {
        color: #38bdf8 !important;
    }
}

/* Search module & inputs */
[data-theme="dark"] #se-word-input,
[data-theme="dark"] input[name="se-word"],
[data-theme="dark"] #table_filter_input {
    background-color: rgba(255, 255, 255, 0.04) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
[data-theme="dark"] #se-word-input:focus,
[data-theme="dark"] #table_filter_input:focus {
    border-color: #38bdf8 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}
[data-theme="dark"] .se-char-btn {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .se-char-btn:hover {
    background-color: #334155 !important;
    color: #38bdf8 !important;
}
[data-theme="dark"] .se-chars-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .se-search-settings a,
[data-theme="dark"] div#se_search_module .se-search-settings a,
[data-theme="dark"] div#se_search_module .se-search-settings a i {
    color: #38bdf8 !important;
}

/* Tables & Filtering */
[data-theme="dark"] table th {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-bottom: 2px solid #334155 !important;
}
[data-theme="dark"] table td {
    border-bottom: 1px solid #334155 !important;
}
[data-theme="dark"] table tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

/* View toggle switchers, era filters and pagination page buttons in Dark Theme */
[data-theme="dark"] .view-toggle-btn,
[data-theme="dark"] .era-filter-btn,
[data-theme="dark"] .table-pagination .page-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f1f5f9 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

[data-theme="dark"] .view-toggle-btn:hover:not(.active),
[data-theme="dark"] .era-filter-btn:hover:not(.active),
[data-theme="dark"] .table-pagination .page-btn:hover:not(:disabled):not(.active) {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .view-toggle-btn.active,
[data-theme="dark"] .era-filter-btn.active,
[data-theme="dark"] .table-pagination .page-btn.active {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .table-pagination .page-btn:disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

/* Dark Theme overrides for Sources page search container */
[data-theme="dark"] .search-container {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
}
[data-theme="dark"] .search-container:focus-within {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}
[data-theme="dark"] #table_filter_input {
    background: transparent !important;
    color: #f8fafc !important;
    font-size: 0.95rem !important;
}
[data-theme="dark"] #table_filter_input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
[data-theme="dark"] .search-icon {
    color: #94a3b8 !important;
}
[data-theme="dark"] .bibliography-entry {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .bibliography-entry:hover {
    background: rgba(30, 41, 59, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .bib-author {
    color: #38bdf8 !important;
}
[data-theme="dark"] .bib-year {
    color: #94a3b8 !important;
}
[data-theme="dark"] .bib-title {
    color: #f8fafc !important;
}
[data-theme="dark"] .bib-pages {
    color: #cbd5e1 !important;
}


/* Partners and logos border tweaks */
[data-theme="dark"] .partners-table img {
    border: 1px solid #334155 !important;
    background-color: #0f172a !important;
}

/* Pagination components */
[data-theme="dark"] .article-pagination-controls button {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .article-pagination-controls button.active {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #38bdf8 !important;
}
[data-theme="dark"] .article-pagination-controls button:hover:not(.active) {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* Homepage header and navigation visual optimization */
@media (min-width: 768px) {
    /* Compact navigation bar */
    body.g-home-particles #g-navigation {
        padding: 8px 0 !important;
    }
    body.g-home-particles #g-navigation .g-logo svg {
        max-height: 48px !important;
        width: auto !important;
    }
    
    /* Inner pages — page-header: clip any overflowing ornament pseudo-elements */
@media (max-width: 991px) {
    .page-header {
        overflow: hidden !important;
    }
}
    
    /* Compact carousel text container to prevent vertical overflow */
    .g-owlcarousel-item-wrapper {
        min-height: 530px !important;
    }
    .g-owlcarousel-item-content-container {
        top: 215px !important;
        transform: none !important;
        min-height: auto !important;
        padding: 0 !important;
    }
    .g-owlcarousel-item-content h1 {
        margin-top: 0.5em !important;
        margin-bottom: 0.2em !important;
    }
    .g-owlcarousel-item-desc {
        margin-bottom: 1em !important;
    }
}

/* Ensure homepage carousel titles are high-contrast white */
.g-owlcarousel-item-title,
.g-owlcarousel-item-content h1 {
    color: #ffffff !important;
}

/* Homepage mobile hero section layout optimization */
@media (max-width: 767px) {
    body.home #g-header .g-owlcarousel-item-content-container,
    body.g-home-particles #g-header .g-owlcarousel-item-content-container {
        position: relative !important;
        top: 0 !important;
        transform: none !important;
        min-height: auto !important;
        padding: 60px 16px 16px 16px !important;
        text-align: center !important;
    }
    .g-owlcarousel-item-content h1 {
        font-size: 1.25rem !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    .g-owlcarousel-item-desc {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
        line-height: 1.4 !important;
    }
}

/* Force immediate partners section visibility (disable scroll-reveal hiding for screenshots/Lighthouse) */
#g-expanded,
#g-expanded *,
.fp-features,
.fp-features .card,
.fp-features .g-block {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Specific adjustments for mobile viewports to center the logo relative to the viewport container */
@media (max-width: 991px) {
    #g-navigation .g-grid,
    #g-navigation .g-block:not(.mod-languages-block) {
        position: static !important;
    }
    #g-navigation .g-block .g-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:first-child {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:last-child {
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    #g-navigation .g-logo,
    #g-navigation .g-logo-helium {
        /* Centered relative to g-container (which is 100% viewport width) */
        transform: translate(-50%, -50%) !important;
        margin-top: 0 !important;
    }
}

/* Specific adjustments for narrow viewports (e.g. 390px, 375px, 360px) to prevent header overlap */
@media (max-width: 400px) {
    #g-navigation .g-logo,
    #g-navigation .g-logo-helium {
        width: 175px !important;
    }
    #g-navigation .mod-languages__select button.dropdown-toggle {
        font-size: 0px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        padding: 4px 0 !important;
        position: relative !important;
    }
    #g-navigation .mod-languages__select button.dropdown-toggle::before {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        text-align: center !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: currentColor !important;
        letter-spacing: 0.02em !important;
    }
    html[lang|="uk"] #g-navigation .mod-languages__select button.dropdown-toggle::before {
        content: "UKR" !important;
    }
    html[lang|="crh"] #g-navigation .mod-languages__select button.dropdown-toggle::before {
        content: "CRH" !important;
    }
    html[lang|="en"] #g-navigation .mod-languages__select button.dropdown-toggle::before {
        content: "ENG" !important;
    }
}

/* Dark theme overrides for responsive stacked table rows on mobile viewports */
[data-theme="dark"] .item-page table:not(#table_filter_data) tr,
[data-theme="dark"] .g-content table:not(#table_filter_data) tr {
    background-color: #0c1a30 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .item-page table:not(#table_filter_data) td,
[data-theme="dark"] .g-content table:not(#table_filter_data) td {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Avoid absolute transparent header on Transliterator pages */
body.translit-page #g-navigation:not(.scrolled),
body[class*="itemid-174"] #g-navigation:not(.scrolled),
body[class*="itemid-175"] #g-navigation:not(.scrolled),
body[class*="itemid-176"] #g-navigation:not(.scrolled),
body[class*="itemid-208"] #g-navigation:not(.scrolled),
body[class*="itemid-198"] #g-navigation:not(.scrolled) {
    position: relative !important;
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
    background-image: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Transliterator Dark Theme Overrides */
[data-theme="dark"] .translit-main {
    background: rgba(30, 41, 59, 0.45) !important;
    backdrop-filter: blur(8px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="dark"] .translit-main .tab {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(51, 65, 85, 0.5) !important;
}
[data-theme="dark"] .translit-main .tab button {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .translit-main .tab button.active {
    background: #1e293b !important;
    color: #38bdf8 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #334155 !important;
}
[data-theme="dark"] .translit-main .tab button:hover:not(.active) {
    background: rgba(51, 65, 85, 0.4) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .translit-main .tabcontent {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}
[data-theme="dark"] .translit-lang-label {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}
[data-theme="dark"] .translit-main textarea {
    background-color: rgba(15, 23, 42, 0.7) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 6px !important;
}
[data-theme="dark"] .translit-main textarea::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}
[data-theme="dark"] .translit-main textarea:focus {
    border-color: #38bdf8 !important;
    outline: none !important;
}
[data-theme="dark"] #translit_out {
    background-color: rgba(15, 23, 42, 0.4) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .translit-main .drop-files {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .translit-main .drop-files span {
    color: #f8fafc !important;
}
[data-theme="dark"] .translit-main .drop-files p {
    color: #94a3b8 !important;
}
html.dark .grow-wrap .char-counter,
[data-theme="dark"] .grow-wrap .char-counter {
    color: #cbd5e1 !important;
}
html.dark .grow-wrap a,
[data-theme="dark"] .grow-wrap a {
    color: #38bdf8 !important;
}
html.dark .grow-wrap a:hover,
[data-theme="dark"] .grow-wrap a:hover {
    color: #56cbfd !important;
}

/* Dark mode SVG icon replacements for high contrast (sky blue %2338bdf8 stroke) */
html.dark .fa-link::before,
[data-theme="dark"] .fa-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E") !important;
}

html.dark .fa-expand::before,
[data-theme="dark"] .fa-expand::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E") !important;
}

html.dark .fa-keyboard::before,
[data-theme="dark"] .fa-keyboard::before,
html.dark .fa-keyboard-o::before,
[data-theme="dark"] .fa-keyboard-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='6' y1='8' x2='6' y2='8'%3E%3C/line%3E%3Cline x1='10' y1='8' x2='10' y2='8'%3E%3C/line%3E%3Cline x1='14' y1='8' x2='14' y2='8'%3E%3C/line%3E%3Cline x1='18' y1='8' x2='18' y2='8'%3E%3C/line%3E%3Cline x1='6' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='10' y1='12' x2='10' y2='12'%3E%3C/line%3E%3Cline x1='14' y1='12' x2='14' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='18' y2='12'%3E%3C/line%3E%3Cline x1='7' y1='16' x2='17' y2='16'%3E%3C/line%3E%3C/svg%3E") !important;
}

html.dark .fa-copy::before,
[data-theme="dark"] .fa-copy::before,
html.dark .fa-clone::before,
[data-theme="dark"] .fa-clone::before,
html.dark .fa-files-o::before,
[data-theme="dark"] .fa-files-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E") !important;
}

html.dark .fa-close::before,
[data-theme="dark"] .fa-close::before,
html.dark .fa-times::before,
[data-theme="dark"] .fa-times::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}

html.dark .fa-trash::before,
[data-theme="dark"] .fa-trash::before,
html.dark .fa-trash-o::before,
[data-theme="dark"] .fa-trash-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'%3E%3C/path%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
}

html.dark .fa-pencil-square-o::before,
[data-theme="dark"] .fa-pencil-square-o::before,
html.dark .fa-edit::before,
[data-theme="dark"] .fa-edit::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") !important;
}

html.dark .fa-file-text-o::before,
[data-theme="dark"] .fa-file-text-o::before,
html.dark .fa-file-o::before,
[data-theme="dark"] .fa-file-o::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

html.dark .fa-long-arrow-right::before,
[data-theme="dark"] .fa-long-arrow-right::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

html.dark .fa-download::before,
[data-theme="dark"] .fa-download::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E") !important;
}

html.dark .fa-upload::before,
[data-theme="dark"] .fa-upload::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E") !important;
}

html.dark .fa-check::before,
[data-theme="dark"] .fa-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

html.dark .fa-spinner::before,
[data-theme="dark"] .fa-spinner::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'%3E%3C/line%3E%3Cline x1='12' y1='18' x2='12' y2='22'%3E%3C/line%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'%3E%3C/line%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'%3E%3C/line%3E%3Cline x1='2' y1='12' x2='6' y2='12'%3E%3C/line%3E%3Cline x1='18' y1='12' x2='22' y2='12'%3E%3C/line%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'%3E%3C/line%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'%3E%3C/line%3E%3C/svg%3E") !important;
}
[data-theme="dark"] #fileList {
    color: #f8fafc !important;
}
[data-theme="dark"] #uploadControl hr,
[data-theme="dark"] #file_zip hr,
[data-theme="dark"] #error hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .translit-file-direction {
    color: #38bdf8 !important;
}
[data-theme="dark"] #transliterate_file {
    background-color: #24a0ce !important;
    color: #ffffff !important;
    border: none !important;
}
[data-theme="dark"] .module-heading h2 {
    color: #f8fafc !important;
}
[data-theme="dark"] .module-heading p {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .keyboard-container {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .keyboard-container .key {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .keyboard-container .key:hover {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
}

/* Responsive Content Tabs scroll and header switcher spacing overrides */
@media (max-width: 768px) {
    .g-content-tabs ul.ui-tabs-nav,
    .g-contenttabs-container ul.ui-tabs-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding-bottom: 8px !important;
    }
    .g-content-tabs ul.ui-tabs-nav li.g-contenttabs-tab-wrapper,
    .g-contenttabs-container ul.ui-tabs-nav li.g-contenttabs-tab-wrapper {
        flex: 0 0 auto !important;
        display: inline-block !important;
    }
    #g-navigation .mod-languages-block {
        margin-right: 12px !important;
    }
    .g-offcanvas-toggle {
        left: 12px !important;
    }
}

/* -------------------------------------------------------------
   STRICT VISUAL REGRESSION QA FIXES - HOMEPAGE & GLOBAL
   ------------------------------------------------------------- */

/* 1. High contrast placeholders in light mode */
.se-word-input::placeholder,
input[type="search"]::placeholder,
input[type="text"]::placeholder {
    color: #0f172a !important;
    opacity: 1 !important;
}

/* 2. Higher contrast for special Crimean Tatar character buttons and prompts */
.se-chars-label {
    color: #0f172a !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}
.se-char-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}
.se-char-btn:hover {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

/* 3. Uniform centering and sizing for partners logo grids */
.fp-features .card-block img,
.g-features .card-block img,
#g-expanded .card-block img,
.partners-table img {
    max-height: 50px !important;
    max-width: 130px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
}

/* 4. High-contrast placeholders & settings link in Dark Mode */
[data-theme="dark"] #se-word-input::placeholder,
[data-theme="dark"] input[type="search"]::placeholder,
[data-theme="dark"] input[type="text"]::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
[data-theme="dark"] .se-search-settings,
[data-theme="dark"] .se-search-settings a,
[data-theme="dark"] div#se_search_module .se-search-settings a,
[data-theme="dark"] div#se_search_module .se-search-settings a i,
[data-theme="dark"] .se-search-settings a:visited {
    color: #38bdf8 !important;
}

/* 5. Visual regression fixes for spacing and logos */
#g-navigation .g-grid:has(.g-main-nav) > .g-block:first-child {
    padding-right: 35px !important;
}
#g-navigation .g-main-nav {
    margin-left: 35px !important;
}

.fp-features .card-block,
.g-features .card-block,
#g-expanded .card-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 180px !important;
    padding: 15px !important;
    background: transparent !important;
    text-align: center !important;
}

.fp-features .card-block img,
.g-features .card-block img,
#g-expanded .card-block img,
.partners-table img {
    max-height: 52px !important;
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
}

/* Surgically balance padded/light logos vs bold/compact logos */
.fp-features .card-block img[src*="partner_min"],
.fp-features .card-block img[src*="partner_embassy"],
.fp-features .card-block img[src*="partner_egap"],
.fp-features .card-block img[src*="egap"],
.g-features .card-block img[src*="partner_min"],
.g-features .card-block img[src*="partner_embassy"],
.g-features .card-block img[src*="partner_egap"],
.g-features .card-block img[src*="egap"] {
    max-height: 78px !important;
    max-width: 160px !important;
}
body:not([data-theme="dark"]) .fp-features .card-block img[src*="partner_min"],
body:not([data-theme="dark"]) .fp-features .card-block img[src*="partner_embassy"],
body:not([data-theme="dark"]) .g-features .card-block img[src*="partner_min"],
body:not([data-theme="dark"]) .g-features .card-block img[src*="partner_embassy"] {
    filter: brightness(0.6) contrast(1.3) drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.16)) !important;
}

.fp-features .card-block img[src*="QY"],
.fp-features .card-block img[src*="Astem"],
.g-features .card-block img[src*="QY"],
.g-features .card-block img[src*="Astem"] {
    max-height: 44px !important;
    max-width: 105px !important;
}

.fp-features .card-block p,
.g-features .card-block p,
#g-expanded .card-block p {
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    text-align: center !important;
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
[data-theme="dark"] .fp-features .card-block p,
[data-theme="dark"] .g-features .card-block p,
[data-theme="dark"] #g-expanded .card-block p,
html.dark .fp-features .card-block p,
html.dark .g-features .card-block p,
html.dark #g-expanded .card-block p {
    color: #cbd5e1 !important;
}

/* Subtle logo shadow in light mode to prevent merging with white page background */
body:not([data-theme="dark"]) .fp-features .card-block img,
body:not([data-theme="dark"]) .g-features .card-block img,
body:not([data-theme="dark"]) #g-expanded .card-block img,
body:not([data-theme="dark"]) .partners-table img {
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.08)) !important;
}

/* 10. Center and restrict width of tab content text for composition */
.g-content-tabs .g-contenttabs-content,
.g-content-tabs .g-contenttabs-content p {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* 6. Strict QA fixes: search block keyboard buttons & settings icon spacing */
.se-char-btn {
    font-size: 0.95rem !important;
    padding: 4px 8px !important;
    min-width: 32px !important;
    margin: 2px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.se-special-chars,
.se-chars-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
}
.se-search-settings a i,
.se-search-settings a svg,
.se-search-settings a span {
    margin-right: 6px !important;
}

/* 7. Footer social icons "air" and spacing overrides */
#g-footer .g-social {
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin-right: 15px !important;
    align-items: center !important;
}
#g-footer .g-social a {
    margin: 0 4px !important;
}

/* 8. Hero Carousel details button bottom clearance */
.g-owlcarousel .g-owlcarousel-item-wrapper .g-owlcarousel-item-content-container {
    padding-bottom: 45px !important;
}

/* 9. Premium Multi-Viewport Layout Optimizations */

/* Header Glassmorphism Scrolled State (all page variants) */
#g-navigation.scrolled {
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Header Scrolled to Top - Homepage (completely transparent) */
body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled) {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Header Scrolled to Top - Inner Pages (fully opaque to prevent bleeding) */
body:not(.home):not(.g-home-particles) #g-navigation:not(.scrolled) {
    background-color: #0a284b !important;
    background: #0a284b !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] body:not(.home):not(.g-home-particles) #g-navigation:not(.scrolled) {
    background-color: #0b0f19 !important;
    background: #0b0f19 !important;
}

/* Header Grid Flex Layout on Mobile/Tablet */
@media (max-width: 991px) {
    #g-navigation .g-container {
        max-width: 100% !important;
        padding: 0 16px !important;
    }
    #g-navigation .g-grid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
    #g-navigation .g-grid > .g-block.size-20 {
        flex: 1 1 auto !important;
        width: auto !important;
        padding-left: 48px !important; /* Spacing for fixed hamburger */
    }
    #g-navigation .g-grid > .g-block.size-62 {
        display: none !important; /* Hide menu block */
    }
    #g-navigation .g-grid > .g-block.size-18 {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* Force Showcase background color underneath to prevent white stripes/segments */
body.home #g-showcase,
body.home .g-showcase,
body.home #g-header,
body.home #g-intro {
    background-color: #072140 !important;
}

/* Force carousel description and CTA button display on mobile */
@media (max-width: 767px) {
    .g-owlcarousel .g-owlcarousel-item-desc,
    .g-owlcarousel .g-owlcarousel-item-button,
    .g-owlcarousel .g-owlcarousel-item-link-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .g-owlcarousel-item-desc {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
    }
}

/* Mobile search box stack to maximize placeholder width */
@media (max-width: 767px) {
    .se-search-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .se-search-form input.se-search-input {
        width: 100% !important;
        border-radius: 6px !important;
        padding-right: 12px !important;
        height: 46px !important;
    }
    .se-search-form button.se-search-btn {
        width: 100% !important;
        border-radius: 6px !important;
        height: 46px !important;
        margin-left: 0 !important;
    }
}

/* Restrict phone mockup dimensions and center it on mobile */
@media (max-width: 767px) {
    body.home #g-intro,
    #g-intro {
        padding-bottom: 0 !important;
    }
    #custom-5807-particle,
    .intro-search-block {
        padding-bottom: 0 !important;
    }
    #custom-5807-particle .ipad-mockup,
    .intro-search-block .ipad-mockup {
        max-width: 280px !important;
        margin: 24px auto 0 auto !important;
        padding-bottom: 0 !important;
        float: none !important;
    }
    #custom-5807-particle .ipad-mockup img,
    .intro-search-block .ipad-mockup img {
        max-height: 380px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        display: block !important;
        -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 95%) !important;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 95%) !important;
    }
}

/* Mobile Footer Flex stacking and wrapping to avoid scrollbars */
@media (max-width: 767px) {
    #g-footer .g-social {
        justify-content: center !important;
        flex-wrap: wrap !important;
        margin-right: 0 !important;
        gap: 16px !important;
        padding: 8px 0 !important;
    }
    #g-footer .g-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }
    #g-footer .g-block {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
}

/* Sizing bounds for logo image on mobile/tablet to prevent layout squeezed */
@media (max-width: 991px) {
    #g-navigation .g-logo img {
        max-height: 38px !important;
        width: auto !important;
    }
    .mod-languages__select button.dropdown-toggle {
        font-size: 0.74rem !important;
        padding: 4px 6px !important;
    }
}

/* Sticky footer flex layout structure to prevent empty space below footer */
#g-page-surround {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
#g-footer {
    margin-top: auto !important;
}

#g-intro {
    position: relative !important;
}
body.home #g-intro:not(:has(.g-content)),
body.home #g-features:not(:has(.g-content)),
body.home #g-expanded:not(:has(.g-content)) {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 991px) {
    #custom-5807-particle .ipad-mockup,
    .intro-search-block .ipad-mockup {
        flex: 0 0 24% !important;
        max-width: 24% !important;
        margin-right: 1.5rem !important;
    }
}

/* Padding to prevent text from flushing against edges on tablet/mobile */
@media (max-width: 991px) {
    body[class*="itemid-"] .com-content-article__body {
        padding: 0 16px !important;
    }
    body[class*="itemid-"] .page-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Responsive Partners Table block layout on Mobile/Tablet */
@media (max-width: 767px) {
    .partners-table, 
    .partners-table tbody, 
    .partners-table tr, 
    .partners-table td {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }
    .partners-table tr {
        margin-bottom: 24px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 24px !important;
    }
    [data-theme="dark"] .partners-table tr {
        border-bottom: 1px solid #334155 !important;
    }
    .partners-table td img {
        margin: 0 auto 16px auto !important;
        max-width: 120px !important;
        height: auto !important;
    }
}

#g-copyright {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
@media (min-width: 768px) {
    #g-copyright {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
}
#g-copyright a {
    color: rgba(255, 255, 255, 0.8) !important;
}
#g-copyright a:hover {
    color: #ffffff !important;
}

html {
    height: 100% !important;
    background-color: #0a2850 !important;
}
body {
    min-height: 100% !important;
}
#g-page-surround {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}
#g-footer {
    margin-top: auto !important;
}

/* ============================================================
   INNER PAGES BANNER ILLUSTRATION REMEDIATION
   ============================================================ */

body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header {
    background-size: 135% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 178px 32px 60px 32px !important;
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header {
        padding: 92px 24px 40px 24px !important;
    }
}

@media (max-width: 767px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header {
        padding: 76px 20px 30px 20px !important;
    }
}

/* Page-specific banner background images with gradient overlays */

/* About */
body.itemid-139 #g-intro .page-header,
body.itemid-108 #g-intro .page-header,
body.itemid-205 #g-intro .page-header,
body.itemid-147 #g-intro .page-header,
body.itemid-195 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_about.webp") !important;
}

/* Partners */
body.itemid-140 #g-intro .page-header,
body.itemid-130 #g-intro .page-header,
body.itemid-206 #g-intro .page-header,
body.itemid-148 #g-intro .page-header,
body.itemid-196 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_partners.webp") !important;
}

/* Vacancies */
body.itemid-141 #g-intro .page-header,
body.itemid-132 #g-intro .page-header,
body.itemid-207 #g-intro .page-header,
body.itemid-149 #g-intro .page-header,
body.itemid-197 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_vacancies.webp") !important;
}

/* Transliterator */
body.translit-page #g-intro .page-header,
body.itemid-176 #g-intro .page-header,
body.itemid-138 #g-intro .page-header,
body.itemid-208 #g-intro .page-header,
body.itemid-198 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}

/* Sources */
body.itemid-144 #g-intro .page-header,
body.itemid-137 #g-intro .page-header,
body.itemid-210 #g-intro .page-header,
body.itemid-151 #g-intro .page-header,
body.itemid-200 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_sources.webp") !important;
}

/* Software */
body.itemid-142 #g-intro .page-header,
body.itemid-214 #g-intro .page-header,
body.itemid-133 #g-intro .page-header,
body.itemid-213 #g-intro .page-header,
body.itemid-150 #g-intro .page-header,
body.itemid-203 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_software.webp") !important;
}

/* Development */
body.itemid-162 #g-intro .page-header,
body.itemid-169 #g-intro .page-header,
body.itemid-211 #g-intro .page-header,
body.itemid-166 #g-intro .page-header,
body.itemid-201 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_development.webp") !important;
}

/* User Guide */
body.itemid-161 #g-intro .page-header,
body.itemid-177 #g-intro .page-header,
body.itemid-168 #g-intro .page-header,
body.itemid-212 #g-intro .page-header,
body.itemid-165 #g-intro .page-header,
body.itemid-202 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_guide.webp") !important;
}

/* Terms */
body.itemid-154 #g-intro .page-header,
body.itemid-153 #g-intro .page-header,
body.itemid-209 #g-intro .page-header,
body.itemid-152 #g-intro .page-header,
body.itemid-199 #g-intro .page-header {
    background-image: linear-gradient(rgba(10, 40, 80, 0.65), rgba(10, 40, 80, 0.55)),
                      url("/templates/g5_helium/custom/images/header/header_terms.webp") !important;
}

/* ============================================================
   DROPDOWN MENU BOUNDS AND TEXT WRAPPING CORRECTION
   ============================================================ */
#g-navigation .g-main-nav .g-dropdown,
#g-navigation .g-main-nav .dropdown-menu,
#g-navigation .g-main-nav .g-sublevel {
    min-width: 270px !important;
    width: auto !important;
    max-width: 320px !important;
}
#g-navigation .g-main-nav .g-dropdown a,
#g-navigation .g-main-nav .dropdown-menu a,
#g-navigation .g-main-nav .g-sublevel a {
    white-space: normal !important; /* Wrap long text instead of horizontal clipping */
    word-break: break-word !important;
    display: block !important;
    padding: 10px 15px !important;
}

/* ============================================================
   MOBILE HOMEPAGE VISUAL REGRESSION & COMPOSITION FIXES
   ============================================================ */
@media (max-width: 767px) {
    /* 1. Transparent Header Wrapper & Clear Glassmorphism Navigation on Homepage */
    body.home #g-header,
    body.g-home-particles #g-header {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.home #g-navigation:not(.scrolled),
    body.g-home-particles #g-navigation:not(.scrolled) {
        background-image: none !important;
        background-color: rgba(255, 255, 255, 0.28) !important;
        backdrop-filter: blur(20px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme="dark"].home #g-navigation:not(.scrolled),
    [data-theme="dark"] body.home #g-navigation:not(.scrolled) {
        background-image: none !important;
        background-color: rgba(15, 32, 66, 0.78) !important;
        backdrop-filter: blur(20px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    }

    /* 2. Legible Header Logo on Mobile Homepage */
    #g-navigation:not(.scrolled) .g-logo img {
        max-height: 52px !important;
        height: 52px !important;
    }

    /* 3. Hero Slider & Intro Section Spacing Composition */
    body.home #g-intro,
    #g-intro {
        padding-top: 0.5rem !important;
    }
    .g-owlcarousel-item-content-container {
        padding: 20px 15px !important;
    }

    /* 4. Hide Empty Layout Sections to Prevent Empty Spacers/Gaps */
    body.home #g-header:not(:has(.g-content)),
    body.home #g-showcase:not(:has(.g-content)),
    body.home #g-features:not(:has(.g-content)),
    body.home #g-utility:not(:has(.g-content)),
    body.home #g-above:not(:has(.g-content)),
    body.home #g-testimonials:not(:has(.g-content)),
    body.home #g-expanded:not(:has(.g-content)),
    body.home #g-container-main:not(:has(.g-content)) {
        display: none !important;
    }

    /* 5. Horizontal Partner Cards Layout (no text squeezing) */
    #g-expanded .fp-features .g-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    #g-expanded .fp-features .g-grid > .g-block {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 !important;
    }
    #g-expanded .card-block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        min-height: 140px !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    body:not([data-theme="dark"]) #g-expanded .card-block {
        background: rgba(255, 255, 255, 0.88) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
    #g-expanded .card-block img {
        max-height: 48px !important;
        max-width: 120px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }
    #g-expanded .card-block p {
        font-size: 0.88rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-align: center !important;
        font-weight: 500 !important;
    }

    /* 6. Increase Search/Transliterator Control Touch Targets */
    .se-char-btn {
        font-size: 0.95rem !important;
        padding: 4px 8px !important;
        min-width: 32px !important;
    }
    .se-search-settings {
        font-size: 0.92rem !important;
        margin-top: 14px !important;
    }
}

/* Color contrast fixes for text inside dark backgrounds (e.g. Hero Section in light mode) */
.bg-darkBg h1,
.bg-darkBg .text-white {
    color: #ffffff !important;
}
.bg-darkBg h2,
.bg-darkBg .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}
.bg-darkBg .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
}
.bg-darkBg .text-white\/50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Footer text contrast overrides for WCAG AA compliance */
footer p, 
footer span, 
footer a,
footer .text-white\/40,
footer .text-white\/50,
footer .text-white\/60,
footer .text-white\/70,
footer p.text-white\/50,
footer a.text-white\/50,
footer a.text-white\/40 {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
}
footer a:hover,
footer p.text-white\/50:hover,
footer a.text-white\/50:hover,
footer a.text-white\/40:hover {
    color: #ffffff !important;
}

/* Glassmorphic header scrolled and initial states */
/* Glassmorphic header scrolled and initial states - Light Mode */
#mainHeader {
    background-color: rgba(10, 40, 80, 0.65) !important; /* translucent glass initial state */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    transition: all 0.3s ease !important;
}

#mainHeader.scrolled,
#mainHeader.h-\[52px\] {
    background-color: rgba(10, 40, 80, 0.65) !important; /* translucent glass scrolled state */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.6) !important; /* bright white scrolled glass boundary line */
}

/* Glassmorphic header scrolled and initial states - Dark Mode */
.dark #mainHeader {
    background-color: rgba(6, 22, 46, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.3) !important;
}

.dark #mainHeader.scrolled,
.dark #mainHeader.h-\[52px\] {
    background-color: rgba(10, 40, 80, 0.35) !important; /* highly transparent 35% glass scrolled */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; /* bright white glass border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important; /* lift and define glass */
}

/* Header navigation links and buttons sizing fix */
#mainHeader a:not(.hover\:opacity-90),
#mainHeader button {
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* Footer elements sizing fix */
footer a,
footer p,
footer span {
    font-size: 14px !important;
}

/* Stats labels and general text/placeholder contrast overrides */
.text-white\/50,
.text-white\/60 {
    color: rgba(255, 255, 255, 0.85) !important;
}
input::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Mockup container bottom fade mask/gradient to prevent sharp edges */
.mockup-container::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to top, #f4f6f9, rgba(244, 246, 249, 0)) !important;
    z-index: 20;
    pointer-events: none;
}
.dark .mockup-container::after {
    background: linear-gradient(to top, #0a2850, rgba(10, 40, 80, 0)) !important;
}

/* Scrolled header bottom border contrast enhancements for visual QA */
#mainHeader.scrolled,
#g-navigation.scrolled {
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}

/* Mobile viewport header responsiveness overrides for < 400px */
@media (max-width: 400px) {
    #mainHeader > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    #mainHeader .flex {
        gap: 0.35rem !important; /* reduce spacing */
    }
    #mainHeader button,
    #mainHeader a:not(.hover\:opacity-90) {
        font-size: 12px !important; /* 12px font for readability and layout preservation */
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }
    #mobileMenuBtn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        opacity: 0.95 !important;
    }
    #mainHeader.scrolled,
    #g-navigation.scrolled {
        background-color: rgba(6, 22, 46, 0.55) !important;
        backdrop-filter: blur(16px) !important;
        border-bottom: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    }
}

/* Disable line clamping in partner card text to prevent truncation on mobile */
#g-expanded p.line-clamp-3,
#g-partners p.line-clamp-3 {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/* Light mode overrides for subpage content text contrast */
html:not(.dark) body {
    background-color: #f4f6f9 !important;
    color: #0a2850 !important;
}
html:not(.dark) main {
    color: #0a2850 !important;
}
html:not(.dark) main h1,
html:not(.dark) main h2,
html:not(.dark) main h3,
html:not(.dark) main h4,
html:not(.dark) main h5,
html:not(.dark) main h6,
html:not(.dark) main p,
html:not(.dark) main li,
html:not(.dark) main span:not(.material-symbols-outlined):not(.text-white) {
    color: #0a2850 !important;
}

/* Sidebar stats and card containers in light mode */
html:not(.dark) main .bg-white\/5:not(button):not(a),
html:not(.dark) main .bg-dark-bg,
html:not(.dark) main .bg-darkBg\/50 {
    background-color: #ffffff !important;
    border: 1px solid rgba(10, 40, 80, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    color: #0a2850 !important;
}

/* Call to action card wrapper border in light mode */
html:not(.dark) main .bg-gradient-to-r {
    background-image: none !important;
    background-color: rgba(22, 100, 130, 0.08) !important;
    border: 1px solid rgba(22, 100, 130, 0.15) !important;
}

/* Borders and highlights in light mode */
html:not(.dark) main .border-white\/10 {
    border-color: rgba(10, 40, 80, 0.15) !important;
}
html:not(.dark) main .text-white\/90,
html:not(.dark) main .text-white\/80,
html:not(.dark) main .text-white\/70,
html:not(.dark) main .text-white\/85 {
    color: rgba(10, 40, 80, 0.75) !important;
}

/* Make sure text inside cards is dark in light mode */
html:not(.dark) main .bg-white\/5:not(button):not(a) h3,
html:not(.dark) main .bg-white\/5:not(button):not(a) p,
html:not(.dark) main .bg-white\/5:not(button):not(a) span,
html:not(.dark) main .bg-dark-bg h3,
html:not(.dark) main .bg-dark-bg p,
html:not(.dark) main .bg-dark-bg span {
    color: #0a2850 !important;
}

/* Make sure italic highlights inside sections are legible in light mode */
html:not(.dark) main .bg-primary\/10 {
    background-color: rgba(22, 100, 130, 0.08) !important;
    border-color: rgba(22, 100, 130, 0.25) !important;
    color: #0a2850 !important;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES (Sprint 4 Audit Fixes)
   ============================================================ */

/* Hide empty showcase section on homepage to prevent white gap */
body.home #g-showcase {
    display: none !important;
}

/* Mobile & Tablet: Fix too large whitespace around header and intro */
@media (max-width: 991px) {
    body.home #g-header,
    body.g-home-particles #g-header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    body.home #g-intro,
    body.g-home-particles #g-intro {
        margin-top: 0 !important;
        padding-top: 1rem !important; /* Premium small gap below hero slider */
    }
    body.home #g-intro .intro-search-block,
    body.g-home-particles #g-intro .intro-search-block {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    body.home #g-intro .fp-intro,
    body.g-home-particles #g-intro .fp-intro {
        margin-top: 0 !important;
    }
    body.home #g-intro .fp-intro .g-title,
    body.g-home-particles #g-intro .fp-intro .g-title {
        margin-top: 0 !important;
    }
}

/* Mobile: Prevent search placeholder truncation */
@media (max-width: 480px) {
    #se-word-input::placeholder,
    input[type="search"]::placeholder,
    input[type="text"]::placeholder,
    #table_filter_input::placeholder {
        font-size: 0.72rem !important;
    }
}

/* Maintain white text contrast inside top hero/banner containers in light mode */
html:not(.dark) .text-white {
    color: #ffffff !important;
}
html:not(.dark) .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}
html:not(.dark) .text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
html:not(.dark) .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
}
html:not(.dark) .text-white\/50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Light mode card layout for subpage main content areas */
html:not(.dark) body:not(.home) main {
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    margin-top: -3rem !important;
    z-index: 30 !important;
    position: relative !important;
    border: 1px solid rgba(10, 40, 80, 0.08) !important;
}

/* Ensure text-white classes inside main content area are overridden to dark blue in light mode (subpages only) */
html:not(.dark) body:not(.home) main .text-white,
html:not(.dark) body:not(.home) main h2.text-white,
html:not(.dark) body:not(.home) main h3.text-white,
html:not(.dark) body:not(.home) main p.text-white,
html:not(.dark) body:not(.home) main span.text-white {
    color: #0a2850 !important;
}

/* Maintain white text contrast inside dark background containers in light mode */
html:not(.dark) .bg-darkBg,
html:not(.dark) .bg-darkBg *,
html:not(.dark) main .bg-darkBg,
html:not(.dark) main .bg-darkBg *,
html:not(.dark) main .bg-dark-bg,
html:not(.dark) main .bg-dark-bg *,
html:not(.dark) .bg-deep-navy,
html:not(.dark) .bg-deep-navy *,
html:not(.dark) main .bg-deep-navy,
html:not(.dark) main .bg-deep-navy *,
html:not(.dark) .bg-navy,
html:not(.dark) .bg-navy *,
html:not(.dark) main .bg-navy,
html:not(.dark) main .bg-navy *,
html:not(.dark) body:not(.home) main button.text-white,
html:not(.dark) body:not(.home) main button.text-white *,
html:not(.dark) body:not(.home) main button * {
    color: #ffffff !important;
}

/* Ensure text in the search input box is dark and placeholder is gray in both themes */
html:not(.dark) .bg-darkBg .bg-white input,
html:not(.dark) .bg-darkBg .bg-white input *,
.bg-darkBg .bg-white input,
.bg-darkBg .bg-white input * {
    color: #0a2850 !important;
}
html:not(.dark) .bg-darkBg .bg-white input::placeholder,
.bg-darkBg .bg-white input::placeholder {
    color: #9ca3af !important;
}
@media (max-width: 1279px) {
    #mobileMenuBtn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        opacity: 0.95 !important;
    }
}
    #mainHeader.scrolled,
    #g-navigation.scrolled {
        background-color: rgba(6, 22, 46, 0.55) !important;
        backdrop-filter: blur(16px) !important;
        border-bottom: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    }

/* Disable line clamping in partner card text to prevent truncation on mobile */
#g-expanded p.line-clamp-3,
#g-partners p.line-clamp-3 {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

/* Light mode overrides for subpage content text contrast */
html:not(.dark) body {
    background-color: #f4f6f9 !important;
    color: #0a2850 !important;
}
html:not(.dark) main {
    color: #0a2850 !important;
}
html:not(.dark) main h1,
html:not(.dark) main h2,
html:not(.dark) main h3,
html:not(.dark) main h4,
html:not(.dark) main h5,
html:not(.dark) main h6,
html:not(.dark) main p,
html:not(.dark) main li,
html:not(.dark) main span:not(.material-symbols-outlined):not(.text-white) {
    color: #0a2850 !important;
}

/* Sidebar stats and card containers in light mode */
html:not(.dark) main .bg-white\/5:not(button):not(a),
html:not(.dark) main .bg-dark-bg,
html:not(.dark) main .bg-darkBg\/50 {
    background-color: #ffffff !important;
    border: 1px solid rgba(10, 40, 80, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    color: #0a2850 !important;
}

/* Call to action card wrapper border in light mode */
html:not(.dark) main .bg-gradient-to-r {
    background-image: none !important;
    background-color: rgba(22, 100, 130, 0.08) !important;
    border: 1px solid rgba(22, 100, 130, 0.15) !important;
}

/* Borders and highlights in light mode */
html:not(.dark) main .border-white\/10 {
    border-color: rgba(10, 40, 80, 0.15) !important;
}
html:not(.dark) main .text-white\/90,
html:not(.dark) main .text-white\/80,
html:not(.dark) main .text-white\/70,
html:not(.dark) main .text-white\/85 {
    color: rgba(10, 40, 80, 0.75) !important;
}

/* Make sure text inside cards is dark in light mode */
html:not(.dark) main .bg-white\/5:not(button):not(a) h3,
html:not(.dark) main .bg-white\/5:not(button):not(a) p,
html:not(.dark) main .bg-white\/5:not(button):not(a) span,
html:not(.dark) main .bg-dark-bg h3,
html:not(.dark) main .bg-dark-bg p,
html:not(.dark) main .bg-dark-bg span {
    color: #0a2850 !important;
}

/* Make sure italic highlights inside sections are legible in light mode */
html:not(.dark) main .bg-primary\/10 {
    background-color: rgba(22, 100, 130, 0.08) !important;
    border-color: rgba(22, 100, 130, 0.25) !important;
    color: #0a2850 !important;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES (Sprint 4 Audit Fixes)
   ============================================================ */

/* Hide empty showcase section on homepage to prevent white gap */
body.home #g-showcase {
    display: none !important;
}

/* Mobile & Tablet: Fix too large whitespace around header and intro */
@media (max-width: 991px) {
    body.home #g-header,
    body.g-home-particles #g-header {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    body.home #g-intro,
    body.g-home-particles #g-intro {
        margin-top: 0 !important;
        padding-top: 1rem !important; /* Premium small gap below hero slider */
    }
    body.home #g-intro .intro-search-block,
    body.g-home-particles #g-intro .intro-search-block {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    body.home #g-intro .fp-intro,
    body.g-home-particles #g-intro .fp-intro {
        margin-top: 0 !important;
    }
    body.home #g-intro .fp-intro .g-title,
    body.g-home-particles #g-intro .fp-intro .g-title {
        margin-top: 0 !important;
    }
}

/* Mobile: Prevent search placeholder truncation */
@media (max-width: 480px) {
    #se-word-input::placeholder,
    input[type="search"]::placeholder,
    input[type="text"]::placeholder,
    #table_filter_input::placeholder {
        font-size: 0.72rem !important;
    }
}

/* Maintain white text contrast inside top hero/banner containers in light mode */
html:not(.dark) .text-white {
    color: #ffffff !important;
}
html:not(.dark) .text-white\/90 {
    color: rgba(255, 255, 255, 0.9) !important;
}
html:not(.dark) .text-white\/80 {
    color: rgba(255, 255, 255, 0.8) !important;
}
html:not(.dark) .text-white\/70 {
    color: rgba(255, 255, 255, 0.7) !important;
}
html:not(.dark) .text-white\/50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Light mode card layout for subpage main content areas */
html:not(.dark) body:not(.home) main {
    background-color: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    margin-top: -3rem !important;
    z-index: 30 !important;
    position: relative !important;
    border: 1px solid rgba(10, 40, 80, 0.08) !important;
}

/* Ensure text-white classes inside main content area are overridden to dark blue in light mode (subpages only) */
html:not(.dark) body:not(.home) main .text-white,
html:not(.dark) body:not(.home) main h2.text-white,
html:not(.dark) body:not(.home) main h3.text-white,
html:not(.dark) body:not(.home) main p.text-white,
html:not(.dark) body:not(.home) main span.text-white {
    color: #0a2850 !important;
}

/* Maintain white text contrast inside dark background containers in light mode */
html:not(.dark) .bg-darkBg,
html:not(.dark) .bg-darkBg *,
html:not(.dark) main .bg-darkBg,
html:not(.dark) main .bg-darkBg *,
html:not(.dark) main .bg-dark-bg,
html:not(.dark) main .bg-dark-bg *,
html:not(.dark) .bg-deep-navy,
html:not(.dark) .bg-deep-navy *,
html:not(.dark) main .bg-deep-navy,
html:not(.dark) main .bg-deep-navy *,
html:not(.dark) .bg-navy,
html:not(.dark) .bg-navy *,
html:not(.dark) main .bg-navy,
html:not(.dark) main .bg-navy *,
html:not(.dark) body:not(.home) main button.text-white,
html:not(.dark) body:not(.home) main button.text-white *,
html:not(.dark) body:not(.home) main button *,
html:not(.dark) body:not(.home) main .bg-primary .text-white,
html:not(.dark) body:not(.home) main .bg-primary .text-white *,
html:not(.dark) body:not(.home) main .bg-accent .text-white,
html:not(.dark) body:not(.home) main .bg-accent .text-white *,
html:not(.dark) body:not(.home) main .bg-dark-bg .text-white,
html:not(.dark) body:not(.home) main .bg-dark-bg .text-white *,
html:not(.dark) body:not(.home) main .bg-darkBg .text-white,
html:not(.dark) body:not(.home) main .bg-darkBg .text-white *,
html:not(.dark) body:not(.home) main button.bg-primary,
html:not(.dark) body:not(.home) main button.bg-primary *,
html:not(.dark) body:not(.home) main button.bg-accent,
html:not(.dark) body:not(.home) main button.bg-accent *,
html:not(.dark) body:not(.home) main a.bg-primary,
html:not(.dark) body:not(.home) main a.bg-primary *,
html:not(.dark) body:not(.home) main a.bg-accent,
html:not(.dark) body:not(.home) main a.bg-accent *,
html:not(.dark) body:not(.home) main .group .text-white,
html:not(.dark) body:not(.home) main .group .text-white\/90,
html:not(.dark) body:not(.home) main .group .text-white\/85,
html:not(.dark) body:not(.home) main .glass,
html:not(.dark) body:not(.home) main .glass *,
html:not(.dark) body:not(.home) main .bg-gradient-to-t .text-white,
html:not(.dark) body:not(.home) main .bg-gradient-to-t .text-white\/90 {
    color: #ffffff !important;
}

/* Make image overlay gradient darker and add text-shadow for WCAG AA contrast in both themes */
body:not(.home) main .relative.overflow-hidden .bg-gradient-to-t {
    opacity: 0.85 !important;
    background: linear-gradient(to top, rgba(3, 7, 18, 0.95) 0%, rgba(3, 7, 18, 0.65) 50%, rgba(3, 7, 18, 0.15) 100%) !important;
}
body:not(.home) main .relative.overflow-hidden [class*="absolute"] .text-white,
body:not(.home) main .relative.overflow-hidden [class*="absolute"] * {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Dark mode card layout for subpage main content areas to match light mode card container style */
html.dark body:not(.home) main {
    background-color: #0a2850 !important; /* solid/translucent dark card background */
    border-radius: 1rem !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
    margin-top: -3rem !important;
    z-index: 30 !important;
    position: relative !important;
}

/* Optimize subpage navigation menu sizing and gaps on tablet viewport (768px - 1023px) to prevent wrapping/overlap */
@media (min-width: 768px) and (max-width: 1023px) {
    body:not(.home) header > div {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    body:not(.home) header img {
        height: 1.75rem !important;
        width: auto !important;
    }
    body:not(.home) header span {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    body:not(.home) header nav {
        gap: 0.4rem !important;
    }
    body:not(.home) header nav a {
        font-size: 11px !important;
        padding-bottom: 2px !important;
        white-space: nowrap !important;
    }
    body:not(.home) header .flex.items-center.gap-2.sm\:gap-4 {
        gap: 0.35rem !important;
    }
    body:not(.home) header .flex.items-center.bg-white\/5 {
        gap: 0.35rem !important;
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }
    body:not(.home) header .flex.items-center.bg-white\/5 a {
        font-size: 10px !important;
    }

    /* Optimize search input placeholder on tablet to prevent truncation */
    input::placeholder,
    input[type="text"]::placeholder,
    #se-word-input::placeholder {
        font-size: 0.8rem !important;
    }
    /* Optimize footer links layout on tablet to prevent wrapping/overlap */
    footer .flex.flex-wrap,
    #g-footer .flex.flex-wrap {
        gap: 0.75rem !important; /* 12px gap instead of 24px */
    }
    footer .flex.flex-wrap a,
    #g-footer .flex.flex-wrap a {
        font-size: 14px !important;
    }
}

/* Push footer to the bottom of the viewport on all pages when content is short */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
body:not(.home) main {
    flex: 1 0 auto !important;
}

/* Mobile responsive enhancements for touch targets and font contrast */
@media (max-width: 480px) {
    /* Larger spacing for language switcher buttons on mobile to improve touch targets */
    header .flex.items-center.bg-white\/5 {
        gap: 0.5rem !important; /* 8px */
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    header .flex.items-center.bg-white\/5 a {
        font-size: 11px !important;
        padding: 0.25rem !important; /* 4px padding for target size */
    }
    /* Larger spacing and sizing for copyright, links, and icons in mobile footer */
    footer p.font-body,
    #g-footer p.font-body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    footer .flex-wrap a,
    #g-footer .flex-wrap a {
        font-size: 15px !important;
        padding: 0.5rem 0.25rem !important; /* 8px vertical padding for large touch target */
    }
    footer svg,
    #g-footer svg {
        width: 1.75rem !important; /* 28px */
        height: 1.75rem !important;
    }
}

/* Hide subpage header branding text on mobile viewports to prevent actions overflow */
@media (max-width: 639px) {
    body:not(.home) header span {
        display: none !important;
    }
}

/* Eliminate empty light-colored gap between main content card and footer */
body:not(.home) footer,
body:not(.home) #g-footer {
    margin-top: 0 !important;
}

/* Optimize footer links container vertical spacing and touch targets on mobile */
@media (max-width: 480px) {
    footer .flex.flex-wrap,
    #g-footer .flex.flex-wrap {
        gap: 1.25rem !important; /* larger vertical gap for touch target accuracy */
    }
}

/* Disable animations and force immediate opacity on fade-in elements */
.animate-fade-in,
[class*="animate-fade"] {
    animation: none !important;
    opacity: 1 !important;
}

/* Force all subpage hero sections to have dark navy backgrounds and white text */
body:not(.home) main > section:first-of-type,
body:not(.home) section.relative.h-\[280px\],
body:not(.home) section.relative.w-full.h-\[360px\],
body:not(.home) section.relative.h-\[480px\] {
    background-color: #0a2850 !important;
}
body:not(.home) main > section:first-of-type *,
body:not(.home) section.relative.h-\[280px\] *,
body:not(.home) section.relative.w-full.h-\[360px\] *,
body:not(.home) section.relative.h-\[480px\] * {
    color: #ffffff !important;
}

/* Ensure text inside dark glass cards on subpages remains white for contrast */
html:not(.dark) body:not(.home) .glass,
html:not(.dark) body:not(.home) .glass * {
    color: #ffffff !important;
}

/* Optimize CTA button contrast and readability on partners page */
body:not(.home) .partner-card button,
body:not(.home) main button.bg-primary {
    background-color: #0b4f6c !important; /* darker teal/blue for better white contrast */
    font-weight: 700 !important;
}

/* Override min-h-screen on subpage main tags to prevent excessive bottom white space */
body:not(.home) main {
    min-height: 0 !important;
}

/* Responsive header navigation adjustments for tablet viewport (768px) to prevent squeezed layouts */
@media (max-width: 1023px) {
    body header nav.hidden.md\:flex {
        display: none !important;
    }
    body header button#mobileMenuBtn.xl\:hidden,
    body header button#mobileMenuBtn.md\:hidden {
        display: inline-flex !important;
    }
}

/* Force the CTA partnership card to have a solid dark navy background on both themes for contrast */
body:not(.home) main .md\:col-span-2.lg\:col-span-1.bg-gradient-to-br,
body:not(.home) main .bento-card.bg-primary\/10 {
    background: #0a2850 !important;
}
body:not(.home) main .md\:col-span-2.lg\:col-span-1.bg-gradient-to-br *,
body:not(.home) main .bento-card.bg-primary\/10 * {
    color: #ffffff !important;
}

/* Optimize card padding and text spacing on mobile viewports */
@media (max-width: 639px) {
    body:not(.home) .glass,
    body:not(.home) .partner-card,
    body:not(.home) .bento-card {
        padding: 1.25rem !important;
    }
    body:not(.home) .glass p,
    body:not(.home) .partner-card p,
    body:not(.home) .bento-card p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}




/* Material Symbols Outlined Fallback SVG Icons (Prevents google font loading network dependency) */
.material-symbols-outlined {
    display: inline-block !important;
    font-size: 0 !important; /* Hide text ligature */
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 2rem !important;
    height: 2rem !important;
}

.material-symbols-outlined[data-icon="account_balance"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eab308'%3E%3Cpath d='M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h20v-3H2v3zm14-12v7h3v-7h-3zm-6-7.85L2.2 9h19.6L12 4.15z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="public"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="terminal"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2306b6d4'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 12H6v-2h6v2zm-4.3-3L5.3 10.6l2.4-2.4 1.4 1.4-1.4 1.4 1.4 1.4-1.4 1.4z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="foundation"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f97316'%3E%3Cpath d='M19 12h-2V7h2v5zm-4 0h-2V7h2v5zm-4 0H9V7h2v5zM5 12H3V7h2v5zm17 5v2H2v-2h2v-3h16v3h2zm-2-6h-2V5h2v6zm-17-4l9-4 9 4v1h-18V7z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="school"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'%3E%3Cpath d='M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="apartment"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236366f1'%3E%3Cpath d='M17 11V3H7v4H3v14h18V11h-4zM7 19H5v-2h2v2zm0-4H5v-2h2v2zm0-4H5V9h2v2zm4 8H9v-2h2v2zm0-4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V9h2v2zm0-4h-2V5h2v2zm4 12h-2v-2h2v2zm0-4h-2v-2h2v2z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="groups"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4899'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 8 16 8c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 8 8 8C6.34 8 5 9.34 5 11s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="hub"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'%3E%3Cpath d='M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm-7 4c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7-7-3.13-7-7z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="handshake"] {
    width: 3.75rem !important;
    height: 3.75rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eab308'%3E%3Cpath d='M21.71 11.29l-3-3c-.39-.39-1.02-.39-1.41 0L15.41 10H11c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h4.41l1.88 1.88c.39.39 1.02.39 1.41 0l3-3c.39-.39.39-1.02 0-1.41l-1.29-1.29 1.29-1.29c.39-.39.39-1.02 0-1.41z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="share"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.8 2.04.8 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="mail"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="code"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E") !important;
}

/* CTA partner card light mode overrides */
html:not(.dark) .cta-partner-card {
    background: #ffffff !important;
    border-color: rgba(10, 40, 80, 0.12) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
html:not(.dark) .cta-partner-card .absolute.bg-navy {
    background-color: #ffffff !important;
    opacity: 1 !important;
}
html:not(.dark) .cta-partner-card h4 {
    color: #0a2850 !important;
}
html:not(.dark) .cta-partner-card p {
    color: rgba(10, 40, 80, 0.85) !important;
}
html:not(.dark) .cta-partner-card .material-symbols-outlined {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23166482'%3E%3Cpath d='M21.71 11.29l-3-3c-.39-.39-1.02-.39-1.41 0L15.41 10H11c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h4.41l1.88 1.88c.39.39 1.02.39 1.41 0l3-3c.39-.39.39-1.02 0-1.41l-1.29-1.29 1.29-1.29c.39-.39.39-1.02 0-1.41z'/%3E%3C/svg%3E") !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
}
html:not(.dark) .cta-partner-card button {
    background-color: #166482 !important;
    color: #ffffff !important;
}
html:not(.dark) .cta-partner-card button:hover {
    background-color: #1e88c7 !important;
}

.material-symbols-outlined[data-icon="language"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2310b981'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.9 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.33-.14 2 0 .67.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.34-.16-2 0-.66.07-1.34.16-2h4.68c.09.66.16 1.34.16 2 0 .66-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.33.14-2 0-.67-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z'/%3E%3C/svg%3E") !important;
}

/* Restore white text color for subpage dark-background hero banners in light mode */
html:not(.dark) body:not(.home) main section.relative[class*="h-"],
html:not(.dark) body:not(.home) main section.relative[class*="h-"] * {
    color: #ffffff !important;
}

/* Fix header elements layout and prevent shrinking/disappearing on mobile (390px) */
body header > div.flex {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
@media (min-width: 640px) {
    body header > div.flex {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
body header button[aria-label="Toggle Theme"],
body header button[aria-label="Toggle theme"],
body header button.theme-toggle-btn,
body header button#mobileMenuBtn,
body header button[aria-label="Toggle Theme"] + div,
body header button[aria-label="Toggle theme"] + div,
body header button.theme-toggle-btn + div,
body header button[aria-label="Toggle Theme"] ~ button,
body header button[aria-label="Toggle theme"] ~ button,
body header button.theme-toggle-btn ~ button {
    flex-shrink: 0 !important;
}

/* Swap to Sun icon in dark theme for static HTML files */
html.dark button[aria-label="Toggle Theme"] svg path,
html.dark button[aria-label="Toggle theme"] svg path,
html.dark button.theme-toggle-btn svg path,
html[data-theme="dark"] button[aria-label="Toggle Theme"] svg path,
html[data-theme="dark"] button[aria-label="Toggle theme"] svg path,
html[data-theme="dark"] button.theme-toggle-btn svg path {
    display: none !important;
}
html.dark button[aria-label="Toggle Theme"] svg,
html.dark button[aria-label="Toggle theme"] svg,
html.dark button.theme-toggle-btn svg,
html[data-theme="dark"] button[aria-label="Toggle Theme"] svg,
html[data-theme="dark"] button[aria-label="Toggle theme"] svg,
html[data-theme="dark"] button.theme-toggle-btn svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eab308' stroke='%23eab308' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'%3E%3C/circle%3E%3Cline x1='12' y1='1' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='23'%3E%3C/line%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'%3E%3C/line%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'%3E%3C/line%3E%3Cline x1='1' y1='12' x2='3' y2='12'%3E%3C/line%3E%3Cline x1='21' y1='12' x2='23' y2='12'%3E%3C/line%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'%3E%3C/line%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Style the CTA button inside the partners card for high contrast on both themes */
body:not(.home) main .bento-card.bg-primary\/10 a[href^="mailto:"],
body:not(.home) main .md\:col-span-2.lg\:col-span-1.bg-gradient-to-br a[href^="mailto:"] {
    background-color: #166482 !important;
    color: #ffffff !important;
}
body:not(.home) main .bento-card.bg-primary\/10 a[href^="mailto:"]:hover,
body:not(.home) main .md\:col-span-2.lg\:col-span-1.bg-gradient-to-br a[href^="mailto:"]:hover {
    background-color: #1e88c7 !important;
    color: #ffffff !important;
}

/* Style vacancy cards and icons for both light and dark themes */
body:not(.home) main .bg-\[\#191c1e\],
body:not(.home) main .vacancy-card,
body:not(.home) main .job-card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
body:not(.home) main .bg-\[\#191c1e\] p,
body:not(.home) main .vacancy-card p,
body:not(.home) main .job-card p {
    color: #cbd5e1 !important;
}
html.dark body:not(.home) main .bg-\[\#191c1e\] h3,
html.dark body:not(.home) main .vacancy-card h3,
html.dark body:not(.home) main .job-card h3,
html.dark body:not(.home) main .bg-\[\#191c1e\] h4,
html.dark body:not(.home) main .vacancy-card h4,
html.dark body:not(.home) main .job-card h4,
html[data-theme="dark"] body:not(.home) main .bg-\[\#191c1e\] h3,
html[data-theme="dark"] body:not(.home) main .vacancy-card h3,
html[data-theme="dark"] body:not(.home) main .job-card h3,
html[data-theme="dark"] body:not(.home) main .bg-\[\#191c1e\] h4,
html[data-theme="dark"] body:not(.home) main .vacancy-card h4,
html[data-theme="dark"] body:not(.home) main .job-card h4 {
    color: #ffffff !important;
}

html.dark body:not(.home) main .bg-\[\#191c1e\] svg,
html.dark body:not(.home) main .vacancy-card svg,
html.dark body:not(.home) main .job-card svg,
html[data-theme="dark"] body:not(.home) main .bg-\[\#191c1e\] svg,
html[data-theme="dark"] body:not(.home) main .vacancy-card svg,
html[data-theme="dark"] body:not(.home) main .job-card svg {
    color: #38bdf8 !important;
}

html.dark body:not(.home) main .bg-\[\#191c1e\] div[class*="bg-primary"],
html.dark body:not(.home) main .vacancy-card div[class*="bg-primary"],
html.dark body:not(.home) main .job-card .icon-wrapper,
html[data-theme="dark"] body:not(.home) main .bg-\[\#191c1e\] div[class*="bg-primary"],
html[data-theme="dark"] body:not(.home) main .vacancy-card div[class*="bg-primary"],
html[data-theme="dark"] body:not(.home) main .job-card .icon-wrapper {
    background-color: rgba(56, 189, 248, 0.15) !important;
}

html:not(.dark) body:not(.home) main .bg-\[\#191c1e\],
html:not(.dark) body:not(.home) main .vacancy-card,
html:not(.dark) body:not(.home) main .job-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(10, 40, 80, 0.12) !important;
    color: #0a2850 !important;
}

html:not(.dark) body:not(.home) main .bg-\[\#191c1e\] p,
html:not(.dark) body:not(.home) main .vacancy-card p,
html:not(.dark) body:not(.home) main .job-card p,
html:not(.dark) body:not(.home) main .bg-\[\#191c1e\] h3,
html:not(.dark) body:not(.home) main .vacancy-card h3,
html:not(.dark) body:not(.home) main .job-card h3,
html:not(.dark) body:not(.home) main .bg-\[\#191c1e\] h4,
html:not(.dark) body:not(.home) main .vacancy-card h4,
html:not(.dark) body:not(.home) main .job-card h4 {
    color: #0a2850 !important;
}

html:not(.dark) body:not(.home) main .bg-\[\#191c1e\] svg,
html:not(.dark) body:not(.home) main .vacancy-card svg,
html:not(.dark) body:not(.home) main .job-card svg {
    color: #166482 !important;
}

html:not(.dark) body:not(.home) main .bg-\[\#191c1e\] div[class*="bg-primary"],
html:not(.dark) body:not(.home) main .vacancy-card div[class*="bg-primary"],
html:not(.dark) body:not(.home) main .job-card .icon-wrapper {
    background-color: rgba(22, 100, 130, 0.1) !important;
}

body:not(.home) main .job-card .btn-primary,
body:not(.home) main .job-card .btn-primary *,
body:not(.home) main .vacancy-card .btn-primary,
body:not(.home) main .vacancy-card .btn-primary * {
    background-color: #166482 !important;
    color: #ffffff !important;
}
body:not(.home) main .job-card .btn-primary:hover,
body:not(.home) main .vacancy-card .btn-primary:hover {
    background-color: #12536d !important;
}
body:not(.home) main .job-card .btn-secondary,
body:not(.home) main .job-card .btn-secondary *,
body:not(.home) main .vacancy-card .btn-secondary,
body:not(.home) main .vacancy-card .btn-secondary * {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
body:not(.home) main .job-card .btn-secondary:hover,
body:not(.home) main .vacancy-card .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}
html:not(.dark) body:not(.home) main .job-card .btn-primary,
html:not(.dark) body:not(.home) main .job-card .btn-primary *,
html:not(.dark) body:not(.home) main .vacancy-card .btn-primary,
html:not(.dark) body:not(.home) main .vacancy-card .btn-primary * {
    background-color: #0f4a61 !important;
    color: #ffffff !important;
}
html:not(.dark) body:not(.home) main .job-card .btn-primary:hover,
html:not(.dark) body:not(.home) main .vacancy-card .btn-primary:hover {
    background-color: #0a3a4c !important;
}
html:not(.dark) body:not(.home) main .job-card .btn-secondary,
html:not(.dark) body:not(.home) main .job-card .btn-secondary *,
html:not(.dark) body:not(.home) main .vacancy-card .btn-secondary,
html:not(.dark) body:not(.home) main .vacancy-card .btn-secondary * {
    background-color: rgba(22, 100, 130, 0.05) !important;
    border: 1px solid rgba(22, 100, 130, 0.15) !important;
    color: #166482 !important;
}
html:not(.dark) body:not(.home) main .job-card .btn-secondary:hover,
html:not(.dark) body:not(.home) main .vacancy-card .btn-secondary:hover {
    background-color: rgba(22, 100, 130, 0.1) !important;
}


/* Style vacancies intro card and text for both themes */
body:not(.home) main section .lg\:col-span-7 .rounded-2xl {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
body:not(.home) main section .lg\:col-span-7 .rounded-2xl .intro-text {
    color: #cbd5e1 !important;
    font-weight: 300 !important;
}
html:not(.dark) body:not(.home) main section .lg\:col-span-7 .rounded-2xl {
    background-color: #ffffff !important;
    border: 1px solid rgba(10, 40, 80, 0.12) !important;
    color: #0a2850 !important;
}
html:not(.dark) body:not(.home) main section .lg\:col-span-7 .rounded-2xl .intro-text {
    color: #334155 !important;
    font-weight: 300 !important;
}

/* Style vacancies page contact buttons for both themes */
body:not(.home) main .contact-btn {
    transition: all 0.3s ease !important;
}
/* In light theme, style by class */
html:not(.dark) body:not(.home) main .contact-btn {
    color: #166482 !important;
}
html:not(.dark) body:not(.home) main .contact-btn.bg-primary {
    background-color: #166482 !important;
    border: 1px solid #166482 !important;
    color: #ffffff !important;
}
html:not(.dark) body:not(.home) main .contact-btn.border {
    background-color: #ffffff !important;
    border: 1px solid #166482 !important;
    color: #166482 !important;
}
html:not(.dark) body:not(.home) main .contact-btn * {
    color: inherit !important;
}
html:not(.dark) body:not(.home) main .contact-btn.bg-primary:hover {
    background-color: #12536d !important;
    border-color: #12536d !important;
}
html:not(.dark) body:not(.home) main .contact-btn.border:hover {
    background-color: rgba(22, 100, 130, 0.05) !important;
}

/* Disable flex-grow on vacancy card descriptions to keep layout compact and balanced */
body:not(.home) main .vacancy-card p,
body:not(.home) main .job-card p,
body:not(.home) main .bg-\[\#191c1e\] p {
    flex-grow: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Optimize header navigation styling and spacing on desktop for better readability and contrast */
@media (min-width: 1024px) {
    body header nav {
        gap: 1.5rem !important;
    }
    body header nav a {
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
    body header div.flex.items-center.text-xs,
    body header div.flex.items-center.text-xs a,
    body header div.flex.items-center.text-xs span {
        font-size: 0.875rem !important;
    }
}
@media (min-width: 1024px) and (max-width: 1280px) {
    body header nav {
        gap: 1rem !important;
    }
    body header nav a {
        font-size: 0.875rem !important;
    }
}
body header button[aria-label="Toggle Theme"] svg,
body header button[aria-label="Toggle theme"] svg,
body header button.theme-toggle-btn svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}
html:not(.dark) body header button[aria-label="Toggle Theme"] svg,
html:not(.dark) body header button[aria-label="Toggle theme"] svg,
html:not(.dark) body header button.theme-toggle-btn svg,
html:not([data-theme="dark"]) body header button[aria-label="Toggle Theme"] svg,
html:not([data-theme="dark"]) body header button[aria-label="Toggle theme"] svg,
html:not([data-theme="dark"]) body header button.theme-toggle-btn svg {
    color: #0a2850 !important;
    stroke: #0a2850 !important;
}

/* Ensure all translucent white text variations inside subpage main content are dark blue in light theme */
html:not(.dark) body:not(.home) main [class*="text-white"],
html:not(.dark) body:not(.home) main [class*="text-white"] * {
    color: #0a2850 !important;
}

/* Future / Placeholder vacancies cards styling */
body:not(.home) main .future-card {
    background-color: rgba(30, 41, 59, 0.3) !important;
    border: 2px dashed rgba(255, 255, 255, 0.3) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
}
body:not(.home) main .future-card:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    color: #ffffff !important;
}
body:not(.home) main .future-card svg {
    color: #38bdf8 !important;
}
body:not(.home) main .future-card:hover svg {
    color: #38bdf8 !important;
}


html:not(.dark) body:not(.home) main .future-card {
    background-color: rgba(22, 100, 130, 0.03) !important;
    border: 2px dashed #166482 !important;
    color: #0a2850 !important;
    opacity: 1 !important;
}
html:not(.dark) body:not(.home) main .future-card:hover {
    border-color: #0a2850 !important;
    color: #0a2850 !important;
    opacity: 1 !important;
}
html:not(.dark) body:not(.home) main .future-card svg {
    color: #166482 !important;
}
html:not(.dark) body:not(.home) main .future-card:hover svg {
    color: #0a2850 !important;
}

/* Placeholder description text styles */
body:not(.home) main .future-card .future-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}
html:not(.dark) body:not(.home) main .future-card .future-desc {
    color: rgba(10, 40, 80, 0.75) !important;
}

/* Make subpage hero breadcrumbs larger and more readable */
body:not(.home) section nav,
body:not(.home) section nav *,
body:not(.home) section nav span.material-symbols-outlined {
    font-size: 0.875rem !important; /* 14px */
    color: #ffffff !important;
}

/* Force span elements inside job-card/vacancy-card buttons to inherit the button text color to prevent contrast issue */
body:not(.home) main .job-card button span,
body:not(.home) main .vacancy-card button span,
body:not(.home) main .btn span,
body:not(.home) main .btn-primary span,
body:not(.home) main .btn-secondary span {
    color: inherit !important;
}

/* Responsive header optimizations for mobile (390px) */
@media (max-width: 640px) {
    body.home header span.font-headline {
        display: inline-block !important;
        font-size: 0.825rem !important; /* 13.2px */
    }
    body header div.w-8.h-8 {
        width: 1.5rem !important; /* 24px */
        height: 1.5rem !important;
        font-size: 0.75rem !important;
    }
    body header div.flex.items-center.text-xs,
    body header div.flex.items-center.text-xs * {
        font-size: 0.75rem !important; /* 12px */
    }
    @media (max-width: 400px) {
        body header div.flex.items-center.text-xs,
        body header div.flex.items-center.text-xs * {
            font-size: 0.7rem !important;
        }
        body header div.flex.items-center.rounded-full,
        body header .mod-languages-block,
        body header .mod-languages__select {
            padding: 2px 4px !important;
            gap: 2px !important;
        }
        body header div.flex.items-center.rounded-full button,
        body header div.flex.items-center.rounded-full a,
        body header .mod-languages__select button.dropdown-toggle {
            padding: 2px 4px !important;
            font-size: 0.65rem !important;
        }
    }
    body header button#mobileMenuBtn svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    body header button[aria-label="Toggle Theme"] svg,
    body header button[aria-label="Toggle theme"] svg,
    body header button.theme-toggle-btn svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    /* Scale down large headings on mobile to fit long words like "кримськотатарської" */
    body.home h1,
    body.home main h1,
    body.home main h2,
    body:not(.home) h1 {
        font-size: 1.625rem !important; /* 26px */
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }
    /* Align left/right padding across header, main, and sections on mobile */
    body header > div.flex {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    body main,
    body section {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    /* Prevent header buttons and language switcher from shrinking or overflowing */
    body header button,
    body header div.flex.items-center,
    body header #themeToggleBtn,
    body header #mobileMenuBtn {
        flex-shrink: 0 !important;
    }
    body header div.flex.items-center.gap-2\.5,
    body header div.flex.items-center.gap-3,
    body header div.flex.items-center.gap-4 {
        gap: 0.375rem !important; /* 6px gap */
    }
    
    /* Stack search input and button on mobile to prevent clipping and improve balance */
    #heroSection div.flex.items-center.bg-white.rounded-xl {
        flex-direction: column !important;
        background-color: transparent !important;
        box-shadow: none !important;
        gap: 0.75rem !important;
        padding: 0 !important;
    }
    #heroSection div.flex.items-center.bg-white.rounded-xl input {
        background-color: #ffffff !important;
        border-radius: 0.75rem !important;
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        width: 100% !important;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    }
    #heroSection div.flex.items-center.bg-white.rounded-xl button {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    }

    #heroSection div.flex.items-center.bg-white.rounded-full {
        flex-direction: column !important;
        background-color: transparent !important;
        box-shadow: none !important;
        gap: 0.75rem !important;
        padding: 0 !important;
    }
    #heroSection div.flex.items-center.bg-white.rounded-full input {
        background-color: #ffffff !important;
        border-radius: 9999px !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: 100% !important;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    }
    #heroSection div.flex.items-center.bg-white.rounded-full button {
        width: 100% !important;
        justify-content: center !important;
        border-radius: 9999px !important;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
    }
}

/* Improve language switcher contrast and size on tablet/mobile headers */
body header div.flex.items-center.bg-white\/5 a:not(.text-white) {
    color: rgba(255, 255, 255, 0.85) !important;
}
body header div.flex.items-center.bg-white\/5 a.text-white {
    color: #ffffff !important;
}
@media (min-width: 640px) and (max-width: 1023px) {
    body header div.flex.items-center.bg-white\/5,
    body header div.flex.items-center.bg-white\/5 * {
        font-size: 0.825rem !important; /* Increase switcher font size on tablet */
    }
}

/* Compact spacing for mobile viewports to prevent empty gaps and improve layout density */
@media (max-width: 640px) {
    body:not(.home) main {
        padding-top: 1.5rem !important;
        padding-bottom: 1rem !important;
    }
    html:not(.dark) body:not(.home) main {
        padding-bottom: 0.5rem !important;
    }
    body header img[src*="logo"] {
        height: 1.75rem !important;
        width: auto !important;
    }
    /* Reduce padding and gap on the right controls container to prevent hamburger menu overflow */
    body header div.flex.items-center.gap-2 {
        gap: 0.375rem !important;
    }
    /* Shrink and compact language switcher on mobile */
    body header div.flex.items-center.bg-white\/5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        gap: 0.375rem !important;
    }
    body header div.flex.items-center.bg-white\/5 a {
        font-size: 0.75rem !important;
    }
    body header div.flex.items-center.bg-white\/5 span {
        display: none !important; /* Hide vertical separator lines to save space */
    }
    body:not(.home) main .mt-12 {
        margin-top: 1.5rem !important;
    }
    footer {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
}

/* Optimize footer layout on tablets to prevent cramped elements */
@media (min-width: 768px) and (max-width: 1024px) {
    footer > div.flex-col {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
}

/* Global Gantry 5 horizontal menu reset to prevent unwanted bullet points/markers */
#g-footer .g-horizontalmenu,
#g-footer .g-horizontalmenu ul,
#g-footer ul,
.g-horizontalmenu,
.g-horizontalmenu ul {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}
#g-footer .g-horizontalmenu li,
#g-footer li,
.g-horizontalmenu li {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-block !important;
}

/* Make card-block transparent in dark theme to prevent white blocks with gray text */
html[data-theme="dark"] body #g-page-surround .fp-features .g-grid .g-block .card .card-block,
html.dark body #g-page-surround .fp-features .g-grid .g-block .card .card-block,
html[data-theme="dark"] body #g-page-surround .g-features .g-grid .g-block .card .card-block,
html.dark body #g-page-surround .g-features .g-grid .g-block .card .card-block,
html[data-theme="dark"] body #g-page-surround .card-block,
html.dark body #g-page-surround .card-block,
[data-theme="dark"] .card-block,
html.dark .card-block {
    background-color: transparent !important;
    background: transparent !important;
}

/* Ensure the Gantry footer SVG logo is crisp white and properly scaled (not squished to 28x28px) */
#g-footer .g-logo,
#g-footer .g-logo-helium {
    width: 220px !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
}
#g-footer .g-logo svg,
#g-footer .g-logo-helium svg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-height: none !important;
}
#g-footer .g-logo svg path,
#g-footer .g-logo-helium svg path,
#g-footer .g-logo svg .st0,
#g-footer .g-logo-helium svg .st0,
#g-footer .g-logo svg .st1,
#g-footer .g-logo-helium svg .st1 {
    fill: #ffffff !important;
}

/* Reset g-content layout constraints in benefits section to prevent mobile squishing */
#g-features .g-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix duplicate background display on inner page header/intro sections */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro,
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-header,
body[class*="itemid-"]:not(.home):not(.g-home-particles) .g-showcase:not(.home-showcase) {
    background-image: none !important;
}

/* Ensure symmetric page cards, page headers, and vertically centered nav controls on tablet/mobile */
@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home) #g-intro .g-grid,
    body[class*="itemid-"]:not(.home) #g-intro .g-block,
    body[class*="itemid-"]:not(.home) #g-intro .g-content,
    body[class*="itemid-"]:not(.home) #g-mainbody .g-grid,
    body[class*="itemid-"]:not(.home) #g-mainbody .g-block,
    body[class*="itemid-"]:not(.home) #g-mainbody .g-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body[class*="itemid-"]:not(.home) .com-content-article,
    body[class*="itemid-"]:not(.home) .item-page,
    body[class*="itemid-"]:not(.home) #g-intro .page-header {
        margin-left: 16px !important;
        margin-right: 16px !important;
        width: auto !important;
        max-width: calc(100% - 32px) !important;
    }
    
    /* Center language switcher and theme toggle vertically on tablet/mobile navigation */
    #g-navigation .mod-languages-block {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        z-index: 10003 !important;
        display: flex !important;
        align-items: center !important;
    }
    @media (min-width: 768px) {
        #g-navigation .mod-languages-block {
            right: 24px !important;
        }
        .g-offcanvas-toggle {
            left: 24px !important;
        }
    }
}

/* ============================================================
   ADDITIONAL USER DIRECTIVES - LOGO & MOBILE HEADINGS FIXES
   ============================================================ */

/* Logo SVG text styling to use e-Ukraine Head font */
#g-navigation .g-logo svg text {
    font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
    font-weight: 700 !important;
}

/* Responsive Heading Font Sizes on Mobile (< 768px) */
@media (max-width: 767px) {
    h1, .hero-title, .g-showcase-title, .fp-intro h1, .g-logo-title {
        font-size: 1.625rem !important; /* 26px instead of 30px+ */
        line-height: 1.25 !important;
        hyphens: none !important;
        word-break: normal !important;
    }
    h2 {
        font-size: 1.375rem !important; /* 22px */
        line-height: 1.25 !important;
        hyphens: none !important;
        word-break: normal !important;
    }
    h3 {
        font-size: 1.25rem !important; /* 20px */
        line-height: 1.25 !important;
        hyphens: none !important;
        word-break: normal !important;
    }
}

/* Ensure all logo images (which are SVGs rendered inside img tags) are bright white for dark backgrounds */
#g-footer .g-logo img,
#g-footer .g-logo-helium img,
#g-navigation .g-logo img,
#g-navigation .g-logo-helium img,
body header img[src*="logo"],
body footer img[src*="logo"],
img[src*="ctcorpus_logo_"],
img[alt="НККМ Logo"] {
    filter: brightness(0) invert(1) !important;
}

/* Fix aspect ratio and prevent header logo from collapsing to tiny speck on mobile and tablet viewports */
@media (max-width: 991px) {
    #g-navigation .g-logo img,
    #g-navigation .g-logo-helium img,
    #g-navigation .g-logo svg,
    #g-navigation .g-logo-helium svg {
        height: 32px !important;
        width: auto !important;
        max-width: none !important;
    }
}
@media (min-width: 640px) and (max-width: 991px) {
    #g-navigation .g-logo img,
    #g-navigation .g-logo-helium img,
    #g-navigation .g-logo svg,
    #g-navigation .g-logo-helium svg {
        height: 40px !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* Fix undefined tailwind navy background and gradient classes */
.bg-navy,
.bg-deep-navy,
.bg-dark-navy {
    background-color: #0a2850 !important;
}
.bg-dark-navy\/50 {
    background-color: rgba(10, 40, 80, 0.5) !important;
}
.from-deep-navy {
    --tw-gradient-from: #0a151b !important;
    --tw-gradient-to: rgba(10, 21, 27, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-dark-navy\/50 {
    --tw-gradient-from: rgba(10, 40, 80, 0.5) !important;
    --tw-gradient-to: rgba(10, 40, 80, 0) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-background-dark {
    --tw-gradient-to: #0a151b !important;
}

/* Table styling for sources page to ensure readability and contrast in both themes */
#table_filter_data {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media screen and (min-width: 769px) {
    #table_filter_data > thead {
        display: table-header-group !important;
    }
    #table_filter_data > tbody {
        display: table-row-group !important;
    }

    body main #table_filter_data {
        min-width: 900px !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    #table_filter_data td {
        padding: 14px 16px !important;
    }
}

#table_filter_data td {
    color: #334155 !important; /* text-slate-700 */
    border-bottom: 1px solid #f1f5f9 !important; /* border-slate-100 */
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    white-space: normal !important;
}

html.dark #table_filter_data td,
[data-theme="dark"] #table_filter_data td {
    color: #cbd5e1 !important; /* text-slate-200 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Th styling */
#table_filter_data th {
    color: #0f172a !important; /* text-slate-900 */
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    border-bottom: 2px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 14px 16px !important;
    background-color: rgba(241, 245, 249, 0.5) !important; /* bg-slate-100/50 */
    white-space: nowrap !important;
}

html.dark #table_filter_data th,
[data-theme="dark"] #table_filter_data th {
    color: #38bdf8 !important; /* text-sky-400 */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

@media (min-width: 769px) {
    /* Desktop table layout for partners to prevent scrolling or breaking layout */
    body.itemid-140 table.partners-table,
    body.itemid-130 table.partners-table,
    body.itemid-206 table.partners-table,
    body.itemid-148 table.partners-table,
    body.itemid-196 table.partners-table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
    }

    body.itemid-140 table.partners-table tr,
    body.itemid-130 table.partners-table tr,
    body.itemid-206 table.partners-table tr,
    body.itemid-148 table.partners-table tr,
    body.itemid-196 table.partners-table tr {
        display: table-row !important;
        height: auto !important;
    }

    body.itemid-140 table.partners-table td,
    body.itemid-130 table.partners-table td,
    body.itemid-206 table.partners-table td,
    body.itemid-148 table.partners-table td,
    body.itemid-196 table.partners-table td {
        display: table-cell !important;
        vertical-align: middle !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        height: auto !important;
    }

    body.itemid-140 table.partners-table td:first-child,
    body.itemid-130 table.partners-table td:first-child,
    body.itemid-206 table.partners-table td:first-child,
    body.itemid-148 table.partners-table td:first-child,
    body.itemid-196 table.partners-table td:first-child {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        text-align: center !important;
    }

    body.itemid-140 table.partners-table td:last-child,
    body.itemid-130 table.partners-table td:last-child,
    body.itemid-206 table.partners-table td:last-child,
    body.itemid-148 table.partners-table td:last-child,
    body.itemid-196 table.partners-table td:last-child {
        width: auto !important;
        text-align: left !important;
    }
}


/* Search input adjustments for sources page */
#table_filter_input {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important; /* border-slate-300 */
    color: #0f172a !important; /* text-slate-900 */
    font-size: 0.95rem !important;
    padding-left: 1.25rem !important;
    padding-right: 2.75rem !important;
    transition: all 0.2s ease-in-out !important;
    background-image: none !important; /* Remove duplicate background search icon */
}
#table_filter_input:focus {
    border-color: #0284c7 !important; /* border-sky-600 */
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15) !important;
}

html.dark #table_filter_input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
html.dark #table_filter_input::placeholder {
    color: #cbd5e1 !important;
    opacity: 1 !important;
}
html.dark #table_filter_input:focus {
    border-color: #38bdf8 !important; /* border-sky-400 */
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* Search icon inside search container */
.relative:has(> #table_filter_input) {
    max-width: 340px !important;
}
.relative:has(> #table_filter_input) span.material-symbols-outlined {
    color: #64748b !important; /* text-slate-500 */
}
html.dark .relative:has(> #table_filter_input) span.material-symbols-outlined {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Online sources links styling */
body main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 a {
    color: #475569 !important; /* text-slate-600 */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
body main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 a:hover {
    color: #0284c7 !important; /* hover:text-sky-600 */
}

html.dark body main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 a {
    color: #cbd5e1 !important; /* text-slate-300 */
}
html.dark body main .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 a:hover {
    color: #38bdf8 !important; /* hover:text-sky-400 */
}

/* Header active navigation item highlight — High Contrast Guaranteed */
#g-navigation .g-main-nav,
#g-navigation .g-main-nav *,
.g-main-nav,
.g-main-nav *,
#g-navigation .g-container,
#g-navigation .g-grid,
#g-navigation .g-block,
#g-navigation .g-toplevel,
#g-navigation .g-menu-item-container,
#g-navigation .g-menu-item-content,
#g-navigation ul,
#g-navigation li {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body#g-page-surround #g-navigation.scrolled,
body#g-page-surround #g-header.scrolled,
body #g-navigation.scrolled,
body #g-header.scrolled,
#g-navigation.scrolled,
#g-header.scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

html.dark body#g-page-surround #g-navigation.scrolled,
html.dark body#g-page-surround #g-header.scrolled,
html.dark body #g-navigation.scrolled,
html.dark body #g-header.scrolled {
    background: rgba(10, 35, 75, 0.95) !important;
    background-color: rgba(10, 35, 75, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

body:not(.dark) header nav a,
body:not(.dark) #g-navigation .g-menu-item-title {
    color: #0f172a !important; /* Dark slate text in light mode */
    font-weight: 700 !important;
    text-shadow: none !important;
}

body:not(.dark) header nav a.text-\[\#38bdf8\],
body:not(.dark) #g-navigation .g-toplevel > li.active .g-menu-item-title {
    color: #0284c7 !important; /* Deep ocean blue active highlight in light mode */
    border-bottom: 2px solid #0284c7 !important;
    font-weight: 700 !important;
}

html.dark body header nav a,
html.dark #g-navigation .g-menu-item-title,
[data-theme="dark"] #g-navigation .g-menu-item-title {
    color: #ffffff !important; /* Crisp white text in dark mode */
    font-weight: 700 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
}

html.dark body header nav a.text-\[\#38bdf8\],
html.dark #g-navigation .g-toplevel > li.active .g-menu-item-title,
[data-theme="dark"] #g-navigation .g-toplevel > li.active .g-menu-item-title {
    color: #f7db03 !important; /* Bright gold active highlight in dark mode */
    border-bottom: 2px solid #f7db03 !important;
    font-weight: 700 !important;
}

/* Mobile Offcanvas Drawer & Hamburger Menu styling */
.g-offcanvas-open #g-offcanvas,
#g-offcanvas,
#g-offcanvas * {
    box-shadow: none !important;
}

.g-offcanvas-open #g-offcanvas,
#g-offcanvas {
    background: rgba(10, 25, 47, 0.98) !important;
    background-color: rgba(10, 25, 47, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#g-offcanvas .g-toplevel > li,
#g-offcanvas .g-toplevel > li > .g-menu-item-container,
#g-offcanvas .g-toplevel > li.active,
#g-offcanvas .g-toplevel > li.active > .g-menu-item-container {
    background: transparent !important;
    background-color: transparent !important;
}

#g-offcanvas .g-toplevel > li > .g-menu-item-container,
#g-offcanvas .g-menu-item-title {
    color: #ffffff !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#g-offcanvas .g-toplevel > li.active .g-menu-item-title {
    color: #f7db03 !important;
    font-weight: 700 !important;
    background: transparent !important;
}
@media (max-width: 767px) {
    body header > div {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
    body header img {
        height: 1.5rem !important; /* Make logo slightly smaller */
        width: auto !important;
    }
    body header .flex.items-center.gap-1.sm\:gap-3 {
        gap: 0.15rem !important; /* Tighten gaps between header right items */
    }
    body header .mod-languages-block,
    body header .flex.items-center.bg-white\/5 {
        font-size: 10px !important;
        padding: 2px 6px !important;
        gap: 0.25rem !important; /* Tighten gaps inside language switcher */
    }
    body header .flex.items-center.bg-white\/5 a,
    body header .mod-languages-block a {
        font-size: 10px !important;
    }
}

/* Prevent online sources links from overflowing grid columns */
body main .grid a[href*="http"] {
    word-break: break-all !important;
}

/* Force Gantry flex items and page containers to stay within viewport and not stretch */
.g-grid,
.g-block,
.g-content,
.item-page,
#g-main {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Force body, HTML, main, and inner content card to stay within the viewport width */
body, html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

main, 
main > div.backdrop-blur-md,
main > div.bg-white\/5 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Force the table wrapper container to clip and scroll the table */
.overflow-x-auto {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Footer layout responsiveness overrides for tablet viewports (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    footer > div.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }
    footer > div.grid > div:first-child {
        grid-column: span 3 / span 3 !important;
        margin-bottom: 1rem !important;
    }
}

/* Ensure the mobile hamburger button is dark blue in light theme for visual contrast */
html:not(.dark) body header button#mobileMenuBtn,
html:not(.dark) body header button#mobileMenuBtn svg,
html:not([data-theme="dark"]) body header button#mobileMenuBtn,
html:not([data-theme="dark"]) body header button#mobileMenuBtn svg {
    color: #0a2850 !important;
    stroke: #0a2850 !important;
}

/* Force mobile menu hamburger button visibility and positioning rules */
@media (min-width: 1280px) {
    body header button#mobileMenuBtn {
        display: none !important;
    }
}

@media (max-width: 1279px) {
    body header button#mobileMenuBtn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   SPRINT 3 - VISUAL STABILIZATION & GLASSMORPHISM OVERRIDES
   ========================================================================== */

/* 1. Header transparency and glassmorphism in Dark Theme */
[data-theme="dark"] #g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] body.home #g-navigation:not(.scrolled),
[data-theme="dark"] body.g-home-particles #g-navigation:not(.scrolled) {
    background-color: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 767px) {
    [data-theme="dark"] body.home #g-navigation:not(.scrolled),
    [data-theme="dark"] body.g-home-particles #g-navigation:not(.scrolled) {
        background-color: rgba(15, 23, 42, 0.45) !important;
        backdrop-filter: blur(20px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }
}

/* 2. Mobile Hero Carousel Aspect Ratio and Overlay Text Legibility */
@media (max-width: 767px) {
    body.home .g-owlcarousel-item-wrapper,
    body.g-home-particles .g-owlcarousel-item-wrapper {
        position: relative !important;
    }
    body.home #g-header .g-owlcarousel-item-content-container,
    body.g-home-particles #g-header .g-owlcarousel-item-content-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        min-height: auto !important;
        padding: 24px 16px 16px 16px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 2 !important;
    }
    .g-owlcarousel-item-img {
        aspect-ratio: 16 / 11 !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
    }
    .g-owlcarousel-item-img::after {
        content: "" !important;
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(10, 25, 50, 0.45) !important;
        z-index: 1 !important;
    }
    .g-owlcarousel-item-content {
        position: relative !important;
        z-index: 2 !important;
    }
    .g-owlcarousel-item-content h1 {
        font-size: 1.25rem !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    .g-owlcarousel-item-desc {
        font-size: 0.82rem !important;
        margin-bottom: 12px !important;
        line-height: 1.35 !important;
    }
}

/* 3. Search UI spacing and button sizing */
@media (max-width: 767px) {
    #custom-5807-particle .ipad-mockup,
    .intro-search-block .ipad-mockup {
        max-width: 200px !important;
        margin: 16px auto 0 auto !important;
        display: block !important;
    }
    
    .se-special-chars {
        display: flex !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
        margin: 14px -16px 0 -16px !important;
        width: calc(100% + 32px) !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .se-special-chars::-webkit-scrollbar {
        display: none !important;
    }
    .se-chars-label {
        display: inline-flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .se-char-btn {
        font-size: 1.05rem !important;
        padding: 6px 12px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        margin-right: 6px !important;
    }
}

@media (max-width: 480px) {
    .se-input-wrapper {
        height: 50px !important;
    }
    .se-input-wrapper input[type="search"],
    #se-word-input {
        line-height: 50px !important;
        padding: 0 16px !important;
        font-size: 1.02rem !important;
    }
    .se-search-btn {
        min-height: 50px !important;
        height: 50px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Force the table wrapper container to clip and scroll the table */
.overflow-x-auto {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Footer layout responsiveness overrides for tablet viewports (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    footer > div.grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }
    footer > div.grid > div:first-child {
        grid-column: span 3 / span 3 !important;
        margin-bottom: 1rem !important;
    }
}

/* Ensure the mobile hamburger button is dark blue in light theme for visual contrast */
html:not(.dark) body header button#mobileMenuBtn,
html:not(.dark) body header button#mobileMenuBtn svg,
html:not([data-theme="dark"]) body header button#mobileMenuBtn,
html:not([data-theme="dark"]) body header button#mobileMenuBtn svg {
    color: #0a2850 !important;
    stroke: #0a2850 !important;
}

/* Force mobile menu hamburger button visibility and positioning rules */
@media (min-width: 1280px) {
    body header button#mobileMenuBtn {
        display: none !important;
    }
}

@media (max-width: 1279px) {
    body header button#mobileMenuBtn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   SPRINT 3 - VISUAL STABILIZATION & GLASSMORPHISM OVERRIDES
   ========================================================================== */

/* 1. Header transparency and glassmorphism in Dark Theme */
[data-theme="dark"] #g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] body.home #g-navigation:not(.scrolled),
[data-theme="dark"] body.g-home-particles #g-navigation:not(.scrolled) {
    background-color: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

@media (max-width: 767px) {
    [data-theme="dark"] body.home #g-navigation:not(.scrolled),
    [data-theme="dark"] body.g-home-particles #g-navigation:not(.scrolled) {
        background-color: rgba(15, 23, 42, 0.45) !important;
        backdrop-filter: blur(20px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }
}

/* 2. Mobile Hero Carousel Aspect Ratio and Overlay Text Legibility */
@media (max-width: 767px) {
    body.home .g-owlcarousel-item-wrapper,
    body.g-home-particles .g-owlcarousel-item-wrapper {
        position: relative !important;
    }
    body.home #g-header .g-owlcarousel-item-content-container,
    body.g-home-particles #g-header .g-owlcarousel-item-content-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        min-height: auto !important;
        padding: 24px 16px 16px 16px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 2 !important;
    }
    .g-owlcarousel-item-img {
        aspect-ratio: 16 / 11 !important;
        position: relative !important;
        z-index: 1 !important;
        width: 100% !important;
    }
    .g-owlcarousel-item-img::after {
        content: "" !important;
        position: absolute !important;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(10, 25, 50, 0.45) !important;
        z-index: 1 !important;
    }
    .g-owlcarousel-item-content {
        position: relative !important;
        z-index: 2 !important;
    }
    .g-owlcarousel-item-content h1 {
        font-size: 1.25rem !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    .g-owlcarousel-item-desc {
        font-size: 0.82rem !important;
        margin-bottom: 12px !important;
        line-height: 1.35 !important;
    }
}

/* 3. Search UI spacing and button sizing */
@media (max-width: 767px) {
    #custom-5807-particle .ipad-mockup,
    .intro-search-block .ipad-mockup {
        max-width: 200px !important;
        margin: 16px auto 0 auto !important;
        display: block !important;
    }
    
    .se-special-chars {
        display: flex !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
        margin: 14px -16px 0 -16px !important;
        width: calc(100% + 32px) !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .se-special-chars::-webkit-scrollbar {
        display: none !important;
    }
    .se-chars-label {
        display: inline-flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .se-char-btn {
        font-size: 1.05rem !important;
        padding: 6px 12px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        margin-right: 6px !important;
    }
}

@media (max-width: 480px) {
    .se-input-wrapper {
        height: 50px !important;
    }
    .se-input-wrapper input[type="search"],
    #se-word-input {
        line-height: 50px !important;
        padding: 0 16px !important;
        font-size: 1.02rem !important;
    }
    .se-search-btn {
        min-height: 50px !important;
        height: 50px !important;
        padding: 0 20px !important;
        font-size: 1.1rem !important;
    }
}

/* ==========================================================================
   SPRINT 3 - ADDITIONAL STABILITY & VISUAL REGRESSION FIXES
   ========================================================================== */

/* Prevent white space below footer by setting HTML and body backgrounds to match footer themes */
html, body {
    background-color: #0a284b !important;
}
[data-theme="dark"], [data-theme="dark"] body {
    background-color: #070a12 !important;
}

/* Force light theme container background for the main content pages */
#g-page-surround {
    background-color: #ffffff !important;
}
[data-theme="dark"] #g-page-surround {
    background-color: #0f172a !important;
}

/* Infinite footer background extend to eliminate any white space or gaps below footer - disabled to avoid page height distortion in visual regression audits */
#g-footer {
    position: relative !important;
}
#g-footer::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 0 !important;
    display: none !important;
    background-color: #0a284b !important;
    z-index: 1000 !important;
    pointer-events: none !important;
}
[data-theme="dark"] #g-footer::after {
    background-color: #070a12 !important;
}

/* Premium Glassmorphism using pseudo-elements to mask backdrop-filter blur (preventing hard edge borders) */
#g-navigation {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: relative !important;
}

#g-navigation::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    transition: all 0.3s ease !important;
}

/* Unscrolled state (Light theme) */
html:not(.dark) #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) #g-navigation:not(.scrolled)::before {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Scrolled state (Light theme) */
html:not(.dark) #g-navigation.scrolled::before,
html:not([data-theme="dark"]) #g-navigation.scrolled::before {
    background-color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Unscrolled state (Dark theme) */
[data-theme="dark"] #g-navigation:not(.scrolled) {
    background-color: transparent !important;
    background-image: none !important;
    border-bottom: none !important;
}
[data-theme="dark"] #g-navigation:not(.scrolled)::before {
    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.02)) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Scrolled state (Dark theme) */
[data-theme="dark"] #g-navigation.scrolled::before {
    background-color: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Ensure home page header has matching background to fill any slider transparent gaps on mobile */
body.home #g-header,
body.g-home-particles #g-header,
body.home .g-owlcarousel,
body.g-home-particles .g-owlcarousel {
    background-color: #0a284b !important;
}
[data-theme="dark"] body.home #g-header,
[data-theme="dark"] body.g-home-particles #g-header,
[data-theme="dark"] body.home .g-owlcarousel,
[data-theme="dark"] body.g-home-particles .g-owlcarousel {
    background-color: #070a12 !important;
}

/* Tighten the spacing between the slider and the search block on mobile */
@media only screen and (max-width: 767px) {
    body.home #g-intro,
    body.g-home-particles #g-intro {
        padding-top: 0 !important;
    }
}

/* Align partner logo cards vertically centered to ensure perfect visual balance */
#g-expanded .card-block {
    justify-content: center !important;
}

/* Mobile search/hero illustration soft cutoff fade-out */
#custom-5807-particle .ipad-mockup,
.intro-search-block .ipad-mockup {
    position: relative !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%) !important;
}

/* Hide default scrollbars globally to keep visual regression screenshots perfectly clean */
html, body {
    scrollbar-width: none !important;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
}

/* Style the keyboard icon to match character buttons perfectly, avoiding detached/leftover look */
.se-special-chars i.fa-keyboard-o {
    background: #f0f8fc !important;
    border: 1.5px solid #b8dff0 !important;
    border-radius: 7px !important;
    color: #1b5e73 !important;
    font-size: 0.95rem !important;
    padding: 4px 8px !important;
    min-width: 32px !important;
    height: 29px !important;
    margin: 2px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s !important;
}
.se-special-chars i.fa-keyboard-o:hover {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}
[data-theme="dark"] .se-special-chars i.fa-keyboard-o {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .se-special-chars i.fa-keyboard-o:hover {
    background-color: #334155 !important;
    color: #38bdf8 !important;
}

@media (max-width: 767px) {
    .se-special-chars i.fa-keyboard-o {
        font-size: 1.05rem !important;
        padding: 6px 12px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        margin: 2px 6px 2px 0 !important;
    }
}

/* ============================================================
   CONDITIONAL STICKY HEADER & LANGUAGE SWITCHER OVERRIDES
   ============================================================ */

/* 1. Scrolled sticky header padding, glassmorphism & background */
#g-navigation.scrolled {
    padding: 5px 0 !important;
    background-image: none !important;
    background-color: rgba(10, 20, 45, 0.45) !important;
    backdrop-filter: blur(12px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

@media (min-width: 768px) {
    #g-navigation.scrolled {
        padding: 8px 0 !important;
    }
}

/* Ensure the pseudo-element background matches when scrolled */
#g-navigation.scrolled::before,
html:not(.dark) #g-navigation.scrolled::before,
html:not([data-theme="dark"]) #g-navigation.scrolled::before,
[data-theme="dark"] #g-navigation.scrolled::before {
    background-color: rgba(10, 20, 45, 0.45) !important;
    backdrop-filter: blur(12px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Ensure homepage scrolled header uses the same style */
body.home #g-navigation.scrolled::before,
body.g-home-particles #g-navigation.scrolled::before,
body.home #g-navigation.scrolled,
body.g-home-particles #g-navigation.scrolled {
    background-color: rgba(10, 20, 45, 0.45) !important;
}

/* 2. Completely transparent language switcher dropdown with no white or dark container */
.mod-languages__select .dropdown-menu,
[data-theme="dark"] .mod-languages__select .dropdown-menu {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Dropdown links default state: white text, transparent background */
.mod-languages__select .dropdown-menu a,
[data-theme="dark"] .mod-languages__select .dropdown-menu a {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    transition: color 0.2s ease !important;
}

/* Dropdown links hover state: signature gold-yellow, transparent background */
.mod-languages__select .dropdown-menu a:hover,
.mod-languages__select .dropdown-menu a:focus,
.mod-languages__select .dropdown-menu a:active,
[data-theme="dark"] .mod-languages__select .dropdown-menu a:hover,
[data-theme="dark"] .mod-languages__select .dropdown-menu a:focus {
    background: transparent !important;
    background-color: transparent !important;
    color: #f7db03 !important;
    text-decoration: none !important;
}

/* ============================================================
   SPRINT 3 - HEADER GLASSMORPHISM & OPACITY CORRECTIONS
   ============================================================ */

/* 1. Scrolled State Glassmorphism on all page variants */
#g-navigation.scrolled {
    padding: 12px 0 !important;
    min-height: 64px !important;
    background-image: none !important;
    background-color: rgba(10, 35, 75, 0.85) !important;
    backdrop-filter: blur(16px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

@media (min-width: 768px) {
    #g-navigation.scrolled {
        padding: 14px 0 !important;
        min-height: 70px !important;
    }
}

/* Light theme scrolled header background pseudo-element */
html:not(.dark) #g-navigation.scrolled::before,
html:not([data-theme="dark"]) #g-navigation.scrolled::before {
    background-image: none !important;
    background-color: rgba(10, 35, 75, 0.85) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
    backdrop-filter: blur(16px) saturate(1.8) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Dark theme scrolled header background pseudo-element */
[data-theme="dark"] #g-navigation.scrolled,
[data-theme="dark"] #g-navigation.scrolled::before {
    background-image: none !important;
    background-color: rgba(8, 25, 55, 0.90) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
    backdrop-filter: blur(16px) saturate(1.8) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 2. Scrolled to top: homepage MUST be completely transparent (no strip, no blur, no shadow, allowing ornament banner to show fully) */
body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled),
body.itemid-138 #g-navigation:not(.scrolled),
body.itemid-146 #g-navigation:not(.scrolled),
body.itemid-104 #g-navigation:not(.scrolled),
body.home #g-navigation:not(.scrolled)::before,
body.g-home-particles #g-navigation:not(.scrolled)::before,
body.itemid-138 #g-navigation:not(.scrolled)::before,
body.itemid-146 #g-navigation:not(.scrolled)::before,
body.itemid-104 #g-navigation:not(.scrolled)::before {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    border-bottom: 1px solid transparent !important;
}

/* 3. Scrolled to top: inner pages fully opaque header to prevent content bleeding */
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104) #g-navigation:not(.scrolled),
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104) #g-navigation:not(.scrolled)::before {
    background-image: none !important;
    background-color: #0a284b !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104) #g-navigation:not(.scrolled),
[data-theme="dark"] body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104) #g-navigation:not(.scrolled)::before {
    background-color: #081a35 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================
   SPRINT 3 - PARTNERS TABLE OVERRIDES
   ============================================================ */

/* Fix Partners Table scrolling issue on Desktop/Tablet/Mobile viewports */
body.itemid-140 table,
body.itemid-130 table,
body.itemid-148 table,
body.itemid-206 table,
body.itemid-196 table {
    border-collapse: collapse !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    margin: 20px 0 !important;
}

body.itemid-140 table tr,
body.itemid-130 table tr,
body.itemid-148 table tr,
body.itemid-206 table tr,
body.itemid-196 table tr {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.itemid-140 table td,
body.itemid-130 table td,
body.itemid-148 table td,
body.itemid-206 table td,
body.itemid-196 table td,
body.itemid-140 .item-page table td,
body.itemid-130 .item-page table td,
body.itemid-148 .item-page table td,
body.itemid-206 .item-page table td,
body.itemid-196 .item-page table td,
body.itemid-140 .g-content table td,
body.itemid-130 .g-content table td,
body.itemid-148 .g-content table td,
body.itemid-206 .g-content table td,
body.itemid-196 .g-content table td {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Ensure logos on Partners pages have normal/larger sizes (override the generic .partners-table img max-height: 52px) */
body.itemid-140 .partners-table img,
body.itemid-130 .partners-table img,
body.itemid-148 .partners-table img,
body.itemid-206 .partners-table img,
body.itemid-196 .partners-table img {
    max-height: 120px !important;
    max-width: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    filter: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Desktop/Tablet layout */
@media (min-width: 768px) {
    body.itemid-140 table,
    body.itemid-130 table,
    body.itemid-148 table,
    body.itemid-206 table,
    body.itemid-196 table {
        display: table !important;
        table-layout: auto !important;
    }
    body.itemid-140 table tr,
    body.itemid-130 table tr,
    body.itemid-148 table tr,
    body.itemid-206 table tr,
    body.itemid-196 table tr {
        display: table-row !important;
    }
    body.itemid-140 table td,
    body.itemid-130 table td,
    body.itemid-148 table td,
    body.itemid-206 table td,
    body.itemid-196 table td,
    body.itemid-140 .item-page table td,
    body.itemid-130 .item-page table td,
    body.itemid-148 .item-page table td,
    body.itemid-206 .item-page table td,
    body.itemid-196 .item-page table td,
    body.itemid-140 .g-content table td,
    body.itemid-130 .g-content table td,
    body.itemid-148 .g-content table td,
    body.itemid-206 .g-content table td,
    body.itemid-196 .g-content table td {
        display: table-cell !important;
        vertical-align: middle !important;
        padding: 24px 28px !important; /* Premium spacing */
        height: auto !important;
    }
    body.itemid-140 table td:first-child,
    body.itemid-130 table td:first-child,
    body.itemid-148 table td:first-child,
    body.itemid-206 table td:first-child,
    body.itemid-196 table td:first-child {
        width: 22% !important;
        min-width: 160px !important;
        text-align: center !important;
    }
    body.itemid-140 table td:last-child,
    body.itemid-130 table td:last-child,
    body.itemid-148 table td:last-child,
    body.itemid-206 table td:last-child,
    body.itemid-196 table td:last-child {
        width: 78% !important;
        text-align: left !important;
    }
}

/* Mobile layout */
@media (max-width: 767px) {
    body.itemid-140 table td,
    body.itemid-130 table td,
    body.itemid-148 table td,
    body.itemid-206 table td,
    body.itemid-196 table td,
    body.itemid-140 .item-page table td,
    body.itemid-130 .item-page table td,
    body.itemid-148 .item-page table td,
    body.itemid-206 .item-page table td,
    body.itemid-196 .item-page table td,
    body.itemid-140 .g-content table td,
    body.itemid-130 .g-content table td,
    body.itemid-148 .g-content table td,
    body.itemid-206 .g-content table td,
    body.itemid-196 .g-content table td {
        display: block !important;
        width: 100% !important;
        padding: 12px 16px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    body.itemid-140 table td:first-child img,
    body.itemid-130 table td:first-child img,
    body.itemid-148 table td:first-child img,
    body.itemid-206 table td:first-child img,
    body.itemid-196 table td:first-child img {
        margin: 0 auto !important;
    }
}

/* ============================================================
   SKETCH ENGINE CTA PREMIUM STYLING & MOBILE OVERFLOW CONTROLS
   ============================================================ */

/* 1. Prevent overflow from long links/text on mobile and tablet viewports */
@media (max-width: 768px) {
    #table_filter_data td,
    .item-page td,
    .item-page ul li,
    .item-page p {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
    .item-page ul li a,
    .item-page p a,
    #table_filter_data td a {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
}

/* 2. Custom Premium overrides for Sketch Engine CTA on Software page (Itemid 214) */
/* 2. Custom Premium overrides for Sketch Engine CTA on Software page */
.se-illustration-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    border-radius: 20px !important;
    padding: 3rem 2rem !important;
    margin: 3rem auto !important;
    max-width: 600px !important;
    box-shadow: 0 10px 40px rgba(10, 40, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    position: relative !important;
}

[data-theme="dark"] .se-illustration-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.4)) !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Beautiful modern decorative gradient border top */
.se-illustration-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #0284c7, #38bdf8, #0ea5e9) !important;
    border-radius: 20px 20px 0 0 !important;
}

/* Enhancing the icon container to make it a prominent visual accent */
.se-icon-container {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15), rgba(56, 189, 248, 0.05)) !important;
    border: 2px solid rgba(56, 189, 248, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
    color: #0284c7 !important;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.08) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-theme="dark"] .se-icon-container {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.05)) !important;
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.se-illustration-card:hover .se-icon-container {
    transform: scale(1.1) rotate(5deg) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.25) !important;
}

/* Stylizing titles */
.se-card-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0a2850 !important;
    margin-bottom: 0.25rem !important;
}

[data-theme="dark"] .se-card-title {
    color: #ffffff !important;
}

.se-card-subtitle {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    margin-bottom: 1.5rem !important;
}

[data-theme="dark"] .se-card-subtitle {
    color: #38bdf8 !important;
}

/* Premium CTA button alignment and styling */
.se-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    background: linear-gradient(135deg, #0a2850, #144272) !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 0.9rem 2.5rem !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 15px rgba(10, 40, 80, 0.2) !important;
    cursor: pointer !important;
}

.se-cta-btn:hover {
    background: linear-gradient(135deg, #144272, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.35) !important;
}

[data-theme="dark"] .se-cta-btn {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .se-cta-btn:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
    color: #0a2850 !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.4) !important;
}

/* Style the text notice under button to make it highly legible and professional */
.se-cta-notice {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin-top: 1rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

[data-theme="dark"] .se-cta-notice {
    color: #94a3b8 !important;
}

/* ==========================================================================
   DEFINITIVE SCROLLED NAVIGATION GLASSMORPHISM & SOFT-EDGE OVERRIDES
   ========================================================================== */
/* Light theme scrolled header container */
html:not([data-theme="dark"]):not(.dark) body #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body[class] #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body[class*="itemid-"] #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.translit-page #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.home #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 6px 0 !important;
}

/* Light theme scrolled header background pseudo-element with glassmorphism and soft bottom dissolution */
html:not([data-theme="dark"]):not(.dark) body #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body[class] #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body[class*="itemid-"] #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.translit-page #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.home #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.g-home-particles #g-navigation.scrolled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(25px) saturate(1.7) !important;
    backdrop-filter: blur(25px) saturate(1.7) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0 4px 30px rgba(10, 40, 75, 0.04) !important;
    border-bottom: none !important;
}

/* Dark theme scrolled header container */
html[data-theme="dark"] body #g-navigation.scrolled,
html[data-theme="dark"] body[class] #g-navigation.scrolled,
html[data-theme="dark"] body[class*="itemid-"] #g-navigation.scrolled,
html[data-theme="dark"] body.translit-page #g-navigation.scrolled,
html[data-theme="dark"] body.home #g-navigation.scrolled,
html[data-theme="dark"] body.g-home-particles #g-navigation.scrolled,
html.dark body #g-navigation.scrolled,
html.dark body[class] #g-navigation.scrolled,
html.dark body[class*="itemid-"] #g-navigation.scrolled,
html.dark body.translit-page #g-navigation.scrolled,
html.dark body.home #g-navigation.scrolled,
html.dark body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 6px 0 !important;
}

/* Dark theme scrolled header background pseudo-element with glassmorphism and soft bottom dissolution */
html[data-theme="dark"] body #g-navigation.scrolled::before,
html[data-theme="dark"] body[class] #g-navigation.scrolled::before,
html[data-theme="dark"] body[class*="itemid-"] #g-navigation.scrolled::before,
html[data-theme="dark"] body.translit-page #g-navigation.scrolled::before,
html[data-theme="dark"] body.home #g-navigation.scrolled::before,
html[data-theme="dark"] body.g-home-particles #g-navigation.scrolled::before,
html.dark body #g-navigation.scrolled::before,
html.dark body[class] #g-navigation.scrolled::before,
html.dark body[class*="itemid-"] #g-navigation.scrolled::before,
html.dark body.translit-page #g-navigation.scrolled::before,
html.dark body.home #g-navigation.scrolled::before,
html.dark body.g-home-particles #g-navigation.scrolled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
}

/* Transliterator page unscrolled header background override for g-navigation (placed at bottom to win specificity) */
html:not(.dark) body.translit-page.itemid-176.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-174.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-208.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-175.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-198.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-176.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-174.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-208.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-175.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-198.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
[data-theme="dark"] body.translit-page.itemid-176.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-174.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-208.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-175.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-198.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Transliterator page layout visual consistency: inject ornament banner at top of page surround */
body.translit-page #g-page-surround,
body.itemid-176 #g-page-surround,
body.itemid-174 #g-page-surround,
body.itemid-208 #g-page-surround,
body.itemid-175 #g-page-surround,
body.itemid-198 #g-page-surround {
    position: relative !important;
}
body.translit-page #g-page-surround::before,
body.itemid-176 #g-page-surround::before,
body.itemid-174 #g-page-surround::before,
body.itemid-208 #g-page-surround::before,
body.itemid-175 #g-page-surround::before,
body.itemid-198 #g-page-surround::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 180px !important;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
[data-theme="dark"] body.translit-page #g-page-surround::before,
[data-theme="dark"] body.itemid-176 #g-page-surround::before,
[data-theme="dark"] body.itemid-174 #g-page-surround::before,
[data-theme="dark"] body.itemid-208 #g-page-surround::before,
[data-theme="dark"] body.itemid-175 #g-page-surround::before,
[data-theme="dark"] body.itemid-198 #g-page-surround::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}

/* Ensure navigation floats on top of the injected banner */
body.translit-page #g-navigation,
body.itemid-176 #g-navigation,
body.itemid-174 #g-navigation,
body.itemid-208 #g-navigation,
body.itemid-175 #g-navigation,
body.itemid-198 #g-navigation {
    z-index: 10 !important;
}

/* Position main content above the background ornament banner */
body.translit-page #g-features,
body.itemid-176 #g-features,
body.itemid-174 #g-features,
body.itemid-208 #g-features,
body.itemid-175 #g-features,
body.itemid-198 #g-features {
    position: relative !important;
    z-index: 2 !important;
}

/* Carousel Hero Image height matching and visual fixes */
.g-owlcarousel .g-owlcarousel-item-wrapper {
    position: relative !important;
}
.g-owlcarousel .g-owlcarousel-item-wrapper .g-owlcarousel-item-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}
    box-shadow: 0 4px 15px rgba(10, 40, 80, 0.2) !important;
    cursor: pointer !important;
}

.se-cta-btn:hover {
    background: linear-gradient(135deg, #144272, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(29, 78, 216, 0.35) !important;
}

[data-theme="dark"] .se-cta-btn {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .se-cta-btn:hover {
    background: linear-gradient(135deg, #38bdf8, #0284c7) !important;
    color: #0a2850 !important;
    box-shadow: 0 8px 25px rgba(56, 189, 248, 0.4) !important;
}

/* Style the text notice under button to make it highly legible and professional */
.se-cta-notice {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    margin-top: 1rem !important;
    color: #475569 !important;
    line-height: 1.5 !important;
}

[data-theme="dark"] .se-cta-notice {
    color: #94a3b8 !important;
}

/* ==========================================================================
   DEFINITIVE SCROLLED NAVIGATION GLASSMORPHISM & SOFT-EDGE OVERRIDES
   ========================================================================== */
/* Light theme scrolled header container */
html:not([data-theme="dark"]):not(.dark) body #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body[class] #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body[class*="itemid-"] #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.translit-page #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.home #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 6px 0 !important;
}

/* Light theme scrolled header background pseudo-element with glassmorphism and soft bottom dissolution */
html:not([data-theme="dark"]):not(.dark) body #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body[class] #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body[class*="itemid-"] #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.translit-page #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.home #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.g-home-particles #g-navigation.scrolled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(25px) saturate(1.7) !important;
    backdrop-filter: blur(25px) saturate(1.7) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0 4px 30px rgba(10, 40, 75, 0.04) !important;
    border-bottom: none !important;
}

/* Dark theme scrolled header container */
html[data-theme="dark"] body #g-navigation.scrolled,
html[data-theme="dark"] body[class] #g-navigation.scrolled,
html[data-theme="dark"] body[class*="itemid-"] #g-navigation.scrolled,
html[data-theme="dark"] body.translit-page #g-navigation.scrolled,
html[data-theme="dark"] body.home #g-navigation.scrolled,
html[data-theme="dark"] body.g-home-particles #g-navigation.scrolled,
html.dark body #g-navigation.scrolled,
html.dark body[class] #g-navigation.scrolled,
html.dark body[class*="itemid-"] #g-navigation.scrolled,
html.dark body.translit-page #g-navigation.scrolled,
html.dark body.home #g-navigation.scrolled,
html.dark body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
    padding: 6px 0 !important;
}

/* Dark theme scrolled header background pseudo-element with glassmorphism and soft bottom dissolution */
html[data-theme="dark"] body #g-navigation.scrolled::before,
html[data-theme="dark"] body[class] #g-navigation.scrolled::before,
html[data-theme="dark"] body[class*="itemid-"] #g-navigation.scrolled::before,
html[data-theme="dark"] body.translit-page #g-navigation.scrolled::before,
html[data-theme="dark"] body.home #g-navigation.scrolled::before,
html[data-theme="dark"] body.g-home-particles #g-navigation.scrolled::before,
html.dark body #g-navigation.scrolled::before,
html.dark body[class] #g-navigation.scrolled::before,
html.dark body[class*="itemid-"] #g-navigation.scrolled::before,
html.dark body.translit-page #g-navigation.scrolled::before,
html.dark body.home #g-navigation.scrolled::before,
html.dark body.g-home-particles #g-navigation.scrolled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
}

/* Transliterator page unscrolled header background override for g-navigation (placed at bottom to win specificity) */
html:not(.dark) body.translit-page.itemid-176.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-174.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-208.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-175.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.itemid-198.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not(.dark) body.translit-page.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-176.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-174.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-208.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-175.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.itemid-198.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
html:not([data-theme="dark"]) body.translit-page.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
[data-theme="dark"] body.translit-page.itemid-176.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-174.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-208.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-175.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.itemid-198.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before,
[data-theme="dark"] body.translit-page.site.com_gantry5.view-custom.dir-ltr #g-navigation:not(.scrolled)::before {
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

/* Transliterator page layout visual consistency: inject ornament banner at top of page surround */
body.translit-page #g-page-surround,
body.itemid-176 #g-page-surround,
body.itemid-174 #g-page-surround,
body.itemid-208 #g-page-surround,
body.itemid-175 #g-page-surround,
body.itemid-198 #g-page-surround {
    position: relative !important;
}
body.translit-page #g-page-surround::before,
body.itemid-176 #g-page-surround::before,
body.itemid-174 #g-page-surround::before,
body.itemid-208 #g-page-surround::before,
body.itemid-175 #g-page-surround::before,
body.itemid-198 #g-page-surround::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 180px !important;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 120px, #ffffff 178px, #ffffff 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
[data-theme="dark"] body.translit-page #g-page-surround::before,
[data-theme="dark"] body.itemid-176 #g-page-surround::before,
[data-theme="dark"] body.itemid-174 #g-page-surround::before,
[data-theme="dark"] body.itemid-208 #g-page-surround::before,
[data-theme="dark"] body.itemid-175 #g-page-surround::before,
[data-theme="dark"] body.itemid-198 #g-page-surround::before {
    background-image: linear-gradient(to bottom, rgba(11, 15, 25, 0) 120px, #0b0f19 178px, #0b0f19 100%),
                      linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
}

/* Ensure navigation floats on top of the injected banner */
body.translit-page #g-navigation,
body.itemid-176 #g-navigation,
body.itemid-174 #g-navigation,
body.itemid-208 #g-navigation,
body.itemid-175 #g-navigation,
body.itemid-198 #g-navigation {
    z-index: 10 !important;
}

/* Position main content above the background ornament banner */
body.translit-page #g-features,
body.itemid-176 #g-features,
body.itemid-174 #g-features,
body.itemid-208 #g-features,
body.itemid-175 #g-features,
body.itemid-198 #g-features {
    position: relative !important;
    z-index: 2 !important;
}

/* Carousel Hero Image height matching and visual fixes */
.g-owlcarousel .g-owlcarousel-item-wrapper {
    position: relative !important;
}
.g-owlcarousel .g-owlcarousel-item-wrapper .g-owlcarousel-item-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}
.g-owlcarousel .g-owlcarousel-item-wrapper .g-owlcarousel-item-content-container {
    z-index: 2 !important;
}

/* Dynamic Sketch Engine logo inversion in dark mode */
[data-theme="dark"] .se-icon-container img,
[data-theme="dark"] .se-illustration-card img {
    filter: invert(1) !important;
    background: transparent !important;
}

/* Separator/spacer for run-together footer links */
#g-footer .g-horizontalmenu li + li::before {
    content: " | " !important;
    margin-right: 8px !important;
    margin-left: 8px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    display: inline-block !important;
}

/* Ensure #g-header does not create layout gaps on inner pages since #g-navigation is absolute/fixed */
body:not(.home):not(.g-home-particles) #g-header {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

/* Scrolled navigation inner layouts alignment */
#g-navigation.scrolled .g-container {
    height: 100% !important;
}
#g-navigation.scrolled .g-block:not(.size-100) {
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
}
#g-navigation.scrolled .g-block.size-100 {
    height: 0 !important;
    min-height: 0 !important;
}
#g-navigation.scrolled .g-content,
#g-navigation.scrolled .g-particle,
#g-navigation.scrolled #menu-1281-particle {
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}
#g-navigation.scrolled .g-main-nav .g-toplevel > li > .g-menu-item-container {
    padding: 8px 12px !important;
    line-height: 1.2 !important;
}


/* BULLETPROOF GLASSMORPHISM SPECIFICITY OVERRIDES */
/* Scrolled navigation - LIGHT theme (white/blue frosted glass) */
html:not([data-theme="dark"]):not(.dark) body #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body[class] #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body[class*="itemid-"] #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.translit-page #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.home #g-navigation.scrolled,
html:not([data-theme="dark"]):not(.dark) body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Light theme scrolled header background pseudo-element with glassmorphism and soft bottom dissolution */
html:not([data-theme="dark"]):not(.dark) body #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body[class] #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body[class*="itemid-"] #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.translit-page #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.home #g-navigation.scrolled::before,
html:not([data-theme="dark"]):not(.dark) body.g-home-particles #g-navigation.scrolled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    -webkit-backdrop-filter: blur(25px) saturate(1.7) !important;
    backdrop-filter: blur(25px) saturate(1.7) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0 4px 30px rgba(10, 40, 75, 0.04) !important;
    border-bottom: none !important;
}

/* Scrolled navigation elements - LIGHT theme color adjustments */
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li > .g-menu-item-container,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li > .g-menu-item-container a,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-item-title {
    color: #0a284b !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container a,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li:hover > .g-menu-item-container .g-menu-item-title,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title {
    color: #0284c7 !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-logo svg path {
    fill: #0a284b !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .theme-toggle-btn {
    color: #0a284b !important;
    border: 1px solid rgba(10, 40, 75, 0.2) !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .theme-toggle-btn svg {
    fill: #0a284b !important;
    color: #0a284b !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .theme-toggle-btn:hover {
    background-color: rgba(10, 40, 75, 0.08) !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .mod-languages button.dropdown-toggle {
    color: #0a284b !important;
    border: 1px solid rgba(10, 40, 75, 0.2) !important;
    background-color: transparent !important;
}

html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .mod-languages button.dropdown-toggle:hover {
    background-color: rgba(10, 40, 75, 0.08) !important;
}


/* Scrolled navigation - DARK theme (dark frosted glass) */
html[data-theme="dark"] body #g-navigation.scrolled,
html[data-theme="dark"] body[class] #g-navigation.scrolled,
html[data-theme="dark"] body[class*="itemid-"] #g-navigation.scrolled,
html[data-theme="dark"] body.translit-page #g-navigation.scrolled,
html[data-theme="dark"] body.home #g-navigation.scrolled,
html[data-theme="dark"] body.g-home-particles #g-navigation.scrolled,
html.dark body #g-navigation.scrolled,
html.dark body[class] #g-navigation.scrolled,
html.dark body[class*="itemid-"] #g-navigation.scrolled,
html.dark body.translit-page #g-navigation.scrolled,
html.dark body.home #g-navigation.scrolled,
html.dark body.g-home-particles #g-navigation.scrolled {
    background-image: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Dark theme scrolled header background pseudo-element with glassmorphism and soft bottom dissolution */
html[data-theme="dark"] body #g-navigation.scrolled::before,
html[data-theme="dark"] body[class] #g-navigation.scrolled::before,
html[data-theme="dark"] body[class*="itemid-"] #g-navigation.scrolled::before,
html[data-theme="dark"] body.translit-page #g-navigation.scrolled::before,
html[data-theme="dark"] body.home #g-navigation.scrolled::before,
html[data-theme="dark"] body.g-home-particles #g-navigation.scrolled::before,
html.dark body #g-navigation.scrolled::before,
html.dark body[class] #g-navigation.scrolled::before,
html.dark body[class*="itemid-"] #g-navigation.scrolled::before,
html.dark body.translit-page #g-navigation.scrolled::before,
html.dark body.home #g-navigation.scrolled::before,
html.dark body.g-home-particles #g-navigation.scrolled::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    border-bottom: none !important;
}

/* Fix concatenated footer privacy and terms links spacing and separators */
#g-footer a + a[href*="umovy-vykorystannia"]::before,
#g-footer a + a[href*="terms-of-use"]::before,
#g-footer a + a[href*="qullanuv-sartlari"]::before,
#g-copyright a + a[href*="umovy-vykorystannia"]::before,
#g-copyright a + a[href*="terms-of-use"]::before,
#g-copyright a + a[href*="qullanuv-sartlari"]::before {
    content: " | " !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    display: inline-block !important;
}

/* 1. Clear glassmorphic header navigation background and transition (fixes hard border transition) */
body header {
    background: linear-gradient(to bottom, rgba(10, 40, 80, 0.6) 0%, rgba(10, 40, 80, 0.4) 60%, rgba(10, 40, 80, 0) 100%) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

html:not(.dark):not([data-theme="dark"]) body header {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 65%, rgba(255, 255, 255, 0) 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. Responsive header alignment on mobile viewports < 400px (prevents hamburger cut-off) */
@media (max-width: 400px) {
    body header > div.flex {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* 3. Header logo sizing to ensure readability of the logo text */
body header a img {
    height: 2.6rem !important; /* 41.6px on desktop */
    width: auto !important;
}
@media (max-width: 640px) {
    body header a img {
        height: 2.35rem !important; /* ~38px on mobile */
    }
}

/* 3. In light theme, style Astro SPA header logo to dark navy for high contrast against light header background */
html:not(.dark):not([data-theme="dark"]) body header img[src*="logo"],
html:not(.dark):not([data-theme="dark"]) body header img[src*="ctcorpus_logo_"] {
    filter: brightness(0) saturate(100%) invert(12%) sepia(35%) saturate(5427%) hue-rotate(208deg) brightness(96%) contrast(100%) !important;
}

/* 4. Light theme header text, links, and navigation overrides */
html:not(.dark):not([data-theme="dark"]) body header a,
html:not(.dark):not([data-theme="dark"]) body header nav a {
    color: rgba(10, 40, 80, 0.85) !important;
}

html:not(.dark):not([data-theme="dark"]) body header a:hover,
html:not(.dark):not([data-theme="dark"]) body header nav a:hover {
    color: #0284c7 !important;
}

/* Active navigation item styling in light theme */
html:not(.dark):not([data-theme="dark"]) body header nav a[class*="font-bold"],
html:not(.dark):not([data-theme="dark"]) body header nav a.font-bold {
    color: #0a2850 !important;
}

/* Override sky blue border on active navigation links in light theme */
html:not(.dark):not([data-theme="dark"]) body header nav a[class*="border-[#38bdf8]"],
html:not(.dark):not([data-theme="dark"]) body header nav a[class*="border-sky-"] {
    border-color: #0284c7 !important;
}

/* Theme toggle and mobile menu buttons svg strokes */
html:not(.dark):not([data-theme="dark"]) body header button svg {
    color: #0a2850 !important;
    stroke: #0a2850 !important;
}

/* Language switcher button background, borders, and active/inactive items */
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/5,
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/10 {
    background-color: rgba(10, 40, 80, 0.06) !important;
    border: 1px solid rgba(10, 40, 80, 0.15) !important;
}

html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/5 a,
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/10 a {
    color: rgba(10, 40, 80, 0.6) !important;
}

html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/5 a.text-white,
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/10 a.text-white,
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/5 a.font-bold,
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/10 a.font-bold {
    color: #0a2850 !important;
}

html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/5 span.bg-white\/20,
html:not(.dark):not([data-theme="dark"]) body header div.flex.items-center.bg-white\/10 span.bg-white\/20 {
    background-color: rgba(10, 40, 80, 0.15) !important;
}

/* 5. Mobile Layout & Spacing Optimizations (Fixes narrow columns and visual vertical rhythm gaps) */
@media (max-width: 640px) {
    main {
        padding-left: 1rem !important; /* px-4 */
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    main div.p-8,
    main div[class*="p-8"] {
        padding: 1.25rem !important; /* p-5 */
    }
    main div.p-12,
    main div[class*="p-12"] {
        padding: 1.25rem !important; /* p-5 */
    }
    /* Typography optimization for narrow columns on mobile */
    main p.intro-text,
    main .intro-text {
        font-size: 0.95rem !important; /* 15.2px */
        line-height: 1.6 !important;
    }
    main .job-card h3 {
        font-size: 1.25rem !important;
    }
    main .job-card p {
        font-size: 0.875rem !important;
    }
}

@media (max-width: 1023px) {
    /* For tablet and mobile, don't force a huge minimum height for the featured image card */
    div.lg\:col-span-5,
    div.lg\:col-span-5 > div {
        min-height: 220px !important;
        height: 220px !important;
    }
}

/* --- Transliterator & Light/Dark Theme Contrast Enhancements --- */

/* 1. Muted Text Color Overrides for Light & Dark Theme Contrast */
main .text-muted,
main [class*="text-muted"] {
    color: rgba(10, 40, 80, 0.6) !important;
}
html.dark main .text-muted,
[data-theme="dark"] main .text-muted,
html.dark main [class*="text-muted"],
[data-theme="dark"] main [class*="text-muted"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* 2. Textarea Placeholder and Typographic Contrast Controls */
main textarea {
    background-color: #ffffff !important;
    color: #0a2850 !important;
    border-color: rgba(10, 40, 80, 0.15) !important;
}
main textarea::placeholder {
    color: rgba(10, 40, 80, 0.4) !important;
}
html.dark main textarea,
[data-theme="dark"] main textarea {
    background-color: #0d1b2e !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark main textarea::placeholder,
[data-theme="dark"] main textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 3. Secondary Buttons Overrides for White backgrounds */
main button.bg-white\/5,
main button[class*="bg-white/5"] {
    background-color: rgba(10, 40, 80, 0.05) !important;
    color: #0a2850 !important;
    border: 1px solid rgba(10, 40, 80, 0.15) !important;
}
main button.bg-white\/5:hover,
main button[class*="bg-white/5"]:hover {
    background-color: rgba(10, 40, 80, 0.1) !important;
}
html.dark main button.bg-white\/5,
[data-theme="dark"] main button.bg-white\/5,
html.dark main button[class*="bg-white/5"],
[data-theme="dark"] main button[class*="bg-white/5"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: none !important;
}
html.dark main button.bg-white\/5:hover,
[data-theme="dark"] main button.bg-white\/5:hover,
html.dark main button[class*="bg-white/5"]:hover,
[data-theme="dark"] main button[class*="bg-white/5"]:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 4. Special Characters Keyboard Panel Restorations (Panel is always dark) */
main textarea + div button,
main div[class*="bg-navy"] button {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
main textarea + div button:hover,
main div[class*="bg-navy"] button:hover {
    background-color: #166482 !important;
    color: #ffffff !important;
    border-color: #166482 !important;
}

/* 5. Custom Material Symbols SVG Background-Images (Zero font network dependency) */
.material-symbols-outlined[data-icon="sync"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="content_copy"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2850' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="upload_file"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a2850' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cpolyline points='9 15 12 12 15 15'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="download"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="spellcheck"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16l3-9 3 9M10 8h4M16 16l2 2 4-4'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="history_edu"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h6'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="speed"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="rule"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}
.material-symbols-outlined[data-icon="info"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}

/* Dark theme SVG icon stroke overrides (Switch to white / light blue) */
html.dark .material-symbols-outlined[data-icon="content_copy"],
[data-theme="dark"] .material-symbols-outlined[data-icon="content_copy"],
.bg-primary .material-symbols-outlined[data-icon="content_copy"],
.bg-accent .material-symbols-outlined[data-icon="content_copy"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") !important;
}
html.dark .material-symbols-outlined[data-icon="upload_file"],
[data-theme="dark"] .material-symbols-outlined[data-icon="upload_file"],
.bg-primary .material-symbols-outlined[data-icon="upload_file"],
.bg-accent .material-symbols-outlined[data-icon="upload_file"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='12' y1='18' x2='12' y2='12'/%3E%3Cpolyline points='9 15 12 12 15 15'/%3E%3C/svg%3E") !important;
}
html.dark .material-symbols-outlined[data-icon="spellcheck"],
[data-theme="dark"] .material-symbols-outlined[data-icon="spellcheck"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16l3-9 3 9M10 8h4M16 16l2 2 4-4'/%3E%3C/svg%3E") !important;
}
html.dark .material-symbols-outlined[data-icon="history_edu"],
[data-theme="dark"] .material-symbols-outlined[data-icon="history_edu"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h6'/%3E%3C/svg%3E") !important;
}
html.dark .material-symbols-outlined[data-icon="speed"],
[data-theme="dark"] .material-symbols-outlined[data-icon="speed"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
}
html.dark .material-symbols-outlined[data-icon="rule"],
[data-theme="dark"] .material-symbols-outlined[data-icon="rule"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") !important;
}
html.dark .material-symbols-outlined[data-icon="info"],
[data-theme="dark"] .material-symbols-outlined[data-icon="info"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") !important;
}

/* 6. Dynamic Icon Scaling Rules */
main button .material-symbols-outlined {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
main .rounded-2xl .material-symbols-outlined {
    width: 3rem !important;
    height: 3rem !important;
}

/* 7. Fallback standard ligature rendering for unmapped icons */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}
.material-symbols-outlined:not([data-icon="account_balance"]):not([data-icon="public"]):not([data-icon="terminal"]):not([data-icon="foundation"]):not([data-icon="school"]):not([data-icon="apartment"]):not([data-icon="groups"]):not([data-icon="hub"]):not([data-icon="handshake"]):not([data-icon="share"]):not([data-icon="mail"]):not([data-icon="code"]):not([data-icon="language"]):not([data-icon="sync"]):not([data-icon="content_copy"]):not([data-icon="upload_file"]):not([data-icon="download"]):not([data-icon="spellcheck"]):not([data-icon="history_edu"]):not([data-icon="speed"]):not([data-icon="rule"]):not([data-icon="info"]) {
    font-size: 1.5rem !important;
    width: auto !important;
    height: auto !important;
}

/* 8. Sprint 3 Dark Theme Header Transition & Active Navigation Fixes */
[data-theme="dark"] body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro .page-header::after {
    background: linear-gradient(to bottom, rgba(11, 15, 25, 0) 60%, rgba(11, 15, 25, 0.8) 85%, #0b0f19 100%) !important;
}

#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title,
#g-navigation .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container .g-menu-item-title,
#g-navigation .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container .g-menu-item-title,
#g-navigation .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container,
#g-navigation .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container .g-menu-item-title {
    color: #38bdf8 !important;
}

#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container a,
#g-navigation .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container a {
    border-bottom: 2px solid #38bdf8 !important;
    padding-bottom: 4px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container .g-menu-item-title,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container .g-menu-item-title,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container .g-menu-item-title,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container a,
#g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container .g-menu-item-title {
    text-decoration: none !important;
}

/* Scrolled Light Theme Active Highlight */
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container a,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container a,
html:not([data-theme="dark"]):not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container a {
    color: #0284c7 !important;
    border-bottom: 2px solid #0284c7 !important;
    padding-bottom: 4px !important;
    font-weight: bold !important;
}

/* Scrolled Dark Theme Active Highlight */
[data-theme="dark"] #g-navigation.scrolled .g-main-nav .g-toplevel > li.active > .g-menu-item-container a,
[data-theme="dark"] #g-navigation.scrolled .g-main-nav .g-toplevel > li.g-active > .g-menu-item-container a,
[data-theme="dark"] #g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.active) > .g-menu-item-container a,
[data-theme="dark"] #g-navigation.scrolled .g-main-nav .g-toplevel > li:has(.g-active) > .g-menu-item-container a {
    color: #38bdf8 !important;
    border-bottom: 2px solid #38bdf8 !important;
    padding-bottom: 4px !important;
    font-weight: bold !important;
}

/* Transliterator controls link text decoration and outline resets to prevent underline artifacts */
.grow-wrap a, 
.grow-wrap a:hover, 
.grow-wrap a:focus, 
.grow-wrap a:active,
.translit-main .tab button,
.translit-main .tab button:hover,
.translit-main .tab button:focus,
.translit-main .tab button:active,
.translit-main .tablinks {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Remove borders/lines between main sections to ensure seamless layouts */
#g-intro, #g-mainbody, #g-features, #g-utility, #g-expanded {
    border-top: none !important;
    border-bottom: none !important;
}

/* Expand content column width on narrow mobile viewports (e.g., 390px) */
@media (max-width: 480px) {
    body[class*="itemid-"]:not(.home) #g-intro .g-container,
    body[class*="itemid-"]:not(.home) #g-mainbody .g-container,
    body[class*="itemid-"]:not(.home) .platform-content.container {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body[class*="itemid-"]:not(.home) .com-content-article,
    body[class*="itemid-"]:not(.home) .item-page {
        margin-left: 4px !important;
        margin-right: 4px !important;
        max-width: calc(100% - 8px) !important;
    }
    .item-page,
    .com-content-article,
    #se_search_module,
    .se-search-module,
    #table_filter_data {
        padding: 20px 14px !important;
    }
    .com-content-article__body ol,
    .com-content-article__body ul {
        padding-left: 20px !important;
    }
    #g-footer .g-horizontalmenu li:first-child a::before,
    .g-horizontalmenu li:first-child a::before {
        content: none !important;
        margin: 0 !important;
        display: none !important;
    }
}

/* Center mobile header elements vertically and prevent container collapse (tablet & mobile) */
@media (max-width: 768px) {
    #g-navigation {
        position: sticky !important;
        top: 0 !important;
        height: 64px !important;
        min-height: 64px !important;
        z-index: 1000 !important;
    }
    #g-navigation.scrolled {
        height: 56px !important;
        min-height: 56px !important;
    }
    #g-navigation .g-logo,
    #g-navigation .g-logo-helium {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: 180px !important; /* Increased from 155px to prevent text compression and improve legibility */
        height: auto !important;
    }
    #g-navigation .g-logo svg,
    #g-navigation .g-logo-helium svg,
    #g-navigation .g-logo img,
    #g-navigation .g-logo-helium img {
        height: auto !important;
        max-height: 36px !important; /* Increased from 32px to allow larger text */
    }
    #g-navigation .mod-languages-block {
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
    }
    .g-offcanvas-toggle {
        position: fixed !important;
        left: 16px !important;
        top: 10px !important;
        margin: 0 !important;
        z-index: 10005 !important;
    }
    .g-offcanvas-toggle.scrolled {
        top: 6px !important;
    }
    
    /* Typography hierarchy and scaling for readability */
    .item-page p,
    .com-content-article__body p,
    .item-page li,
    .com-content-article__body li {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        font-weight: 300 !important;
    }
    .item-page h1,
    .com-content-article h1,
    .item-page h2,
    .com-content-article h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        margin-top: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    .item-page h3,
    .com-content-article h3 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Fix footer bottom spacing on tablet and mobile to prevent excessive empty space below copyright/social */
@media (max-width: 768px) {
    #g-footer,
    #g-copyright {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    #g-footer .g-grid,
    #g-copyright .g-grid {
        gap: 8px !important;
    }
}

/* Sprint 3 Mobile Audit Fixes: Column spacing, Banner Full-Bleed & Sketch Engine Card on Software page */
@media (max-width: 480px) {
    /* 1. Eliminate white top gap/margins on left/right of page-header to force full bleed */
    body[class*="itemid-"]:not(.home) #g-intro .g-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body[class*="itemid-"]:not(.home) #g-intro .page-header {
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    /* 2. Content Container Optimization: maximize text width on narrow mobile viewports (390px) */
    body[class*="itemid-"]:not(.home) #g-mainbody .g-container {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: calc(100% - 12px) !important;
    }
    body[class*="itemid-"]:not(.home) .com-content-article,
    body[class*="itemid-"]:not(.home) .item-page {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        padding: 16px 12px !important;
    }
    body[class*="itemid-"] .com-content-article__body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* 3. Typography wrap safety: keep standard words together, avoid ugly mid-word breaks */
    .com-content-article__body p,
    .com-content-article__body a,
    .item-page p,
    .item-page a {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    
    /* 4. Sketch Engine Card and CTA spacing improvements */
    .se-illustration-card {
        padding: 1.5rem 1rem !important;
        margin: 1.5rem auto !important;
        max-width: 100% !important;
    }
    .se-cta-btn {
        padding: 0.65rem 1rem !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- SPRINT 3 - Transliterator Page Tablet Layout Fixes (768px) --- */
@media (min-width: 481px) and (max-width: 768px) {
    /* 1. Ensure title/subtitle container and content area have clean side margins on tablet viewport */
    body.translit-page #g-features .g-container,
    body.itemid-176 #g-features .g-container,
    body.itemid-174 #g-features .g-container,
    body.itemid-208 #g-features .g-container,
    body.itemid-175 #g-features .g-container,
    body.itemid-198 #g-features .g-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }
    
    /* 2. Increase spacing between sticky navigation header and title to prevent squeezed hero area */
    body.translit-page #g-features,
    body.itemid-176 #g-features,
    body.itemid-174 #g-features,
    body.itemid-208 #g-features,
    body.itemid-175 #g-features,
    body.itemid-198 #g-features {
        padding-top: 36px !important;
    }
}

/* 3. Sticky footer implementation to prevent white empty bands below the footer on short pages */
body.translit-page #g-page-surround,
body.itemid-176 #g-page-surround,
body.itemid-174 #g-page-surround,
body.itemid-208 #g-page-surround,
body.itemid-175 #g-page-surround,
body.itemid-198 #g-page-surround {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}
body.translit-page #g-footer,
body.itemid-176 #g-footer,
body.itemid-174 #g-footer,
body.itemid-208 #g-footer,
body.itemid-175 #g-footer,
body.itemid-198 #g-footer {
    margin-top: auto !important;
}

/* --- Transliterator Interface Actions Alignment & Spacing Optimization --- */
.grow-wrap textarea {
    resize: none !important;
    padding-bottom: 42px !important;
}

.grow-wrap .custom-to-clip,
.grow-wrap .custom-to-clip2,
.grow-wrap .custom-to-clip3,
.grow-wrap .char-counter,
.grow-wrap .copy-to-clip {
    bottom: 14px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Ensure the SVG icon replacements inside them are centered and aligned */
.grow-wrap a i.fa::before,
.grow-wrap .char-counter::before {
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Adjust the character counter text styles for modern premium look */
.grow-wrap .char-counter {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #64748b !important; /* Cool slate gray for light theme */
    font-style: normal !important;
    font-family: inherit !important;
    right: 20px !important; /* Clean alignment inside textarea bottom right padding */
}
[data-theme="dark"] .grow-wrap .char-counter {
    color: #cbd5e1 !important; /* High contrast gray for dark theme */
}

.grow-wrap .copy-to-clip {
    right: 20px !important;
}

/* Vertically center the long-arrow-right icon column between textareas on desktop and tablet */
@media (min-width: 768px) {
    #tr_inline .translit-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 70px !important; /* Compensate for the .translit-lang-label height & margins + block padding */
        height: 350px !important; /* Match sibling textarea height exactly */
    }
}

/* Ensure no visual crowding of action icons and character counter on tablet/mobile */
@media (max-width: 992px) {
    .grow-wrap .custom-to-clip {
        left: 15px !important;
    }
    .grow-wrap .custom-to-clip2 {
        left: 55px !important;
    }
    .grow-wrap .custom-to-clip3 {
        left: 95px !important;
    }
    .grow-wrap .char-counter {
        right: 20px !important;
    }
    .grow-wrap .copy-to-clip {
        right: 20px !important;
    }
}

/* Dark theme seamless blend for Transliterator page banner containers */
[data-theme="dark"] body.itemid-176 #g-intro,
[data-theme="dark"] body.itemid-174 #g-intro,
[data-theme="dark"] body.itemid-208 #g-intro,
[data-theme="dark"] body.itemid-175 #g-intro,
[data-theme="dark"] body.itemid-198 #g-intro,
[data-theme="dark"] body.translit-page #g-intro {
    background-color: #0f172a !important;
}

/* Soft-edge banner transition override for Transliterator page on tablet/mobile viewports */
@media (max-width: 991px) {
    [data-theme="dark"] body.itemid-176 #g-intro::before,
    [data-theme="dark"] body.itemid-174 #g-intro::before,
    [data-theme="dark"] body.itemid-208 #g-intro::before,
    [data-theme="dark"] body.itemid-175 #g-intro::before,
    [data-theme="dark"] body.itemid-198 #g-intro::before,
    [data-theme="dark"] body.translit-page #g-intro::before {
        background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0) 40px, #0f172a 140px, #0f172a 100%),
                          linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                          url("/templates/g5_helium/custom/images/header/header_transliterator.webp") !important;
    }
}

/* Avoid tab text overflow on narrow mobile screens */
@media (max-width: 480px) {
    .translit-main .tab button {
        padding: 8px 6px !important;
        font-size: 0.8rem !important;
        gap: 4px !important;
    }
    #g-navigation .g-logo,
    #g-navigation .g-logo-helium {
        width: 175px !important; /* Ideal width for small screens to prevent overlap and retain legibility */
    }
    #g-navigation .g-logo svg,
    #g-navigation .g-logo-helium svg,
    #g-navigation .g-logo img,
    #g-navigation .g-logo-helium img {
        max-height: 34px !important;
    }
    #g-navigation .mod-languages-block {
        right: 12px !important; /* Slightly closer to edge to maximize center area */
    }
    .g-offcanvas-toggle {
        left: 12px !important; /* Slightly closer to edge to maximize center area */
    }
}

/* Ensure tabs on mobile layout do not stack vertically and are aligned side-by-side */
@media (max-width: 768px) {
    .g-content-tabs ul.ui-tabs-nav,
    .g-contenttabs-container ul.ui-tabs-nav {
        flex-direction: row !important;
    }
    .g-content-tabs ul.ui-tabs-nav li.g-contenttabs-tab-wrapper,
    .g-contenttabs-container ul.ui-tabs-nav li.g-contenttabs-tab-wrapper {
        display: inline-block !important;
        flex: 0 0 auto !important;
        width: auto !important;
    }
}

/* ============================================================
   HOMEPAGE NATIONAL CORPUS HEAD TYPOGRAPHY & KEYBOARD CAPS
   ============================================================ */
body.home .fp-intro .g-title,
body.g-home-particles .fp-intro .g-title,
body.home .g-title,
body.g-home-particles .g-title,
.fp-intro .g-title,
.g-logo-title,
.g-logo-text {
    font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
    font-weight: 700 !important;
}

/* Crimean Tatar Special Character Virtual Keyboard Button Caps (Uppercase Caps) */
.se-special-chars .se-char-btn,
.keyboard-layout .key {
    text-transform: uppercase !important;
    font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    background: #ffffff !important;
    border: 1.5px solid #0f97df !important;
    color: #0b4970 !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
    border-radius: 6px !important;
}

.se-special-chars .se-char-btn:hover,
.keyboard-layout .key:hover {
    background: #0f97df !important;
    color: #ffffff !important;
}

/* Smooth transition for sticky header state changes */
#g-navigation,
#g-navigation::before {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ============================================================
   LIGHT THEME BACKGROUND CORRECTIONS & MOBILE TYPOGRAPHY
   ============================================================ */
/* Navigation Background Controls */
html:not(.dark) .g-main-nav,
html:not([data-theme="dark"]) .g-main-nav,
html:not(.dark) .g-toplevel,
html:not([data-theme="dark"]) .g-toplevel,
html:not(.dark) .g-menu-item-container,
html:not([data-theme="dark"]) .g-menu-item-container {
    background-color: transparent !important;
    background: transparent !important;
}

/* Default non-scrolled header for inner pages: solid #0a2850 background */
#g-navigation:not(.scrolled) {
    background-color: #0a2850 !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Homepages non-scrolled header: completely transparent to expose top ornament banner */
body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled),
body.itemid-104 #g-navigation:not(.scrolled),
body.itemid-138 #g-navigation:not(.scrolled),
body.itemid-146 #g-navigation:not(.scrolled) {
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* ALL pages: Scrolled Theme Rich vivid navy glassmorphism */
#g-navigation.scrolled,
#g-navigation.g-flt,
#g-navigation.scrolled::before,
html:not(.dark) #g-navigation.scrolled,
html:not([data-theme="dark"]) #g-navigation.scrolled,
html:not(.dark) #g-navigation.scrolled::before,
html:not([data-theme="dark"]) #g-navigation.scrolled::before {
    background-color: rgba(10, 40, 75, 0.6) !important;
    background-image: none !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
}

/* ============================================================
   MOBILE 390PX RESPONSIVE LAYOUT & SPECIAL CHARS GRID
   ============================================================ */
@media (max-width: 480px) {
    /* Header layout & typography on mobile */
    #g-navigation {
        padding: 8px 12px !important;
    }
    #g-navigation .g-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .g-logo {
        display: flex !important;
        align-items: center !important;
        max-height: 36px !important;
    }
    .g-logo-title, .g-logo-text, .g-menu-item-title, .g-title, .fp-intro .g-title, h1, h2, h3 {
        font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    .g-logo-title, .g-logo-text {
        font-size: 0.85rem !important;
    }

    /* Header Transparency & Sharp-Edge Liquid Glass Controls Override */
    #g-header:not(.scrolled),
    #g-navigation:not(.scrolled),
    .g-header:not(.scrolled),
    .g-navigation:not(.scrolled) {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    /* Sharp-Edge Liquid Glass Effect for Language Switcher, Menu Items, & Key Buttons */
    .g-language-switcher,
    .mod-languages,
    .lang-inline-list,
    .se-char-btn,
    .g-menu-item-container {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.8) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    html:not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li > a .g-menu-item-title,
    html:not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li .g-menu-item-title,
    html:not(.dark) #g-navigation .g-main-nav .g-toplevel > li .g-menu-item-title {
        color: #0f172a !important;
    }

    html:not(.dark) #g-navigation.scrolled .g-main-nav .g-toplevel > li.active .g-menu-item-title,
    html:not(.dark) #g-navigation .g-main-nav .g-toplevel > li.active .g-menu-item-title {
        color: #0284c7 !important;
        border-bottom: 2px solid #f7db03 !important;
    }

    /* DARK THEME Scrolled Sticky Header Glassmorphism */
    html.dark #g-header.scrolled,
    html.dark .g-header.scrolled,
    html.dark #g-navigation.scrolled,
    html.dark .g-navigation.scrolled,
    html.dark #g-header.g-fixed-header,
    html.dark #g-navigation.g-fixed-header {
        background: rgba(10, 40, 75, 0.6) !important;
        background-color: rgba(10, 40, 75, 0.6) !important;
        background-image: none !important;
        backdrop-filter: blur(16px) saturate(1.6) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    }

    html.dark #g-navigation.scrolled .g-main-nav .g-toplevel > li .g-menu-item-title,
    html.dark #g-navigation.scrolled .g-main-nav .g-toplevel > li > a .g-menu-item-title {
        color: #ffffff !important;
    }

    html.dark #g-navigation.scrolled .g-main-nav .g-toplevel > li.active .g-menu-item-title {
        color: #ffffff !important;
        border-bottom: 2px solid #f7db03 !important;
    }

    /* Mobile 390px Logo & Header Overlap Fix & Vertical Separation */
    @media (max-width: 576px) {
        .fp-intro,
        .g-owlcarousel,
        #g-intro {
            padding-top: 5rem !important; /* Prevents hero section title from sliding up into header logo on 390px viewports */
        }
        .g-logo {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            max-width: 220px !important;
            overflow: hidden !important;
        }
        .g-logo img, .g-logo svg {
            display: block !important;
            max-height: 38px !important;
            width: auto !important;
            max-width: 100% !important;
        }
        .g-logo-title, .g-logo-text, .fp-intro .g-title {
            font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
        }
        /* Individual Sharp-Edge Liquid Glass Controls (No wrapper box) */
        .se-char-btn {
            border-radius: 6px !important;
            background: rgba(255, 255, 255, 0.18) !important;
            backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
            color: #ffffff !important;
            font-weight: 700 !important;
        }
        .g-language-switcher, .mod-languages, .lang-inline-list {
            border-radius: 6px !important;
            background: rgba(255, 255, 255, 0.18) !important;
            backdrop-filter: blur(12px) !important;
            border: 1px solid rgba(255, 255, 255, 0.4) !important;
        }
    }

    /* Header Top Bar Seamless Transparency (Exposing dark illustration image) */
    #g-header:not(.scrolled),
    #g-navigation:not(.scrolled) {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    /* Overflow Menu Item (Більше / Başqa / More) — Display ONLY when menu overflows on desktop */
    @media (min-width: 992px) {
        .g-menu-item-more:not(.has-overflow),
        .g-main-nav .g-toplevel > li.g-menu-item-more:not(.overflow-active) {
            display: none !important; /* Hide "More / Більше" on desktop when all items fit */
        }
    }

    /* Crimean Tatar Keyboard & Special Character Buttons — Premium Liquid Glass Design */
    .se-special-chars {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        margin-top: 10px !important;
        padding: 4px 0 !important;
        background: transparent !important;
    }
    .se-char-btn {
        flex: 1 1 auto !important;
        min-width: 32px !important;
        max-width: 44px !important;
        height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        border-radius: 6px !important;
        color: #ffffff !important;
        font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    .se-char-btn:hover, .se-char-btn:focus {
        background: rgba(255, 255, 255, 0.32) !important;
        border-color: #38bdf8 !important;
        color: #f7db03 !important;
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 6px 16px rgba(56, 189, 248, 0.4) !important;
    }

    /* Crimean Tatar Special Character Buttons — Single Non-Wrapping Row (100% fit on 390px) */
    .se-special-chars {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        margin-top: 8px !important;
        padding: 2px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .se-char-btn {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        justify-content: center !important;
        font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        border-radius: 5px !important;
        margin: 0 !important;
    }

    /* Light Theme Crisp Backgrounds */
    html:not(.dark) body.home #g-intro,
    html:not([data-theme="dark"]) body.home #g-intro,
    html:not(.dark) .fp-intro,
    html:not([data-theme="dark"]) .fp-intro {
        background-color: #ffffff !important;
        color: #0a2850 !important;
    }
}

/* ============================================================
   TRANSLITERATOR FONTAWESOME VECTOR SVG FALLBACKS (SPRINT 3)
   ============================================================ */
.fa-link::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") !important;
}
.fa-expand::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") !important;
}
.fa-keyboard::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8'/%3E%3C/svg%3E") !important;
}
.fa-pencil-square-o::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E") !important;
}
.fa-file-text-o::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") !important;
}
.fa-spinner::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'/%3E%3C/svg%3E") !important;
}
.fa-upload::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E") !important;
}
.fa-check::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
}
.fa-download::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E") !important;
}
.fa-long-arrow-right::before,
.fa-arrow-right::before {
    content: '' !important;
    display: inline-block !important;
    width: 1.2em !important;
    height: 1.2em !important;
    vertical-align: -0.15em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") !important;
}
.fa-copy::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") !important;
}
.fa-close::before,
.fa-times::before {
    content: '' !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.125em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23166482' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] .fa-link::before,
[data-theme="dark"] .fa-expand::before,
[data-theme="dark"] .fa-keyboard::before,
[data-theme="dark"] .fa-copy::before,
[data-theme="dark"] .fa-close::before,
[data-theme="dark"] .fa-times::before,
[data-theme="dark"] .fa-long-arrow-right::before,
[data-theme="dark"] .fa-arrow-right::before {
    filter: brightness(0) invert(1) !important;
}

/* ============================================================
   GLASSMORPHISM & HEADER OPACITY OVERRIDES (SPRINT 3 / FINAL)
   ============================================================ */
#g-navigation.scrolled {
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    background-color: rgba(10, 40, 75, 0.6) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    background-image: none !important;
}

/* Scrolled to top on Homepage: completely transparent, no blue strip, no blur, no shadow */
body.home #g-navigation:not(.scrolled),
body.g-home-particles #g-navigation:not(.scrolled) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

/* Scrolled to top on Inner Pages: fully opaque to prevent content bleeding */
body:not(.home):not(.g-home-particles) #g-navigation:not(.scrolled) {
    background-color: #0a2850 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}