/* ============================================
   Petite Optique — custom site code (depot)
   Source of truth: GitLab kahn3/petite-optique-code
   Served via GitLab Pages. Edit here, never in Webflow.
   ============================================ */

/* ---- Navigation (moved from Webflow site head) ----
   .nav-fixed is toggled by petite.js once the page scrolls. */
@media screen and (min-width: 991px) and (max-width: 1280px) {
  .navbar-brand-three { width: 28%; margin-left: 40px; }
  .nav-link { margin: 0; }
}
.w-nav-overlay { width: calc(100% - 54px); left: 27px; top: 0; }
.w-nav-overlay [data-nav-menu-open] { top: 100px; }
.w-nav-overlay.nav-fixed { width: 100%; left: 0; top: -30px; position: fixed; z-index: -1; }

/* ---- Menu icon: hamburger to X ----
   Follows Webflow's own open state (.w--open), so it can't get out of sync
   with the menu. On once the Webflow "Hamburger" interactions are deleted
   (petite.js adds html.po-menu). */
.po-menu .menu-button-2 .top-line,
.po-menu .menu-button-2 .middle-line,
.po-menu .menu-button-2 .bottom-line { transition: transform .3s ease, opacity .3s ease; }
.po-menu .menu-button-2.w--open .top-line { transform: translateY(10px) rotate(45deg); }
.po-menu .menu-button-2.w--open .middle-line { opacity: 0; }
.po-menu .menu-button-2.w--open .bottom-line { transform: translateY(-10px) rotate(-45deg); }

/* ---- Button hovers ----
   Pink fill on hover. Returns to each button's own colour on mouse-out
   (the Webflow version left pink buttons grey). On once the Webflow
   "Button Hover" interactions are deleted (html.po-buttons). */
.po-buttons .button { transition: background-color .5s ease; }
.po-buttons .button:hover { background-color: var(--antique-white); }
.po-buttons .button .grey-bg-btn { transition: all .2s, background-color .5s ease; }
.po-buttons .button:hover .grey-bg-btn { background-color: var(--antique-white); }

/* ---- Collection pages: "view" button on each frame ----
   Appears on hover or keyboard focus. On once the Webflow "Button Show/Hide"
   interactions are deleted (html.po-card-buttons). */
.po-card-buttons .collection-item-6:hover .button-2,
.po-card-buttons .collection-item-6:focus-within .button-2 { opacity: 1; }

/* ---- Slider dots (moved from Webflow site head) ---- */
.w-slider-dot {
  width: 20px;
  height: 15px;
  border-radius: 10px !important;
  border: 1px solid #000;
  background: transparent;
}
.w-slider-dot.w-active { background: #FFC2C2; }

/* ============ Page-specific styles (moved from HTML Embeds) ============
   :where(html[data-wf-page="…"]) limits each block to the page it came from,
   without changing specificity. Page ids: Home 6425b0fbd8f6f5bab820466d,
   Our services 6442feb259a743f4a7e7c9c1, Blog 644c28e4e553730a69bdca7d,
   News article template 644291744bd4c771c1f9c7ac. */

/* Home + Our services: "what we look for" hover text, FAQ arrows (arrows also on service pages via .svc-faq-grid) */
:where(html[data-wf-page="6425b0fbd8f6f5bab820466d"], html[data-wf-page="6442feb259a743f4a7e7c9c1"]) .what-are-we-looking-item:hover .what-are-we-looking-item-paragraph {
  display: flex;
}
:where(html[data-wf-page="6425b0fbd8f6f5bab820466d"], html[data-wf-page="6442feb259a743f4a7e7c9c1"], .svc-faq-grid) .labs-faq .w-dropdown-toggle::after {
  content: "";
  background-image: url(https://cdn.prod.website-files.com/6425b0fbd8f6f5f63b20466c/6442d80af310e01a0c3884bf_Frame%2015.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 56px 56px;
  width: 67px;
  height: 67px;
  z-index: 111;
}
:where(html[data-wf-page="6425b0fbd8f6f5bab820466d"], html[data-wf-page="6442feb259a743f4a7e7c9c1"], .svc-faq-grid) .labs-faq .w-dropdown-toggle.w--open::after {
  transform: rotate(-180deg);
  background-image: url(https://cdn.prod.website-files.com/6425b0fbd8f6f5f63b20466c/6442d80af310e01a0c3884bf_Frame%2015.svg);
}
/* Home: news teaser row, no border after the last card */
:where(html[data-wf-page="6425b0fbd8f6f5bab820466d"]) .news-wrapper .collection-item:last-child { border-right: none; }

/* Blog: post grid borders */
:where(html[data-wf-page="644c28e4e553730a69bdca7d"]) .blog-posts .collection-item:nth-child(2n+2) { border-left: 0; }
@media screen and (max-width: 991px) {
  :where(html[data-wf-page="644c28e4e553730a69bdca7d"]) .blog-posts .collection-item:nth-child(2n+2) { border-left: .1875rem solid #000; border-right: .1875rem solid #000; }
  :where(html[data-wf-page="644c28e4e553730a69bdca7d"]) .blog-posts .collection-item { border-right: .1875rem solid #000; }
}

/* News articles: "recent posts" grid borders */
:where(html[data-wf-page="644291744bd4c771c1f9c7ac"]) .recent-posts .collection-item:nth-child(2n+2) { border-left: 0; }
@media screen and (max-width: 991px) {
  :where(html[data-wf-page="644291744bd4c771c1f9c7ac"]) .recent-posts .collection-item:nth-child(2n+2) { border-left: .1875rem solid #000; }
}

/* ---- Service pages: visit card beside the FAQ ----
   Tighter button row inside the card, and no sticking when the window is too
   short for the whole card (Webflow has no height breakpoints). */
.svc-visit-card .svc-actions { margin-top: 1.25rem; row-gap: .75rem; }
@media screen and (min-width: 992px) and (max-height: 959px) {
  .svc-faq-grid .svc-visit-card { position: relative; top: auto; }
}

/* ---- Service pages: reviews (Elfsight) block ----
   The shared code-embed class adds 40px top/bottom on top of svc-body's
   padding; drop it here so the gutter matches the other sections. On phones
   give the carousel arrows room inside the frame. */
.svc-body > .code-embed { padding-top: 0; padding-bottom: 0; }
@media screen and (max-width: 767px) {
  .svc-body:has(> .code-embed) { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* ---- Stacking step cards (service pages) ----
   Grid-gap architecture: sticky cards lose pin room
   to their own margins, so spacing = row-gap + ::after. */
.customer-care-section,
.customer-care-section > div,
.customer-care-section .frames-wrapper,
.steps-grid {
  overflow: visible !important;
}
.steps-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 60vh !important;
  width: min(90%, 40rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: 0 !important;
}
.steps-grid .test-box {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: calc(50vh - 160px) !important;
  margin: 0 !important;
}
.steps-grid .test-box:nth-child(1) { z-index: 1; background-color: #3d3d3d !important; }
.steps-grid .test-box:nth-child(2) { z-index: 2; background-color: #4a4a4a !important; }
.steps-grid .test-box:nth-child(3) { z-index: 3; background-color: #575757 !important; }
.steps-grid::after {
  content: "";
  display: block;
  height: 55vh;
}