/* BahaiParenting.org — site stylesheet */
@import url("fonts.css");

:root{
  --teal:#4a90b8; --teal-dark:#3d7fa6; --teal-deep:#2c5f7e;
  --slate:#2c4a5e; --slate-deep:#243d4e;
  --ink:#2c3e4a; --body:#3a4d59; --muted:#6b7d88; --faint:#8a9aa4;
  --line:#dde6ea; --line-soft:#eef2f4; --wash:#f7f9fa; --wash-blue:#eef3f6;
  --gold:#c99a3d; --gold-dark:#8a6d2f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wash);color:var(--body);font:400 15px/1.7 Montserrat,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--teal-dark)}
a:hover{color:var(--teal-deep)}
img{max-width:100%;display:block}
h1,h2,h3{color:var(--slate);line-height:1.3}

/* Header */
.site-header{background:var(--teal);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,32px);height:64px;position:relative;z-index:5}
.logo{font:700 clamp(15px,2.5vw,19px) Montserrat,sans-serif;letter-spacing:.04em;color:#fff;text-decoration:none}
.logo:hover{color:#fff}
.site-nav{display:flex;gap:28px;font:500 14px Montserrat,sans-serif}
.site-nav a{color:#fff;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.site-nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
.site-nav a[aria-current="page"]{border-bottom-color:#fff}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;line-height:1;padding:8px 10px;cursor:pointer}
@media (max-width:759px){
  .site-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--teal-dark);flex-direction:column;gap:0;padding:8px 0}
  .site-nav.open{display:flex}
  .site-nav a{padding:13px 24px;font-size:15px;border-bottom:none}
  .site-nav a[aria-current="page"]{background:rgba(255,255,255,.12);font-weight:600}
  .nav-toggle{display:block}
}

/* Layout */
.container{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(32px,6vw,56px) 0}
.band{background:var(--slate);padding:clamp(28px,5vw,48px) 0;color:#fff}
.band h1{margin:0;font:600 clamp(24px,4vw,34px) Montserrat,sans-serif;color:#fff}
.band .lede{margin:8px 0 0;font-size:clamp(13.5px,2vw,15px);color:#aec4d1;max-width:720px;text-wrap:pretty}
.band .lede strong{color:#fff}
.crumbs{font:500 12.5px Montserrat,sans-serif;color:#8fa9ba;margin-bottom:10px}
.crumbs a{color:#9ec4da;text-decoration:none}
.crumbs a:hover{color:#fff}

/* Split rows + quotes */
.split{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,40px);align-items:center}
.split>img{flex:1 1 300px;max-width:460px;width:100%;min-width:240px;border-radius:12px;object-fit:cover}
blockquote.q{flex:1 1 340px;margin:0;border-left:3px solid var(--teal);padding:6px 0 6px clamp(18px,3vw,28px)}
blockquote.q p{margin:0 0 12px;font:500 clamp(16px,2.2vw,20px)/1.75 Lora,serif;color:var(--ink);text-wrap:pretty}
blockquote.q footer{font:600 13px Montserrat,sans-serif;color:var(--teal-dark)}
blockquote.q.small p{font-size:16px}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
a.link-card{text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s}
a.link-card:hover{border-color:var(--teal)}
a.link-card .t{font:600 17px Montserrat,sans-serif;color:var(--slate)}
a.link-card .d{font-size:13.5px;line-height:1.6;color:var(--muted)}
a.link-card .m{font:600 12.5px Montserrat,sans-serif;color:var(--teal-dark);margin-top:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--teal);color:#fff;border:none;border-radius:8px;padding:13px 22px;font:600 14px Montserrat,sans-serif;min-height:44px;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--teal-dark);color:#fff}
.btn.ghost{background:#fff;color:var(--body);border:1.5px solid #c9d6dd}
.btn.ghost:hover{background:var(--wash)}

/* Notices */
.notice{margin:0;font:500 13px/1.6 Montserrat,sans-serif;color:var(--gold-dark);background:#f6efdd;border:1px solid #eadfc2;border-radius:8px;padding:12px 16px}

/* Habit grid */
.habit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.habit-grid figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.habit-grid img{width:100%;aspect-ratio:16/10;object-fit:cover}
.habit-grid figcaption{padding:16px 18px;font:600 15px/1.4 Montserrat,sans-serif;color:var(--slate)}

/* FAQ (kids questions) */
details.faq{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
details.faq summary{display:flex;align-items:center;gap:14px;padding:20px 22px;font:600 clamp(15px,2vw,17px) Montserrat,sans-serif;color:var(--slate);min-height:44px;cursor:pointer;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary .chev{color:var(--teal);transition:transform .15s;display:inline-block}
details.faq[open] summary .chev{transform:rotate(90deg)}
details.faq .body{padding:0 22px 24px 48px;display:flex;flex-direction:column;gap:14px;font-size:14.5px;line-height:1.8}
details.faq .body p{margin:0}
details.faq .body h3{margin:6px 0 0;font:600 15.5px Montserrat,sans-serif}
details.faq blockquote.q p{font-size:16px}

/* Footer */
.site-footer{background:var(--slate);padding:clamp(28px,5vw,44px) clamp(16px,4vw,32px) 26px;color:#aec4d1}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between;max-width:1180px;margin:0 auto}
.site-footer .mission{flex:1 1 340px;max-width:520px}
.site-footer .mission .q{margin:0 0 10px;font:italic 400 14px/1.75 Lora,serif;color:#cfdde6}
.site-footer .mission .note{margin:0;font-size:12.5px;color:#8fa9ba}
.site-footer nav{display:flex;flex-direction:column;gap:10px}
.site-footer nav span{font:600 13px Montserrat,sans-serif;color:#fff}
.site-footer nav a{font:400 13px Montserrat,sans-serif;color:#9ec4da;text-decoration:none}
.site-footer nav a:hover{color:#fff}
.site-footer .navs{display:flex;gap:56px;flex-wrap:wrap}
.site-footer .legal{margin:30px auto 0;max-width:1180px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);text-align:center;font-size:12.5px}
.site-footer .legal strong{color:#fff}

/* Home hero */
.hero{position:relative;background:var(--slate) url("../images/main-background.jpg") center/cover no-repeat;min-height:min(72vh,620px);display:flex;align-items:center;justify-content:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,42,55,.55),rgba(24,42,55,.72))}
.hero-inner{position:relative;text-align:center;padding:clamp(48px,10vw,96px) clamp(20px,5vw,40px);max-width:860px}
.hero h1{margin:0 0 18px;font:600 clamp(30px,6vw,52px) Montserrat,sans-serif;color:#fff;letter-spacing:.01em}
.hero .verse{margin:0 0 18px;font:italic 400 clamp(17px,2.6vw,23px)/1.7 Lora,serif;color:#e8f0f5;text-wrap:pretty}
.hero .verse a{color:#fff}
.hero .attrib{margin:0;font:500 13px Montserrat,sans-serif;color:#b9cedd;letter-spacing:.06em}

/* Warnings link card/button */
a.warn-card{text-decoration:none;background:var(--slate);border-radius:12px;padding:clamp(22px,4vw,30px);display:flex;flex-wrap:wrap;align-items:center;gap:18px}
a.warn-card:hover{background:var(--slate-deep)}
a.warn-card .ic{flex:none;width:46px;height:46px;border-radius:50%;background:#f5e7e4;color:#a05343;display:flex;align-items:center;justify-content:center;font:700 20px Montserrat,sans-serif}
a.warn-card .tx{flex:1 1 300px;display:flex;flex-direction:column;gap:4px}
a.warn-card .tx .t{font:600 17px Montserrat,sans-serif;color:#fff}
a.warn-card .tx .d{font-size:13.5px;line-height:1.6;color:#aec4d1}
a.warn-card .go{flex:none;font:600 14px Montserrat,sans-serif;color:#9ec4da}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}