/* 
npx @tailwindcss/cli -i ./css/input.css -o ./css/output.css --watch 
*/

@import "tailwindcss";
@import "./fonts.css";

@theme {
    --font-oswald: "Oswald";

    --color-curious-blue: var(--curious-blue);
    --color-rose-madder: var(--color-rose-madder);
    --color-blaze-orange: var(--color-blaze-orange);
    --color-citrus: var(--color-citrus);
    --color-white-smoke: var(--color-white-smoke);
}

@utility container {
    margin-inline: auto;
    padding-inline: 20px;
    max-width: 1560px;
}

:root {
    --color-curious-blue: #3695d8;
    --color-rose-madder: #e51f40;
    --color-blaze-orange: #ff6600;
    --color-citrus: #96c800;
    --color-white-smoke: #f6f6f6;
}

html {
    scroll-behavior: smooth;
}
body {
    font-family: "Open Sans", "sans-serif";
}

.wpml-ls-current-language {
    color: grey;
}

header {
    nav {
        ul {
            li {
                a:hover {
                    color: var(--color-curious-blue);
                }
            }
            li.current-menu-item {
                border-bottom: 2px solid var(--color-curious-blue);
            }
        }
    }
}

.sticky-header-js {
    background: #00425d;
    background: radial-gradient(
        circle,
        rgba(0, 66, 93, 1) 0%,
        rgba(0, 57, 83, 1) 12%,
        rgba(0, 35, 57, 1) 31%,
        rgba(0, 26, 47, 1) 38%,
        rgba(0, 18, 35, 1) 51%,
        rgba(0, 4, 15, 1) 80%,
        rgba(0, 0, 8, 1) 100%
    );
}

.hero-section {
    background: #00425d;
    background: radial-gradient(
        circle,
        rgba(0, 66, 93, 1) 0%,
        rgba(0, 57, 83, 1) 12%,
        rgba(0, 35, 57, 1) 31%,
        rgba(0, 26, 47, 1) 38%,
        rgba(0, 18, 35, 1) 51%,
        rgba(0, 4, 15, 1) 80%,
        rgba(0, 0, 8, 1) 100%
    );
    p {
        max-width: 680px;
        font-size: 22px;
        margin-top: 33px;
    }
}

.diagram-section {
    h2 {
        text-align: center;
        font-size: 48px;
        font-weight: 600;
        margin-bottom: 39px;
        text-transform: uppercase;
    }
}

.diagram-section-content {
    column-count: 2;
    column-fill: balance;
    column-gap: 60px;
}

.diagram-section-content > p {
    margin-bottom: 1.5rem;
    break-inside: avoid;
    display: inline-block;
    width: 100%;
}

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hamRotate.active {
    transform: rotate(45deg);
}
.line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: white;
    stroke-width: 5.5;
    stroke-linecap: round;
}
.ham4 .top {
    stroke-dasharray: 40 121;
}
.ham4 .bottom {
    stroke-dasharray: 40 121;
}
.ham4.active .top {
    stroke-dashoffset: -68px;
}
.ham4.active .bottom {
    stroke-dashoffset: -68px;
}

footer {
    background-color: #4d4d4d;
}

.tooltip {
    position: relative;
    /* display: inline-block; */
    cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
    visibility: hidden; /* Hidden by default */
    width: 130px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1; /* Ensure tooltip is displayed above content */
    top: 0;
    right: 50%;
    transform: translate(50%, -100%);
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
.tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.wpml-ls-legacy-list-horizontal {
    padding: 0px !important;
}
.wpml-ls-legacy-list-horizontal a {
    padding: 0px !important;
}
.wpml-ls-legacy-list-horizontal > ul {
    display: flex;
    gap: 20px;
}

@media screen and (max-width: 1536px) {
    header {
        nav {
            background: #00425d;
            background: radial-gradient(
                circle,
                rgba(0, 66, 93, 1) 0%,
                rgba(0, 57, 83, 1) 12%,
                rgba(0, 35, 57, 1) 31%,
                rgba(0, 26, 47, 1) 38%,
                rgba(0, 18, 35, 1) 51%,
                rgba(0, 4, 15, 1) 80%,
                rgba(0, 0, 8, 1) 100%
            );
        }
    }
}

@media screen and (max-width: 640px) {
    .diagram-section {
        h2 {
            text-align: center;
            font-size: 48px;
            font-weight: 600;
            margin-bottom: 39px;
            text-transform: uppercase;
        }
    }

    .diagram-section-content {
        column-count: 1;
        column-gap: 3rem;
    }
}