@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');



:root {

    --cream: #f3eadb;

    --gold: #dfad55;

    --gold-light: #efc675;

    --green: #071d15;

    --green-light: #0b281d;

    --black: #050806;

    --white: #ffffff;

    --text-dark: #111310;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    background: var(--black);

    color: var(--white);

    font-family: "Inter", Arial, sans-serif;

    overflow-x: hidden;

}



a {

    color: inherit;

    text-decoration: none;

}



img {

    max-width: 100%;

    display: block;

}





/* =========================================================

   HEADER

========================================================= */



.site-header {

    position: absolute;

    z-index: 1000;

    top: 0;

    left: 50%;

    transform: translateX(-50%);



    width: min(1500px, 92%);

    height: 105px;



    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 45px;

}



.brand {

    display: flex;

    flex-direction: column;

    width: fit-content;

}



.brand-name {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 500;

    letter-spacing: .2px;

}



.brand-location {

    margin-top: 7px;



    font-size: 9px;

    font-weight: 500;

    letter-spacing: 3.5px;

}



.desktop-nav {

    display: flex;

    align-items: center;

    gap: 31px;



    font-size: 14px;

}



.desktop-nav a {

    position: relative;

    padding: 12px 0;

    transition: color .2s ease;

}



.desktop-nav a:hover,

.desktop-nav a.active {

    color: var(--gold-light);

}



.desktop-nav a.active::after {

    content: "";

    position: absolute;



    left: 0;

    right: 0;

    bottom: 4px;



    height: 1px;

    background: var(--gold-light);

}



.header-booking {

    background: var(--gold-light);

    color: #111;



    padding: 13px 23px;



    border-radius: 100px;



    font-size: 10px;

    font-weight: 700;

    letter-spacing: .7px;



    transition: transform .2s ease, background .2s ease;

}



.header-booking:hover {

    transform: translateY(-2px);

    background: #f6d38d;

}



.header-booking span {

    margin-left: 8px;

}





/* =========================================================

   HERO

========================================================= */



.hero {

    position: relative;



    min-height: 780px;



    background:

        linear-gradient(

            90deg,

            rgba(0, 0, 0, .80) 0%,

            rgba(0, 0, 0, .52) 25%,

            rgba(0, 0, 0, .12) 58%,

            rgba(0, 0, 0, .20) 100%

        ),

        linear-gradient(

            0deg,

            rgba(0, 0, 0, .65) 0%,

            transparent 30%

        ),

        url("../images/relax-wellness-apartman-osz-hero.webp");



    background-size: cover;

    background-position: center 20%;



    overflow: hidden;

}



.hero-content {

    position: relative;

    z-index: 3;



    width: min(1500px, 88%);

    margin: 0 auto;



    padding-top: 170px;

}



.hero-content > * {

    max-width: 570px;

}



.season-script {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 82px;

    font-style: italic;

    font-weight: 500;

    line-height: .72;



    margin-left: 4px;

}



.hero h1 {

    margin: 22px 0 10px;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(64px, 5.4vw, 88px);

    font-weight: 400;

    line-height: .85;

    letter-spacing: -2px;

}



.hero-subtitle {

    margin-top: 23px;

    margin-bottom: 25px;



    font-size: 18px;

    font-weight: 500;

    letter-spacing: 3.2px;

}



.hero-description {

    margin-bottom: 37px;



    font-size: 17px;

    line-height: 1.5;

    font-weight: 400;

}



.primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    background: var(--gold-light);

    color: #111;



    min-height: 46px;

    padding: 0 24px;



    border-radius: 100px;



    font-size: 12px;

    font-weight: 700;

    letter-spacing: .4px;



    transition: transform .2s ease, background .2s ease;

}



.primary-button:hover {

    transform: translateY(-2px);

    background: #f6d38d;

}



.primary-button span {

    margin-left: 13px;

    font-size: 17px;

}



.hero-location {

    margin-top: 22px;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 18px;

}



.hero-quote {

    position: absolute;

    z-index: 3;



    top: 145px;

    right: max(6%, calc((100vw - 1500px) / 2));



    display: flex;

    flex-direction: column;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 34px;

    font-style: italic;

    line-height: 1.05;

    text-align: right;



    transform: rotate(-6deg);

}



.hero-features {

    position: absolute;

    z-index: 3;



    right: max(6%, calc((100vw - 1500px) / 2));

    bottom: 50px;



    display: flex;

    gap: 40px;

}



.hero-features div {

    min-width: 70px;



    display: flex;

    flex-direction: column;

    align-items: center;



    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1.1px;

}



.feature-icon {

    margin-bottom: 7px;



    color: var(--gold-light);



    font-family: Georgia, serif;

    font-size: 42px;

    line-height: 1;

}





/* =========================================================

   INTRO

========================================================= */



.intro-section {

    min-height: 195px;



    padding: 30px max(6%, calc((100vw - 1500px) / 2));



    background: var(--cream);

    color: var(--text-dark);



    display: grid;

    grid-template-columns: 110px 1.6fr 1.55fr .75fr;

    gap: 45px;

    align-items: center;

}



.leaf-decoration {

    font-size: 78px;

    filter: sepia(.4);

}



.intro-section h2 {

    font-size: clamp(35px, 3vw, 52px);

    font-weight: 400;

    line-height: 1.03;

    letter-spacing: -1.8px;

}



.intro-section > p {

    max-width: 480px;



    font-size: 15px;

    line-height: 1.55;

}



.intro-script {

    justify-self: end;



    color: #b96c36;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 32px;

    font-style: italic;

    line-height: 1.15;

    text-align: center;



    transform: rotate(-7deg);

}





/* =========================================================

   WELLNESS

========================================================= */



.wellness-section {

    padding: 55px max(6%, calc((100vw - 1500px) / 2)) 42px;



    background: var(--green);



    display: grid;

    grid-template-columns: .9fr 1.8fr;

    gap: 65px;

    align-items: start;

}



.wellness-copy {

    padding-top: 5px;

}



.wellness-copy h2 {

    color: #d6a66c;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 51px;

    font-weight: 600;

    line-height: .95;

}



.wellness-copy h3 {

    margin: 10px 0 27px;



    font-size: 15px;

    font-weight: 700;

}



.wellness-copy p {

    margin-bottom: 31px;



    font-size: 17px;

    font-weight: 600;

    line-height: 1.4;

}



.outline-button {

    display: inline-flex;

    align-items: center;



    min-height: 34px;

    padding: 0 17px;



    border: 1px solid var(--gold);

    border-radius: 100px;



    color: var(--gold-light);



    font-size: 9px;

    font-weight: 700;

    letter-spacing: .3px;



    transition: background .2s ease, color .2s ease;

}



.outline-button:hover {

    background: var(--gold-light);

    color: #111;

}



.wellness-gallery {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

}



.photo-placeholder {

    position: relative;



    min-height: 275px;



    background:

        linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)),

        url("../images/relax-apartman-osz-kucko-01.webp");



    background-size: cover;

    background-position: center;



    display: flex;

    align-items: center;

    justify-content: center;



    color: rgba(255,255,255,.65);



    font-size: 11px;

}

/* =========================================================
   FŐOLDAL – WELLNESS KÉPEK
========================================================= */

.home-page .jacuzzi-photo {
    background:
        linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.12)),
        url("../images/relax-wellness-osz-jakuzzi-02.webp");

    background-size: cover;
    background-position: center;
}

.home-page .sauna-photo {
    background:
        linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.12)),
        url("../images/relax-wellness-osz-szauna.webp");

    background-size: cover;
    background-position: center;
}


/* =========================================================
   FŐOLDAL – KIRÁNDULÁS KÉPEK
========================================================= */

.home-page .forest-photo {
    background:
        linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.10)),
        url("../images/relax-apartman-paradsasvar-osz-kirandulas-ut.webp");

    background-size: cover;
    background-position: center;
}

.home-page .lift-photo {
    background:
        linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.12)),
        url("../images/relax-apartman-paradsasvar-osz-kirandulas-erdo.webp");

    background-size: cover;
    background-position: center;
}


.wellness-icons {

    grid-column: 1 / -1;



    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;



    padding: 5px 5px 0;

}



.wellness-icons > span {

    position: relative;



    padding-left: 38px;



    display: flex;

    flex-direction: column;



    font-size: 13px;

    letter-spacing: .6px;

}



.wellness-icons > span::before {

    content: "♨";



    position: absolute;

    left: 0;

    top: -6px;



    color: #d5aa69;



    font-size: 30px;

}



.wellness-icons small {

    margin-top: 4px;



    font-size: 9px;

    font-weight: 400;

    opacity: .8;

}





/* =========================================================

   ADVENTURE

========================================================= */



.adventure-section {

    padding: 16px max(6%, calc((100vw - 1500px) / 2));



    background: var(--cream);

    color: var(--text-dark);



    display: grid;

    grid-template-columns: 1.25fr 1.05fr 1fr;

    gap: 36px;

    align-items: stretch;

}



.adventure-section .photo-placeholder {

    min-height: 300px;

}



.adventure-copy {

    padding: 35px 5px;



    display: flex;

    flex-direction: column;

    justify-content: center;

}



.adventure-copy h2 {

    margin-bottom: 22px;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 50px;

    font-weight: 700;

    line-height: .88;

}



.adventure-copy p {

    max-width: 390px;

    margin-bottom: 26px;



    font-size: 15px;

    font-weight: 500;

    line-height: 1.45;

}



.outline-button.dark {

    width: fit-content;



    color: #815e2c;

    border-color: #a57a40;

}



.outline-button.dark:hover {

    color: #fff;

    background: #815e2c;

}





/* =========================================================

   HOUSE

========================================================= */



.house-section {

    padding: 20px max(6%, calc((100vw - 1500px) / 2)) 38px;



    background: var(--cream);

    color: var(--text-dark);



    display: grid;

    grid-template-columns: .65fr 2fr 1.15fr;

    gap: 30px;

    align-items: center;

}



.house-title h2 {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 48px;

    font-weight: 600;

    line-height: .9;

}



.house-title p {

    margin-top: 8px;



    font-size: 10px;

    font-weight: 700;

    line-height: 1.2;

}



.house-gallery {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 8px;

}



.house-gallery .photo-placeholder {

    min-height: 145px;

}

/* =========================================================
   A KUCKÓ KÉPEI
========================================================= */

.home-page .house-photo-1 {
    background-image: url("../images/relax-apartman-osz-kucko-01.webp");
}

.home-page .house-photo-2 {
    background-image: url("../images/relax-apartman-osz-kucko-03.webp");
}

.home-page .house-photo-3 {
    background-image: url("../images/relax-apartman-osz-kucko-02.webp");
}

.home-page .house-photo-4 {
    background-image: url("../images/relax-apartman-osz-kucko-04.webp");
}

.home-page .house-photo-1,
.home-page .house-photo-2,
.home-page .house-photo-3,
.home-page .house-photo-4 {
    background-size: cover;
    background-position: center;
}



.house-details {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 7px;

    align-items: start;

}



.house-details div {

    display: flex;

    flex-direction: column;

    align-items: center;



    font-size: 27px;

    text-align: center;

}



.house-details span {

    margin-top: 5px;



    display: flex;

    flex-direction: column;



    font-size: 11px;

    font-weight: 700;

}



.house-details small {

    margin-top: 2px;



    font-size: 10px;

    font-weight: 400;

}



.house-details .outline-button {

    grid-column: 1 / -1;

    justify-self: start;



    margin-top: 10px;

}





/* =========================================================

   BOOKING

========================================================= */



.booking-section {

    min-height: 430px;



    padding: 85px 20px;



    background:

        linear-gradient(

            rgba(3, 24, 17, .84),

            rgba(3, 24, 17, .9)

        ),

        url("../images/relax-wellness-apartman-osz-hero.webp");



    background-size: cover;

    background-position: center;



    text-align: center;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.booking-eyebrow {

    color: #d8ab67;



    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3.5px;

}



.booking-section h2 {

    margin: 15px 0 17px;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 64px;

    font-weight: 600;

    line-height: .85;

}



.booking-section p:not(.booking-eyebrow) {

    margin-bottom: 34px;



    font-size: 14px;

}





/* =========================================================

   MOBILE NAV

========================================================= */



.menu-toggle,

.mobile-nav {

    display: none;

}





/* =========================================================

   TABLET

========================================================= */



@media (max-width: 1100px) {



    .site-header {

        width: 94%;

        gap: 20px;

    }



    .desktop-nav {

        gap: 18px;

        font-size: 12px;

    }



    .hero-features {

        gap: 20px;

    }



    .intro-section {

        grid-template-columns: 80px 1.5fr 1.4fr .7fr;

        gap: 25px;

    }



    .wellness-section {

        gap: 35px;

    }



}





/* =========================================================

   MOBILE

========================================================= */



@media (max-width: 800px) {



    .site-header {

        position: absolute;



        width: 100%;

        height: 80px;



        padding: 15px 20px;



        display: flex;

        justify-content: space-between;

    }



    .brand-name {

        font-size: 19px;

    }



    .brand-location {

        font-size: 7px;

        letter-spacing: 2.5px;

    }



    .desktop-nav,

    .header-booking {

        display: none;

    }



    .menu-toggle {

        position: relative;

        z-index: 1001;



        width: 36px;

        height: 36px;



        border: 0;

        background: transparent;



        display: flex;

        flex-direction: column;

        align-items: flex-end;

        justify-content: center;

        gap: 6px;



        cursor: pointer;

    }



    .menu-toggle span {

        display: block;



        width: 28px;

        height: 2px;



        background: #fff;

    }



    .menu-toggle span:nth-child(2) {

        width: 21px;

    }



    .mobile-nav {

        position: fixed;

        z-index: 999;



        inset: 0;



        padding: 115px 30px 50px;



        background: rgba(4, 27, 19, .98);



        flex-direction: column;

        gap: 19px;



        font-family: "Cormorant Garamond", Georgia, serif;

        font-size: 34px;

    }



    .mobile-nav.open {

        display: flex;

    }



    .mobile-nav a {

        border-bottom: 1px solid rgba(255,255,255,.12);

        padding-bottom: 10px;

    }



    .mobile-booking {

        margin-top: 15px;



        color: var(--gold-light);

    }





    /* HERO MOBILE */



    .hero {

        min-height: 760px;



        background-position: 60% center;

    }



    .hero-content {

        width: 100%;

        margin: 0;



        padding: 145px 24px 150px;

    }



    .hero-content > * {

        max-width: 360px;

    }



    .season-script {

        font-size: 60px;

    }



    .hero h1 {

        margin-top: 17px;



        font-size: 60px;

        line-height: .86;

    }



    .hero-subtitle {

        margin-top: 20px;



        font-size: 12px;

        line-height: 1.4;

        letter-spacing: 2px;

    }



    .hero-description {

        font-size: 14px;

        line-height: 1.5;

    }



    .primary-button {

        min-height: 43px;



        padding: 0 19px;



        font-size: 10px;

    }



    .hero-location {

        font-size: 16px;

    }



    .hero-quote {

        display: none;

    }



    .hero-features {

        left: 15px;

        right: 15px;

        bottom: 45px;



        display: grid;

        grid-template-columns: repeat(5, 1fr);

        gap: 3px;

    }



    .hero-features div {

        min-width: 0;



        font-size: 7px;

        letter-spacing: .2px;

    }



    .feature-icon {

        font-size: 27px;

    }





    /* INTRO MOBILE */



    .intro-section {

        min-height: auto;



        padding: 42px 25px;



        grid-template-columns: 1fr;

        gap: 22px;

    }



    .leaf-decoration {

        display: none;

    }



    .intro-section h2 {

        font-size: 39px;

    }



    .intro-section > p {

        font-size: 14px;

    }



    .intro-script {

        justify-self: start;



        font-size: 27px;

        text-align: left;



        transform: rotate(-4deg);

    }





    /* WELLNESS MOBILE */



    .wellness-section {

        padding: 48px 22px;



        grid-template-columns: 1fr;

        gap: 35px;

    }



    .wellness-copy h2 {

        font-size: 45px;

    }



    .wellness-copy p {

        font-size: 15px;

    }



    .wellness-gallery {

        grid-template-columns: 1fr;

    }



    .photo-placeholder {

        min-height: 250px;

    }



    .wellness-icons {

        grid-template-columns: 1fr 1fr;

        gap: 25px 10px;



        margin-top: 5px;

    }





    /* ADVENTURE MOBILE */



    .adventure-section {

        padding: 15px;



        grid-template-columns: 1fr;

        gap: 5px;

    }



    .adventure-section .photo-placeholder {

        min-height: 260px;

    }



    .adventure-copy {

        padding: 35px 12px;

    }



    .adventure-copy h2 {

        font-size: 46px;

    }



    .adventure-copy p {

        font-size: 14px;

    }





    /* HOUSE MOBILE */



    .house-section {

        padding: 42px 20px;



        grid-template-columns: 1fr;

        gap: 28px;

    }



    .house-title h2 {

        font-size: 47px;

    }



    .house-gallery {

        grid-template-columns: 1fr 1fr;

    }



    .house-gallery .photo-placeholder {

        min-height: 155px;

    }



    .house-details {

        gap: 10px;

    }





    /* BOOKING MOBILE */



    .booking-section {

        min-height: 450px;



        padding: 70px 25px;

    }



    .booking-section h2 {

        font-size: 53px;

    }




    }



   /* =========================================================

   MOBILE FINOMHANGOLÁS

========================================================= */



@media (max-width: 800px) {



    /* Intro legyen kompaktabb */



    .intro-section {

        padding-top: 38px;

        padding-bottom: 38px;

        gap: 18px;

    }



    .intro-section h2 {

        font-size: 38px;

        line-height: 1.02;

    }



    .intro-script {

        margin-top: 5px;

        font-size: 25px;

        line-height: 1.05;

    }





    /* Wellness képek fekvőbbek */



    .wellness-gallery .photo-placeholder {

        min-height: 0;

        height: 225px;

    }





    /* Kirándulás képek */



    .adventure-section .photo-placeholder {

        min-height: 0;

        height: 230px;

    }





    /* Kuckó galéria */



    .house-gallery .photo-placeholder {

        min-height: 0;

        height: 150px;

    }





    /* Kicsit kisebb térközök */



    .wellness-section {

        gap: 30px;

    }



    .adventure-section {

        gap: 10px;

    }



    .house-section {

        gap: 24px;

    }



}



/* =========================================================

   ALOLDALAK KÖZÖS HERO

========================================================= */



.page-hero {

    position: relative;

    min-height: 430px;



    display: flex;

    align-items: flex-end;



    padding: 0 max(6%, calc((100vw - 1500px) / 2)) 65px;



    background-size: cover;

    background-position: center;



    overflow: hidden;

}



.page-hero::after {

    content: "";

    position: absolute;

    inset: 0;



    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.72) 0%,

            rgba(0,0,0,.40) 38%,

            rgba(0,0,0,.10) 75%

        ),

        linear-gradient(

            0deg,

            rgba(0,0,0,.55) 0%,

            transparent 55%

        );

}



.page-hero-content {

    position: relative;

    z-index: 2;



    width: min(1500px, 100%);

}



.page-eyebrow {

    margin-bottom: 10px;



    color: var(--gold-light);



    font-size: 10px;

    font-weight: 600;

    letter-spacing: 3.5px;

}



.page-hero h1 {

    margin: 0;



    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(58px, 5vw, 78px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: -1.5px;

}



.page-hero-content > p:last-child {

    margin-top: 16px;



    font-size: 18px;

    font-weight: 500;

}





/* A HÁZ HERO HÁTTÉR */



.house-hero {

    background-image:

        url("../images/relax-apartman-osz-kucko-01.webp");



    background-size: cover;

    background-position: center;

}





/* =========================================================

   ALOLDAL HERO - MOBIL

========================================================= */



@media (max-width: 800px) {



    .page-hero {

        min-height: 330px;



        padding:

            0

            24px

            35px;



        background-position: center;

    }



    .page-hero h1 {

        font-size: 52px;

    }



    .page-eyebrow {

        font-size: 9px;

        letter-spacing: 2.5px;

    }



    .page-hero-content > p:last-child {

        margin-top: 10px;

        font-size: 15px;

    }

}





/* =========================================================

   ÉVSZAKOK DROPDOWN

========================================================= */



.desktop-nav .season-menu {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

}



.desktop-nav .season-menu-button {

    appearance: none !important;

    -webkit-appearance: none !important;



    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;



    color: inherit !important;

    font: inherit !important;



    padding: 12px 0 !important;



    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;



    cursor: pointer !important;

}



.desktop-nav .season-menu-button:hover {

    color: var(--gold-light) !important;

}



.desktop-nav .season-menu-button span {

    font-size: 11px;

    transition: transform .2s ease;

}



.desktop-nav .season-menu:hover .season-menu-button span {

    transform: rotate(180deg);

}





/* =========================================================

   ÉVSZAKOK MENÜ

========================================================= */



.season-menu {

    position: relative;

    display: flex;

    align-items: center;

}





/* ÉVSZAKOK FŐ LINK */



.desktop-nav .season-menu-link {

    display: flex;

    align-items: center;

    gap: 5px;



    padding: 12px 0;



    color: inherit;

    white-space: nowrap;

}



.season-menu-link span {

    font-size: 10px;

    transition: transform .2s ease;

}



.season-menu:hover .season-menu-link span {

    transform: rotate(180deg);

}





/* LENYÍLÓ MENÜ */



.season-dropdown {

    position: absolute !important;



    top: 100% !important;

    left: 50% !important;



    width: 150px;



    padding: 7px;



    background: #071d15;



    border: 1px solid rgba(239, 198, 117, .25);

    border-radius: 8px;



    box-shadow: 0 15px 35px rgba(0,0,0,.35);



    opacity: 0;

    visibility: hidden;

    pointer-events: none;



    transform: translateX(-50%) translateY(5px);



    z-index: 10000;



    transition:

        opacity .2s ease,

        transform .2s ease,

        visibility .2s ease;

}





/* MEGJELENÍTÉS */



.season-menu:hover .season-dropdown,

.season-menu:focus-within .season-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;



    transform: translateX(-50%) translateY(0);

}





/* LENYÍLÓ LINKEK */



.desktop-nav .season-dropdown a {

    display: block;



    width: 100%;



    padding: 9px 12px;

    margin: 0;



    color: #fff;



    font-size: 13px;



    white-space: nowrap;



    border-radius: 5px;

}





/* FONTOS:

   kikapcsoljuk a főmenü aktív aláhúzását a dropdownban */



.desktop-nav .season-dropdown a::after {

    display: none;

}





.desktop-nav .season-dropdown a:hover {

    color: var(--gold-light);

    background: rgba(239,198,117,.10);

}





/* AKTUÁLIS ÉVSZAK */



.desktop-nav .season-dropdown a.current-season {

    color: var(--gold-light);

}



.desktop-nav .season-dropdown a.current-season::before {

    content: "•";

    margin-right: 7px;

}



/* =========================================================

   RELAX WELLNESS APARTMAN

   KÖZÖS LOGÓ + FOOTER

========================================================= */





/* =========================================================

   FEJLÉC LOGÓ

========================================================= */



.brand-logo {

    display: flex;

    align-items: center;



    width: 270px;



    text-decoration: none;

}



.brand-logo img {

    display: block;



    width: 100%;

    height: auto;



    max-height: 82px;



    object-fit: contain;

    object-position: left center;

}


/* =========================================================
   KÖZÖS LOGÓ - RESZPONZÍV MÉRETEK
========================================================= */

@media (max-width: 1100px) {
    .brand-logo { width: 220px; }
}

@media (max-width: 800px) {
    .brand-logo { width: 190px; }
}

@media (max-width: 480px) {
    .brand-logo { width: 165px; }
}

/* =========================================================
   FOOTER - EGYSÉGES VÉGLEGES VERZIÓ
========================================================= */

.site-footer {
    padding: 48px 6% 20px;
    background: #082b24;
    color: rgba(255, 255, 255, .72);
}

.footer-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.35fr .9fr .9fr;
    gap: 52px;
    align-items: start;
}

.footer-brand {
    max-width: 330px;
}

.footer-logo {
    display: block;
    width: 235px;
    max-width: 100%;
    margin-bottom: 16px;
}

.footer-logo img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

.footer-brand p {
    margin: 0;
    max-width: 290px;
    color: rgba(255, 255, 255, .62);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.45;
}

.footer-contact h3,
.footer-social h3 {
    position: relative;
    margin: 5px 0 24px;
    padding-bottom: 11px;
    color: var(--gold);
    font-family: "Inter", Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.footer-contact h3::after,
.footer-social h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 1px;
    background: rgba(223, 173, 85, .7);
}

.footer-contact p {
    margin: 0 0 15px;
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    line-height: 1.7;
}

.footer-contact a {
    display: block;
    width: fit-content;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
}

.footer-contact a:hover,
.social-link:hover,
.footer-legal a:hover {
    color: var(--gold-light);
}

.social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    text-decoration: none;
}

.social-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    color: var(--gold);
    font-family: Arial, sans-serif;
    font-size: 0;
}

/* Facebook – egyszerű, megszokott f ikon */
.social-link:first-child .social-icon::before {
    content: "f";
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

/* Instagram – klasszikus kamera ikon CSS-ből */
.social-link:nth-child(2) .social-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    border: 2px solid var(--gold);
    border-radius: 5px;
    box-sizing: border-box;
}

.social-link:nth-child(2) .social-icon::before {
    content: "";
    width: 6px;
    height: 6px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    box-sizing: border-box;
}

.social-link:nth-child(2) .social-icon::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 3px;
    height: 3px;
    background: var(--gold);
    border-radius: 50%;
}

.footer-bottom {
    width: min(1100px, 100%);
    margin: 32px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.footer-legal a {
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
    line-height: 1.5;
    text-decoration: none;
}

.footer-copyright {
    margin: 0;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .50);
    font-size: 10px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .site-footer {
        padding: 52px 6% 22px;
    }

    .footer-inner {
        grid-template-columns: 1.25fr 1fr 1fr;
        gap: 35px;
    }

    .footer-logo {
        width: 220px;
    }

    .footer-bottom {
        margin-top: 38px;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding: 34px 20px 18px;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        column-gap: 26px;
        row-gap: 26px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: none;
        text-align: center;
    }

    .footer-logo {
        width: 200px;
        margin: 0 auto 11px;
    }

    .footer-brand p {
        max-width: none;
        font-size: 15px;
        line-height: 1.4;
    }

    .footer-contact,
    .footer-social {
        min-width: 0;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .footer-contact {
        justify-self: center;
    }

    .footer-social {
        justify-self: center;
    }

    .footer-contact h3,
    .footer-social h3 {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact h3::after,
    .footer-social h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-contact a {
        margin-left: auto;
        margin-right: auto;
    }

    .social-links {
        align-items: flex-start;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact h3,
    .footer-social h3 {
        margin: 0 0 18px;
        padding-bottom: 9px;
        font-size: 9px;
        letter-spacing: .16em;
    }

    .footer-contact p {
        margin-bottom: 11px;
        font-size: 10px;
        line-height: 1.65;
    }

    .footer-contact a {
        max-width: 100%;
        margin-bottom: 6px;
        font-size: 9.5px;
        overflow-wrap: anywhere;
    }

    .social-links {
        gap: 10px;
    }

    .social-link {
        gap: 8px;
        font-size: 10px;
    }


    .footer-bottom {
        margin-top: 25px;
        padding-top: 15px;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .footer-legal {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }

    .footer-legal a {
        font-size: 9px;
        text-align: center;
    }

    .footer-copyright {
        width: 100%;
        font-size: 9px;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .site-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .footer-inner {
        column-gap: 18px;
    }

    .footer-logo {
        width: 195px;
    }

    .footer-legal {
        gap: 9px 10px;
    }
}


/* MOBIL FOOTER - OSZLOPOK PONTOS KÖZÉPRE IGAZÍTÁSA */
@media (max-width: 600px) {
    .footer-contact,
    .footer-social {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-self: stretch;
        text-align: center;
    }

    .footer-contact h3,
    .footer-social h3 {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .footer-contact h3::after,
    .footer-social h3::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-contact p {
        width: 100%;
        text-align: center;
    }

    .footer-contact a {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    .social-links {
        width: auto;
        margin-left: auto;
        margin-right: auto;
        align-items: flex-start;
    }
}

.booking-section h2 {
    line-height: 1.08;
}

/* =========================================================
   ALOLDAL HERO – KÖZÖS SZÖVEGEK + MOTTÓ
========================================================= */

.hero-subtitle {
    margin: 12px 0 20px;

    color: #fff;

    font-family: "Inter", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;

    letter-spacing: .12em;
    line-height: 1.4;

    text-transform: uppercase;
}


.hero-description {
    max-width: 430px;

    margin: 0;
    padding-left: 18px;

    border-left: 2px solid rgba(223, 173, 85, .8);

    color: rgba(255, 255, 255, .92);

    font-family: "Inter", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;

    line-height: 1.5;
}


/* JOBB OLDALI MOTTÓ */

.page-hero-motto {
    position: absolute;

    z-index: 3;

    right: 8%;
    bottom: 72px;

    max-width: 300px;

    color: rgba(255, 255, 255, .9);

    font-family: "Segoe Print",
                 "Bradley Hand",
                 "Comic Sans MS",
                 cursive;

    font-size: clamp(27px, 2.5vw, 42px);
    font-weight: 400;

    line-height: 1.22;

    text-align: center;

    transform: rotate(-5deg);

    pointer-events: none;
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 768px) {

    .page-hero-motto {
        display: none;
    }

    .hero-subtitle {
        margin: 9px 0 14px;

        font-size: 11px;

        letter-spacing: .1em;
    }

    .hero-description {
        max-width: 310px;

        padding-left: 13px;

        font-size: 13px;

        line-height: 1.45;
    }

}

/* =========================================================
   FOOTER – DESKTOP FINOMHANGOLÁS
========================================================= */

@media (min-width: 769px) {

    .site-footer {
        background: #082f28;
    }

    .footer-main {
        width: min(1050px, calc(100% - 100px));
        margin: 0 auto;

        display: grid;
        grid-template-columns: 1.25fr 1fr .75fr;
        align-items: start;

        gap: 80px;

        padding: 58px 0 50px;
    }

    .footer-brand,
    .footer-contact,
    .footer-social {
        margin: 0;
    }

    .footer-brand {
        text-align: left;
    }

    .footer-contact {
        text-align: left;
    }

    .footer-social {
        text-align: left;
    }

    .footer-social-links {
        justify-content: flex-start;
    }

    .footer-bottom {
        width: min(1050px, calc(100% - 100px));
        margin: 0 auto;

        padding: 20px 0 24px;
    }
}


/* =========================================================
   FŐOLDAL – MOBIL FINOMHANGOLÁS
   2026-10-03
========================================================= */

@media (max-width: 800px) {

    /* HERO: egy kis levegő a főcím, alcím és leírás között */
    .home-page .hero-subtitle {
        margin-top: 24px;
        margin-bottom: 18px;
    }

    .home-page .hero-description {
        line-height: 1.55;
    }

    /* INTRO: kevésbé domináns cím mobilon */
    .home-page .intro-section h2 {
        font-size: 34px;
        line-height: 1.03;
        letter-spacing: -1.2px;
    }

    /* A KUCKÓ: az alsó információk olvashatóbbak */
    .home-page .house-details span {
        font-size: 12px;
        line-height: 1.2;
    }

    .home-page .house-details small {
        font-size: 10px;
        line-height: 1.25;
    }
}

/* =========================================================
   ÚJ EGYSÉGES IKONRENDSZER
========================================================= */


/* ---------- HERO ---------- */

.hero-features .feature-icon-img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin: 0 auto 7px;
}


/* ---------- WELLNESS ---------- */

.wellness-icons .wellness-icon-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wellness-icons .wellness-icon-item img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex: 0 0 38px;
}

.wellness-icons .wellness-icon-item span {
    display: block;
}

.wellness-icons .wellness-icon-item small {
    display: block;
}


/* ---------- A KUCKÓ ---------- */

.house-details .house-detail-item img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin: 0 auto 7px;
}

.house-details .house-detail-item span {
    display: block;
}

.house-details .house-detail-item small {
    display: block;
}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 800px) {

    /* HERO */

    .hero-features .feature-icon-img {
        width: 45px;
        height: 45px;
        margin-bottom: 5px;
    }


    /* WELLNESS */

    .wellness-icons .wellness-icon-item {
        gap: 8px;
    }

    .wellness-icons .wellness-icon-item img {
        width: 45px;
        height: 45px;
        flex-basis: 31px;
    }


    /* A KUCKÓ */

    .house-details .house-detail-item img {
        width: 45px;
        height: 45px;
        margin-bottom: 6px;
    }

}

/* =========================================================
   HERO – CTA TÉRKÖZ
========================================================= */

/* DESKTOP */
@media (min-width: 801px) {

    .hero-content .primary-button {
        margin-top: 50px;
    }

    .hero-content .hero-location {
        margin-top: 24px;
    }

}


/* MOBIL */
@media (max-width: 800px) {

    .hero-content .primary-button {
        margin-top: 40px;
    }

    .hero-content .hero-location {
        margin-top: 22px;
    }

}

/* HERO – KATTINTHATÓ HELYSZÍN */

.hero-location {
    display: flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.hero-location-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #e5b456;
}

.hero-location-arrow {
    margin-left: 3px;
    transition: transform .2s ease;
}

.hero-location:hover {
    color: #e5b456;
}

.hero-location:hover .hero-location-arrow {
    transform: translateX(4px);
}

/* FŐOLDAL – OPTIMALIZÁLT MOBIL HERO */

@media (max-width: 800px) {
    .home-page .hero {
        background-image:
            linear-gradient(
                90deg,
                rgba(0,0,0,.80) 0%,
                rgba(0,0,0,.52) 25%,
                rgba(0,0,0,.12) 58%,
                rgba(0,0,0,.20) 100%
            ),
            linear-gradient(
                0deg,
                rgba(0,0,0,.65) 0%,
                transparent 30%
            ),
            url("../images/relax-wellness-apartman-osz-hero-mobile.webp");

        background-size: cover;
        background-position: 60% center;
    }
}

/* =========================================================
   VALÓDI TÉPETT PAPÍR SZEGÉLY – a megadott mintából kivágva
   A képet helyezd az images/tepett-papir-szegely.png útvonalra.
   ========================================================= */
.hero,
.page-hero,
.gallery-hero,
.contact-hero,
.trips-hero {
    position: relative;
    isolation: isolate;
}

.hero::before,
.page-hero::before,
.gallery-hero::before,
.contact-hero::before,
.trips-hero::before {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 65px;
    background: url("../images/tepett-papir-desktop.png") no-repeat center bottom;
    background-size: 100% 100%;
    pointer-events: none;
}

@media (max-width: 800px) {
    .hero::before,
    .page-hero::before,
    .gallery-hero::before,
    .contact-hero::before,
    .trips-hero::before {
        height: 48px;
        background-image: url("../images/tepett-papir-szegely.png");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 100% 100%;
    }
}

/* MOBILMENÜ – KOMPAKTABB KIALAKÍTÁS */

@media (max-width: 800px) {

    .mobile-nav {
        padding: 95px 25px 25px;
        gap: 8px;
        font-size: 27px;

        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav a {
        padding: 8px 0 10px;
        line-height: 1.1;
    }

    .mobile-nav .mobile-season-title {
        font-size: 21px;
        line-height: 1.2;
        margin-top: 6px;
    }

    .mobile-nav .mobile-booking {
        margin-top: 6px;
    }
}