/* Watauga Family Dentistry — Custom Styles */

/* ── Reveal Animations ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Header States ── */
#site-header {
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#site-header.scrolled {
  background: rgba(254, 253, 251, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 24px rgba(30, 42, 50, 0.06);
}
#site-header.scrolled .header-logo-text { color: #1E2A32; }
#site-header.scrolled .header-logo-sub { color: #6B7B8D; }
#site-header.scrolled .burger-line { background: #1E2A32; }
#site-header.scrolled .nav-link-hero { color: rgba(30,42,50,0.8); }

/* ── Mobile Drawer ── */
#nav-drawer {
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#nav-drawer.open {
  transform: translateX(0);
}
#nav-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Accordion (grid-row technique) ── */
[data-accordion-content] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-accordion-item].open [data-accordion-content] {
  grid-template-rows: 1fr;
}
[data-accordion-content] > div {
  overflow: hidden;
}

/* ── Accordion Icon Rotation ── */
[data-accordion-trigger] svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-accordion-item].open [data-accordion-trigger] svg {
  transform: rotate(45deg);
}

/* ── Buttons ── */
.btn-primary {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 148, 62, 0.3);
}
.btn-secondary {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-secondary:hover {
  transform: translateY(-1px);
}

/* ── Card Lift ── */
.card-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(30, 42, 50, 0.1);
}

/* ── Link Underline Animate ── */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-underline:hover::after {
  width: 100%;
}

/* ── Hero Gradient Animation ── */
@keyframes heroShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.hero-gradient {
  background: linear-gradient(
    135deg,
    #1B6B6D 0%,
    #145254 30%,
    #1E2A32 60%,
    #1B6B6D 100%
  );
  background-size: 300% 300%;
  animation: heroShift 18s ease infinite;
}

/* ── Gold Decorative Line ── */
.gold-line {
  width: 48px;
  height: 3px;
  background: #C8943E;
  border-radius: 2px;
}

/* ── Star Rating ── */
.star { color: #C8943E; }

/* ── Services Dropdown ── */
.nav-dropdown { display: none; }
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  display: block;
}

/* ── Selection Color ── */
::selection {
  background: rgba(27, 107, 109, 0.15);
  color: #1E2A32;
}

/* ── Focus Visible ── */
:focus-visible {
  outline: 2px solid #1B6B6D;
  outline-offset: 2px;
}

/* ── Scroll Smooth ── */
html { scroll-behavior: smooth; }

/* ── Click-to-load Map ── */
.map-placeholder {
  cursor: pointer;
  transition: opacity 0.3s;
}
.map-placeholder:hover { opacity: 0.9; }