/* =========================================================================
   MODERN UI LAYER — buttons & typography
   -------------------------------------------------------------------------
   Loaded AFTER each page's own stylesheet on every page in /html.
   It does not redefine any brand colors — it layers elevation, motion,
   and focus states on top of whatever button classes already exist
   (.btn-fill, .cta-btn, .app-btn-primary, .btn-outline, etc.), and
   applies the landing page's Playfair Display / Nunito Sans pairing
   consistently across every page.
   ========================================================================= */

/* ---------- Typography ---------- */

:root {
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Nunito Sans", Arial, sans-serif;
  --brand-heading-font: var(--font-display);
  --brand-body-font: var(--font-body);
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  font-feature-settings: "liga" 1, "kern" 1;
}

p, li, td, th, label, input, select, textarea, button, .btn, [class*="btn"] {
  font-family: var(--font-body);
}

/* Slightly crisper tracking on brand/nav wordmarks */
.navbar-brand, .brand-name, .logo-text, .brand-text {
  letter-spacing: 0.015em;
}

/* Buttons read a touch more confident with a hair of letter-spacing
   and consistent font-weight, regardless of which button class is used */
button, .btn, [class*="btn"], input[type="submit"], input[type="button"] {
  letter-spacing: 0.01em;
  font-weight: 600;
}

/* ---------- Buttons: elevation + motion + focus layer ---------- */

button,
.btn,
[class*="btn"],
input[type="submit"],
input[type="button"] {
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.18s ease !important;
}

button:not(:disabled):not(.btn-disabled):hover,
.btn:not(:disabled):not(.btn-disabled):hover,
[class*="btn"]:not(:disabled):not(.btn-disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="button"]:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px -10px rgba(20, 35, 26, 0.45) !important;
  filter: brightness(1.03);
}

button:not(:disabled):not(.btn-disabled):active,
.btn:not(:disabled):not(.btn-disabled):active,
[class*="btn"]:not(:disabled):not(.btn-disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: 0 4px 10px -6px rgba(20, 35, 26, 0.35) !important;
  filter: brightness(0.98);
  transition-duration: 0.08s !important;
}

.filter-group.btn-group:hover:not(:disabled):not(.btn-disabled),
.filter-group.btn-group:active:not(:disabled):not(.btn-disabled) {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Accessible, brand-tinted focus ring instead of the default browser outline */
button:focus-visible,
.btn:focus-visible,
[class*="btn"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.75),
    0 0 0 5px var(--forest, var(--brand-primary, #2f7a50)) !important;
}

/* Small circular / icon-only controls (avatars, close buttons, calendar
   nav arrows, toggles) get a pop-and-shrink instead of a directional lift,
   since a translateY reads oddly on a tiny round target */
.btn-avatar:hover, .avatar-btn:hover, .icon-btn:hover,
.cal-nav-btn:hover, .modal-close-btn:hover, .toggle-btn:hover,
.btn-close:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 18px -8px rgba(20, 35, 26, 0.45) !important;
}
.btn-avatar:active, .avatar-btn:active, .icon-btn:active,
.cal-nav-btn:active, .modal-close-btn:active, .toggle-btn:active,
.btn-close:active {
  transform: scale(0.92) !important;
}

/* Disabled buttons stay flat and clearly non-interactive */
button:disabled, .btn:disabled, .btn-disabled, [class*="btn"]:disabled {
  cursor: not-allowed;
  filter: grayscale(0.2) opacity(0.65);
  transform: none !important;
  box-shadow: none !important;
}

/* === Nav icons: Patient, Doctor, Nurse & Admin navbars ===
   Desktop: .site-nav .nav-link becomes an icon-only button with a
   hover/focus tooltip (data-tooltip) below it, like a dock icon.
   Mobile (.nav-open, toggled only by the hamburger button): reverts
   to icon + visible label side by side, no tooltip. */
.nav-icon { display: inline-flex; width: 16px; height: 16px; line-height: 0; }
.nav-icon svg { width: 100%; height: 100%; }

/* Account dropdown (Profile / Log Out): icon inline before the label */
.dropdown-item { display: flex; align-items: center; gap: 8px; }
.dropdown-item .nav-icon { opacity: 0.75; }

/* -- Desktop: icon-only buttons -- */
.site-nav .nav-link {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition:
    background-color .15s ease,
    color .15s ease,
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Float on hover + press-down on click, same feel as the other buttons.
   Desktop only: the open mobile menu keeps its flat row layout. */
.site-nav:not(.nav-open) .nav-link:hover,
.site-nav:not(.nav-open) .nav-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(20, 35, 26, 0.45);
}
.site-nav:not(.nav-open) .nav-link:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 4px 10px -6px rgba(20, 35, 26, 0.35);
  transition-duration: 0.08s;
}
.site-nav .nav-link .nav-label {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.site-nav .nav-link .nav-icon { width: 20px; height: 20px; opacity: 1; }
.site-nav .nav-link:hover { background: var(--paper-soft, #eef1ec); color: var(--leaf-dark); }
.site-nav .nav-link.active { background: var(--forest); color: #fff; }
.site-nav .nav-link.active::after { display: none; }

/* Tooltip, shown on hover/focus, positioned under the icon */
.site-nav .nav-link::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 2px);
  background: var(--ink, #1c1f1c);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 80;
  margin-top: 8px;
}
.site-nav .nav-link:hover::before,
.site-nav .nav-link:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 6px);
}

/* -- Mobile menu open: back to icon + label row, no tooltip -- */
.site-nav.nav-open .nav-link,
.site-nav.nav-open .dropdown-item {
  width: auto;
  height: auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 0;
  background: transparent !important;
  color: inherit;
}
.site-nav.nav-open .nav-link .nav-label {
  position: static; width: auto; height: auto; margin: 0; padding: 0;
  overflow: visible; clip: auto; white-space: nowrap;
}
.site-nav.nav-open .nav-link .nav-icon,
.site-nav.nav-open .dropdown-item .nav-icon {
  width: 19px;
  height: 19px;
  opacity: 0.75;
}
.site-nav.nav-open .nav-link.active .nav-icon,
.site-nav.nav-open .nav-link:hover .nav-icon { opacity: 1; }
.site-nav.nav-open .nav-link.active::after {
  display: block;
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 0; height: 2px;
  background-color: var(--sage); border-radius: 2px;
}
.site-nav.nav-open .nav-link::before { content: none; display: none; }

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  button, .btn, [class*="btn"], input[type="submit"], input[type="button"] {
    transition: none !important;
  }
  button:hover, .btn:hover, [class*="btn"]:hover,
  button:active, .btn:active, [class*="btn"]:active {
    transform: none !important;
  }
  .site-nav .nav-link { transition: none; }
  .site-nav:not(.nav-open) .nav-link:hover,
  .site-nav:not(.nav-open) .nav-link:focus-visible,
  .site-nav:not(.nav-open) .nav-link:active {
    transform: none;
  }
}

.clinic-footer {
  background: #132A1B;
  color: #cfe0d6;
}

.clinic-footer .footer-logo-wrap img {
  width: 32px;
  height: 32px;
}

.clinic-footer .footer-brand {
  color: #fff;
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
}

.clinic-footer .footer-description {
  max-width: 22rem;
  font-size: 0.9rem;
}

.clinic-footer h5 {
  margin-bottom: 0.8rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.clinic-footer a {
  display: block;
  margin-bottom: 0.4rem;
  color: #cfe0d6;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.clinic-footer a:hover { color: #fff; }

.clinic-footer .text-light-green {
  color: #9fb3a8;
  font-size: 0.85rem;
}

.clinic-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #9fb3a8;
  font-size: 0.8rem;
}