/* Design-conformance fixes layered over styles.css, from the Figma audit.
   Each addresses a gap present on BOTH the static _HTML and our build (shared
   stylesheet) — i.e. the original coder's CSS, not our translation.
   Colours/positions pending a visual eyeball against Figma. */

/* CTAs go BLUE on hover (design), not black. All "Discover" buttons. */
.btn-discover:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.home-treat-card:hover .btn-discover-sm,
.treatment-card:hover .btn-discover-sm {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Why-choose tiles fill blue on hover. */
.why-item {
  transition: background 0.2s ease, color 0.2s ease;
}
.why-item:hover {
  background: var(--blue);
}
.why-item:hover .why-label,
.why-item:hover .why-label strong {
  color: var(--white);
}
.why-item:hover .why-icon {
  filter: brightness(0) invert(1);
}

/* Cost image: blend its inner (text-side) edge instead of a hard crop. */
.home-cost-image img {
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}

/* Treatment cards (Figma prototype): content (eyebrow/heading/CTA) stays
   visible; on hover the image blurs and a subtext reveals — the text block
   slides UP while the CTA stays anchored at the bottom. */
.home-treat-body {
  justify-content: flex-end; /* anchor stack to bottom so the reveal pushes text up */
}
.home-treat-img img {
  transition: filter 0.4s ease, transform 0.4s ease;
}
.home-treat-card:hover .home-treat-img img {
  filter: blur(8px) grayscale(1);
}
/* Strengthen the heading so it reads solid black over the image (design),
   and tighten its bottom margin to leave room for the revealed subtext. */
.home-treat-body h3 {
  margin-bottom: 16px;
}
.home-treat-sub {
  max-width: 320px;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 145%;
  color: var(--text);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  flex-shrink: 0; /* don't let flex squeeze it — was clipping to ~2 lines */
  transition: max-height 0.45s ease, opacity 0.3s ease, margin 0.45s ease;
}
.home-treat-card:hover .home-treat-sub {
  max-height: 320px;
  opacity: 1;
  margin: 12px 0 20px;
}

/* Only move Dr William Luong's name pill UP so it sits above his head
   (everything else in the ortho section stays as-is). */
#pill-william {
  top: 21%;
}
@media (max-width: 1440px) {
  #pill-william {
    top: 2%;
  }
}
@media (max-width: 767px) {
  #pill-william {
    top: 72%;
  }
}

/* Footer TIO logo: render the brand image at its natural ratio. The footer
   column is a stretch-flex, which was forcing the img to full container width
   (~543px) and distorting it — align-self:flex-start + fixed height fixes it. */
img.footer-tio {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  align-self: flex-start;
  object-fit: contain;
  display: block;
}

/* Carousel arrows: blue on hover to match the CTAs (was solid black, which hid
   the black arrow glyph). The arrow SVG stroke is hardcoded, so recolour it white. */
.carousel-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
}
.carousel-btn:hover svg path {
  stroke: var(--white);
}

/* Meet-the-Orthodontists pill alignment. The image box was a responsive 60%
   width but a FIXED height (91.142% of 937px), so object-fit:contain letterboxed
   the photo and the name pills (positioned to the box) floated above the doctors.
   Anchor the box to the BOTTOM at the photo's true aspect so the box == the
   rendered photo and the pills land on the doctors. */
.ortho-hero-image {
  top: auto;
  bottom: 0;
  height: auto;
  aspect-ratio: 1128 / 854;
}

/* Section spacing — trim the over-large gaps flagged in review (the coder used
   a blanket 160px between sections; design is tighter in places). */
/* Treatments → Meet the Orthodontists: also pull up the empty top the
   bottom-anchored image left behind. */

/* .ortho-hero-inner { min-height: 940px; } */
/* .ortho-hero-text { padding-bottom: 120px; } */
/* The Difference → "Ready to show off your best smile" CTA banner. */
/* .cta-banner { margin-top: 88px; }  */

/* Treatments hub carousel: right-align the arrows (no left CTA in the footer). */
.treatments-carousel .carousel-footer { justify-content: flex-end; }

/* Treatments carousel: snap card-to-card on swipe so the touch/trackpad swipe
   feels like a proper carousel (the container already has overflow-x:auto +
   touch scrolling; this adds the snap). Works alongside the arrow buttons. */
.treatments-cards {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.treatments-cards .treatment-card {
  scroll-snap-align: start;
}

/* Treatment pages alternate SBS sections: odd ones become a blue-tinge rounded
   panel with the image on the right (TreatmentPage adds .sbs--tint), per the
   inset design's white/.sbs ↔ tinted alternation. */
.sbs.sbs--tint {
  background: rgba(140, 180, 232, 0.12);
  border-radius: var(--radius);
  padding: 56px;
}
.sbs.sbs--tint .sbs-inner { flex-direction: row-reverse; }

/* Per-section CTA button inside an SBS (hub pages that split each option into
   its own SBS and link out). .sbs-content is a stretch flex column, so the
   button needs align-self to size to its content rather than full width. */
.sbs-content .sbs-cta { align-self: flex-start; margin-top: 8px; }

/* Budget calculator: .bc-option-cta is styled as a borderless uppercase text
   link, but its rule never reset the native <button> border/background, so it
   rendered with default browser button chrome. Reset to the intended look. */
.bc-option-cta {
  border: none;
  background: none;
  padding: 0;
}

/* Problems-we-can-solve page: show every problem at once as a wrapped grid,
   rather than the homepage's horizontal scroll carousel. */
.problems.problems--grid .problems-cards {
  flex-wrap: wrap;
  overflow-x: visible;
}
.problems.problems--grid .problem-card {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
}
@media (max-width: 900px) {
  .problems.problems--grid .problem-card { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
  .problems.problems--grid .problem-card { flex-basis: 100%; max-width: 100%; }
}

/* Inline links woven into body copy (SBS paragraphs, FAQ answers, benefits)
   must READ as links — the design never styled in-copy <a>, so they inherited
   plain body text. Brand --blue (#8CB4E8) is too light for legible link text on
   white, so use a deeper blue + underline; deepen further on hover.
   IMPORTANT: scope to `p a` only — body links always live inside a <p>, whereas
   the section CTA buttons (.btn-discover, .sbs-cta, .btn-outline-blue) are direct
   children of .sbs-content. Scoping to paragraphs keeps those buttons untouched
   (otherwise the blue+underline clobbers the design's bordered button). */
.sbs-content p a,
.faq-answer p a,
.benefit-item p a {
  color: #2F6FBF;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.sbs-content p a:hover,
.faq-answer p a:hover,
.benefit-item p a:hover {
  color: var(--black);
}

/* Team bio "read more" as a proper centred popup. The design ships it as a
   full-page takeover (fixed inset:0 gray page, 1640px inner). Turn it into a
   dimmed backdrop with a centred white card, and enlarge the close X. */
.team-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 25, 33, 0.6);
}
.team-modal-inner {
  width: 100%;
  max-width: 1320px;
  min-height: 0;
  max-height: 88vh;
  overflow-y: auto;
  margin: 0;
  padding: 48px;
  background: #fff;
  border-radius: 12px;
  /* box-shadow: 0 24px 60px rgba(17, 25, 33, 0.28); */
      background: linear-gradient(157deg, rgba(244, 245, 245, 1.3) 23%, rgba(209, 211, 212, 1.3) 100%);
}
/* .team-modal-grid {
  grid-template-columns: 240px 1fr;
  gap: 40px;
  margin-top: 8px;
} */

/* Bigger, clearer close button */
.team-modal-close {
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  font-size: 40px;
  line-height: 1;
  color: var(--black);
  border-radius: 50%;
  transition: background 0.2s;
}
.team-modal-close:hover { background: rgba(17, 25, 33, 0.08); }
@media (max-width: 640px) {
  .team-modal-inner { padding: 40px 22px; }
  .team-modal-grid { grid-template-columns: 1fr; gap: 24px; }
  /* .team-modal-image { max-width: 220px; } */
}

/* Contact section — form on the LEFT, practice image on the RIGHT. This section
   exists in the Figma inset design but was never built into the HTML, so it has
   no styles; reproduce it here using the site's .site-form field styling. */
.contact-form-section {
  width: var(--content-width);
  max-width: calc(100% - 40px);
  margin: 160px auto 0;
}
.contact-form-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.contact-form-copy h2 {
  font-weight: 300;
  font-size: 40px;
  line-height: 120%;
  color: var(--black);
  margin-bottom: 16px;
}
.contact-form-copy > p {
  font-weight: 300;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 32px;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .contact-input {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #d9dde1;
  border-radius: 2px;
  background: #fff;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  color: var(--black);
}
.contact-form .contact-input::placeholder { color: #8b95a1; }
.contact-form .contact-input:focus { outline: none; border-color: var(--blue); }
.contact-form .contact-form-btn { align-self: flex-start; margin-top: 8px; }
.contact-form-image {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: #e9ebee;
}
.contact-form-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1024px) {
  .contact-form-section { margin-top: 96px; }
  .contact-form-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Header "Book A Free Consultation" CTA → location picker on hover/focus
   (CSS-only; button still links to /free-consultation as a fallback). Menu
   touches the button (no gap) so hover stays continuous. */
.book-cta { position: relative; display: inline-flex; }
.book-cta-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100%;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(17, 25, 33, 0.14);
  display: none;
  z-index: 200;
}
.book-cta:hover .book-cta-menu,
.book-cta:focus-within .book-cta-menu { display: block; }
.book-cta-menu li a {
  display: block;
  padding: 10px 16px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
}
.book-cta-menu li a:hover { background: rgba(140, 180, 232, 0.16); }

/* Booking page (free-consultation/<location>) — seamless 50/50 split like the
   homepage costs section, but with the full-bleed image on the RIGHT. */
.booking-split { margin: 0px 0 0; }
.booking-split-inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr; /* image column wider so the subject fits at all widths */
  align-items: stretch;
  min-height: 640px;
}
/* Content left, aligned to the site content-width grid; image bleeds to the
   right viewport edge (no box, white background — the photo's near-white bg
   blends seamlessly). */
.booking-split-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 72px 64px max(20px, calc((100vw - var(--content-width)) / 2));
}
.booking-split-content h1 { font-weight: 300; font-size: 40px; line-height: 120%; color: var(--black); margin-bottom: 16px; }
.booking-split-content > p { font-weight: 300; font-size: 16px; line-height: 150%; letter-spacing: -0.01em; color: var(--text); margin-bottom: 28px; }
/* Full-height cover image bleeding to the right edge (as the design). The wider
   image column above keeps the subject in frame across viewports; the photo's
   light bg blends into the white section. */
.booking-split-image { align-self: stretch; }
.booking-split-image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: right center; display: block; }
@media (max-width: 900px) {
  .booking-split-inner { grid-template-columns: 1fr; }
  .booking-split-image { order: -1; }
  .booking-split-image img {
    min-height: 400px;
  }
  .booking-split-content { padding: 44px 20px; }

}

/* Embedded Edge (ortho2) booking widget — the main call to action. */
.booking-embed { width: 100%; }
.booking-embed iframe {
  width: 100%;
  height: 680px;
  border: 1px solid #dfe3e8;
  border-radius: 2px;
  background: #fff;
  display: block;
}
.booking-embed-fallback { margin-top: 12px; font-size: 13px; color: #5b6672; }
.booking-embed-fallback a { color: #2f6fbf; text-decoration: underline; }

/* "What happens at your appointment?" reuses the homepage Why-Choose icon grid
   (.why-choose / .why-choose-grid / .why-item …). Just the CTA spacing below it
   and the booking image crop are page-specific. */
.appt-cta { display: inline-flex; margin-top: 56px; }

/* LANGUAGE utility → hover/focus dropdown to /es and /ja (like .book-cta). */
.lang-cta { position: relative; display: inline-flex; }
.lang-cta-toggle { border: none; background: none; cursor: pointer; }
.lang-cta-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(17, 25, 33, 0.14);
  display: none;
  z-index: 300;
}
.lang-cta:hover .lang-cta-menu,
.lang-cta:focus-within .lang-cta-menu { display: block; }
.lang-cta-menu li a,
.lang-cta-menu li button {
  display: block;
  padding: 9px 14px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}
.lang-cta-menu li a:hover,
.lang-cta-menu li button:hover { background: rgba(140, 180, 232, 0.16); }

/* Language landing pages: row of treatment/monitoring links under the SBS. */
.lang-links { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* Legal / policy pages (privacy, terms, cookies) — readable single-column prose. */
.legal { width: var(--content-width); max-width: calc(100% - 40px); margin: 80px auto 0; }
/* .legal-inner { max-width: 860px; } */
.legal-inner h2 { font-weight: 400; font-size: 24px; line-height: 130%; color: var(--black); margin: 44px 0 14px; }
.legal-intro + .legal-block h2, .legal-block:first-child h2 { margin-top: 0; }
.legal-inner p { font-weight: 300; font-size: 16px; line-height: 165%; letter-spacing: -0.01em; color: var(--text); margin-bottom: 16px; }
.legal-inner ul { margin: 0 0 16px; padding-left: 22px; }
.legal-inner li { font-weight: 300; font-size: 16px; line-height: 160%; color: var(--text); margin-bottom: 6px; }
.legal-inner a { color: #2f6fbf; text-decoration: underline; }
.legal-updated { font-size: 14px; opacity: 0.85; }

/* Referral form: the design ships only .custom-radio, so add a matching square
   checkbox (tick) for the reason-for-referral options, plus a multi-column grid
   to lay them out. */
.site-form .custom-checkbox .custom-control-label::before { border-radius: 3px; }
.site-form .custom-checkbox .custom-control-label::after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-radius: 0;
  background: transparent;
  border: solid var(--sf-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
}
.site-form .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { transform: rotate(45deg) scale(1); }
.site-form-checkgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  margin-top: 4px;
}
@media (max-width: 768px) { .site-form-checkgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .site-form-checkgrid { grid-template-columns: 1fr; } }

/* Cookie consent banner (CookieConsent.tsx) — fixed bottom bar, readable, responsive. */
.cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 20px 24px;
  background: #111921; color: #fff; box-shadow: 0 -2px 20px rgba(0,0,0,0.18);
}
.cookie-consent-text { font-size: 14px; line-height: 1.5; max-width: 72ch; margin: 0; }
.cookie-consent-text a { color: #8CB4E8; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie-btn { padding: 12px 28px; font-size: 14px; font-weight: 600; border-radius: 2px; cursor: pointer; border: 1px solid #fff; transition: background 0.2s, color 0.2s; }
.cookie-btn-decline { background: transparent; color: #fff; }
.cookie-btn-decline:hover { background: rgba(255,255,255,0.12); }
.cookie-btn-accept { background: #fff; color: #111921; }
.cookie-btn-accept:hover { background: #8CB4E8; border-color: #8CB4E8; }
@media (max-width: 640px) {
  .cookie-consent { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
  .cookie-consent-actions { justify-content: flex-end; }
}

/* Homepage CTA is INDEPENDENT of the inner-page split. The inner pages use the
   text-left-panel + image-right split; the HOMEPAGE keeps its original full-bleed
   banner (home-cta.jpg is composed light-left/subject-right, with dark text
   overlaid on the left) per the Figma. Restore that for .cta-banner--home only. */
.cta-banner--home {
  aspect-ratio: 1880 / 880;
  min-height: 0;
  background: transparent;
}
.cta-banner--home .cta-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.cta-banner--home .cta-banner-content {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 406px;
  margin-left: var(--side-margin);
  padding: 0;
}

@media (max-width: 640px) {
  .cta-banner--home {
    min-height: 700px;
    padding-top: 40px;
  }
}

.contact-form .contact-input.input-error { border-color: #c0392b; }
.contact-form .contact-input.input-error:focus { border-color: #c0392b; }

.lang-cta-arrow { margin-left: 4px; transition: transform 0.2s; }
.lang-cta:hover .lang-cta-arrow,
.lang-cta:focus-within .lang-cta-arrow { transform: rotate(180deg); }

/* Google Translate — hide default toolbar */
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }
.goog-te-menu-value:hover { text-decoration: none !important; }
body { top: 0 !important; }
.skiptranslate { display: none !important; }

/* lang-menu-btn — match anchor styles in dropdown */
.lang-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}