/* OpticWise marketing site — overrides + new states layered on /styles.css.
 * Loaded after styles.css so these rules win without !important where possible.
 *
 * Scope:
 *   - Mobile nav open-state (hamburger toggles `nav.is-open`)
 *   - Mobile dropdown expand-state (`.nav__dropdown.is-expanded`)
 *   - Hamburger active animation (X-shape on open)
 */

/* Fixed top nav — scrolled state. Inline classes set `transition-all
 * duration-300` so changes animate. When the page is at the top, the nav
 * is fully transparent (sits on the dark hero). Once content scrolls
 * under it, JS adds `is-scrolled` and we paint a dark translucent
 * backdrop with blur so headings / body copy passing behind the nav stay
 * legible instead of clashing with the underlying text. */
nav.is-scrolled {
  background: rgba(11, 17, 33, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Hamburger: only on viewports below lg. Unscoped `display: inline-flex` here
 * previously beat Tailwind's `.lg:hidden` specificity and showed a white control
 * on desktop. */
@media (max-width: 1023px) {
  nav button[aria-label="Menu"] {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  nav button[aria-label="Menu"] span {
    transition:
      transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 150ms ease,
      margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (min-width: 1024px) {
  nav button[aria-label="Menu"] {
    display: none !important;
  }
}

/* Mobile menu open: show the desktop UL as a vertical sheet, animate hamburger
 * into an X. Tailwind's `hidden lg:flex` classes set display:none below 1024px
 * and display:flex above; we override with a more specific selector. */
@media (max-width: 1023px) {
  nav.is-open ul.hidden {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    padding: 1rem 1.5rem 1.5rem;
    background: rgba(15, 16, 18, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
    z-index: 60;
  }
  nav.is-open ul.hidden > li {
    width: 100%;
    list-style: none;
  }
  nav.is-open ul.hidden > li > a,
  nav.is-open ul.hidden .nav__dropdown-trigger {
    display: flex;
    width: 100%;
    padding: 0.625rem 0;
    font-size: 0.95rem;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.85);
  }
  nav.is-open ul.hidden li > button.btn-nav {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* Mobile dropdown menus: collapse by default, show when expanded. */
  nav.is-open .nav__dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.5rem 1rem;
    margin: 0;
    display: none;
    min-width: 0;
    z-index: auto;
  }
  nav.is-open .nav__dropdown.is-expanded > .nav__dropdown-menu {
    display: flex;
  }
  /* Override the desktop hover/focus rules so dropdowns only open on tap. */
  nav.is-open .nav__dropdown:focus-within > .nav__dropdown-menu,
  nav.is-open .nav__dropdown:hover > .nav__dropdown-menu {
    display: none;
  }
  nav.is-open .nav__dropdown.is-expanded:focus-within > .nav__dropdown-menu,
  nav.is-open .nav__dropdown.is-expanded:hover > .nav__dropdown-menu {
    display: flex;
  }
  nav.is-open .nav__dropdown-trigger:after {
    transition: transform 150ms ease;
  }
  nav.is-open .nav__dropdown.is-expanded > .nav__dropdown-trigger:after {
    transform: rotate(180deg);
  }
}

/* Hamburger → X animation. Three spans become two crossed lines + hidden middle. */
nav.is-open button[aria-label="Menu"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  margin-bottom: 0;
}
nav.is-open button[aria-label="Menu"] span:nth-child(2) {
  opacity: 0;
}
nav.is-open button[aria-label="Menu"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  margin-bottom: 0;
}

/* Body scroll lock when mobile menu is open. */
@media (max-width: 1023px) {
  html:has(nav.is-open) {
    overflow: hidden;
  }
}

/* Focus rings for keyboard nav (a11y). The bundle had React-managed focus
 * styles; this restores something consistent for keyboard users. */
nav a:focus-visible,
nav button:focus-visible,
nav .nav__dropdown-trigger:focus-visible {
  outline: 2px solid rgba(43, 108, 176, 0.6);
  outline-offset: 2px;
  border-radius: 4px;
}

/* /contact form section — anchor target offset for the fixed top nav.
 *
 * The "Send a Message" anchors on /contact (Hero CTA, CardGrid Card 1, bottom
 * CTA) all point to #contact-form. The fixed top nav is ~4–5rem tall; the
 * scroll-margin keeps the section heading from being hidden under it.
 *
 * Header-suppression is now handled by the OpticWise embed itself via
 * data-show-header="false" on the embed div — see contact/index.html. */
#contact-form {
  scroll-margin-top: 5rem;
}

/* Center the Schedule Review modal trigger (.btn-nav) inside the bottom CTA
 * wrapper on pages that replace the legacy inline OWNet embed. The popup form
 * is mounted by forms-embed.js when the user clicks the trigger. Other inline
 * embeds (/contact headline form, PPP starter kit) keep using the same helper
 * for horizontal centering. */
.ow-fe-cta-mount {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

/* Bottom-CTA Schedule Review trigger: white pill + OW blue label reads clearly on
 * blue gradients (.cta--blue, Insights footers). Nav keeps btn-nav (blue fill on
 * dark header). */
.ow-fe-cta-mount .btn.btn-white {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.22);
}

/* Footer LinkedIn newsletter buttons — two stacked CTAs that point to the
 * LinkedIn newsletter pages. Replaces the old in-house signup form (we
 * don't run a newsletter outside LinkedIn). Constrains the column width
 * so it lines up with the "Resources" column below. Margin-top drops the
 * stack a touch below the baseline of the left-column copy. */
.ow-footer-newsletter .ow-footer-linkedin-newsletters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 360px;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .ow-footer-newsletter .ow-footer-linkedin-newsletters {
    margin-top: 1.5rem;
  }
}
.ow-footer-newsletter .ow-footer-linkedin-newsletters .btn {
  width: 100%;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
}

/* Insights listing — runtime filter/search/pagination hides cards via the
 * `hidden` attribute. Tailwind's utility class `block` on each card sets
 * `display: block` at the same author-rule specificity as the user-agent
 * `[hidden]` rule, so we re-assert `hidden` here so the filter actually
 * hides cards. Scoped tightly so it only affects the insights grid. */
[data-ow-insights-grid] > a[hidden] {
  display: none !important;
}

/* v2 SLIM — Customer Outcomes / hero economics / Vimeo */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.hero__cta-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero__cta-link:hover {
  color: #fff;
}

.ow-economics-teaser {
  padding: 2rem 0;
}
@media (min-width: 768px) {
  .ow-economics-teaser {
    padding: 2.5rem 0;
  }
}

.ow-cardlink {
  color: inherit;
  text-decoration: none;
}
.ow-cardlink:hover {
  text-decoration: underline;
}

.ow-callout-economics {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem 1.75rem;
  background: rgba(0, 22, 32, 0.06);
  border: 1px solid rgba(0, 22, 32, 0.12);
  border-radius: 12px;
}
.ow-callout-economics h3 {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
}
.ow-callout-economics ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}

.ow-vimeo {
  max-width: 880px;
  margin: 2rem auto 0;
}
/* Vimeo responsive embed: inner box uses padding-top 56.25%; iframe is absolute */
.ow-vimeo > div {
  border-radius: 8px;
  overflow: hidden;
}
.ow-vimeo iframe {
  border: 0;
}

/* WEBSITE v2.2 polish — home midpoint CTA, quotes, linked cards, 5S header */
.ow-mid-cta .ow-mid-cta__inner {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 2.75rem) 1rem;
}
.ow-mid-cta .ow-mid-cta__heading {
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  font-weight: 700;
  margin: 0 0 1rem;
  line-height: 1.25;
}

.ow-five-s-heading-link {
  color: inherit;
  text-decoration: none;
}
.ow-five-s-heading-link:hover {
  color: var(--ow-blue, #0493d5);
}

a.cards__card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.cards__card--link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 22, 32, 0.12);
}

.quote.quote--compact {
  padding: clamp(36px, 5vw, 60px) 0;
}

.ow-ppp-book-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.5rem;
  max-width: 56rem;
  margin-inline: auto;
  text-align: left;
}
.ow-ppp-book-callout img {
  max-height: 110px;
  width: auto;
  display: block;
}
.ow-ppp-book-callout .ow-ppp-book-callout__text {
  flex: 1 1 240px;
  margin: 0;
  max-width: 46rem;
}

.ow-outcomes-table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
}
.ow-outcomes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.ow-outcomes-table th,
.ow-outcomes-table td {
  border: 1px solid rgba(0, 22, 32, 0.12);
  padding: 0.65rem 0.85rem;
  text-align: left;
}
.ow-outcomes-table th {
  background: rgba(0, 22, 32, 0.05);
  font-weight: 600;
}