/*
 * SLT Brand Refresh v1.1.0
 * Palette supplied by client:
 * Ivory Dune        #EFECE4
 * Solstice Yellow   #EFD566
 * Oasis Turquoise   #53C3C0
 * Azure Horizon     #3DA1D2
 *
 * Darker derivatives are intentionally used where white text requires
 * WCAG AA contrast. The four supplied brand colours remain the visual base.
 */

:root {
    --brand-ivory: #EFECE4;
    --brand-yellow: #EFD566;
    --brand-turquoise: #53C3C0;
    --brand-azure: #3DA1D2;

    --brand-ink: #0B2F3A;
    --brand-deep: #173B4D;
    --brand-azure-dark: #2B6F8E;
    --brand-turquoise-dark: #2E7775;
    --brand-muted: #C9D7D5;

    /* Preserve the legacy variable contract used throughout the custom theme. */
    --main-color: var(--brand-turquoise);
    --sec-color: var(--brand-azure);
    --dark-color: var(--brand-ink);
    --bg-grid: linear-gradient(110deg, var(--brand-deep) 0%, var(--brand-ink) 100%);
    --btn-grid: linear-gradient(135deg, var(--brand-azure-dark) 0%, var(--brand-turquoise-dark) 100%);
}

/* Core dark surfaces: replace the previous purple/navy identity without changing layout. */
.banner-h,
.breadcrumb,
.breadcrumb .overlay-img::after,
.single-help.body-inner,
.overlay-img::after,
.about-h .overlay-img::after,
.services-h .overlay-img::after,
.projects-h .overlay-img::after,
.vision-h .overlay-img::after,
.values-h .overlay-img::after {
    background-image: var(--bg-grid) !important;
}

/* Keep imagery visible under the new travel-oriented palette. */
.about-h .overlay-img::after,
.services-h .overlay-img::after,
.projects-h .overlay-img::after,
.vision-h .overlay-img::after,
.values-h .overlay-img::after,
.overlay-img::after {
    opacity: .9;
}

/* Image overlays use the palette while retaining readable white titles. */
.serv-block .img::after,
.pro-block .img-block::after {
    background: linear-gradient(180deg, rgba(83, 195, 192, 0) 0%, rgba(11, 47, 58, .94) 100%) !important;
}

/* Calls to action: dark derivatives keep white text above AA contrast. */
.btn::after,
.mobile-nav-toggler,
.accordion-item .accordion-header button,
.goTop {
    background: var(--btn-grid) !important;
}

.btn::before {
    background: var(--brand-turquoise-dark) !important;
}

.btn,
.btn:hover,
.btn:focus,
.mobile-nav-toggler,
.accordion-item .accordion-header button {
    color: #fff;
}

/* Base turquoise works safely with dark ink on active light-accent states. */
.accordion-item .accordion-header button:not(.collapsed),
.head-inner .nav-menu ul.sub-menu li a:hover {
    background: var(--brand-turquoise) !important;
    color: var(--brand-ink) !important;
}

.btn.btn-big::after,
.btn.btn-big::before {
    background: linear-gradient(135deg, var(--brand-azure) 0%, var(--brand-turquoise) 100%) !important;
}

/* Secondary yellow is intentionally reserved for small highlights and focus states. */
.title h3::after {
    background: linear-gradient(90deg, var(--brand-yellow) 0%, rgba(239, 213, 102, 0) 100%) !important;
}

.text-foot h1 span,
.goSec i,
.head-top .time-info i,
.blog-block .details .date,
.inner-archive h3,
.text-single h3 {
    color: var(--brand-turquoise) !important;
}

.about-con h2 {
    color: var(--brand-azure-dark) !important;
}

.about-con h2::after,
.about-con li::before {
    background-color: var(--brand-yellow) !important;
}

.owl-carousel .owl-dots .owl-dot.active span {
    background: var(--brand-yellow) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
    background: var(--brand-ivory) !important;
    color: var(--brand-azure-dark) !important;
    border-color: var(--brand-ivory) !important;
}

/* Forms */
.form-group .form-control:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: var(--brand-turquoise) !important;
    box-shadow: 0 0 0 2px rgba(83, 195, 192, .2) !important;
}

::selection {
    background: var(--brand-yellow);
    color: var(--brand-ink);
}

/* Accessible focus treatment across keyboard navigation. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--brand-yellow) !important;
    outline-offset: 3px;
}

/* qTranslate-XT language switcher — native select for stability and accessibility. */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-inline-start: 1px solid rgba(239, 236, 228, .42);
    padding-inline-start: 24px;
    margin-inline-start: 24px;
    position: relative;
}

.language-switcher > i {
    margin: 0 !important;
    color: var(--brand-yellow) !important;
}

.language-switcher select {
    min-width: 112px;
    height: 34px;
    border: 1px solid rgba(239, 236, 228, .5);
    border-radius: 18px;
    padding: 0 30px 0 12px;
    background-color: rgba(11, 47, 58, .72);
    color: #fff;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    appearance: auto;
}

html[dir="rtl"] .language-switcher select {
    padding: 0 12px 0 30px;
}

.language-switcher select option {
    background: var(--brand-ink);
    color: #fff;
}

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Top bar remains readable with long Italian/Russian labels. */
.head-top .time-info {
    align-items: center;
}

.head-top .time-info .date-h,
.head-top .time-info .time-h {
    white-space: nowrap;
}

/* The legacy site uses light text on its dark visual sections. */
.links-f a:hover,
.links-s a:hover,
.links-f a:hover span,
.links-s a:hover span,
a:hover {
    color: var(--brand-turquoise);
}

.links-f a:hover .icon {
    border-color: var(--brand-turquoise);
}

@media (max-width: 991px) {
    .language-switcher {
        border-inline-start: 0;
        margin-inline-start: 0;
        padding-inline-start: 0;
    }

    .language-switcher select {
        min-width: 106px;
        max-width: 145px;
    }

    .head-top .time-info {
        gap: 0;
    }
}

@media (max-width: 575px) {
    .language-switcher select {
        min-width: 100px;
        height: 32px;
        font-size: 13px;
    }
}