/* =====================================================================
   Spring Wells Consolidated — supplemental styles for the new content
   pages (footer pages, resources, calculators, login, thank-you).
   Self-contained so it renders regardless of the precompiled Tailwind
   build in styles.css. Uses the same brand palette.
   ===================================================================== */
:root{
  --sw-navy:hsl(220 60% 28%);
  --sw-navy-dark:hsl(220 65% 20%);
  --sw-green:hsl(142 55% 42%);
  --sw-green-dark:hsl(142 55% 35%);
  --sw-green-tint:hsl(142 55% 95%);
  --sw-gray:hsl(220 14% 96%);
  --sw-ink:#1f242e;
  --sw-muted:#4b5563;
}

/* ---- page hero band ---- */
.pg-hero{position:relative;background:var(--sw-navy);color:#fff;padding:4.5rem 0 4rem;overflow:hidden}
.pg-hero .pg-hero-bg{position:absolute;inset:0;opacity:.12;object-fit:cover;width:100%;height:100%}
.pg-hero .wrap{position:relative}
.pg-hero .eyebrow{color:var(--sw-green);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
.pg-hero h1{font-size:2.4rem;font-weight:800;line-height:1.15;margin:0 0 .75rem}
.pg-hero p{color:rgba(255,255,255,.82);font-size:1.05rem;max-width:46rem}
@media(min-width:768px){.pg-hero h1{font-size:3rem}}

/* ---- generic section / container ---- */
.pg-wrap{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.pg-wrap{padding:0 1.5rem}}
@media(min-width:1024px){.pg-wrap{padding:0 2rem}}
.pg-section{padding:3.5rem 0}
.pg-narrow{max-width:52rem;margin:0 auto}

/* ---- breadcrumb ---- */
.pg-crumb{font-size:.8rem;color:#6b7280;margin-bottom:1.25rem}
.pg-crumb a{color:var(--sw-green);text-decoration:none}
.pg-crumb a:hover{text-decoration:underline}

/* ---- prose ---- */
.prose{color:var(--sw-muted);line-height:1.7;font-size:1rem}
.prose h2{color:var(--sw-navy);font-size:1.5rem;font-weight:700;margin:2rem 0 .75rem}
.prose h3{color:var(--sw-navy);font-size:1.15rem;font-weight:600;margin:1.5rem 0 .5rem}
.prose p{margin:0 0 1rem}
.prose ul{margin:0 0 1rem 1.2rem;list-style:disc}
.prose ol{margin:0 0 1rem 1.2rem;list-style:decimal}
.prose li{margin:.35rem 0}
.prose a{color:var(--sw-green);font-weight:500}
.prose strong{color:var(--sw-navy)}

/* ---- cards grid ---- */
.pg-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.pg-grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.pg-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.pg-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.pg-card{background:#fff;border:1px solid #eef0f3;border-radius:.85rem;padding:1.5rem;transition:box-shadow .15s,border-color .15s}
.pg-card:hover{box-shadow:0 10px 22px -8px rgba(0,0,0,.15);border-color:var(--sw-green)}
.pg-card .ic{width:2.75rem;height:2.75rem;border-radius:.6rem;background:var(--sw-navy);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:#fff}
.pg-card h3{color:var(--sw-navy);font-weight:600;font-size:1.05rem;margin:0 0 .4rem}
.pg-card p{color:var(--sw-muted);font-size:.9rem;margin:0 0 .75rem;line-height:1.55}
.pg-card a.more{display:inline-flex;align-items:center;gap:.3rem;color:var(--sw-green);font-weight:500;font-size:.875rem;text-decoration:none}
.pg-card a.more:hover{text-decoration:underline}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:9999px;font-weight:500;font-size:.9rem;padding:.7rem 1.5rem;cursor:pointer;border:2px solid transparent;text-decoration:none;transition:background .15s,color .15s}
.btn-primary{background:var(--sw-green);color:#fff}
.btn-primary:hover{background:var(--sw-green-dark)}
.btn-navy{background:var(--sw-navy);color:#fff}
.btn-navy:hover{background:var(--sw-navy-dark)}
.btn-outline{border-color:var(--sw-navy);color:var(--sw-navy);background:transparent}
.btn-outline:hover{background:var(--sw-navy);color:#fff}

/* ---- badges ---- */
.badge{display:inline-block;padding:.15rem .6rem;border-radius:9999px;font-size:.72rem;font-weight:500;background:var(--sw-green-tint);color:var(--sw-green)}

/* ---- forms ---- */
.pg-form{background:#fff;border:1px solid #eef0f3;border-radius:1rem;padding:1.75rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pg-form .row{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.pg-form .row.two{grid-template-columns:1fr 1fr}}
.pg-form label{display:block;font-size:.8rem;font-weight:600;color:var(--sw-navy);margin:0 0 .35rem}
.pg-form input,.pg-form select,.pg-form textarea{width:100%;padding:.7rem .9rem;border:1px solid #e5e7eb;border-radius:.55rem;font-size:.9rem;font-family:inherit;color:var(--sw-ink);background:#fff}
.pg-form input:focus,.pg-form select:focus,.pg-form textarea:focus{outline:none;border-color:var(--sw-green);box-shadow:0 0 0 3px hsl(142 55% 42% / .12)}
.pg-form textarea{resize:vertical;min-height:120px}
.pg-form .field{margin-bottom:1rem}
.pg-form .hp{position:absolute;left:-9999px;top:-9999px}
.pg-help{font-size:.78rem;color:#6b7280;margin-top:.35rem}

/* ---- FAQ accordion ---- */
.faq{border:1px solid #eef0f3;border-radius:.75rem;overflow:hidden;background:#fff;margin-bottom:.75rem}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.25rem;font-weight:600;color:var(--sw-navy);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{transition:transform .2s;color:var(--sw-green);flex-shrink:0}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq .body{padding:0 1.25rem 1.2rem;color:var(--sw-muted);line-height:1.65;font-size:.92rem}

/* ---- info / callout ---- */
.callout{background:var(--sw-green-tint);border-radius:.85rem;padding:1.25rem 1.5rem;color:var(--sw-muted);font-size:.92rem;line-height:1.6}
.callout strong{color:var(--sw-navy)}
.callout.navy{background:var(--sw-navy);color:rgba(255,255,255,.85)}
.callout.navy strong{color:#fff}

/* ---- definition list / contact rows ---- */
.kv{display:flex;gap:.6rem;align-items:flex-start;color:var(--sw-muted);font-size:.92rem;margin:.4rem 0}
.kv .lbl{color:var(--sw-navy);font-weight:600;min-width:7rem}

/* ---- calculator ---- */
.calc{background:#fff;border:1px solid #eef0f3;border-radius:1rem;padding:1.75rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.calc h3{color:var(--sw-navy);font-weight:700;font-size:1.2rem;margin:0 0 1.25rem;display:flex;align-items:center;gap:.5rem}
.calc .result{margin-top:1.25rem;background:var(--sw-gray);border-radius:.75rem;padding:1.25rem;text-align:center}
.calc .result .big{font-size:1.9rem;font-weight:800;color:var(--sw-navy);line-height:1.1}
.calc .result .lbl{font-size:.78rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}
.calc .sub{display:flex;justify-content:space-between;font-size:.85rem;color:var(--sw-muted);margin-top:.75rem;border-top:1px solid #e5e7eb;padding-top:.75rem}

/* ---- login ---- */
.login-shell{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:3rem 1rem;background:var(--sw-gray)}
.login-card{width:100%;max-width:25rem;background:#fff;border-radius:1rem;box-shadow:0 20px 40px -12px rgba(0,0,0,.18);padding:2rem}
.login-card .brand{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-bottom:1.25rem}
.login-card .brand img{width:2.5rem;height:2.5rem;border-radius:.5rem}
.login-card h1{text-align:center;color:var(--sw-navy);font-size:1.4rem;font-weight:800;margin:0 0 .25rem}
.login-card .muted{text-align:center;color:#6b7280;font-size:.85rem;margin:0 0 1.5rem}
.login-notice{background:hsl(38 92% 95%);border:1px solid hsl(38 80% 80%);color:#92600a;border-radius:.6rem;padding:.85rem 1rem;font-size:.85rem;line-height:1.5;margin-bottom:1.25rem}
.login-secure{display:flex;align-items:center;justify-content:center;gap:.4rem;color:var(--sw-green);font-size:.78rem;margin-top:1.25rem}

/* ---- success ---- */
.success-wrap{max-width:34rem;margin:0 auto;text-align:center}
.success-wrap .check{width:4.5rem;height:4.5rem;border-radius:9999px;background:var(--sw-green-tint);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;color:var(--sw-green)}
.success-wrap h1{color:var(--sw-navy);font-size:1.8rem;font-weight:800;margin:0 0 .5rem}
.success-wrap p{color:var(--sw-muted);line-height:1.6;margin:0 0 1.5rem}