/* ---------------------------------------------------------------------------
   site.css — tokens, resets, accessibility, forms, utility classes
   Sheffield Lie Detector Test

   Design direction: WARM & DISCREET.
   No crime/CSI imagery, no harsh reds, no dark interrogation vibes.
   Everything is scoped under .sld-site so nothing leaks into wp-admin.
   --------------------------------------------------------------------------- */

:root {
  /* --- Colour tokens. Mirrored into the Elementor kit by
         scripts/set-elementor-globals.php — change BOTH or the builder and the
         stylesheet drift apart. All pairs verified WCAG 2.2 AA (>=4.5:1). --- */
  --sld-cream:    #F7F4EC;  /* warm cream — default page background */
  --sld-white:    #FFFFFF;  /* cards */
  --sld-sand:     #EBE5D3;  /* alternate section band */
  --sld-mist:     #E8EBDC;  /* faint khaki tint — trust bar, callouts */
  --sld-ink:      #2A2A23;  /* deep warm charcoal — body text, 13.1:1 on cream */
  --sld-muted:    #585448;  /* secondary text, 6.9:1 on cream */
  --sld-khaki:    #5A6638;  /* THE accent. 5.6:1 on cream, 6.2:1 under white */
  --sld-khaki-dk: #444D29;  /* accent hover, 8.2:1 on cream */
  --sld-khaki-lt: #7A8750;  /* DECORATION ONLY — 3.9:1 on white, fails AA for body text */
  --sld-hairline: #DCD6C4;  /* 1px borders */

  --sld-radius:    14px;    /* rounded cards */
  --sld-radius-sm: 8px;
  --sld-shadow:    0 1px 2px rgba(43,42,40,.04), 0 8px 24px rgba(43,42,40,.06);

  --sld-gut:     clamp(20px, 5vw, 40px);   /* page gutter */
  --sld-section: clamp(56px, 8vw, 104px);  /* vertical section rhythm */
  --sld-max:     1160px;
}

/* --- Base ---------------------------------------------------------------- */

html { overflow-x: hidden; }        /* contains body-level fixed panels that
                                       a wrapper clip cannot reach */

body.sld-site {
  background: var(--sld-cream);
  color: var(--sld-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sld-site h1, .sld-site h2, .sld-site h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--sld-ink);
  text-wrap: balance;
}
.sld-site h4, .sld-site h5, .sld-site h6 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sld-ink);
}

.sld-site h1 { font-size: clamp(2.05rem, 5vw, 3.25rem); }
.sld-site h2 { font-size: clamp(1.65rem, 3.6vw, 2.35rem); }
.sld-site h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); }
.sld-site h4 { font-size: 1.1rem; }

.sld-site p { margin: 0 0 1em; max-width: 68ch; }
.sld-site p:last-child { margin-bottom: 0; }

.sld-site img, .sld-site svg { max-width: 100%; height: auto; }

/* --- Accessibility ------------------------------------------------------- */

/* Visible focus on EVERYTHING keyboard-reachable — WCAG 2.2 AA (2.4.7/2.4.11).
   Two-tone ring so it stays visible on both paper and khaki backgrounds. */
.sld-site :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sld-khaki);
  outline-offset: 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 5px rgba(250, 247, 242, .9);
}

.sld-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--sld-ink);
  color: var(--sld-cream);
  padding: 12px 20px;
  border-radius: 0 0 var(--sld-radius-sm) 0;
  font-weight: 600;
  text-decoration: none;
}
.sld-skip:focus { left: 0; }

.sld-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Subtle animation only — and none at all if the visitor asked for none. */
@media (prefers-reduced-motion: reduce) {
  .sld-site *, .sld-site *::before, .sld-site *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Layout helpers ------------------------------------------------------ */

/* `.sld-wrap` is the centring mechanism for the PHP TEMPLATES ONLY — header,
   footer, breadcrumbs, mobile bar. Do NOT put it on an Elementor container:
   Elementor's boxed mode already centres via `.e-con-inner`, and its
   per-element `margin-left: 0` beats this `auto`, pinning the page left. */
.sld-wrap {
  width: 100%;
  max-width: var(--sld-max);
  margin-inline: auto;
  padding-inline: var(--sld-gut);
}

/* Elementor sections. The gutter lives on the OUTER full-bleed band so the
   background still reaches the viewport edge while the content is inset. */
.sld-site .sld-section.e-con,
.sld-site section.sld-section {
  padding-block: var(--sld-section);
  padding-inline: var(--sld-gut);
}

/* Elementor's own inner element does the centring; just cap it. */
.sld-site .sld-section > .e-con-inner,
.sld-site .sld-inner.e-con > .e-con-inner {
  max-width: var(--sld-max);
  margin-inline: auto;
  width: 100%;
}

/* Section heads read better on a shorter measure, but must stay LEFT-aligned
   with the cards below — capped, not centred. */
.sld-site .sld-head.e-con {
  max-width: 760px;
  width: 100%;
  margin-inline: 0;
}

.sld-section--cream { background: var(--sld-cream); }
.sld-section--sand  { background: var(--sld-sand); }
.sld-section--mist  { background: var(--sld-mist); }
.sld-section--white { background: var(--sld-white); }

/* --- Components ---------------------------------------------------------- */

.sld-card {
  background: var(--sld-white);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--sld-shadow);
  height: 100%;
}

/* Small uppercase label above a heading. The kit styles h3 as serif and it
   bleeds into card headings — force Inter back explicitly. */
.sld-eyebrow,
.sld-eyebrow p {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sld-khaki);
  margin-bottom: .5em;
}

.sld-divider {
  height: 1px;
  background: var(--sld-hairline);
  border: 0;
  margin-block: var(--sld-section);
}

/* Placeholder marker — every unsupplied asset/fact uses one of these so the
   owner and I can find them. See PLACEHOLDERS.md. */
.sld-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background: repeating-linear-gradient(45deg,
    var(--sld-sand), var(--sld-sand) 12px,
    var(--sld-hairline) 12px, var(--sld-hairline) 24px);
  border: 2px dashed var(--sld-muted);
  border-radius: var(--sld-radius);
  color: var(--sld-ink);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  padding: 16px;
}
/* .sld-placeholder is display:flex for centred image markers. A SENTENCE in one
   turns every <strong>/<code> into a flex item and lays the prose out in
   columns — prose needs its own variant. */
.sld-placeholder--prose {
  display: block;
  min-height: 0;
  background: var(--sld-mist);
  border: 1px dashed var(--sld-khaki);
  text-align: left;
  font-weight: 400;
  line-height: 1.6;
  padding: 18px 20px;
}
.sld-placeholder--prose strong { color: var(--sld-khaki-dk); }

/* --- Forms (CF7) --------------------------------------------------------- */

.sld-site .wpcf7 label { display: block; font-weight: 600; margin-bottom: 6px; }
.sld-site .wpcf7 input[type="text"],
.sld-site .wpcf7 input[type="email"],
.sld-site .wpcf7 input[type="tel"],
.sld-site .wpcf7 select,
.sld-site .wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--sld-ink);
  background: var(--sld-white);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius-sm);
}
.sld-site .wpcf7 input:focus, .sld-site .wpcf7 textarea:focus, .sld-site .wpcf7 select:focus {
  border-color: var(--sld-khaki);
  outline: 3px solid var(--sld-khaki);
  outline-offset: 1px;
}
.sld-site .wpcf7 .wpcf7-submit {
  background: var(--sld-khaki);
  color: var(--sld-white);
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  font-weight: 600;
  cursor: pointer;
}
.sld-site .wpcf7 .wpcf7-submit:hover { background: var(--sld-khaki-dk); }
.sld-site .wpcf7-not-valid-tip { color: #8A3324; font-size: .88rem; }

/* --- Real content breaks layouts placeholders did not: a long unbreakable
       token (an email address) overflows narrow flex rows. ----------------- */
.sld-site .sld-contact__value {
  overflow-wrap: anywhere;
  min-width: 0;
}