:root{
    --page-max-width: 1000px;
    --navbar-height: 90px;
    --navbar-bottom-margin: 30px;


    --card-bg-color: white;
    --body-bg-color: #fdfdfd;

    --ingatlan-kartya-border-radius: 0.5rem;

    --gray-font-color: #575757;
    --primary-font-color: #161616;

    --border-radius: 0.5rem;

    --brand-color: #2b3840;
    --secondary-color: #dddcd0;
}

*{
    box-sizing: border-box;

    font-family: IBM Plex Sans, sans-serif;
}

h1, h2{
    margin: 0;
    height: fit-content;
    /* padding-top: 22px; */
    font-size: 2.67rem;
    font-weight: 400;
    margin-left: 5px;

    letter-spacing: -0.7px;

    word-break: keep-all;
}

html{
    background-color: white;
}


fieldset, a, button{
    all: unset;
}


button, label, a, input[type='button'], input[type='submit']{
    cursor: pointer;
}

sup { vertical-align:text-top; font-size:75%; }
sub { vertical-align:text-bottom; font-size:75%; }

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

html{
    background-color: #526a7a10;
}

body{
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: 100dvh;
}


main, div.main-container{
    max-width: var(--page-max-width);
    margin-inline: auto;


    padding-inline: clamp(5px, 2dvw, 15px);
}

main>h2{
    margin-bottom: 1rem;
}

main{
    margin-top: var(--navbar-bottom-margin);

    /* min-height: calc(100dvh - var(--navbar-bottom-margin) - var(--navbar-height)); */
    flex-grow: 1;
    width: 100%;

}

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


.detail{
    display: flex;
    flex-direction: column;

}

.detail>:first-child{
    color: var(--gray-font-color);

    font-size: 1.1rem;
}

.detail>:last-child{
    font-weight: 700;
    color: var(--primary-font-color);
    
    font-size: 1.35rem;
    /* padding-left: 3px; */
}


footer{
    /* min-height: 200px; */

    margin-top: 50px;

    background-color: white;

    border-top: 1px solid #e4e7e9
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

    inset-block-start: 0;
    inset-inline-start: 0;
    opacity: 0;
}


.navbar{
    width: 100%;
    height: var(--navbar-height);
    background-color: white;
    border-bottom: 1px solid #e4e7e9;
    
    /* padding-top: 20px; */

}


.navbar>.main-container{
    height: 100%;
    position: relative;

    display: flex;

    align-items: center;
    
}

.navbar>.main-container img{
    max-height: var(--navbar-height);
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    margin: unset;
    /* margin-right: 20px; */

    width: fit-content;
}

.navbar>.main-container>img{
    height: 65px;
    width: 65px;
    padding-bottom: 10px;
}

.navbar>.main-container>nav>img{
    display: none;
}

nav{
    display: flex;
    flex-direction: row;
    align-items: center;

    flex-grow: 1;
    justify-content: end;
    height: 100%;

    gap: 15px;
    /* padding-top: 15px; */

}


/* nav>a{
    padding-block: 5px;
    padding-inline: 7px;

    border-radius: 5px;
    border: 1px solid black;

    height: fit-content;

    font-size: 1.5rem;

    cursor: pointer;

    transition: all 50ms;
} */

#navbar-toggle-button{
    display: none;
    /* position: absolute;
    top: 10px;
    left: 10px;  */

}

/* nav a {
    border: 0.125em solid #1A1A1A;
    border-radius: 0.7rem;

    color: var(--primary-font-color);
    display: inline-block;

    font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.2rem;
    

    padding: 0.75rem 1rem;

    text-align: center;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);

    user-select: none;
    -webkit-user-select: none;

    touch-action: manipulation;
    will-change: transform;
}

nav a:hover {
    color: #fff;
    background-color: #1A1A1A;
    box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
    transform: translateY(-2px);
} */

nav a {
    display: inline-block;

    /* border: 0.125em solid #1A1A1A; */
    /* border: 0.125em solid #b7b7b7; */
    border: 0.125em solid #2b384057;

    border-radius: 0.7rem;

    color: var(--primary-font-color);

    font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.2rem;
    

    padding: 0.75rem 1rem;

    text-align: center;
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);

    user-select: none;
    -webkit-user-select: none;

    touch-action: manipulation;
    will-change: transform;
}

nav a:hover {
    /* color: #fff; */
    /* background-color: #1A1A1A; */
    
    /* border: 0.125em solid #6b6b6b; */
    border-color:  var(--brand-color);
    /* box-shadow: rgba(0, 0, 0, 0.25) 0 4px 8px; */
    /* transform: translateY(-1.5px); */
}


a:disabled, button:disabled{
    pointer-events: none;
}

nav a:active {
    box-shadow: none;
    transform: translateY(0);
}

/* =========================================
   LÁBLÉC STÍLUSOK (Add ezt a main.css végére)
=========================================
*/

/* A 'main.css'-ben lévő .main-container-t használjuk újra,
   de kiegészítjük a lábléc-specifikus elrendezéssel. */
.footer-container {
    display: flex;
    flex-wrap: wrap; /* Tördelés kisebb képernyőn */
    justify-content: space-between; /* Bal és jobb oldalra tolja a tartalmat */
    align-items: center; /* Középre igazítás függőlegesen */
    gap: 2rem; /* Térköz a copyright és a nav között */
    
    /* A láblécnek adjunk egy kis belső térközt */
    padding-block: 1.5rem;
}

.footer-copyright {
    color: var(--gray-font-color, #575757);
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-copyright span {
    display: block; /* Egymás alá kerülnek a sorok */
}

/* A lábléc navigációs linkjei */
.footer-nav {
    display: flex;
    flex-wrap: wrap; /* Tördelés, ha sok link van */
    gap: 1.75rem; /* Térköz a linkek között */
}

.footer-nav a {
    all: unset; /* Alapstílusok törlése */
    cursor: pointer;
    
    /* Használjuk a fő navigáció linkjeihez hasonló stílust */
    color: var(--primary-font-color, #161616);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    
    transition: color 200ms ease;
}

.footer-nav a:hover {
    /* A brand szín használata hover esetén */
    color: var(--brand-color, #2b3840);
    text-decoration: underline;
}


/* Reszponzív viselkedés: Mobilon minden egymás alá kerül */
/* @media screen and (max-width: 600px) {
    .footer-container {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 1.5rem;
    }
    
    .footer-copyright,
    .footer-nav {
        text-align: left;
    }
} */

@media screen and (max-width: 850px) {
    #navbar-toggle-button{
        display: block;
        transition: transform 200ms ease-in-out;

        height: fit-content;
    }

    h1{
        font-size: 2rem;
    }


    main{
        margin-top: calc(var(--navbar-bottom-margin) + var(--navbar-height));
    }

    .navbar nav{
        flex-direction: column;

        position: fixed;
        justify-content: start;

        left: 0;
        top: 0;
        bottom: 0;

        width: 250px;

        /* padding-top: 80px; */
        padding-top: calc(var(--navbar-height) - 15px);
        /* background-color: red; */
        background-color: white;

        transform: translateX(-100%);

        transition: transform 200ms ease-in-out;

        /* border-right: 1px solid black; */
        box-shadow: rgba(0, 0, 0, 0.25) 0 2px 20px;
    }

    nav[data-open='1']{
        transform: translateX(0);
    }

    nav[data-open='1']+#navbar-toggle-button{
        color: black;
    }

    div.navbar{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 5;
    }

    .navbar>.main-container>nav>img{
        margin-right: unset;
        margin-bottom: 10px;
        display: block;
    }
    
    .navbar>.main-container>img{
        display: none;
    }

    
}

@media screen and (max-width: 450px) {
    
}

.error{
    color: red;
}