/* ==========================================================================
   1. FONTS & CSS VARIABLES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700;900&display=swap');

:root {
  --primary-navy: #0d1f3c;
  --accent-gold: #c9a84c;
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  --text-dark: #2b2b2b;
  --text-muted: #666666;
  --border-color: #e2e8f0;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Montserrat', sans-serif;
  --transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   2. GLOBAL RESETS & BASE STYLES
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--bg-white);
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--primary-navy);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  transition: var(--transition);
}

/* ==========================================================================
   3. TOP BAR & NAVIGATION
   ========================================================================== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 5%;
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-color);
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-text {
  display: flex;
  align-items: center;
}

.header-icon {
  max-height: 50px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-features {
  display: flex;
  gap: 8px;
}

.feature-btn {
  background: var(--bg-light);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.contact-info {
  display: flex;
  gap: 20px;
  font-size: 0.85rem;
  color: var(--text-dark);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-item .icon {
  color: var(--accent-gold);
}

.btn-book {
  background-color: var(--primary-navy);
  color: var(--bg-white);
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.btn-book:hover {
  background-color: var(--accent-gold);
}

/* Navbar */
.navbar {
  background-color: var(--primary-navy);
  padding: 0 5%;
  position: relative;
}

.hamburger {
  display: none;
  background: none;
  flex-direction: column;
  gap: 4px;
  padding: 15px 0;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #fff;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links li {
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 16px 0;
  display: inline-block;
  letter-spacing: 0.08em;
  transition: var(--transition);
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--accent-gold);
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 5%;
  background: linear-gradient(135deg, #f8f9fa 0%, #eef2f7 100%);
  gap: 40px;
}

.hero-left {
  flex: 1;
}

.hero-eyebrow {
  color: var(--accent-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.hero-title {
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero-title span {
  color: var(--accent-gold);
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 30px;
  max-width: 580px;
}

.hero-btns {
  display: flex;
  gap: 15px;
  margin-bottom: 40px;
}

.btn-primary {
  background-color: var(--primary-navy);
  color: var(--bg-white);
  padding: 14px 28px;
  font-weight: 700;
  border-radius: 4px;
}

.btn-primary:hover {
  background-color: var(--accent-gold);
}

.btn-outline {
  border: 2px solid var(--primary-navy);
  color: var(--primary-navy);
  background: transparent;
  padding: 14px 28px;
  font-weight: 700;
  border-radius: 4px;
}

.btn-outline:hover {
  background-color: var(--primary-navy);
  color: var(--bg-white);
}

.hero-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  border-top: 1px solid var(--border-color);
  padding-top: 25px;
}

.hero-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-navy);
}

.badge-icon {
  font-size: 1.2rem;
}

.hero-right {
  flex: 1;
  position: relative;
  text-align: center;
}

.hero-right img {
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  margin: 0 auto;
}

.doctor-tag {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13, 31, 60, 0.9);
  color: #fff;
  padding: 12px 24px;
  border-radius: 4px;
  backdrop-filter: blur(5px);
  width: 80%;
}

.doctor-tag .name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--accent-gold);
}

.doctor-tag .title {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   5. SERVICES SECTION
   ========================================================================== */
.services-section {
  padding: 80px 5%;
  text-align: center;
  background-color: var(--bg-white);
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 40px;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--accent-gold);
  margin: 10px auto 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.service-card {
  border: 1px solid var(--border-color);
  padding: 30px 20px;
  border-radius: 6px;
  background: var(--bg-white);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border-color: var(--accent-gold);
}

.service-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.service-icon svg {
  width: 100%;
  height: 100%;
}

.service-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-navy);
  margin-bottom: 12px;
}

.service-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.btn-view-services {
  background-color: var(--primary-navy);
  color: var(--bg-white);
  padding: 12px 30px;
  font-weight: 700;
  border-radius: 4px;
}

.btn-view-services:hover {
  background-color: var(--accent-gold);
}

/* ==========================================================================
   6. WHY CHOOSE US
   ========================================================================== */
.why-section {
  display: flex;
  align-items: center;
  padding: 80px 5%;
  background-color: var(--bg-light);
  gap: 50px;
  overflow: hidden;
}

.why-img {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  object-fit: cover;
}

.why-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.why-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.why-icon {
  font-size: 1.8rem;
  background: var(--bg-white);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.why-title {
  font-weight: 700;
  color: var(--primary-navy);
  font-size: 1.1rem;
}

.why-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Dark variant — navy background, smaller image, icon-above-text 2x2 grid.
   Only applies where <section class="why-section dark"> is used (currently
   just the homepage); About Us and Contact pages set their own background
   inline and are unaffected. */
.why-section.dark {
  background-color: var(--primary-navy);
  align-items: center;
  overflow: hidden; /* safety net: nothing inside can force page-level horizontal scroll */
}

.why-section.dark .why-img {
  flex: 0 0 20% !important;
  width: 20% !important;
  max-width: 260px;
  min-width: 120px;
  height: 300px;
  object-fit: cover;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* The site-wide dark-mode toggle (body.dark-mode, from the 🌙 button) is a
   separate feature from this section's permanent navy styling above, and
   body.dark-mode's selectors carry higher specificity — so without this,
   toggling dark mode could silently override the image sizing. Locking it
   down explicitly here guarantees identical image size/crop regardless of
   which mode the visitor is in. */
body.dark-mode .why-section.dark .why-img {
  flex: 0 0 20% !important;
  width: 20% !important;
  max-width: 260px;
  min-width: 120px;
  height: 300px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.why-section.dark .why-content {
  flex: 1;
  min-width: 0; /* the actual fix: without this, a flex child won't shrink below
                   its content's natural width, and pushes the whole row past
                   100% — visually blamed on "the image" even though the image
                   is correctly sized */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
}

.why-section.dark .why-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.why-section.dark .why-icon {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--accent-gold);
}

.why-section.dark .why-title {
  color: #ffffff;
}

.why-section.dark .why-desc {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 700px) {
  .why-section.dark .why-content {
    grid-template-columns: 1fr;
  }
  .why-section.dark .why-img {
    flex: 1 1 auto;
    max-height: 260px;
  }
}

/* ==========================================================================
   7. CAROUSEL / GALLERY
   ========================================================================== */
.carousel-container {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding: 40px 0;
  background-color: var(--primary-navy);
}

.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slides img {
  min-width: 33.333%;
  height: 280px;
  object-fit: cover;
  padding: 0 10px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(201, 168, 76, 0.8);
  color: white;
  padding: 12px;
  font-size: 1.2rem;
  border-radius: 50%;
  z-index: 10;
}

.carousel-btn.prev { left: 20px; }
.carousel-btn.next { right: 20px; }

/* ==========================================================================
   8. APPOINTMENT FORM SECTION
   ========================================================================== */
.form-section {
  padding: 80px 5%;
  background-color: var(--bg-white);
}

.form-container {
  max-width: 800px;
  margin: 0 auto;
  background: var(--bg-light);
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.form-container h3 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--primary-navy);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-family: var(--font-body);
}

.btn-submit {
  background-color: var(--primary-navy);
  color: var(--bg-white);
  padding: 14px;
  font-weight: 700;
  border-radius: 4px;
  width: 100%;
}

.btn-submit:hover {
  background-color: var(--accent-gold);
}

/* ==========================================================================
   9. BOTTOM ROW (REVIEWS, INSURANCE, SCHEDULE)
   ========================================================================== */
.bottom-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 60px 5%;
  background-color: var(--bg-light);
}

.reviews-col, .insurance-col, .schedule-col {
  background: var(--bg-white);
  padding: 30px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.reviews-col h3, .insurance-col h3, .schedule-col h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
}

.bigquote {
  font-size: 3rem;
  line-height: 1;
  color: var(--accent-gold);
  font-family: Georgia, serif;
  margin-bottom: 6px;
}

.stars { color: #f4c150; font-size: 1.2rem; margin-bottom: 10px; }
.review-quote { font-style: italic; font-size: 0.9rem; color: var(--text-muted); }
.review-author { font-weight: 700; margin-top: 10px; font-size: 0.85rem; }

.insurance-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.ins-logo {
  border: 1px solid var(--border-color);
  padding: 10px;
  text-align: center;
  border-radius: 4px;
}

.btn-verify, .btn-appt-now, .btn-reviews {
  width: 100%;
  padding: 10px;
  font-weight: 700;
  border-radius: 4px;
  background: var(--primary-navy);
  color: white;
}

/* Schedule column extras — only needed if you bring back the
   appointment-type icons (in-office / telehealth / new patient) */
.schedule-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.appt-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.appt-type {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 16px 8px;
  text-align: center;
}

.appt-icon {
  color: var(--accent-gold);
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.appt-label {
  color: var(--primary-navy);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
footer {
  background-color: var(--primary-navy);
  color: #ffffff;
  padding: 60px 5% 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-brand .brand {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: #ffffff;
}

.footer-brand .sub {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent-gold);
  text-transform: uppercase;
}

.footer-col h4 {
  color: var(--accent-gold);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.footer-links, .contact-list {
  list-style: none;
}

.footer-links li, .contact-list li {
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
}

.footer-bottom-links a {
  margin-left: 15px;
}

/* ==========================================================================
   11. COOKIES BANNER
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(13, 31, 60, 0.95);
  color: white;
  padding: 15px 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  z-index: 9999;
}

#acceptCookies {
  background: var(--accent-gold);
  color: white;
  padding: 8px 18px;
  border-radius: 4px;
  font-weight: 700;
}

/* ==========================================================================
   12. DARK MODE OVERRIDES
   ========================================================================== */
body.dark-mode {
  background-color: #080f1a;
  color: #e0e0e0;
}

body.dark-mode .topbar,
body.dark-mode .service-card,
body.dark-mode .form-container,
body.dark-mode .reviews-col,
body.dark-mode .insurance-col,
body.dark-mode .schedule-col {
  background-color: #0d1f3c;
  color: #ffffff;
  border-color: #1a3050;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .why-title {
  color: #ffffff;
}

body.dark-mode .hero,
body.dark-mode .why-section,
body.dark-mode .bottom-row {
  background: #050a12;
}

/* These elements each set their OWN explicit text color in the base
   stylesheet (navy or muted gray), so they don't automatically inherit
   the white text set on their parent above — CSS inheritance only
   applies when a child has no color declared for itself. Without these,
   each one goes dark-text-on-dark-background and becomes unreadable. */
body.dark-mode .contact-info,
body.dark-mode .hero-desc,
body.dark-mode .schedule-sub,
body.dark-mode .review-quote {
  color: rgba(255, 255, 255, 0.75);
}

body.dark-mode .hero-badge,
body.dark-mode .service-name,
body.dark-mode .form-group label,
body.dark-mode .appt-label {
  color: #ffffff;
}

body.dark-mode .btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
}

body.dark-mode .btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   About Us, Services, Patient Portal, Reviews, and Contact use inline
   style="..." attributes for most of their section backgrounds and text
   colors, rather than shared classes. Inline styles normally override
   external stylesheet rules no matter how specific the selector is —
   but a stylesheet rule with !important still beats a plain inline
   style without one, which is what lets these attribute selectors reach
   in and fix things without editing five separate page files. Each
   selector targets the literal inline pattern actually used, matched as
   a substring of the style attribute.
   --------------------------------------------------------------------- */

body.dark-mode [style*="background-color: var(--bg-white)"],
body.dark-mode [style*="background: var(--bg-white)"] {
  background: #0d1f3c !important;
}

body.dark-mode [style*="background-color: var(--bg-light)"],
body.dark-mode [style*="background: var(--bg-light)"] {
  background: #0a1830 !important;
}

body.dark-mode [style*="background: linear-gradient(135deg, #f8f9fa"] {
  background: #050a12 !important;
}

/* "color:" alone (not preceded by "background-") to avoid also matching
   background-color: var(--primary-navy) sections, which already have
   their own correct white text set regardless of mode. */
body.dark-mode [style^="color: var(--text-muted)"],
body.dark-mode [style*="; color: var(--text-muted)"] {
  color: rgba(255, 255, 255, 0.75) !important;
}

body.dark-mode [style^="color: var(--primary-navy)"],
body.dark-mode [style*="; color: var(--primary-navy)"] {
  color: #ffffff !important;
}

/* ==========================================================================
   13. RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 992px) {
  .hero { flex-direction: column; }
  .bottom-row { grid-template-columns: 1fr; }
  .carousel-slides img { min-width: 50%; }
}

@media (max-width: 768px) {
  .contact-info { display: none; }
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-navy);
    padding: 20px;
  }
  .nav-links.open { display: flex; }
  .hero-title { font-size: 2.2rem; }
  .hero-badges { grid-template-columns: repeat(2, 1fr); }
  .why-section { flex-direction: column; }
  .carousel-slides img { min-width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.full-width { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}