/* ==========================================
   reci.py — "warm kitchen" theme
   Fonts are loaded in templates/base.html
   ========================================== */

:root {
    /* Fonts */
    --primary-font: "DM Sans", system-ui, sans-serif;
    --secondary-font: "Fraunces", Georgia, serif;
    --code-font: "JetBrains Mono", monospace;

    /* Palette Colors */
    --cream: #FFF8F0;        /* Warm Cream: page background */
    --ink: #2B2118;          /* Ink: main text, footer */
    --tomato: #B54128;       /* Tomato: buttons and links */
    --tomato-dark: #2B2118;  /* Ink: button hover */
    --butter: #F2C14E;       /* Butter: highlights */
    --basil: #3A7022;        /* Basil: tags, success */
    --crust: #F3EED0;        /* Crust: soft panels, borders */
    --muted: #6B5B4E;        /* Muted: secondary text */

    /* Old names kept so older templates still work */
    --sandy-brown: var(--butter);
    --charcoal-blue: var(--ink);
    --bright-snow: var(--cream);
    --carbon-black: var(--ink);
    --dark-spruce: var(--basil);
    --highlight-color: var(--tomato);
    --highlight-color-light: var(--butter);

    /* Tell Bootstrap to use our colours */
    --bs-body-bg: var(--cream);
    --bs-body-color: var(--ink);
    --bs-link-color: var(--tomato);
    --bs-link-color-rgb: 181, 65, 40;
    --bs-link-hover-color: var(--tomato-dark);
    --bs-link-hover-color-rgb: 43, 33, 24;
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--crust);
}

body {
    font-family: var(--primary-font);
    background-color: var(--cream);
    color: var(--ink);
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: var(--secondary-font);
    font-weight: 800;
    color: var(--ink);
}

h1 {
    padding-top: 33px;
    padding-bottom: 15px;
}

.text-muted {
    color: var(--muted) !important;
}

/* ==========================================
   BUTTONS (every page)
   ========================================== */
.btn {
    border-radius: 999px;
    font-weight: 700;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.btn-primary {
    --bs-btn-bg: var(--tomato);
    --bs-btn-border-color: var(--tomato);
    --bs-btn-hover-bg: var(--tomato-dark);
    --bs-btn-hover-border-color: var(--tomato-dark);
    --bs-btn-active-bg: var(--tomato-dark);
    --bs-btn-active-border-color: var(--tomato-dark);
    --bs-btn-disabled-bg: var(--tomato);
    --bs-btn-disabled-border-color: var(--tomato);
    --bs-btn-focus-shadow-rgb: 181, 65, 40;
}

.btn-outline-primary {
    --bs-btn-color: var(--tomato);
    --bs-btn-border-color: var(--tomato);
    --bs-btn-hover-color: var(--tomato);
    --bs-btn-hover-bg: var(--crust);
    --bs-btn-hover-border-color: var(--tomato);
    --bs-btn-active-color: var(--tomato);
    --bs-btn-active-bg: var(--crust);
    --bs-btn-active-border-color: var(--tomato);
    border-width: 2px;
}

.btn-success {
    --bs-btn-bg: var(--basil);
    --bs-btn-border-color: var(--basil);
    --bs-btn-hover-bg: #2E6419;
    --bs-btn-hover-border-color: #2E6419;
}

/* With our background the default text fails accessibility */
.btn-outline-secondary {
    --bs-btn-color: #333;
}

/* Ditto */
.btn-outline-danger {
    --bs-btn-color: #A00;
}

/* To help prevent wrapping between font-awesome icons and surrounding text,
   particularly in buttons
*/
.fas {
    display:inline;
}

/* ==========================================
   NAVIGATION BAR
   ========================================== */
#navbar.navbar {
    background-color: var(--cream);
    border-bottom: 2px solid var(--crust);
}

#navbar.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--code-font);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--ink);
}

#navbar.navbar .brand-dot {
    color: var(--tomato);
}

#navbar.navbar .navbar-nav .nav-link {
    color: var(--ink);
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

#navbar.navbar .navbar-nav .nav-link:hover,
#navbar.navbar .navbar-nav .nav-link:focus,
#navbar.navbar .navbar-nav .nav-link.active {
    color: var(--tomato);
}

#navbar.navbar .navbar-nav .nav-link.active {
    font-weight: 700;
}

#navbar.navbar .navbar-toggler {
    border-color: var(--crust);
}

#navbar.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232B2118' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ==========================================
   HERO (home page)
   ========================================== */
#hero {
    position: relative;
    overflow: hidden;
    padding: 24px 0 56px;
}

/* Butter-coloured circle behind the logo */
#hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: var(--butter);
    opacity: 0.35;
    right: -140px;
    top: -120px;
}

#hero .container {
    position: relative;
}

.hero-eyebrow {
    font-family: var(--code-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--basil);
    margin-bottom: 12px;
}

.hero-title {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 1.05;
    padding: 0;
    margin-bottom: 20px;
}

.hero-title em {
    font-style: normal;
    color: var(--tomato);
}

.hero-blurb {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 34em;
    margin-bottom: 28px;
}

.hero-art {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

/* On tablets, laptops and desktops (logo beside the text), shrink the logo on short screens so the whole
   pot and "Reci.py" wordmark fit above the fold instead of being cut off.
   The logo is about 1.16 times taller than it is wide; 190px leaves room
   for the navbar and the hero's padding. */
@media (min-width: 768px) {
    .hero-art {
        max-width: min(440px, max(260px, calc((100vh - 190px) / 1.16)));
    }
}

/* The pot and the "Reci.py" words are two images so only the pot moves */
.pot-wrap {
    position: relative;
    z-index: 2;
    width: 73%;
    margin: 0 auto;
    transform-origin: 50% 95%;
    animation: pot-rock 4s ease-in-out infinite alternate;
}

.hero-pot {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 18px rgba(43, 33, 24, 0.15));
    transform-origin: 50% 100%;
    animation: pot-simmer 0.7s ease-in-out infinite alternate;
}

.hero-wordmark {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 6px;
}

/* The three green steam wisps wiggle like worms.
   Each wisp is made of 40 thin strips (see index.html). Every strip sways
   left and right a little later than the one below it, so a wave travels
   up the steam. The whole wisp also drifts up and fades a little. */
.wisp {
    position: absolute;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    animation: wisp-rise 2.4s ease-in-out infinite alternate;
}

.wisp span {
    flex: 1;
    background-repeat: no-repeat;
    background-size: 100% 4000%;
    background-position: 0 calc(var(--i) * 100% / 39);
    animation: wisp-wiggle 1.1s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.04s);
}

.wisp-1 { left: 17.56%; top: 15.53%; width: 16.89%; aspect-ratio: 76 / 125; }
.wisp-2 { left: 27.33%; top: 0; width: 12.67%; aspect-ratio: 57 / 142; animation-delay: -0.8s; }
.wisp-3 { left: 38.44%; top: 15.53%; width: 8.67%; aspect-ratio: 39 / 104; animation-delay: -1.5s; }

.wisp-1 span { background-image: url("../images/reci_py_steam_1.c8e4368abefa.png"); }
.wisp-2 span { background-image: url("../images/reci_py_steam_2.1e3db53b6c3c.png"); animation-duration: 1.3s; }
.wisp-3 span { background-image: url("../images/reci_py_steam_3.656e4789e765.png"); animation-duration: 0.95s; }

/* Slowly rock back and forth */
@keyframes pot-rock {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}

/* Tiny bubbling bounce, like it's simmering */
@keyframes pot-simmer {
    from { transform: translateY(0) scaleY(1); }
    to { transform: translateY(-3px) scaleY(1.015); }
}

@keyframes wisp-wiggle {
    from { transform: translateX(-14%); }
    to { transform: translateX(14%); }
}

@keyframes wisp-rise {
    from { transform: translateY(4px); opacity: 0.7; }
    to { transform: translateY(-14px); opacity: 1; }
}

/* Switch the animation off for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .pot-wrap,
    .hero-pot,
    .wisp,
    .wisp span {
        animation: none;
    }
}

/* The sticker stays on one line and shrinks with the logo,
   so it never wraps and covers the pot on smaller screens.
   It sits in front of the pot, so the steam rises up behind it */
.hero-sticker {
    position: absolute;
    z-index: 3;
    top: 0;
    left: -6px;
    background: var(--butter);
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(0.7rem, 1.6vw, 1rem);
    white-space: nowrap;
    padding: 0.5em 1em;
    border-radius: 999px;
    transform: rotate(-6deg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* ==========================================
   RECIPE LIST CARDS (home page)
   ========================================== */
.recipe-card {
    background: var(--cream);
    border: 1px solid var(--crust);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.recipe-card:hover,
.recipe-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(43, 33, 24, 0.1);
}

.recipe-card .card-title a {
    font-family: var(--secondary-font);
    color: var(--ink);
}

.recipe-list-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.recipe-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) repeat(3, minmax(135px, 1fr)) auto auto auto;
    align-items: end;
    gap: 0.65rem;
    padding: 0.8rem;
    margin-bottom: 1.5rem;
    background: var(--crust);
    border: 1px solid var(--butter);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(43, 33, 24, 0.08);
    font-family: var(--primary-font);
}

.recipe-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.recipe-toolbar-search {
    min-width: 0;
}

.recipe-toolbar label {
    font-size: 0.8rem;
    font-weight: 700;
}

.recipe-toolbar input,
.recipe-toolbar select {
    width: 100%;
    min-height: 36px;
    padding: 0.35rem 0.6rem;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--muted);
    border-radius: 6px;
    font: inherit;
    font-size: 0.88rem;
}

.recipe-toolbar-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    white-space: nowrap;
}

.recipe-toolbar-check input {
    min-height: auto;
}

.recipe-toolbar-submit,
.recipe-toolbar-reset {
    min-height: 38px;
    white-space: nowrap;
}

.recipe-toolbar-reset {
    display: inline-flex;
    align-items: center;
    padding: 0 0.35rem;
    color: var(--tomato);
    font-weight: 700;
}

.recipe-toolbar input:focus,
.recipe-toolbar select:focus {
    border-color: var(--tomato);
    box-shadow: 0 0 0 3px rgba(181, 65, 40, 0.18);
    outline: 0;
}

@media (max-width: 767.98px) {
    .recipe-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .recipe-toolbar-search {
        grid-column: 1 / -1;
    }

    .recipe-toolbar-submit,
    .recipe-toolbar-reset {
        justify-self: start;
    }
}

.recipe-card-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.like-button {
    padding: 0.2rem 0.45rem;
    color: var(--tomato);
    background: transparent;
    border: 0;
    font-weight: 700;
}

.like-button:hover,
.like-button:focus-visible {
    color: var(--tomato-dark);
}

/* ==========================================
   PROFILE PAGE
   ========================================== */
.profile-page {
    max-width: 1180px;
    padding-top: 2.5rem;
    padding-bottom: 4rem;
}

.profile-page-header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin-bottom: 3rem;
    text-align: center;
}

.profile-page-header h1 {
    margin: 0;
    padding: 0;
}

.profile-page-header .btn {
    position: absolute;
    right: 0;
}

.profile-recipe-section {
    margin-bottom: 3.5rem;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.profile-section-heading h2 {
    margin: 0;
}

.profile-recipe-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    color: var(--cream);
    background: var(--tomato);
    border-radius: 999px;
    font-family: var(--code-font);
    font-size: 0.8rem;
    font-weight: 600;
}

.profile-recipe-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.profile-recipe-card {
    display: flex;
    min-width: 0;
}

.profile-recipe-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.profile-recipe-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.profile-recipe-card .card-title {
    margin-bottom: 0.5rem;
}

.profile-recipe-card .card-text {
    flex: 1;
}

.profile-recipe-meta,
.profile-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.profile-recipe-meta {
    margin: 0.75rem 0 1rem;
}

.profile-card-actions {
    justify-content: flex-start;
    margin-top: auto;
}

.profile-pending-note {
    margin-right: auto;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.profile-card-actions .btn {
    white-space: nowrap;
}

.profile-empty-state {
    padding: 2rem;
    color: var(--ink);
    background: var(--crust);
    border: 1px solid var(--butter);
    border-radius: 10px;
    text-align: center;
}

.profile-empty-state p {
    margin-bottom: 1rem;
}

.profile-account-section {
    padding-top: 2.5rem;
    border-top: 2px solid var(--crust);
}

.profile-account-section h2 {
    margin-bottom: 1.25rem;
}

.profile-account-form {
    max-width: 620px;
}

.profile-password-reset {
    margin-top: 1.5rem;
    color: var(--muted);
}

.profile-password-reset a {
    color: var(--tomato);
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .profile-recipe-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .profile-page {
        padding-top: 1.5rem;
    }

    .profile-page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2.25rem;
        text-align: left;
    }

    .profile-page-header .btn {
        position: static;
    }

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

.recipe-card-img {
    height: 170px;
    object-fit: cover;
}

.recipe-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--crust);
    color: var(--tomato);
    font-size: 3rem;
}

/* Placeholder colour changes with difficulty */
.recipe-card-placeholder.thumb-easy { background-color: var(--cream); color: var(--basil); }
.recipe-card-placeholder.thumb-medium { background-color: var(--butter); color: var(--ink); }
.recipe-card-placeholder.thumb-hard { background-color: var(--tomato); color: var(--cream); }

/* Little rounded "pills" for time and difficulty */
.recipe-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--crust);
    color: var(--ink);
}

.recipe-tag.tag-easy { background: var(--cream); color: var(--basil); }
.recipe-tag.tag-medium { background: var(--butter); color: var(--ink); }
.recipe-tag.tag-hard { background: var(--tomato); color: var(--cream); }

/* Recipe status labels on the My recipes page */
.status-tag.status-pending { background: #FBEAC2; color: #7A5A0B; }
.status-tag.status-approved,
.status-tag.status-published { background: #DDEBD9; color: #2E6419; }
.status-tag.status-rejected { background: #F6D3CB; color: var(--tomato-dark); }

/* Previous / Next buttons */
.pagination {
    --bs-pagination-color: var(--tomato);
    --bs-pagination-hover-color: var(--tomato-dark);
    --bs-pagination-hover-bg: var(--crust);
    --bs-pagination-border-color: var(--crust);
    --bs-pagination-disabled-color: var(--muted);
    --bs-pagination-disabled-bg: var(--cream);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(181, 65, 40, 0.25);
}

/* ==========================================
   SITE FOOTER
   ========================================== */
.site-footer {
    background-color: var(--ink);
    color: #F8EDE3;
    padding: 24px 0;
}

/* Team GitHub links */
.site-footer .team-credits {
    font-size: 0.9rem;
    color: #D9C9B6;
}

.site-footer .team-credits a {
    color: #F8EDE3;
    font-family: var(--code-font);
    text-decoration: none;
    border-bottom: 1px solid rgba(248, 237, 227, 0.4);
}

.site-footer .team-credits a:hover,
.site-footer .team-credits a:focus {
    color: var(--butter);
    border-bottom-color: var(--butter);
}


/* ==========================================
   LAYOUT STRUCTURES
   ========================================== */
.errorlist {
    color: var(--tomato-dark);
}

#messages {
    margin-top: 90px;
}

main {
    margin-bottom: 33px;
}

/* ==========================================
   FORMS (every page) AND ACCOUNT PAGES
   ========================================== */
.form-label {
    font-weight: 500;
}

.form-control,
.form-select {
    border: 1.5px solid #DCCBB7;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    background-color: #fff;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--tomato);
    box-shadow: 0 0 0 0.2rem rgba(181, 65, 43, 0.18);
}

.form-check-input:checked {
    background-color: var(--tomato);
    border-color: var(--tomato);
}

.form-text,
.form-text li {
    color: var(--muted);
    font-size: 0.85rem;
}

.asteriskField {
    color: var(--tomato);
    margin-left: 2px;
}

.invalid-feedback {
    color: var(--tomato-dark);
}

.auth-card {
    background: #fff;
    border: 1px solid var(--crust);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 0 1rem 2.5rem rgba(43, 33, 24, 0.08);
}

@media (min-width: 576px) {
    .auth-card {
        padding: 2.5rem 2.5rem 2rem;
    }
}

.auth-eyebrow {
    font-family: var(--code-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--basil);
    margin-bottom: 0.5rem;
}

.auth-card h1,
.auth-title {
    font-size: 2.1rem;
    padding: 0;
    margin-bottom: 0.5rem;
}

.auth-intro {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.auth-switch {
    text-align: center;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--crust);
}

.auth-switch a {
    font-weight: 700;
}

/* ==========================================
   RECIPE DETAIL PAGE
   ========================================== */
.recipe-detail-image {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 540px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.recipe-image-card,
.recipe-summary-card,
.recipe-content-card {
    border: 1px solid var(--crust);
    border-radius: 16px;
    box-shadow: 0 0.75rem 2rem rgba(43, 33, 24, 0.08);
}

.recipe-facts {
    color: var(--ink);
}

.recipe-facts span {
    padding: 0.65rem 0.85rem;
    background: #fff;
    border-left: 3px solid var(--butter);
}

.recipe-content {
    border-top: 1px solid var(--crust);
}

.recipe-tabs .recipe-tab {
    color: var(--ink);
    font-weight: bold;
}

.recipe-tabs .recipe-tab.active {
    color: var(--tomato);
    border-color: var(--crust) var(--crust) #fff;
}

.recipe-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 0.5rem;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease, padding 0.45s ease;
}

.recipe-panel.is-open {
    max-height: 1000px;
    padding: 1.5rem 0.5rem 0.5rem;
    opacity: 1;
}

.ingredient-list,
.method-list {
    padding-left: 1.25rem;
}

.ingredient-list li,
.method-list li {
    margin-bottom: 0.85rem;
    padding-left: 0.35rem;
}

.method-list li::marker {
    color: var(--tomato);
    font-weight: bold;
}

/* ==========================================
   SMALL SCREENS
   ========================================== */
@media (max-width: 575.98px) {
    #hero::before {
        width: 320px;
        height: 320px;
        right: -120px;
        top: -80px;
    }

    .hero-art {
        max-width: 280px;
    }
}