/* ============================================================================
   drayseatay.com — the site header. ONE header for all 197 pages.
   ----------------------------------------------------------------------------
   Replaces the three headers that grew up separately (.nav on the homepage,
   .art-bar on the 144 blog/doctor pages, .landing-nav on the 48 treatment
   pages) plus the 4 pages that had no header at all.

   THE RULE THAT MATTERS, and the reason the Blog link vanished on phones:
   there is exactly ONE menu element in the page. Desktop lays it out as a row,
   phone lays the same element out as a panel. There is no second hand-written
   copy to fall out of step — that is what caused the original bug, where Blog
   was added to the desktop menu and forgotten in the mobile one.

   Sticky, not fixed, because it must drop into 197 pages whose bodies make
   different assumptions about top spacing. Sticky takes part in normal layout,
   so no page needs a padding hack. (.art-bar was already sticky; this matches.)

   Colours come from styles.css :root. This file adds no palette of its own.
   ========================================================================== */

/* Cyrillic body font, in one place instead of copied into 144 inline blocks.
   DM Sans was rendering Russian and Bulgarian on the twelve ru/bg treatment
   pages while every ru/bg blog page used Manrope — so the same language looked
   different depending on which page you were on. Manrope everywhere for those
   two languages. */
html[lang="ru"], html[lang="bg"] {
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dx-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(250, 250, 248, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border, #E8E6E0);
  font-family: var(--font-body, 'DM Sans', -apple-system, sans-serif);
}

.dx-nav-inner {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── brand ─────────────────────────────────────────────────────────────── */
.dx-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.22;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
  padding: 12px 0;
  white-space: nowrap;
}
.dx-brand-name {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--text-primary, #1A1A18);
}
.dx-brand-title {
  font-size: .64rem;
  letter-spacing: .045em;
  color: var(--text-muted, #8A8A82);
}

/* ── the single menu element ───────────────────────────────────────────── */
.dx-menu {
  display: flex;
  align-items: center;
  gap: 22px;
}

.dx-link {
  font-size: .86rem;
  color: var(--text-secondary, #5C5C56);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.dx-link:hover,
.dx-link:focus-visible {
  color: var(--accent, #8B6914);
}
.dx-link[aria-current="page"] {
  color: var(--text-primary, #1A1A18);
  border-bottom-color: var(--accent, #8B6914);
}

/* ── treatments dropdown ───────────────────────────────────────────────── */
.dx-drop { position: relative; }

.dx-drop-btn {
  font: inherit;
  font-size: .86rem;
  color: var(--text-secondary, #5C5C56);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.dx-drop-btn:hover { color: var(--accent, #8B6914); }
.dx-drop-btn::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
.dx-drop-btn[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.dx-drop-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 268px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border, #E8E6E0);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(26,26,24,.08));
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dx-drop-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dx-drop-panel a {
  font-size: .85rem;
  color: var(--text-secondary, #5C5C56);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
}
.dx-drop-panel a:hover,
.dx-drop-panel a:focus-visible {
  background: var(--accent-subtle, rgba(139,105,20,.07));
  color: var(--accent, #8B6914);
}
.dx-drop-panel a[aria-current="page"] {
  color: var(--accent, #8B6914);
  font-weight: 500;
}

/* ── language ──────────────────────────────────────────────────────────── */
.dx-lang { position: relative; }

.dx-lang-btn {
  font: inherit;
  font-size: .8rem;
  color: var(--text-secondary, #5C5C56);
  background: none;
  border: 1px solid var(--border, #E8E6E0);
  border-radius: var(--radius-sm, 4px);
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dx-lang-btn:hover { border-color: var(--accent-border, rgba(139,105,20,.18)); }

.dx-lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 176px;
  background: var(--bg-card, #FFFFFF);
  border: 1px solid var(--border, #E8E6E0);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(26,26,24,.08));
  padding: 6px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dx-lang-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dx-lang-panel a,
.dx-lang-panel button {
  font: inherit;
  font-size: .84rem;
  text-align: left;
  color: var(--text-secondary, #5C5C56);
  background: none;
  border: 0;
  text-decoration: none;
  padding: 8px 11px;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  white-space: nowrap;
}
.dx-lang-panel a:hover,
.dx-lang-panel button:hover,
.dx-lang-panel a:focus-visible,
.dx-lang-panel button:focus-visible {
  background: var(--accent-subtle, rgba(139,105,20,.07));
  color: var(--accent, #8B6914);
}
.dx-lang-panel [aria-current="true"] {
  color: var(--accent, #8B6914);
  font-weight: 500;
}

/* ── call to action ────────────────────────────────────────────────────── */
.dx-cta {
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--accent, #8B6914);
  color: #FFFDF7;
  padding: 9px 17px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
  transition: background .18s ease;
}
.dx-cta:hover { background: var(--accent-dark, #6B4F0A); }

/* ── burger (hidden on desktop) ────────────────────────────────────────── */
.dx-burger {
  display: none;
  width: 40px;
  height: 36px;
  border: 1px solid var(--border, #E8E6E0);
  border-radius: var(--radius-sm, 4px);
  background: none;
  cursor: pointer;
  padding: 0;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dx-burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text-primary, #1A1A18);
  transition: transform .22s ease, opacity .22s ease;
}
.dx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.dx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* keyboard focus must always be visible */
.dx-nav a:focus-visible,
.dx-nav button:focus-visible {
  outline: 2px solid var(--accent, #8B6914);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── phone / narrow ────────────────────────────────────────────────────────
   The SAME .dx-menu element becomes the panel. Nothing is duplicated.
   ---------------------------------------------------------------------- */
@media (max-width: 960px) {
  .dx-nav-inner { min-height: 60px; gap: 14px; padding: 0 18px; }
  .dx-brand-name { font-size: 1.06rem; }
  .dx-burger { display: flex; }

  .dx-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-card, #FFFFFF);
    border-bottom: 1px solid var(--border, #E8E6E0);
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(26,26,24,.08));
    padding: 8px 18px 20px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .dx-menu[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .dx-link {
    font-size: .95rem;
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-light, #F0EEE8);
  }
  .dx-link[aria-current="page"] { border-bottom-color: var(--border-light, #F0EEE8); }

  /* dropdown becomes an inline accordion — no floating panel on a phone */
  .dx-drop { width: 100%; }
  .dx-drop-btn {
    width: 100%;
    justify-content: space-between;
    font-size: .95rem;
    padding: 13px 2px;
    border-bottom: 1px solid var(--border-light, #F0EEE8);
  }
  .dx-drop-panel {
    position: static;
    transform: none;
    min-width: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 2px 0 6px;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .dx-drop-panel[data-open="true"] { display: flex; transform: none; }
  .dx-drop-panel a {
    font-size: .88rem;
    padding: 11px 2px 11px 16px;
    border-bottom: 1px solid var(--border-light, #F0EEE8);
    border-radius: 0;
    white-space: normal;
  }

  .dx-lang { width: 100%; margin-top: 12px; }
  .dx-lang-btn { width: 100%; justify-content: center; padding: 11px; }
  .dx-lang-panel {
    position: static;
    transform: none;
    min-width: 0;
    margin-top: 8px;
    display: none;
  }
  .dx-lang-panel[data-open="true"] { display: flex; }

  .dx-cta { margin-top: 14px; text-align: center; padding: 13px; font-size: .9rem; }
}

/* right-to-left (Arabic, Persian — homepage only) */
[dir="rtl"] .dx-brand { margin-right: 0; margin-left: auto; }
[dir="rtl"] .dx-lang-panel { right: auto; left: 0; }

@media (prefers-reduced-motion: reduce) {
  .dx-menu,
  .dx-drop-panel,
  .dx-lang-panel,
  .dx-burger span,
  .dx-drop-btn::after { transition: none; }
}

/* Older headers are removed by the build script, but if any page is ever
   deployed before the script runs over it, hide the leftovers rather than
   showing two headers stacked. */
.dx-nav ~ .art-bar,
.dx-nav ~ .landing-nav { display: none; }

/* The homepage hero reserved --header-height for the OLD nav, which was
   position:fixed and so took no space. This header is sticky and occupies
   real space, which would turn that reservation into an empty band. */
.dx-nav ~ .hero,
.dx-nav ~ main .hero {
  padding-top: 0;
  min-height: calc(100vh - 68px);
}
@media (max-width: 960px) {
  .dx-nav ~ .hero,
  .dx-nav ~ main .hero { min-height: calc(100vh - 60px); }
}