/*
Theme Name: Time 4 A Change Housing
Theme URI: https://time4achange.org
Author: Time 4 A Change Housing
Description: Custom one-page theme for Time 4 A Change Housing, an independent living housing program serving the greater St. Louis region and Southeast Missouri.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: time4achange
*/

:root{
    --navy:#16283B;
    --navy-2:#1E3348;
    --gold:#E3A73B;
    --gold-dark:#C98F27;
    --teal:#2F6459;
    --paper:#F6F2E7;
    --clay:#D8CAB8;
    --ink:#2B2924;
    --white:#FFFDF8;
    --radius:14px;
    --maxw:1160px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    font-family:'Work Sans',sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
  }
  h1,h2,h3,h4{
    font-family:'Fraunces',serif;
    font-weight:600;
    line-height:1.12;
    margin:0 0 .5em 0;
    color:var(--navy);
  }
  p{margin:0 0 1em 0;}
  a{color:inherit;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--teal);
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:.5em;
    margin-bottom:.9em;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;background:var(--gold-dark);display:inline-block;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  section{padding:88px 0;}
  img,svg{max-width:100%;display:block;}
  :focus-visible{outline:3px solid var(--gold-dark); outline-offset:3px;}

  /* ---------- top strip ---------- */
  .topstrip{
    background:var(--navy);
    color:var(--clay);
    font-family:'IBM Plex Mono',monospace;
    font-size:.78rem;
  }
  .topstrip .wrap{
    display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:center;
    padding-top:10px;padding-bottom:10px;
  }
  .topstrip a{text-decoration:none;color:var(--white);}
  .topstrip a:hover{color:var(--gold);}
  .topstrip .region{color:var(--clay);}

  /* ---------- nav ---------- */
  header.site{
    background:var(--paper);
    border-bottom:1px solid var(--clay);
    position:sticky;top:0;z-index:50;
  }
  nav.wrap{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:14px;padding-bottom:14px;
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
  .brand svg, .brand img{width:auto;height:46px;flex:none;}
  .brand-text{font-family:'Fraunces',serif;font-weight:700;color:var(--navy);font-size:1.12rem;line-height:1.1;}
  .brand-text span{display:block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:.62rem;letter-spacing:.08em;color:var(--teal);text-transform:uppercase;margin-top:3px;}
  nav.links{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0;}
  nav.links a{
    text-decoration:none;font-weight:600;font-size:.92rem;color:var(--navy);
    padding-bottom:4px;border-bottom:2px solid transparent;
  }
  nav.links a:hover{border-bottom-color:var(--gold-dark);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Work Sans',sans-serif;font-weight:600;font-size:.92rem;
    padding:12px 22px;border-radius:999px;text-decoration:none;
    border:1px solid transparent;cursor:pointer;
  }
  .btn-gold{background:var(--gold);color:var(--navy);}
  .btn-gold:hover{background:var(--gold-dark);}
  .btn-outline{border-color:var(--navy);color:var(--navy);}
  .btn-outline:hover{background:var(--navy);color:var(--white);}
  .btn-outline-light{border-color:var(--clay);color:var(--white);}
  .btn-outline-light:hover{background:var(--white);color:var(--navy);}
  .navcta{display:flex;gap:10px;align-items:center;}
  #navToggle{display:none;}
  .burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
  .burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;padding:76px 0 96px;}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(2.4rem,4.2vw,3.6rem);}
  .hero .lede{font-size:1.12rem;max-width:46ch;color:#3c3a34;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
  .hero-stats{display:flex;gap:32px;margin-top:44px;flex-wrap:wrap;}
  .stat{font-family:'IBM Plex Mono',monospace;}
  .stat b{display:block;font-size:1.5rem;color:var(--navy);}
  .stat span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);}
  .hero-art{position:relative;}

  /* recurring arc divider — the "new day" motif */
  .arc-divider{width:100%;height:64px;display:block;margin:0;}
  .arc-divider path{stroke:var(--clay);}

  /* ---------- who we serve ---------- */
  .band-navy{background:var(--navy);color:var(--white);}
  .band-navy h2, .band-navy h3{color:var(--white);}
  .band-navy .eyebrow{color:var(--gold);}
  .band-navy .eyebrow::before{background:var(--gold);}
  .band-navy p{color:#CBD6DF;}

  .grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;}
  .card{
    background:var(--white);border:1px solid var(--clay);border-radius:var(--radius);
    padding:26px 22px;
  }
  .band-navy .card{background:var(--navy-2);border-color:#2C4257;}
  .card .icon{
    width:42px;height:42px;border-radius:10px;background:rgba(47,100,89,.12);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--teal);
  }
  .band-navy .card .icon{background:rgba(227,167,59,.14);color:var(--gold);}
  .card h4{font-family:'Work Sans',sans-serif;font-weight:700;font-size:1.02rem;margin-bottom:6px;color:var(--navy);}
  .band-navy .card h4{color:var(--white);}
  .card p{font-size:.92rem;margin:0;color:#54524a;}
  .band-navy .card p{color:#B9C6D0;}

  /* ---------- two column feature ---------- */
  .feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .feature.reverse .art{order:2;}
  .pull{
    font-family:'Fraunces',serif;font-style:italic;font-weight:500;
    font-size:1.3rem;color:var(--navy);border-left:3px solid var(--gold-dark);
    padding-left:20px;margin:24px 0;
  }
  .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
  .tag{
    font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.03em;
    background:var(--white);border:1px solid var(--clay);color:var(--navy);
    padding:8px 14px;border-radius:999px;
  }

  /* values */
  .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;}

  /* housing / services */
  .room-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px;}
  .room-card{background:var(--white);border:1px solid var(--clay);border-radius:var(--radius);padding:30px;}
  .room-card h3{font-size:1.3rem;}
  .checklist{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;}
  .checklist li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;}
  .checklist svg{flex:none;width:18px;height:18px;color:var(--teal);margin-top:2px;}

  /* service area */
  .county-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
  .county-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:28px;}
  .county-chip{
    background:var(--white);border:1px solid var(--clay);border-radius:10px;
    padding:14px 12px;font-weight:600;font-size:.88rem;color:var(--navy);text-align:center;
  }

  /* partner */
  .partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;}

  /* testimonials */
  .testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;}
  .quote-card{
    background:var(--white);border:1px dashed var(--clay);border-radius:var(--radius);
    padding:30px 26px;text-align:center;margin:0;
  }
  .quote-card p{font-family:'Fraunces',serif;font-style:italic;font-size:1.02rem;color:var(--navy);}
  .quote-card .who{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);}
  .sample-badge{
    display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.04em;
    text-transform:uppercase;background:var(--paper);color:var(--gold-dark);border:1px solid var(--clay);
    border-radius:999px;padding:4px 10px;margin-bottom:14px;
  }
  @media (max-width:920px){
    .testimonial-grid{grid-template-columns:1fr;}
  }

  /* contact / CTA band */
  .cta-band{background:var(--navy);color:var(--white);text-align:center;}
  .cta-band h2{color:var(--white);}
  .cta-band p{color:#CBD6DF;max-width:56ch;margin:0 auto 30px;}
  .cta-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:40px;}
  form.contact-form{display:grid;gap:16px;}
  form.contact-form label{font-size:.8rem;font-weight:600;color:var(--navy);display:block;margin-bottom:6px;}
  form.contact-form input, form.contact-form select, form.contact-form textarea{
    width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--clay);
    font-family:'Work Sans',sans-serif;font-size:.94rem;background:var(--white);color:var(--ink);
  }
  form.contact-form textarea{min-height:110px;resize:vertical;}
  .form-note{font-size:.8rem;color:#6b6a62;}

  /* footer */
  footer{background:var(--navy-2);color:#B9C6D0;padding:60px 0 26px;}
  .footer-grid{display:grid;grid-template-columns:1.2fr .75fr .75fr .85fr .85fr;gap:32px;}
  footer h5{font-family:'IBM Plex Mono',monospace;color:var(--gold);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;}
  footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  footer a{text-decoration:none;color:#B9C6D0;font-size:.92rem;}
  footer a:hover{color:var(--white);}
  .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .footer-brand svg, .footer-brand img{width:auto;height:38px;display:block;}
  .footer-brand .logo-plate{background:var(--paper);border-radius:8px;padding:8px 10px;display:inline-flex;}
  .footer-brand span{font-family:'Fraunces',serif;font-weight:700;color:var(--white);font-size:1.05rem;}
  .footer-bottom{
    border-top:1px solid #2C4257;margin-top:44px;padding-top:22px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#7E8FA0;
  }
  .footer-bottom a{color:#7E8FA0;}

  @media (max-width:920px){
    .grid-6{grid-template-columns:1fr 1fr;}
    .values-grid{grid-template-columns:1fr 1fr;}
    .partner-grid{grid-template-columns:1fr;}
    .hero .wrap{grid-template-columns:1fr;}
    .hero-art{order:-1;}
    .feature, .feature.reverse{grid-template-columns:1fr;}
    .feature.reverse .art{order:0;}
    .county-wrap{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:720px){
    nav.links, .navcta .btn-outline{display:none;}
    .burger{display:block;}
    nav.wrap{flex-wrap:wrap;}
    #navToggle:checked ~ .mobile-menu{max-height:400px;padding-bottom:16px;}
    .mobile-menu{max-height:0;overflow:hidden;transition:max-height .25s ease;width:100%;}
    .mobile-menu ul{list-style:none;margin:0;padding:10px 0 0;display:grid;gap:14px;}
    .mobile-menu a{text-decoration:none;font-weight:600;color:var(--navy);}
    section{padding:60px 0;}
    .grid-6{grid-template-columns:1fr;}
    .values-grid{grid-template-columns:1fr;}
    .room-grid{grid-template-columns:1fr;}
    .county-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;}
  }