/* ========================================
   RESET
======================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ========================================
   THEME VARIABLES
======================================== */
:root{
  --pink: #C77995;
  --pink-600: #B06784;
  --charcoal: #2B2D31;
  --ink: #3C4043;
  --muted: #6B7075;
  --bg: #F7F7F8;
  --card: #FFFFFF;
  --border: #E6E7EA;
  --grey-soft: #E8E6E3;   
  --grey-hover: #E5E3E0; 
  --radius: 14px;
  --shadow: 0 6px 24px rgba(21, 23, 26, .06);
  --focus: 0 0 0 3px rgba(199, 121, 149, .25);

  /* height of the fixed footer bar */
  --footer-height: 70px;

  /* color-scheme hints for browser UI */
  color-scheme: light dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]{
  --bg: #2e2e2e;         /* pure dark grey, no blue */
  --card: #3a3a3a;       /* darker card grey */
  --border: #505050;     /* neutral grey border */
  --ink: #f5f5f5;        /* text remains bright */
  --charcoal: #ffffff;
  --muted: #c0c0c0;      /* neutral muted text */

  --shadow: 0 10px 30px rgba(0,0,0,0.40);
  --focus: 0 0 0 3px rgba(199,121,149,.35);
}


/* ========================================
   TYPOGRAPHY & BASE
======================================== */
body{
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
h1,h2,h3{
  color: var(--charcoal);
  line-height: 1.2;
  margin: .2rem 0 .6rem;
}
h1{ font-size: clamp(2rem, 3.5vw, 2.5rem); }
h2{ font-size: clamp(1.5rem, 2.5vw, 2rem); }
p{ margin: 0 0 1rem; }

/* Smooth theme transitions (disabled during first paint via .no-trans) */
* {
  transition: background-color .2s ease,
              color .2s ease,
              border-color .2s ease;
}
.no-trans *, .no-trans *::before, .no-trans *::after {
  transition: none !important;
}

:root[data-theme="dark"] body {
  background: #2e2e2e; /* match your theme */
}

/* Darken the main header in dark mode */
:root[data-theme="dark"] .header {
  background: #242424;
  border-bottom: 1px solid #505050;
}



:root[data-theme="dark"] .nav > a:hover,
:root[data-theme="dark"] .nav > .nav-item-with-sub > a:hover {
  background: var(--pink-600);
  color: #fff;
}
:root[data-theme="dark"] .card { box-shadow: var(--shadow); }

/* ========================================
   LAYOUT HELPERS
======================================== */
.container{ width: min(1100px, 92%); margin-inline: auto; }
.section{ padding: clamp(2rem, 5vw, 3.5rem) 0; }

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.grid-3{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px){
  .grid-3{ grid-template-columns: 1fr; }
}

.m0{ margin: 0; }
.mt1{ margin-top: 1rem; }
.mt2{ margin-top: 2rem; }
.flex{ display: flex; gap: 1rem; align-items: center; }

/* Sticky footer structure */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
  padding-bottom: var(--footer-height);
}

/* ========================================
   HEADER & NAV
======================================== */
.header{
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border);
}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
}

/* stretch container edge-to-edge in header */
.header .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: .5rem;
  padding-right: 1rem;
}
.header-inner{ padding-left: 0; }

.brand{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
}
.brand .logo{
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--pink), var(--pink-600));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
}

.logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 9px;
  display: block;
}

.nav {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Only top-level nav links */
.nav > a,
.nav > .nav-item-with-sub > a {
  padding: .5rem .7rem;
  border-radius: 10px;
  color: var(--muted);
}
.nav > a:hover,
.nav > .nav-item-with-sub > a:hover {
  color: var(--charcoal);
  background: var(--grey-hover);

}
.nav > a.active,
.nav > .nav-item-with-sub > a.active {
  color: #fff;
  background: var(--pink);
}

/* Wrapper around "Services" + its submenu */
.nav-item-with-sub {
  position: relative;
  display: flex;
  align-items: center;
}

/* Language switch (GR | EN) */
.lang-switch{
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  color: var(--muted);
}
.lang-switch a{
  padding: .2rem .4rem;
  border-radius: 6px;
  font-size: .8rem;
  line-height: 1;
  color: var(--muted);
  transition: .2s;
}
.lang-switch a.active{
  background: var(--pink);
  color: #fff;
}
.lang-switch a:hover{
  background: var(--grey-hover);
  color: var(--charcoal);
}

/* Optional header theme toggle (if used) */
.theme-toggle{
  background: none;
  border: none;
  padding: 0;
  margin-left: .75rem;
  cursor: pointer;
  color: var(--muted);
}
.theme-toggle .icon{
  font-size: 1.2rem;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle .icon {
  font-size: 1.2rem;
  display: block;
  line-height: 1;
}

/* MOBILE NAV TOGGLE (HAMBURGER) */
.nav-toggle {
  display: none;                 /* hidden on desktop */
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  margin-left: 0.5rem;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.nav-toggle:hover {
  background: var(--card);
  color: var(--charcoal);
}

:root[data-theme="dark"] .nav-toggle {
  border-color: var(--border);
  color: var(--muted);
}
:root[data-theme="dark"] .nav-toggle:hover {
  background: #26272F;
  color: var(--ink);
}

/* keep header as positioning context for dropdown nav */
.header-inner {
  position: relative;
}

/* Small screens: hide nav behind a button */
@media (max-width: 880px) {

  /* show burger, shrink name a bit */
  .nav-toggle {
    display: inline-flex;
  }

  /* put brand on left, lang + burger on right */
  .header-inner {
    gap: 0.5rem;
  }

  .brand .name {
    font-size: 0.8rem;
  }

  /* Language switch stays visible in header */
  .header-lang {
    margin-left: auto;
    font-size: 0.8rem;
  }

  /* Dropdown nav */
  .nav {
    position: absolute;
    top: 100%;         /* right under the header bar */
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    padding: 0.7rem 1rem 0.9rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    display: none;     /* closed by default */
    z-index: 200;
  }

  /* open state */
  .nav.is-open {
    display: flex;
  }

  /* full-width clickable rows */
  .nav > a,
  .nav > .nav-item-with-sub > a {
    width: 100%;
    padding: 0.45rem 0;
    border-radius: 6px;
  }

  .nav-item-with-sub {
    width: 100%;
    align-items: center;
  }

  /* move submenu chevron to the far right on mobile */
  .nav-item-with-sub > a {
    flex: 1;
  }

  .nav-sub-toggle {
    margin-left: auto;
  }

  /* submenu just indented when menu is open */
  .submenu {
    position: static;
    margin: 0.25rem 0 0.4rem;
    padding: 0.2rem 0.8rem 0.4rem;
    min-width: 0;
    width: 100%;
    box-shadow: none;
  }

  .submenu a {
    padding: 0.35rem 0;
  }
}

/* Mobile: show sub-items always, styled like grouped sections */
/* Mobile: nav items look like expandable buttons */
@media (max-width: 880px) {

  .nav-item-with-sub {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    margin-top: 0.3rem;
  }

  /* Header row (Η Γιατρός / Υπηρεσίες) */
  .nav-item-with-sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    font-weight: 600;
  }

  /* keep the chevron visible */
  .nav-sub-toggle {
    margin-left: 0.5rem;
  }

  /* when open, give header row a soft background */
  .nav-item-with-sub.is-open > a,
  .nav-item-with-sub.is-open .nav-sub-toggle {
    background: rgba(0, 0, 0, 0.03);
  }

  :root[data-theme="dark"] .nav-item-with-sub.is-open > a,
  :root[data-theme="dark"] .nav-item-with-sub.is-open .nav-sub-toggle {
    background: rgba(255, 255, 255, 0.04);
  }

  /* submenu = “inside” of the accordion */
  .submenu {
    position: static;
    margin: 0.1rem 0 0.4rem;
    padding: 0.1rem 0.8rem 0.4rem;
    min-width: 0;
    width: 100%;
    box-shadow: none;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--border);
  }

  .submenu a {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.9rem;
  }
}


/* MOBILE: make submenu items stack vertically and be visible */
@media (max-width: 880px) {
  .nav-item-with-sub {
    display: block;      /* instead of the desktop flex row */
    width: 100%;
    border-radius: 10px;
    overflow: hidden;    /* keeps the rounded edges but no clipping now */
    background: transparent;
    margin-top: 0.3rem;
  }
}


/* ========================================
   OLD HERO (used on EN or other pages)
======================================== */
.hero{
  padding: clamp(2rem, 5vw, 4rem) 0;
  background:
    radial-gradient(1000px 400px at 90% -20%, rgba(199,121,149,.10), transparent 60%),
    var(--bg);
}
.hero .panel{
  background: var(--card);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
}
@media (max-width: 880px){
  .hero .panel{ grid-template-columns: 1fr; }
}

/* ========================================
   BUTTONS
======================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--pink);
  color: #fff;
  padding: 0.65rem 1.15rem;
  border: none;
  border-radius: 999px;        /* soft pill */
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.btn:hover{
  background: var(--pink-600);
  transform: translateY(-2px);
}
.btn:active{
  transform: translateY(0);
}

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
}
.btn-secondary{
  background: var(--grey-soft);
  color: var(--charcoal);
}

/* Map placeholder button — make it pink so it stays readable in dark mode */
.hero-map-slide .map-placeholder .btn {
  background: var(--pink);
  color: #fff;
}

.hero-map-slide .map-placeholder .btn:hover {
  background: var(--pink-hover);
}

/* ========================================
   FORMS / INPUTS
======================================== */
.input,
.textarea,
select{
  width: 100%;
  padding: .75rem .9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease;
}
.input:focus,
.textarea:focus,
select:focus{
  outline: none;
  box-shadow: var(--focus);
  border-color: var(--pink);
}

select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 2.2rem) 0;
  background-size: 6px 6px, 6px 6px, 2rem 100%;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
option{
  background: var(--card);
  color: var(--ink);
}

/* ========================================
   BLOG PAGE
======================================== */
.blog-page .grid-3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.blog-page .card{
  background: var(--card);
  border-radius: 12px;
  padding: 1.2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform .2s, box-shadow .2s;
}
.blog-page .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.blog-page .card h3 a{
  color: #2a5d84;
  text-decoration: none;
}
.blog-page .card small{ color: #777; }

/* blog title + inline disclaimer */
.blog-header-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
@media (max-width: 600px){
  .blog-header-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}
.blog-header-line{
  width: 100%;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  margin-top: -0.2rem;
}

/* Inline medical disclaimer button */
.disclaimer-inline{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.disclaimer-inline:hover{ color: var(--charcoal); }

/* Full disclaimer text block */
.disclaimer-text{
  margin: 0.4rem 0 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 700px;
  padding: 0;
  border: none;
  background: transparent;
}
:root[data-theme="dark"] .disclaimer-text{
  background: var(--card);
  color: var(--ink);
  border-color: var(--border);
}
@media (max-width: 600px){
  .disclaimer-text{ margin-inline: auto; }
}

/* Disclaimer close button (X) */
.disclaimer-close{
  float: right;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  margin-left: 0.75rem;
}
.disclaimer-close:hover{ color: var(--charcoal); }
:root[data-theme="dark"] .disclaimer-close:hover{
  color: var(--ink);
}

/* Legal page "back" link */
.legal-return{
  color: #2a5dff;
  text-decoration: underline;
  font-weight: 500;
}
.legal-return:hover{
  color: #003ad6;
  text-decoration: underline;
}

/* BLOG – fancy pink chapter titles */
.blog-page .card h3 a {
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: 
    color 0.25s ease,
    transform 0.25s ease,
    text-shadow 0.25s ease;
}

/* cute pink underline */
.blog-page .card h3 a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 38px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
  transition: width 0.25s ease, opacity 0.25s ease;
  opacity: 0.8;
}

/* hover glow + rise + underline expand */
.blog-page .card h3 a:hover {
  color: var(--pink-600);
  transform: translateY(-2px);
  text-shadow: 0 2px 10px rgba(199, 121, 149, 0.35);
}

.blog-page .card h3 a:hover::after {
  width: 60px;
  opacity: 1;
}

/* =========================
   CHAPTER PAGES (CH1, CH2…)
   match blog mockup
========================= */

/* hide main header, keep the grey info strip on top */
.chapter-page .header {
  display: block;
}

/* slightly tighter top padding */
.chapter-page main.section {
  padding-top: 2.2rem;
}



/* soft lilac card behind the whole chapter text */
.chapter-shell {
  background: #f7f4ff;                 /* light lilac like the mockup */
  border-radius: 18px;
  padding: 2.2rem 2.5rem 2.4rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* dark theme version */
:root[data-theme="dark"] .chapter-shell {
  background: #26272F;
}

/* keep article max width looking nice */
.chapter-page .service-article {
  max-width: 860px;
  margin: 0 auto;
}

.blog-section {
  margin-top: 1.5rem;
}

.blog-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 0.2rem;
}

/* Show only chapters by default */
/* Show only articles by default instead */
.blog-section:nth-of-type(1) {
  display: none;
}



/* cute pink underline like other headings */
.blog-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 50px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
}

/* dark mode still readable */
:root[data-theme="dark"] .blog-subtitle {
  color: var(--ink);
}

.category-toggle {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  flex-direction: row; /* ensure left→right order respects HTML */
}



/* ========================================
   BIO PAGE
======================================== */
.bio-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 2fr;
  align-items: start;
}
@media (max-width: 880px){
  .bio-grid{
    grid-template-columns: 1fr;
  }
  .photo-card{
    text-align: center;
    margin-bottom: 1rem;
  }
  .photo-card img{
    max-width: 260px;
    margin-inline: auto;
    border-radius: 10px;
  }
}

/* Photo card */
.photo-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.photo-card img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: none;
}

/* Social icons under photo */
.social-links{
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
/* Social icons – flat, no glow */
.bio-photo .social-links img {
  opacity: 1;
  filter: brightness(0);
  transition: none;
}

.bio-photo .social-links img:hover {
  opacity: 1;
}
:root[data-theme="dark"] .bio-photo .social-links img {
  filter: invert(1);
  opacity: 1;
}



/* Scrollable bio text column */
.bio-scroll{
  max-height: 565px;
  overflow-y: auto;
  padding-right: 10px;
}


.bio-page .photo-card img{
  max-height: 380px;
  width: auto;
  object-fit: contain;
  margin-bottom: 0.5rem;
}
.bio-page .photo-card{
  max-height: 540px;
  overflow: hidden;
  justify-content: flex-start;
}
.bio-page .photo-card .social-links{
  margin-top: 0.5rem;
}

/* ========================================
   BIO PAGE — CLEAN 2-COLUMN LAYOUT
   (like the dietitian screenshot)
======================================== */
.bio-section {
  padding-top: 0.6rem;   /* reduced from huge clamp() */
  padding-bottom: 0;
  background:
    linear-gradient(to bottom, #faf7fa 0%, #ffffff 40%, var(--bg) 100%),
    radial-gradient(900px 380px at 105% -20%, rgba(199,121,149,0.18), transparent 60%);
}

/* Dark mode background for bio section */
:root[data-theme="dark"] .bio-section{
  background:
    radial-gradient(900px 380px at 105% -20%, rgba(199,121,149,0.24), transparent 60%),
    linear-gradient(to bottom, #202123 0%, #26272F 40%, #202123 100%);
}


.bio-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.75rem;                        /* a bit tighter gap */
  align-items: stretch;                /* make columns same height */
}

.bio-layout > *{
  height: 100%;                        /* force both cards to match */
}


.bio-text{
  max-width: 46rem;
  background: var(--card);
  border-radius: 22px;
  padding: 2rem 2.3rem 2.1rem 2.6rem; /* a bit tighter */
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bio-text::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1.7rem;
  bottom: 1.7rem;
  width: 3px; /* thinner accent line */
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--pink), var(--pink-600));
  opacity: 0.45;
}

.bio-name{
  font-size: clamp(2.3rem, 3.4vw, 2.8rem);
  font-weight: 600;
  margin: 0 0 .4rem;
}

.bio-subtitle{
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 1.8rem;
  color: var(--muted);
}

.bio-text p{
  margin-bottom: .9rem;
}

.bio-text h2{
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
  color: var(--muted);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
:root[data-theme="dark"] .bio-text h2{
  border-bottom-color: rgba(255,255,255,0.08);
}

.bio-text ul{
  padding-left: 1.1rem;
  margin: 0 0 .8rem;
}

.bio-meta{
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.bio-meta li{
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #f7e7ee;
  color: var(--charcoal);
  border: 1px solid rgba(0,0,0,0.03);
}
:root[data-theme="dark"] .bio-meta li{
  background: rgba(199,121,149,0.12);
  border-color: rgba(255,255,255,0.04);
}

.bio-highlight {
  margin: 1.2rem 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
}
.bio-highlight ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.bio-photo {
  justify-self: stretch;  /* let it grow naturally */
  max-width: none;        /* remove the limit */
  text-align: right;
}


/* original bare image style (overridden by .bio-photo-inner below) */
.bio-photo img{
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* reuse social-links, just right-align here */
.bio-photo .social-links{
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Smaller screens: stack content */
@media (max-width: 900px){
  .bio-layout{
    grid-template-columns: 1fr;
  }
  .bio-photo{
    justify-self: center;
    max-width: 320px;
    text-align: center;
  }
  .bio-photo .social-links{
    justify-content: center;
  }
}

/* Bring CTA closer to the bio on this page */
.bio-page .home-cta-strip{
  margin-top: 4rem;
}

/* Photo card wrapper – same vibe as text card */
.bio-photo-inner{
  height: 100%; /* match text card height */

  background: var(--card);
  border-radius: 22px;
  padding: 2rem 2.3rem 2.1rem 2.3rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  position: relative; /* for the accent line */
}

.bio-photo-inner img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

/* right accent line, mirroring the text card */
.bio-photo-inner::after {
  content: "";
  position: absolute;
  right: 0;
  top: 1.7rem;
  bottom: 1.7rem;
  width: 3px; /* thinner */
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--pink), var(--pink-600));
  opacity: 0.45;
}

.bio-photo-inner .social-links{
  justify-content: center;
}

/* small header & caption inside the photo card */
.bio-photo-header{
  align-self: stretch;
  width: 100%;
  text-align: left;
  margin-bottom: 0.5rem;
}
.bio-photo-title{
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.1rem;
}
.bio-photo-caption{
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0;
}

.bio-photo .social-links {
  margin-top: 0.6rem;
  gap: 0.9rem;
}

/* flat, crisp icons – no glow */
.bio-photo .social-links img {
  width: 32px;
  height: 32px;
  filter: brightness(0);
  opacity: 1;
  transition: none;
  box-shadow: none !important;   /* ← add this line */
}


.bio-photo .social-links img:hover {
  opacity: 1;          /* keep it the same on hover */
}

/* dark mode – just invert, still flat */
:root[data-theme="dark"] .bio-photo .social-links img {
  filter: brightness(0) invert(1);
}


/* mobile: center header text */
@media (max-width: 900px){
  .bio-photo-header{
    text-align: center;
  }
}


.bio-text,
.bio-photo-inner {
  margin-top: 0.3rem; /* aligns them perfectly at the top */
}


/* ========================================
   COOKIE BANNER
======================================== */
.cc-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-height);
  z-index: 1000;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: .75rem 0;
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform .3s ease,
    opacity .3s ease,
    visibility .3s;
}
.cc-banner[hidden]{
  display: block !important;
  pointer-events: none;
}
.cc-banner:not([hidden]){
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#cc-banner .cc-inner.container{
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex !important;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}
#cc-banner .cc-text{
  flex: 1 1 480px;
  margin: 0;
}
#cc-banner .cc-actions{
  display: inline-flex !important;
  gap: .5rem;
  margin-left: 0 !important;
}
#cc-panel{
  width: 100%;
  margin-top: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--card);
  text-align: left !important;
  border-radius: 0 0 var(--radius) var(--radius);
}
.cc-row{
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
}
.cc-actions-row{ margin-top: .5rem; }

/* Cookie banner dark mode */
:root[data-theme="dark"] .cc-banner{
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] #cc-panel,
:root[data-theme="dark"] #cc-panel fieldset{
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}
:root[data-theme="dark"] #cc-panel legend,
:root[data-theme="dark"] #cc-panel .cc-row span{
  color: var(--ink) !important;
}
:root[data-theme="dark"] #cc-panel input[type="checkbox"]{
  accent-color: var(--pink);
}
:root[data-theme="dark"] #cc-panel .cc-row{
  border-color: var(--border);
}

/* Surfaces theme-aware */
#cc-banner,
#cc-banner .cc-inner,
#cc-panel{
  background: var(--card) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
#cc-panel fieldset{
  margin: 0;
  padding: .5rem .75rem;
}
#cc-panel legend{
  padding: 0 .35rem;
}
#cc-panel .cc-row,
#cc-panel .cc-row span{
  background: transparent !important;
}
#cc-panel input[type="checkbox"]{
  accent-color: var(--pink);
}
:root[data-theme="dark"] #cc-banner .btn-secondary,
:root[data-theme="dark"] #cc-banner .btn-ghost{
  background: #20242A !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

/* ========================================
   FOOTER & LEGAL AREA
======================================== */
.footer{
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  padding: 1.2rem 0;
  margin-top: 2rem;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
}
.footer .container{
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 1rem;
  text-align: left;
}

/* New legal line footer */
.footer-legal-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.footer-legal-left{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.footer-legal-line .divider{
  opacity: 0.6;
}

.legal-link{
  color: var(--muted);
  text-decoration: underline;
}
.legal-link:hover{ color: var(--charcoal); }

.legal-button{
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.legal-button:hover{ color: var(--charcoal); }

.legal-copy{
  white-space: nowrap;
}

/* Footer theme toggle (emoji with underline) */
.footer-theme-toggle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-left: auto;
  margin-right: 40px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-theme-toggle {
  padding: 0;
  margin-right: 25px;
}

.footer-theme-toggle #themeIcon {
  font-size: 1.2rem;
  padding: 0;
  border: none;
  opacity: 0.7;
  transition: opacity .2s ease;
}

.footer-theme-toggle:hover #themeIcon {
  opacity: 1;
}

.footer-theme-toggle:hover #themeIcon {
  color: var(--charcoal);
}
:root[data-theme="dark"] .footer-theme-toggle:hover #themeIcon {
  color: var(--ink);
}


/* Mobile: floating theme toggle button */
@media (max-width: 768px) {
  .footer-theme-toggle {
    position: fixed;
    bottom: 14px;
    right: 14px;
    margin: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--card);        /* matches your cards */
    box-shadow: var(--shadow);      /* same soft shadow vibe */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;                  /* above page content */
  }

  .footer-theme-toggle #themeIcon {
    font-size: 1.3rem;
    opacity: 0.9;
    text-decoration: none;          /* remove underline for floating version */
  }
}

/* ========================================
   PRE-FOOTER OVERVIEW SECTION
======================================== */
.site-overview{
  background: #696661;
  color: #fff;
  padding: 3rem 0;
}
:root[data-theme="dark"] .site-overview{
  background: #2e2e2e;   /* matches your new theme */
}


.site-overview h2{
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: #fff;
}
.site-overview p{
  margin-bottom: 1rem;
  color: #f3f3f3;
  font-size: 0.95rem;
}
.contact-list,
.footer-nav-list,
.latest-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-list li,
.footer-nav-list li{
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}
.site-overview a{
  color: #fff;
}
.site-overview a:hover{
  text-decoration: underline;
}
/* Latest articles mini list */
.latest-list li{
  margin-bottom: 0.6rem;
}
.latest-list a{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.5rem;
  align-items: center;
}
.latest-thumb img{
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
}
.latest-title{
  font-size: 0.9rem;
  line-height: 1.3;
}

/* ========================================
   HOME EXTRA SECTIONS (visit us, CTA, etc.)
======================================== */
.home-section{
  padding: 3rem 0;
  background: var(--bg);
}
.home-section.home-alt{
  background: #f0f0f0;
}
:root[data-theme="dark"] .home-section.home-alt{
  background: #26272F;
}

.home-two-col-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
/* Flip columns (map left, text right) only on wide screens */
@media (min-width: 900px){
  .home-two-col-inner--reverse > :first-child { order: 2; }
  .home-two-col-inner--reverse > :last-child { order: 1; }
}
@media (max-width: 700px){
  .home-two-col-inner{
    grid-template-columns: 1fr;
  }
}

.home-section h2{
  margin-bottom: 0.75rem;
}
.home-list{
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
}
.home-list li{
  margin-bottom: 0.35rem;
}
.home-list strong{
  font-weight: 600;
}

/* Meet the doctor image (if used) */
.home-photo-card{
  justify-self: center;
}
.home-photo-card img{
  max-width: 280px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* Map card */
.home-map {
  border-radius: 14px;
  overflow: hidden;
  /* scales with viewport height, but never too tiny or too huge */
  height: clamp(200px, 32vh, 320px);
  box-shadow: var(--shadow);
}

:root[data-theme="dark"] .home-map{
  background: #202123;
}

/* CTA strip */
.home-cta-strip{
  background: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0;
  margin-top: 30px; /* spacing above CTA globally */
}
.home-cta-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.home-cta-inner h2{
  margin: 0 0 0.25rem;
}
.home-cta-inner p{
  margin: 0;
}
.home-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (max-width: 700px){
  .home-cta-inner{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ===============================
   TOP INFO STRIP (under header)
================================ */
/* ===============================
   TOP INFO STRIP (under header)
================================ */
.top-info-strip {
  background: #696661;            /* same as prefooter */
  color: #fff;
  padding: 0.6rem 0;
  border-bottom: none;
  box-shadow: var(--shadow);
  font-size: 0.84rem;
}

.top-info-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;                      /* tighter, but still airy on desktop */
  flex-wrap: wrap;
}

/* Each item = icon + text on one line */
.top-info-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.top-info-item strong {
  font-weight: 600;
  color: #fff;
}

.top-info-item a {
  color: #fce4ec;                 /* soft pink for readability on dark bg */
  font-weight: 600;
}
.top-info-item a:hover {
  text-decoration: underline;
}

/* Mobile: stack nicely, remove huge gaps */
@media (max-width: 700px) {
  .top-info-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .top-info-item {
    white-space: normal;
  }
}

/* Dark mode */
:root[data-theme="dark"] .top-info-strip {
  background: #3a3a3a;            /* same as your card color */
  color: var(--ink);
  border-bottom: 1px solid #505050;
}

:root[data-theme="dark"] .top-info-item strong {
  color: var(--ink);
}
:root[data-theme="dark"] .top-info-item a {
  color: var(--pink);
}

/* iPad / medium screens: tidy top info strip */
@media (max-width: 1024px) and (min-width: 701px) {

  .top-info-strip {
    padding: 0.45rem 0;       /* smaller height */
    font-size: 0.78rem;       /* slightly smaller text */
  }

  .top-info-inner {
    flex-direction: column;   /* stack like on mobile */
    align-items: flex-start;
    gap: 0.35rem;
  }

  .top-info-item {
    white-space: normal;      /* allow wrapping */
  }
}

/* Neutral dark background for home-alt sections */
:root[data-theme="dark"] .home-section.home-alt {
  background-color: #2c2c2c !important; /* clean neutral gray */
}
:root[data-theme="dark"] .home-section.home-alt .card {
  background-color: #3a3a3a !important;
  border-color: #4a4a4a !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}


/* ========================================
   SERVICES CARDS (hover + icons)
======================================== */
.grid-3 .card {
  min-height: 380px;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.card img.service-icon {
  width: 140px;
  height: auto;
  display: block;
  object-fit: contain;
  margin-top: auto;
  margin-bottom: 0.5rem;
  align-self: center;
}
.card ul {
  margin-top: 0.5rem;
  padding-left: 1.2rem;
}
.card .card-link {
  margin-top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.85;
  pointer-events: auto;
  transition:
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Hover emphasis */
.services-grid .card {
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              opacity 0.25s ease;
}
.services-grid:hover .card {
  opacity: 0.55;
}
.services-grid .card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  opacity: 1;
  z-index: 1;
}
.services-grid .card:hover .card-link {
  opacity: 1;
  transform: translateY(-1px);
}
@media (max-width: 880px) {
  .services-grid:hover .card {
    opacity: 1;
  }
  .services-grid .card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }
}

/* =========================
   SERVICES — Pink "See more" links
========================= */

.card-link {
  color: var(--pink);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: 
    color 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* cute underline */
.card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 36px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
  opacity: 0.75;
  transition: width 0.25s ease, opacity 0.25s ease;
}

/* hover glow + lift */
.card-link:hover {
  color: var(--pink-600);
  transform: translateY(-1px);
}

.card-link:hover::after {
  width: 54px;
  opacity: 1;
}

/* dark mode — slightly brighter */
:root[data-theme="dark"] .card-link {
  color: var(--pink);
}

:root[data-theme="dark"] .card-link:hover {
  color: var(--pink-600);
}

.card-link {
  font-size: 0.9rem;
}


/* VISIT-US section — final nice clean version */
#visit-us {
  background: linear-gradient(
                to bottom,
                #D4D1CC 0%,
                #C9C6C1 100%
              );
  position: relative;
  padding-top: 1.2rem;
}

/* noise texture */
#visit-us::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>\
      <filter id='n' x='0' y='0'>\
        <feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' />\
      </filter>\
      <rect width='100%' height='100%' filter='url(%23n)' opacity='0.09'/>\
    </svg>");
  background-size: 220px 220px;
  background-repeat: repeat;
  mix-blend-mode: soft-light;
}

/* card sits above texture */
#visit-us .home-two-col-inner {
  position: relative;
  z-index: 1;
}

/* Text card inside "Πού θα μας βρείτε" */
#visit-us .home-two-col-inner > div:first-child {
  background: rgba(255, 255, 255, 0.96);
  padding: 1.8rem 2rem;
  border-radius: 18px;
  box-shadow: var(--shadow);
  max-width: 480px;
  justify-self: end;        /* keeps the box snug to the right */
}

/* Make the "Δείτε τον χάρτη" button feel intentional */
#visit-us .home-two-col-inner > div:first-child .btn-ghost {
  margin-top: 1.4rem;       /* a bit of breathing room under the list */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   Dark mode version
======================================== */
:root[data-theme="dark"] #visit-us {
  background: linear-gradient(
                to bottom,
                #2e2e2e 0%,
                #242424 100%
              );
}


/* dark mode – a bit softer but still visible */
:root[data-theme="dark"] #visit-us::before {
  opacity: 0.7; /* scale down a little, still visible */
}

/* Make the "View on map" button styled & themed */
#visit-us .btn-ghost {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font-weight: 600;
  transition: 0.2s ease;
}

#visit-us .btn-ghost:hover {
  background: var(--pink-600);
  border-color: var(--pink-600);
  color: #fff;
  transform: translateY(-2px);
}

#visit-us .btn-ghost:active {
  transform: translateY(0);
}

/* Dark mode version of the "Where to find us" card */
:root[data-theme="dark"] #visit-us .home-two-col-inner > div:first-child {
  background: #3a3a3a;    /* neutral dark grey, matches rest of theme */
  color: var(--ink);
  border: 1px solid #505050; /* optional: improves blending */
}

/* make sure text inside is readable */
:root[data-theme="dark"] #visit-us .home-two-col-inner > div:first-child h2,
:root[data-theme="dark"] #visit-us .home-two-col-inner > div:first-child p,
:root[data-theme="dark"] #visit-us .home-two-col-inner > div:first-child strong {
  color: var(--ink);
}

/* keep the "View map" button pretty & visible on dark */
:root[data-theme="dark"] #visit-us .btn-ghost {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}


/* ========================================
   NAV SUBMENU (Υπηρεσίες dropdown)
======================================== */
/* new toggle button – text-like chevron */
.nav-sub-toggle {
  margin-left: 0.2rem;
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;   /* still gives a nice hit area */
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.nav-sub-toggle .chevron {
  display: block;
  font-size: 0.7rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* rotate arrow when open */
.nav-item-with-sub.is-open .nav-sub-toggle .chevron {
  transform: rotate(180deg);
}

/* submenu box */
.submenu {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.3rem 0;
  min-width: 220px;
  z-index: 99;
}
/* individual submenu links */
.submenu a {
  display: block;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  color: var(--charcoal);
  white-space: nowrap;              /* no awkward wrapping */
}

/* tiny dividers between items */
/* darker divider line */
.submenu a + a {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}


/* keep the rounded corners of the dropdown */
.submenu a:first-child {
  border-radius: 10px 10px 0 0;
}
.submenu a:last-child {
  border-radius: 0 0 10px 10px;
}

/* hover state in LIGHT mode */
.submenu a:hover {
  background: #f5f5f8;
  color: var(--charcoal);
}

/* dark theme text + dividers */
:root[data-theme="dark"] .submenu a {
  color: var(--ink);
}
:root[data-theme="dark"] .submenu a + a {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}


/* show submenu when wrapper has .is-open */
.nav-item-with-sub.is-open .submenu {
  display: block;
}

/* Dark mode submenu */
:root[data-theme="dark"] .submenu {
  background: #26272F;
  border-color: #2A2E34;
}
:root[data-theme="dark"] .submenu a:hover {
  background: #20242A;
  color: var(--ink);
}

.submenu a.active {
  font-weight: 600;
  color: var(--pink-600);
}
:root[data-theme="dark"] .submenu a.active {
  color: var(--pink);
}

/* new toggle button – text-like chevron */
.nav-sub-toggle {
  margin-left: 0.2rem;
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;   /* just for hit area */
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.nav-sub-toggle .chevron {
  display: block;
  font-size: 0.7rem;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* rotate only the arrow when open */
.nav-item-with-sub.is-open .nav-sub-toggle .chevron {
  transform: rotate(180deg);
}

/* focus: underline like a text link */
.nav-sub-toggle:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* hover: just change text color */
.nav-item-with-sub:hover > a,
.nav-item-with-sub:hover .nav-sub-toggle {
  color: var(--charcoal);
}

/* dark theme: still text-like */
:root[data-theme="dark"] .nav-sub-toggle {
  background: none;
  border: none;
  color: var(--muted);
}
:root[data-theme="dark"] .nav-item-with-sub:hover > a,
:root[data-theme="dark"] .nav-item-with-sub:hover .nav-sub-toggle {
  color: var(--ink);
}


/* ========================================
   GENERIC CARD CAROUSEL
======================================== */
.card-carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}
.card-track {
  overflow: hidden;
  flex: 1;
}
.card-track-inner {
  display: flex;
  transition: transform 0.35s ease;
  will-change: transform;
}
.card-carousel .slide {
  min-width: 100%;
}
.card-carousel .card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Prev / Next buttons */
.carousel-btn {
  border: none;
  background: var(--card);
  color: var(--muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.carousel-btn:hover {
  color: var(--charcoal);
}

/* Dots under carousel */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
}
.carousel-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.carousel-dots .dot.active {
  background: var(--pink);
  border-color: var(--pink);
}

/* Small screens: stack buttons */
@media (max-width: 600px) {
  .card-carousel {
    flex-direction: column;
  }
  .carousel-btn {
    align-self: center;
  }
}

/* ========================================
   HERO — CLEAN VERSION (LEFT PANEL + IMAGE)
======================================== */
/* Section wrapper */
.hero-carousel-section {
  background: var(--bg);
  padding: 0 0 3rem;
  position: relative;
}

/* Main hero area with background image */
.hero-carousel {
  max-width: none;
  width: 100%;
  height: clamp(420px, 60vh, 560px);
  margin: 0;
  display: flex;
  align-items: stretch;
}

/* Make slides fill the hero height */
.card-track,
.card-track-inner,
.hero-slide,
.hero-carousel .card {
  height: 100%;
}

.hero-carousel .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Each slide is the positioning context for the text panel */
.hero-slide.hero-split {
  position: relative;
  display: flex;
}

/* LEFT TEXT PANEL: pinned to full height, half width */
.hero-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  max-width: none;
  margin: 0;

  background: linear-gradient(
              135deg,
              rgba(255, 255, 255, 0.96),
              rgba(255, 255, 255, 0.78)
            );
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
  padding: 2.6rem 3.4rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Dark theme hero overrides */
:root[data-theme="dark"] .hero-carousel-section {
  background: #2e2e2e;  /* same as --bg */
}


:root[data-theme="dark"] .hero-text {
  background: linear-gradient(
              135deg,
              rgba(46, 46, 46, 0.75),
              rgba(58, 58, 58, 0.65)
            );
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

:root[data-theme="dark"] .hero-text h1,
:root[data-theme="dark"] .hero-text h2,
:root[data-theme="dark"] .hero-text p {
  color: var(--ink);
}
:root[data-theme="dark"] .hero-carousel {
  filter: brightness(0.85);
}

/* Animate hero text when slide becomes active */
.hero-slide .hero-text {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hero-slide.is-active .hero-text {
  opacity: 1;
  transform: translateY(0);
}

/* We use the big background image instead of the inline <img> */
.hero-photo {
  display: none;
}

/* Controls under the image */
.hero-controls {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}
.hero-controls .carousel-btn {
  position: static;
  transform: none;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  font-size: 1.2rem;
}
.hero-controls .hero-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.hero-controls .hero-dots .dot {
  width: 8px;
  height: 8px;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
.hero-controls .hero-dots .dot.active {
  opacity: 1;
  transform: scale(1.5);
  background: var(--pink);
  border-color: var(--pink);
}

/* Background images per slide */
.hero-slide:nth-child(1) {
  background: url("iatreio.png") center/cover no-repeat;
}
.hero-slide:nth-child(2) {
  background: url("/img/doctor1.png") center/cover no-repeat;
}
:root[data-theme="dark"] .hero-slide:nth-child(2) {
  background: url("/img/doctor1.png") center/cover no-repeat;
}

/* Phones + tablets: no photo backgrounds, but keep map */
@media (max-width: 1024px) {
  .hero-slide:nth-child(1),
  .hero-slide:nth-child(2) {
    background: none !important;
    background-color: var(--bg);
  }

  :root[data-theme="dark"] .hero-slide:nth-child(1),
  :root[data-theme="dark"] .hero-slide:nth-child(2) {
    background: none !important;
    background-color: #2e2e2e;
  }
}

/* Mobile hero */
@media (max-width: 900px) {
  .hero-carousel-section {
    padding: 1.5rem 0 2.5rem;
  }
  .hero-carousel {
    height: auto;
    min-height: 0;
    background-position: top center;
    padding-bottom: 2rem;
  }
  .hero-slide.hero-split {
    position: static;
    flex-direction: column;
    height: auto;
  }
  .hero-text {
    position: static;
    height: auto;
    flex: none;
    width: 94%;
    max-width: none;
    margin: 0 auto;
    border-radius: 20px;
    padding: 2.1rem 1.7rem;
  }
  .hero-controls {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}
@media (min-width: 1200px) {
  .hero-text {
    width: 45%;
  }
}

/* ========================================
   BIO DETAILS – CARD WRAPPER + ACCORDION
======================================== */
.bio-details{
  padding: 2.5rem 0 0;
}

.bio-details-shell{
  background: var(--card);
  border-radius: 22px;
  padding: 2.4rem 2.6rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.bio-details-header{
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
}
.bio-details-header h2{
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bio-details-header p{
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Accordion layout */
/* Accordion layout: top row = buttons, bottom = active panel */
.bio-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* TOP: horizontal buttons */
.bio-accordion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.bio-tab {
  flex: 1 1 0;
  min-width: 180px;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.bio-tab:hover {
  background: #f1f1f4;
  color: var(--charcoal);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* Active tab */
.bio-tab.is-active {
  background: #e9e8e6;          /* warm grey */
  border-color: #d6d3ce;
  color: var(--charcoal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.bio-tab:hover {
  background: #ededeb;
}


:root[data-theme="dark"] .bio-tab {
  background: #26272F;
  border-color: var(--border);
  color: var(--muted);
}
:root[data-theme="dark"] .bio-tab:hover {
  background: #20242a;
  color: var(--ink);
}
:root[data-theme="dark"] .bio-tab.is-active {
  background: #3a3a3a;          /* same as bio cards */
  border-color: #505050;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.bio-tab.is-active {
  position: relative;
}

.bio-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--pink);
  opacity: 0.8;
}


/* BOTTOM: panels */
.bio-accordion-panels {
  position: relative;
}

.bio-panel {
  display: none;
  margin: 0;
}

/* Only the active one shows */
.bio-panel.is-open {
  display: block;
}

/* Keep the panel card style soft & high-end */
.bio-detail-card {
  background: var(--bg);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: none;
}
:root[data-theme="dark"] .bio-detail-card {
  background: #26272F;
}

/* Extra space at the bottom on the bio page
   so the grey pre-footer is not hidden behind the fixed footer */
.bio-page main {
  padding-bottom: calc(var(--footer-height) + 5px);
}

.bio-detail-card {
  background: #f2f2f2;
}

:root[data-theme="dark"] .bio-detail-card {
  background: #3a3a3a;
}

/* ========================================
   REFINED HERO CAROUSEL CONTROLS
   (smaller arrows + subtler dots)
======================================== */

/* Row that holds arrows + dots */
.hero-controls {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;     /* a bit tighter */
}

/* Arrows: smaller, outline, no heavy shadow */
.hero-controls .carousel-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 1.1rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.hero-controls .carousel-btn:hover {
  background: var(--card);
  color: var(--charcoal);
  border-color: var(--pink);
  transform: translateY(-1px);
}

:root[data-theme="dark"] .hero-controls .carousel-btn {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
:root[data-theme="dark"] .hero-controls .carousel-btn:hover {
  background: #26272F;
  color: var(--ink);
  border-color: var(--pink);
}

/* Dots: smaller + more discrete */
.hero-controls .hero-dots,
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
}

.hero-controls .hero-dots .dot,
.carousel-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.hero-controls .hero-dots .dot.active,
.carousel-dots .dot.active {
  opacity: 1;
  transform: scale(1.2);      /* subtle, not huge */
  background: var(--pink);
  border-color: var(--pink);
}

/* ========================================
   GALLERY PAGE
======================================== */



/* Intro hero for gallery */
/* Intro hero for gallery */
.gallery-hero {
  padding: 2.4rem 0 1.6rem;
  background:
    radial-gradient(900px 360px at 110% -20%, rgba(199,121,149,0.16), transparent 60%),
    linear-gradient(to bottom, #faf7fa 0%, #ffffff 55%, var(--bg) 100%);
  min-height: 220px; /* reserve space so the grid doesn’t jump */
}

:root[data-theme="dark"] .gallery-hero {
  background: #333333;
}

.gallery-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.gallery-hero-inner h1 {
  margin-bottom: 0.4rem;
}
.gallery-hero-inner p {
  max-width: 34rem;
}

/* small note card on the right */
.gallery-hero-note {
  max-width: 260px;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: var(--shadow);
}

/* Gallery section */
.gallery-section {
  padding: 1.5rem 0 3.2rem;
  background: var(--bg);
}

/* Grid of photos */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem;
}

/* Each photo card */
.gallery-item {
  background: var(--card);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
:root[data-theme="dark"] .gallery-item {
  box-shadow: var(--shadow);
}

/* Image wrapper for smooth crop */
.gallery-image-wrap {
  overflow: hidden;
  max-height: 230px;
}

/* Thumbnails */
.gallery-item img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
}

/* Hover effect – gentle zoom & brighten */
.gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.07);
}

/* Caption under image */
.gallery-item-caption {
  padding: 0.7rem 0.9rem 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Tiny accent dot next to caption text */
.gallery-item-caption span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to bottom, var(--pink), var(--pink-600));
  margin-right: 0.45rem;
}

/* Mobile spacing */
@media (max-width: 700px) {
  .gallery-hero {
    padding-top: 1.8rem;
  }
  .gallery-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .gallery-hero-note {
    max-width: 100%;
  }
}

.gallery-disclaimer-block {
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gallery-disclaimer-block .disclaimer-text {
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.gallery-intro {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

/* Pink underline under the gallery title */
.gallery-hero h1 {
  position: relative;
  padding-bottom: 0.4rem;
}

.gallery-hero h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
}


.hero-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}
/* BUTTON ANIMATION */
.hero-buttons a {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* When slide becomes active → animate buttons */
.hero-slide.is-active .hero-buttons a {
  opacity: 1;
  transform: translateY(0);
}

/* Slight stagger effect */
.hero-buttons a:nth-child(2) {
  transition-delay: 0.1s;
}


/* TEXT-ONLY CAROUSEL ARROWS */
.hero-controls .carousel-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 1.4rem;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Hover: subtle upscale + color */
.hero-controls .carousel-btn:hover {
  color: var(--pink);
  transform: translateY(-1px);
}

/* Dark mode */
:root[data-theme="dark"] .hero-controls .carousel-btn:hover {
  color: var(--pink);
}
/* MORE VISIBLE DOTS */
.hero-controls .hero-dots .dot,
.carousel-dots .dot {
  width: 7px;
  height: 7px;
  opacity: 0.75;                   /* stronger visibility */
  border-color: rgba(0,0,0,0.18);  /* slightly darker border in light mode */
}

/* Dark mode border adjustment */
:root[data-theme="dark"] .hero-controls .hero-dots .dot,
:root[data-theme="dark"] .carousel-dots .dot {
  border-color: rgba(255,255,255,0.35);
  opacity: 0.8;
}

/* Active dot: clearer + soft glow */
.hero-controls .hero-dots .dot.active,
.carousel-dots .dot.active {
  background: var(--pink);
  border-color: var(--pink);
  opacity: 1;
  transform: scale(1.35);          /* slightly bigger, not too much */
}

/* HERO MAP SLIDE — simple: panel 40%, map 60%, pin stays centered */
.hero-map-slide {
  position: relative;
  overflow: hidden;
}

/* Map layer behind everything */
.hero-map-slide .hero-map-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-map-slide .hero-map-bg iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* let the map auto-center and just fill the slide */
  object-fit: cover;
}


/* Text panel above map, a bit narrower so the marker is visible */
.hero-map-slide .hero-text {
  position: absolute;
  z-index: 1;
  width: 40%;
}

/* Hero map slide: make inner wrappers fill the full hero height */
.hero-map-slide .hero-map-bg {
  display: flex;
}

.hero-map-slide .home-map {
  flex: 1;
  height: 100%;        /* override clamp() */
  border-radius: 0;    /* no extra rounding inside the hero */
  box-shadow: none;    /* shadow comes from the hero, not the inner card */
}

.hero-map-slide .small-map-wrapper {
  height: 100%;
}

/* ========================================
   HERO MAP SLIDE – placeholder when cookies are off
======================================== */

/* HERO MAP SLIDE – placeholder when cookies are off */
.hero-map-slide .map-placeholder {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;

  background: transparent; /* ← important */
  text-align: center;
  z-index: 2;
}

.hero-map-slide .map-placeholder p {
  margin-bottom: 1rem;
}

/* Make the right-side map container behave like the hero background */
.hero-map-slide .home-map {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  height: 100% !important;
  border-radius: 0;
  overflow: hidden;
  z-index: 1;
}

.hero-map-slide .map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--card);
  z-index: 2;
}

/* Dark mode tweak so it matches the rest of the theme */
:root[data-theme="dark"] .hero-map-slide .map-placeholder {
  background: #3a3a3a;
  color: var(--ink);
}

@media (max-width: 1024px) {

  /* ...existing rules in this block... */

  .hero-map-slide .hero-text {
    position: static;
    order: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.3rem;
    box-shadow: var(--shadow);
    border-radius: 20px;
  }

  /* Map / placeholder card under the text */
  .hero-map-slide .hero-map-bg {
    position: relative;
    order: 2;
    inset: auto;
    width: 100%;
    max-width: 560px;
    height: 280px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--card);
  }

  .hero-map-slide .hero-map-bg iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }

  /* placeholder fills the card when cookies are off */
  .hero-map-slide .map-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 1.4rem 1.6rem;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  .hero-map-slide .hero-map-bg {
    height: 220px;
  }
}

/* BACK TO TOP BUTTON */
.back-to-top-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.back-to-top {
  margin: 0 auto;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* FLOATING BACK TO TOP BUTTON (bottom-right of prefooter) */
/* FLOATING BACK TO TOP BUTTON (aligned with column titles) */
.back-to-top-floating {
  position: absolute;
  right: 3%;
  top: 1.5rem;   /* ⬅ move it upward */
  z-index: 10;
}

.back-to-top-floating .back-to-top {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.35rem;
  font-size: 0.95rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, background 0.2s ease;
}

.back-to-top-floating .back-to-top:hover {
  background: var(--pink-600);
  transform: translateY(-2px);
}

/* Mobile: treat back-to-top like its own row inside the prefooter */
@media (max-width: 1100px) {
  .back-to-top-floating {
    position: static;        /* no absolute positioning */
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin-top: 1.2rem;
    text-align: center;      /* center the pill */
  }

  .back-to-top-floating .back-to-top {
    padding: 0.55rem 1.4rem;
    font-size: 0.9rem;
  }

  .back-to-top-link {
    font-size: 0.85rem;
  }
}



.site-overview{
  background: #696661;
  color: #fff;
  padding: 3rem 0;
  position: relative;  /* 👈 add this */
}

/* TEXT-STYLE BACK TO TOP LINK (same vibe as prefooter headings) */
.back-to-top-link {
  background: none;
  border: none;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  margin: 0;

  /* subtle hover like links in prefooter */
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.back-to-top-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* dark mode */
:root[data-theme="dark"] .back-to-top-link {
  color: var(--ink);
}

/* SOCIAL ICONS IN PREFOOTER */
.prefooter-social {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.prefooter-social a img {
  width: 30px;
  height: 30px;
  opacity: 0.85;
  filter: brightness(0) invert(1); /* white icons for grey background */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.prefooter-social a:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* Dark mode: invert icons so they stay visible */
:root[data-theme="dark"] .prefooter-social a img {
  filter: brightness(1) invert(0);
}



/* SHIFT ALL CONTENT SLIGHTLY LEFT (but keep safe) */
.site-overview .container {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding-left: 0; /* reset */
}




/* Column 3 stays as is */
/* Footer menu with expandable submenus */
.footer-has-sub {
  margin-bottom: 0.6rem;
}

.footer-sub-toggle {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.footer-sub-toggle:hover {
  text-decoration: underline;
}

/* this is ">" rotated downwards */
.footer-chevron {
  display: inline-block;
  font-size: 0.8rem;
  transform: rotate(90deg);         /* > pointing down */
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* when open, flip arrow up */
.footer-has-sub.is-open .footer-chevron {
  transform: rotate(-90deg);        /* > pointing up */
}

/* hidden submenu */
.footer-submenu {
  list-style: none;
  margin: 0.35rem 0 0.2rem 0;
  padding-left: 0.9rem;             /* small indent */
  display: none;
  font-size: 0.9rem;
}

/* show when open */
.footer-has-sub.is-open .footer-submenu {
  display: block;
}

.footer-submenu li {
  margin-bottom: 0.25rem;
}

/* ========================================
   SERVICE DETAIL PAGES
======================================== */

.service-detail-layout {
  max-width: 920px;
  margin: 0 auto;
}

.service-detail-header {
  text-align: center;
  margin-bottom: 2rem;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  background: #fce4ec;
  color: var(--charcoal);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.6rem;
}

:root[data-theme="dark"] .service-badge {
  background: rgba(199, 121, 149, 0.22);
}

.service-detail-header h1 {
  margin-bottom: 0.4rem;
}

.service-lead {
  margin: 0;
  max-width: 44rem;
  margin-inline: auto;
  color: var(--muted);
}

/* grid for the cards */
.service-detail-cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.service-card {
  position: relative;
  background: var(--card);
}

/* first card spans full width on desktop */
@media (min-width: 900px) {
  .service-detail-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-card.card--full {
    grid-column: 1 / -1;
  }
}

/* custom checklist bullets */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}

.service-list li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.4rem;
}

.service-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--pink);
}

/* ========================================
   SERVICE ARTICLE LAYOUT (laser-style)
======================================== */

.service-article {
  max-width: 860px;
  margin: 0 auto;
}

/* colored bar with the title */
.service-article-header {
  background: var(--pink);
  color: #fff;
  padding: 0.85rem 1.8rem;
  border-radius: 10px 10px 0 0;
  box-shadow: var(--shadow);
}

.service-article-header h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
}

.service-article-body {
  padding: 1.4rem 0 2rem;
  position: relative;
  margin-bottom: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* no vertical line now */
.service-article-body::before {
  content: none;
}


.service-intro {
  margin-bottom: 1.6rem;
  color: var(--muted);
}

/* sections inside the article */
.service-section + .service-section {
  margin-top: 1.8rem;
}

.service-section h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
  color: var(--charcoal);
  position: relative;
  padding-bottom: 0.25rem;
}

/* small colored underline under each heading */
.service-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  width: 70px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
}

/* prettier bullets in clinic color */
.service-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0.4rem 0 0;
}

.service-bullets li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.35rem;
}

.service-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--pink);
}

/* dark mode tweaks */
:root[data-theme="dark"] .service-article-header {
  background: var(--pink-600);
}

:root[data-theme="dark"] .service-article-body {
  background: var(--card);
}
/* Two-column layout: text left, sidebar right */
.service-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
  /* let the container handle centering – no hard shift */
  transform: none;
}


/* keep text column flexible */
.service-main {
  min-width: 0;
}

.service-sidebar-card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 1rem 1.1rem 1.3rem;
  box-shadow: var(--shadow);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 5.5rem;  /* 👈 tweak this number until it lines up nicely */
}


.service-sidebar-card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 0.6rem;
}

@media (max-width: 900px) {
  .service-layout {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    transform: none;              /* reset on small screens */
  }
  .service-sidebar {
    order: -1;
  }
}

/* square boxes for each text block */
.service-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0;           /* square corners */
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
  box-shadow: none;
}

/* headline strip also a bit squarer */
.service-article-header {
  border-radius: 0;
  margin-bottom: 0.8rem;
}
/* Pink soft titles for service boxes */
.service-box h2 {
  font-size: 1.25rem;
  font-weight: 400;                 /* light & elegant */
  color: var(--pink);               /* your clinic pink */
  margin: 0 0 0.4rem;
  position: relative;
  padding-bottom: 0.2rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

/* soft pink underline */
.service-box h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 38px;                     /* cute short underline */
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
}

.service-article-header {
  background: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 1.2rem;
}

.service-article-header h1 {
  color: var(--charcoal);
  padding-bottom: 0.4rem;
  position: relative;
}

.service-article-header h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
  border-radius: 10px;
}

@media (max-width: 900px) {
  .service-layout {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    transform: none;
  }
  .service-sidebar {
    order: -1;
  }
  .service-sidebar-card {
    margin-top: 0;   /* no offset on small screens */
  }
}


/* =========================
   SERVICES PAGE — FAQ STYLE
========================= */

.faq-box {
  border-radius: 0;                 /* square edges like service-box */
  padding: 1.6rem 1.8rem;
  background: var(--card);
  border: 1px solid var(--border);
}

/* Pink soft underline under FAQ title */
.faq-box h2 {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--pink);
  margin: 0 0 1.2rem;
  position: relative;
}

.faq-box h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 38px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
}

/* FAQ items */
.faq-item {
  padding: 0.6rem 0 1rem;
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.faq-a {
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* Dark mode */
:root[data-theme="dark"] .faq-box {
  background: var(--card);
  border-color: var(--border);
}

/* =========================
   SERVICES PAGE — FANCY FAQ
========================= */

.faq-box {
  border-radius: 0;                 /* same square vibe as service-box */
  padding: 1.6rem 1.8rem;
  background: var(--card);
  border: 1px solid var(--border);
}

/* Pink soft title like your service boxes */
.faq-box h2 {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--pink);
  margin: 0 0 1.2rem;
  position: relative;
  padding-bottom: 0.2rem;
}

.faq-box h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 38px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(to right, var(--pink), var(--pink-600));
}

/* Accordion shell */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Each FAQ row */
.faq-item {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.04);
  background: var(--card);
  padding: 0.3rem 0.6rem;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.faq-item:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

/* Question button */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: transparent;
  border: none;
  padding: 0.6rem 0.2rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--charcoal);
}

.faq-question-text {
  font-weight: 600;
  font-size: 0.98rem;
}

/* Chevron arrow */
.faq-chevron {
  display: inline-block;
  font-size: 0.9rem;
  transform: rotate(90deg);       /* > pointing down */
  transform-origin: center;
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--muted);
}

/* When open, flip arrow up */
.faq-item.is-open .faq-chevron {
  transform: rotate(-90deg);
  color: var(--pink-600);
}

/* Answer with smooth reveal */
.faq-answer {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.55;
  padding: 0 0.2rem 0.5rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 0.28s ease,
    opacity 0.24s ease,
    transform 0.24s ease;
}

/* open state */
.faq-item.is-open .faq-answer {
  max-height: 400px;              /* plenty for your text */
  opacity: 1;
  transform: translateY(0);
}

/* dark mode tweaks */
:root[data-theme="dark"] .faq-item {
  border-color: var(--border);
  background: var(--card);
}

:root[data-theme="dark"] .faq-answer {
  color: var(--ink);
}

/* ==============================
   CHAPTER PAGE – top nav row
   ============================== */

.chapter-page .chapter-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 1.5rem 1.5rem; /* top, sides, bottom */
}

/* left side: back to blog */
.chapter-page .chapter-breadcrumb-global {
  margin: 0;
  font-size: 0.95rem;
}

.chapter-page .chapter-breadcrumb-global a {
  color: var(--muted);
}

.chapter-page .chapter-breadcrumb-global a:hover {
  color: var(--charcoal);
  text-decoration: underline;
}

/* right side: next chapter */
.chapter-page .chapter-next-global {
  margin: 0;
  font-size: 0.95rem;
}

.chapter-page .chapter-next-global a {
  font-weight: 400;   /* or remove the line entirely */
  color: var(--muted);
}


.chapter-page .chapter-next-global a:hover {
  color: var(--pink);
  text-decoration: underline;
}

:root[data-theme="dark"] .service-article-header {
  background: transparent;
  color: var(--ink);
}

:root[data-theme="dark"] .service-article-header h1::after {
  background: linear-gradient(to right, var(--pink), var(--pink-600));
  opacity: 0.9;
}

/* =======================================
   FINAL — PRE-FOOTER GRID LAYOUT (CLEAN)
   ======================================= */

.site-overview-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.8fr)   /* doctor */
    minmax(0, 1.1fr)   /* menu */
    minmax(0, 1.4fr)   /* clinic hours */
    minmax(0, 1.4fr);  /* latest articles */
  column-gap: 1.3rem;
  align-items: flex-start;
}


@media (max-width: 900px) {
  .site-overview-grid {
    grid-template-columns: 1fr;
    column-gap: 1.4rem;
  }
}

/* Extra spacing between specific prefooter columns */
.site-overview-grid > :nth-child(1) {
  padding-right: 1.5rem;   /* space between col 1 → col 2 */
}

.site-overview-grid > :nth-child(2) {
  padding-left: 1.5rem;    /* smooths the transition */
}

.site-overview-grid > :nth-child(3) {
  padding-right: 1.5rem;   /* space between col 3 → col 4 */
}

.site-overview-grid > :nth-child(4) {
  padding-left: 1.5rem;    /* smooths the transition */
}

/* GLOBAL DARK-MODE ICONS (no bio here!) */
:root[data-theme="dark"] img.social-icon,
:root[data-theme="dark"] .prefooter-social img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.9;
}

:root[data-theme="dark"] img.social-icon:hover,
:root[data-theme="dark"] .prefooter-social img:hover {
  opacity: 1;
}

/* ========================================
   STEP 2 — LAPTOP (16:9) TUNING
   Keeps things comfy on 900–1366px width
======================================== */
@media (min-width: 900px) and (max-width: 1366px) {

  /* Hero text panel: slightly tighter on shorter screens */
  .hero-text {
    padding: 2.2rem 2.6rem;
  }

  /* Hero headings & copy a tiny bit more compact */
  .hero-text h1 {
    font-size: clamp(1.9rem, 2.6vw, 2.2rem);
  }
  .hero-text p {
    font-size: 0.95rem;
    max-width: 34rem;
  }

  /* Keep overall vertical rhythm a bit tighter */
  .hero-carousel-section {
    padding-bottom: 2.4rem;
  }

  .home-section {
    padding: 2.4rem 0;
  }

  .home-cta-strip {
    padding: 1.4rem 0;
    margin-top: 24px;
  }

  .site-overview {
    padding: 2.4rem 0;
  }

  /* Visit-us layout: card + map balance on smaller laptops */
  #visit-us .home-two-col-inner {
    gap: 1.6rem;
  }

  #visit-us .home-two-col-inner > div:first-child {
    max-width: 440px;
    padding: 1.6rem 1.9rem;
  }

  /* Map a bit taller on shorter screens so the frosted glass
     + map combo keeps the same "weight" as on a big monitor */
  .home-map {
    height: clamp(220px, 36vh, 320px);
  }
}

/* ========================================
   HERO CAROUSEL — PHONES + TABLETS (≤1024px)
   Works for iPad + mobile
======================================== */
@media (max-width: 1024px) {

  /* hero should grow with content – no fixed height */
  .hero-carousel {
    height: auto;
    min-height: 0;
    padding-bottom: 2rem;
  }

  /* slides auto-height too */
  .card-track,
  .card-track-inner,
  .hero-slide,
  .hero-carousel .card {
    height: auto;
  }

  /* stack text + photo vertically */
  .hero-slide.hero-split {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    background-position: center top;
  }

  /* text card in front, centered */
  .hero-text {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.2rem;
    padding: 1.9rem 2.1rem;
    border-radius: 20px;
    box-shadow: var(--shadow);
  }

  /* image card under the text */
  .hero-slide.hero-split .hero-photo {
    display: block;
    order: 2;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--card);
  }

  .hero-slide.hero-split .hero-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
  }

  /* Map slide: text on top, map block under it */
  .hero-map-slide {
    min-height: 0;
  }

  .hero-map-slide .hero-text {
    width: 100%;
    order: 1;
  }

  .hero-map-slide .hero-map-bg {
    position: relative;
    inset: auto;
    order: 2;
    height: 300px;
  }

  .hero-map-slide .hero-map-bg iframe {
    width: 100%;
    height: 100%;
  }

  /* Remove background photos on these sizes (we use inline .hero-photo instead) */
  .hero-slide {
    background: none !important;
    background-color: var(--bg);
  }
  :root[data-theme="dark"] .hero-slide {
    background: none !important;
    background-color: #2e2e2e;
  }
}

/* Smaller phones: slightly tighter paddings */
@media (max-width: 768px) {
  .hero-text {
    max-width: 480px;
    padding: 1.6rem 1.8rem;
  }

  .hero-slide.hero-split .hero-photo {
    max-width: 480px;
  }

  .hero-slide.hero-split .hero-photo img {
    max-height: 260px;
  }
}




/* =======================================
   MOBILE PRE-FOOTER (site-overview)
   ======================================= */
@media (max-width: 900px) {
  .site-overview {
    padding: 2.2rem 0 calc(3.4rem + var(--footer-height));
  }

  .site-overview-grid {
    grid-template-columns: 1fr;
    row-gap: 1.7rem;
  }

  /* just simple stacked columns – no card background */
  .site-overview-col {
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;   /* ← remove the card look */
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .site-overview-col:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .site-overview h2 {
    font-size: 0.9rem;
    margin-bottom: 0.55rem;
    letter-spacing: 0.14em;
  }

  .contact-list li,
  .footer-nav-list li {
    font-size: 0.9rem;
  }

  .prefooter-social {
    justify-content: flex-start;
    margin-top: 0.6rem;
  }

  .latest-list a {
    grid-template-columns: 48px 1fr;
    gap: 0.45rem;
  }

  .latest-thumb img {
    width: 48px;
    height: 48px;
  }

  .back-to-top-floating {
    margin-top: 1.4rem;
    margin-bottom: 0.4rem;
  }
}

/* =======================================
   MOBILE HEADER NAME FIX
   ======================================= */
@media (max-width: 700px) {

  /* make the logo + name group breathe */
  .brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 72%; /* keeps it from squeezing everything else */
  }

  /* make the name wrap cleaner */
  .brand .name {
    font-size: 0.75rem;         /* slightly smaller */
    line-height: 1.15;          /* tighter but readable */
    max-width: 100%;            /* allow wrapping */
    white-space: normal;        /* force wrap if needed */
  }

  /* optional: reduce logo size so the whole header stops feeling cramped */
  .logo-img {
    width: 32px;
    height: auto;
  }

  /* tighten spacing on header row */
  .header-inner {
    gap: 0.4rem;
  }

  /* tidy up the language switch */
  .header-lang {
    font-size: 0.75rem;
    margin-left: auto;          /* keep it right-aligned */
  }

  /* mobile burger button slightly smaller */
  .nav-toggle {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* =======================================
   MOBILE HEADER: LOGO ON TOP, NAME UNDER
   ======================================= */
@media (max-width: 700px) {

  /* Make the header items stack better */
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "logo . lang"
      "name name menu";
    align-items: center;
    row-gap: 0.3rem;
    column-gap: 0.4rem;
    padding: 0.4rem 0.6rem;
  }

  /* Logo */
  .brand {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .logo-img {
    width: 38px;
    height: auto;
  }

  /* Move the name below the logo */
  .brand .name {
    grid-area: name;
    display: block;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
    margin-top: 0.1rem;
  }

  /* Language toggle stays top-right */
  .header-lang {
    grid-area: lang;
    font-size: 0.8rem;
    margin-left: auto;
    padding-left: 0.3rem;
  }

  /* Menu button aligned near language toggle */
  .nav-toggle {
    grid-area: menu;
    justify-self: end;
    width: 33px;
    height: 33px;
    font-size: 1rem;
    border-radius: 50%;
  }

}

/* MOBILE NAV = ACCORDION, LIKE FOOTER */
@media (max-width: 880px) {

  /* Each nav item with sub behaves like a block accordion */
  .nav-item-with-sub {
    display: block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: transparent;
    margin-top: 0.35rem;
  }

  /* Header row (title + chevron) */
  .nav-item-with-sub > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    font-weight: 600;
  }

  .nav-sub-toggle {
    margin-left: 0.5rem;
  }

  /* When open, give header a soft background */
  .nav-item-with-sub.is-open > a {
    background: rgba(0, 0, 0, 0.04);
  }
  :root[data-theme="dark"] .nav-item-with-sub.is-open > a {
    background: rgba(255, 255, 255, 0.06);
  }

  /* Submenu sits INSIDE the flow, pushes items below down */
  .submenu {
    position: static;          /* no absolute positioning */
    display: none;             /* closed by default */
    width: 100%;
    margin: 0.1rem 0 0.5rem;
    padding: 0.2rem 0.8rem 0.4rem;
    border-radius: 0 0 10px 10px;
    border-top: 1px solid var(--border);
    box-shadow: none;
  }

  .submenu a {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.9rem;
  }

  /* Open state – like footer .footer-has-sub.is-open .footer-submenu */
  .nav-item-with-sub.is-open .submenu {
    display: block;
  }
}

/* CONTACT PAGE LAYOUT */
.contact-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.2fr 1fr;  /* form bigger than map on desktop */
}

/* Stack on phones so the map isn't squished */
@media (max-width: 800px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  /* optional: small gap between form and map on mobile */
  .contact-layout > .card + .card,
  .contact-layout > section.card + aside.card {
    margin-top: 0.5rem;
  }
}

/* ========================================
   CONTACT PAGE LAYOUT
======================================== */
.contact-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); /* form bigger than map */
  align-items: flex-start;
}

/* Tablets + phones: stack vertically so nothing gets squished */
@media (max-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

.contact-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch; /* ← makes both equal height */
}

.contact-layout > * {
  height: 100%;       /* ensure both cards fill the row height */
}

.contact-hours {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
  color: var(--muted);
}
.contact-hours li {
  margin-bottom: 0.25rem;
}

.clinic-hours {
  margin: 0.75rem 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #f5f5f7;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.clinic-hours-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.clinic-hours-line span {
  font-weight: 600;
}

/* Dark mode version */
:root[data-theme="dark"] .clinic-hours {
  background: #3a3a3a;
  border-color: #505050;
  color: var(--ink);
}

:root[data-theme="dark"] .clinic-hours-label {
  color: var(--ink);
}
.clinic-hours {
  margin: 0.75rem 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #f5f5f7;
  border: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.clinic-hours-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.clinic-hours-line span {
  font-weight: 600;
}

/* Dark mode version */
:root[data-theme="dark"] .clinic-hours {
  background: #3a3a3a;
  border-color: #505050;
  color: var(--ink);
}

:root[data-theme="dark"] .clinic-hours-label {
  color: var(--ink);
}


/* ==== FIX CHAPTER DARK MODE TEXT BACKGROUND ==== */
:root[data-theme="dark"] .chapter-shell,
:root[data-theme="dark"] .chapter-shell .card,
:root[data-theme="dark"] .chapter-shell p,
:root[data-theme="dark"] .chapter-shell li,
:root[data-theme="dark"] .chapter-shell ul {
    background: #3a3a3a !important;   /* your neutral grey */
    color: var(--ink) !important;      /* keep text readable */
}

/* Remove any leftover bluish tones in chapter cards */
:root[data-theme="dark"] .chapter-shell {
    border-color: #505050 !important;
}

/* --- Dark Mode: Make dropdown menus match grey theme --- */
:root[data-theme="dark"] .submenu {
    background: #3a3a3a !important;     /* soft grey */
    border: 1px solid #505050 !important;
}

:root[data-theme="dark"] .submenu a {
    color: var(--ink) !important;       /* keep text bright */
}

/* Hover state */
:root[data-theme="dark"] .submenu a:hover {
    background: #444 !important;        /* lighter grey */
    color: var(--ink) !important;
}

/* Divider lines inside submenu */
:root[data-theme="dark"] .submenu a + a {
    border-top: 1px solid #505050 !important;
}

/* ==== REMOVE BLUE-BLACK FROM BIO PAGE (dark mode) ==== */
:root[data-theme="dark"] .bio-section {
    background: #2e2e2e !important;   /* flat neutral dark grey */
}

/* Main left card */
:root[data-theme="dark"] .bio-text {
    background: #3a3a3a !important;   /* same grey as the rest of your theme */
    border-color: #505050 !important;
}

/* Right photo card */
:root[data-theme="dark"] .bio-photo-inner {
    background: #3a3a3a !important;
    border-color: #505050 !important;
}

/* BLOG CATEGORY TOGGLE */
.category-toggle {
  display: flex;
  gap: 0.8rem;
  margin: 1.4rem 0 0.6rem;
  flex-wrap: wrap;
}

.toggle-btn {
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, transform 0.2s ease;
}

.toggle-btn:hover {
  background: #f1f1f4;
  color: var(--charcoal);
  transform: translateY(-1px);
}

/* Active pill = soft pink, same as screenshot */
.toggle-btn.active {
  background: #fce4ec;
  border-color: var(--pink);
  color: var(--charcoal);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

/* Dark mode versions */
:root[data-theme="dark"] .toggle-btn {
  background: #26272F;
  border-color: var(--border);
  color: var(--muted);
}

:root[data-theme="dark"] .toggle-btn:hover {
  background: #20242a;
  color: var(--ink);
}

:root[data-theme="dark"] .toggle-btn.active {
  background: rgba(199,121,149,0.16);
  border-color: var(--pink);
  color: var(--ink);
}

/* On small screens, make footer non-sticky */
@media (max-width: 700px) {
  .footer {
    position: static;
    margin-top: 1.5rem;
  }

  /* remove extra padding we added to make space for the fixed footer */
  main {
    padding-bottom: 0;
  }

  /* cookie banner sits on the real bottom now, not above a fake footer height */
  .cc-banner {
    bottom: 0;
  }
}


.pink-link {
  color: palevioletred;
}

/* Only the big portrait photo gets a shadow */
.bio-photo-inner > img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.service-layout {
    align-items: start;
}

.service-sidebar {
    margin-top: 0;
    padding-top: 0;
}


/* ========================================
   MAP SLIDE FIX — PHONES + TABLETS
   (last hero slide)
======================================== */
@media (max-width: 1024px) {

  /* Let the slide size itself by content */
  .hero-map-slide {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    overflow: visible;
  }

  /* Text block on top, full width */
  .hero-map-slide .hero-text {
    position: static;
    order: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 1.3rem;
    box-shadow: var(--shadow);
    border-radius: 20px;
  }

  /* Map becomes a card under the text */
  .hero-map-slide .hero-map-bg {
    position: relative;
    order: 2;
    inset: auto;
    width: 100%;
    max-width: 560px;
    height: 280px;           /* tablet default */
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .hero-map-slide .hero-map-bg iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
  }
}

/* Smaller phones: a bit shorter map */
@media (max-width: 768px) {
  .hero-map-slide .hero-map-bg {
    height: 220px;
  }
}

/* Small map placeholder layout */
.small-map-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.small-map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Placeholder covers the small map */
.small-map-wrapper .map-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.4rem 1.6rem;
  background: var(--card);
  border-radius: inherit;
  z-index: 2;
}

/* Button matches the pink theme */
.small-map-wrapper .map-placeholder .btn {
  background: var(--pink);
  color: #fff;
}
.small-map-wrapper .map-placeholder .btn:hover {
  background: var(--pink-hover);
}

/* ========================================
   FINAL MOBILE NAV FIX
======================================== */
@media (max-width: 880px) {
  .header-inner {
    position: relative;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.8rem 1rem 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
    z-index: 999;
  }

  .nav.is-open {
    display: flex;
  }

  .nav > a,
  .nav > .nav-item-with-sub > a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.7rem 0;
    border-radius: 8px;
  }

  .nav-item-with-sub {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
  }

  .nav-item-with-sub > a {
    justify-content: space-between;
  }

  .nav-sub-toggle {
    margin-left: auto;
    padding: 0.25rem 0.35rem;
  }

  .submenu {
    position: static;
    display: none;
    width: 100%;
    margin: 0.15rem 0 0.5rem;
    padding: 0.25rem 0.8rem 0.45rem;
    min-width: 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-item-with-sub.is-open .submenu {
    display: block;
  }

  .submenu a {
    display: block;
    padding: 0.45rem 0;
    white-space: normal;
  }

  .submenu a + a {
    border-top: none;
  }
}

/* FINAL MOBILE FIX — theme button always visible above mobile browser UI */
@media (max-width: 768px) {
  .footer-theme-toggle {
    position: fixed;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--card) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    z-index: 10001;
  }

  .footer-theme-toggle #themeIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    opacity: 1;
    visibility: visible;
  }
}