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

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

#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('fonts/e-Ukraine-Thin.woff2') format('woff2'),
         url('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('fonts/e-Ukraine-UltraLight.woff2') format('woff2'),
         url('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('fonts/e-Ukraine-Light.woff2') format('woff2'),
         url('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('fonts/e-Ukraine-Regular.woff2') format('woff2'),
         url('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('fonts/e-Ukraine-Medium.woff2') format('woff2'),
         url('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('fonts/e-Ukraine-Bold.woff2') format('woff2'),
         url('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('fonts/e-UkraineHead-Regular.woff2') format('woff2'),
         url('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('fonts/e-UkraineHead-Medium.woff2') format('woff2'),
         url('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('fonts/e-UkraineHead-Bold.woff2') format('woff2'),
         url('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' !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' !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 40% !important;
    max-width: 40% !important;
    margin-top: -30px !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; }

/* 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;
    gap: 3px !important;
    margin-top: 10px !important;
    max-width: 100% !important;
    min-height: 40px !important; /* Reserve vertical space to prevent CLS */
    overflow: visible !important;
}
.se-chars-label {
    font-size: 0.7rem !important;
    color: #166482 !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    margin-right: 2px !important;
    white-space: nowrap !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;
}

/* ============================================================
   PERFORMANCE — content-visibility (Modern Web Guidance)
   ============================================================ */
#g-features,
#g-expanded,
#g-testimonials,
.g-content-tabs,
section.testimonials,
section.expanded {
    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: #166482 !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 button.active {
    background: #166482 !important;
    color: #ffffff !important;
}
.translit-main .tab button:hover {
    background-color: #166482 !important;
    color: #ffffff !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-grid:has(.g-main-nav) > .g-block:first-child {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
}
#g-navigation .g-grid:has(.g-main-nav) > .g-block:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: 63% !important;
    width: 63% !important;
}
#g-navigation .g-grid:has(.g-main-nav) > .g-block:last-child {
    flex: 0 0 12% !important;
    max-width: 12% !important;
    width: 12% !important;
}

/* 2. Add margin-right to navigation menu to prevent overlap with language switcher dropdown */
.g-main-nav {
    margin-right: 10px !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;
}

@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;
    }
}
.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 6px !important;
    font-size: 0.92rem !important;
    white-space: nowrap !important;
}
@media (max-width: 1300px) {
    .g-main-nav ul.g-toplevel {
        gap: 8px !important;
    }
    .g-main-nav .g-menu-item-container {
        padding: 8px 4px !important;
        font-size: 0.88rem !important;
    }
}
@media (max-width: 1200px) {
    .g-main-nav ul.g-toplevel {
        gap: 6px !important;
    }
    .g-main-nav .g-menu-item-container {
        padding: 8px 3px !important;
        font-size: 0.84rem !important;
    }
}
@media (max-width: 1024px) {
    .g-main-nav ul.g-toplevel {
        gap: 3px !important;
    }
    .g-main-nav .g-menu-item-container {
        padding: 6px 2px !important;
        font-size: 0.80rem !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: 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;
}

/* Exclude homepages by restoring transparent background so it overlays the header ornament */
body.home #g-navigation,
body.g-home-particles #g-navigation,
body.itemid-138 #g-navigation,
body.itemid-146 #g-navigation,
body.itemid-104 #g-navigation {
    background-image: none !important;
    background-color: transparent !important;
    background: transparent !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;
}

/* 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; }

/* 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;
}

/* Online sources list — styled */
.item-page ul li {
    padding: 3px 0;
    line-height: 1.6;
}
.item-page h3 {
    color: #166482;
    margin-top: 1.5rem;
    border-bottom: 2px solid #e3f3f8;
    padding-bottom: 6px;
}

/* ============================================================
   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-block !important;
    max-width: 100% !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: 576px) {
    /* Hide the standard table header */
    #table_filter_data thead {
        display: none;
    }
    
    #table_filter_data, 
    #table_filter_data tbody, 
    #table_filter_data tr, 
    #table_filter_data td {
        display: block;
        width: 100%;
    }

    #table_filter_data {
        box-shadow: none;
        background: transparent;
        border: none;
    }

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

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

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

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

/* ============================================================
   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) {
    #g-navigation .mod-languages-block .g-content,
    #g-navigation .platform-content:has(.mod-languages),
    #g-navigation .moduletable:has(.mod-languages),
    #g-navigation .mod-languages__select,
    #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: break-word !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: 240px !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.95) !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,
body.g-home-particles #g-navigation,
body.itemid-138 #g-navigation,
body.itemid-146 #g-navigation,
body.itemid-104 #g-navigation {
    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;
}

/* 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
   ============================================================ */

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

#g-navigation.scrolled {
    padding: 4px 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.12) !important;
}

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

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

/* Force clean glassmorphic background (no background image) when scrolled on all page variants */
body[class*="itemid-"] #g-navigation.scrolled,
body.home #g-navigation.scrolled,
body.g-home-particles #g-navigation.scrolled,
body.translit-page #g-navigation.scrolled {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 0.6) !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 */
.g-content-tabs ul.g-contenttabs-tabs li:not(.ui-tabs-active) a.g-contenttabs-tab,
.g-contenttabs-tab-wrapper:not(.ui-tabs-active) a.g-contenttabs-tab,
.g-contenttabs-tab-wrapper:not(.ui-tabs-active) .g-contenttabs-tab-title {
    color: rgba(255, 255, 255, 0.75) !important; /* High contrast white-translucent against blue background */
    background-color: transparent !important;
}
.g-content-tabs ul.g-contenttabs-tabs li.ui-tabs-active a.g-contenttabs-tab,
.g-contenttabs-tab-wrapper.ui-tabs-active a.g-contenttabs-tab {
    color: #ffffff !important;
    background-color: #166482 !important;
}

/* Override JQuery UI tab styling to remove default white highlights and borders */
.g-content-tabs .ui-tabs-nav li,
.g-content-tabs .ui-tabs-nav li.ui-state-default,
.g-content-tabs .ui-tabs-nav li.g-contenttabs-tab-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
}

.g-content-tabs .ui-tabs-nav li.ui-tabs-active,
.g-content-tabs .ui-tabs-nav li.ui-state-active {
    background: #166482 !important;
    background-color: #166482 !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: 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;
    }
}

/* 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.7) !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 25% !important;
        max-width: 25% !important;
        width: 25% !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:nth-child(2) {
        flex: 0 0 63% !important;
        max-width: 63% !important;
        width: 63% !important;
    }
    #g-navigation .g-grid:has(.g-main-nav) > .g-block:last-child {
        flex: 0 0 12% !important;
        max-width: 12% !important;
        width: 12% !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 fully opaque on inner pages when not scrolled */
body:not(.home):not(.g-home-particles) #g-navigation:not(.scrolled) {
    background-image: none !important;
    background-color: rgba(10, 40, 75, 1.0) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Pull #g-intro up behind the transparent navigation bar so illustration starts at the top of the viewport */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
    margin-top: -168px !important;
    padding-top: 168px !important;
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        margin-top: -128px !important;
        padding-top: 128px !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: 200px !important;
    transition: 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) #g-intro::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 300px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: -1 !important;
}

@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro::before {
        height: 220px !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: 60px !important;
}

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

/* 3. Page-specific backgrounds for #g-navigation.scrolled */
#g-navigation.scrolled {
    padding: 6px 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !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.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !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(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
                      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(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(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 */

/* 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(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(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(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(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(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: #24a0ce !important;
    text-decoration: none !important;
}

/* 5. Mobile hamburger menu layout and scroll fixes */
@media (max-width: 991px) {
    .g-offcanvas-toggle {
        position: fixed !important;
        top: 24px !important;
        left: 16px !important;
        z-index: 10005 !important;
        transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1), 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.3) !important;
    }
    .g-offcanvas-toggle.scrolled {
        top: 12px !important;
        background: rgba(10, 40, 75, 0.6) !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 */
.translit-page .fa-link::before,
.translit-page .fa-expand::before,
.translit-page .fa-pencil-square-o::before,
.translit-page .fa-file-text-o::before,
.translit-page .fa-spinner::before,
.translit-page .fa-upload::before,
.translit-page .fa-check::before,
.translit-page .fa-download::before,
.translit-page .fa-long-arrow-right::before,
body[class*="itemid-"] .fa-link::before,
body[class*="itemid-"] .fa-expand::before,
body[class*="itemid-"] .fa-pencil-square-o::before,
body[class*="itemid-"] .fa-file-text-o::before,
body[class*="itemid-"] .fa-spinner::before,
body[class*="itemid-"] .fa-upload::before,
body[class*="itemid-"] .fa-check::before,
body[class*="itemid-"] .fa-download::before,
body[class*="itemid-"] .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: 550px !important;
}
@media (max-width: 768px) {
    body.translit-page #g-main {
        min-height: 480px !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 {
    padding: 3px 0 !important; /* Extremely compact height */
    background-image: none !important; /* Remove background illustration when scrolled */
    background-color: rgba(10, 40, 75, 0.6) !important; /* Glassy dark blue */
    -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;
}

/* 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: 18px !important; /* Centered inside navigation bar height */
        left: 16px !important;
        right: auto !important;
        z-index: 10005 !important;
        transition: top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s ease !important;
    }
    .g-offcanvas-toggle.scrolled {
        top: 2px !important; /* Vertically centered in scrolled compact navigation bar */
        width: 32px !important;
        height: 32px !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;
}
#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' !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' !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;
}

/* Ensure inner pages not scrolled are fully opaque */
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104) #g-navigation:not(.scrolled) {
    background-image: none !important;
    background-color: transparent !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: 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;
}

#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;
}

.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(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: #1b5e73 !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) #g-intro::before,
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101) #g-header,
body:not(.home):not(.g-home-particles):not(.itemid-138):not(.itemid-146):not(.itemid-104):not(.itemid-101) .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 {
    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;
}

/* 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;
}
@media (min-width: 768px) {
    #g-footer {
        padding-left: 48px !important;
        padding-right: 48px !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: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        left: 16px !important;
        z-index: 10005 !important;
        margin: 0 !important;
    }
    .g-offcanvas-toggle.scrolled {
        top: 50% !important;
        transform: translateY(-50%) !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 title below absolute navigation bar */
body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
    padding-top: 110px !important;
}
@media (max-width: 991px) {
    body[class*="itemid-"]:not(.home):not(.g-home-particles) #g-intro {
        padding-top: 80px !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;
}

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;
    background-color: transparent !important;
    background: transparent !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    box-shadow: none !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !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 .g-container {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 16px !important;
    }
    #g-navigation .g-logo {
        margin: 0 auto !important;
        display: block !important;
        z-index: 10002 !important;
    }
    #g-navigation .mod-languages-block {
        margin-left: auto !important;
        z-index: 10003 !important;
    }
    .g-offcanvas-toggle {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !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: center !important;
        flex-wrap: wrap !important;
        margin: 10px auto 0 auto !important;
        text-align: center !important;
    }
    .se-chars-label {
        width: 100% !important;
        margin-bottom: 5px !important;
        text-align: center !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.82) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(10, 40, 75, 0.08) !important;
}