/* ===================================================================== */
/* Advanced Lymphatics — soft teal theme                                  */
/* Calm sea-glass teal headings, cool off-white palette, elegant.         */
/* ===================================================================== */

:root {
  --teal: #4f9a94;        /* headings / accent */
  --teal-deep: #357c77;   /* hover / strong */
  --teal-soft: #7da9a6;   /* eyebrow labels */
  --cream: #f3f8f7;       /* page background (cool off-white) */
  --card: #ffffff;
  --ink: #3c4745;         /* body text */
  --muted: #7c8b89;
  --line: #dde9e7;
}

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

html { position: relative; min-height: 100%; }
body {
  margin-bottom: 60px;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Mulish', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.65;
}

h1, h2, h3, h4, .navbar-brand span, .display-4, .display-5, .display-6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--teal);
  font-weight: 600;
  letter-spacing: .2px;
}
h1, .display-5, .display-6 { line-height: 1.15; }

a { color: var(--teal-deep); }
a:hover { color: var(--teal); }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(79,154,148,.5);
}

/* Eyebrow / section label, e.g. "WHAT WE OFFER AT ADVANCED LYMPHATICS" */
.eyebrow {
  font-family: 'Mulish', sans-serif;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  font-size: .82rem;
  color: var(--teal-soft);
}

/* ---- Buttons -------------------------------------------------------- */
.btn-primary { background-color: var(--teal); border-color: var(--teal); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--teal-deep); border-color: var(--teal-deep); }
.btn-outline-primary { color: var(--teal-deep); border-color: var(--teal); }
.btn-outline-primary:hover { background-color: var(--teal); border-color: var(--teal); color: #fff; }
.btn-success { background-color: #7f9c79; border-color: #7f9c79; }

/* ---- Header / nav --------------------------------------------------- */
.navbar { background: rgba(243,248,247,.96) !important; border-bottom: 1px solid var(--line); box-shadow: none !important; }
.navbar .nav-link { color: var(--ink) !important; letter-spacing: .02em; white-space: nowrap; }
/* Beat Bootstrap's .navbar-expand-sm .navbar-nav .nav-link (same specificity, loaded later)
   so the links pack tight enough to stay on one row alongside the Account menu. */
.navbar .navbar-nav .nav-link { padding-left: .35rem; padding-right: .35rem; }
.navbar .nav-link:hover { color: var(--teal) !important; }
.navbar-brand span { font-size: 1.15rem; color: var(--teal); }
/* Many links once the owner is signed in (admin links + greeting + logout):
   keep each label on one line, and let the row wrap neatly instead of clipping. */
@media (min-width: 576px) {
  .navbar-nav { flex-wrap: wrap; row-gap: .1rem; align-items: center; }
}

/* ---- Hero (two-column: photo + panel, as on advancedlymph.com) ------ */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: #f1f4f3;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.hero-split-photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; }
.hero-split-panel {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 2.75rem 2.25rem;
}
.hero-split-panel h1 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); margin-bottom: .4rem; }
.hero-locations { margin: 0 0 1.4rem; font-size: 1.05rem; font-weight: 500; color: var(--teal-deep); }
.hero-benefits {
  list-style: disc; text-align: left; color: var(--ink);
  margin: 0 auto 1.6rem; padding-left: 1.25rem; font-weight: 500;
}
.hero-benefits li { margin-bottom: .4rem; }
@media (max-width: 767.98px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-photo img { min-height: 240px; max-height: 300px; }
  .hero-split-panel { padding: 2rem 1.5rem; }
}

/* ---- Photo gallery (e.g. About / the pups) ------------------------- */
.gallery img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1;
  border-radius: 12px; box-shadow: 0 2px 8px rgba(53,124,119,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gallery img:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(53,124,119,.2); }
.benefit {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem .5rem; font-weight: 500; color: var(--teal-deep);
  height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
}
.feature h3 { font-size: 1.15rem; }

/* ---- Cards ---------------------------------------------------------- */
.service-card, .project-card, .note-card, .appt-card, .choice-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem;
}
/* Soft teal tint for the customer-facing service & booking cards (admin cards stay white). */
.service-card, .choice-card { background: #e6f3ef; border-color: #cde6e0; }
.service-card .price { font-weight: 600; color: var(--teal-deep); white-space: nowrap; }
.choice-card { display: block; text-decoration: none; color: inherit; transition: box-shadow .12s ease, border-color .12s ease; }
.choice-card:hover { box-shadow: 0 6px 18px rgba(53,124,119,.16); border-color: var(--teal); }

/* ---- Footer --------------------------------------------------------- */
.footer { background: #e6f1ef; border-top: 1px solid var(--line); padding: 1.25rem 0; }
.footer, .footer a { color: var(--muted); }

/* ---- Booking calendar ---------------------------------------------- */
table.cal { border-collapse: separate; border-spacing: 4px; width: 100%; max-width: 520px; }
table.cal th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--teal-soft); font-weight: 600; padding: .2rem; text-align: center; }
table.cal td { width: 14.28%; height: 2.6rem; text-align: center; vertical-align: middle; border-radius: 8px; }
table.cal td.empty { background: transparent; }
table.cal td.closed { background: #e8f0ef; color: #b6c8c5; }
table.cal td.open { background: #e1efed; }
table.cal td.open a { display: block; height: 100%; line-height: 2.6rem; text-decoration: none; color: var(--teal-deep); font-weight: 600; }
table.cal td.open:hover { background: var(--teal); }
table.cal td.open:hover a { color: #fff; }
table.cal td.sel { outline: 2px solid var(--teal); }
table.cal td .dots { display: flex; gap: 2px; justify-content: center; height: 6px; margin-top: -6px; }
table.cal td .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

.slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot { border: 1px solid var(--teal); color: var(--teal-deep); border-radius: 8px; padding: .4rem .8rem; text-decoration: none; }
.slot:hover, .slot.sel { background: var(--teal); color: #fff; }
.slot.busy { border-color: var(--line); color: var(--muted); background: #eef3f2; text-decoration: line-through; cursor: not-allowed; }
.slot.busy:hover { background: #eef3f2; color: var(--muted); }

.appt-card { margin-bottom: .75rem; }
.appt-actions summary { list-style: none; cursor: pointer; }
.appt-actions summary::-webkit-details-marker { display: none; }
.suggest-form input, .suggest-form button { margin: .15rem .15rem 0 0; }
.status-pill { font-size: .7rem; color: #fff; border-radius: 10px; padding: .05rem .55rem; white-space: nowrap; }

.badge { background: var(--teal); color: #fff; font-weight: 500; margin: 0 .15rem .3rem 0; }

.learn-more {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.learn-more:hover { border-bottom-color: transparent; }

/* "What We Offer" zig-zag: every service image renders at the same size
   regardless of the source file's dimensions (cover crops to fill). */
.offer-row { margin-top: 2.5rem; }
.offer-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Pre & post treatment photo slots — floated beside the copy, uniform size. */
.prepost-img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Full-page background image — a fixed layer behind the whole page, owner-set per
   page (see _Layout), with adjustable fade (opacity) and zoom (scale). Sits over the
   default cream so a faded or zoomed-out image blends into the page colour. */
/* Whole-page placement: a fixed layer behind everything (stays put on scroll). */
.page-bg--full { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--cream); }
/* Behind-the-text placement: a layer confined to the content panel that scrolls with
   the text (no fixed "floating"). The panel gains padding + rounded corners. */
.page-canvas--box { position: relative; padding: 1.75rem; border-radius: 14px; overflow: hidden; }
@media (max-width: 575.98px) { .page-canvas--box { padding: 1rem; } }
.page-bg--box { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--cream); }
.page-canvas--box .page-canvas-inner { position: relative; z-index: 1; }
.page-bg-img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
.page-bg-uploader { margin: .5rem 0 1rem; }
.page-bg-thumb { max-width: 240px; height: auto; }
.page-bg-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.page-bg-slider { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; }
.page-bg-slider select { font-size: .85rem; padding: 1px 4px; }

/* Optional full-width banner slot at the top of the Services page. */
.services-banner { width: 100%; height: 240px; object-fit: cover; }

/* Foot-of-page back-to-top link (see _BottomCta). */
.back-to-top { color: var(--muted); text-decoration: none; font-size: .9rem; }
.back-to-top:hover { color: var(--teal-deep); }

/* Optional per-service thumbnail on the pricing cards — uniform size, card-width. */
/* Small, classy per-service thumbnail with a teal ring. */
.service-img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 2px solid var(--teal-soft); box-shadow: 0 2px 6px rgba(53,124,119,.14); margin: 0 0 .75rem; }
.service-img-empty { color: var(--muted); font-size: .8rem; }

.columns-list { columns: 2; column-gap: 2.5rem; padding-left: 1.2rem; }
@media (min-width: 768px) { .columns-list { columns: 3; } }
.columns-list li { margin-bottom: .3rem; break-inside: avoid; }

.lead-rose { color: var(--teal-deep); }
blockquote.aquarium { border-left: 3px solid var(--teal); padding: .25rem 0 .25rem 1rem; margin: 1rem 0; color: var(--teal-deep); font-style: italic; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--muted); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

/* ---- Testimonials (home page, horizontal scroll) -------------------- */
.testimonials { margin-bottom: 1rem; }
/* Horizontal strip: each card snaps into view as you scroll/swipe. */
.testimonial-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: .5rem .25rem 1.25rem;
  scrollbar-color: var(--teal-soft) transparent;
}
.testimonial-scroll::-webkit-scrollbar { height: 8px; }
.testimonial-scroll::-webkit-scrollbar-track { background: transparent; }
.testimonial-scroll::-webkit-scrollbar-thumb { background: var(--teal-soft); border-radius: 8px; }
.testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 300px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  /* Light grey → soft teal wash, matching the page palette. */
  background: linear-gradient(160deg, #eef3f2 0%, #e3eeec 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  padding: 1.5rem 1.35rem;
  box-shadow: 0 2px 10px rgba(53,124,119,.08);
  margin: 0;
}
.testimonial-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  position: relative;
  white-space: pre-line;
}
.testimonial-quote::before {
  content: "\201C";
  font-size: 2.2rem;
  line-height: 0;
  color: var(--teal-soft);
  vertical-align: -.35em;
  margin-right: .1rem;
}
.testimonial-author {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--teal-deep);
  font-size: .9rem;
}
@media (max-width: 575.98px) {
  .testimonial-card { flex-basis: 82%; max-width: 82%; }
}