/* Variables */
:root {
    --bg-dark: #141615;
    --bg-input: #303031;
    --green: #008200;
    --green-neon: #49D749;
    --green-glow: #0BDD0D;

    --gray: #ACACAC;

    --radius-sm: 0.5rem;
    --radius-lg: 1rem;

    --dot-pattern: radial-gradient(
        circle,
        #7f8080 1px,
        transparent 2px
    );
}

/* General styling */

* {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    padding: 0;
    margin: 0;
}

body {
    font-weight: 300;
    font-size: clamp(1rem, 1.2vw, 1.5rem);
    background-color: var(--bg-dark);
    color: white;
}

b {font-weight: 500;}
h1 {font-weight: 700; font-size: clamp(3rem, 8vw, 8rem);}
h2 {font-weight: 700; font-size: clamp(2.2rem, 6vw, 5rem)}
h3 {font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); padding-left: 0.5rem; padding-right: 0.5rem;}

h4 {
    font-weight: 400;
    font-size: clamp(1.25rem, 2.75vw, 2rem);
}

h5 {
    font-weight: 300;
}

a {
    color: white;
    font-weight: 400;
    text-decoration-color: var(--green);

}

a:visited {
    color: var(--green);
}

label {
    display: block;
    font-weight: 700;
    padding-bottom: 0.5rem;
}
label.required::after {
  content: " *";
  color: red;
}

input, textarea {
    min-width: 12rem;
    box-sizing: border-box;
    color: white;
    background-color: var(--bg-input);
    padding: clamp(0.5rem, 1.5vw, 0.8rem);
    margin-bottom: 0.5rem;
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    border: solid #545456 0.063rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

input {
    padding-left: clamp(2rem, 4vw, 3rem);
    width: 100%;
}
textarea{
    width: 100%;
    height: 25vh;
    resize: none;
}

::placeholder {
    color: var(--gray);
}
::-webkit-input-placeholder {
    color: var(--gray);
}

/* Reusable classes styling */

.green {
    color: var(--green);
}

.neon {
    position: relative;
	width: fit-content; 
    color: var(--green-neon);
    text-shadow:
        0.125rem 0.313rem 0.25rem #00000080,
        0rem 0.082rem 3.125rem var(--green-glow);;
}

.neon::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    /* grid overlay */
    background-image: 
        repeating-conic-gradient(
            rgba(0, 130, 0, 0.15) 0% 25%,
            transparent 25% 100%
        );
    background-size: 6px 6px;

    /* fade out grid */
    mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 40%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 100%
    );
    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 40%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 100%
    );
}

.impact {
    background-image: linear-gradient(to right, white, #A9BDCD);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.glow {
    text-shadow:
        0rem 0.025rem 0.11rem var(--green-glow);
}

.box-glow {
    box-shadow:
        0 0 4rem #0bdd0f24;
}

.btn{
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.2rem);
	white-space: nowrap;
    color: white;
    background-color: var(--green);
    padding: clamp(0.6rem, 1.5vw, 0.9rem) clamp(1rem, 3vw, 1.75rem);
    border-radius: 50rem;
    border: solid var(--green-neon) clamp(0.15rem, 0.4vw, 0.25rem);
    text-decoration: none;
    box-shadow: 0 0rem 0.938rem var(--green-neon);
}

.btn:hover {
    cursor: pointer;
}

.btn:active {
	background-color: #1A501A;
	border: solid #76A34D 0.25rem;
}

.btn:visited {
    color:white;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.z-1 {
    position: relative;
    z-index: 1;
}

.text-center{
    text-align: center;
}

.align-items-center {
    align-items: center;
}



.justify-items-center {
    justify-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-self-end {
    justify-self: end;
}

.kicker {
    font-weight: 700;
    margin-bottom: 4rem;
}
.kicker .bracket {
    color: var(--green);
    padding: 0rem 0.25rem
}
.kicker .underline{
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 0.25rem;
    text-underline-offset: 0.625rem;
}


.window {
    outline: solid var(--green) 0.25rem;
    border-radius: var(--radius-lg);
    margin: clamp(0.5rem, 2vw, 0.9rem);
}

.window-bar {
    background-color: var(--green);
    border-radius: var(--radius-sm) var(--radius-sm) 0rem 0rem;
    justify-content: end;
    gap: clamp(0.5rem, 1vw, 1rem);
    padding: clamp(0.1rem, 0.3vw, 0.188rem);
}

.window-bar i.bi {
    color: #141615;
    -webkit-text-stroke: clamp(0.1rem, 0.3vw, 0.188rem);

}

.window-div {
    padding: clamp(0.25rem, 0.8vw, 0.5rem);
}

.image-frame {
    margin: 0 4.167vw;
    position: relative;
    display: flex;
    flex-direction: column;
}

.image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-2rem, 1.7rem);
  z-index: -1;

  background-image: var(--dot-pattern);
  background-size: 12px 12px;
}

.simple-frame {
    margin-bottom: 1rem;
}
.simple-frame::after {
    transform: translate(-1rem, 1rem);
    border-radius: 1.1rem;
}

.image-container {
    flex: 1 1 auto;
    overflow: hidden;
}
.image-container img {
    aspect-ratio: 9 / 9;
    min-width: 15vw;
    min-height: 30vh;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: black;
    border-radius: var(--radius-lg);
}


.screen-background {
    position: relative;
	padding: max(14rem, 23vh) 9.5vw;
    min-height: calc(100vh - max(28rem, 46vh));
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Navigation styling */

nav {
    position: fixed;
    z-index: 9; 
    top: clamp(0.5rem, 2vh, 1.5rem);
    left: 2.917vw;
    right: 2.917vw;
    border-radius: 50rem;
    padding: clamp(0.5rem, 1.5vw, 0.8rem) clamp(1rem, 2.5vw, 1.5rem);
    background: rgba(0, 0, 0, 0.8), linear-gradient(to right, #0082000D, #2424240D);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
    inset 0 0 30px rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;

    /* layout */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* hardware acceleration for Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

nav::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.15rem;
  border-radius: inherit;
  background: linear-gradient(to right, #141615, #252726);
  pointer-events: none;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

}

nav a {
    position: relative;
    /* make logo link content-sized inside the flex container */
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

nav div {
    gap: clamp(1rem, 2vw, 1.5rem);
}

nav img {
    height: clamp(2rem, 5vw, 4rem);
    width: auto;
}

nav ul {
    list-style: none;
    gap: clamp(3rem, 5vw, 5rem);
}

nav li a:not(.btn), nav li a:not(.btn):visited{
    color: white;
    font-weight: 700;
    text-decoration: none;
}

nav li a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    top: clamp(1.5rem, 2.5vw, 2rem);
    width: 0;
    height: 0.25rem;
    background-color: var(--green);
    transition: width 0.3s ease;
}

nav li a:not(.btn):hover::after {
    width: 100%;
}

#nav-logo {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* header groups */
.nav-left {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
}
.nav-right {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.lang-toggle {
    position: relative;
    width: clamp(5rem, 8vw, 7rem);
    height: clamp(2.5rem, 4vh, 3.25rem);
    padding: 0;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: clamp(1rem, 2vw, 1.75rem);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    transition: border-color 0.3s, background 0.3s;
}

.lang-toggle:hover {
    border-color: var(--green);
    background: rgba(0, 130, 0, 0.1);
}

.lang-toggle .lang-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    text-align: center;
    pointer-events: none;
    transition: color 0.3s, font-weight 0.3s;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    font-weight: 400;
    color: white;
    z-index: 2; /* sit above slider/highlight */
}

/* highlight active language */
html[data-lang="cz"] .lang-toggle .lang-label.cz,
html[data-lang="en"] .lang-toggle .lang-label.en {
    color: var(--green);
    font-weight: 700;
}
.lang-toggle .lang-label.cz { left: 0; }
.lang-toggle .lang-label.en { right: 0; }

.lang-toggle .slider {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: calc(50% - 0.25rem);
    height: calc(100% - 0.25rem);
    background: var(--green);
    opacity: 0.2;
    border-radius: 1.5rem;
    transition: left 0.3s;
    z-index: 1; /* behind labels */
}

html[data-lang="en"] .lang-toggle .slider {
    left: calc(50% + 0.125rem);
}


#border-left, #border-right {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#border-left {
    left: 0;
    background-image: url('../images/border-left.webp');
    background-position: left top;
}

#border-right {
    right: 0;
    background-image: url('../images/border-right.webp');
    background-position: right top; 
}

/* Header styling */

header .bi.bi-window {
    color: var(--green);
    font-size: clamp(3rem, 8vw, 6rem);
}

header .window { 
    max-width: clamp(20rem, 40vw, 30rem);
}

.dot-gradient {
    height: clamp(15rem, 25vh, 21rem);
    position: absolute;
    transform: translate(0, 6rem);
    inset: 0;

    background-image: radial-gradient(
        circle,
        var(--green) 1px,
        transparent 2px
    );
    background-size: 18px 18px;

    mask-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 35%,
        rgba(0, 0, 0, 0.4) 55%,
        rgba(0, 0, 0, 0) 75%
    );

    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 35%,
        rgba(0, 0, 0, 0.4) 55%,
        rgba(0, 0, 0, 0) 75%
    );
}

/* Section styling */

section{
    padding-inline: 5vw;
    padding-top: 15vh;
}

.section-padding{
    padding-top: 15vh;
}

/* Services styling */

#services {
    padding-top: max(10rem, 17vh);
    min-height: calc(100vh - max(24rem, 40vh));
}

#services h2, #services h3, #services p {
    margin-bottom: 2rem;
}

.service {
    border: solid var(--green-neon) 0.063rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.service-start {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: 0;
}

.service-end {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: 0;
}

.service-icon {
    color: var(--gray);
    font-size: clamp(1.5rem, 4vw, 2.75rem);
}

/* Contact Us styling */

#contact-us {
    padding-top: max(10rem, 17vh);
    min-height: calc(100vh - max(24rem, 40vh));
}

#contact-us .window {
    position: relative;
}

#contact-us .window::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(2.3rem, 2.3rem);
  z-index: -1;

  background-image: var(--dot-pattern);
  background-size: 15px 15px;
}

#form-window-content {
    padding: clamp(1.5rem, 5vw, 3rem);
    background-color: var(--bg-dark);
}

#form-info {
    padding-right: 4.167vw;
    max-width: clamp(20rem, 30vw, 28rem);
}
#form-info .kicker {
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}
#form-info h2 {
    margin-bottom: clamp(1.5rem, 3vh, 3rem);
}


#contact-form {
    flex: 1;
    box-sizing: border-box;
}
#contact-form .btn {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
}

#submit-btn #spinner {
        display: none;
        animation: spin 1s linear infinite;
}

/* spinner and text visibility controlled by JS now */
#submit-btn #spinner {
        display: none;
        animation: spin 1s linear infinite;
}

#btn-text-cz {
        display: inline-block;
} 

@keyframes spin {
        from {
                transform: rotate(0deg);
        }
        to {
                transform: rotate(360deg);
        }
}

.input-div {
    gap: clamp(1rem, 3vw, 2rem);
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
    flex-wrap: wrap;
}

.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon .bi {
    position: absolute;
    left: clamp(0.15rem, 0.5vw, 0.25rem);
    top: 45%;
    transform: translateY(-50%);
    padding: clamp(0.3rem, 1vw, 0.55rem);
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: var(--green);
}

.test-border {border: solid red 1px;}

/* Footer styling */

footer {
    padding: clamp(1rem, 3vw, 2rem) clamp(2vw, 4vw, 4vw);
}

.anchor-list p {
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.anchor-list ul {
    list-style: none;
}
.anchor-list li {
    padding-bottom: clamp(0.5rem, 1vw, 1rem);
}
.anchor-list i.bi {
    color: var(--green);
    padding-right: 0.5rem;
    font-size: clamp(1rem, 2.5vw, 2rem);
}

.line {
    border: none;
    border-top: 1px solid #ddd;
    margin: clamp(1rem, 2vw, 1.5rem) 0;
}

#footer-content {
    padding: 0 2vw;
}

#footer-logo {
    white-space: nowrap;
    align-content: center;
}
#footer-logo img {
    height: clamp(4rem, 10vw, 8rem);
    width: auto;
    display: block;
}

/* Adaptive layouts */

/* Adaptive Layout Classes */

.display-md {
    display: none;
}

#dropdown-menu {
    padding: 1rem;
    z-index: 9;
    position: fixed;
    top: -50vw;
    left: 2.917vw;
    right: 2.917vw;
    opacity: 0;
    list-style: none;
    transition: .3s ease;
    border-radius: 2rem;
    background: linear-gradient(to right, #0082000D, #2424240D);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
    inset 0 0 30px rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.3);
}

#dropdown-menu.active {
    top: 8rem;
    opacity: 1;
}
#dropdown-menu li {
    margin-bottom: 3rem;
}

#dropdown-menu li a {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}
#dropdown-menu li a:not(.btn), #dropdown-menu li a:not(.btn):visited{
    position: relative;
    display: inline-block;
    color: white;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

#dropdown-menu li a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2rem;
    width: 0;
    height: 0.25rem;
    background-color: var(--green);
    transition: width 0.3s ease;
}

#dropdown-menu li a:not(.btn):hover::after {
    width: 100%;
}

#hamburger {
    height: 2.5rem;
    width: 2.5rem;
    position: relative;
    cursor: pointer;
}

#hamburger span{
    height: 5px;
    width: 100%;
    background-color: white;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease;
}
#hamburger span:nth-child(1) {
    top: 25%;
}
#hamburger span:nth-child(3) {
    top: 75%;
}
#hamburger.active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
#hamburger.active span:nth-child(2) {
    opacity: 0;
}
#hamburger.active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Large */

@media (max-width: 992px) {
    nav ul {
        gap: 2.5rem;
    }

    nav li a:not(.btn)::after {
        top: 1.5rem;
    }

    .window {
        margin-top: 3rem;
        margin-bottom: 3rem;
    }

    .service {
        padding: 1.5rem;
    }

    .input-div {
        gap: 1rem;
    }

    .flex-wrap-lg {
        flex-wrap: wrap;
    }

    #form-info {
        padding-bottom: 2rem;
    }

    #footer-logo {
        margin-bottom: 4rem;
    }


}

/* Medium */

@media (max-width: 768px) {
    .display-none-md {
        display: none;
    }

    .display-md {
        display: block;
    }
}

/* Small */

@media (max-width: 576px) {

    nav {
        left: 1rem;
        right: 1rem;
        padding: 0.6rem 1rem;
    }

    nav ul {
        gap: 1.5rem;
    }

    .lang-toggle {
        width: 3.5rem;
        height: 1.8rem;
        font-size: 0.6rem;
    }

    .lang-toggle .lang-label {
        font-size: 0.55rem;
    }

    .lang-toggle .slider {
        top: 0.08rem;
        left: 0.08rem;
        width: calc(50% - 0.16rem);
        height: calc(100% - 0.16rem);
    }

    html[data-lang="en"] .lang-toggle .slider {
        left: calc(50% + 0.08rem);
    }

    header {
        padding: 0 5vw;
        padding-top: 10rem;
        padding-bottom: 20vh;
        text-align: center;
    }

    .service {
        border: solid var(--green-neon) 0.063rem;
    }

    .service-start {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        border-bottom: 0;
    }

    .service-end {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        border-top: 0;
    }

    .image-frame {
        margin: 3rem 2vw;
    }

    #contact-us .window::after {
        transform: translate(1.5rem, 1.5rem);
    }

    .flex-wrap-sm {
        flex-wrap: wrap;
    }

    .align-center-sm {
        margin-inline: auto;
        width: -webkit-fit-content;
        width: fit-content;
        text-align: center;
    }

    .display-none-sm {
        display: none;
    }

    .screen-background {
        padding: max(8rem, 23vh) 5vw;
        min-height: calc(100vh - max(28rem, 46vh));
    }
}

/* Form message styling */
.submit-wrapper {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
}

.form-message {
    display: none;
    font-weight: 600;
    padding: clamp(0.4rem, 1vw, 0.6rem) clamp(0.7rem, 1.5vw, 1rem);
    border-radius: var(--radius-sm);
    font-size: clamp(0.8rem, 1.5vw, 0.95rem);
    white-space: nowrap;
}

.form-message.success {
    display: block;
    background-color: #228B22;
    color: white;
    border: 2px solid var(--green-neon);
    box-shadow: 0 0 0.5rem rgba(73, 215, 73, 0.4);
}

.form-message.error {
    display: block;
    background-color: #8B2222;
    color: white;
    border: 2px solid #FF6B6B;
    box-shadow: 0 0 0.5rem rgba(255, 107, 107, 0.4);
}