/* ==========================================================================
   Rainbow Sprinkler Systems LLC — shared design system
   Loaded by every page. Page-specific CSS goes in that page's own <style>,
   but colours, type, buttons, cards and the site header/footer live here so
   the public site, the customer portal and the team dashboard match.
   ========================================================================== */

:root{
  /* Brand */
  --grass:#178040; --grass-d:#0f6631; --grass-l:#2ba556;
  --pine:#0e2c1b; --leaf:#e8f4ea;
  --cream:#faf7f0; --sand:#f2ecdf;
  --gold:#c99a3f; --gold-2:#d8ad55;
  --red:#b22234; --navy:#14335e;

  /* Text + surfaces */
  --ink:#1d2a22; --mut:#5f6f64; --line:#e7e1d4; --line-strong:#d5cdb9;
  --white:#fff; --paper:var(--cream); --paper-2:var(--sand);

  /* Status */
  --ok:#1e7d32; --ok-bg:#e7f3ea;
  --warn:#8a5e12; --warn-bg:#f9efd8;
  --danger:#a5271b; --danger-bg:#fbece8;
  --info:#14335e; --info-bg:#e8eef8;

  /* Shape + motion */
  --r:22px; --r-m:16px; --r-s:12px; --r-xs:9px;
  --maxw:1720px; --maxw-read:820px;
  --e:cubic-bezier(.22,.72,.2,1);
  --sh:0 30px 60px -30px rgba(14,44,27,.45);
  --sh-s:0 14px 30px -18px rgba(14,44,27,.35);
  --sh-xs:0 2px 8px -2px rgba(14,44,27,.18);
  --focus:0 0 0 3px rgba(26,138,67,.28);
}

/* --- Legacy aliases -------------------------------------------------------
   admin.html and account.html were built on a second palette. Rather than
   rewrite several hundred rules, the old names now point at the brand
   colours above, so those pages re-skin without touching their markup. */
:root{
  --spruce:var(--pine);
  --moss:var(--grass-d);
  --sun:var(--gold);
  --rust:var(--danger);
  --water:var(--navy);
  --ink-soft:var(--mut);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* overflow-x:hidden forces overflow-y to compute to auto, which makes <html> a
   scroll container and is the usual reason position:sticky quietly stops
   sticking. overflow:clip crops the same way without creating that container,
   so the pinned scroll section works. hidden stays as the fallback. */
html,body{overflow-x:hidden;max-width:100%}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--cream);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

h1,h2,h3,h4{font-family:"Fraunces","Georgia",serif;font-weight:600;line-height:1.06;letter-spacing:-.02em;color:var(--pine)}
h1{font-size:clamp(34px,5.4vw,66px)}
h2{font-size:clamp(26px,3.8vw,46px)}
h3{font-size:clamp(19px,2vw,25px)}
h4{font-size:17px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.wrap-read{max-width:var(--maxw-read);margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.sec{padding:clamp(70px,8vw,112px) 0}
.center{text-align:center}
.hide{display:none!important}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grass-d);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--red) 0 33%,var(--gold) 33% 66%,var(--navy) 66%)}
.center .eyebrow{justify-content:center}

.lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--mut);line-height:1.7;max-width:60ch}
em{font-style:normal;color:var(--grass)}

/* The tricolour hairline used as a section/page divider. */
.spectrum{height:3px;border:none;
  background:linear-gradient(90deg,var(--red) 0 33%,var(--gold) 33% 66%,var(--navy) 66%)}

/* --- Buttons -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:600;font-size:15.5px;padding:15px 27px;border-radius:100px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .25s var(--e),box-shadow .25s var(--e),background .2s,color .2s,border-color .2s}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:disabled{opacity:.55;cursor:default;transform:none!important}
.btn-primary{background:var(--grass);color:#fff;box-shadow:0 16px 30px -14px rgba(26,138,67,.7)}
.btn-primary:hover:not(:disabled){background:var(--grass-d);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--pine);border-color:var(--line)}
.btn-ghost:hover:not(:disabled){border-color:var(--grass);color:var(--grass);transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#3a2a06;
  box-shadow:0 16px 30px -14px rgba(201,154,63,.6)}
.btn-gold:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-light:hover:not(:disabled){background:rgba(255,255,255,.22);transform:translateY(-2px)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:#e3c4bf}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn-sm{padding:9px 17px;font-size:14px}
.btn svg{flex:none}

/* --- Forms ---------------------------------------------------------------- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
input,select,textarea{
  width:100%;font-family:inherit;font-size:15.5px;padding:12px 14px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-xs);
  background:var(--white);color:var(--ink);
  transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--grass);box-shadow:var(--focus)}
input.err,select.err,textarea.err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(165,39,27,.15)}
textarea{resize:vertical;min-height:96px}
.field{margin-bottom:15px}

/* --- Cards + messages ----------------------------------------------------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:22px 24px;box-shadow:var(--sh-xs)}
.note{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);
  padding:16px 18px;font-size:14.5px;color:var(--mut);margin:26px 0}

.msg{padding:11px 14px;border-radius:var(--r-xs);font-size:14px;margin-bottom:15px;display:none}
.msg.show{display:block}
.msg.ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--pine)}
.msg.err{background:var(--danger-bg);border:1px solid var(--danger);color:var(--danger)}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:100px;
  background:var(--leaf);color:var(--grass-d)}

/* ==========================================================================
   Shared site header + footer (privacy / terms / account)
   index.html keeps its own richer header; these classes are namespaced so
   they never collide with it.
   ========================================================================== */
.sitebar{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.88);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.sitebar-in{max-width:var(--maxw);margin:0 auto;padding:12px clamp(18px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.sitebar-logo{display:inline-flex;align-items:center;gap:11px}
.sitebar-logo img{height:42px;width:auto;background:#fff;border-radius:10px;padding:4px 8px;
  box-shadow:var(--sh-xs)}
.sitebar-name{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:16px;
  color:var(--pine);line-height:1.15;letter-spacing:-.01em}
.sitebar-name span{display:block;font-family:"Inter",sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--grass-d)}
.sitebar-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sitebar-nav a{padding:8px 13px;border-radius:100px;font-size:14.5px;font-weight:600;
  color:var(--mut);transition:background .2s,color .2s}
.sitebar-nav a:hover{background:var(--leaf);color:var(--grass-d)}
.sitebar-nav a.on{background:var(--leaf);color:var(--grass-d)}
.sitebar-nav a.cta{background:var(--grass);color:#fff}
.sitebar-nav a.cta:hover{background:var(--grass-d);color:#fff}
@media(max-width:620px){
  .sitebar-name{display:none}
  .sitebar-in{padding:10px 18px}
  .sitebar-nav a{padding:7px 11px;font-size:13.5px}
}

.sitefoot{background:var(--pine);color:#c9d8ce;margin-top:auto}
.sitefoot-in{max-width:var(--maxw);margin:0 auto;padding:44px clamp(18px,4vw,56px) 30px}
.sitefoot-top{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  align-items:flex-start;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.13)}
.sitefoot h4{color:#fff;font-size:15px;margin-bottom:11px}
.sitefoot a{color:#c9d8ce;transition:color .2s}
.sitefoot a:hover{color:var(--gold-2)}
.sitefoot-col{min-width:170px;font-size:14.5px;line-height:2}
.sitefoot-bottom{padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:13px;color:#8fa397}
.sitefoot-logo{height:52px;width:auto;background:#fff;border-radius:11px;padding:6px 10px;margin-bottom:14px}

/* Page shell that keeps the footer at the bottom on short pages. */
.page{min-height:100vh;display:flex;flex-direction:column}
.page main{flex:1}

/* --- Long-form legal / content pages -------------------------------------- */
.doc{padding:clamp(40px,6vw,72px) 0 clamp(56px,7vw,88px)}
.doc h1{margin-bottom:8px}
.doc .updated{color:var(--mut);font-size:14.5px;margin-bottom:30px}
.doc h2{font-size:clamp(20px,2.2vw,25px);margin:34px 0 10px;color:var(--grass-d)}
.doc p,.doc li{margin-bottom:11px}
.doc ul,.doc ol{padding-left:23px;margin-bottom:16px}
.doc a{color:var(--grass-d);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--grass)}
.doc strong,.doc b{color:var(--pine)}

/* --- Touch targets --------------------------------------------------------
   Checkboxes and radios render around 13px by default, which is well under
   any usable tap size. Form controls also need 16px text on iOS, or Safari
   zooms the page the moment a field is focused. */
input[type="checkbox"],input[type="radio"]{
  width:20px;height:20px;min-width:20px;min-height:20px;
  accent-color:var(--grass);cursor:pointer
}
@media(max-width:820px){
  input,select,textarea{font-size:16px}          /* stops iOS zoom-on-focus */
  input[type="checkbox"],input[type="radio"]{width:22px;height:22px;min-width:22px;min-height:22px}
  /* Give tappable labels and inline links room around them. */
  label:has(input[type="radio"]),label:has(input[type="checkbox"]){
    display:flex;align-items:center;gap:10px;min-height:44px
  }
  .btn{min-height:48px}
  .sitefoot-col a{display:inline-block;padding:4px 0}
}

/* --- Accessibility -------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--grass);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-xs) 0;font-weight:600}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--grass);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

@media print{
  .sitebar,.sitefoot,.no-print{display:none!important}
  body{background:#fff;font-size:12pt}
}

/* Terms acceptance. Nothing submits until this is ticked, so the box is a
   real 20px target and the whole row is one tappable label. */
.agree label.agree-l{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14.5px;color:var(--mut);line-height:1.55;text-align:left}
.agree label.agree-l input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--grass);cursor:pointer}
.agree label.agree-l a{color:var(--grass-d);font-weight:600}
.agree label.agree-l b{color:var(--red)}
.agree .msg-e{display:none;color:var(--red);font-size:13px;margin-top:7px}
.agree.err label.agree-l{color:var(--red)}
.agree.err .msg-e{display:block}
