/*
 * Cooking Tracker — dark theme with a warm, kitchen-y accent.
 * Loaded after Bootstrap, so these custom properties win.
 */

[data-bs-theme="dark"] {
    --bs-primary: #e07a5f;            /* terracotta */
    --bs-primary-rgb: 224, 122, 95;
    --bs-primary-text-emphasis: #f2a07f;
    --bs-link-color: #f2a07f;
    --bs-link-color-rgb: 242, 160, 127;
    --bs-link-hover-color: #f6b89d;
    --bs-body-bg: #1b1d22;
    --bs-body-color: #e7e7ea;
    --bs-secondary-color: #a9adb6;
    --bs-border-color: #32353c;
    --bs-tertiary-bg: #23262d;
}

body {
    background: radial-gradient(1100px 540px at 50% -240px, #262a32 0%, #1b1d22 62%) fixed;
    min-height: 100vh;
}

.navbar {
    background-color: #15171b;
    border-bottom: 1px solid var(--bs-border-color);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .2px;
}

.card {
    background-color: #23262d;
    border-color: var(--bs-border-color);
    border-radius: .85rem;
}

.list-group-item {
    background-color: #23262d;
    border-color: var(--bs-border-color);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #cc6a51;
    --bs-btn-hover-border-color: #cc6a51;
    --bs-btn-active-bg: #cc6a51;
    --bs-btn-active-border-color: #cc6a51;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    font-weight: 600;
}

a {
    text-decoration: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

/* Recipe cards */
.recipe-card {
    height: 100%;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.recipe-card:hover {
    transform: translateY(-3px);
    border-color: var(--bs-primary);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

/* Landing hero */
.hero {
    padding: 5.5rem 0 4rem;
    text-align: center;
}

.hero .display-4 {
    font-weight: 800;
}

.hero .lead {
    color: var(--bs-secondary-color);
}

/* Star rating — read-only display */
.stars .bi-star-fill,
.stars .bi-star-half {
    color: var(--bs-warning);
}

.stars .bi-star {
    color: var(--bs-secondary-bg);
}

/* Star rating — half-step input (10 radios rendered as five stars). The radios
   sit in reverse DOM order so :hover/:checked can fill everything to the left. */
.star-input {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    font-size: 1.8rem;
    line-height: 1;
}

.star-input input {
    position: absolute;
    left: -9999px;
}

.star-input label {
    width: .5em;
    overflow: hidden;
    cursor: pointer;
    color: var(--bs-secondary-bg);
}

.star-input label i {
    display: block;
    width: 1em;
}

.star-input label.right i {
    margin-left: -.5em;
}

.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
    color: var(--bs-warning);
}