:root {
         --main-font: 'Roboto', sans-serif;
         --title-font: 'Oswald', sans-serif;
         --text-color: #ffffff;
         --accent-color: #ff8c00;
         --background-color: #000000;
     }
     
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
     
     body {
         font-family: var(--main-font);
         background-color: var(--background-color);
         color: var(--text-color);
         overflow-x: hidden;
     }
     
     header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         padding: 2rem;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 1001;
     }
     
     .subpage-header {
         background-color: black;
     }

     /* === KONTAKTNÝ DROPDOWN V HLAVIČKE === */

/* Wrapper pre umiestnenie */
.contact-wrapper {
    position: relative; /* Dôležité pre umiestnenie drop-downu */
}

/* Štýl pre samotné drop-down okno */
.contact-dropdown {
    position: absolute;
    top: 100%; /* Umiestni hneď pod tlačidlo */
    right: 0;
    min-width: 220px;
    padding: 1rem 1.5rem;
    margin-top: 40px; /* Malá medzera pod tlačidlom */
    background-color: #1a1a1a; /* Tmavé pozadie pre kontrast */
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    
    /* Prechod pre animáciu */
    opacity: 0; 
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

/* Zobrazenie pop-upu po aktivácii triedy 'active' cez JS */
.contact-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.contact-dropdown .contact-name {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-color); /* Biela farba */
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 0.5rem;
}

.contact-dropdown .contact-phone {
    display: block;
    text-decoration: none;
    color: var(--text-color); 
    font-size: 1.1rem;
    font-weight: 600;
    transition: color 0.2s;
}

.contact-dropdown .contact-phone:hover {
    color: #999; /* Jemné stmavnutie pri hoveri */
}
     
     .menu-toggle {
         padding: 10px;
         cursor: pointer;
         position: relative;
         z-index: 1002;
     }
     
     .custom-menu-icon {
         position: relative;
         width: 30px;
         height: 14px;
     }
     
     .custom-menu-icon::before,
     .custom-menu-icon::after {
         content: '';
         position: absolute;
         left: 0;
         height: 2px;
         background-color: var(--text-color);
         border-radius: 2px;
         transition: all 0.3s ease;
     }
     
     .custom-menu-icon::before {
         top: 0;
         width: 100%;
     }
     
     .custom-menu-icon::after {
         bottom: 0;
         width: 60%;
     }
     
     .brand-logo-top {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         height: 60px;
         transition: height 0.3s ease;
     }
     
     .tickets-btn {
         text-decoration: none;
         color: var(--text-color);
         border: 2px solid var(--text-color);
         padding: 0.5rem 1.5rem;
         font-weight: 700;
         transition: background-color 0.3s, color 0.3s;
         white-space: nowrap;
     }
     
     .tickets-btn:hover {
         background-color: var(--text-color);
         color: var(--background-color);
     }
     
     .overlay-menu {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 1000;
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.5s ease;
         background-color: rgba(0, 0, 0, 0.9);
     }
     
     .overlay-menu.active {
         opacity: 1;
         pointer-events: auto;
     }
     
     .menu-nav {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
         height: 100%;
         padding: 8rem 3rem;
     }
     
     .menu-nav a {
         position: relative;
         display: flex;
         align-items: center;
         padding: 1rem 0;
         text-decoration: none;
         opacity: 0;
         transform: translateY(100px);
         transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     }
     
     .overlay-menu.active .menu-nav a {
         opacity: 1;
         transform: translateY(0);
     }
     
     .menu-nav a img {
         width: 120px;
         height: auto;
         display: block;
         transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     }
     
     .menu-nav a:hover img {
         transform: translateX(-15px);
     }
     
     .menu-nav a::after {
         content: attr(data-text);
         position: absolute;
         left: 140px;
         top: 50%;
         transform: translate(-15px, -50%);
         font-family: var(--main-font);
         font-size: 1.2rem;
         font-weight: bold;
         color: #fff;
         white-space: nowrap;
         opacity: 0;
         transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     }
     
     .menu-nav a:hover::after {
         opacity: 1;
         transform: translate(0, -50%);
     }
     
     body.menu-open .custom-menu-icon::before {
         top: 50%;
         transform: translateY(-50%) rotate(45deg);
     }
     
     body.menu-open .custom-menu-icon::after {
         bottom: 50%;
         width: 100%;
         transform: translateY(50%) rotate(-45deg);
     }
     
     .horsetalk-main-content {
         position: relative;
         width: 100%;
         background-color: var(--background-color);
     }
     
     .horsetalk-landing {
         height: 100vh;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
         /* KĽÚČOVÁ OPRAVA: Pridali sme padding, aby bol priestor pre hlavičku */
         padding-top: 100px;
     }
     
     .landing-content-wrapper {
         display: grid;
         grid-template-columns: 1fr 1.5fr;
         align-items: center;
         gap: 5rem;
         width: 100%;
         max-width: 1200px;
         padding: 0 2rem;
     }
     
     .landing-logo-panel {
         display: flex;
         justify-content: center;
         align-items: center;
     }
     
     .landing-logo-panel img {
         max-width: 350px;
         width: 100%;
     }
     
     .landing-text-panel {
         display: flex;
         flex-direction: column;
         gap: 2rem;
     }
     
     .intro-tagline {
         font-family: var(--title-font);
         font-size: 3rem;
         text-transform: uppercase;
         letter-spacing: 4px;
         color: white;
         line-height: 1.2;
     }
     
     .intro-section h3 {
         font-family: var(--title-font);
         font-size: 1.3rem;
         text-transform: uppercase;
         margin-bottom: 0.75rem;
         display: flex;
         align-items: center;
         gap: 0.75rem;
     }
     
     .intro-section h3 i {
         color: white;
     }
     
     .intro-section p {
         font-size: 1rem;
         line-height: 1.7;
         color: rgba(255, 255, 255, 0.8);
         padding-left: 2.1rem;
     }
     
     .scroll-down-indicator {
         position: absolute;
         left: 4rem;
         top: 50%;
         transform: translateY(-50%);
         display: flex;
         align-items: center;
         gap: 1.5rem;
         color: #666;
     }
     
     .scroll-down-indicator span {
         writing-mode: vertical-rl;
         text-orientation: mixed;
         text-transform: uppercase;
         letter-spacing: 4px;
         font-size: 0.8rem;
     }
     
     .scroll-down-indicator::before {
         content: '';
         display: block;
         width: 1px;
         height: 150px;
         background-color: #444;
     }
     
     .horsetalk-episodes-view {
         width: 100%;
         min-height: 100vh;
         padding: 6rem 4rem;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #050505;
     }
     
     .episodes-grid-container {
         display: grid;
         grid-template-columns: 2fr 1fr;
         gap: 4rem;
         width: 100%;
         max-width: 1400px;
     }
     
     .featured-episode-column .featured-episode-title {
         font-family: var(--title-font);
         font-size: 2.5rem;
         text-transform: uppercase;
         margin-bottom: 1.5rem;
     }
     
     .featured-episode-column .episode-video-wrapper {
         position: relative;
         padding-bottom: 56.25%;
         height: 0;
         margin-bottom: 1.5rem;
     }
     
     .featured-episode-column .episode-video-wrapper iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
     }
     
     .featured-episode-column .featured-episode-description {
         font-size: 1rem;
         line-height: 1.6;
         color: rgba(255, 255, 255, 0.7);
     }
     
     .playlist-column .playlist-title {
         font-family: var(--title-font);
         font-size: 1.5rem;
         text-transform: uppercase;
         margin-bottom: 1.5rem;
         border-bottom: 1px solid #333;
         padding-bottom: 1.5rem;
     }
     
     .playlist-wrapper {
         display: flex;
         flex-direction: column;
     }
     
     .playlist-controls {
         text-align: center;
     }
     
     .playlist-arrow {
         background: none;
         border: none;
         color: #666;
         font-size: 1.5rem;
         cursor: pointer;
         padding: 0.5rem;
         transition: color 0.3s;
     }
     
     .playlist-arrow:hover {
         color: var(--text-color);
     }
     
     .playlist-arrow:disabled {
         color: #222;
         cursor: default;
     }
     
     .playlist-items-container {
         height: calc(5 * (67px + 1.5rem));
         overflow: hidden;
         margin: 1rem 0;
     }
     
     .playlist-items {
         display: flex;
         flex-direction: column;
         gap: 1.5rem;
         transition: transform 0.5s ease-in-out;
     }
     
     .playlist-item {
         display: flex;
         align-items: center;
         gap: 1.5rem;
         cursor: pointer;
         border-radius: 4px;
         transition: background-color 0.3s;
     }
     
     .playlist-item:hover {
         background-color: #1a1a1a;
     }
     
     .playlist-item-thumbnail {
         width: 120px;
         height: 67px;
         flex-shrink: 0;
         aspect-ratio: 16 / 9;
         background-size: cover;
         background-position: center;
     }
     
     .playlist-item-info {
         display: flex;
         align-items: center;
         gap: 0.75rem;
     }
     
     .playlist-item-title {
         font-family: var(--main-font);
         font-weight: 700;
         font-size: 1rem;
         line-height: 1.4;
     }
     
     @media (max-width: 1024px) {
         .landing-content-wrapper {
             grid-template-columns: 1fr;
             text-align: center;
         }
         .landing-logo-panel {
             margin-bottom: 2rem;
         }
         .landing-text-panel {
             align-items: center;
         }
         .intro-section p {
             padding-left: 0;
         }
         .scroll-down-indicator {
             display: none;
         }
         .episodes-grid-container {
             grid-template-columns: 1fr;
         }
         .playlist-column {
             margin-top: 4rem;
         }
     }
     
     @media (max-width: 768px) {
         /* KĽÚČOVÁ OPRAVA PRE MOBILY: Upravíme padding pre menšie obrazovky */
         .horsetalk-landing {
             padding-top: 120px;
             /* Ešte viac miesta pre hlavičku na mobile */
             height: auto;
             /* Výška sa prispôsobí obsahu */
             min-height: 100vh;
             /* Ale stále bude aspoň na celú obrazovku */
         }
         .landing-content-wrapper {
             gap: 1rem;
             /* Zmenšíme medzery */
         }
         .intro-tagline {
             font-size: 2.2rem;
             /* Zmenšíme hlavný nadpis */
         }
         .horsetalk-episodes-view {
             padding: 4rem 1.5rem;
         }
     }
     
     @media (max-width: 768px) {
         /* === ÚPRAVA: Hlavička s presahujúcim logom a tmavším gradientom === */
         header {
             /* Zväčšený padding, aby dal priestor väčšiemu logu */
             padding: 2.5rem 1rem;
             justify-content: space-between;
             /* Kľúčová zmena: Tmavší gradient */
             background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
             border-bottom: none;
         }
         .brand-logo-top {
             /* Kľúčová zmena: Výrazne väčšie logo, ktoré bude presahovať */
             height: 70px;
         }
         /* ==================================================================== */
         .tickets-btn {
             padding: 0.4rem 0.8rem;
             font-size: 0.8rem;
         }
         .side-elements {
             display: none;
         }
         .menu-nav {
             padding: 6rem 1.5rem;
             align-items: center;
         }
         .menu-nav a {
             text-align: center;
         }
         .menu-nav a:hover img {
             transform: none;
         }
         .menu-nav a::after {
             display: none;
         }
     }

     /* Media query pre mobilné a menšie tabletové zariadenia */
@media (max-width: 1024px) {
    /* ... tvoje existujúce štýly pre mobilné zariadenia ... */
    
    .landing-logo-panel {
        /* Toto skryje celý div, v ktorom je logo 'horsetalk.png' */
        display: none !important; /* Použijeme !important pre prípad, že existujú iné pravidlá s vyššou špecifickosťou. */
    }
    
    /* Optimalizácia: Centrovanie textu, keďže logo zmizne */
    .landing-content-wrapper {
        /* Ak predtým bola mriežka (grid), na mobile nech ju nahradí flexbox */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Môžeme prejsť na jedno stĺpcový grid, ak je definovaný: */
        grid-template-columns: 1fr;
    }
    
    .landing-text-panel {
        /* Centrujeme textový obsah */
        align-items: center; 
    }
}