/*
 * GVM Studio child-theme visual layer.
 * The parent YOOtheme files remain untouched so these adjustments survive updates.
 */

:root {
    --gvm-orange: #ff7418;
    --gvm-page-gray: #dedede;
    --gvm-text: #6c6d74;
    --gvm-heading: #a4a3a3;
    --gvm-header-shadow: #c4c2c0;
    --gvm-page-width: 1050px;
    --gvm-background-image: none;
}

html,
body {
    background-color: var(--gvm-page-gray);
    background-image: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), var(--gvm-background-image);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body {
    border-top: 1px solid #282828;
    color: var(--gvm-text);
}

.tm-page {
    max-width: var(--gvm-page-width);
    margin: 0 auto;
    background: transparent;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.16);
}

/* Full-width white header with the centered GVM Studio content rail. */
.tm-header {
    position: relative;
    z-index: 20;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #fff;
}

.tm-header .uk-navbar-container {
    min-height: 89px;
    background: #fff;
    box-shadow: 1px 1px 7px 0 var(--gvm-header-shadow);
}

.tm-header .uk-container {
    box-sizing: border-box;
    max-width: var(--gvm-page-width);
    padding: 0;
}

.tm-header .uk-navbar {
    min-height: 89px;
}

.tm-header .uk-navbar-left {
    flex: 0 0 220px;
}

.tm-header .uk-logo {
    padding: 0;
}

.tm-header .uk-logo img {
    width: 210px;
    max-width: none;
    height: auto;
    transform: translateY(5px);
}

.tm-header .uk-navbar-right {
    position: relative;
    flex: 1;
    align-self: center;
    margin-left: 0;
    min-width: 0;
}

/* Extend the orange rail from the first navigation item to the right edge. */
.tm-header .uk-navbar-right::before {
    position: absolute;
    z-index: 0;
    top: calc(50% + 5px);
    right: calc((var(--gvm-page-width) - 100vw) / 2);
    left: 0;
    height: 30px;
    background: #f47920;
    content: "";
    transform: translateY(-50%);
}

.tm-header .uk-navbar-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    margin-left: auto;
    min-width: max-content;
    transform: translateY(5px);
    height: 30px;
}

.tm-header .uk-navbar-nav > li,
.tm-header .uk-navbar-nav > li > a {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 5px;
    background: transparent;
    color: #fff;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 30px;
    text-transform: uppercase;
    white-space: nowrap;
}

.tm-header .uk-navbar-nav > li > a:hover {
    background: transparent;
    color: #17212d;
}

.tm-header .uk-navbar-nav > li.uk-active > a {
    background: #fff;
    color: #17212d;
}

/* English language switcher in the empty left section of the orange rail. */
.tm-header .gvm-language-switcher {
    position: absolute;
    z-index: 2;
    top: calc(50% + 5px);
    left: -5px;
    display: flex;
    box-sizing: border-box;
    width: 48px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: transparent;
    transform: translateY(-50%);
}

.tm-header .gvm-language-switcher img {
    display: block;
    width: 24px;
    height: auto;
}

.tm-header .gvm-language-switcher:hover,
.tm-header .gvm-language-switcher:focus {
    background: transparent;
}

.tm-header .gvm-language-switcher:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Central white content page on the gray outer background. */
#tm-main {
    box-sizing: border-box;
    max-width: var(--gvm-page-width);
    margin: 0 auto;
    background: transparent;
}

#tm-main > .uk-section {
    padding-top: 92px;
    padding-bottom: 80px;
    background: rgba(255, 255, 255, 0.5);
}

#tm-main .uk-container {
    max-width: none;
    padding-right: 60px;
    padding-left: 60px;
}

#tm-main h1 {
    color: var(--gvm-heading);
}

#tm-main,
#tm-main p,
#tm-main .uk-panel {
    color: var(--gvm-text);
}

#tm-footer {
    max-width: var(--gvm-page-width);
    margin-right: auto;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.5);
}

/* Decoder animation styling for the page's main heading. */
#tm-main h1.gvm-decoder-heading {
    color: var(--gvm-orange);
    font-family: 'Share Tech Mono', monospace;
    font-weight: 400;
    margin: 0 0 20px;
    text-shadow: 0 0 5px #fff, 0 0 15px var(--gvm-orange), 0 0 30px var(--gvm-orange);
    text-transform: uppercase;
}

#tm-main h1.gvm-decoder-heading > .gvm-decoder-word {
    display: inline-block;
    white-space: nowrap;
}

#tm-main h1.gvm-decoder-heading > .gvm-decoder-word > span {
    display: inline-block;
    min-width: 0.5ch;
    position: relative;
    will-change: contents;
}

#tm-main h1:empty {
    display: none;
}

/* Semi-transparent black background for gallery lightboxes. */
.uk-lightbox {
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 959px) {
    html,
    body {
        background-color: #fff;
        background-image: linear-gradient(rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.80)), var(--gvm-background-image);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        /* Avoid the extra mobile compositing cost of a fixed full-screen image. */
        background-attachment: scroll;
    }

    body {
        border-top: 1px solid #282828;
    }

    .tm-page,
    #tm-main,
    #tm-footer {
        max-width: none;
    }

    .tm-header {
        width: auto;
        margin-left: 0;
    }

    .tm-header .uk-navbar-container,
    .tm-header .uk-navbar {
        min-height: 88px;
    }

    .tm-header .uk-container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .tm-header .uk-logo img {
        width: min(187px, 74vw);
        transform: none;
    }

    .tm-header-mobile .uk-logo img {
        width: min(187px, 74vw);
    }

    .tm-header .uk-navbar-right::before {
        display: none;
    }

    .tm-header .gvm-language-switcher {
        display: none;
    }

    #tm-dialog-mobile .uk-offcanvas-bar {
        background: #f47920;
    }

    #tm-dialog-mobile .uk-nav-default > li > a {
        color: #fff;
    }

    #tm-dialog-mobile .uk-nav-default > li.uk-active > a,
    #tm-dialog-mobile .uk-nav-default > li > a:hover,
    #tm-dialog-mobile .uk-nav-default > li > a:focus {
        color: #17212d;
    }

    #tm-dialog-mobile .gvm-mobile-language-switcher {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 30px;
        margin: 12px 0 0;
        background: transparent;
    }

    #tm-dialog-mobile .gvm-mobile-language-switcher img {
        display: block;
        width: 24px;
        height: auto;
    }

    #tm-dialog-mobile .gvm-mobile-language-switcher:hover,
    #tm-dialog-mobile .gvm-mobile-language-switcher:focus {
        background: transparent;
    }

    .tm-header .uk-navbar-nav {
        margin-left: 0;
        transform: none;
    }

    #tm-main > .uk-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    #tm-main .uk-container {
        padding-right: 20px;
        padding-left: 20px;
    }
}