/* ============================================================
   theme.css — Lincoln Psychiatric Group site colors
   Loaded right after style.css (see template_header in main.php),
   so these rules override the original theme. Selectors match
   style.css so each rule wins.
   To change a color site-wide, edit the variables below.
   ============================================================ */
:root {
    --lpg-primary:     #1F4E5A; /* Deep teal  — header, headings, links */
    --lpg-primary-dk:  #173C46; /* Teal, darker — header hover/active, mobile menu */
    --lpg-accent:      #8FAE9B; /* Sage       — secondary accents, borders */
    --lpg-mist:        #E8EFEC; /* Mist       — soft section backgrounds */
    --lpg-bg:          #FAF7F2; /* Warm ivory — page background */
    --lpg-cta:         #A85A3E; /* Clay       — buttons and calls to action only */
    --lpg-cta-hover:   #8E4A32; /* Clay, darker, for hover */
    --lpg-text:        #2B2B31; /* Charcoal   — body text */
    --lpg-muted:       #6B6B70; /* Secondary text */
    --lpg-border:      #DDD8CE; /* Input borders */
    --lpg-success:     #5E8C6F; /* Sage green — success states */
    --lpg-alert:       #C0392B; /* Safety flags / errors — kept separate from clay */
}

/* ── Page ── */
body, html { background-color: var(--lpg-bg); color: var(--lpg-text); }
h1, h2, h3, h4, h5, h6 { color: var(--lpg-text); }

/* ── Header ── */
.header { background-color: var(--lpg-primary); }
.header .wrapper h1 { color: #fff; }

/* Menu links */
.header .wrapper .menu a { color: #CFE0D6; }
.header .wrapper .menu a svg { fill: #CFE0D6; }
.header .wrapper .menu a.alt { color: #fff; }
.header .wrapper .menu a.alt svg { fill: #fff; }
.header .wrapper .menu a:hover,
.header .wrapper .menu a:active,
.header .wrapper .menu a.active { color: #fff; background-color: var(--lpg-primary-dk); }
.header .wrapper .menu a:hover svg,
.header .wrapper .menu a:active svg,
.header .wrapper .menu a.active svg { fill: #fff; }

/* Mobile menu button (hamburger) */
.header .wrapper label::before,
.header .wrapper label::after { background-color: #CFE0D6; }
.header .wrapper label:hover,
.header .wrapper label:active,
.header .wrapper input[type=checkbox]:checked ~ label { background-color: var(--lpg-primary-dk); }
.header .wrapper label:hover::before, .header .wrapper label:hover::after,
.header .wrapper label:active::before, .header .wrapper label:active::after,
.header .wrapper input[type=checkbox]:checked ~ label::before,
.header .wrapper input[type=checkbox]:checked ~ label::after { background-color: #fff; }

@media screen and (max-width: 1000px) {
    .header .wrapper .menu { background-color: var(--lpg-primary-dk); }
}

/* ── Page titles ── */
.content .page-title .icon { background-color: var(--lpg-primary); }
.content .page-title .icon svg { fill: #fff; }
.content .page-title h2 { color: var(--lpg-primary); }
.content .page-title p { color: var(--lpg-muted); }

/* ── Cards ── */
.content .block { background-color: #fff; box-shadow: 0 0 7px 1px rgba(31, 78, 90, .06); }
.content .profile-detail strong { color: var(--lpg-muted); }

/* ── Buttons ── */
.btn { background: var(--lpg-cta); color: #fff; }
.btn:hover { background: var(--lpg-cta-hover); }
.btn.blue { background: var(--lpg-primary); }          /* old blue button -> teal */
.btn.blue:hover { background: var(--lpg-primary-dk); }
.btn.green { background: var(--lpg-success); }
.btn.green:hover { background: #527D62; }
/* .btn.red is left as-is (warnings / delete) */

/* Secondary button: outlined teal so it doesn't compete with the clay one */
.btn.alt { background: #fff; color: var(--lpg-primary); border: 1px solid var(--lpg-accent); }
.btn.alt:hover { background: var(--lpg-mist); color: var(--lpg-primary); }

/* ── Forms (login, register, profile, intake pages) ── */
.form .form-label,
.form #remember_me { color: var(--lpg-text); }
.form .form-input { border-color: var(--lpg-border); color: var(--lpg-text); }
.form .form-input:focus { box-shadow: 0 0 0 3px #D3E3D8; border: 1px solid var(--lpg-primary); }
.form .form-group:focus-within .form-icon-left { fill: var(--lpg-primary); }
.form .form-link { color: var(--lpg-primary); }
.form .form-link:hover { color: var(--lpg-cta); }
.form p.register-link { color: var(--lpg-muted); }
.form div.msg.success { color: #3F6B50; }
.form div.msg.success .form-link { color: #2F5340; }

/* Login / register card icon */
.login .icon, .register .icon { background-color: var(--lpg-primary); }

/* ── Logo ── */
/* Site header: white logo on teal */
.header .wrapper h1.site-logo a { display: inline-flex; align-items: center; height: 100%; }
.header .wrapper h1.site-logo img { height: 40px; width: auto; display: block; }
@media screen and (max-width: 1000px) {
    .header .wrapper h1.site-logo { padding: 0 15px; }
    .header .wrapper h1.site-logo img { height: 34px; }
}

/* Login / register card: teal logo on white */
.login .logo, .register .logo { display: flex; justify-content: center; margin: 5px auto 0; }
.login .logo img, .register .logo img { height: 56px; width: auto; display: block; }
.login h1, .register h1 { color: var(--lpg-primary); font-size: 20px; }
.login .btn[type=submit], .register .btn[type=submit] { width: 100%; }