/* =========================================================
   Medical Weight Loss Community – Global Styles
   =========================================================
   Brand Palette:
   Primary   #b7d1e8 (soft trust)
   Secondary #2c3e62 (authority)
   Tertiary  #6eb19f (accent / health)
   ========================================================= */

/* --------- Brand variables --------- */
:root{
  --brand-primary: #b7d1e8;
  --brand-secondary: #2c3e62;
  --brand-tertiary: #6eb19f;

  --radius-lg: 18px;
  --radius-md: 12px;

  --shadow-sm: 0 8px 22px rgba(0,0,0,0.06);
  --shadow-xs: 0 6px 16px rgba(0,0,0,0.05);
}

html { 
  scroll-behavior: smooth; 
}

body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
}

/* --------- Main content layout --------- */

main.content{
  padding-top: 1.25rem;
  padding-bottom: 2.5rem;
}

/* Prevent overly wide content */
.page-columns .content{
  max-width: 920px;
}

/* --------- Headings rhythm --------- */

h1, h2, h3{
  letter-spacing: -0.01em;
}

h2{
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}

h3{
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* --------- Links --------- */

a{
  color: var(--brand-secondary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover{
  color: var(--brand-tertiary);
  text-decoration-thickness: 0.12em;
}

/* --------- Title banner --------- */

.quarto-title-block .quarto-title-banner{
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* Light primary gradient */
.quarto-title-banner{
  background: linear-gradient(
    135deg,
    rgba(183, 209, 232, 1),
    rgba(183, 209, 232, 0.75)
  );
  box-shadow: var(--shadow-xs);
}

/* --------- Buttons --------- */

.btn{
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  font-weight: 600;
}

.btn + .btn{
  margin-left: 0.5rem;
}

/* Primary buttons */
.btn-primary{
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: #ffffff;
}

.btn-primary:hover{
  background-color: var(--brand-tertiary);
  border-color: var(--brand-tertiary);
  color: #ffffff;
}

/* Outline buttons */
.btn-outline-primary{
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn-outline-primary:hover{
  background-color: rgba(183, 209, 232, 0.35);
  color: var(--brand-secondary);
  border-color: rgba(44, 62, 98, 0.35);
}

/* --------- Callouts --------- */

.callout{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  border-left-color: var(--brand-tertiary);
}

.callout-note{
  background-color: rgba(183, 209, 232, 0.25);
}

/* --------- Lists --------- */

ul, ol{
  padding-left: 1.2rem;
}

li{
  margin-bottom: 0.35rem;
}

/* --------- Footer --------- */

.nav-footer {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  background-color: var(--brand-secondary); /* dark blue */
  color: rgba(255, 255, 255, 0.9);
}

/* Footer text */
.nav-footer,
.nav-footer p,
.nav-footer span {
  color: rgba(255, 255, 255, 0.9);
}

/* Footer links */
.nav-footer a {
  color: #ffffff;
  opacity: 0.85;
  text-decoration: none;
}

.nav-footer a:hover {
  color: var(--brand-tertiary);
  opacity: 1;
}

/* =========================================================
   Navbar – Clean, intentional layout
   ========================================================= */

/* Brand alignment */
.navbar-brand{
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* =========================================================
   NAVBAR HEIGHT CONTROL (AUTHORITATIVE)
   ========================================================= */

/* Desktop navbar height */
.navbar {
  min-height: 88px;              /* controls total bar height */
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

/* Mobile navbar height */
@media (max-width: 991px) {
  .navbar {
    min-height: 64px;
  }
}

/* =========================================================
   NAVBAR LOGO — WORDMARK SVG (FINAL)
   ========================================================= */

/* NAVBAR LOGO — WORDMARK SVG */
img.navbar-logo {
  height: 64px !important;   /* matches navbar nicely */
  width: auto !important;
  max-width: 420px;
}

/* Mobile */
@media (max-width: 991px) {
  img.navbar-logo {
    height: 40px !important;
    max-width: 280px;
  }
}

/* Brand text (Playfair Display) */
.navbar-brand span{
  font-family: "Playfair Display", serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--brand-secondary);
  letter-spacing: -0.01em;
}

/* --------- Desktop navbar behavior --------- */
@media (min-width: 992px){

  /* Push nav items to the right */
  .navbar-nav{
    gap: 0.35rem;
  }

  .navbar-nav .nav-link{
    padding: 0.45rem 0.75rem;
    font-weight: 500;
    color: var(--brand-secondary);
    opacity: 0.92;
  }

  .navbar-nav .nav-link:hover{
    opacity: 1;
    color: var(--brand-tertiary);
  }

  /* Active nav item */
  .navbar-nav .nav-link.active{
    text-decoration: underline;
    text-underline-offset: 0.35em;
    text-decoration-thickness: 0.12em;
  }

  /* CTA pill (Contact / Booking = last item) */
  .navbar-nav .nav-item:last-child .nav-link{
    background: var(--brand-secondary);
    color: #ffffff !important;
    border-radius: 999px;
    padding: 0.5rem 0.9rem !important;
    margin-left: 0.4rem;
    opacity: 1;
  }

  .navbar-nav .nav-item:last-child .nav-link:hover{
    background: var(--brand-tertiary);
    color: #ffffff !important;
  }

  /* Prevent underline on CTA */
  .navbar-nav .nav-item:last-child .nav-link.active{
    text-decoration: none;
  }
}

/* =========================================================
   Navbar layout: brand left, links centered, tools right
   (Flex-based, Quarto-version tolerant)
   ========================================================= */

@media (min-width: 992px) {

  /* Use flex on the navbar inner container */
  .navbar .navbar-container,
  .navbar .container,
  .navbar .container-fluid {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* Brand stays left */
  .navbar .navbar-brand {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  /* The collapsible area becomes the center lane */
  .navbar .navbar-collapse {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
  }

  /* Center the nav links */
  .navbar .navbar-nav {
    margin: 0 auto !important;
    justify-content: center;
  }

  /* Right-side tools group (social icons) */
  .navbar .navbar-tools,
  .navbar .quarto-navbar-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 0.75rem;
  }

  /* ALSO force the Quarto search button to the far right */
  .navbar .quarto-search,
  .navbar #quarto-search,
  .navbar .aa-DetachedSearchButton {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  /* Icon appearance */
  .navbar .navbar-tools a,
  .navbar .quarto-navbar-tools a,
  .navbar .quarto-search a,
  .navbar .aa-DetachedSearchButton {
    color: var(--brand-secondary);
    font-size: 1.1rem;
    opacity: 0.9;
  }

  .navbar .navbar-tools a:hover,
  .navbar .quarto-navbar-tools a:hover,
  .navbar .quarto-search a:hover,
  .navbar .aa-DetachedSearchButton:hover {
    color: var(--brand-tertiary);
    opacity: 1;
  }
}

/* =========================================================
   Home page feature panels (GLP-1 / Training / Nutrition)
   ========================================================= */

.feature-section {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin-top: 3rem;
}

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: #f6f8fb;
  border-radius: 24px;
  padding: 2.5rem;
}

/* Subtle elevation & hover polish */
.feature-row {
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}

.feature-row.reverse {
  direction: rtl;
}

.feature-row.reverse > * {
  direction: ltr;
}

.feature-image img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 18px;
}

.feature-content h3 {
  margin-top: 0;
  font-weight: 600;
}

.feature-content p {
  font-size: 1.05rem;
  color: #444;
}

.feature-actions {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Mobile stacking */
@media (max-width: 991px) {
  .feature-row {
    grid-template-columns: 1fr;
    padding: 2rem;
  }

  .feature-image img {
    max-height: 260px;
  }
}

/* =========================================================
   Services page — stacked cards with optional image slot
   ========================================================= */

.services-stack{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 1.75rem;
}

.service-card{
  background: #f6f8fb;
  border-radius: 24px;
  padding: 2.25rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
}

/* Copy + optional media area */
.service-grid{
  display: grid;
  grid-template-columns: 1.35fr 0.65fr; /* text + media */
  gap: 1.75rem;
  align-items: center;
}

.service-copy h3{
  margin-top: 0;
}

.service-copy p{
  color: #444;
  font-size: 1.05rem;
}

/* Media area: will look good once images are added */
.service-media img{
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 18px;
}

/* If media is empty, it won’t break layout */
.service-media:empty{
  display: none;
}

@media (max-width: 991px){
  .service-card{
    padding: 2rem;
  }

  .service-grid{
    grid-template-columns: 1fr;
  }

  .service-media img{
    max-height: 260px;
  }
}


/* FAQ readability polish (native layout, no cards) */
.page-columns .content h2 {
  margin-top: 2.4rem;
}

.page-columns .content h3 {
  margin-top: 1.1rem;
  margin-bottom: 0.35rem;
}

.page-columns .content h3 + p {
  margin-top: 0.25rem;
}