/* ---------------------------------------------------------------------------
   chrome.css — buttons, logo, sticky header, mobile nav, footer, CTA band
   --------------------------------------------------------------------------- */

/* --- Buttons -------------------------------------------------------------- */

/* NOTE on specificity: the Elementor kit writes `.elementor-kit-N a` (0,1,1),
   which out-specifies any bare single-class link rule (0,1,0) and repaints it
   with the global link colour. Always qualify anchor rules. */

.sld-site .sld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sld-site .sld-btn--primary { background: var(--sld-khaki); color: var(--sld-white); }
.sld-site .sld-btn--primary:hover,
.sld-site .sld-btn--primary:focus { background: var(--sld-khaki-dk); color: var(--sld-white); }

.sld-site .sld-btn--ghost {
  background: transparent;
  color: var(--sld-ink);
  border-color: var(--sld-hairline);
}
.sld-site .sld-btn--ghost:hover,
.sld-site .sld-btn--ghost:focus { border-color: var(--sld-khaki); color: var(--sld-khaki); }

.sld-site .sld-btn--onink { background: var(--sld-cream); color: var(--sld-ink); }
.sld-site .sld-btn--onink:hover { background: var(--sld-white); color: var(--sld-ink); }

/* Elementor button widgets: the CSS class lands on the WIDGET WRAPPER, never on
   the <a>. Style the inner anchor. Do NOT route through
   `> .elementor-widget-container` — Elementor 4 drops that wrapper for button
   widgets, so a child combinator silently matches nothing. */
.sld-site .elementor-widget-button.sld-btn--primary .elementor-button {
  background-color: var(--sld-khaki);
  color: var(--sld-white);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  padding: 14px 28px;
}
.sld-site .elementor-widget-button.sld-btn--primary .elementor-button:hover {
  background-color: var(--sld-khaki-dk);
  color: var(--sld-white);
}
.sld-site .elementor-widget-button.sld-btn--ghost .elementor-button {
  background-color: transparent;
  color: var(--sld-ink);
  border: 1px solid var(--sld-hairline);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  padding: 13px 27px;
}
.sld-site .elementor-widget-button.sld-btn--ghost .elementor-button:hover {
  border-color: var(--sld-khaki);
  color: var(--sld-khaki);
  background-color: transparent;
}
.sld-site .elementor-widget-button.sld-btn--onink .elementor-button {
  background-color: var(--sld-cream);
  color: var(--sld-ink);
  border-radius: 999px;
  font-weight: 600;
  padding: 14px 28px;
}

/* --- Header --------------------------------------------------------------- */

.sld-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(250, 247, 242, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sld-hairline);
}

.sld-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}

/* Text wordmark stand-in until a real logo is supplied — see PLACEHOLDERS.md */
.sld-site .sld-logo {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--sld-ink);
  line-height: 1.05;
  margin-right: auto;
}
.sld-logo__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
}
.sld-logo__sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sld-khaki);
}

.sld-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sld-site .sld-nav a {
  display: block;
  padding: 9px 13px;
  border-radius: var(--sld-radius-sm);
  color: var(--sld-ink);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
}
.sld-site .sld-nav a:hover { background: var(--sld-mist); color: var(--sld-khaki-dk); }
.sld-site .sld-nav .current-menu-item > a,
.sld-site .sld-nav .current_page_item > a { color: var(--sld-khaki-dk); font-weight: 600; }

/* Dropdowns */
.sld-nav .menu-item-has-children { position: relative; }
.sld-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--sld-white);
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius-sm);
  box-shadow: var(--sld-shadow);
  padding: 6px;
}
.sld-nav .menu-item-has-children:hover > .sub-menu,
.sld-nav .menu-item-has-children:focus-within > .sub-menu { display: flex; }

.sld-header__actions { display: flex; align-items: center; gap: 10px; }

/* Click-to-call — phone-first, since most visitors arrive on a mobile. */
.sld-site .sld-header__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sld-ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}
.sld-site .sld-header__tel:hover { color: var(--sld-khaki-dk); }

.sld-burger {
  display: none;
  width: 44px;               /* 44px min touch target — WCAG 2.2 AA 2.5.8 */
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sld-hairline);
  border-radius: var(--sld-radius-sm);
  cursor: pointer;
}
.sld-burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--sld-ink);
  position: relative;
}
.sld-burger span::before,
.sld-burger span::after {
  content: ''; position: absolute; left: 0;
  width: 20px; height: 2px; background: var(--sld-ink);
}
.sld-burger span::before { top: -6px; }
.sld-burger span::after  { top:  6px; }

@media (max-width: 1024px) {
  .sld-burger { display: inline-flex; }
  .sld-header__tel-label { display: none; }

  .sld-nav {
    position: fixed;
    inset: 72px 0 auto 0;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    background: var(--sld-cream);
    border-bottom: 1px solid var(--sld-hairline);
    padding: 12px var(--sld-gut) 26px;
    display: none;
  }
  .sld-nav[data-open="true"] { display: block; }
  .sld-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .sld-site .sld-nav a { padding: 13px 10px; font-size: 1.02rem; }
  .sld-nav .sub-menu {
    position: static;
    display: flex;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--sld-hairline);
    border-radius: 0;
    margin-left: 12px;
    padding: 0 0 0 6px;
  }
}

/* --- CTA band ------------------------------------------------------------- */

.sld-cta {
  background: var(--sld-ink);
  color: var(--sld-cream);
  padding-block: clamp(48px, 7vw, 80px);
}
.sld-cta h2 { color: var(--sld-cream); }
.sld-cta p  { color: var(--sld-sand); }
.sld-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.sld-cta__text { flex: 1 1 420px; min-width: 0; }
.sld-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Footer --------------------------------------------------------------- */

.sld-footer {
  background: var(--sld-sand);
  border-top: 1px solid var(--sld-hairline);
  padding-block: clamp(44px, 6vw, 68px) 28px;
  font-size: .94rem;
}
.sld-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}
.sld-footer h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sld-muted);
  margin: 0 0 14px;
}
.sld-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sld-site .sld-footer a { color: var(--sld-ink); text-decoration: none; }
.sld-site .sld-footer a:hover { color: var(--sld-khaki-dk); text-decoration: underline; }
.sld-footer__legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--sld-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  color: var(--sld-muted);
  font-size: .86rem;
}
.sld-footer__note { max-width: 70ch; color: var(--sld-muted); margin-top: 14px; font-size: .86rem; }

@media (max-width: 900px) {
  .sld-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .sld-footer__grid { grid-template-columns: 1fr; gap: 30px; }
}

/* --- Mobile sticky call/book bar ------------------------------------------ */

.sld-mobilebar { display: none; }
@media (max-width: 767px) {
  .sld-mobilebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 950;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(250, 247, 242, .97);
    border-top: 1px solid var(--sld-hairline);
  }
  .sld-site .sld-mobilebar a {
    justify-content: center;
    padding: 12px 10px;
    font-size: .95rem;
  }
  body.sld-site { padding-bottom: 74px; }  /* so the bar never covers content */
}

/* --- Breadcrumbs ---------------------------------------------------------- */

.sld-crumbs {
  background: var(--sld-cream);
  border-bottom: 1px solid var(--sld-hairline);
  font-size: .87rem;
}
.sld-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
}
.sld-crumbs li { display: flex; align-items: center; gap: 10px; }
.sld-crumbs li + li::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--sld-muted);
  border-bottom: 1.5px solid var(--sld-muted);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}
.sld-site .sld-crumbs a { color: var(--sld-muted); text-decoration: none; }
.sld-site .sld-crumbs a:hover { color: var(--sld-khaki-dk); text-decoration: underline; }
.sld-crumbs [aria-current="page"] { color: var(--sld-ink); font-weight: 600; }


/* ---------------------------------------------------------------------------
   Touch targets — WCAG 2.2 AA 2.5.8 (Target Size Minimum, 24x24) and the
   project's own 44px floor for anything that is a primary action.

   Measured at 390px, not assumed: the header "Call us" link was 24x22,
   the Contact/Booking consent checkbox 13x13, every button 43px (1px short),
   and the footer/nav list links 16-19px tall. Inline links inside a sentence
   are deliberately NOT touched — 2.5.8 exempts them, and padding them would
   break the line box.
   ------------------------------------------------------------------------ */

/* Buttons: 43px -> 46px. The shortfall came from padding + line-height, so
   min-height is stated rather than more padding, which would reflow the text. */
.sld-site .elementor-widget-button .elementor-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Header click-to-call. The icon-only state on mobile was the worst offender
   on the site: it is the single most likely action for an anxious visitor on a
   phone, and it was a 22px target. */
.sld-site .sld-header__tel {
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 6px;
  border-radius: var(--sld-radius-sm);
}

/* Logo lock-up: a link, so it is a target too. */
.sld-site .sld-logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
}

/* Stacked navigation lists — footer columns, legal row, mobile menu. These are
   NOT inline-in-a-sentence links, so the 2.5.8 exemption does not apply. Row
   gap plus vertical padding gets each one to a 24px box with 24px clearance. */
.sld-site .sld-footer ul { gap: 10px; }
.sld-site .sld-footer ul a,
.sld-site .sld-footer__legal a,
.sld-site .sld-nav a {
  display: inline-block;
  min-height: 24px;
  padding-block: 4px;
}
@media (max-width: 767px) {
  /* In the open burger menu the links are the whole interface, so they get the
     full 44px rather than the 24px minimum. */
  .sld-site .sld-nav a { min-height: 44px; display: flex; align-items: center; }
}

/* Consent checkbox on the enquiry form. 13x13 is a browser default; CF7 does
   not style it. Scaling with `transform` would NOT enlarge the hit area, so
   the box itself is resized. */
.sld-site .wpcf7 input[type="checkbox"],
.sld-site .wpcf7 input[type="radio"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  accent-color: var(--sld-khaki);
  margin-inline-end: 8px;
}
.sld-site .wpcf7 .sld-form__consent label,
.sld-site .wpcf7 .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 44px;   /* the whole label is the target, not just the box */
}

/* Standalone links in the contact definition lists (the phone number on
   Contact and Locations) and in the breadcrumb trail. Both measured 20-23px —
   just under 2.5.8 — and neither sits inside a sentence. */
.sld-site .sld-contact__value a,
.sld-site .sld-crumbs a,
.sld-site .sld-crumbs [aria-current="page"] {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}

/* ---------------------------------------------------------------------------
   Prose link colour.

   Hello Elementor paints every unstyled <a> #C36 (a hot pink), and the
   Elementor kit's own `.elementor-kit-N a` rule (0,1,1) loads AFTER plugin CSS,
   so a bare single-class rule loses the tie and the pink survives. It showed up
   on the phone number and email in the contact definition lists, the CF7
   consent link, the skip link and every cross-reference inside the legal pages
   — none of which my contrast gate caught, because #C36 on cream is 5.1:1 and
   passes AA while still being completely off-brand.

   `body.sld-site a` is (0,1,2), which beats both. Components that already own
   their colour are excluded by specificity (`.sld-site .sld-footer a` and
   `.sld-site .sld-nav a` are 0,2,1) or by name below.

   `.sld-btn` MUST be in the :not() list. The header CTA, the CTA band and the
   mobile bar are PHP-template anchors carrying `.sld-btn`, not Elementor
   button widgets, so excluding only `.elementor-button` leaves them repainted
   khaki-on-khaki — an invisible primary call to action on every page.
   ------------------------------------------------------------------------ */
body.sld-site a:not(.elementor-button):not(.sld-btn):not(.sld-skip):not(.sld-logo) {
  color: var(--sld-khaki);
  text-decoration-color: color-mix(in srgb, var(--sld-khaki) 45%, transparent);
  text-underline-offset: 2px;
}
body.sld-site a:not(.elementor-button):not(.sld-btn):not(.sld-skip):not(.sld-logo):hover {
  color: var(--sld-khaki-dk);
}

/* The skip link is cream-on-khaki by design; restate it at matching
   specificity so the rule above cannot repaint it to khaki-on-khaki. */
body.sld-site .sld-skip { color: var(--sld-cream); }


/* ---------------------------------------------------------------------------
   Header fit after the rename to "Sheffield Lie Detector Test".

   The wordmark gained a third word and the header ran out of room: the logo
   broke onto three lines, "How It Works" wrapped mid-item, and the "Book a
   Test" pill wrapped inside itself. None of that is a layout bug — the content
   simply got longer — so the fix is to stop these three from wrapping and to
   buy the space back from the logo's letter-spacing.
   ------------------------------------------------------------------------ */
.sld-site .sld-logo__name { font-size: 1.14rem; white-space: nowrap; }
.sld-site .sld-logo__sub {
  font-size: .58rem;
  letter-spacing: .13em;
  white-space: nowrap;
}
/* The .co.uk is branding-only, header wordmark only (owner, 5 Oct). The sub
   line was ALREADY the tightest thing in the header, so the tld gets a smaller
   tracking of its own rather than widening the lock-up — at .13em six extra
   characters is ~11px, which is enough to start the 768-1180px squeeze again.
   It inherits colour, so it stays khaki #5A6638 and keeps passing AA. */
.sld-site .sld-logo__tld { letter-spacing: .04em; }

.sld-site .sld-nav a { white-space: nowrap; }
/* Applies to the PHP-template buttons and the Elementor button widgets alike;
   a pill that wraps looks broken rather than compact. */
.sld-site .sld-btn,
.sld-site .elementor-widget-button .elementor-button { white-space: nowrap; }

@media (max-width: 1180px) and (min-width: 768px) {
  /* Tighten the nav before anything is allowed to wrap. */
  .sld-site .sld-nav ul { gap: 2px; }
  .sld-site .sld-nav a { padding-inline: 8px; font-size: .95rem; }
  .sld-site .sld-header__tel-label { display: none; }
}

@media (max-width: 767px) {
  /* The header CTA pill is redundant on a phone: the sticky bottom bar already
     carries Call and Book, and the pill is the last thing on a row that also
     holds the logo, the burger and click-to-call. With `white-space: nowrap`
     added for the longer brand name it stopped shrinking and pushed 30px past
     the viewport on every page. Hidden here rather than allowed to wrap, so the
     bottom bar is the single mobile call to action. */
  .sld-site .sld-header__actions .sld-btn { display: none; }
}