/* ============================================
   NHA KHOA HOANG
   BRAND THEME — BLUE & GOLD
   ============================================ */

:root {
  --primary: #164B92;
  --primary-dark: #0B2F63;
  --accent: #D6A520;
  --accent-light: #FFF7DD;
  --accent-hover: #E5B52F;

  --brand-blue: #164B92;
  --brand-navy: #0B2F63;
  --brand-gold: #F4C542;
  --brand-gold-dark: #B88913;
  --brand-gold-light: #FFF7DD;

  --text: #334155;
  --muted: #64748b;
  --border: #e2e8f0;
  --surface: #f8fafc;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav-link:hover,
.nav-trigger:hover,
.nav-dropdown.is-open .nav-trigger {
  color: var(--brand-blue);
  background: var(--brand-gold-light);
}

.nav-panel {
  border-top: 3px solid var(--brand-gold);
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: var(--brand-gold-light);
  color: var(--brand-navy);
}

/* JS controls dropdown display.
   No CSS hover/focus rule should force it open. */

.nav-dropdown:hover .nav-panel,
.nav-dropdown:focus-within .nav-panel {
  display: none;
}

.nav-dropdown.is-open .nav-panel,
.nav-dropdown.is-open:hover .nav-panel,
.nav-dropdown.is-open:focus-within .nav-panel {
  display: block;
}

.nav-dropdown.is-navigating .nav-panel,
.nav-dropdown.is-navigating:hover .nav-panel,
.nav-dropdown.is-navigating:focus-within .nav-panel {
  display: none !important;
}

.nav-trigger:focus-visible,
.nav-link:focus-visible,
.nav-panel a:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ============================================
   SHARED TYPOGRAPHY
   ============================================ */

.eyebrow {
  color: var(--brand-gold-dark);
}

.content-heading h2,
.info-card h3,
.service-card h3,
.pricing-card h3,
.branch-card h3,
.detail-panel h2,
.page-banner h1 {
  color: var(--brand-navy);
}

.page-banner h1 {
  color: #fff;
}

.content-section:nth-child(even) {
  background: #F5F8FD;
}

/* ============================================
   LINKS AND BUTTONS
   ============================================ */

.site-cta,
.sd-primary,
.pricing-help a,
.branch-actions a {
  background: var(--brand-blue);
  color: #fff;
}

.site-cta:hover,
.sd-primary:hover,
.pricing-help a:hover,
.branch-actions a:hover {
  background: var(--brand-navy);
}

.info-card a,
.service-card a,
.pricing-card a {
  color: var(--brand-blue);
}

.info-card a:hover,
.service-card a:hover,
.pricing-card a:hover {
  color: var(--brand-gold-dark);
}

/* ============================================
   SERVICE CARDS
   ============================================ */

.service-icon {
  color: var(--brand-blue);
  background: var(--brand-gold-light);
}

.service-card:hover,
.info-card:hover {
  border-color: #F5D778;
}

/* ============================================
   SERVICE DETAILS
   ============================================ */

.sd-hero {
  background: linear-gradient(
    125deg,
    #EDF4FD,
    #FFF7DD
  );
}

.sd-tag {
  background: var(--brand-gold-light);
  color: var(--brand-navy);
}

.sd-hero h2,
.sd-heading h2,
.sd-feature h3,
.sd-step h3,
.sd-faq summary {
  color: var(--brand-navy);
}

.sd-outline {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.sd-outline:hover {
  background: var(--brand-blue);
  color: #fff;
}

.sd-visual {
  background: linear-gradient(
    135deg,
    var(--brand-navy),
    var(--brand-blue)
  );
}

.sd-heading > span {
  color: var(--brand-gold-dark);
}

.sd-feature > i,
.sd-check-item > i {
  color: var(--brand-blue);
}

.sd-step-number {
  background: var(--brand-gold-light);
  color: var(--brand-navy);
}

.sd-faq details[open] {
  border-color: #F0D17B;
}

.sd-bottom-cta {
  background: linear-gradient(
    125deg,
    var(--brand-navy),
    var(--brand-blue)
  );
}

.sd-bottom-cta > span,
.sd-bottom-cta span {
  color: var(--brand-gold);
}

.sd-bottom-cta > a {
  background: var(--brand-gold);
  color: var(--brand-navy);
}

.sd-bottom-cta > a:hover {
  background: var(--accent-hover);
}

/* ============================================
   PRICING
   ============================================ */

.price-note {
  border-color: #F5D778;
  background: var(--brand-gold-light);
  color: var(--brand-navy);
}

.pricing-card h3 {
  border-bottom-color: var(--brand-gold);
}

.price-row strong {
  color: var(--brand-blue);
}

.pricing-search input:focus,
.pricing-toolbar select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px #164B9220;
}

.pricing-table-header {
  background: var(--brand-gold-light);
  border-bottom-color: #F5D778;
}

.pricing-table-header span {
  color: var(--brand-blue);
}

.pricing-data-table .pricing-amount {
  color: var(--brand-blue);
}

.pricing-data-table td a {
  color: var(--brand-blue);
}

.pricing-help {
  background: #EDF4FD;
}

.pricing-help h3 {
  color: var(--brand-navy);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background: linear-gradient(
    115deg,
    var(--brand-navy),
    var(--brand-blue)
  );
}

.footer-grid a:hover,
.footer-grid button:hover {
  color: var(--brand-gold);
}

/* ============================================
   INPUTS AND FORMS
   ============================================ */

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 1px;
}

#public-booking-form button[type="submit"] {
  background: var(--brand-gold);
  color: var(--brand-navy);
  transition: background .2s ease;
}

#public-booking-form button[type="submit"]:hover {
  background: var(--accent-hover);
}

#public-booking-form button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ============================================
   MOBILE
   ============================================ */

.mobile-navigation summary:hover,
.mobile-navigation > a:hover,
.mobile-navigation details a:hover {
  color: var(--brand-blue);
  background: var(--brand-gold-light);
}

@media (max-width: 640px) {
  .site-cta {
    justify-content: center;
  }

  .sd-actions {
    flex-direction: column;
  }

  .sd-primary,
  .sd-outline {
    width: 100%;
  }
}