/* ==========================================================================
   themes/_shared/css/base.css — the design system every theme is built on.

   TOKENS, RESET, TYPE, BUTTONS, FORMS, REVEAL. Not layout and not chrome: a
   theme owns its own header, hero, cards and footer, and overrides anything
   here simply by loading after it.

   THE FORM BLOCK AND THE REVEAL BLOCK ARE NOT DECORATION. .field,
   .field-error, .has-error and .form-status are the contract between a
   theme's markup and themes/_shared/js/main.js, and .reveal is the rule that
   makes content invisible until a script says otherwise. A theme that
   reimplemented either from scratch would get it subtly wrong, and the way
   you would find out is a client reporting that nobody can submit the quote
   form. See THEME-CONTRACT.md.

   Rebranding does not happen here. The colours below are defaults; the
   generated brand.css loads afterwards and overrides them from the settings
   table.
   ========================================================================== */


:root{
  /* ---- Brand colour ---------------------------------------------------- */
  --accent:        #5B5BF0;   /* indigo/violet — buttons, links, icons      */
  --accent-dark:   #4343D6;   /* hover state                                */
  --accent-light:  #8A8AF7;   /* on dark backgrounds                        */
  --accent-wash:   #EEEEFE;   /* tinted panels on white                     */

  /* ---- Dark surfaces (hero, footer, bands) ----------------------------- */
  --dark:          #0C1020;
  --dark-2:        #151B33;
  --dark-3:        #202844;
  --on-dark:       #FFFFFF;
  --on-dark-muted: #B6BED6;

  /* ---- Light surfaces --------------------------------------------------- */
  --bg:            #FFFFFF;
  --bg-alt:        #F6F7FC;
  --ink:           #0F1424;   /* headings                                   */
  --body:          #414A63;   /* body copy — 7.4:1 on white                 */
  --muted:         #626C85;   /* meta text  — 5.3:1 on white                */
  --line:          #E3E6F0;

  /* ---- Feedback --------------------------------------------------------- */
  --ok:            #0E7A43;
  --ok-bg:         #E7F6EE;
  --err:           #C0243B;
  --err-bg:        #FDECEF;

  /* ---- Type ------------------------------------------------------------- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --h1: clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem);
  --h2: clamp(1.65rem, 1.25rem + 1.7vw, 2.5rem);
  --h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);

  /* ---- Shape & motion ---------------------------------------------------- */
  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 2px 4px rgba(15,20,36,.04), 0 12px 28px rgba(15,20,36,.07);
  --shadow-lift: 0 4px 8px rgba(15,20,36,.06), 0 20px 44px rgba(15,20,36,.12);
  --ring:        0 0 0 3px rgba(91,91,240,.38);

  /* ---- Layout ------------------------------------------------------------ */
  --maxw:    1180px;
  --gutter:  22px;
  --section: clamp(56px, 7vw, 96px);
  --header-h: 74px;
}
/* ==========================================================================
   Base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.68;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.nav-open{overflow:hidden}

h1,h2,h3,h4{
  margin:0 0 .5em;
  color:var(--ink);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.02em;
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3);letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}

img,svg,iframe{max-width:100%}
img{height:auto;display:block}

ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin:.35em 0}

hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

/* Visible focus everywhere — never remove this. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--radius-sm) 0;font-weight:700;
}
.skip-link:focus{left:0;text-decoration:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:820px}

.section{padding-block:var(--section)}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--dark);color:var(--on-dark-muted)}
.section--dark h2,.section--dark h3{color:var(--on-dark)}

.section-head{max-width:720px;margin:0 auto clamp(34px,4vw,54px);text-align:center}
.section-head p{color:var(--muted);font-size:1.075rem;margin:0}
.section--dark .section-head p{color:var(--on-dark-muted)}
.section-head--left{margin-inline:0;text-align:left}

.eyebrow{
  display:inline-block;margin-bottom:14px;
  font-size:.775rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.section--dark .eyebrow{color:var(--accent-light)}

.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:2px solid transparent;border-radius:var(--radius-sm);
  font:inherit;font-weight:700;font-size:1rem;line-height:1.2;
  text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(91,91,240,.28)}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;box-shadow:0 12px 26px rgba(91,91,240,.36)}

.btn-ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

.btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}

.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.6;pointer-events:none}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.link-arrow svg{width:15px;height:15px;transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(4px)}


/* ==========================================================================
   Slider mechanics
   ========================================================================== */

/* THE FOUR RULES THAT MAKE THE CAROUSEL WORK, and nothing about how it looks.
   A track that is not display:flex, or a slide that is not flex:0 0 100%,
   does not merely look wrong — it breaks the no-script fallback, which works
   by letting the track wrap. Everything else about the slider (the quote
   card, the arrows, the dots) belongs to the theme. */
.slider{position:relative;max-width:840px;margin-inline:auto}
.slider-viewport{overflow:hidden}
.slider-track{display:flex;transition:transform .45s cubic-bezier(.4,.1,.2,1)}
.slide{flex:0 0 100%;min-width:0;padding:4px}
/* ==========================================================================
   Forms
   ========================================================================== */

.form-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
@media (max-width:900px){.form-layout{grid-template-columns:1fr}}

.form-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.5vw,40px);box-shadow:var(--shadow);
}

.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.field-grid .field{margin-bottom:0}
.field--full{grid-column:1/-1}

.field label{margin-bottom:7px;font-weight:700;font-size:.925rem;color:var(--ink)}
.field .req{color:var(--err)}
.field .hint{margin-top:6px;font-size:.83rem;color:var(--muted)}

.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{min-height:140px;resize:vertical}
.field select{
  appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626C85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;
}
.field input::placeholder,.field textarea::placeholder{color:#97A0B5}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);box-shadow:var(--ring);outline:none;
}
.field input[type="file"]{padding:10px 12px;cursor:pointer}
.field input[type="file"]::file-selector-button{
  margin-right:12px;padding:8px 14px;font:inherit;font-weight:700;font-size:.9rem;
  color:var(--accent);background:var(--accent-wash);
  border:0;border-radius:6px;cursor:pointer;
}

.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--err)}
.field-error{display:none;margin-top:6px;font-size:.855rem;font-weight:600;color:var(--err)}
.field.has-error .field-error{display:block}

/* Radio / checkbox rows */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-weight:600;cursor:pointer;
}
.choice input{width:auto;margin:0;accent-color:var(--accent)}
.choice:hover{border-color:var(--accent)}
.choice:focus-within{border-color:var(--accent);box-shadow:var(--ring)}

/* The honeypot must be reachable by bots but invisible and skipped by AT. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form-note{margin-top:18px;font-size:.87rem;color:var(--muted)}

.form-status{
  display:none;margin-bottom:22px;padding:15px 18px;
  border-radius:var(--radius-sm);border-left:4px solid;font-weight:600;
}
.form-status.is-ok{display:block;background:var(--ok-bg);border-color:#128A4C;color:#0B5C34}
.form-status.is-err{display:block;background:var(--err-bg);border-color:var(--err);color:#8E1729}

.is-sending{position:relative;pointer-events:none;opacity:.75}

/* Info sidebar beside a form */
.info-card{
  background:var(--dark);color:var(--on-dark-muted);
  border-radius:var(--radius);padding:clamp(24px,3vw,34px);
}
.info-card h3{color:var(--on-dark);margin-bottom:.6em}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:flex;gap:14px;align-items:flex-start;margin:0 0 20px}
.info-list li:last-child{margin-bottom:0}
.info-list svg{width:21px;height:21px;color:var(--accent-light);flex:none;margin-top:4px}
.info-list strong{display:block;color:var(--on-dark);font-size:.87rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.info-list a{color:var(--on-dark-muted)}
.info-list a:hover{color:#fff}

.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--line);margin:0}
.hours li:last-child{border-bottom:0}
.hours strong{color:var(--ink)}
.hours .open{color:#0E7A43;font-weight:700}

/* Map */
.map-embed{
  position:relative;padding-top:42%;min-height:280px;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:var(--bg-alt);
}
.map-embed iframe,.map-embed img,.map-embed .map-placeholder{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.map-embed img{object-fit:cover}
.map-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:20px;color:var(--muted);
}
.map-placeholder svg{width:38px;height:38px;color:var(--accent)}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.card:hover{transform:none}
}

/* ==========================================================================
   Choice sets — radio groups and the consent box
   ========================================================================== */

/* THESE WERE INLINE style="" ATTRIBUTES on the careers form. Moving that form
   into the shared layer meant moving its styling with it, and a shared partial
   carrying a dozen inline declarations is a shared partial no theme can
   restyle. */
.choice-set{border:0;padding:0;margin:0 0 18px}
.choice-set legend{margin-bottom:7px;font-weight:700;font-size:.925rem;color:var(--ink)}
.choice-consent{align-items:flex-start;font-weight:500;line-height:1.5;padding:14px 16px}
.choice-consent input{margin-top:3px;flex:0 0 auto}

/* Two utilities that were inline style="" on the form pages, and are needed
   by any theme that renders those pages. */
.form-required{color:var(--muted)}
.aside-block{margin-top:26px}

/* More inline style="" that had to become real rules when the page templates
   were rebuilt around shared copy. Needed by any theme rendering thank-you or
   the 404. */
.card-icon--xl{width:82px;height:82px;margin-inline:auto}
.lead-lg{font-size:1.1rem}
.signposts{margin-top:56px;text-align:left}
.signposts h2{text-align:center}
.signposts .grid{margin-top:26px}

/* ==========================================================================
   WHATSAPP  —  a link, styled. There is no widget and no script.

   EVERY COLOUR IS A TOKEN so this cannot clash across eight themes. The one
   exception is the WhatsApp green: a brand mark that is not green is not
   recognisable as WhatsApp, which is the entire reason somebody taps it. It
   is declared once, here, as its own token so a theme can still override it
   in one place if it ever needs to.
   ========================================================================== */
:root{
  --wa-green:      #25D366;
  --wa-green-dark: #1DA851;
  --wa-on-green:   #FFFFFF;
}

.wa-float{
  position: fixed;
  z-index: 60;                 /* over the page, under the nav drawer (100) */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 56px square is the floor for a comfortable thumb target and is well
     clear of the 24px the layout audit fails under. */
  min-width: 56px;
  min-height: 56px;
  padding: 0 18px 0 16px;
  border-radius: 999px;
  background: var(--wa-green);
  color: var(--wa-on-green);
  text-decoration: none;
  font-family: var(--font);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: background .15s ease, transform .15s ease;
}
.wa-float:hover,
.wa-float:focus-visible{ background: var(--wa-green-dark); color: var(--wa-on-green); }
.wa-float:focus-visible{ outline: 3px solid var(--accent); outline-offset: 3px; }
.wa-float svg{ width: 26px; height: 26px; flex: none; }

/* ABOVE THE FOLD ON MOBILE means above the thumb, not above the content:
   24px clears the home-indicator bar on an iPhone and the gesture area on
   Android, and env(safe-area-inset-bottom) adds whatever the device says it
   needs on top of that. */
.wa-bottom-right{ right: 18px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.wa-bottom-left { left:  18px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* WHO SEES IT. Breakpoint matches the rest of the shared layer's drawer
   switch, so "mobile" means the same thing here as it does there. */
@media (min-width: 900px){ .wa-see-mobile{ display: none; } }
@media (max-width: 899px){ .wa-see-desktop{ display: none; } }

/* THE LABEL COLLAPSES ON SMALL SCREENS and the button becomes a circle. A
   pill wide enough to read "WhatsApp" at 360 is a pill wide enough to sit on
   top of a phone number or a form field, which is the complaint every
   floating button eventually attracts. */
@media (max-width: 599px){
  .wa-float{ padding: 0; justify-content: center; width: 56px; }
  .wa-float-text{
    /* The reserved off-canvas idiom from THEME-CONTRACT.md: the layout audit
       treats left:-9999px as deliberate, and a screen reader still reads it. */
    position: absolute; left: -9999px;
  }
}

/* PRINT AND REDUCED MOTION. A fixed button prints on every page as a green
   blob over the text; nobody wants that on a quote they are filing. */
@media print{ .wa-float{ display: none; } }
@media (prefers-reduced-motion: reduce){ .wa-float{ transition: none; } }

/* ---- the inline link, beside a phone number ---- */
.wa-inline{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 24px is the floor the layout audit enforces at 360; padding gets it
     there without changing the line height around it. */
  min-height: 24px;
  padding: 3px 4px;
  color: inherit;                /* the theme decides; this is not a button */
  text-decoration: none;
  font-weight: 600;
}
.wa-inline svg{ width: 18px; height: 18px; flex: none; color: var(--wa-green); }
.wa-inline:hover,
.wa-inline:focus-visible{ text-decoration: underline; }

/* THE PAGE HAS TO BE ABLE TO SCROLL CLEAR OF THE BUTTON.
   A fixed element overlaps whatever is under it -- that is what fixed means,
   and every floating button in the world does it. What is NOT acceptable is
   content that can never be moved out from under it, and the end of the page
   is exactly that: scroll to the bottom and the last footer links sit under
   the button permanently, with nowhere further to scroll.

   :has() rather than a body class, because the button is included from the
   shared layer and the <body> tag belongs to each theme -- one selector here
   beats eight themes remembering to add a class. */
body:has(.wa-float) .site-footer{
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 900px){
  /* Desktop has room; only pay the padding where the button is actually shown. */
  body:has(.wa-see-mobile) .site-footer{ padding-bottom: revert; }
}
@media (max-width: 899px){
  body:has(.wa-see-desktop) .site-footer{ padding-bottom: revert; }
}