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


/* ============================================================
   FONTS: Google Font Alice (inlined to prevent render-blocking)
   ============================================================ */
@font-face {
    font-family: 'Alice';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/alice/v21/OpNCnoEEmtHa6GcOrg7-hCJ1.woff2') format('woff2');
}

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

/* 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', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    text-rendering: auto; /* optimizeLegibility breaks ClearType/DirectWrite font rendering in Chrome on Windows */
}

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

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

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

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

@media (max-width: 767px) {
    #custom-5807-particle > .g-content,
    .intro-search-block .g-content.g-particle {
        flex-direction: column !important;
    }
    #custom-5807-particle .ipad-mockup,
    .intro-search-block .ipad-mockup {
        max-width: 100%;
        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;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    max-width: 520px;
    min-height: 40px !important; /* Reserve vertical space to prevent CLS */
    content-visibility: auto;
    contain: layout;
}
.se-chars-label {
    font-size: 0.75rem;
    color: #166482;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-right: 2px;
    white-space: nowrap;
}
.se-char-btn {
    background: #f0f8fc;
    border: 1.5px solid #b8dff0;
    border-radius: 7px;
    color: #1b5e73;
    font-size: 1rem;
    font-weight: 700;
    padding: 3px 9px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s, color 0.15s;
    font-family: 'e-Ukraine', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    min-width: 34px;
    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 {
    display: flex !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}

/* 2. Add margin-right to navigation menu to prevent overlap with language switcher dropdown */
.g-main-nav {
    margin-right: 25px !important;
}

.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;
}
/* 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: 1200px) {
    .g-main-nav .g-menu-item-container {
        padding: 8px 4px !important;
        font-size: 0.88rem !important;
    }
}
@media (max-width: 991px) {
    /* Let Gantry's mobile hamburger menu trigger normally */
}
/* "Інше" dropdown — always last in nav */
.g-main-nav ul.g-toplevel > li:last-child { margin-left: auto; }

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

body:not(.home):not(.blog) #g-header,
body.itemid-141 #g-header,
body.itemid-vakansii #g-header,
body.itemid-140 #g-header,
body.itemid-139 #g-header {
    background-image: url("/images/pages/ornament_banner1.webp") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !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 */
}
.mod-languages {
    display: inline-block !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;
    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;
}

/* Force high-contrast gold-yellow for dropdown hover/active states */
#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: #f7db03 !important;
}

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

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

/* Base style for era filter buttons */
.era-filter-btn {
    background: #f0f8fc;
    border: 1.5px solid #b8dff0;
    border-radius: 20px;
    color: #1b5e73;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    font-family: 'e-Ukraine', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* Hover state */
.era-filter-btn:hover {
    background: #e3f3f8;
    border-color: #24a0ce;
    color: #166482;
}

/* Active state matching the site's primary deep blue */
.era-filter-btn.active {
    background: #166482;
    border-color: #166482;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(22, 100, 130, 0.3);
}

/* Mobile responsive stacked-cards reflow */
@media screen and (max-width: 768px) {
    /* 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 (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: underline;
}
#table_filter_data td a:hover {
    color: #1b7fa5 !important;
}

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

/* Color contrast fix for top-level navigation links hover */
.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: #f7db03 !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 */
body.itemid-139 #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_about.webp") !important;
}
body.itemid-139 #g-header,
body.itemid-139 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_about.webp") !important;
}

/* Partners */
body.itemid-140 #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_partners.webp") !important;
}
body.itemid-140 #g-header,
body.itemid-140 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_partners.webp") !important;
}

/* Vacancies */
body.itemid-141 #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_vacancies.webp") !important;
}
body.itemid-141 #g-header,
body.itemid-141 .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.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.translit-page #g-header,
body.itemid-176 .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-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_sources.webp") !important;
}
body.itemid-144 #g-header,
body.itemid-144 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_sources.webp") !important;
}

/* Software */
body.itemid-142 #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_software.webp") !important;
}
body.itemid-142 #g-header,
body.itemid-142 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_software.webp") !important;
}

/* Development */
body.itemid-162 #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_development.webp") !important;
}
body.itemid-162 #g-header,
body.itemid-162 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_development.webp") !important;
}

/* User Guide */
body.itemid-177 #g-navigation,
body.itemid-161 #g-navigation,
body.itemid-168 #g-navigation,
body.itemid-165 #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_guide.webp") !important;
}
body.itemid-177 #g-header,
body.itemid-161 #g-header,
body.itemid-168 #g-header,
body.itemid-165 #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-165 .g-showcase:not(.home-showcase) {
    background-image: url("/templates/g5_helium/custom/images/header/header_guide.webp") !important;
}

/* Terms */
body.itemid-154 #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_terms.webp") !important;
}
body.itemid-154 #g-header,
body.itemid-154 .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: Remove all table and cell borders
   ============================================================ */
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 {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 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;
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    #g-navigation {
        background-color: rgba(10, 40, 75, 0.78) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
        backdrop-filter: blur(14px) saturate(1.4) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    }
    body.home #g-navigation,
    body.itemid-138 #g-navigation,
    body.itemid-146 #g-navigation,
    body.itemid-104 #g-navigation {
        background-color: rgba(5, 20, 45, 0.48) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        backdrop-filter: blur(8px) !important;
        box-shadow: none !important;
    }
}

@supports not (backdrop-filter: blur(12px)) {
    #g-navigation {
        background: rgba(10, 40, 75, 0.97) !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;
    border: 1.5px solid #b8dff0 !important;
    border-radius: 24px !important;
    font-family: 'e-Ukraine', sans-serif !important;
    font-size: 0.95rem !important;
    min-width: 240px !important;
    width: 100% !important;
    max-width: 340px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    background: #fff 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;
}
#table_filter_input:focus {
    border-color: #24a0ce !important;
    box-shadow: 0 0 0 3px rgba(36, 160, 206, 0.15) !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 SVG fallbacks for footer to avoid FontAwesome missing/blocked issues */
.fa-instagram::before {
    content: "" !important;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23ffffff"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7 0-41.1 33.5-74.7 74.7-74.7 41.1 0 74.7 33.5 74.7 74.7 0 41.1-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.8 9.9 67.6 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>') !important;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}
.fa-facebook-f::before,
.fa-facebook::before {
    content: "" !important;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" fill="%23ffffff"><path d="M80 299.3V256H12v-54.7h68v-43.2c0-67 40.9-103.5 100.7-103.5 28.6 0 53.3 2.1 60.5 3v70.2h-41.5c-32.5 0-38.9 15.4-38.9 38.2v50.1h77.7l-10.1 54.7h-67.6v164.7H80V299.3z"/></svg>') !important;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}
.fa-telegram-plane::before,
.fa-telegram::before {
    content: "" !important;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" fill="%23ffffff"><path d="M248,8C111,8,0,119,0,256S111,504,248,504,496,393,496,256,385,8,248,8ZM363,186.2l-37.6,177c-2.8,12.7-10.3,15.8-21,9.8L244.6,327.9,215.7,355.7c-3.2,3.2-5.9,5.9-12.1,5.9l4.3-60.9,111-100.2c4.8-4.3-1-6.7-7.4-2.4l-137.2,86.4L115,263.2c-13-4.1-13.3-13,2.7-19.3l183-70.5c31-11.9,58.1-2.6,58.1,23.6v19Z"/></svg>') !important;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px;
}