/* =========================================================
   BARBSKITCHEN - GLOBAL STYLE
   ========================================================= */

:root {
    --cream: #FFFCF4;
    --cream-deep: #FFF8E8;
    --white: #FFFFFF;

    --yellow-soft: #FFF2BD;
    --yellow: #F7D77A;
    --yellow-deep: #EFC95F;

    --blue-soft: #E8F7FC;
    --blue: #CFEFF8;
    --blue-deep: #A9DCEB;

    --brown: #6E5548;
    --text: #504B47;
    --muted: #8B817A;

    --border: #EEE5D9;

    --shadow-soft: 0 7px 22px rgba(110, 85, 72, 0.07);
    --shadow-card: 0 12px 30px rgba(110, 85, 72, 0.10);
    --shadow-hover: 0 18px 40px rgba(110, 85, 72, 0.15);

    --page-width: 1180px;
}


/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family: 'Poppins', sans-serif;

    background: var(--cream);
    color: var(--text);

    line-height: 1.65;
}

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

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

button,
input,
textarea,
select {
    font: inherit;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.top-bar {
    min-height: 35px;

    padding: 8px 5%;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    background: var(--cream);

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

    font-size: 0.76rem;
}

.top-bar-links {
    display: flex;
    align-items: center;

    color: var(--muted);
}

.top-bar-links > a:hover,
.lang-switch a:hover {
    color: var(--brown);
}

.lang-switch {
    margin-left: 18px;

    display: flex;
    align-items: center;
    gap: 5px;
}

.lang-switch .active {
    color: var(--brown);
    font-weight: 600;

    border-bottom: 2px solid var(--yellow);
}


/* =========================================================
   LOGO HEADER
   ========================================================= */

.site-header {
    padding: 24px 20px 22px;

    display: flex;
    justify-content: center;
}

.logo-image {
    width: 100%;
    max-width: 430px;
    height: auto;

    margin: 0 auto;

    transition: transform 0.2s ease;
}

.logo-image:hover {
    transform: translateY(-2px);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;

    padding: 11px 20px;

    background: rgba(255, 242, 189, 0.96);

    border-top: 1px solid rgba(239, 201, 95, 0.18);
    border-bottom: 1px solid rgba(239, 201, 95, 0.25);

    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: var(--page-width);

    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    gap: 6px;
}

.nav-link {
    padding: 8px 13px;

    border-radius: 999px;

    color: var(--text);

    font-size: 0.78rem;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 0.7px;

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

.nav-link:hover {
    background: rgba(247, 215, 122, 0.55);
    transform: translateY(-1px);
}

.nav-active {
    background: var(--yellow);
    color: var(--brown);
}

.nav-search {
    margin-left: 5px;

    background: var(--blue-soft);
}

.nav-search:hover {
    background: var(--blue);
}


/* =========================================================
   SHARED
   ========================================================= */

.eyebrow {
    color: var(--muted);

    font-size: 0.67rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.section-line {
    width: 58px;
    height: 4px;

    margin: 16px auto 0;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--blue)
        );

    border-radius: 999px;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 10px 22px;

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.8rem;
    font-weight: 500;
}

.button-blue {
    background: var(--blue-soft);
    border: 1px solid var(--blue);
}


/* =========================================================
   HOMEPAGE
   ========================================================= */

.intro-section {
    max-width: 760px;

    margin: 50px auto 8px;
    padding: 0 20px;

    text-align: center;
}

.intro-section h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: clamp(2.1rem, 4vw, 2.8rem);
    font-weight: 500;

    color: var(--brown);
}

.intro-text {
    max-width: 620px;

    margin: 9px auto 0;

    color: var(--muted);
    font-size: 0.93rem;
}

.content-container {
    max-width: var(--page-width);

    margin: 38px auto 78px;
    padding: 0 20px;
}

.recipe-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(280px, 340px)
        );

    justify-content: center;

    gap: 28px;
}

.recipe-card {
    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow-card);

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

.recipe-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.recipe-card-link {
    height: 100%;

    display: flex;
    flex-direction: column;
}

.image-wrapper {
    position: relative;

    overflow: hidden;

    background: var(--blue-soft);
}

.recipe-img {
    width: 100%;
    height: 255px;

    object-fit: cover;
}

.recipe-category {
    position: absolute;

    left: 14px;
    bottom: 14px;

    padding: 6px 12px;

    background: rgba(232, 247, 252, 0.97);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.66rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.recipe-info {
    flex-grow: 1;

    padding: 21px;

    display: flex;
    flex-direction: column;
}

.recipe-title {
    color: var(--brown);

    font-size: 0.98rem;
    font-weight: 600;

    line-height: 1.45;

    text-transform: uppercase;
}

.recipe-description {
    margin-top: 8px;

    color: var(--muted);

    font-size: 0.79rem;
}

.recipe-meta {
    margin-top: auto;
    padding-top: 17px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.meta-pill {
    min-height: 31px;

    padding: 5px 9px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    background: var(--blue-soft);

    border-radius: 999px;

    font-size: 0.67rem;
}

.recipe-date {
    margin-top: 12px;

    color: var(--muted);

    font-size: 0.69rem;
}


/* =========================================================
   NEW RECIPES PAGE
   ========================================================= */

.recipes-page {
    width: 100%;
}


/* HERO */

.recipes-hero {
    max-width: 860px;

    margin: 58px auto 0;
    padding: 0 24px;

    text-align: center;
}

.recipes-kicker {
    display: inline-block;

    color: #A18473;

    font-size: 0.68rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.recipes-hero h1 {
    margin-top: 4px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 500;

    line-height: 1.1;

    color: var(--brown);
}

.recipes-hero p {
    max-width: 610px;

    margin: 15px auto 0;

    color: var(--muted);

    font-size: 0.93rem;
}

.recipes-decoration {
    margin: 20px auto 0;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;
}

.recipes-decoration span {
    display: block;

    height: 4px;

    border-radius: 999px;
}

.recipes-decoration span:nth-child(1) {
    width: 20px;
    background: var(--yellow);
}

.recipes-decoration span:nth-child(2) {
    width: 25px;
    background: var(--blue);
}

.recipes-decoration span:nth-child(3) {
    width: 12px;
    background: var(--yellow);
}


/* FILTER CARD */

.recipes-filter-card {
    max-width: 1040px;

    margin: 38px auto 0;
    padding: 25px 28px 28px;

    background: rgba(255, 255, 255, 0.86);

    border: 1px solid var(--border);
    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.recipes-filter-heading {
    margin-bottom: 20px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;
}

.recipes-filter-small {
    color: var(--muted);

    font-size: 0.66rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.recipes-filter-heading h2 {
    margin-top: 2px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: 1.6rem;
    font-weight: 500;
}

.recipes-clear-filter {
    color: var(--muted);

    font-size: 0.73rem;

    border-bottom: 1px solid var(--blue-deep);

    transition: color 0.2s ease;
}

.recipes-clear-filter:hover {
    color: var(--brown);
}

.recipes-clear-filter.is-hidden {
    visibility: hidden;
}

.recipes-filter-list {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.category-chip {
    min-height: 42px;

    padding: 7px 8px 7px 12px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    background: var(--blue-soft);

    border: 1px solid rgba(169, 220, 235, 0.50);
    border-radius: 999px;

    color: var(--text);

    font-size: 0.76rem;
    font-weight: 500;

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

.category-chip:hover {
    transform: translateY(-2px);

    background: var(--blue);

    box-shadow: 0 6px 16px rgba(110, 85, 72, 0.08);
}

.category-chip-active {
    background: var(--yellow-soft);

    border-color: rgba(239, 201, 95, 0.75);

    color: var(--brown);

    box-shadow: 0 6px 16px rgba(239, 201, 95, 0.12);
}

.category-chip-active:hover {
    background: var(--yellow);
}

.category-chip-icon {
    min-width: 18px;

    display: inline-flex;
    justify-content: center;

    font-size: 0.9rem;
}

.category-chip-name {
    white-space: nowrap;
}

.category-chip-count {
    min-width: 25px;
    height: 25px;

    padding: 0 7px;

    display: inline-grid;
    place-items: center;

    background: rgba(255, 255, 255, 0.78);

    border-radius: 999px;

    color: #8F8178;

    font-size: 0.62rem;
    font-weight: 600;
}


/* COLLECTION */

.recipes-collection {
    max-width: var(--page-width);

    margin: 58px auto 90px;
    padding: 0 20px;
}

.recipes-collection-heading {
    margin-bottom: 25px;
    padding-bottom: 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.recipes-collection-heading h2 {
    margin-top: 2px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 500;
}

.recipes-total {
    padding: 7px 13px;

    background: var(--yellow-soft);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.7rem;
    font-weight: 500;
}


/* NEW RECIPE GRID */

.recipes-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 28px;
}

.recipes-card {
    overflow: hidden;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 20px;

    box-shadow: var(--shadow-card);

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

.recipes-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.recipes-card-link {
    height: 100%;

    display: flex;
    flex-direction: column;
}

.recipes-card-image {
    position: relative;

    overflow: hidden;

    background: var(--blue-soft);
}

.recipes-card-image img {
    width: 100%;
    height: 245px;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.recipes-card:hover .recipes-card-image img {
    transform: scale(1.035);
}

.recipes-card-category {
    position: absolute;

    left: 15px;
    bottom: 15px;

    padding: 6px 11px;

    background: rgba(255, 255, 255, 0.90);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.64rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.7px;

    box-shadow: 0 4px 12px rgba(110, 85, 72, 0.08);
}

.recipes-card-body {
    flex-grow: 1;

    padding: 21px;

    display: flex;
    flex-direction: column;
}

.recipes-card-body h3 {
    color: var(--brown);

    font-size: 0.98rem;
    font-weight: 600;

    text-transform: uppercase;

    line-height: 1.45;
}

.recipes-card-body p {
    margin-top: 8px;

    color: var(--muted);

    font-size: 0.78rem;
    line-height: 1.65;
}

.recipes-card-meta {
    margin-top: auto;
    padding-top: 18px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.recipes-card-meta span {
    min-height: 30px;

    padding: 5px 9px;

    display: inline-flex;
    align-items: center;

    background: var(--blue-soft);

    border-radius: 999px;

    color: var(--text);

    font-size: 0.66rem;
}


/* NO RESULTS */

.recipes-no-results {
    max-width: 620px;

    margin: 20px auto 0;
    padding: 48px 30px;

    text-align: center;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.recipes-no-results-icon {
    width: 48px;
    height: 48px;

    margin: 0 auto 12px;

    display: grid;
    place-items: center;

    background: var(--blue-soft);

    border-radius: 50%;

    color: var(--brown);

    font-size: 1.25rem;
}

.recipes-no-results h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: 1.8rem;
    font-weight: 500;
}

.recipes-no-results p {
    margin-top: 7px;

    color: var(--muted);

    font-size: 0.85rem;
}

.recipes-back-all {
    margin-top: 18px;

    display: inline-flex;

    padding: 9px 18px;

    background: var(--blue-soft);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.76rem;
    font-weight: 500;
}


/* =========================================================
   RECIPE DETAIL PAGE
   ========================================================= */

.breadcrumbs {
    max-width: 1080px;

    margin: 23px auto 0;
    padding: 0 20px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    color: var(--muted);

    font-size: 0.75rem;
}

.recipe-header {
    max-width: 820px;

    margin: 38px auto 30px;
    padding: 0 20px;

    text-align: center;
}

.category-badge {
    display: inline-block;

    margin-bottom: 13px;
    padding: 6px 13px;

    background: var(--blue-soft);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.67rem;
    font-weight: 600;

    text-transform: uppercase;
}

.recipe-header h1 {
    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: clamp(2.6rem, 6vw, 4.3rem);
    font-weight: 500;

    color: var(--brown);

    line-height: 1.12;
}

.recipe-page-description {
    max-width: 650px;

    margin: 16px auto 0;

    color: var(--muted);

    font-size: 0.92rem;
}

.hero-container {
    max-width: 920px;

    margin: 34px auto 0;
    padding: 0 20px;
}

.hero-image {
    width: 100%;
    max-height: 560px;

    object-fit: cover;

    border-radius: 24px;

    box-shadow: var(--shadow-card);
}

.recipe-summary {
    max-width: 760px;

    margin: 20px auto 50px;
    padding: 9px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow-soft);
}

.summary-item {
    min-width: 145px;

    padding: 12px 18px;

    text-align: center;

    background: var(--blue-soft);

    border-radius: 13px;
}

.summary-icon {
    display: block;

    color: var(--brown);
}

.summary-label {
    display: block;

    color: var(--muted);

    font-size: 0.61rem;

    text-transform: uppercase;
}

.summary-item strong {
    display: block;

    color: var(--brown);

    font-size: 0.84rem;
}

.recipe-layout {
    max-width: 1050px;

    margin: 0 auto 70px;
    padding: 0 20px;

    display: grid;

    grid-template-columns:
        minmax(260px, 0.82fr)
        minmax(420px, 1.5fr);

    gap: 28px;
}

.ingredients-card {
    position: sticky;
    top: 80px;

    padding: 28px;

    background: var(--yellow-soft);

    border-radius: 18px;

    box-shadow: var(--shadow-soft);
}

.preparation-card {
    padding: 32px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 18px;

    box-shadow: var(--shadow-soft);
}

.card-heading h2 {
    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: 2rem;
    font-weight: 500;
}

.ingredient-group {
    margin-top: 22px;
}

.ingredient-group h3 {
    margin-bottom: 8px;

    color: var(--brown);

    font-size: 0.7rem;

    text-transform: uppercase;
}

.ingredient-list {
    list-style: none;
}

.ingredient-list li {
    padding: 9px 0;

    display: grid;

    grid-template-columns: 9px 1fr;
    gap: 10px;

    border-bottom: 1px solid rgba(110, 85, 72, 0.11);

    font-size: 0.87rem;
}

.ingredient-dot {
    width: 6px;
    height: 6px;

    margin-top: 9px;

    background: var(--brown);

    border-radius: 50%;
}

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

    gap: 23px;
}

.step {
    display: grid;

    grid-template-columns: 42px 1fr;
    gap: 14px;
}

.step-number {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    background: var(--yellow-soft);

    border-radius: 50%;

    color: var(--brown);

    font-family: 'Playfair Display', serif;
}

.step p {
    padding-top: 5px;

    font-size: 0.91rem;
}

.blue-line {
    width: 45px;
    height: 4px;

    margin: 10px 0 26px;

    background: var(--blue);

    border-radius: 999px;
}

.back-container {
    margin: 0 auto 70px;

    text-align: center;
}


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

.site-footer {
    padding: 38px 20px;

    text-align: center;

    background: var(--yellow-soft);

    border-top: 1px solid rgba(239, 201, 95, 0.20);
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: 1.75rem;
}

.footer-text {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.77rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 920px) {

    .recipes-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .recipe-layout {
        grid-template-columns: 1fr;
    }

    .ingredients-card {
        position: static;
    }
}


@media (max-width: 700px) {

    .top-bar {
        justify-content: center;
    }

    .logo-image {
        max-width: 330px;
    }

    .recipes-filter-card {
        margin-left: 14px;
        margin-right: 14px;

        padding: 22px 18px;
    }

    .recipes-filter-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .recipes-filter-list {
        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 8px;

        -webkit-overflow-scrolling: touch;
    }

    .category-chip {
        flex: 0 0 auto;
    }

    .recipes-collection-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 9px;
    }

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

    .recipes-card-image img {
        height: 260px;
    }
}


@media (max-width: 520px) {

    .site-header {
        padding: 20px 15px;
    }

    .logo-image {
        max-width: 280px;
    }

    .nav-bar {
        position: static;
    }

    .nav-container {
        flex-direction: column;
    }

    .nav-link {
        width: 100%;
        max-width: 270px;

        text-align: center;
    }

    .nav-search {
        margin-left: 0;
    }

    .recipes-hero {
        margin-top: 38px;
    }

    .recipes-hero h1 {
        font-size: 2.65rem;
    }

    .recipes-filter-card {
        margin-top: 28px;
    }

    .recipes-collection {
        margin-top: 42px;

        padding: 0 14px;
    }

    .recipe-summary {
        margin-left: 12px;
        margin-right: 12px;
    }

    .summary-item {
        width: calc(50% - 4px);
        min-width: 0;
    }
}


/* =========================================================
   SEARCH - ACCESSIBILITY
   ========================================================= */

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   NAVBAR SEARCH
   ========================================================= */

.nav-search-form {
    min-height: 38px;

    margin-left: 8px;
    padding: 4px 5px 4px 12px;

    display: flex;
    align-items: center;

    gap: 7px;

    background: var(--blue-soft);

    border: 1px solid rgba(169, 220, 235, 0.50);
    border-radius: 999px;

    box-shadow: 0 3px 10px rgba(110, 85, 72, 0.05);

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

.nav-search-form:focus-within,
.nav-search-active {
    background: var(--white);

    border-color: var(--blue-deep);

    box-shadow: 0 5px 14px rgba(110, 85, 72, 0.09);
}

.nav-search-icon {
    flex: 0 0 auto;

    color: var(--brown);

    font-size: 0.95rem;
}

.nav-search-form input {
    width: 118px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 0.73rem;
}

.nav-search-form input::placeholder {
    color: #9B918B;
}

.nav-search-form button {
    padding: 6px 10px;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.72);

    color: var(--brown);

    cursor: pointer;

    font-size: 0.67rem;
    font-weight: 600;

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

.nav-search-form button:hover {
    background: var(--yellow-soft);
    transform: translateY(-1px);
}


/* =========================================================
   SEARCH PAGE
   ========================================================= */

.search-page {
    width: 100%;
}


/* =========================================================
   SEARCH HERO
   ========================================================= */

.search-hero {
    max-width: 820px;

    margin: 58px auto 0;
    padding: 0 24px;

    text-align: center;
}

.search-kicker {
    display: inline-block;

    color: #A18473;

    font-size: 0.68rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.8px;
}

.search-hero h1 {
    margin-top: 4px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: clamp(2.7rem, 5vw, 3.8rem);
    font-weight: 500;

    color: var(--brown);

    line-height: 1.1;
}

.search-hero p {
    max-width: 610px;

    margin: 14px auto 0;

    color: var(--muted);

    font-size: 0.91rem;
}


/* =========================================================
   LARGE SEARCH BOX
   ========================================================= */

.search-box {
    max-width: 880px;

    margin: 36px auto 0;
    padding: 27px 30px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid var(--border);
    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.search-label {
    display: block;

    margin-bottom: 10px;

    color: var(--brown);

    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: 1.25rem;
}

.search-input-row {
    display: grid;

    grid-template-columns: 1fr auto;

    gap: 10px;
}

.search-input-wrap {
    min-height: 52px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    background: var(--cream);

    border: 1px solid var(--border);
    border-radius: 999px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.search-input-wrap:focus-within {
    border-color: var(--blue-deep);

    box-shadow: 0 0 0 4px rgba(207, 239, 248, 0.40);
}

.search-input-icon {
    color: var(--brown);

    font-size: 1.15rem;
}

.search-input-wrap input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--text);

    font-size: 0.87rem;
}

.search-input-wrap input::placeholder {
    color: #A39A94;
}

.search-submit {
    min-width: 92px;

    padding: 0 22px;

    border: 0;
    border-radius: 999px;

    background: var(--yellow-soft);

    color: var(--brown);

    cursor: pointer;

    font-size: 0.79rem;
    font-weight: 600;

    box-shadow: 0 5px 14px rgba(239, 201, 95, 0.13);

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

.search-submit:hover {
    background: var(--yellow);

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(239, 201, 95, 0.20);
}


/* =========================================================
   SEARCH SUGGESTIONS
   ========================================================= */

.search-suggestions {
    margin-top: 18px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}

.search-suggestions-label {
    color: var(--muted);

    font-size: 0.71rem;
}

.search-suggestion-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.search-suggestion {
    padding: 6px 10px;

    background: var(--blue-soft);

    border-radius: 999px;

    color: var(--text);

    font-size: 0.68rem;

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

.search-suggestion:hover {
    background: var(--blue);
    transform: translateY(-1px);
}


/* =========================================================
   RESULTS
   ========================================================= */

.search-results {
    max-width: var(--page-width);

    margin: 54px auto 90px;
    padding: 0 20px;
}

.search-results-heading {
    margin-bottom: 25px;
    padding-bottom: 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.search-results-heading h2 {
    margin-top: 2px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: clamp(1.8rem, 3vw, 2.3rem);
    font-weight: 500;
}

.search-result-count {
    padding: 7px 13px;

    background: var(--yellow-soft);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.70rem;
    font-weight: 500;
}

.search-recipes-grid {
    width: 100%;
}


/* =========================================================
   NO SEARCH RESULTS
   ========================================================= */

.search-empty {
    max-width: 610px;

    margin: 30px auto 0;
    padding: 50px 30px;

    text-align: center;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.search-empty-icon {
    width: 50px;
    height: 50px;

    margin: 0 auto 13px;

    display: grid;
    place-items: center;

    background: var(--blue-soft);

    border-radius: 50%;

    color: var(--brown);

    font-size: 1.35rem;
}

.search-empty h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: 1.8rem;
    font-weight: 500;
}

.search-empty p {
    max-width: 450px;

    margin: 8px auto 0;

    color: var(--muted);

    font-size: 0.84rem;
}

.search-reset-button {
    margin-top: 18px;

    display: inline-flex;

    padding: 9px 18px;

    background: var(--blue-soft);

    border-radius: 999px;

    color: var(--brown);

    font-size: 0.75rem;
    font-weight: 500;
}


/* =========================================================
   SEARCH RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .nav-search-form input {
        width: 90px;
    }

}


@media (max-width: 700px) {

    .nav-search-form {
        width: 100%;
        max-width: 330px;

        margin: 5px auto 0;
    }

    .nav-search-form input {
        flex: 1;
        width: auto;
    }

    .search-box {
        margin-left: 14px;
        margin-right: 14px;

        padding: 23px 18px;
    }

}


@media (max-width: 520px) {

    .search-hero {
        margin-top: 38px;
    }

    .search-hero h1 {
        font-size: 2.5rem;
    }

    .search-input-row {
        grid-template-columns: 1fr;
    }

    .search-submit {
        min-height: 46px;
    }

    .search-suggestions {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-results {
        margin-top: 42px;
        padding: 0 14px;
    }

    .search-results-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 9px;
    }

}

/* =========================================================
   ABOUT PAGE - O MENI
   Add to the end of app/assets/css/style.css
   ========================================================= */

.about-page {
    width: 100%;
}


/* HERO */

.about-hero {
    max-width: 820px;

    margin: 58px auto 0;
    padding: 0 24px;

    text-align: center;
}

.about-kicker,
.about-label {
    color: #A18473;

    font-size: 0.67rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.about-hero h1 {
    margin-top: 5px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: clamp(2.8rem, 6vw, 4.3rem);
    font-weight: 500;

    color: var(--brown);

    line-height: 1.1;
}

.about-lead {
    max-width: 630px;

    margin: 16px auto 0;

    color: var(--muted);

    font-size: 0.95rem;
    line-height: 1.8;
}

.about-scribble {
    margin: 21px auto 0;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;
}

.about-scribble span {
    display: block;

    height: 4px;

    border-radius: 999px;
}

.about-scribble span:nth-child(1) {
    width: 18px;
    background: var(--yellow);
}

.about-scribble span:nth-child(2) {
    width: 30px;
    background: var(--blue);
}

.about-scribble span:nth-child(3) {
    width: 12px;
    background: var(--yellow);
}


/* STORY */

.about-story {
    max-width: 1060px;

    margin: 48px auto 0;
    padding: 0 20px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.about-story-card {
    padding: 34px;

    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.about-story-main {
    background: var(--white);

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

.about-story-highlight {
    background:
        linear-gradient(
            145deg,
            var(--yellow-soft),
            #FFF8DC
        );

    border: 1px solid rgba(239, 201, 95, 0.30);
}

.about-story-card h2,
.about-kitchen-content h2,
.about-tech h2 {
    margin-top: 6px;

    font-family: 'Playfair Display', serif;
    font-style: italic;

    color: var(--brown);

    font-size: clamp(1.7rem, 3vw, 2.25rem);
    font-weight: 500;

    line-height: 1.25;
}

.about-story-card p:not(.about-label) {
    margin-top: 15px;

    color: var(--text);

    font-size: 0.88rem;
    line-height: 1.85;
}

.about-highlight-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 18px;

    display: grid;
    place-items: center;

    background: rgba(255, 255, 255, 0.72);

    border-radius: 50%;

    color: var(--brown);

    font-size: 1.15rem;
}


/* FACTS */

.about-facts {
    max-width: 1060px;

    margin: 28px auto 0;
    padding: 0 20px;

    display: grid;

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

    gap: 14px;
}

.about-fact {
    min-height: 125px;

    padding: 20px 18px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    background: var(--blue-soft);

    border: 1px solid rgba(169, 220, 235, 0.42);
    border-radius: 18px;
}

.about-fact:nth-child(even) {
    background: #FFF8DC;

    border-color: rgba(239, 201, 95, 0.30);
}

.about-fact-icon {
    flex: 0 0 auto;

    font-size: 1.25rem;
}

.about-fact strong {
    display: block;

    color: var(--brown);

    font-size: 0.79rem;
    font-weight: 600;
}

.about-fact span:not(.about-fact-icon) {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 0.69rem;
    line-height: 1.5;
}


/* WHY BARBSKITCHEN */

.about-kitchen {
    max-width: 1060px;

    margin: 62px auto 0;
    padding: 0 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(260px, 0.75fr);

    gap: 28px;

    align-items: stretch;
}

.about-kitchen-content {
    padding: 36px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.about-kitchen-content p:not(.about-label) {
    margin-top: 15px;

    color: var(--text);

    font-size: 0.88rem;
    line-height: 1.85;
}

.about-button {
    margin-top: 23px;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 10px 18px;

    background: var(--blue-soft);

    border: 1px solid rgba(169, 220, 235, 0.50);
    border-radius: 999px;

    color: var(--brown);

    font-size: 0.76rem;
    font-weight: 600;

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

.about-button:hover {
    transform: translateY(-2px);

    background: var(--blue);
}

.about-kitchen-note {
    padding: 34px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--blue-soft),
            #F6FCFE
        );

    border: 1px solid rgba(169, 220, 235, 0.45);
    border-radius: 24px;

    box-shadow: var(--shadow-soft);
}

.about-note-mark {
    height: 35px;

    color: var(--brown);

    font-family: 'Playfair Display', serif;

    font-size: 3rem;
    line-height: 1;
}

.about-kitchen-note p {
    color: var(--brown);

    font-family: 'Playfair Display', serif;
    font-style: italic;

    font-size: 1.2rem;
    line-height: 1.6;
}

.about-note-signature {
    margin-top: 16px;

    color: var(--muted);

    font-size: 0.72rem;
}


/* TECH SECTION */

.about-tech {
    max-width: 1060px;

    margin: 28px auto 85px;
    padding: 0 20px;
}

.about-tech-inner {
    padding: 28px 32px;

    display: grid;

    grid-template-columns: auto 1fr;

    gap: 22px;

    background: var(--cream-deep);

    border: 1px solid var(--border);
    border-radius: 22px;
}

.about-tech-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    background: var(--white);

    border-radius: 16px;

    color: var(--brown);

    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;

    box-shadow: 0 5px 14px rgba(110, 85, 72, 0.06);
}

.about-tech h2 {
    font-size: 1.55rem;
}

.about-tech p:not(.about-label) {
    margin-top: 9px;

    color: var(--muted);

    font-size: 0.82rem;
    line-height: 1.75;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .about-facts {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

}


@media (max-width: 720px) {

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

}


@media (max-width: 520px) {

    .about-hero {
        margin-top: 38px;
    }

    .about-hero h1 {
        font-size: 2.65rem;
    }

    .about-story,
    .about-facts,
    .about-kitchen,
    .about-tech {
        padding-left: 14px;
        padding-right: 14px;
    }

    .about-story-card,
    .about-kitchen-content,
    .about-kitchen-note {
        padding: 25px 22px;
    }

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

    .about-fact {
        min-height: 0;
    }

    .about-tech-inner {
        padding: 24px 20px;

        grid-template-columns: 1fr;
    }

}

/* =========================================================
   BARBSKITCHEN - LIGHT / DARK MODE
   Append this block to the END of style.css
   ========================================================= */


/* =========================================================
   THEME TOGGLE
   ========================================================= */

.theme-toggle {
    width: 34px;
    height: 34px;

    margin-left: 10px;

    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    padding: 0;

    border: 1px solid rgba(169, 220, 235, 0.55);
    border-radius: 50%;

    background: var(--blue-soft);

    color: var(--brown);

    cursor: pointer;

    box-shadow:
        0 3px 10px
        rgba(110, 85, 72, 0.06);

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

.theme-toggle:hover {
    transform:
        translateY(-2px)
        rotate(7deg);

    background: var(--yellow-soft);

    border-color:
        rgba(239, 201, 95, 0.60);

    box-shadow:
        0 6px 15px
        rgba(110, 85, 72, 0.10);
}

.theme-toggle:focus-visible {
    outline:
        3px solid
        rgba(169, 220, 235, 0.45);

    outline-offset: 3px;
}

.theme-toggle-icon {
    font-size: 1.08rem;
    line-height: 1;

    transform: translateY(-1px);
}


/* =========================================================
   SMOOTH THEME TRANSITIONS
   ========================================================= */

body,
.top-bar,
.nav-bar,
.site-footer,
.recipe-card,
.recipes-card,
.recipes-filter-card,
.search-box,
.search-empty,
.about-story-card,
.about-fact,
.about-kitchen-content,
.about-kitchen-note,
.about-tech-inner,
.ingredients-card,
.preparation-card,
.recipe-summary,
.status-card,
.nav-search-form,
.search-input-wrap,
.category-chip,
.meta-pill,
.recipes-card-meta span {
    transition:
        background-color 0.28s ease,
        color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease;
}


/* =========================================================
   BARBSKITCHEN DARK MODE
   Cleaner charcoal version
   ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --dark-bg: #151719;
    --dark-surface: #1E2225;
    --dark-surface-2: #252A2E;

    --dark-text: #F5F1EA;
    --dark-muted: #AAA6A0;

    --dark-border: #343A3E;

    --dark-yellow: #F4D06F;
    --dark-yellow-soft: #3A321D;

    --dark-blue: #9ED9EA;
    --dark-blue-soft: #1D333B;
}


/* =========================================================
   PAGE
   ========================================================= */

html[data-theme="dark"] body {
    background: #151719;
    color: #F5F1EA;
}


/* =========================================================
   TOP BAR
   ========================================================= */

html[data-theme="dark"] .top-bar {
    background: #151719;

    border-bottom:
        1px solid #343A3E;
}

html[data-theme="dark"] .top-bar-links,
html[data-theme="dark"] .lang-switch {
    color: #AAA6A0;
}

html[data-theme="dark"] .top-bar a:hover {
    color: #F4D06F;
}

html[data-theme="dark"] .lang-switch .active {
    color: #F5F1EA;

    border-color: #F4D06F;
}


/* =========================================================
   LOGO AREA
   ========================================================= */

html[data-theme="dark"] .site-header {
    background: #151719;
}


/*
   Keep the actual logo readable.
   Instead of a bright white card, use a soft warm surface.
*/

html[data-theme="dark"] .logo-link {
    padding: 14px 22px;

    background: #E9E4DB;

    border-radius: 22px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.28);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

html[data-theme="dark"] .nav-bar {
    background: #1E2225;

    border-top:
        1px solid #343A3E;

    border-bottom:
        1px solid #343A3E;
}

html[data-theme="dark"] .nav-link {
    color: #D8D5D0;
}

html[data-theme="dark"] .nav-link:hover {
    background: #252A2E;

    color: #F5F1EA;
}

html[data-theme="dark"] .nav-active {
    background: #F4D06F;

    color: #202225;
}


/* =========================================================
   NAV SEARCH
   ========================================================= */

html[data-theme="dark"] .nav-search-form {
    background: #151719;

    border:
        1px solid #3E5962;
}

html[data-theme="dark"] .nav-search-form:focus-within {
    border-color: #9ED9EA;
}

html[data-theme="dark"] .nav-search-icon {
    color: #9ED9EA;
}

html[data-theme="dark"] .nav-search-form input {
    color: #F5F1EA;
}

html[data-theme="dark"] .nav-search-form input::placeholder {
    color: #8F9497;
}

html[data-theme="dark"] .nav-search-form button {
    background: #9ED9EA;

    color: #172126;
}

html[data-theme="dark"] .nav-search-form button:hover {
    background: #F4D06F;

    color: #202225;
}


/* =========================================================
   TEXT
   ========================================================= */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
    color: #F5F1EA;
}

html[data-theme="dark"] p {
    color: #D1CDC7;
}

html[data-theme="dark"] .recipe-description,
html[data-theme="dark"] .recipes-card-body p,
html[data-theme="dark"] .intro-text,
html[data-theme="dark"] .recipes-hero p,
html[data-theme="dark"] .search-hero p,
html[data-theme="dark"] .about-lead {
    color: #AAA6A0;
}


/* =========================================================
   SMALL LABELS
   ========================================================= */

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .recipes-kicker,
html[data-theme="dark"] .search-kicker,
html[data-theme="dark"] .about-kicker,
html[data-theme="dark"] .about-label {
    color: #F4D06F;
}


/* =========================================================
   RECIPE CARDS
   ========================================================= */

html[data-theme="dark"] .recipe-card,
html[data-theme="dark"] .recipes-card {
    background: #1E2225;

    border:
        1px solid #343A3E;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .recipe-card:hover,
html[data-theme="dark"] .recipes-card:hover {
    border-color: #4E565B;

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .recipe-title,
html[data-theme="dark"] .recipes-card-body h3 {
    color: #F5F1EA;
}


/* =========================================================
   IMAGE FALLBACK
   ========================================================= */

html[data-theme="dark"] .image-wrapper,
html[data-theme="dark"] .recipes-card-image {
    background: #1D333B;
}


/* =========================================================
   CATEGORY BADGE
   ========================================================= */

html[data-theme="dark"] .recipe-category,
html[data-theme="dark"] .recipes-card-category {
    background: #E8F6FA;

    color: #263238;
}


/* =========================================================
   META PILLS
   ========================================================= */

html[data-theme="dark"] .meta-pill,
html[data-theme="dark"] .recipes-card-meta span {
    background: #1D333B;

    color: #BDE7F2;

    border:
        1px solid #31505A;
}


/* =========================================================
   FILTER CARD
   ========================================================= */

html[data-theme="dark"] .recipes-filter-card,
html[data-theme="dark"] .search-box {
    background: #1E2225;

    border:
        1px solid #343A3E;

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.23);
}


/* =========================================================
   FILTER CHIPS
   ========================================================= */

html[data-theme="dark"] .category-chip {
    background: #1D333B;

    color: #C8EAF2;

    border:
        1px solid #31505A;
}

html[data-theme="dark"] .category-chip:hover {
    background: #29454E;
}

html[data-theme="dark"] .category-chip-active {
    background: #3A321D;

    color: #F4D06F;

    border-color: #665629;
}

html[data-theme="dark"] .category-chip-count {
    background: #252A2E;

    color: #C9C6C1;
}


/* =========================================================
   COUNT BADGES
   ========================================================= */

html[data-theme="dark"] .recipes-total,
html[data-theme="dark"] .search-result-count {
    background: #3A321D;

    color: #F4D06F;
}


/* =========================================================
   SEARCH PAGE
   ========================================================= */

html[data-theme="dark"] .search-input-wrap {
    background: #151719;

    border:
        1px solid #343A3E;
}

html[data-theme="dark"] .search-input-wrap:focus-within {
    border-color: #9ED9EA;

    box-shadow:
        0 0 0 4px
        rgba(158, 217, 234, 0.10);
}

html[data-theme="dark"] .search-input-wrap input {
    color: #F5F1EA;
}

html[data-theme="dark"] .search-submit {
    background: #F4D06F;

    color: #202225;
}

html[data-theme="dark"] .search-suggestion {
    background: #1D333B;

    color: #BDE7F2;
}


/* =========================================================
   ABOUT
   ========================================================= */

html[data-theme="dark"] .about-story-main,
html[data-theme="dark"] .about-kitchen-content,
html[data-theme="dark"] .about-tech-inner {
    background: #1E2225;

    border:
        1px solid #343A3E;
}

html[data-theme="dark"] .about-story-highlight {
    background: #3A321D;

    border:
        1px solid #665629;
}

html[data-theme="dark"] .about-kitchen-note {
    background: #1D333B;

    border:
        1px solid #31505A;
}

html[data-theme="dark"] .about-fact {
    background: #1D333B;

    border-color: #31505A;
}

html[data-theme="dark"] .about-fact:nth-child(even) {
    background: #3A321D;

    border-color: #665629;
}


/* =========================================================
   RECIPE DETAIL
   ========================================================= */

html[data-theme="dark"] .preparation-card,
html[data-theme="dark"] .recipe-summary {
    background: #1E2225;

    border:
        1px solid #343A3E;
}

html[data-theme="dark"] .ingredients-card {
    background: #3A321D;

    border:
        1px solid #665629;
}

html[data-theme="dark"] .summary-item {
    background: #1D333B;
}

html[data-theme="dark"] .step-number {
    background: #F4D06F;

    color: #202225;
}


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

html[data-theme="dark"] .site-footer {
    background: #1E2225;

    border-top:
        1px solid #343A3E;
}

html[data-theme="dark"] .footer-logo {
    color: #F5F1EA;
}

html[data-theme="dark"] .footer-text {
    color: #AAA6A0;
}


/* =========================================================
   THEME BUTTON
   ========================================================= */

html[data-theme="dark"] .theme-toggle {
    background: #1D333B;

    border-color: #31505A;

    color: #9ED9EA;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: #3A321D;

    border-color: #665629;

    color: #F4D06F;
}