/* === THEME (default) === */
:root {
    /* Základ */
    --background: #0e1110; /* základ bg” */
    --foreground: #edebe5; /* základ font */
    --surface: #1b1f1e; /* základ surface */
    --muted: #a3a7ad; /* sekundárny text */
    --border: #2b2f2d; /* jemný border */
    --card: #141716; /* karta */
    --card-30: #181c1c; /* karta hover */

    /* Brand Primary (teal/tyrkys) */
    --brandprimary: #53ad9e; /* základ */
    --brandprimary-70: #4d8f85; /* hover/active */
    --brandprimary-30: #162b27; /* brand glass */

    /* Brand Secondary (vintage ochre) */
    --brandsecondary: #ccab83; /* základ */
    --brandsecondary-70: #b5aa9a; /* hover/active */
    --brandsecondary-30: #332f28; /* brand glass */

    /* Semantika (pastel vibe) */
    --success: #eaf7f0; /* základ */
    --success-70: #279866; /* hover/active */

    --alert: #fff4de; /* základ */
    --alert-70: #c79a3f; /* hover/active */

    --danger: #fdecee; /* základ */
    --danger-70: #b64f53; /* hover/active */

    --font-body: "Lato", sans-serif; /* Pre bežný text */
    --font-display: "FjallaOne", sans-serif; /* Pre nadpisy a dôležitý text */
    --font-mynerve: "Mynerve", cursive; /* Pre špeciálne efekty */
}

/* Fonty */

@font-face {
    font-family: "FjallaOne";
    src: url("../fonts/FjallaOne-Regular.woff2") format("woff2");
    font-display: swap;
}

h1 {
    font-family: var(--font-display);
    color: var(--brandprimary);
    font-size: 3rem;
}

h2 {
    font-family: var(--font-display);
    color: var(--brandprimary);
    font-size: 2.4rem;
}
h3 {
    font-family: var(--font-display);
    color: var(--brandprimary);
    font-size: 1.5rem;
}

.mynerve-text {
    font-family: var(--font-mynerve);
}

.icon_p {
    color: var(--brandprimary);
    background-color: var(--brandprimary-30);
    font-size: 1.6rem;
    padding: 0.3rem 1rem;
    border-radius: 0.5rem;
}

.icon_s {
    color: var(--brandsecondary);
    background-color: var(--brandsecondary-30);
    font-size: 1.6rem;
    padding: 0.3rem 1rem;
    border-radius: 0.5rem;
}

.brand_p {
    color: var(--brandprimary);
}

.brand_s {
    color: var(--brandsecondary);
}

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

/* Hlavné sekcie */

header {
    background: var(--surface);
}

.container {
    max-width: 1100px;
}

.spacing-100 {
    padding-top: 100px;
}

.spacing-100-mobile {
    padding-top: 0;
}

@media (max-width: 767.98px) {
    .spacing-100-mobile {
        padding-top: 100px;
    }
}

.navbar-brand {
    font-family: var(--font-display);
    color: var(--brandprimary);
    font-size: 1.5rem;
    transition: color 0.3 ease;
}
.navbar-brand:hover {
    color: var(--brandprimary-70);
}

.navbar-floating {
    background-color: rgba(14, 17, 16, 0.8);
    backdrop-filter: blur(8px);
}

.nav-item {
    padding-left: 1rem;
}

.nav-link {
    font-family: var(--font-display);
    color: var(--brandprimary);
    font-size: 1.1rem;
    transition: color 0.3 ease;
}
.nav-link:hover {
    color: var(--brandprimary-70);
}
.navbar-toggler-icon {
    color: var(--brandprimary);
}

/* Body */

body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: 1rem;
    min-height: 100vh;
}

footer {
    background: var(--card);
    color: var(--foreground);
    font-family: var(--font-body);
}

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

.social-icon {
    color: var(--brandsecondary);
    transition: color 0.3s ease;
}

.social-icon:hover {
    color: var(--brandsecondary-70);
}

.hero-video {
    height: 80vh;
}

.hero-video-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent);
}

.card {
    background: var(--card);
    color: var(--foreground);
}

.ratio-21x9 {
    --bs-aspect-ratio: 42.1%;
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
}

.ratio-9x16 {
    --bs-aspect-ratio: calc(16 / 9 * 100%);
}

.references img {
    filter: grayscale(100%);
    transition:
        filter 0.3s ease,
        transform 0.3s ease;
}

.references img:hover {
    filter: grayscale(0%);
    transform: translateY(-2px);
}

.letstalk a {
    color: var(--brandsecondary);
    font-weight: strong;
    text-decoration: none;
}

.letstalk .card {
    transition: background 0.3s ease;
}

.letstalk .card:hover {
    background: var(--card-30);
}

.contact .card {
    transition: background 0.3s ease;
}

.contact .card:hover {
    background: var(--card-30);
}

.textfield {
    background-color: var(--card);
    color: var(--foreground);
    border-radius: 1rem;
    padding: 0.3rem 1rem;
}

/* video player */

.video-embed {
    position: relative;
    background: var(--background);
    cursor: pointer;
}

.video-embed .video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-embed .video-play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 48px;
    border-radius: 16px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: var(--brandprimary);
    font-size: 32px;
    transition:
        transform 0.15s ease,
        background 0.15s ease;
}

.video-embed .video-play-btn:hover {
    transform: scale(1.05);
    background: rgba(0, 0, 0, 0.8);
}

/* keď už iframe beží, thumb + button schováme */
.video-embed.is-loaded .video-thumb,
.video-embed.is-loaded .video-play-btn {
    display: none;
}