/**
 * SakanOujda — Single shared site header/navigation system.
 * Used by every page via includes/header.php. Do not duplicate these
 * rules locally in a page's own style block — page-specific CSS must
 * not touch site-header, header-inner, logo, nav, or lang-switcher.
 *
 * Structure: .site-header > .header-inner > .logo + .nav-toggle + nav.nav
 * Everything that isn't the logo or the hamburger button (page links,
 * language switcher, favorites, login/register or profile/logout, the
 * "Publier une annonce" CTA) lives INSIDE nav.nav. That's deliberate: on
 * mobile only the logo + hamburger stay in the persistent bar, and the
 * rest collapses into the same slide-down panel as the nav links — so
 * nothing is ever left fighting the logo/hamburger for space in the
 * 44px-tall bar, which is what caused the old overlap/overflow bugs.
 */

/* ─── Skip link (WCAG 2.4.1 Bypass Blocks) ───────────────────────────
   Visually hidden until keyboard-focused, then jumps above the header
   so keyboard/screen-reader users can bypass the nav straight to the
   page's main content. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  background: var(--primary, #A7643A);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, #EDE4D8);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  height: 68px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ─── Logo ────────────────────────────────────────────── */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-width: 0;
  flex-shrink: 1;
}
.logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--primary, #A7643A);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.logo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.logo-wordmark {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink, #2B2320);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logo-wordmark em, .logo-wordmark span { font-style: normal; color: var(--primary, #A7643A); }
.logo-tagline {
  font-size: 0.7rem;
  color: var(--ink-muted, #7D7266);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Hamburger toggle — hidden on desktop, own fixed 44px slot ──── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink, #2B2320);
}
.nav-toggle:hover { background: var(--surface-3, #F3ECE3); }
.nav-toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ─── Nav (desktop: inline row; mobile: slide-down panel) ────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-muted, #7D7266);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}
.nav-link:hover, .nav-link.active { color: var(--ink, #2B2320); background: var(--surface-3, #F3ECE3); }
.nav-link svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

.nav-divider { width: 1px; height: 24px; background: var(--border, #EDE4D8); margin: 0 0.4rem; flex-shrink: 0; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--primary, #A7643A);
  color: #fff !important;
  padding: 0.65rem 1.2rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--primary-light, #C07848); }

.nav-lang-wrap { flex-shrink: 0; display: flex; align-items: center; }

/* ─── ≤768px: collapse to logo + hamburger only ──────────────────── */
@media (max-width: 768px) {
  .header-inner { height: 58px; padding: 0 1rem; }
  .nav-toggle { display: flex; }
  .logo-tagline { display: none; }
  .logo-icon { width: 34px; height: 34px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border, #EDE4D8);
    box-shadow: 0 12px 28px rgba(20, 12, 6, 0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.open { max-height: calc(100vh - 58px); overflow-y: auto; }

  .nav-link {
    width: 100%;
    border-radius: 0;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border, #EDE4D8);
    min-height: 52px;
  }
  .nav-divider { display: none; }
  .nav-lang-wrap {
    width: 100%;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border, #EDE4D8);
    justify-content: flex-start;
  }
  .nav-cta { width: calc(100% - 2.5rem); margin: 0.85rem 1.25rem; }
}

/* ─── ≤360px: smallest supported phones — tighten padding only ──── */
@media (max-width: 360px) {
  .header-inner { padding: 0 0.75rem; }
  .logo-wordmark { font-size: 1.08rem; }
}