/* MAMI website palette; darker coral and sage are used for readable controls. */
:root {
    --mami-sage: #b3beae;
    --mami-bright-coral: #ff6060;
    --mami-taupe: #5c564c;
    --primary-color: #a33f3a;
    --primary-dark: #83332f;
    --primary-light: #fbeae7;
    --secondary-color: #53634b;
    --accent-color: #a33f3a;
    --mami-green: #53634b;
    --mami-coral: #a33f3a;
    --text-primary: #5c564c;
    --text-secondary: #666666;
    --background: #f7f7f3;
    --border-color: #e2e4dc;
    --bs-body-font-family: 'Poppins', sans-serif;
    --bs-link-color: #a33f3a;
    --bs-link-hover-color: #83332f;
}
body { font-family: 'Poppins', sans-serif; color: var(--mami-taupe); }
a { color: var(--primary-color); }
header { border-top: 4px solid var(--mami-sage); }
.mami-brand-logo { width: 116px; height: auto; max-width: 100%; display: block; }
.logo { gap: 18px; }
.logo h1 { max-width: 200px; font-size: 0.8rem; line-height: 1.7; color: var(--mami-taupe); }
.hero {
    padding: 3.5rem 0;
    background: linear-gradient(rgba(247,247,243,0.83), rgba(247,247,243,0.83)),
                url('../images/mami/botanical.png') center / cover;
}
.hero-content { padding: 1.5rem 0; }
.hero-content .mami-eyebrow {
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.hero-content h2 { font-weight: 500; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.2; }
.hero-content h2 span { display: block; color: var(--primary-color); font-weight: 600; }
.hero-content p { max-width: 500px; font-size: 1rem; line-height: 1.9; }
.hero-image { padding: 16px; }
.hero-image img { border-radius: 0; box-shadow: none; width: 100%; height: auto; }
.btn-primary, .btn-secondary { border-radius: 10px; }
.resource-card { border-top: 4px solid var(--mami-sage); border-radius: 12px; }
.resource-card h3, .resources-section h2, .resource-link,
.resource-detail h3, .contact-section h2, .contact-section h3 { color: var(--primary-color); }
.resource-link:hover, .resource-detail a:hover, .contact-section a:hover { color: var(--primary-dark); }
.mami-practice-contact { margin-bottom: 3rem; }
.contact-card { border-top: 3px solid var(--mami-sage); }
footer { background-color: var(--mami-taupe); color: white; }
footer .disclaimer { color: white; }

.login-container, .register-container {
    padding: 36px 16px;
    background: #f7f7f3 url('../images/mami/banner.jpg') top center / auto 230px no-repeat;
}
.login-card, .register-card {
    border: 1px solid #e2e4dc;
    border-top: 5px solid var(--mami-sage);
    box-shadow: 0 16px 45px rgba(92, 86, 76, 0.1);
}
.mami-auth-logo { width: 154px; margin: 0 auto 14px; }
.logo-subtitle { color: var(--mami-taupe); font-size: 13px; }
.login-card h2, .register-card h2 { font-weight: 500; font-size: 1.75rem; color: var(--primary-color); }
.btn-login, .btn-register { background-color: var(--primary-color); color: white; }
.btn-login:hover, .btn-register:hover { background-color: var(--primary-dark); color: white; }
.register-link a, .login-link a { color: var(--primary-color); }
.form-control:focus { border-color: var(--mami-green); box-shadow: 0 0 0 0.2rem rgba(179,190,174,0.3); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--mami-green); }
:focus-visible { outline-color: var(--primary-color); }
.navbar { background-color: var(--mami-taupe); }
.navbar .navbar-brand { white-space: normal; max-width: 100%; font-size: 1.15rem; }
.navbar .btn-logout { background-color: var(--primary-color); }
.navbar .btn-logout:hover { background-color: var(--primary-dark); }
.btn-enable { background-color: var(--mami-green); }
.btn-enable:hover { background-color: #415039; }
.stats-card h3 { color: var(--mami-green); }

@media (max-width: 600px) {
    .mami-brand-logo { width: 90px; }
    .mami-auth-logo { width: 140px; }
    .logo h1 { max-width: 170px; font-size: 0.7rem; }
    .login-card, .register-card { padding: 28px 20px; }
    .hero { padding: 1.5rem 0; }
    .hero-content { padding: 0; }
    .hero-image { padding: 0; max-width: 400px; margin: auto; }
}