/* Alpha Leak Fix Pros - Elementor page components.
   These classes skin the imported Elementor containers and widgets. Layout is
   also mirrored in Elementor's own flex settings, so you can change direction,
   gap and widths in the editor; the CSS here supplies the visual design
   (borders, colours, the numbered step markers and so on).

   Every rule targets a class that is set on an Elementor element, so nothing
   here prevents editing in Elementor. */

/* ---------- shared page frame ---------- */
.alpha-page > .e-con-inner,
.alpha-page {
  --alpha-rail: 326px;
}

.alpha-main { min-width: 0; }

.alpha-lede .elementor-widget-container,
.alpha-lede p {
  font-size: 1.11rem;
  color: var(--muted);
  max-width: 68ch;
}

/* ---------- prose inside Text Editor widgets ---------- */
.elementor-widget-text-editor p { margin: 0 0 1.1em; max-width: 74ch; }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol { max-width: 74ch; padding-left: 1.15em; }
.elementor-widget-text-editor li { margin-bottom: .5em; }
.elementor-widget-text-editor h3 {
  font-family: Archivo, "IBM Plex Sans", sans-serif;
  font-weight: 700; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  line-height: 1.15; letter-spacing: -.018em; margin: 1.8em 0 .5em; color: var(--ink);
}
.elementor-widget-text-editor h4 {
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.04rem;
  margin: 1.6em 0 .5em; color: var(--ink);
}
.elementor-widget-text-editor h3:first-child,
.elementor-widget-text-editor h4:first-child { margin-top: 0; }
.elementor-widget-text-editor > .elementor-widget-container > :last-child { margin-bottom: 0; }

/* tables inside prose */
.elementor-widget-text-editor table {
  border-collapse: collapse; width: 100%; font-size: .93rem;
  background: var(--white); min-width: 520px;
}
.elementor-widget-text-editor .tbl-wrap { overflow-x: auto; margin: 1.5em 0; }
.elementor-widget-text-editor th,
.elementor-widget-text-editor td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.elementor-widget-text-editor th {
  background: var(--ink); color: var(--white);
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .89rem;
}
.elementor-widget-text-editor tbody tr:nth-child(even) { background: var(--paper-2); }
.elementor-widget-text-editor caption {
  caption-side: bottom; text-align: left; font-size: .875rem; color: var(--muted); padding-top: 9px;
}

/* ---------- home hero (matches .hero / .hero-in in the original) ---------- */
.alpha-hero {
  background-color: var(--ink);
  color: #DDE8EF;
  position: relative;
  overflow: hidden;
  border-bottom: 6px solid var(--locate);
}
.alpha-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .4; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
}
.alpha-hero > .e-con-inner { position: relative; }
.alpha-hero-text { flex: 1 1 420px; min-width: 0; }
.alpha-hero .elementor-widget-heading .elementor-heading-title { color: var(--white); max-width: 16ch; }
.alpha-hero .alpha-lede p { font-size: 1.1rem; color: #C2D6E3; max-width: 56ch; }
.alpha-hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* the dashed "locate paint" line, wiped in on load exactly as before */
.alpha-locate {
  width: 100%; max-width: 430px; height: 34px; margin: 14px 0 22px; padding: 0;
  background: url(../img/locate-line.svg) left center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: alpha-wipe 1.5s cubic-bezier(.22, .61, .36, 1) .3s forwards;
}
@keyframes alpha-wipe { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .alpha-locate { clip-path: none; animation: none; }
}

.alpha-points ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 9px; max-width: none; }
.alpha-points li { margin: 0; padding-left: 26px; position: relative; font-size: .95rem; color: #BDD2E1; }
.alpha-points li::before {
  content: ""; position: absolute; left: 0; top: .52em; width: 13px; height: 3px; background: var(--locate);
}

/* hero call card (matches .hero-card) */
.alpha-hero-card {
  flex: 0 1 370px; min-width: 280px;
  background: var(--white); color: var(--ink);
  border-radius: var(--r); border-top: 6px solid var(--water);
}
.alpha-hero-card .elementor-heading-title { margin: 0 0 6px; font-size: 1.2rem; color: var(--ink); }
.alpha-hero-card p { color: var(--muted); margin: 0; }
.alpha-hero-card .alpha-nap { background: none; border: 0; padding: 0; }
.alpha-hero-card .alpha-nap__kicker:empty { display: none; }

/* ---------- trust strip (matches .strip-in) ---------- */
.alpha-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.alpha-strip-item { flex: 1 1 180px; border-left: 3px solid var(--water); padding-left: 14px; }
.alpha-strip-item .elementor-heading-title {
  font-family: Archivo, sans-serif; font-size: 1.02rem; margin: 0 0 1px;
}
.alpha-strip-item p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- symptom / signs grid ---------- */
.alpha-signs {
  flex-direction: row; flex-wrap: wrap; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.alpha-sign { flex: 1 1 268px; background: var(--white); gap: 4px; }
.alpha-sign .elementor-heading-title {
  font-family: Archivo, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.25; margin: 0;
}
.alpha-sign p { font-size: .95rem; margin: 0; }

/* ---------- numbered process steps ---------- */
.alpha-steps { counter-reset: alphastep; gap: 0; }
.alpha-step {
  counter-increment: alphastep; position: relative;
  padding: 0 0 26px 58px; margin-left: 17px;
  border-left: 2px solid var(--line); gap: 5px;
}
.alpha-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.alpha-step::before {
  content: counter(alphastep); position: absolute; left: -18px; top: -4px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--locate);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .95rem;
  display: grid; place-items: center;
}
.alpha-step .elementor-heading-title { font-size: 1.08rem; margin: 0; }
.alpha-step p { font-size: .95rem; color: var(--muted); margin: 0; }

/* ---------- compact service / area cards (matches .svc-grid) ----------
   Small cards on a 2px hairline grid: heading, one paragraph, nothing else.
   The heading carries the link and its ::after overlay keeps the whole card
   clickable, exactly as the original whole-card anchor did. */
.alpha-cards {
  flex-direction: row; flex-wrap: wrap; gap: 2px;
  background: var(--line); border: 1px solid var(--line);
}
.alpha-card {
  flex: 1 1 285px; min-width: 0; position: relative; background: var(--white);
  border-left: 4px solid transparent;
  transition: background .15s, border-color .15s;
}
.alpha-card:hover { background: var(--paper-2); border-left-color: var(--locate); }
.alpha-card .elementor-heading-title { margin: 0 0 7px; font-size: 1.1rem; color: var(--water); }
.alpha-card .elementor-heading-title a { color: inherit; text-decoration: none; }
.alpha-card .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; }
.alpha-card:hover .elementor-heading-title,
.alpha-card:hover .elementor-heading-title a { color: var(--ink); }
.alpha-card p { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- guide list (matches .posts): one column, not a card grid ---- */
.alpha-posts {
  flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.alpha-posts .alpha-card { flex: 1 1 auto; }
.alpha-posts .alpha-card .elementor-heading-title { margin: 0 0 6px; font-size: 1.18rem; }
.alpha-posts .alpha-card p { font-size: .94rem; }
.alpha-card-meta p { font-size: .875rem; color: var(--muted); margin: 0 0 6px; }

/* ---------- plain two column block (matches .two-col) ---------- */
.alpha-split { flex-direction: row; flex-wrap: wrap; gap: 38px; align-items: flex-start; }
.alpha-split-text { flex: 1 1 320px; min-width: 0; }
.alpha-split-text p, .alpha-split-text ul { max-width: none; }

/* ---------- callouts ---------- */
.alpha-note { background: var(--water-lt); border-left: 5px solid var(--water); padding: 18px 22px; }
.alpha-warn { background: #FFF6DC; border-left: 5px solid var(--locate); padding: 18px 22px; }
.alpha-note p:last-child, .alpha-warn p:last-child { margin-bottom: 0; }
.alpha-note h3, .alpha-warn h3 { margin-top: 0; font-size: 1.05rem; }
.alpha-note .elementor-heading-title, .alpha-warn .elementor-heading-title { font-size: 1.05rem; }

/* ---------- table of contents ---------- */
.alpha-toc { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--sewer); padding: 17px 21px; }
.alpha-toc .elementor-heading-title { font-size: 1rem; margin-bottom: 8px; }
.alpha-toc ol { margin: 0; font-size: .95rem; columns: 2; column-gap: 30px; padding-left: 1.2em; }
.alpha-toc li { break-inside: avoid; margin-bottom: .3em; }

/* ---------- CTA band (matches .band / .band-inner) ---------- */
.alpha-band-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 13px; }
.alpha-band-actions .alpha-hrs p { margin: 0; }
.alpha-band { background-color: var(--ink-2); }
.alpha-band .elementor-heading-title {
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  color: var(--white); margin: 0 0 8px; letter-spacing: -.02em;
}
.alpha-band p { color: #D9E7F0; max-width: 62ch; font-size: .97rem; margin: 0 0 20px; }
.alpha-band .alpha-hrs p { color: #B6CEDE; font-size: .95rem; margin: 0; }

/* ---------- sidebar rail ---------- */
.alpha-rail { gap: 20px; }
@media (min-width: 1041px) {
  .alpha-rail { position: sticky; top: 104px; }
}
.alpha-rail-card { padding: 20px 21px; }

/* ---------- split image + text ---------- */
.alpha-split { flex-direction: row; flex-wrap: wrap; gap: 38px; align-items: center; }

/* ---------- buttons (Elementor button widget wearing the site's skin) ---------- */
.elementor-button.alpha-btn-call,
.alpha-btn-call .elementor-button {
  background-color: var(--locate); color: var(--ink);
  box-shadow: inset 0 -4px 0 rgba(10, 36, 54, .2);
  font-family: Archivo, sans-serif; font-weight: 700; border-radius: var(--r);
  padding: 15px 26px; min-height: 52px;
}
.elementor-button.alpha-btn-call:hover,
.alpha-btn-call .elementor-button:hover { background-color: #FFD23F; color: var(--ink); }

.alpha-btn-ghost .elementor-button {
  background: transparent; color: var(--white);
  border: 2px solid rgba(255, 255, 255, .5); border-radius: var(--r);
  font-family: Archivo, sans-serif; font-weight: 700; padding: 13px 24px; min-height: 52px;
}
.alpha-btn-ghost .elementor-button:hover { background: rgba(255, 255, 255, .12); color: var(--white); }

.alpha-btn-line .elementor-button {
  background: var(--white); color: var(--water); border: 2px solid var(--water);
  border-radius: var(--r); font-family: Archivo, sans-serif; font-weight: 700;
  padding: 13px 24px; min-height: 52px;
}
.alpha-btn-line .elementor-button:hover { background: var(--water); color: var(--white); }

/* ---------- widget: FAQ accordion ---------- */
.alpha-faq { border: 1px solid var(--line); background: var(--white); }
.alpha-faq__item { border-bottom: 1px solid var(--line); }
.alpha-faq__item:last-child { border-bottom: 0; }
.alpha-faq__q {
  width: 100%; text-align: left; cursor: pointer; background: none; border: 0;
  padding: 18px 46px 18px 20px; position: relative; min-height: 52px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1rem;
  color: var(--ink); line-height: 1.3;
}
.alpha-faq__q:hover { background: var(--paper-2); }
.alpha-faq__q::after {
  content: ""; position: absolute; right: 20px; top: 26px; width: 11px; height: 2px; background: var(--water);
}
.alpha-faq__q::before {
  content: ""; position: absolute; right: 24px; top: 21px; width: 2px; height: 11px;
  background: var(--water); transition: opacity .18s;
}
.alpha-faq__item.is-open .alpha-faq__q::before { opacity: 0; }
.alpha-faq__a { padding: 0 20px 18px; }
.alpha-faq__a[hidden] { display: none; }
.alpha-faq__a p:last-child, .alpha-faq__a ul:last-child { margin-bottom: 0; }

/* ---------- widget: NAP call card ---------- */
.alpha-nap { background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--locate); padding: 20px 21px; }
.alpha-nap__kicker { font-size: .875rem; color: var(--muted); margin: 0 0 2px; }
.alpha-nap__phone {
  display: block; font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.55rem;
  letter-spacing: -.02em; text-decoration: none; color: var(--ink);
}
.alpha-nap__phone:hover { color: var(--water); }
.alpha-nap__meta { font-size: .875rem; color: var(--muted); margin: 8px 0 12px; line-height: 1.5; }
.alpha-nap__btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--locate); color: var(--ink); text-decoration: none;
  font-family: Archivo, sans-serif; font-weight: 700; padding: 13px 17px;
  min-height: 48px; border-radius: var(--r); box-shadow: inset 0 -4px 0 rgba(10, 36, 54, .2);
}
.alpha-nap__btn:hover { background: #FFD23F; color: var(--ink); }
.alpha-nap__note { font-size: .89rem; color: var(--muted); margin: 11px 0 0; line-height: 1.5; }
.alpha-nap--dark { background: var(--ink); border-color: transparent; border-top-color: var(--locate); }
.alpha-nap--dark .alpha-nap__kicker, .alpha-nap--dark .alpha-nap__meta, .alpha-nap--dark .alpha-nap__note { color: #A9C5D6; }
.alpha-nap--dark .alpha-nap__phone { color: var(--white); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.alpha-nap--dark .alpha-nap__phone:hover { color: var(--locate); }

/* ---------- widget: nav link list ---------- */
.alpha-navlist { background: var(--white); border: 1px solid var(--line); padding: 20px 21px; }
.alpha-navlist__h { font-size: 1rem; margin: 0 0 11px; padding-bottom: 9px; border-bottom: 2px solid var(--water); font-family: Archivo, sans-serif; }
.alpha-navlist ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.alpha-navlist li { margin: 0; border-bottom: 1px solid var(--paper); }
.alpha-navlist li:last-child { border-bottom: 0; }
.alpha-navlist a { display: block; padding: 12px 0; min-height: 44px; font-size: .93rem; text-decoration: none; color: var(--ink); line-height: 1.4; }
.alpha-navlist a:hover { color: var(--water); }
.alpha-navlist li.is-current a { color: var(--water); font-weight: 600; }
.alpha-navlist__more { margin: 11px 0 0; font-size: .89rem; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .alpha-rail { position: static; }
}
@media (max-width: 760px) {
  .alpha-signs, .alpha-cards, .alpha-split { flex-direction: column; }
  .alpha-toc ol { columns: 1; }
  .alpha-step { padding-left: 50px; }
  .alpha-card .elementor-widget-image img { height: 200px; }
}

/* ---------- page shell (matches .shell.with-rail) ---------- */
.alpha-page { flex-direction: row; flex-wrap: wrap; gap: 52px; align-items: flex-start; }
.alpha-main { flex: 1 1 520px; min-width: 0; }
.alpha-rail { flex: 0 1 326px; min-width: 280px; gap: 20px; }
.alpha-home-body { gap: 0; }

/* the rail's call card keeps its yellow top rule, as .rail-call did */
.alpha-rail .alpha-nap { border-top: 6px solid var(--locate); }

/* ---------- classes that still live inside rich-text widgets ---------- */
.alpha-main .area-cols,
.elementor-widget-text-editor .area-cols {
  columns: 3; column-gap: 36px; list-style: none; padding: 0; margin: 0; max-width: none;
}
.elementor-widget-text-editor .area-cols li {
  break-inside: avoid; margin-bottom: .45em; padding-left: 15px; position: relative; font-size: .95rem;
}
.elementor-widget-text-editor .area-cols li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; background: var(--sewer);
}
.elementor-widget-text-editor .rail-more { margin: 11px 0 0; font-size: .89rem; }
.elementor-widget-text-editor .post-meta { font-size: .875rem; color: var(--muted); margin: -.4em 0 1.6em; }
.elementor-widget-text-editor .mini { font-size: .89rem; color: var(--muted); }
.alpha-table .tbl-wrap { overflow-x: auto; margin: 0; }

/* ---------- responsive: same breakpoints as the original ---------- */
@media (max-width: 1040px) {
  .alpha-page { flex-direction: column; gap: 40px; }
  .alpha-main, .alpha-rail { flex: 1 1 auto; width: 100% !important; }
  .alpha-rail { position: static; }
  .alpha-hero { }
  .alpha-hero-text, .alpha-hero-card { flex: 1 1 100%; width: 100% !important; }
  .elementor-widget-text-editor .area-cols { columns: 2; }
}
@media (max-width: 760px) {
  .alpha-signs, .alpha-cards, .alpha-split { flex-direction: column; }
  .alpha-toc ol { columns: 1; }
  .alpha-step { padding-left: 50px; }
  .elementor-widget-text-editor .area-cols { columns: 1; }
  .alpha-strip-item { flex: 1 1 100%; }
}
