/* Dr Russel Seider and Associates. Tokens from the brand pack (Brand_Tokens.css). */
:root {
    --seider-evergreen: #244C49;
    --seider-rose: #B86B7B;
    --seider-ivory: #F7F3ED;
    --seider-sage: #DCE7DF;
    --seider-ink: #263A38;
    --seider-line: #D9DDD6;
    --seider-pale-rose: #EBD7D9;
    /* Brand rose is 3.5:1 on ivory, so it stays decorative; this deeper rose is for text and buttons (AA). */
    --seider-rose-deep: #94525F;
    --seider-font-display: 'Lora', Georgia, serif;
    --seider-font-body: 'Manrope', Arial, sans-serif;
    --seider-radius: 12px;
    --primary-color: var(--seider-evergreen);
    --primary-dark: var(--seider-ink);
    --primary-light: var(--seider-sage);
    --secondary-color: var(--seider-rose-deep);
    --accent-color: var(--seider-rose-deep);
    --brand-primary: var(--seider-evergreen);
    --brand-secondary: var(--seider-rose-deep);
    --text-primary: var(--seider-ink);
    --text-secondary: #56655F;
    --background: var(--seider-ivory);
    --border-color: var(--seider-line);
    --bs-body-font-family: var(--seider-font-body);
    --bs-link-color: var(--seider-evergreen);
    --bs-link-hover-color: var(--seider-ink);
}
body { font-family: var(--seider-font-body); color: var(--seider-ink); }
h1, h2 { font-family: var(--seider-font-display); }
a { color: var(--primary-color); }
header { border-top: 4px solid var(--seider-evergreen); }
.brand-logo { width: 52px; height: auto; max-width: 100%; display: block; }
.logo { gap: 14px; }
.logo h1 { max-width: none; font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: var(--seider-evergreen); letter-spacing: 0; text-transform: none; }
.logo h1 span { display: block; margin-top: 4px; font-family: var(--seider-font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.hero {
    padding: 3.5rem 0;
    background: radial-gradient(circle at 88% 12%, rgba(184, 107, 123, 0.10), transparent 38%),
                linear-gradient(135deg, var(--seider-ivory) 0%, var(--seider-sage) 100%);
}
.hero-content { padding: 1.5rem 0; }
.hero-content .brand-eyebrow {
    color: var(--seider-rose-deep);
    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(2.2rem, 4.5vw, 3.8rem); line-height: 1.15; color: var(--seider-evergreen); }
.hero-content h2 span { display: block; color: var(--seider-evergreen); font-weight: 500; }
.hero-content p { max-width: 500px; font-size: 1rem; line-height: 1.9; }
.hero-image { padding: 16px; display: flex; justify-content: center; }
.hero-image img { width: 100%; max-width: 340px; height: auto; border-radius: 0; box-shadow: none; }
.btn-primary, .btn-secondary { border-radius: var(--seider-radius); }
.resource-card { border-top: 4px solid var(--seider-evergreen); 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); }
.practice-contact { margin-bottom: 3rem; }
.contact-card { border-top: 3px solid var(--seider-rose); }
footer { background-color: var(--seider-evergreen); color: white; }
footer .disclaimer { color: white; }

.login-container, .register-container {
    padding: 36px 16px;
    background: radial-gradient(circle at 15% 10%, rgba(36, 76, 73, 0.10), transparent 45%),
                radial-gradient(circle at 90% 90%, rgba(184, 107, 123, 0.12), transparent 40%),
                var(--seider-ivory);
}
.login-card, .register-card {
    border: 1px solid var(--seider-line);
    border-top: 5px solid var(--seider-evergreen);
    box-shadow: 0 16px 45px rgba(38, 58, 56, 0.1);
}
.auth-logo { width: 100%; max-width: 320px; margin: 0 auto 12px; }
.logo-subtitle { color: var(--seider-evergreen); font-family: var(--seider-font-display); font-size: 1.05rem; }
.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(--seider-evergreen); box-shadow: 0 0 0 0.2rem rgba(36, 76, 73, 0.2); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--seider-evergreen); }
:focus-visible { outline-color: var(--primary-color); }
.navbar { background-color: var(--seider-evergreen); }
.navbar .navbar-brand { white-space: normal; max-width: 100%; font-size: 1.15rem; font-family: var(--seider-font-display); }
.navbar .btn-logout { background-color: var(--seider-rose-deep); }
.navbar .btn-logout:hover { background-color: #7A4250; }
.btn-enable { background-color: var(--seider-evergreen); }
.btn-enable:hover { background-color: var(--primary-dark); }
.stats-card h3 { color: var(--seider-evergreen); }

@media (max-width: 600px) {
    .brand-logo { width: 42px; }
    .auth-logo { max-width: 280px; }
    .logo h1 { font-size: 1.05rem; }
    .login-card, .register-card { padding: 28px 20px; }
    .hero { padding: 1.5rem 0; }
    .hero-content { padding: 0; }
    .hero-image { padding: 0; max-width: 220px; margin: auto; }
}