/* Post-migration fixes that intentionally improve on the WordPress original. */

/* Mobile menu: the contact info rows (icon + phone / icon + email) were wider
   than small screens because flex items refuse to shrink below content width.
   Let them shrink and wrap so nothing is ever clipped. */
@media (max-width: 991px) {
  .wh-electrician-header-mobile-contact-info-wrapper {
    width: 100%;
    min-width: 0;
  }
  .wh-electrician-header-mobile-contact-info-wrapper .wh-electrician-header-top-bar__info-box {
    gap: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .wh-electrician-header-mobile-contact-info-wrapper .wh-electrician-header-top-bar__info-box .content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .wh-electrician-header-mobile-contact-info-wrapper .wh-electrician-header-top-bar__info-box .content a {
    font-size: 15px;
  }
}

/* Footer: below 992px the contact block used a 2-column grid, and the email
   address overflowed its half-width column, widening the page (horizontal
   scroll on phones). Stack the contact info in a single column on mobile and
   let long strings wrap instead of overflowing. */
@media (max-width: 991px) {
  .wh-electrician-footer__contact-wrapper {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-gap: 20px;
  }
  .wh-electrician-footer__contact-info-box {
    min-width: 0;
    max-width: 100%;
  }
  .wh-electrician-footer__contact-info-box .content {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Service pages carry two sidebar sections (Our Services + Service Areas). Each
   wrapper is position:sticky at the same top offset, so on scroll they stuck at
   once and overlapped. Their combined height (~1640px) is taller than any
   viewport, so a single sticky sidebar would clip its own bottom — instead, when
   a sidebar holds two sections, let it scroll with the page. Single-section
   location-page sidebars keep their sticky behavior. */
.wh-mp-service-single__sidebar-inner:has(> .wh-mp-service-single__sidebar-service-wrapper + .wh-mp-service-single__sidebar-service-wrapper) .wh-mp-service-single__sidebar-service-wrapper {
  position: static;
  top: auto;
}

/* Service/location pages render their main image as a background inside a
   single-slide swiper. Swiper sets the slide width in JS, so the LCP image
   could not paint until 144KB of library had loaded. Every one of these
   carousels has exactly one slide, so give it a width up front — swiper still
   overrides with its own inline width once it initializes. */
.ui-swiper-container > .swiper-wrapper > .swiper-slide {
  width: 100%;
}

/* WCAG AA contrast. The brand teal (#38bea5) gave white text only 2.31:1 and
   the secondary blue (#1191d0) 3.51:1; AA requires 4.5:1. Both are darkened
   the minimum amount needed, keeping the palette recognizable. Overriding the
   custom properties fixes every button, tab, accordion header and accent at
   once — and works in both directions, since the teal is also used as text. */
:root {
  --ui-color-elwuyr: #268371; /* teal  -> 4.60:1 on white */
  --ui-color-poujnx: #0e7eb4; /* blue  -> 4.50:1 on white */
  --ui-color-hedxvx: #0e7eb4;
}

/* The breadcrumb's current-page item sits on a light gray pill (#f6f7f9)
   rather than white, so the secondary blue landed at 4.2:1. Nudge just this
   element to the lightest blue that clears 4.5:1 on that background. */
.el-breadcrumbs .item[aria-current="page"] {
  color: #0d78ac;
}

/* ---- Reviews page ------------------------------------------------------
   Scoped to /reviews/ so it cannot affect the shared theme components.
   Values come from the theme's own tokens: 10px radius (service cards),
   --ui-color-werguc for hairlines, --ui-color-elwuyr for the star accent. */
.whg-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 2.5rem 0;
}
@media (max-width: 991px) {
  .whg-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .whg-reviews-grid { grid-template-columns: 1fr; }
}
.whg-review-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 28px;
  background-color: var(--ui-color-pygeva, #fff);
  border: 1px solid var(--ui-color-werguc, #eaecf0);
  border-radius: 10px;
  /* cards break where the content ends, not mid-quote */
  break-inside: avoid;
}
.whg-review-stars {
  display: flex;
  gap: 5px;
  font-size: 18px;
  line-height: 1;
  color: var(--ui-color-elwuyr, #268371);
}
.whg-review-text {
  /* reset the theme's decorative blockquote treatment (georgia serif, 4-5px
     accent rule, 30px indent) — inside a card the quote marks carry it */
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  quotes: "\201C" "\201D";
  font-size: 15px;
  line-height: 1.7;
  color: var(--ui-color-wtlnav, #272e44);
  flex: 1 1 auto;
}
.whg-review-text::before { content: open-quote; }
.whg-review-text::after  { content: close-quote; }
.whg-review-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  color: var(--ui-color-pxxdvn, #101828);
}
.whg-review-meta {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ui-color-elwuyr, #268371);
}
.whg-reviews-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.whg-reviews-cta a.ui-button {
  text-decoration: none;
}

/* ---- Mobile header: tap-to-call ----------------------------------------
   Below 992px the top bar hides its phone and email boxes and the phone
   number sits inside the hamburger menu, so the only always-visible control
   on a phone was "BOOK YOUR SERVICE". Calls are what the business runs on,
   so the mobile bar now carries a tel: button beside the booking button, and
   booking steps back to an outline style. Desktop (992px and up) is untouched:
   the call button is hidden there and the top bar already shows the number.
   Breakpoints are the theme's own: 991 / 478 / 360. */
.whg-header-call,
.whg-cta-short {
  display: none;
}
@media (max-width: 991px) {
  .wh-electrician-header-mobile .wh-electrician-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-gap: 10px;
  }
  .wh-electrician-header-mobile .wh-electrician-header__cta-wrapper {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .whg-header-call {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 11px 14px !important;
    border-radius: 6px;
    font-size: 15px !important;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
  }
  .whg-header-call svg {
    width: 20px;
    height: 20px;
    flex: none;
  }
  /* Booking becomes the secondary action: same height, outline, no arrow.
     Four classes so this outranks the theme's 478px width:100% rule. */
  .wh-electrician-header-mobile .wh-it__button-primary.wh-electrician-header__cta-btn.ui-button {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    gap: 0;
    padding: 9px 12px !important;
    font-size: 14px !important;
    letter-spacing: 0;
    white-space: nowrap;
    background-color: transparent;
    color: var(--ui-color-elwuyr, #268371);
    box-shadow: inset 0 0 0 2px var(--ui-color-elwuyr, #268371);
  }
  .wh-electrician-header-mobile .wh-electrician-header__cta-btn svg {
    display: none;
  }
}
@media (max-width: 478px) {
  /* Phone widths: the number stays, booking shortens to one word, and both
     buttons tighten so a 320px viewport still fits burger + call + book. */
  .wh-electrician-header-mobile .wh-electrician-header__inner {
    grid-gap: 6px;
  }
  .wh-electrician-header-mobile .wh-electrician-header__cta-wrapper {
    gap: 6px;
  }
  .whg-header-call {
    gap: 6px;
    padding: 10px 11px !important;
    font-size: 14px !important;
  }
  .whg-header-call svg {
    width: 18px;
    height: 18px;
  }
  .wh-electrician-header-mobile .wh-it__button-primary.wh-electrician-header__cta-btn.ui-button {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  .wh-electrician-header-mobile .wh-electrician-header__cta-btn .whg-cta-long {
    display: none;
  }
  .wh-electrician-header-mobile .wh-electrician-header__cta-btn .whg-cta-short {
    display: inline;
  }
}
@media (max-width: 360px) {
  /* The theme insets .el-container to 90% width; on a 320px screen that
     leaves 288px for burger + call + book. Use the full width with a small
     fixed inset instead. */
  .wh-electrician-header-mobile .wh-electrician-header__inner {
    width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
  }
  .whg-header-call {
    padding: 9px 9px !important;
    font-size: 13px !important;
  }
  .wh-electrician-header-mobile .wh-it__button-primary.wh-electrician-header__cta-btn.ui-button {
    padding: 7px 8px !important;
    font-size: 12px !important;
  }
}

/* ---- Price tables (pricing page and the per-service pricing blocks) ----
   Real <table> markup so the row header, price and notes stay associated
   for screen readers. Below 640px the three columns stack into a card per
   row; the row header keeps its scope so the association survives. Colors
   are the theme's own tokens, like the reviews grid above. */
.whg-prices-wrap {
  margin: 14px 0 26px;
}
.whg-prices {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ui-color-wtlnav, #272e44);
}
.whg-prices caption {
  text-align: left;
  font-weight: 600;
  padding: 0 0 8px;
}
.whg-prices th,
.whg-prices td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ui-color-werguc, #eaecf0);
}
.whg-prices thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-color-elwuyr, #268371);
  border-bottom: 2px solid var(--ui-color-elwuyr, #268371);
  background: transparent;
}
.whg-prices tbody th {
  font-weight: 600;
  color: var(--ui-color-pxxdvn, #101828);
  width: 36%;
}
.whg-prices--compact tbody th {
  width: 60%;
}
.whg-prices .whg-price-amount {
  width: 20%;
  color: var(--ui-color-pxxdvn, #101828);
}
.whg-prices .whg-price-amount strong {
  font-weight: 700;
  white-space: nowrap;
}
.whg-prices .whg-price-line {
  display: block;
}
.whg-prices .whg-price-quoted {
  font-style: italic;
  color: #475467;
}
.whg-prices .whg-price-notes {
  color: #475467;
}
.whg-prices .whg-price-notes ul {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}
.whg-prices .whg-price-notes li {
  margin: 0 0 4px;
}
.whg-prices tbody tr:nth-child(even) {
  background-color: #f9fafb;
}
/* Sizing and warranty comparison tables (scripts/sizing_warranty). Same table
   as the price book, but with 2 to 5 equal-weight columns; on the stacked
   mobile layout each cell prints its column label from data-label. */
.whg-prices--spec tbody th {
  width: auto;
}
.whg-prices--spec td {
  color: var(--ui-color-wtlnav, #272e44);
}
.whg-sources {
  font-size: 13px;
  line-height: 1.5;
  color: #475467;
  margin: -12px 0 26px;
}
@media (max-width: 640px) {
  .whg-prices--spec caption {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }
  .whg-prices--spec td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-color-elwuyr, #268371);
    padding-top: 6px;
  }
}
/* Terms and benefit lists in the pricing copy */
.whg-terms {
  list-style: disc;
  margin: 8px 0 18px;
  padding-left: 1.35em;
}
.whg-terms li {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .whg-prices thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .whg-prices,
  .whg-prices tbody,
  .whg-prices tr {
    display: block;
    width: 100%;
  }
  .whg-prices tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--ui-color-werguc, #eaecf0);
  }
  .whg-prices tbody tr:nth-child(even) {
    background-color: transparent;
  }
  .whg-prices th,
  .whg-prices td,
  .whg-prices tbody th,
  .whg-prices--compact tbody th {
    display: block;
    width: auto;
    padding: 2px 0;
    border: 0;
  }
  .whg-prices tbody th {
    padding-bottom: 4px;
  }
  .whg-prices .whg-price-amount {
    white-space: normal;
    width: auto;
  }
  .whg-prices .whg-price-line {
    display: inline;
  }
  .whg-prices .whg-price-line + .whg-price-line::before {
    content: " \00b7 ";
  }
  .whg-prices .whg-price-notes {
    font-size: 14px;
  }
}