/*-------------------------FONT IMPORT-----------------------*/

@font-face {
    font-family: 'Poppins';
    src: url('/font/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/font/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/font/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('/font/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/font/Inter-VariableFont_opsz\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

:root {
    /*---------------------COLOR--------------------*/
    --white: #fff;
    --brand-500: #6E4164;
    --brand-200: #BEA5B9;
    --brand-100: #faf8fc;
    --brand-secundary-300: #EBC252;
    --brand-secundary-100: #FFE8AA;
    --neutral-100: #F2F4F7;
    --neutral-300: #E2E5F3;
    --neutral-400: #B1B5C6;
    --neutral-800: #444754;


    /*-------FONT STYLE--------------------------------------*/
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Headings */
    --h1-size: 24px;
    --h1-line: 32px;
    --h1-weight: 500;

    --h2-size: 20px;
    --h2-line: 28px;
    --h2-weight: 500;

    --h3-size: 18px;
    --h3-line: 26px;
    --h3-weight: 500;

    --h4-size: 18px;
    --h4-line: 26px;
    --h4-weight: 400;

    /* Body */
    --body-l-size: 18px;
    --body-l-line: 26px;

    --body-m-size: 16px;
    --body-m-line: 24px;

    --body-s-size: 14px;
    --body-s-line: 20px;

    /*------------------------------HEIGHT------------------*/
    --main-header-height: 80px;
    --sub-header-height: 68px;
    --header-stack-height: calc(var(--main-header-height) + var(--sub-header-height));
}

/*------------------------STYLE----------------------------------*/

html,
body {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
    font-weight: 400;
    overflow-x: hidden;
    overflow-y: visible;
}

/* az oldal váza */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* =========================================================
   FŐ TARTALOM – ez fog "megnőni", ha kevés a tartalom
   ========================================================= */

/* minden, ami a footer ELŐTT van */
body>section,
body>header {
    flex-shrink: 0;
}

/* a block-post-listing (fő tartalom) nőhet */
#block-post-listing {
    flex: 1;
}

/* =========================================================
   FOOTER
   ========================================================= */

#main-footer {
    margin-top: auto;
    flex-shrink: 0;
}



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


.bg-violet {
    background: var(--brand-500);
}

.bg-light {
    background: var(--neutral-100);
}

.bg-white {
    background: var(--white);
}

a {
    text-decoration: none;
    color: inherit;
}

.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;
}

ul,
ol {
    list-style: none;
}

ul {
    height: 48px;
    padding: 12px;
    text-align: center;
}

h1 {
    font-family: var(--font-heading);
    font-size: var(--h1-size);
    line-height: var(--h1-line);
    font-weight: var(--h1-weight);
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--h2-size);
    line-height: var(--h2-line);
    font-weight: var(--h2-weight);
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--h3-size);
    line-height: var(--h3-line);
    font-weight: var(--h3-weight);
}

p {
    font-size: var(--body-m-size);
    line-height: var(--body-m-line);
}

.small-text {
    font-size: var(--body-s-size);
    line-height: var(--body-s-line);
}


.menu a {
    font-family: var(--font-body);
    font-size: var(--body-l-size);
    line-height: var(--body-l-line);
    font-weight: 400;
}

.menu a.is-strong {
    font-weight: 500;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.hide {
    display: none;
}


.date {
    color: var(--neutral-400);
}

/* Hivatkozás, link */

.reftext {
    color: var(--brand-500);
    text-decoration: none;
    background-image: linear-gradient(transparent 94%,
            var(--brand-500) 94%);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    transition: color 0.2s ease, background-image 0.2s ease;
}

.reftext:hover {
    color: var(--brand-secundary-300);
    background-image: linear-gradient(transparent 94%,
            var(--brand-secundary-300) 94%);
}

/* Idézet */
.literary-quote {
    margin: 32px 0;
    padding: 24px 24px;
    border-left: 4px solid var(--brand-500);
    background: var(--brand-100);
    font-style: italic;
    border-radius: 4px;
}

.literary-quote p {
    margin: 0 0 12px 0;
    line-height: 1.7;
}

.literary-quote cite {
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--brand-500);
}

/*------------------CONTAINER-------------------------------*/

.container-flex-column-nowrap {
    display: flex;
    flex-flow: column nowrap;
}

#sub-header .container-flex-row-nowrap {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.flex-wrap-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 24px;
}



.container {
    max-width: 1200px;
    margin: auto;
}


.container-first {
    padding-top: 48px;
}


#block-post-listing .container,
#new-post .container,
#top-recepie .container,
#blog .container,
#row-post-recepies .container {
    max-width: 1200px;
}

/*-------------------------BUTTON------------------------------------*/

.main-btn {
    background: var(--brand-500);
    color: var(--white);
    margin: 48px auto 0;
    width: 300px;
    display: block;
    text-align: center;
    padding: 12px 16px;
    transition: all 0.6s ease-in-out;
    border-radius: 4px;
}

.main-btn:hover {
    background: var(--brand-secundary-300);
}

.sub-btn {
    color: var(--brand-500);
    width: 200px;
    margin: 20px auto 10px;
    display: block;
    text-align: center;
    padding: 12px 16px;
    transition: all 0.6s ease-in-out;
}

.sub-btn:hover {
    color: var(--brand-secundary-300);
}


/*----------------------------HEADER--------------------------*/

#main-header {
    position: sticky;
    top: 0;
    z-index: 2100;
    background: #fff;
    --header-height: 80px;
}

#main-header .menu {
    padding: 48px 24px;
    /* ⬅️ megszünteti a 12px-es belső tolást */
}



.logo img {
    width: 250px;
    height: auto;
    display: block;
}


.header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    padding: 8px 24px 8px 16px;
    position: relative;
}

.header-actions {
    display: flex;
    align-items: center;
    /* EZ FONTOS */
    gap: 24px;
}

.header-actions .menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}


.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-right: solid 1px var(--brand-secundary-300);
    border-bottom: solid 1px var(--brand-secundary-300);
    border-radius: 4px;
    height: fit-content;
    padding: 48px 16px;
    /* header alól indul */

    transform: translateX(-100%);
    transition: transform 0.3s ease;

    z-index: 1100;
    /* header + subheader fölött */
}

.menu.is-open {
    transform: translateX(0);
}

.menu li {
    list-style: none;
}

.menu a {
    color: var(--neutral-800);
    text-decoration: none;
}

.menu a:hover {
    color: var(--brand-secundary-300);
}


/* ----------------------------------
   HAMBURGER MENU – EREDETI (JAVÍTVA)
---------------------------------- */

.menu-toggle {
    position: relative;
    /* FONTOS: ne absolute */
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    background: none;
    border: none;
    padding: 0;
    z-index: 100;
    display: flex;
    align-items: center;
}

.menu_btn_burger {
    position: relative;
    /* EZ KELLETT */
    width: 30px;
    height: 2.5px;
    background: var(--neutral-800);
    transition: all .5s ease-in-out;
    left: 0;
}

.menu_btn_burger::before,
.menu_btn_burger::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2.5px;
    background: var(--neutral-800);
    transition: all .5s ease-in-out;
    left: 0;
}

.menu_btn_burger::before {
    transform: translateY(-12px);
}

.menu_btn_burger::after {
    transform: translateY(12px);
}

/* hover */
.menu_btn_burger:hover,
.menu_btn_burger:hover::before,
.menu_btn_burger:hover::after {
    background: var(--brand-secundary-300);
}

/* ----------------------------------
   OPEN ÁLLAPOT – EREDETI ANIMÁCIÓ
---------------------------------- */

.menu-toggle.open {
    transform: translateX(-5px);
}

.menu-toggle.open .menu_btn_burger {
    width: 32px;
}

.menu-toggle.open .menu_btn_burger::before {
    transform: translateY(-6px) translateX(-1px) rotate(-45deg);
    width: 15px;
}

.menu-toggle.open .menu_btn_burger::after {
    transform: translateY(6px) translateX(-1px) rotate(45deg);
    width: 15px;
}


/* ==============================
   SEARCH OVERLAY (MENU-BŐL)
   ============================== */

.menu-search {
    display: none;
}


#main-header .menu a,
.search-toggle {
    display: inline-flex;
    align-items: center;
    line-height: 48px;
}


.search-toggle:hover,
.search-toggle svg:hover {
    color: var(--brand-secundary-300);
}

.search-toggle {
    padding: 12px 16px;
    position: absolute;
    right: 64px;
    /* hamburger bal oldalán */
    top: 50%;
    background: none;
    border: none;
    cursor: pointer;
    transform: translateY(-50%);
    /* ✔ itt OKÉ */
    cursor: pointer;
    color: var(--neutral-800);
}


.search-toggle span {
    display: none;
}


#search-overlay {
    display: none;
    background: var(--white);
    /*margin-top: var(--header-stack-height);*/
    padding-top: var(--main-header-height);
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
    z-index: 1;
}

#search-overlay.active {
    display: block;
}


.menu-search button:hover {
    color: var(--brand-secundary-300);
}

#search-overlay.active+#hero {
    padding-top: 24px;
}

.recipe-search {
    position: relative;
}

.search-results {
    position: absolute;
    /* ⬅️ EZ A MEGOLDÁS */
    top: calc(100% + 8px);
    left: 0;
    right: 0;

    display: none;
    padding: 0;
    margin: 0;

    background: var(--white);
    border: 1px solid var(--neutral-300);
    border-radius: 4px;
    z-index: 2;
}

.search-results.active {
    display: block;
}





/*--------------------------SUB_HEADER--------------------------*/

#sub-header {
    width: 100%;
    position: fixed;
    z-index: 2000;
    left: 0;
    color: var(--white);
    top: var(--main-header-height);
    background: var(--brand-500);
}

.submenu-link {
    transition: 0.2s;
    color: #ffffff;
    text-decoration: none;
    padding: 0 24px;
}

.submenu-link:hover {
    background-color: #ffffff;
    color: var(--brand-secundary-300);
    padding: 16px 24px;
}


/*--------------------------------------SEARCH - MOBIL ---------------------------*/

.recipe-search {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.recipe-search input {
    width: 100%;
    font-size: 16px;
    border: 1px solid var(--brand-500);
    color: var(--brand-500);
    border-radius: 999px;
    padding: 16px 16px 16px 48px;
    font-weight: 200 !important;
}

.search-icon {
    position: absolute;
    top: 55%;
    left: 16px;
    color: var(--brand-200);
    pointer-events: none;
    transform: translateY(-50%);
}

.search-icon svg {
    width: 22px;
    height: 22px;
}

.recipe-search input::placeholder {
    color: var(--brand-200);
}

.recipe-search input:focus::placeholder {
    color: var(--brand-200);
}

.recipe-search:focus-within .search-icon {
    color: var(--brand-200);
}

.search-icon:focus {
    color: var(--brand-200)
}


.recipe-search input:focus {
    outline: none;
    border-color: var(--brand-500);
    font-weight: 200 !important;
}


.search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--brand-500);
    z-index: 1000;
    top: calc(100% + 8px);
    padding: 0;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    width: 98%;
    max-height: 280px;
    overflow-y: auto;

}

.search-results::-webkit-scrollbar {
    width: 8px;
}

.search-results::-webkit-scrollbar-thumb {
    background-color: var(--brand-200);
    border-radius: 4px;
}

.search-results::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
    /* ⬅️ felül–alul is levegő */
}

.search-results.active {
    display: block;
    height: auto;
}

.search-results li {
    padding: 11px 16px;
    cursor: pointer;
    text-align: left;
    color: var(--brand-500);
}

.search-results li:hover {
    background: var(--brand-100);
}




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

#hero {
    padding-top: var(--main-header-height);
    /*padding-top: var(--header-stack-height);*/
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 48px;
    display: flow-root;

}

.hero-item {
    position: relative;
    max-width: 800px;
    margin: auto;
}

.hero-item img {
    max-width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 4px;
}

.hero-item-title-box {
    position: absolute;
    color: var(--brand-500);
    background: var(--white);
    padding: 12px;
    transition: .2s ease-in-out;
    border-radius: 999px;
    text-align: left;
    max-width: calc(100% - 24px);
    /* kép széleitől levegő */
    white-space: normal;
    display: inline-flex;
}

.hero-item-title-box h2 {
    max-width: 100%;
    word-break: break-word;
}

.hero-item-title-box:hover {
    color: var(--brand-secundary-300);
}



/*----------HERO-TITLE-POSITION -------------*/

.hero-item-title-box-1 {
    bottom: 16px;
    right: 16px;
}

.hero-item-title-box-2 {
    bottom: 16px;
    right: 16px;
}

.hero-item-title-box-3 {
    bottom: 16px;
    right: 16px;
}

.hero-item-title-box-4 {
    bottom: 16px;
    right: 16px;
}

.hero-item-title-box-5 {
    bottom: 16px;
    right: 16px;
}




/*--------------------------------------CONTAINER - PADDING-MARGIN MOBIL----------------------------*/
#category,
#blog,
#row-post-recepies,
#block-post-listing,
#new-post {
    padding: 48px 24px;
}


#category {
    margin: 48px 0;
}




/*--------------------------------------SECTION MAIN TITLE H2 - MOBIL---------------------------*/

.block-post-listing-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
    color: var(--neutral-800);
    text-align: center;
    font-weight: 400;

}

.block-post-listing-heading::before {
    background: var(--neutral-400);
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    flex-basis: 0%;
    flex-grow: 1;
}

.block-post-listing-heading::after {
    background: var(--neutral-400);
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    flex-basis: 0%;
    flex-grow: 1;
}



/*--------------------------------------CONTAINER - H3 - MOBIL ---------------------------*/

#row-post-recepies h3,
#new-post h3,
#blog h3,
#block-post-listing h3 {
    color: var(--neutral-800);
    text-align: center;
}

#row-post-recepies p,
#new-post p,
#category p,
#blog p,
#block-post-listing p {
    color: var(--neutral-800);
}

#row-post-recepies h3:hover,
#new-post h3:hover,
#category h3:hover,
#blog h3:hover,
#top-recepie h3:hover,
#block-post-listing h3:hover {
    color: var(--brand-secundary-300);
}

.blog-item h3 {
    margin: 0 0 4px;
    text-align: left !important;
}






/*--------------------------------------ROW-POST & NEW POST & CATEGORY - FLEX - MOBIL ---------------------------*/

.row-post-recepies-item-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    max-height: max-content;
}

.row-post-recepies-item img,
.new-post-item img {
    height: 350px;
    width: 350px;
    border-radius: 4px;
}

.row-post-recepies-item {
    padding: 8px 0;
}

.category-item img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 4px solid var(--white);
}

.category-item img:hover {
    opacity: 0.8;
}

.new-post-item p {
    max-width: 350px;
}

.row-post-recepies-item,
.category-item,
.new-post-item {
    height: auto;
    text-align: center;
}




/*---------------------------------------BLOG MOBIL-----------------------------*/

.blog-item {
    margin-top: 24px;
}

.blog-item img {
    height: 250px;
    border-radius: 4px;
}


/*.blog-item-text p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}*/


.blog-chip {
    display: inline-block;
    font-size: 12px;
    line-height: 0.8;
    padding: 8px 12px;
    border-radius: 999px;
    margin-bottom: 8px;
    margin-top: 8px;
    font-family: var(--font-heading);
    font-weight: 400;
    background: var(--brand-secundary-300);
    color: var(--white);

}

.blog-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;

}




/*--------------------------------BLOCK-RECEPIE-LISTED-GRID-MOBIL-----------------------*/


.block-post-listing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.block-post-listing img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ---------- JOBB OLDAL (mobil) ---------- */

.block-post-listing-side {
    align-self: stretch;
    min-height: 0;
}

#block-post-listing img {
    border-radius: 4px;
}



/* ========== BAL OLDAL (kiemelt) ========== */

.block-post-listing-main img {
    height: 350px;
}

/* ========== JOBB OLDAL – 2×2 GRID ========== */

.block-post-listing-side {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
}

.block-post-card img {
    aspect-ratio: 4 / 3;
}



/* ------------------------------- TOP RECEPIE – MOBILE ---------------- */

#top-recepie {
    background: var(--neutral-100);
    margin: 48px 0;
}

/* container maradhat */
#top-recepie .container {
    padding: 0 24px;
}

/* FLEX oszlop mobilon */
.top-recepie-box {
    display: flex;
    flex-direction: column;
}

/* FULL-BLEED IMAGE */
.top-recepie-img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.top-recepie-img img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

/* TEXT */
.top-recepie-text {
    padding: 24px 0;
}


/*----------------------------------FOOTER-MOBIL----------------------*/




#main-footer {
    background: var(--brand-500);
    color: var(--white);
    padding: 48px 24px 12px 24px;
    margin: 48px 0 0;
}

/* SOCIAL */

.social img {
    width: 30px;
    height: auto;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#main-footer .social {
    display: contents;
}

#main-footer ul {
    padding: 12px 0;
}

#main-footer .links li {
    display: inline;
    margin: 0 24px;
}

#main-footer .links li:hover {
    cursor: pointer;
    color: var(--brand-500);
}

/* COPYRIGHT */
.copyright {
    text-align: center;
    padding: 48px 24px 0 24px;
    color: var(--white);
}









/*------------------------------------------------------------------------TABLET------------------------------------*/

@media screen and (min-width: 768px) {

    .hide {
        display: inline;
    }

    .hide-tablet {
        display: none;
    }



    /*------------------------------------SEARCH----------------*/


    .recipe-search {
        max-width: 800px;
    }



    /*------------------------------------CONTAINER----------------*/

    .container-flex-row-nowrap_se {
        display: flex !important;
        flex-flow: row nowrap;
        justify-content: space-evenly;
    }

    .container-flex-row-nowrap-fe-center {
        display: flex !important;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
    }

    .container-flex-row-nowrap-fs {
        display: flex !important;
        flex-flow: row nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }




    /*----------------------------------------ROW-POST and CATEGORY FLEX- TABLET -----------------------------*/
    .row-post-recepies-item {
        width: 50%;
    }

    .category-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }



    /*----------------------------------------BLOG - TABLET ---------------------------------*/


    .blog-item {
        display: flex;
        flex-direction: row;
    }

    .blog-item-text {
        width: 70%
    }

    .blog-item img {
        width: 300px;
    }

    .blog-box {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        max-width: 900px;
        margin: 0 auto;
    }

    .blog-item-text {
        margin-left: 16px;
    }

    /*--------------------------------BLOCK-POST-LISTENING-GRID----TABLET-----------------------*/

    /* ---------- KÜLSŐ GRID ---------- */

    .block-post-listing-grid {
        grid-template-columns: 3fr 2fr;
        /* ~60% / 40% */
        align-items: stretch;
        /* magasság szinkron */
    }

    /* ---------- BAL OLDAL ---------- */

    .block-post-listing-main {
        display: flex;
        flex-direction: column;
    }

    .block-post-listing-main img {
        height: 400px;
        /* kontrollált nagy kép */
        object-fit: cover;
    }

    /* ---------- JOBB OLDAL ---------- */

    .block-post-listing-side {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        height: 100% !important;
    }



    .block-post-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* KÉP – FIX MAGASSÁG (EZ OLDJA MEG A 2 SOROS CÍMET) */
    .block-post-card img {
        width: 100%;
        /*height: 220px;
        /* 🔧 finomhangolható */
        object-fit: cover;
        flex-shrink: 0;
    }







    /*---------------------------TOP RECEPIE-TABLET------------------*/

    .top-recepie-box {
        flex-direction: row;
        align-items: center;
    }

    .top-recepie-img,
    .top-recepie-text {
        width: 50%;
    }

    /* visszavonjuk a full-bleed trükköt */
    .top-recepie-img {
        width: 50%;
        margin: 0;
    }

    .top-recepie-img img {
        height: 350px;
        border-radius: 4px;
    }

    .top-recepie-text {
        padding: 24px;
    }

}


/*---------------------------------------------------------------PC-------------------------------------------------------------------------------------------*/

@media screen and (min-width: 1200px) {

    .hide-tablet {
        display: inline;
    }


    .menu-toggle {
        display: none;
    }

    .menu {
        position: static !important;
        transform: none !important;
        width: auto;
        height: auto;
        inset: auto;
        flex-direction: row;
        background: none;
        padding: 0;
        gap: 24px;
        border: none;
    }


    /*-------------------- SEARCH BOX - PC -------------*/


    #main-header .menu {
        padding: 0;
        /* ⬅️ megszünteti a 12px-es belső tolást */
    }

    .header-actions menu {
        gap: 24px;
    }


    .search-toggle {
        position: static;
        padding: 0;
        gap: 8px;
        font-size: var(--body-l-size);
        transform: none;
        /* ⬅️ EZ VOLT A HIÁNYZÓ DARAB */
    }

    .search-toggle span {
        display: inline;
    }





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

    .hero-item,
    .hero-item img {
        height: 350px;
        width: 100%;
    }

    .grid-container {
        display: grid;
        gap: 5px;
    }

    .grid-item-1 {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    .grid-item-2 {
        grid-column: 3;
        grid-row: 1 / span 1;
    }



    /*----------------------------------------NEW POST & ROW-POST & BLOCK-POST - PC -----------------------------*/


    .new-post-item {
        width: 370px;
    }

    .row-post-recepies-item {
        width: 280px;
    }

    .row-post-recepies-item img {
        height: 260px;
        width: 260px;
    }


    /*----------------------------------------------------BLOG - PC ---------------------------------------*/

    #blog .container-flex-row-nowrap {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
    }

    .blog-item {
        width: 900px;
    }


    /*---------------------------TOP RECEPIE BOX-PC------------------*/
    .top-recepie-img img {
        height: 380px;
    }
}