/* Clue Dental header and slide-out menu (Lane A).
   Adapted from ../complete_template_2026/src/css/modern-header-modern.css (the
   modern header and its right-hand slide menu). Kept: the sticky header, the
   template's header and slide-menu class names, the closed menu and overlay at
   visibility: hidden, the reduced-motion and print rules. Dropped: the top
   contact bar, scroll-collapse states, the transparent homepage header, the
   accordion submenus and mega menu, the search overlay, the hero rules, the
   social buttons and RTL. Bootstrap is not loaded; colors, sizes and spacing
   come from tokens.css. See docs/template-imports.md. */

/* ── Header ────────────────────────────────────────────────────────────── */
.main-header {
  position: sticky;
  top: 0;
  z-index: var(--cd-z-header);
  height: var(--cd-header-h);
  background-color: var(--cd-surface);
  border-bottom: 1px solid var(--cd-line);
}

/* The bar spans the whole window (Dan: logo all the way left, Request
   Information all the way right), inset by the header gutter. The nav stays
   centered in the window because the grid's outer columns are equal. */
.cd-header-bar {
  height: 100%;
  padding-inline: var(--cd-header-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-space-3);
}

/* ── Desktop nav (56em and up): links centered between the logo and the
   button, as in the wireframe. Below 56em it is hidden and the slide-out
   menu carries the same links. ──────────────────────────────────────── */
.cd-header-nav { display: none; }

@media (min-width: 56em) {
  .cd-header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;          /* logo, links and button share one center line */
    gap: var(--cd-space-5);
  }
  .cd-brand { justify-self: start; }
  .header-right-controls { justify-self: end; }
  .cd-header-nav { display: flex; align-items: center; }
  .cd-header-nav ul {
    display: flex;
    align-items: center;
    gap: var(--cd-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cd-header-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--cd-space-3);
    border-radius: var(--cd-radius-control);
    color: var(--cd-ink);
    font-size: var(--cd-text-base);
    font-weight: var(--cd-weight-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--cd-duration-fast) var(--cd-ease-out), background-color var(--cd-duration-fast) var(--cd-ease-out);
  }
  /* Hover: a pale aqua tint behind the link (--cd-teal-strong on it is 6.75:1). */
  .cd-header-nav a:hover {
    background-color: var(--cd-hover-tint);
    color: var(--cd-teal-strong);
  }
  /* The current page: teal and underlined, so it is not shown by color alone. */
  .cd-header-nav a[aria-current="page"] {
    color: var(--cd-teal);
    font-weight: var(--cd-weight-semibold);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
  }
}

.cd-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  padding-block: var(--cd-space-1);
  border-radius: var(--cd-radius-sm);
}

.header-logo {
  width: auto;
  height: 2rem;
  max-width: 100%;
}

.header-right-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--cd-space-2);
}

/* The one action stays in the header at every width. */
/* At the 19px bold large-text label the button crowds the header (it wraps at
   900px and squeezes the logo at 390), so the header's button keeps its small
   label on the darker fill, --cd-button-compact (#008092, 4.66:1 under white). */
.cd-header-action {
  font-size: var(--cd-text-sm);
  font-weight: var(--cd-weight-semibold);
  padding: 0.5em 1.125em;
  background: var(--cd-button-compact);
  border-color: var(--cd-button-compact);
}
.cd-header-action:hover {
  background: var(--cd-button-compact-hover);
  border-color: var(--cd-button-compact-hover);
}

.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: var(--cd-radius-sm);
  background: none;
  color: var(--cd-ink);
  cursor: pointer;
  transition: background-color var(--cd-duration-fast) var(--cd-ease-out), color var(--cd-duration-fast) var(--cd-ease-out);
}
.header-icon-btn:hover {
  background-color: var(--cd-teal-soft);
  color: var(--cd-teal-strong);
}
.header-icon-btn svg { width: 1.5rem; height: 1.5rem; }

/* Narrow phones: a smaller wordmark, and the action may break onto two lines. */
@media (max-width: 30em) {
  .header-logo { height: 1.625rem; }
  .cd-header-action { font-size: var(--cd-text-xs); padding: 0.4em 0.9em; }
}
@media (max-width: 23.75em) {
  .cd-header-bar { gap: var(--cd-space-2); }
  .header-right-controls { gap: var(--cd-space-1); }
  .cd-header-action { max-width: 7.5rem; white-space: normal; line-height: 1.15; }
}

/* ── Slide-out menu (right side, every width) ──────────────────────────── */
.slide-menu {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  z-index: var(--cd-z-menu);
  width: 25rem;
  max-width: 90vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--cd-surface);
  box-shadow: var(--cd-shadow-menu);
  transform: translateX(100%);
  visibility: hidden;
  /* Closing: slide out, then hide (the delay keeps it visible while it moves). */
  transition: transform var(--cd-duration) var(--cd-ease), visibility 0s linear var(--cd-duration);
}
.slide-menu.active {
  transform: translateX(0);
  visibility: visible;
  /* Opening: visible at once, so focus can move into it immediately. */
  transition: transform var(--cd-duration) var(--cd-ease), visibility 0s linear 0s;
}

.slide-menu-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--cd-header-h);
  padding: var(--cd-space-2) var(--cd-space-4) var(--cd-space-2) var(--cd-space-5);
  border-bottom: 1px solid var(--cd-line);
}

.slide-menu-title {
  font-size: var(--cd-text-lg);
  font-weight: var(--cd-weight-semibold);
  color: var(--cd-ink);
}

.slide-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: var(--cd-radius-sm);
  background: none;
  color: var(--cd-ink);
  cursor: pointer;
  transition: background-color var(--cd-duration-fast) var(--cd-ease-out), color var(--cd-duration-fast) var(--cd-ease-out);
}
.slide-menu-close:hover {
  background-color: var(--cd-teal-soft);
  color: var(--cd-teal-strong);
}
.slide-menu-close svg { width: 1.5rem; height: 1.5rem; }

.slide-menu-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.slide-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide-nav-item { border-bottom: 1px solid var(--cd-line); }

.slide-nav-link {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--cd-space-3) var(--cd-space-5);
  color: var(--cd-ink);
  font-size: var(--cd-text-lg);
  font-weight: var(--cd-weight-medium);
  text-decoration: none;
  transition: background-color var(--cd-duration-fast) var(--cd-ease-out), color var(--cd-duration-fast) var(--cd-ease-out);
}
.slide-nav-link:hover {
  background-color: var(--cd-surface-tint);
  color: var(--cd-teal-strong);
}
.slide-nav-link[aria-current="page"] {
  color: var(--cd-teal);
  font-weight: var(--cd-weight-semibold);
  box-shadow: inset 4px 0 0 var(--cd-teal);
}
/* Inset ring so it is never clipped by the scrolling panel. */
.slide-nav-link:focus-visible { outline-offset: -4px; }

.slide-nav-footer {
  margin-top: auto;
  padding: var(--cd-space-5);
  border-top: 1px solid var(--cd-line);
  background-color: var(--cd-surface-tint);
}

/* ── Overlay behind the open menu ──────────────────────────────────────── */
.slide-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--cd-z-overlay);
  background-color: var(--cd-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cd-duration) var(--cd-ease), visibility 0s linear var(--cd-duration);
}
.slide-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--cd-duration) var(--cd-ease), visibility 0s linear 0s;
}

/* Phones: the menu takes the full width. */
@media (max-width: 36em) {
  .slide-menu { width: 100%; max-width: 100%; }
}

/* ── While the menu is open (html.cd-menu-open, set by header.js) the chat and
   Sienna launchers, which sit above every page layer, are hidden: the panel is
   modal, and they would cover its Request Information button. ──────────── */
html.cd-menu-open #clue-ai-bubble,
html.cd-menu-open #clue-ai-panel,
html.cd-menu-open .asw-widget,
html.cd-menu-open .asw-menu-btn { visibility: hidden; }

/* ── Desktop: the menu button and the slide-out panel are for screens
   below 56em only (after their own rules, so this wins). ─────────────── */
@media (min-width: 56em) {
  .hamburger-btn,
  .slide-menu,
  .slide-menu-overlay { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .slide-menu,
  .slide-menu-overlay {
    transition: none;
  }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  .main-header,
  .slide-menu,
  .slide-menu-overlay {
    display: none;
  }
}

/* ── Forced colors / high contrast (from the template) ─────────────────── */
@media (prefers-contrast: more) {
  .main-header { border-bottom: 2px solid var(--cd-ink); }
  .slide-nav-link { font-weight: var(--cd-weight-semibold); }
}