/* emergencylocksmithsbelfast.co.uk -- post-migration enhancement layer.
 *
 * Every value below was lifted from the LIVE staging render via
 * getComputedStyle (scripts/render-profile.mjs), not from the brief and not
 * from hex values scraped out of CSS:
 *   display face  Bungee, display        400   h1 75/105  h2 56/72.8  h3 46/59.8
 *   body face     Cairo, sans-serif      600   16px / 29.71px  rgb(90,90,90)
 *   amber         rgb(243,194,66)        hero band + accent
 *   brown         rgb(62,49,41)
 *   button dark   rgb(49,47,43)  padding 16px 32px  border-radius 0px
 *   container     1440px / max-width 100%
 *
 * The theme (Astra + Elementor + UAEL) fights injected styles, so injected
 * typography and colour carry explicit px and !important deliberately.
 *
 * AA note: the site's own amber-on-white H3 does not meet AA. Amber is used
 * here as a BACKGROUND behind black text, or as a solid bar, never as body or
 * heading text on a light ground.
 *
 * This file sits under /wp-content/, which vercel.json caches immutable for a
 * year. The <link> is versioned (?v=N) and N is bumped on every change.
 */

:root {
  --elb-amber: #f3c242;
  --elb-amber-deep: #d9a622;
  --elb-brown: #3e3129;
  --elb-dark: #312f2b;
  --elb-ink: #000;
  --elb-body: #5a5a5a;
  --elb-rule: #e2e2e2;
  --elb-wash: #f7f7f7;
  --elb-display: "Bungee", display, "Arial Black", sans-serif;
  --elb-text: "Cairo", sans-serif;
}

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

.elb-sec {
  padding: 64px 24px !important;
  background: #fff;
}
.elb-sec--wash { background: var(--elb-wash) !important; }
.elb-in {
  max-width: 1180px;
  margin: 0 auto;
}

/* ---- typography, echoing the site's own scale ---------------------------- */
.elb h2.elb-h2 {
  font-family: var(--elb-display) !important;
  font-weight: 400 !important;
  font-size: 40px !important;
  line-height: 1.3 !important;
  color: var(--elb-ink) !important;
  margin: 0 0 8px !important;
  letter-spacing: normal !important;
}
.elb h3.elb-h3 {
  font-family: var(--elb-display) !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  color: var(--elb-brown) !important;
  margin: 0 0 10px !important;
  text-transform: uppercase !important;
}
.elb .elb-kick {
  font-family: var(--elb-display) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--elb-brown) !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
  display: block;
}
.elb p, .elb li {
  font-family: var(--elb-text) !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  line-height: 30px !important;
  color: var(--elb-body) !important;
}
.elb p { margin: 0 0 18px !important; }
.elb p:last-child { margin-bottom: 0 !important; }
.elb strong { color: var(--elb-brown) !important; font-weight: 700 !important; }

/* amber rule under a heading -- the site's own key-divider device, simplified */
.elb-rule {
  width: 88px; height: 6px;
  background: var(--elb-amber);
  margin: 0 0 26px;
}
.elb-sec--center { text-align: center; }
.elb-sec--center .elb-rule { margin-left: auto; margin-right: auto; }

/* ---- breadcrumb ---------------------------------------------------------- */
.elb-crumb {
  background: var(--elb-dark) !important;
  padding: 10px 24px !important;
}
.elb-crumb ol {
  max-width: 1180px; margin: 0 auto; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
}
.elb-crumb li {
  font-family: var(--elb-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: #d8d4cc !important;
}
.elb-crumb a { color: var(--elb-amber) !important; text-decoration: none !important; }
.elb-crumb a:hover, .elb-crumb a:focus-visible { text-decoration: underline !important; }
.elb-crumb li + li::before { content: "\203A"; margin-right: 10px; color: #8a837a; }

/* ---- top utility nav (this site shipped with no header nav at all) ------- */
.elb-topbar {
  background: var(--elb-dark) !important;
  padding: 0 20px !important;
  position: relative; z-index: 90;
}
.elb-topbar-in {
  max-width: 1400px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px;
  min-height: 46px; padding: 6px 0;
}
.elb-topbar a {
  font-family: var(--elb-display) !important;
  font-size: 12px !important;
  line-height: 20px !important;
  letter-spacing: .3px !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 5px 2px;
  border-bottom: 2px solid transparent;
}
.elb-topbar a:hover, .elb-topbar a:focus-visible { border-bottom-color: var(--elb-amber); color: var(--elb-amber) !important; }
.elb-topbar .elb-topbar-cta {
  margin-left: auto;
  background: var(--elb-amber) !important;
  color: var(--elb-ink) !important;
  padding: 7px 16px !important;
  border-bottom: none !important;
}
.elb-topbar .elb-topbar-cta:hover, .elb-topbar .elb-topbar-cta:focus-visible {
  background: #fff !important; color: var(--elb-ink) !important;
}

/* ---- buttons ------------------------------------------------------------- */
.elb-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.elb-sec--center .elb-btns { justify-content: center; }
.elb-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--elb-display) !important;
  font-size: 15px !important;
  line-height: 20px !important;
  padding: 16px 32px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.elb-btn--dark { background: var(--elb-dark) !important; color: #fff !important; }
.elb-btn--dark:hover, .elb-btn--dark:focus-visible { background: var(--elb-brown) !important; color: var(--elb-amber) !important; transform: translateY(-2px); }
.elb-btn--amber { background: var(--elb-amber) !important; color: var(--elb-ink) !important; }
.elb-btn--amber:hover, .elb-btn--amber:focus-visible { background: var(--elb-ink) !important; color: var(--elb-amber) !important; transform: translateY(-2px); }
.elb-btn--ghost { background: #fff !important; color: var(--elb-ink) !important; border-color: var(--elb-dark); }
.elb-btn--ghost:hover, .elb-btn--ghost:focus-visible { background: var(--elb-dark) !important; color: #fff !important; transform: translateY(-2px); }

/* ---- what's included: the site's card device (title, rule, body) --------- */
.elb-grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 34px;
}
.elb-card {
  background: #fff;
  border: 1px solid var(--elb-rule);
  border-top: 6px solid var(--elb-amber);
  padding: 28px 24px !important;
}
.elb-sec--wash .elb-card { background: #fff; }
.elb-card h3 { margin-top: 0 !important; }
.elb-card p { font-size: 16px !important; line-height: 28px !important; }

/* ---- lock standards table ------------------------------------------------ */
.elb-std { margin-top: 34px; border-top: 3px solid var(--elb-dark); }
.elb-std-row {
  display: grid; grid-template-columns: minmax(180px, 1fr) 110px minmax(260px, 2.4fr);
  gap: 8px 22px; padding: 22px 0; border-bottom: 1px solid var(--elb-rule);
  align-items: start;
}
.elb-std-door {
  font-family: var(--elb-display) !important;
  font-size: 15px !important; line-height: 24px !important;
  color: var(--elb-ink) !important;
}
.elb-std-code {
  font-family: var(--elb-display) !important;
  font-size: 14px !important; line-height: 20px !important;
  background: var(--elb-amber); color: var(--elb-ink) !important;
  padding: 6px 10px; text-align: center; align-self: start;
}
.elb-std-row p { margin: 0 !important; font-size: 16px !important; line-height: 28px !important; }

/* ---- FAQ: native details/summary, no Elementor JS dependency ------------- */
.elb-faq { margin-top: 30px; border-top: 1px solid var(--elb-rule); }
.elb-faq details { border-bottom: 1px solid var(--elb-rule); background: #fff; }
.elb-faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 18px !important;
  font-family: var(--elb-display) !important;
  font-size: 16px !important;
  line-height: 26px !important;
  color: var(--elb-ink) !important;
}
.elb-faq summary::-webkit-details-marker { display: none; }
.elb-faq summary::after {
  content: "+"; margin-left: auto;
  font-family: var(--elb-display); font-size: 20px; line-height: 26px;
  color: var(--elb-amber-deep); flex: none;
}
.elb-faq details[open] > summary::after { content: "\2013"; }
.elb-faq summary:hover, .elb-faq summary:focus-visible { background: var(--elb-wash); }
.elb-faq details[open] > summary { background: var(--elb-wash); }
.elb-faq .elb-a { padding: 0 18px 22px !important; }
.elb-faq .elb-a p { font-size: 16px !important; line-height: 29px !important; }

/* ---- designed internal-link blocks --------------------------------------- */
/* services: solid arrow buttons (never outline pills) */
.elb-svc-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.elb-svc-link {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--elb-dark) !important; color: #fff !important;
  font-family: var(--elb-display) !important;
  font-size: 14px !important; line-height: 20px !important;
  padding: 15px 22px !important; text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.elb-svc-link svg { flex: none; width: 15px; height: 15px; fill: var(--elb-amber); transition: fill .15s ease, transform .15s ease; }
.elb-svc-link:hover, .elb-svc-link:focus-visible { background: var(--elb-amber) !important; color: var(--elb-ink) !important; transform: translateY(-2px); }
.elb-svc-link:hover svg, .elb-svc-link:focus-visible svg { fill: var(--elb-ink); transform: translateX(3px); }
.elb-svc-link[aria-current="page"] { background: var(--elb-amber) !important; color: var(--elb-ink) !important; }
.elb-svc-link[aria-current="page"] svg { fill: var(--elb-ink); }

/* towns: pin-icon cards with hover lift (never outline pills) */
.elb-town-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  margin-top: 30px;
}
.elb-town-card {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--elb-rule);
  border-left: 5px solid var(--elb-amber);
  padding: 16px 18px !important; text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, border-left-color .16s ease;
}
.elb-town-card:hover, .elb-town-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
  border-left-color: var(--elb-dark);
}
.elb-town-card svg { flex: none; width: 17px; height: 22px; fill: var(--elb-amber-deep); }
.elb-town-card:hover svg, .elb-town-card:focus-visible svg { fill: var(--elb-dark); }
.elb-town-card span {
  font-family: var(--elb-display) !important;
  font-size: 14px !important; line-height: 20px !important;
  color: var(--elb-ink) !important;
}
.elb-town-card small {
  display: block;
  font-family: var(--elb-text) !important; font-weight: 600 !important;
  font-size: 12px !important; line-height: 18px !important;
  color: var(--elb-body) !important; text-transform: none !important;
}

/* ---- signature device: photo with offset amber block -------------------- */
.elb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.elb-figure { position: relative; }
.elb-figure::after {
  content: ""; position: absolute; left: 22px; top: 22px; right: -22px; bottom: -22px;
  background: var(--elb-amber); z-index: 0;
}
.elb-figure img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* ---- footer band --------------------------------------------------------- */
.elb-footer { background: var(--elb-brown) !important; padding: 54px 24px 34px !important; }
.elb-footer-in { max-width: 1180px; margin: 0 auto; }
.elb-footer-cols {
  display: grid; gap: 34px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.elb-footer h2 {
  font-family: var(--elb-display) !important;
  font-size: 15px !important; line-height: 24px !important;
  color: var(--elb-amber) !important; text-transform: uppercase !important;
  margin: 0 0 14px !important;
}
.elb-footer ul { list-style: none; margin: 0; padding: 0; }
.elb-footer li { margin: 0 0 9px !important; }
.elb-footer a, .elb-footer p, .elb-footer li {
  font-family: var(--elb-text) !important; font-weight: 600 !important;
  font-size: 15px !important; line-height: 25px !important;
  color: #efe9e0 !important;
}
.elb-footer a { text-decoration: none !important; }
/* the dark footer band IS --elb-brown, so the body-copy `.elb strong` brown
   would render invisible on it: inherit the band colour instead (AA fix). */
.elb-footer strong { color: inherit !important; }
.elb-footer a:hover, .elb-footer a:focus-visible { color: var(--elb-amber) !important; text-decoration: underline !important; }
.elb-footer-base {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
}
.elb-footer-base p { font-size: 13px !important; line-height: 22px !important; color: #cfc6ba !important; margin: 0 !important; }

/* ---- scroll anchoring: fixed-ish offset for in-page jumps ---------------- */
.elb [id], .elb-sec[id] { scroll-margin-top: 48px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .elb h2.elb-h2 { font-size: 34px !important; }
  .elb-split { gap: 34px; }
}
@media (max-width: 860px) {
  .elb-sec { padding: 48px 20px !important; }
  .elb-split { grid-template-columns: 1fr; gap: 46px; }
  .elb-figure::after { left: 14px; top: 14px; right: -14px; bottom: -14px; }
  .elb-std-row { grid-template-columns: 1fr; gap: 10px; }
  .elb-std-code { justify-self: start; }
}
@media (max-width: 560px) {
  .elb h2.elb-h2 { font-size: 27px !important; }
  .elb h3.elb-h3 { font-size: 19px !important; }
  .elb p, .elb li { font-size: 16px !important; line-height: 28px !important; }
  .elb-btn { padding: 14px 20px !important; font-size: 13px !important; width: 100%; justify-content: center; }
  .elb-btns { gap: 10px; }
  .elb-town-grid { gap: 12px; }
  .elb-svc-link { width: 100%; }
  .elb-topbar-in { min-height: 0; gap: 2px 14px; }
  .elb-topbar a { font-size: 11px !important; }
  .elb-topbar .elb-topbar-cta { margin-left: 0; }
}
@media (max-width: 380px) {
  .elb-town-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .elb-btn, .elb-svc-link, .elb-town-card, .elb-svc-link svg { transition: none !important; }
  .elb-btn:hover, .elb-svc-link:hover, .elb-town-card:hover { transform: none !important; }
}

/* legacy service headings retargeted into links: look preserved, IA wired */
a.elb-inline { color: inherit !important; text-decoration: none !important; border-bottom: 2px solid rgba(243,194,66,.55); }
a.elb-inline:hover, a.elb-inline:focus-visible { color: inherit !important; border-bottom-color: #312f2b; }

/* compact index of the site's original location pages, wired into the areas hub */
.elb-index { list-style: none; margin: 30px 0 0 !important; padding: 0 !important;
  columns: 5 165px; column-gap: 26px; }
.elb-index li { break-inside: avoid; margin: 0 0 7px !important; }
.elb-index a { font-family: var(--elb-text) !important; font-weight: 600 !important;
  font-size: 15px !important; line-height: 24px !important;
  color: var(--elb-brown) !important; text-decoration: none !important;
  border-bottom: 1px solid transparent; }
.elb-index a:hover, .elb-index a:focus-visible { border-bottom-color: var(--elb-amber); color: var(--elb-ink) !important; }
@media (max-width: 560px) { .elb-index { columns: 2 130px; } }