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

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

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    background: #f5f5f2;
    color: #1a1a1a;
}

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

a:hover {
    text-decoration: underline;
}

h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; }
h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
h3 { font-size: 1.05rem; font-weight: 600; }

body > *:not(header) {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

header.top {
    background: white;
    border-bottom: 2px solid lightgrey;
    width: 100%;
}

header.top .header-inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

header.top .site-name a {
    font-size: 1.2rem;
    font-weight: 700;
    color: salmon;
    white-space: nowrap;
}

header.top nav {
    display: flex;
    gap: 1rem;
    flex: 1;
    flex-wrap: wrap;
}

header.top nav a {
    color: darkgray;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
}

header.top nav a:hover {
    color: salmon;
    text-decoration: none;
}

header.top .account-links {
    white-space: nowrap;
    color: darkgray;
    font-size: 0.88rem;
}

body > h1 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

body > p {
    margin-bottom: 1rem;
}

.recipes,
.recipes-list,
.cards-area {
    max-width: 700px;
    margin: 1.5rem auto 2.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.recipe-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem 1.1rem;
    flex: 1 1 260px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recipe-box h2 {
    font-size: 1.05rem;
    margin: 0;
}

.recipe-box img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
}

.recipe-box p {
    color: darkgray;
    font-size: 0.9rem;
    flex: 1;
}

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0;
    margin-top: auto;
}

.tags li span,
.tag {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.78rem;
    padding: 0.1rem 0.5rem;
    color: darkgray;
}

.recipe-detail {
    max-width: 700px;
    margin: 2rem auto 3rem;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Hero card */
.recipe-hero {
    display: flex;
    gap: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.recipe-hero img {
    width: 240px;
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.recipe-hero-text {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
}

.recipe-hero-text h1 {
    font-size: 1.6rem;
    margin: 0;
}

.recipe-author {
    color: darkgray;
    font-size: 0.9rem;
    margin: 0;
}

.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.recipe-description {
    font-size: 0.95rem;
    color: darkslategray;
    margin: 0;
}

/* Timing bar */
.recipe-timing {
    display: flex;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.timing-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.25rem;
    border-right: 1px solid white;
}

.timing-item:last-child {
    border-right: none;
}

.timing-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: lightgray;
}

.timing-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: black;
}

/* Ingredients + steps */
.recipe-body {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.recipe-ingredients {
    flex: 0 0 200px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
}

.recipe-steps {
    flex: 1 1 300px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
}

.recipe-ingredients h2,
.recipe-steps h2 {
    font-size: 1rem;
    font-weight: 700;
    color: salmon;
    border-bottom: 2px solid #f0ece5;
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}

.recipe-ingredients ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.recipe-ingredients li {
    font-size: 0.9rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f5f5f2;
    line-height: 1.4;
}

.recipe-ingredients li:last-child {
    border-bottom: none;
}

.ingredient-amount {
    font-weight: 600;
    color: #444;
}

.recipe-steps ol {
    padding-left: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.recipe-steps li {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Profile ─────────────────────────────────────────────── */
.profile-intro {
    max-width: 700px;
    margin: 1.25rem auto;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-intro img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-intro p {
    font-size: 0.93rem;
    margin-bottom: 0.35rem;
}

.search-block {
    max-width: 700px;
    margin: 1.25rem auto 0;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.search-block form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-block label {
    font-weight: 600;
    font-size: 0.95rem;
}

.search-block input[type="search"] {
    flex: 1 1 180px;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
}

.login-form {
    max-width: 360px;
    margin: 2rem auto;
    padding: 1.5rem 1.75rem;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.login-form p {
    margin-bottom: 1rem;
}

.login-form label {
    font-weight: 600;
    font-size: 0.9rem;
}

.login-form input {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
}

button,
input[type="submit"] {
    background: salmon;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.45rem 1.1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
    background: salmon;
}

/* ── Star rating widget ──────────────────────────────────── */
.recipe-rating {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rating-summary {
    font-size: 0.9rem;
    color: #555;
}

.star-widget {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.rate-label {
    font-size: 0.85rem;
    color: #777;
    margin-right: 0.3rem;
}

.star-btn {
    background: none;
    border: none;
    padding: 0 0.05rem;
    font-size: 1.4rem;
    line-height: 1;
    color: #ccc;
    cursor: pointer;
    transition: color 0.1s;
}

.star-btn:hover,
.star-btn.filled {
    background: none;
    color: #f5a623;
}

.rate-prompt {
    font-size: 0.85rem;
    color: #777;
    margin: 0;
}

.card-rating {
    font-size: 0.82rem;
    color: #888;
    margin: 0.3rem 0 0;
}

.error-msg,
.login-form + p {
    color: red;
    font-size: 0.93rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 600px) {
    /* Header: stack name + nav vertically if needed, never overflow */
    header.top .header-inner {
        gap: 0.6rem;
    }

    /* Single-column card grid */
    .recipes,
    .recipes-list,
    .cards-area {
        flex-direction: column;
    }

    .recipe-box {
        flex: none;
        width: 100%;
    }

    /* Stack photo above text */
    .recipe-hero {
        flex-direction: column;
    }

    .recipe-hero img {
        width: 100%;
        height: 200px;
    }

    /* Timing bar: allow items to wrap into two rows on smaller screens */
    .recipe-timing {
        flex-wrap: wrap;
    }

    .timing-item {
        flex: 1 1 45%;
        border-bottom: 1px solid white;
    }

    .timing-item:nth-child(odd) {
        border-right: 1px solid white;
    }

    .timing-item:nth-child(even) {
        border-right: none;
    }

    .timing-item:last-child,
    .timing-item:nth-last-child(-n+2):nth-child(odd) {
        border-bottom: none;
    }

    /* Recipe body: stack ingredients above steps */
    .recipe-body {
        flex-direction: column;
    }

    .recipe-ingredients {
        flex: none;
        width: 100%;
    }

    /* Profile intro: let photo and bio stack if narrow */
    .profile-intro {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}