/* ==========================================================================
   North Penn Podiatry — Design System
   ========================================================================== */

:root {
  /* Color system */
  --color-navy: #0f2a3f;
  --color-navy-soft: #1c3d55;
  --color-blue: #1768ac;
  --color-blue-dark: #0f4c81;
  --color-blue-tint: #eaf2f9;
  --color-bg: #ffffff;
  --color-bg-alt: #f6f9fb;
  --color-border: #e2e8ee;
  --color-text: #26333f;
  --color-text-muted: #5b6b78;
  --color-accent: #2f8f7e;
  --color-accent-tint: #e7f4f1;
  --color-white: #ffffff;

  /* Type */
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing / radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm:
    0 1px 3px rgba(15, 42, 63, 0.06), 0 1px 2px rgba(15, 42, 63, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 42, 63, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 42, 63, 0.12);
  --transition: 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.display-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem);
  line-height: 1.12;
}
h2 {
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  line-height: 1.2;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.3;
}

p {
  color: var(--color-text-muted);
}

a {
  color: var(--color-blue-dark);
  text-decoration: none;
}
a:hover {
  color: var(--color-blue);
}

.text-navy {
  color: var(--color-navy) !important;
}
.text-muted-custom {
  color: var(--color-text-muted) !important;
}
.bg-alt {
  background-color: var(--color-bg-alt);
}
.bg-navy {
  background-color: var(--color-navy);
}
.bg-blue-tint {
  background-color: var(--color-blue-tint);
}

/* Focus visibility — accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  transition:
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow var(--transition),
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: btn-ripple-anim 600ms ease-out;
  pointer-events: none;
}
.btn-outline-navy .btn-ripple,
.btn-outline-light-custom .btn-ripple {
  background: rgba(15, 42, 63, 0.18);
}
@keyframes btn-ripple-anim {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.btn-primary {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-outline-light-custom {
  background-color: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn-outline-light-custom:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn-outline-navy {
  background-color: transparent;
  border: 1.5px solid var(--color-navy);
  color: var(--color-navy);
}
.btn-outline-navy:hover {
  background-color: var(--color-navy);
  color: #fff;
}

.btn-accent {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.btn-accent:hover {
  background-color: #257566;
  border-color: #257566;
  color: #fff;
}

.btn-sm-tap {
  min-height: 40px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow var(--transition);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(15, 42, 63, 0.1);
}
@media (max-width: 767.98px) {
  /* backdrop-filter on a sticky element forces the browser to
     recompute the blur every scroll frame, which is what causes
     scroll to feel choppy on phones. A solid background avoids
     that recompute entirely while looking near-identical. */
  .site-header {
    background-color: #fff;
    backdrop-filter: none;
  }
}

.header-phone-group {
  padding-right: 0.25rem;
}
.header-phone-divider {
  width: 1px;
  height: 18px;
  background-color: var(--color-border);
}

.announcement-bar {
  background-color: var(--color-navy);
  color: #eaf2f9;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.45rem 1rem;
}
.announcement-bar a {
  color: #fff;
  text-decoration: underline;
}

.navbar-brand-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.navbar-brand-wrap img {
  height: 44px;
  width: auto;
}

.nav-link-custom {
  font-weight: 500;
  color: var(--color-text) !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: var(--radius-sm);
  position: relative;
  white-space: nowrap;
  transition:
    color var(--transition),
    background-color var(--transition);
}

/* The 8-item nav row is tight between the lg and xl breakpoints —
   without this, two-word items ("Our Doctors", "New Patients") wrap
   mid-word instead of staying on one line. Reclaim space with tighter
   spacing, and free up more room in the narrower lg-only band by
   hiding the header phone number (still available via the Request
   Appointment button, footer and, below lg, the mobile menu). */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-phone {
    display: none !important;
  }
  #navbarMain .navbar-nav {
    gap: 0;
    font-size: 0.92rem;
  }
  .nav-link-custom {
    padding: 0.5rem 0.4rem !important;
  }
  .navbar-brand-wrap img {
    height: 40px !important;
  }
}
@media (min-width: 1200px) {
  #navbarMain .navbar-nav {
    gap: 0;
    font-size: 0.92rem;
  }
  .nav-link-custom {
    padding: 0.5rem 0.45rem !important;
  }
}
.nav-link-custom::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link-custom:hover,
.nav-link-custom.active {
  color: var(--color-blue-dark) !important;
  background-color: var(--color-blue-tint);
}
.nav-link-custom:hover::after,
.nav-link-custom.active::after {
  transform: scaleX(1);
}

.header-phone {
  font-weight: 600;
  color: var(--color-navy);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.header-phone i {
  color: var(--color-accent);
}

/* Animated hamburger — three bars that morph into an X when the
   mobile menu is open (.is-open toggled from main.js on the
   offcanvas show/hidden events). */
.hamburger-btn {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hamburger-box {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 16px;
}
.hamburger-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-navy);
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease,
    top 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hamburger-line:nth-child(1) {
  top: 0;
}
.hamburger-line:nth-child(2) {
  top: 7px;
}
.hamburger-line:nth-child(3) {
  top: 14px;
}
.hamburger-btn.is-open .hamburger-line:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.hamburger-btn.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.is-open .hamburger-line:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* Mobile menu (offcanvas) — visual polish + entrance animation.
   Selector matches Bootstrap's own .offcanvas.offcanvas-end specificity
   so our width override actually wins the cascade. */
.offcanvas.offcanvas-npp {
  width: min(340px, 86vw);
  box-shadow: -16px 0 48px rgba(15, 42, 63, 0.18);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.offcanvas-npp .offcanvas-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-alt);
}
.offcanvas-npp .offcanvas-title {
  font-family: var(--font-heading);
  color: var(--color-navy);
}
.offcanvas-npp .offcanvas-body {
  padding: 1.5rem;
}
.offcanvas-backdrop.show {
  backdrop-filter: blur(2px);
}

.offcanvas-npp .nav-link-custom {
  display: flex;
  align-items: center;
  font-size: 1.05rem;
  padding: 0.75rem 0.5rem !important;
}
.offcanvas-nav-list .nav-link-icon {
  width: 1.5rem;
  margin-right: 0.65rem;
  display: inline-flex;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--color-accent);
}

/* Staggered fade/slide-in of each menu item as the panel opens.
   Bootstrap adds/removes .show on the offcanvas itself, so this
   plays forward on open and reverses (in sync, no stagger) on close. */
.offcanvas-nav-list .nav-item,
.offcanvas-cta {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity 360ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item,
.offcanvas-npp.show .offcanvas-cta {
  opacity: 1;
  transform: translateX(0);
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(1) {
  transition-delay: 80ms;
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(2) {
  transition-delay: 120ms;
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(3) {
  transition-delay: 160ms;
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(4) {
  transition-delay: 200ms;
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(5) {
  transition-delay: 240ms;
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(6) {
  transition-delay: 280ms;
}
.offcanvas-npp.show .offcanvas-nav-list .nav-item:nth-child(7) {
  transition-delay: 320ms;
}
.offcanvas-npp.show .offcanvas-cta {
  transition-delay: 360ms;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: linear-gradient(180deg, var(--color-blue-tint) 0%, #ffffff 100%);
  padding-top: clamp(2.5rem, 2rem + 3vw, 5rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
  overflow: hidden;
}
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent);
}

/* Full-bleed rotating photo background for the homepage hero */
.hero-photo {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  color: #fff;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
.hero-photo .container {
  z-index: 2;
}
.hero-bg-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-bg-slide.active {
  opacity: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    rgba(15, 42, 63, 0.92) 0%,
    rgba(15, 42, 63, 0.72) 42%,
    rgba(15, 42, 63, 0.38) 75%,
    rgba(15, 42, 63, 0.18) 100%
  );
}
.hero-photo .hero-eyebrow {
  color: #9fd4ee;
}
.hero-photo h1 {
  color: #fff;
}
.hero-photo .fs-5 {
  color: rgba(255, 255, 255, 0.88);
}
.hero-trust-row {
  color: rgba(255, 255, 255, 0.82);
}
.hero-trust-row i {
  color: #9fd4ee;
}
@media (max-width: 767.98px) {
  .hero-photo {
    min-height: 560px;
  }
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(15, 42, 63, 0.55) 0%,
      rgba(15, 42, 63, 0.88) 65%,
      rgba(15, 42, 63, 0.92) 100%
    );
  }
}

/* Entrance animation for the homepage hero — plays once on load, no scroll trigger needed */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero .hero-eyebrow,
.hero h1,
.hero .fs-5,
.hero .d-flex.flex-column.flex-sm-row,
.hero .hero-trust-row {
  animation: hero-fade-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .hero-eyebrow {
  animation-delay: 40ms;
}
.hero h1 {
  animation-delay: 120ms;
}
.hero .fs-5 {
  animation-delay: 200ms;
}
.hero .d-flex.flex-column.flex-sm-row {
  animation-delay: 280ms;
}
.hero .hero-trust-row {
  animation-delay: 340ms;
}

.page-hero {
  background: linear-gradient(180deg, var(--color-blue-tint) 0%, #ffffff 100%);
  padding: 3rem 0 2.5rem;
}
.page-hero h1,
.page-hero .eyebrow,
.page-hero .fs-5,
.page-hero .breadcrumb-npp {
  animation: hero-fade-up 550ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-hero .breadcrumb-npp {
  animation-delay: 0ms;
}
.page-hero .eyebrow {
  animation-delay: 60ms;
}
.page-hero h1 {
  animation-delay: 120ms;
}
.page-hero .fs-5 {
  animation-delay: 190ms;
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* .container only has 12px of side padding, but .g-5's 48px gutter
   gives direct child rows a -24px negative margin — 12px more than the
   container can absorb, which bled past the viewport edge and caused
   horizontal scrolling on mobile on every page using this layout
   (services, blog, doctor bios, locations, new patients). Clipping it
   here is scoped to .container specifically so it can't interfere with
   the sticky header (which lives outside these containers).
   overflow-y is set explicitly (rather than left as its visible default)
   because per the CSS overflow spec, pairing a non-visible overflow-x
   with a visible overflow-y silently promotes overflow-y to auto — that
   turns every .container into its own scroll container. On a long page
   with many sections (the homepage has ~10), that's a lot of extra
   scroll-candidate boxes for mobile browsers to hit-test on every touch
   scroll, which is a known contributor to choppy scrolling. */
.container {
  overflow-x: hidden;
  overflow-y: clip;
}

/* Two-column "article + sidebar" layouts (services, blog, doctor bios,
   locations, contact) must not stretch the shorter sidebar column to
   match the longer content column — Bootstrap's default align-items:
   stretch combined with .card-npp's height:100% otherwise inflates
   stacked sidebar cards to the full row height. */
.row.g-5,
.row.justify-content-center {
  align-items: start;
}

.card-npp {
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    box-shadow 260ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color var(--transition),
    background-color var(--transition);
  height: 100%;
}
.card-npp:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-blue-tint);
  transform: translateY(-5px);
}

/* Services grids (homepage areas-of-care, conditions grid, and the full
   services listing page) get a subtle lighter background tint on hover
   in addition to the shared lift/shadow effect. Uses the blue tint (not
   --color-bg-alt) so the change stays visible even on cards that already
   sit inside a .bg-alt section. */
.condition-card:hover,
.service-tile:hover {
  background-color: var(--color-blue-tint);
}

.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background-color: var(--color-blue-tint);
  color: var(--color-blue-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  transition:
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--transition),
    color var(--transition);
}
.card-npp:hover .icon-badge,
.service-card-link:hover .icon-badge {
  transform: scale(1.1) rotate(-6deg);
  background-color: var(--color-blue-dark);
  color: #fff;
}
.card-npp:hover .condition-card .icon-badge,
.condition-card:hover .icon-badge {
  background-color: var(--color-accent);
  color: #fff;
}

.condition-card .icon-badge {
  background-color: var(--color-accent-tint);
  color: var(--color-accent);
}

.service-card-link {
  color: inherit;
  display: block;
  height: 100%;
}
.service-card-link:hover {
  color: inherit;
}

.doctor-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.doctor-card:hover img {
  transform: scale(1.06);
}

.location-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.location-card:hover img {
  transform: scale(1.06);
}

.blog-thumb-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-thumb-card:hover img {
  transform: scale(1.06);
}

/* ==========================================================================
   Sections
   ========================================================================== */

section {
  padding: clamp(2.5rem, 2rem + 2vw, 4.5rem) 0;
}
.section-header {
  max-width: 680px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-blue-dark);
}

.cta-band {
  background-image:
    linear-gradient(
      120deg,
      rgba(15, 42, 63, 0.72) 0%,
      rgba(15, 42, 63, 0.5) 55%,
      rgba(15, 42, 63, 0.72) 100%
    ),
    url("/assets/img/cta-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border-radius: var(--radius-lg);
}
@supports (
  background-image: image-set(url("/assets/img/cta-bg.webp") type("image/webp"))
) {
  .cta-band {
    background-image:
      linear-gradient(
        120deg,
        rgba(15, 42, 63, 0.72) 0%,
        rgba(15, 42, 63, 0.5) 55%,
        rgba(15, 42, 63, 0.72) 100%
      ),
      image-set(url("/assets/img/cta-bg.webp") type("image/webp") 1x);
  }
}
.cta-band h2 {
  color: #fff;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-navy);
  color: rgba(255, 255, 255, 0.78);
}
body[data-page="404"] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body[data-page="404"] main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}
body[data-page="404"] main > .page-hero {
  width: 100%;
}
body[data-page="404"] .site-footer {
  flex-shrink: 0;
}
.site-footer h5 {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
}
.site-footer a:hover {
  color: #fff;
}
.site-footer hr {
  border-color: rgba(255, 255, 255, 0.15);
}
.footer-bottom {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-social a {
  font-size: 1.1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.22);
}

.site-footer h5 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.site-footer h5 i {
  color: #8fc6e8;
  font-size: 0.9em;
}
.site-footer ul.list-unstyled a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition:
    color var(--transition),
    transform var(--transition);
}
.site-footer ul.list-unstyled a:hover {
  transform: translateX(3px);
}
.site-footer ul.list-unstyled i {
  width: 15px;
  text-align: center;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85em;
}
.site-footer address i {
  color: rgba(255, 255, 255, 0.5);
  margin-right: 0.35rem;
}

.blog-card .blog-date {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label {
  font-weight: 600;
  color: var(--color-navy);
  font-size: 0.92rem;
}
.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border: 1px solid #cdd7e0;
  padding: 0.65rem 0.9rem;
  min-height: 44px;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 0.2rem rgba(23, 104, 172, 0.15);
}
textarea.form-control {
  min-height: 120px;
}

.phi-notice {
  background-color: #fff7e6;
  border: 1px solid #f2d38a;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  color: #6b5314;
}

.form-status[data-state="success"] {
  color: #1c7d4d;
}
.form-status[data-state="error"] {
  color: #b3261e;
}

/* Success panel shown in place of the form fields once a submission
   has actually been delivered — makes success unambiguous instead of
   silently resetting back to an empty, refillable form. */
.form-success {
  text-align: center;
  padding: 2.5rem 1rem;
}
.form-success-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.form-success-icon i {
  font-size: 2.5rem;
  color: #fff;
}
.form-success.is-visible .form-success-icon {
  animation: form-success-pop 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.form-success-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
}
.form-success.is-visible .form-success-icon::before {
  animation: form-success-ring 800ms ease-out 120ms both;
}
.form-success h3 {
  color: var(--color-navy);
}
@keyframes form-success-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes form-success-ring {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb-npp {
  font-size: 0.88rem;
}
.breadcrumb-npp a {
  color: var(--color-text-muted);
}
.breadcrumb-npp .current {
  color: var(--color-navy);
  font-weight: 600;
}

/* ==========================================================================
   Office hours table
   ========================================================================== */

.hours-table td,
.hours-table th {
  padding: 0.5rem 0.75rem;
  border-color: var(--color-border);
}
.hours-table th {
  color: var(--color-navy);
  font-weight: 600;
  width: 40%;
}

/* ==========================================================================
   Utilities / scroll reveal
   ========================================================================== */

/* Gated behind a JS-added class on <html> so content stays visible by
   default for no-JS clients and crawlers, instead of being stuck hidden. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Staggered cascade for card grids — each sibling in a row reveals slightly after the last */
.js-reveal .row > .reveal:nth-child(1) {
  transition-delay: 0ms;
}
.js-reveal .row > .reveal:nth-child(2) {
  transition-delay: 70ms;
}
.js-reveal .row > .reveal:nth-child(3) {
  transition-delay: 140ms;
}
.js-reveal .row > .reveal:nth-child(4) {
  transition-delay: 210ms;
}
.js-reveal .row > .reveal:nth-child(5) {
  transition-delay: 280ms;
}
.js-reveal .row > .reveal:nth-child(6) {
  transition-delay: 350ms;
}
.js-reveal .row > .reveal:nth-child(n + 7) {
  transition-delay: 400ms;
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.map-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

.office-carousel {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.office-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  display: block;
}
.office-carousel .carousel-control-prev,
.office-carousel .carousel-control-next {
  width: 12%;
  opacity: 0;
  transition: opacity var(--transition);
}
.office-carousel:hover .carousel-control-prev,
.office-carousel:hover .carousel-control-next,
.office-carousel:focus-within .carousel-control-prev,
.office-carousel:focus-within .carousel-control-next {
  opacity: 1;
}
.office-carousel .carousel-control-prev-icon,
.office-carousel .carousel-control-next-icon {
  width: 1.75rem;
  height: 1.75rem;
  background-color: rgba(15, 42, 63, 0.55);
  border-radius: 50%;
  padding: 0.4rem;
  background-size: 60%;
}
.office-carousel .carousel-indicators {
  margin-bottom: 0.6rem;
}
.office-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 0;
  opacity: 1;
}
.office-carousel .carousel-indicators .active {
  background-color: #fff;
}

/* Location card photo carousel (locations/index.html) + lightbox modal */
.location-gallery-trigger {
  position: relative;
  cursor: zoom-in;
}
.location-card-carousel .carousel-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.location-gallery-trigger .gallery-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background-color: rgba(15, 42, 63, 0.72);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--transition),
    transform var(--transition);
}
.location-gallery-trigger:hover .gallery-hint,
.location-gallery-trigger:focus-visible .gallery-hint {
  opacity: 1;
  transform: translateY(0);
}

.gallery-modal .modal-content {
  background-color: var(--color-navy);
}
.gallery-modal .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.gallery-modal .modal-title {
  color: #fff;
}
.gallery-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.gallery-modal-carousel .carousel-item img {
  width: 100%;
  max-height: 75vh;
  object-fit: contain;
  background-color: #000;
  display: block;
}
.gallery-modal-carousel .carousel-control-prev,
.gallery-modal-carousel .carousel-control-next {
  width: 10%;
}
.gallery-modal-carousel .carousel-control-prev-icon,
.gallery-modal-carousel .carousel-control-next-icon {
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 0.5rem;
  background-size: 60%;
}
.gallery-modal-carousel .carousel-indicators {
  margin-bottom: 0.6rem;
}
.gallery-modal-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 0;
  opacity: 1;
}
.gallery-modal-carousel .carousel-indicators .active {
  background-color: #fff;
}

/* Google reviews carousel (homepage) — 3 cards on desktop, 2 on
   tablet, 1 on mobile; slides one card at a time. */
.google-rating-badge {
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
}
.google-rating-badge .bi-google {
  color: #4285f4;
}
.google-rating-stars {
  color: #f5b400;
  letter-spacing: 1px;
}

.reviews-carousel {
  position: relative;
  padding: 0 2.75rem;
}
.reviews-viewport {
  overflow: hidden;
}
.reviews-track {
  display: flex;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.review-card {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 0.65rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .review-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .review-card-inner {
    padding: 1rem;
  }
}
@media (min-width: 1200px) {
  .review-card {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
.review-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.75rem;
}
.review-card-stars {
  color: #f5b400;
  font-size: 1.05rem;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
}
.review-card-text {
  color: var(--color-text-muted);
  flex-grow: 1;
}
.review-card-author {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.review-card-name {
  display: block;
  font-weight: 600;
  color: var(--color-navy);
}
.review-card-source {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.review-card-source .bi-google {
  color: #4285f4;
}

.reviews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  z-index: 2;
  transition:
    background-color var(--transition),
    color var(--transition);
}
.reviews-nav:hover {
  background-color: var(--color-navy);
  color: #fff;
}
.reviews-nav-prev {
  left: 0;
}
.reviews-nav-next {
  right: 0;
}
@media (max-width: 420px) {
  .reviews-carousel {
    padding: 0 2.25rem;
  }
  .reviews-nav {
    width: 36px;
    height: 36px;
  }
}

.badge-soft {
  background-color: var(--color-blue-tint);
  color: var(--color-blue-dark);
  font-weight: 600;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  font-size: 0.78rem;
}

.tel-link {
  white-space: nowrap;
}

.sticky-mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(15, 42, 63, 0.1);
  padding: 0.6rem 0.75rem;
  display: none;
}
@media (max-width: 767.98px) {
  .sticky-mobile-cta {
    display: flex;
    gap: 0.5rem;
  }
  body {
    padding-bottom: 66px;
  }
}

/* ==========================================================================
   Scroll progress bar
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-blue));
  z-index: 1050;
  transition: width 100ms linear;
}

/* ==========================================================================
   Back to top button
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color var(--transition);
  z-index: 1035;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  background-color: var(--color-blue);
  transform: translateY(-3px) scale(1.05);
}
@media (max-width: 767.98px) {
  .back-to-top {
    bottom: 82px;
    right: 1rem;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   Lazy image fade-in
   ========================================================================== */

/* Gated behind a JS-added class so images stay visible if JavaScript
   never runs (no-JS clients, some crawlers) instead of being stuck hidden. */
.js-fade img[loading="lazy"] {
  opacity: 0;
  transition: opacity 450ms ease;
}
.js-fade img[loading="lazy"].img-loaded {
  opacity: 1;
}

/* ==========================================================================
   Subtle attention pulse for the primary mobile conversion CTA
   ========================================================================== */

@keyframes cta-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(23, 104, 172, 0.45);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(23, 104, 172, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(23, 104, 172, 0);
  }
}
.sticky-mobile-cta .btn-primary {
  animation: cta-pulse-ring 2.6s ease-out 2;
}

/* ==========================================================================
   Form control polish
   ========================================================================== */

.form-control,
.form-select {
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

@keyframes btn-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn[disabled] {
  position: relative;
  color: transparent !important;
}
.btn[disabled]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: btn-spinner-spin 700ms linear infinite;
}
.btn-outline-navy[disabled]::after,
.btn-outline-light-custom[disabled]::after {
  border-color: rgba(15, 42, 63, 0.25);
  border-top-color: var(--color-navy);
}