/**
 * VisionIQ typography & layout overrides (loads after visioniq-page.css).
 */

.visioniq-page {
  --viq-text: #e8dcba;
  --viq-wpsl-panel: #f0f0f0;
  --viq-wpsl-panel-hover: #fafafa;
  --viq-wpsl-text: #3d3d3d;
  --viq-page-bg: #0e0e0f;
  color: var(--viq-text);
  background: var(--viq-page-bg);
}

body.visioniq-template .entry-content {
  background: var(--viq-page-bg) !important;
}

.visioniq-page .b1__inner,
.visioniq-page .b3__inner,
.visioniq-page .b4__inner,
.visioniq-page .b5__inner,
.visioniq-page .b6__inner,
.visioniq-page .b7__inner,
.visioniq-page .b8__inner {
  max-width: 115svh !important;
}

/* No margin gaps (white bands) between sections — spacing is padding inside each block */
.visioniq-page > .hero {
  margin-top: var(--visioniq-header-offset, 92px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.visioniq-page > section {
  margin: 0 !important;
}

.visioniq-page section.b1,
.visioniq-page section.b3,
.visioniq-page section.b4,
.visioniq-page section.b5,
.visioniq-page section.b6,
.visioniq-page section.b7,
.visioniq-page section.b8,
.visioniq-page section.visioniq-find-physician {
  padding-top: calc(clamp(2rem, 5vw, 4rem) + 25px) !important;
  padding-bottom: calc(clamp(2rem, 5vw, 4rem) + 25px) !important;
}

/* Global type colour (page content — not WPSL list) */
.visioniq-page h1,
.visioniq-page h2,
.visioniq-page h3,
.visioniq-page h4,
.visioniq-page h5,
.visioniq-page h6,
.visioniq-page .b1__text h2,
.visioniq-page .b3__text h2,
.visioniq-page .b4__text h2,
.visioniq-page .b5__text h2,
.visioniq-page .b6__text h2,
.visioniq-page .b7__text h2,
.visioniq-page .b1__text h3,
.visioniq-page .b7-glasses__text h3,
.visioniq-page .b4__text h1 {
  color: var(--viq-text) !important;
}

.visioniq-page h2,
.visioniq-page .b1__text h2,
.visioniq-page .b3__text h2,
.visioniq-page .b4__text h2,
.visioniq-page .b5__text h2,
.visioniq-page .b6__text h2,
.visioniq-page .b7__text h2 {
  text-align: left !important;
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.visioniq-page h3,
.visioniq-page .b1__text h3,
.visioniq-page .b7-glasses__text h3 {
  text-align: left !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.visioniq-page .b1__text > h2,
.visioniq-page .b3__text > h2,
.visioniq-page .b4__text > h1,
.visioniq-page .b5__text > h2,
.visioniq-page .b6__text > h2,
.visioniq-page .b7__text > h2,
.visioniq-page #b1-heading,
.visioniq-page #b3-heading,
.visioniq-page #b4-heading,
.visioniq-page #b5-heading,
.visioniq-page #b6-heading,
.visioniq-page #b7-heading {
  margin-bottom: 3rem !important;
}

.visioniq-page .b1__text h3 {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}

.visioniq-page .b3__text p:last-child {
  margin-bottom: 0 !important;
  margin-top: 3rem !important;
}

.visioniq-page p,
.visioniq-page .b1__text p,
.visioniq-page .b3__text p,
.visioniq-page .b4__text p,
.visioniq-page .b5__text p,
.visioniq-page .b6__text p,
.visioniq-page .b7__text p,
.visioniq-page .b7-glasses__text p {
  font-weight: 400 !important;
  color: var(--viq-text) !important;
  text-align: left !important;
}

/* Hero — content spans full hero column width (not half the grid) */
.visioniq-page .hero__columns {
  position: relative !important;
}

.visioniq-page .hero__right {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.visioniq-page .hero__left {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  z-index: 1 !important;
  max-width: 70% !important;
  gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  box-sizing: border-box !important;
}

.visioniq-page .hero__logo {
  min-width: 20vw !important;
  max-width: 25vw !important;
  margin-top: 5% !important;
  margin-bottom: 0 !important;
}

.visioniq-page .hero__left p {
  margin: 5rem 0 4rem 0 !important;
  font-size: clamp(1.25rem, 3.5vw, 3rem) !important;
  max-width: 100% !important;
  font-weight: 400 !important;
  text-shadow: none !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.visioniq-page .hero__left p strong {
  font-weight: 700 !important;
}

.visioniq-page .hero__left .hero__logos {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 5% !important;
}

/* Hero — desktop image: anchor right so cover crops from the left only */
.visioniq-page > .hero {
  background-position: right center !important;
}

/* Hero — tablet / narrow desktop (theme menu taller below 1870px) */
@media (min-width: 961px) and (max-width: 1869px) {
  body.visioniq-template .visioniq-page .hero,
  .visioniq-page > .hero {
    margin-top: 0 !important;
    padding-top: calc(var(--visioniq-header-offset, 92px) + 50px) !important;
    box-sizing: border-box !important;
    background-color: #0e0e0f !important;
    background-image: url("Header_image.jpg") !important;
    background-position: right bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

/* Hero — mobile only */
@media (max-width: 960px) {
  body.visioniq-template .visioniq-page .hero,
  .visioniq-page > .hero {
    margin-top: var(--visioniq-header-offset, 130px) !important;
    background-color: #0e0e0f !important;
  }

  .visioniq-page .hero {
    background-image: url("Header_image_mobile.jpg") !important;
  }

  .visioniq-page .hero__columns {
    max-width: 100% !important;
  }

  .visioniq-page .hero__left {
    max-width: 100% !important;
    width: 100% !important;
    padding: clamp(1rem, 3vw, 1.5rem) 0 !important;
    padding-left: 2vw !important;
    align-items: flex-start !important;
  }

  .visioniq-page .hero__logo {
    width: 50vw !important;
    max-width: 50vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .visioniq-page .hero__left p {
    width: 60vw !important;
    max-width: 60vw !important;
    font-size: 5vw !important;
    margin: 4rem 0 0 0 !important;
    padding-left: 5% !important;
  }

  .visioniq-page .hero__left .hero__logos {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 19% 0 0 0 !important;
  }

  /* B3 — stack: left callout, center animation, right callout */
  .visioniq-page .b3__tri {
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    grid-template-columns: unset !important;
    gap: clamp(2rem, 7vw, 3.25rem) !important;
    overflow: visible !important;
  }

  .visioniq-page .b3__tri .b3-callout:first-child {
    order: 1 !important;
  }

  .visioniq-page .b3-rep {
    order: 2 !important;
  }

  .visioniq-page .b3__tri .b3-callout:last-child {
    order: 3 !important;
  }

  .visioniq-page .b3__inner {
    overflow: visible !important;
  }

  .visioniq-page .b3__tri {
    padding-inline: clamp(0.35rem, 1.5vw, 0.65rem) !important;
  }

  .visioniq-page .b3-callout {
    width: 100% !important;
    max-width: min(96vw, 26rem) !important;
    margin: 3rem 0 3rem 0 !important;
    align-self: center !important;
    text-align: center !important;
    background: #323236 !important;
    border-radius: 24px !important;
    color: #9a9488 !important;
    padding: clamp(0.85rem, 3vw, 1.15rem) clamp(1rem, 4vw, 1.5rem) !important;
    box-sizing: border-box !important;
  }

  .visioniq-page .b3-rep {
    width: 100% !important;
    max-width: min(96vw, 26rem) !important;
    margin-inline: auto !important;
    overflow: visible !important;
    justify-content: center !important;
  }

  .visioniq-page .b3-rep .rep-stage {
    width: 100% !important;
    max-width: min(96vw, 26rem) !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .visioniq-page .b3-rep .rep-stage .rep-base {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .visioniq-page .b3-rep .rep-stage .rep-cataract,
  .visioniq-page .b3-rep .rep-stage .rep-lal {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
  }

  .visioniq-page .b3-rep .rep-stage .rep-cataract {
    animation-name: rep-move-up-mobile !important;
  }

  .visioniq-page .b3-rep .rep-stage .rep-lal {
    animation-name: rep-lal-move-mobile !important;
  }

  .visioniq-page .b7__inner {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: clamp(1.25rem, 4vw, 2rem) !important;
  }

  .visioniq-page .b7__text {
    order: 1 !important;
  }

  .visioniq-page .b7__media {
    order: 2 !important;
    width: 100% !important;
  }

  .visioniq-page .b7-glasses__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: clamp(1.25rem, 3vw, 2rem) !important;
  }

  .visioniq-page .b7-glasses__text {
    order: 1 !important;
  }

  .visioniq-page .b7-glasses__media {
    order: 2 !important;
    width: 100% !important;
  }

  .visioniq-page .b8__grid {
    grid-template-columns: 1fr !important;
  }

  /* B4 — stack images */
  .visioniq-page .b4__pair {
    grid-template-columns: 1fr !important;
  }

  /* B5 — desktop hidden, mobile vertical layout shown */
  .visioniq-page .b5-timeline--desktop {
    display: none !important;
  }

  .visioniq-page .b5-timeline--mobile {
    display: block !important;
  }

  .visioniq-page .b5-timeline--mobile .label__title,
  .visioniq-page .b5-timeline--mobile .label__sub,
  .visioniq-page .b5-timeline--mobile .foot__prefix,
  .visioniq-page .b5-timeline--mobile .foot__detail {
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    color: #e8dcba !important;
  }

  .visioniq-page .b5-timeline--mobile .foot__value {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: #e8dcba !important;
  }

  .visioniq-page .b5-timeline--mobile .line-v__grow {
    background: #e8dcba !important;
  }

  .visioniq-page .b5-timeline--mobile .bull {
    border-color: #e8dcba !important;
  }

  .visioniq-page .b5-timeline--mobile .timeline-labels,
  .visioniq-page .b5-timeline--mobile .timeline-feet {
    display: contents !important;
  }

  .visioniq-page .b5-timeline--mobile .label,
  .visioniq-page .b5-timeline--mobile .foot {
    position: static !important;
    transform: none !important;
    top: auto !important;
  }

  .visioniq-page .b5-timeline--mobile {
    padding-top: 30px !important;
    padding-inline: clamp(1.25rem, 5vw, 2rem) !important;
  }

  .visioniq-page .b5-timeline--mobile .timeline-layout {
    column-gap: clamp(1.35rem, 5.5vw, 2.25rem) !important;
  }

  .visioniq-page .b5-timeline--mobile .label {
    max-width: 11.25rem !important;
    align-items: center !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .visioniq-page .b5-timeline--mobile .label__title,
  .visioniq-page .b5-timeline--mobile .label__sub {
    text-align: center !important;
  }

  .visioniq-page .b5-timeline--mobile .label__title,
  .visioniq-page .b5-timeline--mobile .label__sub,
  .visioniq-page .b5-timeline--mobile .foot__prefix,
  .visioniq-page .b5-timeline--mobile .foot__detail {
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }
}

/* Callouts & small text */
.visioniq-page .b3-callout,
.visioniq-page .b1__lens-caption,
.visioniq-page .b4__figure figcaption,
.visioniq-page .b8__label {
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--viq-text) !important;
  text-align: left !important;
}

@media (max-width: 960px) {
  .visioniq-page .b3__tri .b3-callout {
    text-align: center !important;
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.visioniq-page .b5-timeline--desktop .bull-label {
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.visioniq-page .b5-timeline--desktop .bull-label__title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--viq-text) !important;
  text-align: center !important;
  max-width: 14rem !important;
  width: 100% !important;
  margin: 0 !important;
}

.visioniq-page .b5-timeline--desktop .bull-label__sub {
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: var(--viq-text) !important;
  text-align: center !important;
  max-width: 14rem !important;
  width: 100% !important;
  margin: 0 !important;
}

.visioniq-page .b5-timeline--desktop .timeline-foot {
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--viq-text) !important;
  text-align: center !important;
  max-width: 15rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-self: center !important;
}

.visioniq-page .b1__lens-title {
  font-size: 2rem !important;
  margin: 1.5rem 0 0 clamp(0.35rem, 1vw, 1.5rem) !important;
  color: var(--viq-text) !important;
}

.visioniq-page .b1__lens-caption {
  max-width: 28rem !important;
}

/* B3 — lens animation row */
.visioniq-page .b3__tri {
  max-width: 60vw !important;
  margin-top: 6rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 2.3fr) minmax(0, 1.35fr) !important;
  gap: clamp(0.5rem, 1.2vw, 1rem) !important;
}

.visioniq-page .b4__pair {
  margin-top: clamp(1.75rem, 4vw, 5.75rem) !important;
}

.visioniq-page .b5-timeline {
  margin-top: clamp(1.75rem, 4vw, 4.75rem) !important;
}

.visioniq-page .b7-glasses {
  margin-top: clamp(2rem, 4vw, 6rem) !important;
}

.visioniq-page .b5-timeline__label,
.visioniq-page .b5-timeline__text,
.visioniq-page .b8__name {
  font-weight: 400 !important;
  color: var(--viq-text) !important;
  text-align: left !important;
}

/* Find a Physician — center intro only; store list stays left-aligned */
.visioniq-page .visioniq-find-physician .container-fluid {
  max-width: 100rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.visioniq-page .visioniq-find-physician h2 {
  margin-bottom: 3rem !important;
  text-align: center !important;
  color: var(--viq-text) !important;
  font-size: 2.75rem !important;
  font-weight: 700 !important;
}

.visioniq-page .visioniq-find-physician p {
  max-width: 100rem !important;
  margin: 0 auto 1.5rem !important;
  text-align: center !important;
  color: var(--viq-text) !important;
}

.visioniq-page #wpsl-wrap {
  max-width: 100rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* WP Store Locator */
.visioniq-page #wpsl-wrap,
.visioniq-page #wpsl-search-wrap,
.visioniq-page #wpsl-search,
.visioniq-page .wpsl-search,
.visioniq-page .wpsl-search-wrap,
.visioniq-page #wpsl-stores,
.visioniq-page #wpsl-result-list,
.visioniq-page .wpsl-store-list {
  background-color: var(--viq-wpsl-panel) !important;
}

.visioniq-page #wpsl-stores ul li,
.visioniq-page #wpsl-result-list li {
  background: transparent !important;
  border-color: #d8d8d8 !important;
  text-align: left !important;
  transition: background-color 0.2s ease;
}

.visioniq-page #wpsl-stores ul li:hover,
.visioniq-page #wpsl-result-list li:hover {
  background-color: var(--viq-wpsl-panel-hover) !important;
}

.visioniq-page #wpsl-stores,
.visioniq-page #wpsl-stores a,
.visioniq-page #wpsl-stores .wpsl-store-location,
.visioniq-page #wpsl-stores .wpsl-store-location span,
.visioniq-page #wpsl-result-list,
.visioniq-page #wpsl-result-list a,
.visioniq-page #wpsl-stores .wpsl-store-location strong,
.visioniq-page #wpsl-result-list strong,
.visioniq-page #wpsl-wrap,
.visioniq-page #wpsl-search-wrap,
.visioniq-page #wpsl-search,
.visioniq-page .wpsl-search,
.visioniq-page .wpsl-search-wrap,
.visioniq-page #wpsl-search label,
.visioniq-page #wpsl-search .label,
.visioniq-page #wpsl-search input,
.visioniq-page #wpsl-search select,
.visioniq-page .wpsl-search label,
.visioniq-page .wpsl-search input,
.visioniq-page .wpsl-search select,
.visioniq-page #wpsl-search-form label,
.visioniq-page #wpsl-search-form input,
.visioniq-page #wpsl-search-form select {
  color: var(--viq-wpsl-text) !important;
}

.visioniq-page #wpsl-search,
.visioniq-page .wpsl-search,
.visioniq-page #wpsl-stores,
.visioniq-page #wpsl-result-list {
  text-align: left !important;
}

.visioniq-page .visioniq-find-physician #wpsl-wrap,
.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-stores,
.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-result-list,
.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-stores ul,
.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-result-list li,
.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-stores ul li,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-store-location,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-store-location p,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-store-location span,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-store-location strong,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-store-location a,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-directions,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-directions-wrap {
  text-align: left !important;
}

.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-result-list li,
.visioniq-page .visioniq-find-physician #wpsl-wrap #wpsl-stores ul li {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.visioniq-page .find-a-physician #wpsl-wrap .wpsl-search-btn-wrap #wpsl-search-btn,
.visioniq-page .visioniq-find-physician #wpsl-wrap .wpsl-search-btn-wrap #wpsl-search-btn,
.visioniq-page #wpsl-search-btn {
  background-color: #c4c4c4 !important;
  border-color: #c4c4c4 !important;
}

/* Map marker popup — black text (overrides page tan + color: inherit on links) */
.visioniq-page .wpsl-info-window,
.visioniq-page .wpsl-info-window p,
.visioniq-page .wpsl-info-window span,
.visioniq-page .wpsl-info-window strong,
.visioniq-page .wpsl-info-window a {
  color: #000 !important;
}