/* ---------- Light mode: warm, soothing "spice kitchen" palette ---------- */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: #B5591E; /* terracotta / paprika   */
    --md-primary-fg-color--light: #D98A4E;
    --md-primary-fg-color--dark: #8A3F12;
    --md-primary-bg-color: #FFF9F0;
    --md-primary-bg-color--light: #FFF9F0;

    --md-accent-fg-color: #C9922B; /* saffron / turmeric gold */
    --md-accent-fg-color--transparent: rgba(201, 146, 43, 0.12);
    --md-accent-bg-color: #FFFFFF;

    --md-default-bg-color: #FBF5EA; /* warm cream page bg      */
    --md-default-fg-color: #3B2E26; /* soft espresso text      */
    --md-default-fg-color--light: #6B584C;
    --md-default-fg-color--lighter: #A8907F;
    --md-default-fg-color--lightest: #E8DCC8;

    --md-code-bg-color: #F3E8D6;
    --md-code-fg-color: #4A3826;

    --md-typeset-a-color: #A8501B; /* links: warm terracotta */
}

/* ---------- Global typography & readability ------------------------------ */
.md-typeset {
    font-size: 0.75rem;
    line-height: 1.7;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.md-typeset h1 {
    color: var(--md-primary-fg-color);
    border-bottom: 1px solid var(--md-default-fg-color--lightest);
    padding-bottom: 0.4rem;
}

.md-typeset h2 {
    margin-top: 2rem;
}

.md-typeset p,
.md-typeset li {
    line-height: 1.75;
}

/* Soft, rounded, breathable feel throughout */
.md-typeset img {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(59, 46, 38, 0.12);
}

[data-md-color-scheme="slate"] .md-typeset img {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ---------- Horizontal rules used to separate recipe sections ----------- */
.md-typeset hr {
    border-top: 2px solid var(--md-accent-fg-color--transparent);
    margin: 1.75rem 0;
}

/* ---------- Ingredient / step lists: a little extra air and warmth ------ */
.md-typeset ul li,
.md-typeset ol li {
    margin-bottom: 0.4rem;
}

.md-typeset ul li::marker {
    color: var(--md-accent-fg-color);
}

.md-typeset ol li::marker {
    color: var(--md-primary-fg-color);
    font-weight: 600;
}

.md-typeset em {
    color: var(--md-primary-fg-color);
    font-style: normal;
    font-weight: 500;
}

/* ---------- Tables (used by tablesort.js) -------------------------------- */
.md-typeset table:not([class]) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(59, 46, 38, 0.08);
}

.md-typeset table:not([class]) th {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
}

.md-typeset table:not([class]) tr:nth-child(even) {
    background-color: var(--md-accent-fg-color--transparent);
}

/* ---------- Admonitions: soften the default sharp edges ----------------- */
.md-typeset .admonition,
.md-typeset details {
    border-radius: 10px;
    border-width: 1px;
}

/* ---------- Header / nav: calm, low-contrast accents --------------------- */
.md-header {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.md-tabs {
    background-color: var(--md-accent-fg-color);
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
    color: var(--md-accent-fg-color);
}

/* ---------- Footer -------------------------------------------------------- */
.md-footer {
    background-color: var(--md-primary-fg-color--dark);
}

/* ---------- Search highlight kept in-palette ------------------------------ */
.md-typeset mark {
    background-color: var(--md-accent-fg-color--transparent);
    color: inherit;
}

.item-suggestions__toolbar {
    display: flex;
    margin-bottom: 16px;
}

.item-suggestions__button {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: #b5591e;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.item-suggestions__button:hover {
    background-color: #1d4ed8;
}

.item-suggestions__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.item-suggestions__card {
    width: 160px;
    height: 160px;
    border-radius: 16px;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.item-suggestions__card-title {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    overflow-wrap: anywhere;
    border-radius: 5px;
    background-color: #f3f4f6;
}

.item-suggestions__card-tags {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    overflow-wrap: anywhere;
    border-radius: 5px;
    background-color: #ac6721;
}

.item-suggestions__error {
    color: #b91c1c;
    font-size: 14px;
}