/* ===================================================================== */
/* 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: 1.35rem; }
.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;
}
.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; }

.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; }