/* Newpark Dentistry — home.css
   Loaded by functions.php. See style.css for the full section index.
   Homepage-only styles: hero size/color overrides live in hero.css
   (via the .home-hero class); everything else specific to the
   homepage's unique sections lives here. */

/* =============================================================
   15. HOMEPAGE — WHY US ROW + CAROUSEL
   ============================================================= */

.home-why-us-row > .kt-row-column-wrap {
  align-items: center !important;
}

.why-us-carousel .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.why-us-carousel .kt-inside-inner-col > .wp-block-kadence-rowlayout {
  width: 100% !important;
  min-width: 0 !important;
}

.why-us-carousel .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 24px !important;
  padding-bottom: 4px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
}
.why-us-carousel .kt-inside-inner-col > .wp-block-kadence-rowlayout > .kt-row-column-wrap::-webkit-scrollbar {
  display: none !important;
}

.why-us-card {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: min(240px, 80vw) !important;
  height: auto !important;
  scroll-snap-align: start !important;
  background: var(--np-eucalyptus) !important;
  border-radius: 10px !important;
  box-shadow: var(--np-shadow-soft) !important;
}

.why-us-card .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  height: 100% !important;
  padding: clamp(24px, 2.4vw, 32px) clamp(18px, 2vw, 22px) !important;
}

.why-us-card h3 {
  margin-bottom: 10px !important;
}

.why-us-card p:empty {
  display: none !important;
}

.why-us-card .wp-block-kadence-image {
  margin: 0 auto !important;
  max-width: 64px !important;
}

.why-us-card .wp-block-kadence-image img {
  width: 100% !important;
  height: auto !important;
}

.why-us-carousel .kt-inside-inner-col > .wp-block-kadence-advancedbtn {
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  gap: 20px !important;
}

.why-us-prev,
.why-us-next {
  background: transparent !important;
  border: none !important;
  color: var(--np-forest) !important;
  /* At least 44x44px so the carousel arrows are comfortable to tap
     on a phone or tablet, per WCAG 2.2 SC 2.5.5 Target Size
     (Enhanced) and Apple's Human Interface Guidelines minimum
     tap-target size. The icon itself stays visually compact
     (32px, set below); the extra space is invisible padding, not
     a bigger-looking button. */
  min-height: 44px !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-shadow: none !important;
  transition: color 150ms ease, transform 150ms ease;
}

.why-us-prev:hover,
.why-us-next:hover {
  background: transparent !important;
  color: var(--np-forest-deep) !important;
  transform: scale(1.12);
}

.why-us-prev svg,
.why-us-next svg,
.why-us-prev .kt-svg-icon-wrap svg,
.why-us-next .kt-svg-icon-wrap svg {
  width: 32px !important;
  height: 32px !important;
  fill: currentColor !important;
}

.why-us-dots {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.why-us-dots .why-us-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--np-line-strong) !important;
  cursor: pointer !important;
  transition: background 150ms ease, transform 150ms ease;
}

.why-us-dots .why-us-dot.is-active {
  background: var(--np-forest) !important;
  transform: scale(1.25);
}
.home-hero .home-hero-label {
  display: block;
  margin-bottom: 16px;
  color: var(--np-eucalyptus-strong) !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 1px rgba(232, 239, 235, 0.6),
    0 1px 2px rgba(10, 28, 23, 0.35);
}

.home-hero h1 {
  font-size: clamp(3.25rem, 2.6rem + 2.6vw, 5rem) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
  text-shadow:
    0 0 1.5px rgba(255, 255, 255, 0.5),
    0 1px 3px rgba(10, 28, 23, 0.35);
}

.home-hero h1 .accent {
  font-weight: 800 !important;
  font-style: normal !important;
  color: #8fa050 !important;
  text-shadow:
    0 0 1.5px rgba(143, 160, 80, 0.5),
    0 1px 3px rgba(51, 61, 30, 0.4);
}

.home-hero h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem) !important;
  font-weight: 500 !important;
  opacity: 0.9;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.5),
    0 1px 2px rgba(10, 28, 23, 0.3);
}


/* =============================================================
   16. HOMEPAGE — SERVICES SECTION + CARDS
   ============================================================= */

.explore-group {
  background: var(--np-forest) !important;
  padding-top: clamp(88px, 8vw, 128px) !important;
  padding-bottom: clamp(88px, 8vw, 128px) !important;
}

.home-services h2 {
  color: var(--np-on-dark) !important;
  margin-bottom: 16px !important;
}

.home-services p {
  max-width: 620px !important;
  margin-inline: auto !important;
  margin-bottom: clamp(32px, 3.5vw, 48px) !important;
  color: var(--np-on-dark-muted) !important;
}

.home-services-row {
  max-width: 1180px !important;
  margin-inline: auto !important;
}

.home-services-row > .kt-row-column-wrap {
  gap: clamp(48px, 5vw, 80px) !important;
}

.home-services-row > .kt-row-column-wrap > .wp-block-kadence-column {
  position: relative !important;
  overflow: hidden !important;
  background: var(--np-white) !important;
  border-radius: 0px !important;
  box-shadow:
    0 2px 4px rgba(10, 28, 23, 0.18),
    0 12px 24px rgba(10, 28, 23, 0.22),
    0 28px 48px rgba(10, 28, 23, 0.28) !important;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.home-services-row > .kt-row-column-wrap > .wp-block-kadence-column:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow:
    0 4px 8px rgba(10, 28, 23, 0.22),
    0 20px 36px rgba(10, 28, 23, 0.28),
    0 40px 64px rgba(10, 28, 23, 0.34) !important;
}

.home-services-row .kt-inside-inner-col {
  padding: 0 0 clamp(20px, 2vw, 28px) !important;
}

.home-services-row figure {
  margin: 0 0 18px !important;
  overflow: hidden !important;
}

.home-services-row img {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  transition: transform 300ms ease, filter 300ms ease;
}

.home-services-row > .kt-row-column-wrap > .wp-block-kadence-column:hover img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

.home-services-row h3 {
  padding-inline: clamp(18px, 2vw, 24px) !important;
}

.home-services-row p {
  padding-inline: clamp(18px, 2vw, 24px) !important;
  margin-bottom: 0 !important;
}

/* =============================================================
   17. HOMEPAGE — DR. COLEMAN INTRO
   Height comes from content, not a fixed cap -- padding is
   tightened instead so the section reads as compact without
   clipping the bio text or crushing the photo's crop.
   ============================================================= */

.home-doctor-row > .kt-row-column-wrap {
  width: var(--np-content-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
  background: var(--np-eucalyptus) !important;
  padding: 0 !important;
  gap: 0 !important;
  max-height: 540px !important;
  box-shadow: var(--np-shadow-soft) !important;
}

.home-doctor-row > .kt-row-column-wrap > .wp-block-kadence-column:not(.home-doctor-content) {
  overflow: hidden !important;
}

.home-doctor-row > .kt-row-column-wrap > .wp-block-kadence-column:not(.home-doctor-content) .kt-inside-inner-col,
.home-doctor-row > .kt-row-column-wrap > .wp-block-kadence-column:not(.home-doctor-content) figure {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home-doctor-row > .kt-row-column-wrap > .wp-block-kadence-column:not(.home-doctor-content) img {
  width: 100% !important;
  height: 100% !important;
  min-height: 340px !important;
  max-height: 540px !important;
  object-fit: cover !important;
}

.home-doctor-content,
.home-doctor-content > .kt-inside-inner-col {
  height: 100% !important;
  background: transparent !important;
}

.home-doctor-content > .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(56px, 6vw, 88px) clamp(56px, 6vw, 88px) !important;
}

.home-doctor-content h2 {
  margin-bottom: 12px !important;
  color: var(--np-heading) !important;
}

.home-doctor-content p {
  margin-bottom: 16px !important;
  color: var(--np-body) !important;
}

.home-doctor-content a {
  color: var(--np-white) !important;
}
/* =============================================================
   18. HOMEPAGE — REVIEWS SECTION TINT
   ============================================================= */

.home-reviews-row {
  background: var(--np-stone) !important;
}


/* =============================================================
   19. HOMEPAGE — PATIENT RESOURCES TEASER
   ============================================================= */

.patient-resources-teaser > .kt-row-column-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  /* dvh instead of vh: see hero.css for why. */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-block: clamp(160px, 16vw, 260px) !important;
}

.resources-teaser-content {
  width: min(480px, 90%) !important;
  margin-inline-start: 0 !important;
  margin-inline-end: clamp(24px, 6vw, 90px) !important;
  background: var(--np-white) !important;
  border-radius: 0 !important;
  padding: clamp(32px, 3.4vw, 48px) !important;
  box-shadow:
    0 4px 8px rgba(10, 28, 23, 0.14),
    0 28px 54px rgba(10, 28, 23, 0.24) !important;
}



/* =============================================================
   20. HOMEPAGE — MAP WITH FLOATING OFFICE CARD + CTA
   ============================================================= */

.home-map-card-row {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.home-map-card-row > .kt-row-column-wrap {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.home-office-map {
  position: relative !important;
  width: 100% !important;
  /* dvh instead of vh: see hero.css for why. */
  height: 110vh !important;
  height: 110dvh !important;
  min-height: 760px !important;
  border-radius: 0 !important;
}

.home-office-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 28, 23, 0.22);
  pointer-events: none;
}

.home-office-card {
  position: absolute !important;
  top: clamp(24px, 3vw, 40px) !important;
  right: clamp(90px, 12vw, 180px) !important;
  z-index: 2 !important;
  width: min(500px, calc(100% - 48px)) !important;
  background: var(--np-white) !important;
  border: 20px solid var(--np-eucalyptus) !important;
  outline: 1px solid var(--np-white) !important;
  outline-offset: 0 !important;
  border-radius: 0 !important;
  padding: clamp(32px, 3.4vw, 44px) !important;
  box-shadow:
    0 4px 8px rgba(10, 28, 23, 0.14),
    0 28px 54px rgba(10, 28, 23, 0.3) !important;
}

.home-office-card h2 {
  margin-bottom: 16px !important;
}

.home-office-card h2 strong {
  font-weight: 600 !important;
}

.home-office-card > .kt-inside-inner-col > .wp-block-paragraph,
.home-office-card p.has-text-align-left:first-of-type {
  font-weight: 400 !important;
  color: var(--np-body) !important;
  margin-bottom: 20px !important;
}

.home-office-card .kt-svg-icon-list-text a {
  color: var(--np-heading) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.home-office-card .kt-svg-icon-list-text a:hover {
  text-decoration: underline !important;
}

.home-office-card h4 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.home-office-card h4 strong {
  font-weight: 600 !important;
}

.home-office-card .kadence-column57_786c6b-7a p {
  color: var(--np-body) !important;
  font-weight: 400 !important;
}

.home-office-card .kt-row-column-wrap {
  gap: 8px !important;
}

.home-office-card .wp-block-kadence-advancedbtn {
  margin-top: 24px !important;
}

@media (max-width: 767px) {
  .home-map-card-row > .kt-row-column-wrap {
    display: flex !important;
    flex-direction: column !important;
  }

  .home-office-card {
    position: static !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  .home-office-map {
    height: 60vh !important;
    height: 60dvh !important;
    min-height: 420px !important;
  }
	
}