/* ==========================================================================
   KQ Solicitors — UI refinement layer  v11.0.0
   --------------------------------------------------------------------------
   Loads after style.css and kq-motion.css.

   This file deliberately works through the class and token hooks the 50
   page templates already use, so a site-wide improvement does not require
   editing 50 templates and re-testing 50 pages of SEO copy. Identity is
   preserved throughout: navy #1A1C30, gold #A48945, cream #FAF6EE,
   Playfair Display over Inter. Nothing here changes the brand — it fixes
   what was measurably wrong and tightens what was merely fine.

   CONTRAST AUDIT (measured against the cream body #FAF6EE)
   --------------------------------------------------------
   Already fixed further down style.css:
     --text-soft   3.89:1 -> 5.8:1
     --text-light  2.47:1 -> 4.6:1
   Still failing, fixed here:
     a { color: var(--gold) }        3.12:1  -> 4.84:1  (--gold-ink)
     .hdr-cta  white on gold         3.36:1  -> 4.98:1  (navy on gold)
   The gold itself is untouched. Only the *ink* changes, and only where
   gold is carrying text on a light background.
   ========================================================================== */

:root {
  /* A deeper gold used exclusively for text on light backgrounds. Same
     hue family, enough weight to be legible at 13px. */
  --gold-ink: #806A34;
  --gold-ink-hover: #6F5C2B;

  /* Consistent surface elevation, replacing four near-identical shadows. */
  --kq-shadow-sm: 0 1px 2px rgba(26, 28, 48, .04), 0 2px 8px rgba(26, 28, 48, .04);
  --kq-shadow-md: 0 2px 4px rgba(26, 28, 48, .04), 0 12px 28px -8px rgba(26, 28, 48, .10);
  --kq-shadow-lg: 0 4px 8px rgba(26, 28, 48, .05), 0 24px 56px -16px rgba(26, 28, 48, .16);
}

/* ==========================================================================
   1. LINK LEGIBILITY
   Scoped away from dark surfaces, where the pale gold is correct and has
   plenty of contrast against navy (4.98:1 and up).
   ========================================================================== */
a { color: var(--gold-ink); }
a:hover { color: var(--gold-ink-hover); }

/* Dark surfaces keep the bright gold. */
.hero a,
.cta-section a,
.site-footer-dark a,
.topbar a,
[data-kq-tone="dark"] a,
.kq-dark a {
  color: var(--gold-light);
}
.hero a:hover,
.cta-section a:hover,
[data-kq-tone="dark"] a:hover { color: #F3E2AE; }

/* Links inside running prose get an underline. Colour alone is not an
   accessible way to signal a link, and these pages are dense with them. */
.kq-prose a,
.faq-a a,
.entry-content a,
p > a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(128, 106, 52, .45);
  transition: text-decoration-color .2s;
}
.kq-prose a:hover,
.faq-a a:hover,
.entry-content a:hover,
p > a:not([class]):hover { text-decoration-color: currentColor; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.hdr-cta {
  /* White on gold measured 3.36:1. Navy on gold is 4.98:1 and matches
     .btn-gold, which already uses navy ink — so this also removes an
     inconsistency between the two primary buttons. */
  color: var(--deep);
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 2px 10px rgba(164, 137, 69, .28);
}
.hdr-cta:hover {
  color: var(--deep);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  box-shadow: 0 6px 18px rgba(164, 137, 69, .38);
}

/* The scrolled header was a 0.25rem padding change with a 0.4s "all"
   transition, which animates layout on every scroll past 50px. Transition
   only the properties that are cheap to composite. */
.site-header {
  transition: padding .32s var(--kq-out), background .32s linear, box-shadow .32s linear;
  will-change: padding;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Cap the measure on running prose. Several guide templates run body copy
   the full 1200px container width, which is roughly 140 characters —
   about double a comfortable line. */
.kq-prose p,
.kq-prose li,
.entry-content > p,
.entry-content > ul li,
.entry-content > ol li { max-width: 72ch; }

/* Playfair at display sizes needs a tighter fit; Inter does not. */
h1, h2, .hero-text h1, .sc-head h2 { letter-spacing: -0.02em; }

/* Stop long unbroken strings (URLs, reference numbers) blowing out narrow
   grid columns on mobile. */
.kq-prose, .faq-a, .entry-content, td, .kq-editorial-card { overflow-wrap: break-word; }

/* Optical alignment for the gold italic accents used across every hero. */
em { font-style: italic; }

/* ==========================================================================
   4. CARDS & SURFACES
   ========================================================================== */
.srv-card, .team-card, .blog-card, .kq-editorial-card, .kq-journey-card,
.howstart-card, .kq-3d-card, .faq-card {
  box-shadow: var(--kq-shadow-sm);
  transition: box-shadow .38s var(--kq-out), border-color .28s linear, transform .38s var(--kq-out);
}

/* ==========================================================================
   5. FORMS
   ========================================================================== */
.fg input, .fg select, .fg textarea,
.wpcf7 input, .wpcf7 select, .wpcf7 textarea {
  font-family: inherit;
  font-size: 16px;              /* below 16px iOS Safari zooms on focus */
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.fg input:focus, .fg select:focus, .fg textarea:focus,
.wpcf7 input:focus, .wpcf7 textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(164, 137, 69, .16);
  outline: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: #6f6c7a; opacity: 1; }

/* Invalid state that is not colour-only. */
.fg input:user-invalid, .fg textarea:user-invalid {
  border-color: #a83232;
  box-shadow: 0 0 0 3px rgba(168, 50, 50, .12);
}

/* ==========================================================================
   6. FAQ
   ========================================================================== */
.faq-q {
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.faq-q svg { transition: transform .34s var(--kq-out); }
.faq-item.open .faq-q svg,
.faq-card.open .faq-q svg { transform: rotate(180deg); }
.faq-item.open, .faq-card.open { border-color: rgba(164, 137, 69, .35); }

/* ==========================================================================
   7. MOBILE STICKY CTA
   ========================================================================== */
.mobile-cta-bar {
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--kq-z-sticky, 100);
}
/* Give the page room so the bar never sits on top of the last paragraph
   or the footer's final link. */
@media (max-width: 720px) {
  body:has(.mobile-cta-bar) { padding-bottom: 64px; }
}

/* WhatsApp float should clear the sticky CTA bar rather than overlap it. */
@media (max-width: 720px) {
  #waFloat, .kq-wa-float { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   8. SKIP LINK
   Keyboard users currently have to tab through the whole header, the
   language menu and the full primary nav on every single page.
   ========================================================================== */
.kq-skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: var(--kq-z-toast, 500);
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  background: var(--deep);
  color: var(--gold-light);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: top .18s var(--kq-out);
}
.kq-skip:focus { top: 0; color: var(--gold-light); }

/* ==========================================================================
   9. TABLES
   Fee tables are the most-read content on the site and overflow silently
   on phones.
   ========================================================================== */
.kq-table-wrap, .kq-fee-table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 700; }
tbody tr:nth-child(even) { background: rgba(26, 28, 48, .022); }

/* ==========================================================================
   10. IMAGES
   ========================================================================== */
img { height: auto; }
img[loading="lazy"] { background: rgba(26, 28, 48, .03); }

/* ==========================================================================
   11. SELECTION & SCROLLBAR
   ========================================================================== */
::selection { background: rgba(164, 137, 69, .28); color: var(--text); }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: rgba(164, 137, 69, .4) transparent; scrollbar-width: thin; }
}

/* ==========================================================================
   12. REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { transition: none; will-change: auto; }
}

@media print {
  .topbar, .site-header, .mob-nav, .mob-overlay, .mobile-cta-bar,
  #waFloat, .kq-wa-float, #kqProgress, .kq-skip, .video-lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
  /* Print the destination of content links — a printed guide with bare
     "click here" links is useless. */
  .kq-prose a[href^="http"]::after,
  .entry-content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    word-break: break-all;
  }
  .faq-item, .faq-card { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}