/* =========================================================
   Dag Nergaard Akupunktør – Design System
   ========================================================= */

/* --- Design Tokens --- */
:root {
  --primary:        #4A90B8;
  --primary-light:  #E8F4FD;
  --accent:         #5BA38A;
  --text-dark:      #2C3E50;
  --text-muted:     #6C757D;
  --bg-white:       #FFFFFF;
  --shadow-soft:    0 4px 20px rgba(0, 0, 0, 0.08);
  --radius:         12px;
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg-white);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

.gap-2 {
  /* gap: 2rem !important; */
  column-gap: 2rem !important;
  gap:0rem !important;
}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: calc(var(--bs-gutter-x) * 0);
    padding-left: calc(var(--bs-gutter-x) * 0);
}



/* --- Navbar --- */
.navbar {
  background-color: var(--bg-white);
  box-shadow: var(--shadow-soft);
  padding: 12px 0px 12px 0px;
  /* padding: 0.75rem 0; */
}

.navbar-brand {
  padding: 0;
  margin-top: -5px;
  margin-bottom: -5px;
}

.navbar-brand img {
  height: 60px;
}

.navbar button {
  padding: 10px 36px;
}

.nav-link {
  color: #555 !important;
  font-weight: 600;
  padding: 0.5rem 1rem !important;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary) !important;
  background-color: var(--primary-light);
}

.btn-nav-bestill {
  font-size: 10px !important;
  padding: 10px 24px !important;
}

/* --- Page Content --- */
.page-content {
  min-height: calc(100vh - 140px);
  padding-top: 76px;
}

/* --- Sections --- */
.section-padding {
  padding: 80px 0;
}

.section-alt {
  background-color: var(--primary-light);
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--text-muted);
}

/* --- Hero --- */
.hero-section {
  background: linear-gradient(135deg, #E8F4FD 0%, #F0F8F0 100%);
  padding: 80px 0;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
  text-align: center;
}

.hero-location {
  text-align: center;
  font-size: 1.15rem;
  color: var(--text-muted, #6c757d);
  margin-bottom: 1.5rem;
}

/* Helper to constrain hero block and center it */
.hero-section .hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* limit hero column widths */
.hero-text-col {
  max-width: 350px; /* keeps text column narrower */
}
.hero-image-col {
  max-width: 500px; /* image column controls image container width */
  flex: 0 0 500px; /* ensure column has a width instead of collapsing */
}


.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 2rem;
}

/* --- Buttons --- */
.btn-primary-custom {
  background-color: var(--primary);
  border: none;
  color: #fff;
  padding: 14px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(74, 144, 184, 0.4);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(74, 144, 184, 0.5);
  color: #fff;
}

.btn-booking {
  background-color: var(--primary);
  color: #fff;
  border: none;
  padding: 18px 48px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 1.3rem;
  transition: all 0.3s;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.btn-booking:hover {
  background-color: #3a7aa8;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(74, 144, 184, 0.4);
}

/* --- Feature Cards --- */
.feature-card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
  border: 1px solid #F0F0F0;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.feature-card .icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.feature-card .icon-wrap i {
  font-size: 1.8rem;
  color: var(--primary);
}

/* --- Staff Cards --- */
.staff-card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s;
  border: 1px solid #F0F0F0;
  overflow: hidden;
  padding: 0;
}

.staff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.staff-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.staff-card .card-body {
  padding: 1.5rem;
}

/* --- Pricing Cards --- */
.price-card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  text-align: left;
  transition: all 0.3s;
  border: 1px solid #F0F0F0;
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.price-card .price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
}

.price-card .duration {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- Contact Section --- */
.contact-icon {
  color: var(--primary);
  font-size: 1.5rem;
}

/* --- Google Maps --- */
.map-iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* --- Footer --- */
#footer-container {
  background-color: #2C3E50;
  color: #ecf0f1;
  padding: 40px 0 10px;
}

#footer-container a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s;
}

#footer-container a:hover {
  color: #fff;
}

.footer-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 30px 0;
}

.center {
  text-align: center;
}

.padding-none {
  padding: 0;
}

.margin-none {
  margin: 0;
}

.margin-small {
  margin: 3px;
}

h6 {
  font-size: 1.1rem;
  font-weight: 800;
}

/* --- Carousel --- */
.carousel .carousel-item {
  overflow: hidden;
}

.carousel .carousel-item img {
  height: 450px;
  width: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* 3x2 Grid Image Clipping using Background */
.carousel-grid-bg {
  height: 450px;
  width: 100%;
  background-size: 310% 202%;
  background-repeat: no-repeat;
  background-color: var(--bg-white);
  border-radius: 0;
}

.bg-clip-1 { background-position: 0% 0%; }
.bg-clip-2 { background-position: calc(50% - 2px) 0%; }
.bg-clip-3 { background-position: calc(100%) 0%; }
.bg-clip-4 { background-position: 0% 100%; }
.bg-clip-5 { background-position: calc(50% - 2px) 100%; }
.bg-clip-6 { background-position: calc(100%) 100%; }

/* Softer hero carousel card look */
#heroCarousel {
  /* box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08) !important; */
  box-shadow: 0px 0px 44px rgba(0, 63, 173, 0.20), 0 4px 12px rgba(0, 78, 230, 0.12) !important;
  background-color: var(--bg-white);
}

/* --- Booking Section --- */
.booking-section {
  text-align: center;
  padding: 100px 0;
}

.booking-cta {
  font-size: 1.3rem;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  color: var(--text-muted);
}

/* --- Modals --- */
.modal-content {
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.modal-header {
  background-color: var(--primary-light);
  border-bottom: 1px solid #dee2e6;
}

/* --- Utility Modifiers --- */
.section-subtitle-narrow {
  max-width: 550px;
}

.badge-accent {
  background-color: var(--accent);
  color: #fff;
}

/* --- Opening Hours Table --- */
.hours-table td:first-child {
  font-weight: 600;
  padding-right: 1.5rem;
}

/* --- Clinic About Section --- */
.clinic-about-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  width: 100%;
  object-fit: cover;
}

/* --- Testimonial Cards --- */
.testimonial-card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 2rem;
  transition: all 0.3s;
  border: 1px solid #F0F0F0;
}

.testimonial-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.testimonial-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.testimonial-stars {
  color: #f5a623;
  font-size: 1.1rem;
}

.testimonial-stars i {
  margin-right: 2px;
}

.testimonial-quote {
  border-left: 3px solid var(--primary);
  padding-left: 1.2rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.8;
}

.testimonial-quote p {
  font-size: 0.95rem;
}

/* --- Testimonial Carousel (front page) --- */

/* staff modal image sizing */
.modal-staff-img {
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--radius);
}
.testimonial-slide {
  padding: 1rem 2rem;
}

.testimonial-avatar-sm {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: block;
}

.testimonial-quote-sm {
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 670px;
  margin: 0 auto;
}

#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
  background-color: var(--primary);
  border-radius: 50%;
  padding: 1.2rem;
  background-size: 50%;
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
  width: auto;
  opacity: 0.7;
  margin: 15%;
}

#testimonialCarousel .carousel-control-prev:hover,
#testimonialCarousel .carousel-control-next:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .testimonial-slide {
    padding: 0.5rem;
  }

  #testimonialCarousel .carousel-control-prev,
  #testimonialCarousel .carousel-control-next {
    display: none;
  }
}

div#heroCarousel {
  /* max-width: 660px; */
  max-width: 500px;
  max-height: 400px;
}

/* Mobile-only inner padding
   Keeps full-width backgrounds (sections, hero, footer) edge-to-edge
   but adds horizontal padding to container content (text, fields, etc.) */
@media (max-width: 767px) {
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Slightly inset the navbar contents on very small screens */
  .navbar {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Smaller buttons on mobile */
  .btn-mobile-sm {
    padding: 10px 20px !important;
    font-size: 1rem !important;
  }

  /* Adjust contact page grid on mobile */
  .contact-left-col {
    padding-left: 16px !important;
  }
  .contact-right-col {
    margin-left: -40px !important;
    padding-right: 0 !important;
  }
}

/* --- Responsive Helpers --- */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-section {
    padding: 60px 0;
  }

  .section-padding {
    padding: 50px 0;
  }

  .carousel .carousel-item img {
    height: 250px;
  }

  .btn-booking {
    font-size: 1.1rem;
    padding: 14px 32px;
  }


}

@media (max-width: 992px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .hide-mobile {
    display: none !important;
  }
}

/* special sizing for contact page layout */
@media (min-width: 992px) {
  .contact-row {
    justify-content: center;
  }
  .contact-info-col {
    max-width: 240px;
    flex: 0 0 240px;
  }
}

@media (min-width: 992) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px;
    }

}


/* 
@media (min-width: 992px) {
  .row-g5 {
    justify-content: center;
  }
  .col-lg-4.pe-lg-4 {
    max-width: 240px;
  }
} */



/*@media (min-width: 1280px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1080px;
    }
}

 @media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px;
    }
    .col-lg-7 {
      flex: 0 0 auto;
      width: 600px;
    }
} */

/* @media (min-width: 993px) and (max-width: 1480px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 90%;
    }
}

@media (min-width: 1481px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 1360px;
    }
} */