/* =========================================================================
   Görömbei Tímea pszichológus – stíluslap
   2026.10.10. – 1. lépés: hibajavítás, akadálymentesség, jogi oldalak.
   A színvilág és az elrendezés szándékosan változatlan.

   Színek
     #3a6f66  fő zöld (címek, gombok)        #2f5c54  zöld, rámutatáskor
     #f8faf9  oldal háttere                   #eef3f2  űrlap / térkép háttere
     #2f3e3a  lábléc                          #333333  szövegszín
   ========================================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
/* A ragadós fejléc ne takarja ki a horgonyra ugró címsort.
   A --header-h értékét a js/main.js méri a fejléc tényleges magasságából. */
scroll-padding-top:max(0px, calc(var(--header-h, 56px) + 16px - 70px));
}

body{
font-family: Arial, Helvetica, sans-serif;
line-height:1.6;
color:#333333;
background:#f8faf9;
}

img{
max-width:100%;
height:auto;
display:block;
}

.container{
width:90%;
max-width:1100px;
margin:auto;
}

/* ---------- Akadálymentesség ---------- */

/* Csak képernyőolvasónak látható szöveg */
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}

/* „Ugrás a tartalomra" – csak billentyűzetes fókuszra jelenik meg */
.skip-link{
position:absolute;
left:16px;
top:-60px;
z-index:2000;
background:#3a6f66;
color:#ffffff;
padding:10px 18px;
border-radius:6px;
font-weight:600;
text-decoration:none;
transition:top 0.2s ease;
}

.skip-link:focus{
top:12px;
}

/* Látható fókuszkeret billentyűzetes navigációhoz (egérkattintásnál nem jelenik meg) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible{
outline:3px solid #3a6f66;
outline-offset:3px;
}

/* ---------- Fejléc ---------- */

header{
background:white;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
position:sticky;
top:0;
z-index: 1000;
}

.logo{
font-size:25px;
font-weight: 600;
color:#3a6f66;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 10px;

    margin: 0;
    padding: 0;
}

nav a {
    display: inline-block;

    text-decoration: none;
    color:#333333;
    font-weight: 600;

    padding: 4px 10px;
    border-radius: 6px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

nav a:hover {
    background: #3a6f66;
    color: white;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(58,111,102,0.22);
}

nav a:active {
    background: #355f5a;

    transform: scale(0.98);

    box-shadow:
        0 2px 6px rgba(0,0,0,0.15);
}

/* ---------- Nyitókép ---------- */

.hero {
    background-color:#3d3a36;
    background-image:
        linear-gradient(
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.45)
        ),
        url('img/photo_2.jpg');
    /* Modern böngészők a kisebb WebP-t töltik le */
    background-image:
        linear-gradient(
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.45)
        ),
        image-set(
            url('img/photo_2.webp') type('image/webp'),
            url('img/photo_2.jpg') type('image/jpeg')
        );

    background-size: cover;

    background-position: center 20%;

    background-repeat: no-repeat;

    color: white;
    text-align: center;

    padding: 140px 20px;

    min-height: 80vh;
}

.hero h1{
font-size:44px;
margin-bottom:15px;
}

.hero p{
font-size:18px;
margin-bottom:25px;
}

/* Az eredeti oldalon három <br> adta a szöveg és a gomb közti térközt
   (két üres sor); ugyanez a távolság most margóval: 2 × 1,6em + 25 px. */
.hero p.hero-lead{
margin-bottom:calc(2 * 1.6em + 25px);
}

.btn {
    display: inline-block;

    background: #3a6f66;
    color: white;

    padding: 14px 28px;

    border: none;
    border-radius: 6px;

    text-decoration: none;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease,
        opacity 0.2s ease;
}

.btn:hover {
    background: #2f5c54;

    transform: translateY(-2px);

    opacity: 0.98;

    box-shadow:
        0 8px 22px rgba(58,111,102,0.28);
}

.btn:active {
    transform: scale(0.98);

    box-shadow:
        0 3px 10px rgba(0,0,0,0.18);
}

section{
padding:70px 0;
}

h2{
text-align:center;
margin-bottom:40px;
color:#3a6f66;
}

/* ---------- Rólam ---------- */

.about{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.about-text p + p{
margin-top:25.6px; /* az eredeti <br><br> térköze: 1 üres sor */
}

.about-photo img{
width:100%;
border-radius:10px;
/* Az eredeti oldalon a kép soron belüli elem volt (alatta 4 px ráhagyással);
   így a kép függőleges helyzete pontosan ugyanaz marad. */
display:inline-block;
vertical-align:baseline;
}

/* ---------- Szolgáltatások ---------- */

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
    box-shadow: 0 2px 2px;
}

.card h3{
margin-bottom:10px;
color:#3a6f66;
}

.more-box {
    margin-top: 25px;
}

.more-box summary {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    background: #3a6f66;
    color: white;

    padding: 12px 24px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

    user-select: none;

    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;

    list-style: none;
}

/* Safari / Chrome alap nyíl eltüntetése */
.more-box summary::-webkit-details-marker {
    display: none;
}

.more-box summary:hover {
    background: #2f5c54;

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(58,111,102,0.28);
}

.more-box .icon {
    position: relative;

    width: 14px;
    height: 14px;
}

.more-box .icon::before,
.more-box .icon::after {
    content: "";

    position: absolute;

    background: white;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    transition: transform 0.3s ease,
                opacity 0.3s ease;
}

.more-box .icon::before {
    width: 14px;
    height: 2px;
}

.more-box .icon::after {
    width: 2px;
    height: 14px;
}

.more-box[open] .icon::after {
    opacity: 0;
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.more-box .content {
    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transform: translateY(-10px);

    transition:
        max-height 0.5s ease,
        opacity 0.4s ease,
        transform 0.4s ease;

    margin-top: 0;
}

.more-box[open] .content {
    max-height: 1000px;

    opacity: 1;

    transform: translateY(0);

    margin-top: 20px;
}

.more-box ul {
    list-style: none;
    padding-left: 0;
}

.more-box li {
    position: relative;

    padding-left: 28px;

    margin-bottom: 14px;

    line-height: 1.7;

    color: #333333;
}

.more-box li::before {
    content: "•";

    position: absolute;

    left: 0;
    top: 0;

    color: #3a6f66;

    font-size: 1.2rem;

    font-weight: bold;
}

/* ---------- Üzenet (űrlap) ---------- */

.booking{
background:#eef3f2;
padding:40px;
border-radius:10px;
max-width:600px;
margin:auto;
}

input, textarea{
width:100%;
padding:12px;
margin-top:10px;
margin-bottom:15px;
border:1px solid #ccc;
border-radius:6px;
}

/* Hozzájáruló jelölőnégyzet */
.consent{
display:flex;
align-items:flex-start;
gap:10px;
margin:0 0 18px;
font-size:14px;
line-height:1.5;
color:#555555;
}

.consent input{
width:18px;
height:18px;
flex:0 0 18px;
margin:2px 0 0;
padding:0;
accent-color:#3a6f66;
}

.consent a{
color:#3a6f66;
}

/* Spamcsapda: emberi látogató nem látja, robotok kitöltik */
.hp-field{
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden;
}

button {
    background: #3a6f66;
    color: white;

    border: none;
    border-radius: 6px;

    padding: 12px 25px;

    cursor: pointer;

    font-weight: 600;

    transition:
        background 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease,
        opacity 0.2s ease;
}

button:not(:disabled):hover {
    background: #2f5c54;

    transform: translateY(-2px);

    opacity: 0.98;

    box-shadow:
        0 8px 22px rgba(58,111,102,0.28);
}

button:active {
    transform: scale(0.98);

    box-shadow:
        0 3px 10px rgba(0,0,0,0.18);
}

button:disabled {
    background: #cccccc;
    color: #666666;

    cursor: not-allowed;

    opacity: 0.7;

    box-shadow: none;
    transform: none;
}

#msg{
margin-top:12px;
}

/* ---------- Lábléc ---------- */

footer{
background:#2f3e3a;
color:white;
text-align:center;
padding:25px;
margin-top:40px;
}

.footer-links{
margin-top:6px;
font-size:14px;
}

.footer-links a{
color:#d6e4e0;
text-decoration:none;
}

.footer-links a:hover{
color:#ffffff;
text-decoration:underline;
}

.footer-links span{
margin:0 8px;
color:#8fa9a2;
}

@media(max-width:768px){

.about{
grid-template-columns:1fr;
}

.hero h1{
font-size:32px;
}

}

ul {
    padding-left: 20px;
    line-height: 1.3;
    color: #333333;
}

ul li {
    margin-bottom: 10px;
}

/* ---------- Visszajelzések ---------- */

.testimonials {
    padding: 70px 0;

    background:
        linear-gradient(
            rgba(255,255,255,0.96),
            rgba(255,255,255,0.96)
        );
}

.testimonials h2 {
    text-align: center;

    color: #3a6f66;

    margin-bottom: 40px;
}

.testimonial-slider {
    overflow: hidden;

    position: relative;
}

/* A három visszajelzés mozdulatlanul, egymás mellett áll; keskeny képernyőn egymás alá kerül
   (2. lépés, Tímea döntése: a gördülés megszűnt). */
.testimonial-track {
    display: flex;

    gap: 30px;

    flex-wrap: wrap;

    justify-content: center;
}

.testimonial-card {

    margin: 0; /* <figure> alapértelmezett margójának nullázása */

    width: 320px;

    flex-shrink: 0;

    background: white;

    padding: 35px 30px;

    border-radius: 14px;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.12);
}

.testimonial-card blockquote{
margin:0;
}

.testimonial-card p {
    /* Az eredeti oldalon itt a „Myriad" betűtípus volt megadva, de az
       sosem töltődött be. A 2. lépésben Lora váltja (lásd a fájl végén). */
    font-family: serif;
    font-style: italic;

    color: #333333;

    line-height: 1.8;

    margin-bottom: 25px;
}

.testimonial-card cite {
    font-style: normal;

    color: #3a6f66;

    font-weight: 600;
}

.testimonials .section-lead {
    font-size: 1.05rem;

    color: #666;

    text-align: center;

    max-width: 650px;

    margin: 10px auto 50px auto;

    line-height: 1.8;

    font-weight: 300;

    letter-spacing: 0.2px;
}

/* A kártyákon belüli bekezdés az eredeti oldalon a .testimonials p szabályt
   is megkapta – ugyanezt adjuk meg itt, hogy a kinézet ne változzon. */
.testimonials .testimonial-card p {
    font-size: 1.05rem;

    color: #666;

    text-align: center;

    max-width: 650px;

    margin: 10px auto 50px auto;

    line-height: 1.8;

    font-weight: 300;

    letter-spacing: 0.2px;
}

/* ---------- Kapcsolat ---------- */

.contact-info {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    justify-content: center;

    margin-top: 40px;
}

.contact-item {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    background: white;

    padding: 1% 3%;

    border-radius: 12px;

    min-width: 260px;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.25s ease;
}

.contact-item .icon {
    font-size: 1.2rem;

    color: #3a6f66;

    margin-top: 2px;
}

.contact-text {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.contact-text strong {
    color: #333333;

    font-size: 0.95rem;

    font-weight: 600;
}

.contact-text a,
.contact-text span {
    color: #666666;

    text-decoration: none;

    line-height: 1.6;
}

/* A telefonszám és az e-mail most már kattintható – külsőre ugyanaz marad */
.contact-text a:hover{
color:#3a6f66;
text-decoration:underline;
}

/* ---------- Térkép (csak kattintásra töltődik be a Google-tól) ---------- */

.map{
margin-top:0;
}

.map iframe{
display:block;
border:0;
width:100%;
height:300px;
}

.map-consent{
height:300px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:14px;
padding:24px;
text-align:center;
background:#eef3f2;
border-radius:10px;
color:#555555;
font-size:15px;
}

.map-consent p{
max-width:520px;
}

.map-consent a{
color:#3a6f66;
}

/* ---------- Jogi oldalak (adatvédelem, impresszum, 404) ---------- */

.legal{
padding:60px 0 40px;
}

.legal .container{
max-width:820px;
}

.legal h1{
color:#3a6f66;
font-size:32px;
line-height:1.25;
margin-bottom:8px;
}

.legal .legal-meta{
color:#666666;
font-size:14px;
margin-bottom:36px;
}

.legal h2{
text-align:left;
font-size:21px;
margin:38px 0 12px;
}

.legal h3{
color:#333333;
font-size:17px;
margin:24px 0 8px;
}

.legal p,
.legal li{
margin-bottom:10px;
}

.legal ul{
padding-left:22px;
line-height:1.6;
margin-bottom:12px;
}

.legal ul li{
margin-bottom:6px;
}

.legal a{
color:#3a6f66;
}

/* A gombként formázott link szövege maradjon fehér (a fenti szabály felülírná) */
.legal a.btn{
color:#ffffff;
}

.legal dl{
display:grid;
grid-template-columns:minmax(150px, 230px) 1fr;
gap:8px 20px;
background:white;
padding:22px 26px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.06);
margin:12px 0 18px;
}

.legal dt{
font-weight:600;
color:#333333;
}

.legal dd{
margin:0;
color:#444444;
}

.legal .table-wrap{
overflow-x:auto;
margin:12px 0 18px;
}

.legal table{
width:100%;
border-collapse:collapse;
background:white;
font-size:15px;
}

.legal th,
.legal td{
text-align:left;
vertical-align:top;
padding:10px 12px;
border-bottom:1px solid #e3e9e7;
}

.legal th{
background:#eef3f2;
color:#2f5c54;
}

.legal .back{
display:inline-block;
margin-top:30px;
}

/* Közzététel előtt pótolandó adat – feltűnően jelölve, hogy ne maradhasson benne */
.todo{
background:#fff3b0;
outline:2px dashed #c79a00;
padding:0 4px;
font-weight:600;
}

@media (max-width: 600px){
.legal dl{
grid-template-columns:1fr;
gap:2px;
}
.legal dd{
margin-bottom:10px;
}
}

/* ---------- Mobil fejléc ---------- */

@media (max-width: 768px) {

    .hero {
        background-position: center top;
		background-attachment: scroll;
    }

    header nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    header nav ul {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        gap: 6px 8px;

        width: auto;
        max-width: 100%;

        margin: 0 auto;

        padding: 0;

        list-style: none;
    }

    header nav ul li {
        flex: 0 0 auto;
    }

    header nav a {
        display: inline-block;

        font-size: 13px;

        padding: 5px 9px;

        white-space: nowrap;

        border-radius: 6px;
    }

    .logo {
        font-size: 20px;
    }
}

/* ---------- Csökkentett mozgás ---------- */

/* Aki az operációs rendszerében kikapcsolta az animációkat (pl. szédülés
   miatt), annak a visszajelzések nem gördülnek, és nincs ugráló hover-hatás. */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }

    *,
    *::before,
    *::after{
        transition-duration:0.01ms !important;
    }

    .btn:hover,
    nav a:hover,
    button:not(:disabled):hover,
    .more-box summary:hover,
    .testimonial-card:hover{
        transform:none;
    }
}


/* ===================== 2. lépés (Tímea jóváhagyásával, 2026.10.) ===================== */

/* Visszajelzések betűtípusa: Lora (SIL OFL, saját tárhelyről) */
@font-face{
font-family:'Lora';
font-style:italic;
font-weight:400;
font-display:swap;
src:url('font/lora-latin-400-italic.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Lora';
font-style:italic;
font-weight:400;
font-display:swap;
src:url('font/lora-latin-ext-400-italic.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
.testimonials .testimonial-card p{
font-family:'Lora', Georgia, serif;
}



/* Mobilmenü (hamburger) */
.nav-toggle{display:none;}

@media (max-width:768px){

    header nav{
        flex-direction:row;
        justify-content:space-between;
        position:relative;
    }

    .nav-toggle{
        display:inline-flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:44px;
        height:44px;
        padding:0 10px;
        background:none;
        border-radius:8px;
    }
    .nav-toggle:not(:disabled):hover{
        background:#eef3f2;
        transform:none;
        box-shadow:none;
    }
    .nav-toggle span{
        display:block;
        height:2px;
        background:#3a6f66;
        border-radius:2px;
        transition:transform 0.25s ease, opacity 0.2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

    header nav ul{
        display:none;
        position:fixed;
        top:var(--header-h, 64px);
        left:0;
        right:0;
        width:auto;
        max-width:none;
        margin:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:white;
        box-shadow:0 10px 18px rgba(0,0,0,0.10);
        padding:6px 0 12px;
    }
    header nav ul.open{display:flex;}
    header nav ul li a{
        display:block;
        font-size:15px;
        padding:12px 7%;
        border-radius:0;
    }
    header nav ul li a:hover{transform:none;box-shadow:none;}
}


/* =========================================================================
   MODERNIZÁLÁS (Tímea jóváhagyásával, 2026.10.10.)
   A tartalom és a színvilág változatlan; csak megjelenés és használhatóság.
   A pontok számozása megegyezik a Tímeának szóló döntési anyagéval:
     1 betűtípus és tipográfia      5 űrlap: látható címkék, hibaüzenetek
     2 „Rólam”: a portré a helyén   6 menü: aktuális rész kiemelése
     3 szolgáltatás-kártyák         7 telefonon alsó gyorsgombsáv
     4 kapcsolati kártyák, ikonok   8 „Vissza a tetejére” gomb
   Új szín csak egy van: a hibaüzenetek visszafogott, földes vöröse (#a63d32).
   ========================================================================= */

/* ---------- 1. Betűtípus: Source Sans 3 (SIL OFL, saját tárhelyről) ---------- */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/source-sans-3-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('font/source-sans-3-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/source-sans-3-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('font/source-sans-3-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url('font/source-sans-3-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url('font/source-sans-3-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

body{
  font-family:'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size:1.0625rem;          /* 17 px – a Source Sans kisebb betűképű, mint az Arial */
  line-height:1.65;
}
button, input, textarea{ font-family:inherit; }

.hero h1{ font-size:clamp(2rem, 1.35rem + 2.6vw, 2.9rem); line-height:1.2; font-weight:700; }
.hero p{ font-size:clamp(1.0625rem, 1rem + .4vw, 1.25rem); }
h2{ font-size:clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem); line-height:1.25; font-weight:700; letter-spacing:.005em; }
.card h3{ font-size:1.25rem; line-height:1.3; }
.logo{ font-weight:700; letter-spacing:.01em; }
nav ul a{ letter-spacing:.03em; font-size:.95rem; }

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

/* ---------- 2. „Rólam”: számítógépen a portré a helyén marad olvasás közben ---------- */
.about-text p + p{ margin-top:1em; }
@media (min-width:769px){
  .about{ align-items:start; }
  .about-photo{
    position:sticky;
    top:calc(var(--header-h, 68px) + 28px);
  }
  .about-photo img{
    display:block;
    box-shadow:0 18px 40px rgba(47,62,58,.14);
    /* alacsony képernyőn is teljesen látsszon, amíg „ragad” */
    width:auto;
    max-width:100%;
    max-height:calc(100vh - var(--header-h, 68px) - 56px);
    margin:0 auto;
  }
}

/* ---------- 3. Szolgáltatás-kártyák ---------- */
.card{
  display:flex;
  flex-direction:column;
  border:1px solid #e3ece9;
  box-shadow:0 4px 16px rgba(47,62,58,.06);
}
.card:hover{ box-shadow:0 12px 30px rgba(58,111,102,.14); }
.card .more-box{ margin-top:auto; padding-top:22px; }   /* a gombok egy vonalba kerülnek */

.more-box summary{
  background:transparent;
  color:#3a6f66;
  border:1.5px solid #3a6f66;
  border-radius:999px;
  padding:8px 18px 8px 20px;
  gap:8px;
  font-size:.9rem;
  letter-spacing:.06em;
}
.more-box summary:hover{
  background:#eef3f2;
  color:#2f5c54;
  box-shadow:none;
  transform:none;
}
.more-box .chev{ transition:transform .25s ease; }
.more-box[open] .chev{ transform:rotate(180deg); }

.more-box .content{
  max-height:none;
  opacity:1;
  transform:none;
  overflow:visible;
  margin-top:18px;
}
.more-box[open] .content{ margin-top:18px; animation:moreIn .35s ease both; }
.more-box .content p + ul,
.more-box .content ul + p{ margin-top:14px; }
@keyframes moreIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ---------- 4. Kapcsolati kártyák: egységes ikonok, az egész kártya kattintható ---------- */
.contact-info{ gap:18px; }
a.contact-item{
  align-items:center;
  padding:18px 24px;
  color:inherit;
  text-decoration:none;
  border:1px solid #e3ece9;
  min-width:280px;
}
a.contact-item:hover{
  transform:translateY(-2px);
  border-color:#c9d8d4;
  box-shadow:0 12px 26px rgba(58,111,102,.14);
}
a.contact-item .icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  padding:10px;
  border-radius:50%;
  background:#eef3f2;
  color:#3a6f66;
  margin:0;
}
a.contact-item .contact-text strong{ font-size:.8rem; letter-spacing:.08em; color:#5f6b68; }
a.contact-item .contact-text span{ color:#2f3e3a; font-size:1.02rem; font-weight:600; }
a.contact-item:hover .contact-text span{ color:#3a6f66; }
.map{ margin-top:28px; }
@media (max-width:600px){
  a.contact-item{ width:100%; min-width:0; padding:16px 18px; }
  a.contact-item .contact-text{ min-width:0; }
  a.contact-item .contact-text span{ overflow-wrap:anywhere; }
}

/* ---------- 5. Űrlap: látható címkék, hibaüzenet a mező alatt ---------- */
.field{ margin-bottom:16px; }
.field label{
  display:block;
  font-weight:600;
  font-size:.95rem;
  color:#2f3e3a;
  margin-bottom:6px;
}
.booking input[type=text],
.booking input[type=email],
.booking textarea{
  margin:0;
  padding:12px 14px;
  border:1px solid #c9d5d2;
  border-radius:8px;
  background:#ffffff;
  font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.booking textarea{ resize:vertical; min-height:120px; }
.booking input:focus,
.booking textarea:focus{
  outline:none;
  border-color:#3a6f66;
  box-shadow:0 0 0 3px rgba(58,111,102,.18);
}
.booking [aria-invalid="true"]{ border-color:#a63d32; }
.booking [aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(166,61,50,.15); }
.field-error{
  color:#a63d32;
  font-size:.9rem;
  margin-top:6px;
}
.consent{ margin-bottom:6px; }
.consent-error{ margin:0 0 14px 28px; }
#submit{ margin-top:10px; padding:13px 28px; letter-spacing:.04em; }

/* ---------- 6. Menü: az aktuális rész kiemelése görgetés közben ---------- */
nav ul a.is-active{
  color:#3a6f66;
  box-shadow:inset 0 -2px 0 #3a6f66;
  border-radius:6px 6px 0 0;
}
nav ul a.is-active:hover{ color:#ffffff; box-shadow:0 6px 18px rgba(58,111,102,.22); border-radius:6px; }
@media (max-width:768px){
  header nav ul li a.is-active{ background:#eef3f2; box-shadow:inset 3px 0 0 #3a6f66; border-radius:0; }
}

/* ---------- 7. Telefonon alsó gyorsgombsáv ---------- */
.action-bar{ display:none; }
@media (max-width:768px){
  .action-bar{
    display:flex;
    gap:10px;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:900;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    box-shadow:0 -4px 18px rgba(0,0,0,.08);
  }
  .action-bar a{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
    letter-spacing:.02em;
  }
  .action-bar a:first-child{ color:#3a6f66; border:1.5px solid #3a6f66; background:#ffffff; }
  .action-bar a:last-child{ color:#ffffff; background:#3a6f66; }
  body.has-action-bar{ padding-bottom:74px; }
}

/* ---------- 8. „Vissza a tetejére” gomb ---------- */
.to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:950;
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#3a6f66;
  color:#ffffff;
  box-shadow:0 8px 20px rgba(47,62,58,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:#2f5c54; }
@media (max-width:768px){
  body.has-action-bar .to-top{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce){
  .more-box[open] .content{ animation:none; }
  a.contact-item:hover{ transform:none; }
  .to-top{ transition:none; }
}


/* ---------- Térközök (Tímea kérése, 2026.10.): a részek között 140 px helyett
   asztali gépen 96 px, telefonon 72 px üres hely ---------- */
section,
.testimonials{ padding:48px 0; }
@media (max-width:768px){
  section,
  .testimonials{ padding:36px 0; }
}
/* A nyitókép saját, nagyobb belső margója változatlan marad */
.hero{ padding:140px 20px; }

/* ---------- Csempék: emelkedés helyett csak finom árnyék (nyugodtabb hatás) ---------- */
.testimonial-card:hover{
  transform:none;
  box-shadow:0 6px 24px rgba(58,111,102,.14);
}
a.contact-item:hover{ transform:none; }