/* Chester Hills Portal v2 — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#1B9BBF;
  --teal-dark:#1480A0;
  --teal-light:#E8F6FB;
  --navy:#1B2D5B;
  --navy-light:#EEF1F8;
  --cream:#F8F6F1;
  --cream-dark:#EFECE4;
  --text:#1A1A1A;
  --text-mid:#444;
  --text-soft:#777;
  --border:#DDD9CF;
  --border-dark:#C8C3B8;
  --amber:#E6A817;
  --amber-light:#FFF8E7;
  --font-serif:'Georgia',serif;
  --font:'DM Sans',system-ui,sans-serif;
}
body{font-family:var(--font);background:var(--cream);color:var(--text);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.6}
a{color:var(--teal-dark)}
.page{max-width:680px;margin:0 auto;padding:0 0 4rem}

/* Header */
.site-header{background:var(--navy);padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between}
.header-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.header-name{color:#fff;font-size:20px;font-weight:600;letter-spacing:0.01em;display:block}
.header-sub{color:rgba(255,255,255,0.5);font-size:12px;display:block;margin-top:1px}
.header-right{display:flex;align-items:center;gap:1.25rem}
.header-phone{color:rgba(255,255,255,0.85);font-size:15px;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:6px}
.header-phone i{font-size:16px;color:var(--teal)}
.header-back{color:rgba(255,255,255,0.7);font-size:14px;text-decoration:none;display:flex;align-items:center;gap:5px}
.header-back:hover{color:#fff}

/* Alert */
.alert{background:var(--amber-light);border-left:4px solid var(--amber);padding:1.25rem 2rem;font-size:16px;color:#5C3D00;line-height:1.6}
.alert strong{display:block;margin-bottom:2px;font-size:15px;font-weight:600}
.alert.hidden{display:none}

/* Page body */
.main{padding:2.5rem 2rem}

/* Page header */
.page-heading{font-family:var(--font-serif);font-size:30px;color:var(--navy);margin-bottom:0.5rem;font-weight:normal;line-height:1.25}
.page-sub{font-size:18px;color:var(--text-mid);line-height:1.6;margin-bottom:2rem}

/* Info cards */
.info-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1.25rem}
.info-card.teal{border-left:4px solid var(--teal);background:var(--teal-light)}
.info-card.amber{border-left:4px solid var(--amber);background:var(--amber-light)}
.info-card h3{font-size:17px;font-weight:600;color:var(--navy);margin-bottom:0.4rem}
.info-card p{font-size:16px;color:var(--text-mid);line-height:1.65}

/* Nav buttons */
.nav-buttons{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.nav-btn{background:#fff;border:2px solid var(--border);border-radius:12px;padding:1.5rem 1.75rem;display:flex;align-items:center;gap:1.25rem;cursor:pointer;text-decoration:none;transition:border-color 0.15s,box-shadow 0.15s}
.nav-btn:hover{border-color:var(--teal);box-shadow:0 2px 12px rgba(27,155,191,0.12)}
.nav-btn-icon{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-btn-title{font-size:20px;font-weight:600;color:var(--navy);display:block;margin-bottom:3px}
.nav-btn-sub{font-size:15px;color:var(--text-soft);line-height:1.4}
.nav-btn-arrow{font-size:22px;color:var(--border);flex-shrink:0}
.nav-btn:hover .nav-btn-arrow{color:var(--teal)}

/* Phone block */
.phone-block{background:var(--navy);border-radius:14px;padding:1.75rem 2rem;margin-bottom:2rem}
.phone-block-label{font-size:16px;color:rgba(255,255,255,0.65);margin-bottom:0.75rem;line-height:1.5}
.phone-block-num{font-size:36px;font-weight:700;color:#fff;letter-spacing:0.02em;display:block;text-decoration:none}

/* Tip */
.tip-block{background:var(--teal-light);border-radius:14px;padding:1.5rem 1.75rem;margin-bottom:2rem;border-left:4px solid var(--teal)}
.tip-label{font-size:12px;font-weight:600;color:var(--teal-dark);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem}
.tip-text{font-size:17px;color:var(--navy);line-height:1.65}

/* Section title */
.section-label{font-size:13px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem;display:block}

/* Update cards */
.update-card{background:#fff;border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:0.75rem;border:1px solid var(--border)}
.update-tag{font-size:11px;font-weight:600;color:var(--teal-dark);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.35rem;display:block}
.update-title{font-size:18px;font-weight:600;color:var(--navy);margin-bottom:0.35rem;line-height:1.3}
.update-body{font-size:16px;color:var(--text-mid);line-height:1.55}
.update-date{font-size:13px;color:var(--text-soft);margin-top:0.5rem;display:block}
.view-all-link{display:block;text-align:center;color:var(--teal-dark);font-size:16px;font-weight:500;text-decoration:none;padding:0.75rem;margin-top:0.25rem}
.view-all-link:hover{text-decoration:underline}

/* Handbook sections */
.handbook-section{background:#fff;border:1px solid var(--border);border-radius:14px;padding:2rem;margin-bottom:1.25rem}
.handbook-section-num{width:32px;height:32px;background:var(--teal-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--teal-dark);flex-shrink:0;margin-bottom:1rem}
.handbook-section h2{font-size:22px;font-weight:600;color:var(--navy);margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border)}
.handbook-section p{font-size:16px;color:var(--text-mid);line-height:1.7;margin-bottom:0.85rem}
.handbook-section p:last-child{margin-bottom:0}
.handbook-section p strong{font-weight:600;color:var(--text)}
.check-list{list-style:none;margin:0.75rem 0}
.check-list li{font-size:16px;color:var(--text-mid);padding:0.45rem 0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.check-list li:last-child{border-bottom:none}
.check-list li::before{content:'✓';color:var(--teal);font-weight:600;flex-shrink:0;margin-top:1px}
.covered-list{list-style:none;margin:0.75rem 0}
.covered-list li{font-size:16px;color:var(--text-mid);padding:0.45rem 0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.covered-list li:last-child{border-bottom:none}
.covered-list li.yes::before{content:'✓';color:var(--teal);font-weight:600;flex-shrink:0;margin-top:1px}
.covered-list li.no::before{content:'✕';color:#B03A2E;font-weight:600;flex-shrink:0;margin-top:1px}
.callout{border-radius:10px;padding:1rem 1.25rem;margin:1rem 0;font-size:15px;line-height:1.6}
.callout.amber{background:var(--amber-light);border-left:3px solid var(--amber);color:#5C3D00}
.callout.teal{background:var(--teal-light);border-left:3px solid var(--teal);color:#0D4A5C}
.callout strong{font-weight:600}
.em-contact{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--border)}
.em-contact:last-child{border-bottom:none}
.em-contact-label{font-size:16px;font-weight:600;color:var(--navy)}
.em-contact-sub{font-size:14px;color:var(--text-soft)}
.em-contact-num{font-size:20px;font-weight:700;color:var(--navy)}
.contacts-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:0.5rem}
.contact-block{background:var(--cream);border-radius:10px;padding:1rem 1.1rem}
.contact-block-title{font-size:12px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:0.5rem}
.contact-block-item{font-size:15px;color:var(--text);line-height:1.7}
.contact-block-item span{font-size:13px;color:var(--text-soft);display:block}

/* Forms */
.form-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:2rem;margin-bottom:1.25rem}
.form-card h2{font-size:22px;font-weight:600;color:var(--navy);margin-bottom:0.4rem}
.form-card .form-sub{font-size:16px;color:var(--text-soft);margin-bottom:1.75rem;line-height:1.5}
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:16px;font-weight:600;color:var(--text);margin-bottom:8px}
.field .hint{font-size:14px;color:var(--text-soft);margin-bottom:8px;display:block}
.field input,.field select,.field textarea{width:100%;font-family:var(--font);font-size:17px;padding:0.8rem 1rem;border:2px solid var(--border);border-radius:10px;background:#fff;color:var(--text);outline:none;transition:border-color 0.15s;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal)}
.field textarea{resize:vertical}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.divider{border:none;border-top:1px solid var(--border);margin:1.5rem 0}
.ack-box{background:var(--cream);border:2px solid var(--border);border-radius:10px;padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.ack-box input{width:22px;height:22px;flex-shrink:0;margin-top:2px;cursor:pointer;accent-color:var(--teal)}
.ack-text{font-size:15px;color:var(--text-mid);line-height:1.65}
.ack-text strong{font-weight:600;color:var(--text);display:block;margin-bottom:4px}
.priority-box{border:2px solid var(--border);border-radius:10px;padding:1.25rem;display:flex;gap:1rem;align-items:flex-start;cursor:pointer;transition:border-color 0.15s,background 0.15s;margin-bottom:0.75rem}
.priority-box.active{border-color:var(--amber);background:var(--amber-light)}
.priority-box input{width:22px;height:22px;flex-shrink:0;margin-top:2px;cursor:pointer;accent-color:var(--amber)}
.priority-box-label{font-size:17px;font-weight:600;color:var(--text);display:block;margin-bottom:3px}
.priority-box-sub{font-size:15px;color:var(--text-soft);line-height:1.5}
.priority-box.active .priority-box-label{color:#5C3D00}
.priority-box.active .priority-box-sub{color:#7A5200}
.priority-note{background:var(--amber-light);border-left:3px solid var(--amber);border-radius:8px;padding:0.85rem 1rem;font-size:15px;color:#5C3D00;line-height:1.6;display:none;margin-bottom:1rem}
.priority-note.visible{display:block}
.btn-submit{width:100%;background:var(--teal);color:#fff;border:none;border-radius:10px;padding:1rem;font-family:var(--font);font-size:18px;font-weight:600;cursor:default;opacity:0.4;transition:opacity 0.15s,background 0.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-submit.enabled{opacity:1;cursor:pointer}
.btn-submit.enabled:hover{background:var(--teal-dark)}
.btn-plain{width:100%;background:var(--teal);color:#fff;border:none;border-radius:10px;padding:1rem;font-family:var(--font);font-size:18px;font-weight:600;cursor:pointer;transition:background 0.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-plain:hover{background:var(--teal-dark)}
.btn-secondary{width:100%;background:transparent;border:2px solid var(--border);border-radius:10px;padding:0.85rem;font-family:var(--font);font-size:16px;color:var(--text);cursor:pointer;margin-top:0.75rem}

/* Confirmation */
.confirmation{display:none;background:#fff;border:1px solid var(--border);border-radius:14px;padding:3rem 2rem;text-align:center;margin-bottom:1.25rem}
.confirmation.visible{display:block}
.conf-check{width:64px;height:64px;background:var(--teal-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
.conf-check i{font-size:30px;color:var(--teal)}
.confirmation h2{font-size:24px;font-weight:600;color:var(--navy);margin-bottom:0.5rem}
.confirmation p{font-size:17px;color:var(--text-mid);line-height:1.6;max-width:400px;margin:0 auto 1.25rem}
.ref-num{display:inline-block;background:var(--cream);border:1px solid var(--border);border-radius:8px;padding:0.5rem 1.25rem;font-size:18px;font-weight:600;color:var(--navy);letter-spacing:0.05em;margin-bottom:1.25rem}
.priority-conf{background:var(--amber-light);border-radius:8px;padding:0.75rem 1rem;font-size:15px;color:#5C3D00;display:none;max-width:400px;margin:0 auto 1.25rem}

/* Chapter nav (handbook) */
.chapter-nav{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem}
.chapter-nav-label{font-size:13px;font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1rem}
.chapter-links{display:flex;flex-direction:column;gap:0.5rem}
.chapter-link{display:flex;align-items:center;gap:10px;padding:0.75rem 1rem;background:var(--cream);border-radius:8px;text-decoration:none;font-size:16px;color:var(--navy);font-weight:500;transition:background 0.15s}
.chapter-link:hover{background:var(--teal-light)}
.chapter-link i{font-size:18px;color:var(--teal);flex-shrink:0}

/* Water page */
.water-contact-block{background:var(--navy);border-radius:14px;padding:1.75rem 2rem;margin-bottom:1.25rem}
.water-contact-label{font-size:16px;color:rgba(255,255,255,0.65);margin-bottom:0.5rem;line-height:1.5}
.water-contact-num{font-size:34px;font-weight:700;color:#fff;display:block;margin-bottom:0.35rem;letter-spacing:0.02em}
.water-contact-sub{font-size:14px;color:rgba(255,255,255,0.5)}
.water-reg-btn{display:block;background:var(--teal);color:#fff;text-align:center;border-radius:10px;padding:1rem;font-size:18px;font-weight:600;text-decoration:none;margin-bottom:1.25rem;transition:background 0.15s}
.water-reg-btn:hover{background:var(--teal-dark)}

/* Filter buttons (updates) */
.filter-row{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filter-btn{font-size:15px;padding:0.45rem 1rem;border:2px solid var(--border);border-radius:20px;background:#fff;color:var(--text-mid);cursor:pointer;font-family:var(--font);transition:all 0.15s}
.filter-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Login */
.login-page{min-height:100vh;background:var(--navy);background-image:radial-gradient(ellipse 60% 50% at 80% 100%,rgba(27,155,191,0.25) 0%,transparent 60%);display:flex;align-items:center;justify-content:center;padding:2rem}
.login-wrap{width:100%;max-width:420px}
.login-logo{text-align:center;margin-bottom:2.5rem}
.login-logo-name{font-size:26px;font-weight:600;color:#fff;display:block;margin-top:0.75rem}
.login-logo-sub{font-size:14px;color:rgba(255,255,255,0.45);display:block;margin-top:4px}
.login-card{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 24px 60px rgba(0,0,0,0.3)}
.login-card h2{font-family:var(--font-serif);font-size:26px;font-weight:normal;color:var(--navy);margin-bottom:0.35rem}
.login-card .login-sub{font-size:16px;color:var(--text-soft);margin-bottom:2rem;line-height:1.5}
.login-error{background:#FEF2F2;border:2px solid rgba(176,58,46,0.2);border-radius:10px;padding:0.85rem 1rem;font-size:15px;color:#B03A2E;margin-bottom:1.25rem;display:none;align-items:center;gap:8px}
.login-error.visible{display:flex}
.login-footer{text-align:center;margin-top:1.5rem;font-size:13px;color:rgba(255,255,255,0.3)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.shake{animation:shake 0.4s ease}

/* Footer */
.site-footer{background:var(--cream-dark);border-top:1px solid var(--border);padding:1.5rem 2rem;text-align:center;font-size:14px;color:var(--text-soft)}

@media(max-width:500px){
  .two-col,.contacts-grid{grid-template-columns:1fr}
  .main{padding:2rem 1.25rem}
  .site-header{padding:1rem 1.25rem}
  .phone-block-num{font-size:28px}
  .water-contact-num{font-size:26px}
}

/* ── Responsive layout ── */

/* Tablet and up: wider content, more breathing room */
@media (min-width: 768px) {
  .page { max-width: 900px; }
  .main { padding: 3rem 3rem; }
  .site-header { padding: 1.5rem 3rem; }
  .alert { padding: 1.25rem 3rem; }
  .site-footer { padding: 1.75rem 3rem; }
  .page-heading { font-size: 36px; }
  .nav-btn-title { font-size: 22px; }
  .phone-block-num { font-size: 42px; }
  .water-contact-num { font-size: 40px; }
  .two-col { grid-template-columns: 1fr 1fr; }
}

/* Desktop: full width with max content area, two-column layout where it helps */
@media (min-width: 1100px) {
  .page { max-width: 1200px; }
  .main { padding: 3.5rem 4rem; }
  .site-header { padding: 1.5rem 4rem; }
  .alert { padding: 1.25rem 4rem; }
  .site-footer { padding: 1.75rem 4rem; }

  /* Homepage: nav buttons in 2x2 grid */
  .nav-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Handbook: chapter nav in two columns */
  .chapter-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }

  /* Key contacts: two columns on desktop */
  .contacts-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Handbook sections: slightly larger text */
  .handbook-section p { font-size: 17px; }
  .check-list li { font-size: 17px; }
  .covered-list li { font-size: 17px; }

  /* Updates page: two column grid */
  #updates-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Page heading larger on desktop */
  .page-heading { font-size: 40px; }
  .page-sub { font-size: 20px; }

  /* Form cards max width on desktop so they don't stretch too wide */
  .form-card { max-width: 720px; }
  .confirmation { max-width: 720px; }
}

/* Large desktop */
@media (min-width: 1400px) {
  .page { max-width: 1400px; }
  .main { padding: 4rem 6rem; }
  .site-header { padding: 1.75rem 6rem; }
  .alert { padding: 1.25rem 6rem; }
  .site-footer { padding: 2rem 6rem; }
}

/* ── Phone number size fix ── */
.phone-block-num {
  font-size: 36px !important;
}
@media (min-width: 768px) {
  .phone-block-num { font-size: 44px !important; }
}
@media (min-width: 1100px) {
  .phone-block-num { font-size: 52px !important; }
}

/* Phone number link always white */
a.phone-block-num,
.phone-block-num a {
  color: #fff !important;
  text-decoration: none !important;
}

/* Fix inline links inside check lists */
.check-list li a,
.covered-list li a {
  color: var(--teal-dark);
  text-decoration: none;
  display: inline;
  white-space: normal;
}
.check-list li a:hover,
.covered-list li a:hover {
  text-decoration: underline;
}