/* ============================================================================
   COMPONENTS — header, nav, buttons, hero, footer, forms
   All values transcribed from the original stylesheet (see _audit/computed/).
   ========================================================================== */

/* ---------------------------------------------------------------- HEADER -- */
.navigation-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

.header-wrapper {
  position: absolute;
  top: -5px;
  z-index: var(--z-header);
  width: 100%;
  max-width: var(--container-max);
  margin: .3rem auto 0;
  padding-block: 20px;
  background-color: var(--primary-color);
  border-radius: var(--radius-header);
}

.header-content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo-link {
  padding-left: 0;
  transform-style: preserve-3d;
  transition: transform .3s, color .3s;
}
.header-logo-link:hover { transform: translate3d(0, -2px, 0); }
.header-logo { max-width: 240px; }

.header-right-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;                 /* matches .header-nav-list-item rhythm; the
                                original left the CTA flush against "Our Office" */
  min-width: 0;
}
.header-cta-desktop { flex: 0 0 auto; white-space: nowrap; }

.header-nav-menu-list {
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style-type: none;
}
.header-nav-list-item { margin-bottom: 0; padding-left: 32px; }

/* At 1440 and above the original tightens the header band from 20px of
   padding-block to 5px — a 30px difference that made the whole bar sit taller
   than the original on every desktop screen. */
@media screen and (min-width: 1440px) {
  .header-wrapper { padding-block: 5px; }
}

/* The original's nav anchors also carry Webflow's `.w-nav-link` base, which
   contributes `display:inline-block; position:relative; vertical-align:top;
   text-align:left` (its 20px padding is overridden by .header-nav-link).
   Without these the links compute as `inline` / `static`, which changes how
   they sit in the bar — the largest single geometry difference in the header,
   on all 55 pages. */
.header-nav-link {
  display: inline-block;
  position: relative;
  vertical-align: top;
  text-align: left;
  padding: 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--fw-semi);
  transition: var(--transition);
}
.header-nav-link:hover,
.header-nav-link[aria-current="page"] { color: var(--button-color); }

/* Services dropdown. The label is an anchor to /services — the original's is
   too, and making it a button meant the nav had no route to that page. */
.nav-dropdown { position: relative; }
.nav-dropdown-head { display: inline-flex; align-items: center; gap: .4rem; }
.nav-dropdown-head .header-nav-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--white);
  line-height: 1;
}
.nav-dropdown-toggle:hover { color: var(--button-color); }
.nav-dropdown-toggle svg { width: .7em; height: .7em; transition: transform .3s; }
.nav-dropdown[data-open="true"] .nav-dropdown-toggle svg { transform: rotate(180deg); }

/* The original opens this on HOVER with zero delay (`data-hover="true"`), not
   on click. `:focus-within` keeps it reachable by keyboard, which Webflow's
   mouse-only version is not. Pointer-fine only, so touch devices fall through
   to the caret button instead of needing a hover that cannot happen. */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .nav-dropdown:hover .nav-dropdown-list,
  .nav-dropdown:focus-within .nav-dropdown-list { display: block; }
  .nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }
}

.nav-dropdown-list {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 260px;
  padding: .5rem 0;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  list-style: none;
  display: none;
}
.nav-dropdown[data-open="true"] .nav-dropdown-list { display: block; }
.nav-dropdown-list a {
  display: block;
  padding: .6rem 1.25rem;
  color: var(--primary-color);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: var(--transition);
}
.nav-dropdown-list a:hover { background: var(--surface-alt); color: var(--button-color); }

/* Hamburger — hidden on desktop, shown at <=991px */
.hamburger-menu-wrapper {
  display: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
/* TWO bars, not three — the original is `.hamburger-menu-bar.top` +
   `.bottom`, both 35px wide and green. This had three unclassed 52px bars. */
.hamburger-menu-bar {
  width: 35px;
  height: 4px;
  margin-block: 12px;
  background-color: var(--button-color);
  border-radius: 20px;
  transition: transform .3s ease;
}
/* Open state, transcribed from IX2 action list `a` (close is `a-2`, the same
   values back to zero): the top bar rotates to 135deg and moves y+8, the
   bottom to 45deg and y-7, over 300ms ease — the two bars crossing into an X.
   The rebuild had no open animation at all; the bars just sat there while the
   panel appeared. Driven off `aria-expanded`, which the toggle already sets,
   so no extra JS and the state stays correct for screen readers. */
[data-nav-toggle][aria-expanded="true"] .hamburger-menu-bar.top {
  transform: translateY(8px) rotate(135deg);
}
[data-nav-toggle][aria-expanded="true"] .hamburger-menu-bar.bottom {
  transform: translateY(-7px) rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .hamburger-menu-bar { transition: none; }
}

/* Mobile nav panel */
.header-nav-menu-wrapper { display: contents; }

@media screen and (max-width: 991px) {
  .header-wrapper { padding-block: 24px; }
  .hamburger-menu-wrapper { display: block; }

  .header-nav-menu-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    width: 100%;
    margin-inline: auto;
    padding: 40px 24px;
    background-color: var(--white);
    border-top: 1px solid #eff0f6;
    border-bottom: 1px solid #eff0f6;
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
  }
  .header-nav-menu-wrapper[data-open="true"] { display: flex; }

  .header-nav-menu-list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }
  .header-nav-list-item { margin-bottom: 12px; padding-left: 0; width: 100%; text-align: center; }
  .header-nav-link { color: var(--primary-color); font-size: 1.2rem; }
  /* On the mobile panel the label and its caret sit centred together; the
     caret stays a real button because there is no hover to open on. */
  .nav-dropdown-head { justify-content: center; width: 100%; }
  .nav-dropdown-toggle { color: var(--primary-color); }
  .nav-dropdown-list { position: static; box-shadow: none; min-width: 0; text-align: center; }
  .hamburger-menu-bar { width: 35px; height: 3px; }
}

@media screen and (max-width: 767px) {
  .header-wrapper { padding-block: 12px; }
  .header-logo { max-width: 163px; }
}

@media screen and (max-width: 479px) {
  .header-wrapper { padding-top: 15px; padding-bottom: 17px; }
  .header-logo { max-width: 170px; }
  .header-nav-link { text-align: center; }
  .header-nav-menu-wrapper { width: 100%; padding-block: 40px; }
}

/* ---------------------------------------------------------------- BUTTONS -- */
.primary-button {
  display: inline-block;
  padding: .75rem 1.5rem;
  background-color: var(--button-color);
  border: 2px solid var(--button-color);
  border-radius: var(--radius-btn);
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.primary-button:hover {
  background-color: transparent;
  color: var(--button-color);
}

.strok-button {
  display: inline-block;
  padding: .75rem 1.5rem;
  background-color: transparent;
  border: 2px solid var(--primary-color);
  border-radius: var(--radius-btn);
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.strok-button:hover { background-color: var(--primary-color); color: var(--white); }

.canadian-dental-button {
  display: inline-block;
  padding: 1rem 1.5rem;
  background-color: var(--white);
  border-radius: var(--radius-btn);
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  transition: var(--transition);
}
.canadian-dental-button:hover { background-color: var(--button-color); }

@media screen and (min-width: 1440px) {
  .primary-button { padding-inline: 1rem; }
}
@media screen and (max-width: 767px) {
  .strok-button { padding: .7rem 1.5rem; font-size: 1rem; }
}
@media screen and (max-width: 479px) {
  .canadian-dental-button { font-size: 1rem; }
}

/* ------------------------------------------------------------------- HERO -- */
.dental-hero {
  position: relative;
  z-index: 9;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: 74vh;
  margin-top: 0;
  /* IMG_8629-Edited-min-scaled.avif on the original; cover, top-anchored. */
  background-image: url("/images/hero-team-fletcher-dental.avif");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Transcribed from the original. The 4rem bottom margin is load-bearing: it is
   the only thing holding the title band clear of the hero's bottom edge, and
   the CDCP section immediately below sits at z-index 10. */
.dental-hero-title-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-inline: auto;
}
.dental-hero-title-wrapper.for-main-hero { margin-bottom: 4rem; position: static; }
/* The blog index is the one hero whose wrapper has no `.for-main-hero`, so it
   gets no 4rem bottom margin, and whose title zeroes the overhang. */
.hero-title.for-blog { margin-top: 0; margin-bottom: 0; }
@media screen and (max-width: 991px) { .hero-title.for-blog { margin-top: 0; } }
.dental-hero-title-wrapper.for-contact-page { position: absolute; bottom: 60px; }

.hero-title {
  width: 100%;
  max-width: 43rem;
  margin-top: 6px;
  margin-bottom: -60px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  background-color: rgba(34, 37, 51, .95);   /* #222533f2 */
  border-radius: var(--radius-card);
  color: var(--white);
  text-align: center;
  font-size: 3rem;
}

/* ORDER MATTERS — 1280 must precede 1920. These two blocks were reversed, and
   because they carry equal specificity the later 78vh won at 1920+, leaving the
   hero 17px short of the original's 80vh while `margin-top: -24px` (stated only
   in the 1920 block) still applied. The original declares them in this order. */
@media screen and (min-width: 1280px) { .dental-hero { height: 78vh; } }
@media screen and (min-width: 1920px) {
  .dental-hero { height: 80vh; margin-top: -24px; background-position: 0 0, 50% 0; }
  .hero-title { margin-inline: auto; }
}
@media screen and (max-width: 991px) {
  .dental-hero { height: 76vh; background-position: 0 0, 50% 0; }
  .dental-hero-title-wrapper.for-main-hero { margin-top: 0; padding-top: 0; }
  .hero-title { margin-top: 0; margin-bottom: 2rem; padding-block: 1rem; font-size: 2.8rem; line-height: 3.8rem; }
}
@media screen and (max-width: 767px) {
  .dental-hero { height: 60vh; padding-top: 42px; }
  .hero-title { font-size: 2.2rem; line-height: 2.8rem; }
}
@media screen and (max-width: 479px) {
  .dental-hero { height: 40vh; margin-top: 50px; padding-top: 0; background-position: 0 0, 50% 0; }
  .hero-title { margin-top: 8px; margin-bottom: -4.6rem; padding: 0; font-size: 1.4rem; line-height: 1.4rem; }
}

/* ----------------------------------------------------------------- FOOTER -- */
.footer {
  width: 100%;
  max-width: var(--footer-max);
  margin-inline: auto;
  padding-block: 2rem;
  background-color: var(--primary-color);
  border-radius: var(--radius-lg);
}

.footer-flex-box {
  display: flex;
  justify-content: space-between;
  padding-block: 2rem;
  border-bottom: 2px solid var(--footer-divider);
}

/* `.footer-wrapper` is deliberately unconstrained — it exists only as a
   structural slot, matching the original. Do not give it padding or a
   max-width; that is what pushed the footer 55px right. */
.footer-wrapper { width: 100%; }

.footer-flex-boxes._01 {
  display: flex;
  flex-flow: column;
  gap: 2rem;
  width: 100%;
  max-width: 26.25rem;
}
/* Must come AFTER the base rule. This override previously sat in the 991px
   block near the top of the file — before the base declaration — so the base
   26.25rem won on source order and the column stayed 420px instead of 560px
   on every page at mobile. Same specificity means later wins. */
@media screen and (max-width: 991px) {
  .footer-flex-boxes._01 { max-width: 35rem; }
}

.footer-inner-flex { display: flex; flex-flow: column; gap: 1.5rem; }

/* Footer newsletter signup, matching the original.
   `width: 100%` on the block AND the input is load-bearing: the form is flex, so
   a 100% basis on the input is what lets it absorb the shrink and keep the whole
   control inside the column. Without it the control sized to its content and ran
   18px past the viewport at 390px on every page. The 12px inline padding is
   Webflow's `.w-input` default, not the 1rem this had. */
.newletter-wrapper { display: flex; justify-content: flex-start; align-items: flex-start; }
.newsletter-form-block { width: 100%; margin-bottom: 0; }
.newsletter-form { display: flex; }
.newsletter-input {
  width: 100%;
  min-height: 56px;
  margin-bottom: 0;
  padding: 8px 12px;
  color: var(--white);
  background-color: transparent;
  border: 2px solid #e7e7e7;
  border-right-style: none;
  border-start-start-radius: .75rem;
  border-end-start-radius: .75rem;
}
.newsletter-input::placeholder { color: var(--white); font-size: 1rem; }
.newsletter-button {
  padding: 1rem 2rem;
  color: #fff;
  background-color: var(--button-color);
  border: 2px solid var(--button-color);
  border-start-end-radius: .75rem;
  border-end-end-radius: .75rem;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: var(--fw-semi);
  cursor: pointer;
  transition: all .4s;
}
.newsletter-button:hover { border-color: var(--white); color: var(--white); background-color: transparent; }
@media screen and (max-width: 767px) {
  .newsletter-button { padding: .7rem 1.5rem; font-size: 1rem; }
}
@media screen and (max-width: 479px) {
  .newsletter-button { font-size: .9rem; }
  .newsletter-input::placeholder { font-size: .9rem; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* The original constrains the ANCHOR (.fotter-brand-wrapper, sic) to 15rem and
   lets the image fill it — giving a 240px logo. Putting the cap on the image
   instead let it render at its intrinsic 345px. */
.footer-brand-wrapper { display: block; width: 100%; max-width: 15rem; }
.footer-logo { width: 100%; }

/* The four footer columns are NOT equal width on the original, and giving them
   all 13rem put every column at the wrong x:
     .quick-pages       13rem (208px)   Services
     .quick-pages._1    10rem (160px)   Quick pages   <- modifier was missing
     .fotter-contact-wrapper 15rem (240px)  Contact   <- was inheriting 13rem
   With space-between, one wrong width shifts everything after it. */
.quick-pages { display: flex; flex-flow: column; gap: 1.5rem; width: 100%; max-width: 13rem; }
.quick-pages._1 { max-width: 10rem; }
.fotter-contact-wrapper {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 15rem;
}
.quick-link-wrapper { display: flex; flex-flow: column; gap: .75rem; }
.quick-link-title {
  color: var(--footer-heading);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  line-height: 28px;
}
.footer-link {
  width: 100%;
  color: var(--white);
  font-size: 1.1rem;
  line-height: 1.75rem;
  transition: var(--transition);
}
.footer-link:hover { color: var(--button-color); }
.footer-text, .footer p { color: var(--white); }
.footer-text { font-size: .9rem; }

.copyright-wrapper { display: flex; justify-content: space-between; padding-block: 1rem; }
.copyright-left { display: flex; flex-flow: row; justify-content: space-between; align-items: center; gap: 1.5rem; width: 84%; }

.footer-social-wrapper { display: flex; justify-content: flex-start; align-items: center; gap: 1rem; }
.social-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .625rem;
  background-color: var(--white);
  border-radius: var(--radius-sm);
  color: #1a0801;
  font-size: 1.375rem;
  line-height: 1.5rem;
  transition: var(--transition);
}
.social-icon-wrapper:hover { background-color: var(--button-color); }
.social-icon-wrapper svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }

@media screen and (max-width: 991px) {
  .footer-flex-box { flex-flow: wrap; gap: 3rem; }
  .copyright-left { flex-flow: wrap; width: 100%; }
  .copyright-wrapper { flex-flow: wrap; gap: 2rem; }
  .quick-pages { max-width: none; }
}
@media screen and (max-width: 479px) { .footer { padding-bottom: 3.3rem; } }

/* ------------------------------------------------------------------ FORMS --
   Transcribed from the original's `.input` / `.text-area` / label rules. The
   rebuild had invented its own smaller scale — 53px-tall inputs against the
   original's 70, 20px labels with 6.4px of gap against 24px and 16px — which
   left the /contact-us form column 733px tall where the original is 908. */
.form-field-label {
  display: block;
  margin-bottom: 16px;
  color: var(--primary-color);
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--fw-bold);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  min-height: 70px;
  margin-bottom: 0;
  padding: 16px 24px;
  background-color: var(--white);
  border: 1px solid #eff0f6;
  border-radius: 8px;
  color: #6e7191;
  font-size: 18px;
  line-height: 20px;
  box-shadow: 0 2px 7px #14142b14;
  transition: box-shadow .3s, color .3s, border-color .3s;
}
.form-input::placeholder, .form-textarea::placeholder { color: #6e7191; font-size: 18px; }
.form-input:hover, .form-select:hover, .form-textarea:hover {
  border-color: var(--button-color);
  box-shadow: 0 2px 12px #14142b1a;
}
.form-textarea {
  min-height: 144px;
  border-radius: 22px;
  line-height: 28px;
  margin-bottom: 10px;
  resize: vertical;
}
.form-input:focus, .form-select:focus { border-color: var(--button-color); color: #211f54; }
.form-textarea:focus { border-color: var(--button-color); }
.form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: #ea384c; }

@media screen and (max-width: 767px) {
  .form-input, .form-select { min-height: 60px; padding-block: 16px; }
  .form-textarea { border-radius: 18px; }
}
@media screen and (max-width: 479px) {
  .form-input, .form-select, .form-textarea { font-size: 16px; line-height: 18px; }
  .form-input::placeholder, .form-textarea::placeholder { font-size: 16px; line-height: 16px; }
}

.form-error { margin-top: .3rem; color: #ea384c; font-size: .85rem; }
.form-error:empty { display: none; }

.w-form-done, .w-form-fail { padding: 1rem 1.25rem; border-radius: var(--radius-btn); }
.w-form-done { background: #eff8e6; color: #2c4a00; }
.w-form-fail { background: #ffdede; color: #8a1020; }
[hidden] { display: none !important; }

/* Honeypot — must never be visible or focusable */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}