/* OneShop — shared site styles.

   The page bodies keep the inline styles ported verbatim from the design
   prototypes, so their exact spacing/colour/type is preserved. This file only
   covers what is genuinely shared or interactive:
     - design tokens (brand kit)
     - a base reset and link/form defaults
     - the responsive nav (one breakpoint, 760px)
     - button, link, and focus states (not specified in the designs — see
       HANDOFF-NOTES.md § Interactions; values below follow its suggestions)

   Brand rules honoured here: one accent (teal) only, no gradients, no drop
   shadows, 3px radius everywhere. */

:root{
  --ink:#16201F;
  --teal:#2DB3A6;
  --teal-deep:#1F8C82;
  --teal-light:#56D6C6;
  --slate:#3C534F;
  --muted:#6E817E;
  --muted-lt:#90A6A2;
  --white:#FFFFFF;
  --paper:#F4F8F7;
  --tint:#E9F2F0;
  --rule:#D8E7E4;
}

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

body{ margin:0; background:var(--paper); }

/* Body text links (footer, "See the full process", etc.). Buttons opt out of
   these via the .btn classes below. */
a{ color:var(--teal-deep); text-decoration:none; }
a:hover{ color:var(--ink); }

input,select,textarea{ font-family:'IBM Plex Sans',system-ui,sans-serif; }
input::placeholder,textarea::placeholder{ color:var(--muted-lt); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--teal); }

/* The form suppresses the default focus outline (design decision), so restore a
   visible ring for keyboard users only. Mouse focus stays clean. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.btn:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
}

/* ---------------------------------------------------------------- buttons -- */
.btn{
  display:inline-block;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:14px; font-weight:500; line-height:1;
  border:0; border-radius:3px;
  padding:12px 20px;
  cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ background:#25332F; color:var(--paper); }
.btn--teal{ background:var(--teal); color:var(--white); }
.btn--teal:hover{ background:var(--teal-deep); color:var(--white); }
.btn--outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); padding:11px 20px; }
.btn--outline:hover{ background:var(--ink); color:var(--paper); }

@media (prefers-reduced-motion:no-preference){
  .btn,.nav__cta,.nav__link{ transition:background-color .15s ease, color .15s ease; }
}

/* ------------------------------------------------------------------- nav -- */
.nav{ background:var(--ink); padding:0 clamp(20px,5vw,56px); position:relative; }
.nav__inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:20px 0;
}
.nav__logo{ display:block; flex:0 0 auto; }
.nav__logo img{ height:21px; width:auto; display:block; }

.nav__links{ display:none; align-items:center; gap:clamp(16px,2vw,32px); font-size:14.5px; }
.nav__link{ color:var(--muted-lt); }
.nav__link:hover{ color:var(--white); }
.nav__link[aria-current="page"]{ color:var(--white); }

.nav__cta{ color:var(--white); background:var(--teal); padding:10px 18px; border-radius:3px; font-weight:500; }
.nav__cta:hover{ color:var(--white); background:var(--teal-deep); }

.nav__toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px;
  background:transparent; border:1px solid var(--slate); border-radius:3px; cursor:pointer;
}
.nav__toggle span{ display:block; height:2px; background:var(--paper); border-radius:3px; }

.nav__menu{ border-top:1px solid var(--slate); padding:8px 0 20px; }
.nav__menu[hidden]{ display:none; }
.nav__menu-inner{
  max-width:1240px; margin:0 auto;
  display:flex; flex-direction:column; align-items:stretch;
  gap:2px; font-size:16px;
}
.nav__menu .nav__link{ padding:14px 0; }
.nav__cta--block{ text-align:center; margin-top:10px; padding:14px 18px; }

@media (min-width:760px){
  .nav__links{ display:flex; }
  .nav__toggle{ display:none; }
  .nav__menu{ display:none !important; }
}

/* ---------------------------------------------------------------- forms -- */
/* Inline validation states for the Book a call form (see js/site.js).
   The brand kit permits exactly one accent (teal) and no colours outside the
   token list, so errors are signalled with an ink border + an ink message
   rather than a red — deliberately, not by omission. */
.field--error input,.field--error select,.field--error textarea{ border-color:var(--ink); }
.field__error{ display:none; font-size:12.5px; font-weight:500; color:var(--ink); margin-top:1px; }
.field--error .field__error{ display:block; }

.form__status{ font-size:14px; line-height:1.5; }
.form__status--ok{ color:var(--teal-deep); }
.form__status--err{ color:var(--ink); font-weight:500; }