/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap'); */

@font-face {
    font-family: "Druk";
    src: url("/Fonts/DrukText-SuperItalic-Trial.woff2") format('woff2');

    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/Fonts/Roboto.woff2") format('woff2');

    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Roboto";
    src: url("/Fonts/Roboto-Italic.woff2") format('woff2');

    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


:root {
    --header-col1: #292c38;
    --border-col: #374151;

    --main-col1: #0F1117;
    --main-col2: #1A1D28;
    --main-col3: #1F2229;

    --yellow: #FCD535;
    --yellowE5: #E5C230;

    --blue5B: #5B7AB8;
    --blue4A: #4A6BA8;
    --blue3D: #3D5A9E;
    --blue2A: #2A3A6D;

    --font-col-200: #4A5565;
    --font-col-300: #99A1AF;    /* text-gray-400 */
    --font-col-400: #D1D5DC;    /* text-gray-300 */
    --font-col-500: #fdfdfd;
    --font-col-600: #fff;

    --shadow: 0 4px 30px #0000001a;
    
    --shadow-s:
        inset 0 1px 2px #ffffff30,
        0 1px 2px #00000030,
        0 2px 4px #00000015;

    --shadow-m:
        inset 0 1px 2px #ffffff50,
        0 2px 4px #00000030,
        0 4px 8px #00000015;

    --shadow-l:
        inset 0 1px 2px #ffffff70,
        0 4px 6px #00000030,
        0 6px 10px #00000015;

    font-size: 10px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-size: 1rem;
    font-weight: 400;

    -webkit-font-smoothing: antialiased;
}

html, body {
    background-color: var(--main-col1);

    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--yellow) var(--main-col1);

    /* overflow-x: clip; */
    overflow-x: hidden;
}

body {
    min-height: 100dvh;
    
    display: flex;
    flex-direction: column;

    /* тут добре для font preload та CLP */
    font-family: "Roboto", system-ui, -apple-system, sans-serif;
}

main {
    flex: 1;
}

/* Стандарт шрифта для <button> <input> <select> <textarea> */
/* 👉 ці елементи НЕ завжди наслідують font-family від body */
button, input, textarea, select {
  font-family: inherit;
}

/* Стандарт для заголовків */
:where(h1) {
    font-family: "Druk";
    font-style: italic;
    font-weight: 900;
}
:where(h2) {
    font-family: "Druk";
    font-style: italic;
    font-size: 3.6rem;
    font-weight: 900;

    color: var(--font-col-600);
    text-align: center;
    line-height: 1;
}

b {
    font-size: inherit;
    font-weight: inherit;
    color: var(--yellow);
}
u {
    font-size: inherit;
    font-weight: inherit;
    color: var(--font-col-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}


/* Стандарт для svg спрайтів */
svg {
    --size: 24px;

    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    min-height: var(--size);

    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-width: 2;
    stroke: currentColor;
    color: var(--font-col-400);
    
    fill: none;
}


/* Стандарт для розмітки */
:where(.-main-box),
:where(.-main-stack) {
    margin-inline: auto;
    width: min(125rem, 90%);
}


/* Header */

header {
    padding-block: 0.5rem;

    position: fixed;
    /* position: sticky; */
    /* inset-inline: 0; */
    /* top: 0; right: 0; */
    top: 0; width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    background-color: var(--header-col1);

    /* opacity: 0; */
    transition: 0.5s opacity ease-in;

    z-index: 10;
}

header nav {
    margin-inline: auto;
    width: min(135rem, 95%);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

header nav .logo {
    padding-block: 8px;

    display: flex;
    align-items: center;
    gap: 1rem;
}

header nav .contact {
    display: inline-flex;
    text-decoration: none;
}
header nav .contact strong {
    color: #000;
    font-weight: 700;
    text-decoration: inherit;
    text-transform: uppercase;
    background-color: var(--yellow);
}
header nav .contact strong {
    padding: 1.4rem 2.6rem;
    font-size: 1.6rem;
    border-radius: 5rem;
}

/* Main menu items */

header nav ul {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;

    list-style: none;
}

header nav ul li {
    position: relative;
}

header nav ul li button {
    width: 20rem;
    aspect-ratio: 4 / 1;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    font-size: 1.6rem;
    text-transform: uppercase;
    color: var(--font-col-400);

    background-color: #ffffff01;
    border: unset;
}
header nav ul li.has-submenu button {
    font-weight: 500;
    color: var(--font-col-500);
}
header nav ul li:not(.has-submenu) button svg {
    display: none;
}
header nav ul li.has-submenu button svg {
    width: 20px;
    height: 20px;

    color: var(--font-col-300);
    
    transform-origin: center;
    transition: rotate 0.25s ease-in;
}

header nav ul li.has-submenu button:is(:hover, :focus-visible) {
    background-color: #ffffff05;
    & svg {
        color: var(--yellow);
        rotate: -90deg;
    }
}


@property --pY {
    syntax: "<length>";
    initial-value: 20px;
    inherits: false;
}


header menu {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    display: flex;

    position: absolute;
    left: 0; bottom: 0;

    max-width: 100dvw;

    translate: var(--pX, 0px) calc(var(--pY) + 100%);

    transition:
        opacity 0.25s ease-in-out,
        --pY 0.35s ease-in-out;

    border-radius: 1.5rem;
    overflow: clip;

    z-index: -1;
}


header menu.-shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    --pY: 15px;
    z-index: 10;
}


/* Submenu groupes */

header menu > * {
    padding: 4rem;
    width: 33rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;
}

header menu aside {
    background-color: #4a6398;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
header menu .menu-group {
    background-color: #252a42;
}
header menu .menu-group1 {
    background-color: #1a1e33;
}

header menu aside picture.bk-ground img {
    margin: auto;

    position: absolute;
    inset: 0; height: auto;

    opacity: 0.18;
    z-index: -1;    
}

header menu hr {
    flex: 1;
    display: block;
    border: unset;
}

header menu h3,
header menu h4 {
    font-size: 1.6rem;
    font-style: italic;
    text-transform: uppercase;
    color: var(--font-col-500);
}

header menu h3 {
    color: var(--yellow);
}
header menu h3 a {
    width: fit-content;
    
    font-size: inherit;
    font-style: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;

    transition: 0.25s ease-in-out;
}
header menu h3 a:is(:hover, :focus-visible) {
    color: var(--font-col-400);
    text-underline-offset: 5px;
    letter-spacing: 0.6px;
}

header menu h5 {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: justify;
    color: var(--font-col-500);
}

header menu a,
header menu .item {
    text-decoration: none;

    display: flex;
    align-items: center;
    gap: 1.2rem;
}

header menu span,
header menu address {
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 500;
    color: var(--font-col-500);
}

header menu small {
    font-size: 1.2rem;
    color: var(--font-col-300);
}

header menu svg {
    display: inline-block;
    width: 20px;
    height: 20px;

    color: var(--font-col-300);
}

header menu aside svg {
    color: var(--yellow);
}

header menu a:is(:hover, :focus-visible) > * {
    color: var(--yellow);
}

header menu .item-box {
    display: grid;
    gap: 0.7rem;
}


.color-btn {
    padding: 2rem 3.5rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 1.8rem;
    font-weight: 500;
    color: var(--font-col-500);

    text-decoration: none;
    text-transform: uppercase;

    background-color: transparent;

    transition: 
        scale 0.25s,
        box-shadow 0.25s,
        background-color 0.25s
    ;

    border: 2px solid var(--font-col-600);
    border-radius: 4px;

    cursor: pointer;
}
.color-btn:not(.-yellow):is(:hover, :focus-visible) {
    background-color: #fff;
    color: #000;
}

.color-btn.-yellow {
    font-weight: 700;
    color: #000;
    background-color: var(--yellow);
    border: unset;
}
.color-btn.-yellow:is(:hover, :focus-visible) {
    --bk: hsla(from var(--yellow) h s l / 0.85);
    box-shadow: 0 0 2px 7px var(--bk, var(--yellow));
}

.color-btn.-yellow svg {
    color: #000;
}

.color-btn.-yellow-empty {
    font-weight: 700;
    color: var(--yellow);
    
    border: 1px solid var(--yellow);

    & svg {
        color: var(--yellow);
    }
}
.color-btn.-yellow-empty:is(:hover, :focus-visible) {
    background-color: var(--yellow);

    & svg {
        color: #000;
    }
}

.color-btn.-glass {
    background-color: #ffffff1a;
    border-color: #ffffff4d;
    backdrop-filter: blur(5px);

    &:is(:hover, :focus-visible) {
        background-color: #ffffff40;
        color: #fff;
    }
}

.color-btn.-black,
.color-btn.-white {
    --c: #000;
    --bk: #fff;

    color: var(--bk);
    background-color: var(--c);
    border: 1px solid var(--c);
}
.color-btn.-black > svg,
.color-btn.-white > svg {
    color: var(--bk);
    opacity: 0.7;
}

.color-btn.-white {
    --c: #fff;
    --bk: #000;
}
.color-btn.-black:is(:hover, :focus-visible),
.color-btn.-white:is(:hover, :focus-visible) {
    color: var(--bk);
    background-color: var(--c);
    box-shadow: 0 0 2px 7px hsla(from var(--c) h s l / 0.85);
}


/* "To the Top" button */

button#to-top {
    --size: 5.5rem;
    --half_size: calc(var(--size) / 2);
    --position: 3.5rem;

    padding: unset;

    width: var(--size);
    height: var(--size);

    position: fixed;
    bottom: var(--position);
    right: var(--position);

    border-radius: 50%;
    overflow: hidden;

    scale: 0.5;
    opacity: 0;

    transition: 0.25s;

    user-select: none;
    pointer-events: none;
    z-index: -1;
}

/* If there is a captcha tag, then place #to-top on the left side */
:has(.grecaptcha-badge) button#to-top {
    right: unset;
    left: var(--position);
}

button#to-top.-shown {
    scale: 1;
    opacity: 1;
    pointer-events: all;
    z-index: 10;
}

button#to-top .movable {
    display: grid;
    justify-items: center;
    gap: 3rem;

    transform: translateY(var(--half_size));
    transition: transform 0.7s ease-in-out;
}

button#to-top svg {
    rotate: -90deg;
    color: #000;
}

/* Ordinary shadow, not hovered */
button#to-top.-shown:not(:is(:hover, :focus-visible)) {
    box-shadow: 0px 2px 3px 0px #00000096;
}

/* Inner animation on hover */
button#to-top:is(:hover, :focus-visible) .movable {
    transform: translateY(calc(-1 * var(--half_size)));
}


@media (max-width: 1450px) {
    header nav ul li button {
        width: auto;
    }
}
@media (max-width: 1150px) {
    header {
        background-color: var(--main-col3);
    }

    header nav,
    header nav ul {
        display: grid;
        align-items: unset;
        justify-content: unset;
    }

    header nav ul li,
    header nav .contact {
        margin-block: 0.75rem;

        margin-inline: auto;
        width: min(30rem, 95%);
        text-align: center;        
    }

    header nav ul li.has-submenu button,
    header menu {
        display: none;
    }

    header ul li a.mobile-link {
        display: block;

        font-size: 1.6rem;
        font-weight: 500;
        color: var(--font-col-400);
        text-decoration: none;
        text-transform: uppercase;

        transition: color 0.25s;
    }

    header ul li a.mobile-link:is(:hover, :focus-visible) {
        color: var(--yellow);
    }

    header nav .first-item {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
        
        background-color: var(--header-col1);
        box-shadow: 0 calc(-5vw + 5px) 0 5vw var(--header-col1);
    }

    /* Mobile header toggle */

    header nav ul,
    header nav .contact {
        display: none;
    }

    header.-expanded nav ul,
    header.-expanded nav .contact {
        display: grid;
    }

    header .first-item button#mobile-menu {
        display: flex;
        align-items: center;
        justify-content: center;

        background-color: transparent;
        border: unset;

        cursor: pointer;
    }

    header #menu-open {
        display: block;
    }
    header #menu-close {
        display: none;
    }
    header.-expanded #menu-open {
        display: none;
    }
    header.-expanded #menu-close {
        display: block;
    }
}

@media (max-width: 900px) {
    #hero > h1,
    #hero > p {
        max-width: 95%;
    }
    #hero > h1,
    #hero .hero-inner h1 {
        line-height: 1.15;
    }
}

@media (max-width: 700px) {
    :root {
        font-size: 9px;
    }
}
@media (max-width: 600px) {
    :root {
        font-size: 8px;
    }
}

@media (max-width: 500px) {
    button#to-top {
        bottom: 2.5rem;
        right: 2.5rem;
    }
}