/* ===== frontend-header.css — OKAMI CMS public header/nav chrome (V.104 CSS split) =====
   Split out of the former app.css. Public-site header/nav/topbar/search-box/
   mobile-menu chrome only. Load on every frontend page (tokens.css and
   frontend-body.css before it, per resources/views/frontend/shell.php). */

/* .frontend-body__header — merged from its 3 separate app.css passes
   (base border/bg/margin, later sticky/shadow, and a later margin-bottom:0
   override) into one final rule; later declarations won on conflicts. */
.frontend-body__header { border-bottom: 1px solid var(--line); background: var(--surface); margin-bottom: 0; position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 0 var(--line); }
.frontend-body__header .builder-menu__list { padding: 16px 24px; }

/* ---- header live-search box + AJAX suggestions dropdown ---- */
.builder-search-box { display: flex; gap: 6px; padding: 0 24px; }
.builder-search-box__input { border: 1px solid var(--line); border-radius: var(--rs); padding: 7px 10px; font: inherit; }

/* Phase 13 — live AJAX suggestions dropdown for `.builder-search-box--live` (frontend-search.js). */
.builder-search-box--live { position: relative; }
.builder-search-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rs); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 320px; overflow-y: auto; min-width: 260px;
}
.builder-search-box .builder-search-suggest { left: 24px; right: 24px; }
.builder-search-suggest__item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; text-decoration: none; color: inherit; font-size: var(--fs-13); }
.builder-search-suggest__item:hover, .builder-search-suggest__item--active { background: var(--bg, #f5f6f8); }
.builder-search-suggest__type { font-size: var(--fs-10); text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #8a8f99); font-weight: 700; flex: none; }
.builder-search-suggest__label { flex: 1; }

.site-topbar { background: var(--dark); color: #b9c2cc; font-size: var(--fs-12_5); }
.site-topbar__inner { max-width: var(--container); margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-topbar__message { opacity: .85; }
.site-topbar__contact { display: flex; align-items: center; gap: 18px; }
.site-topbar__contact a { color: #d7dde3; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.site-topbar__contact a:hover { color: #fff; }
.site-topbar__contact .builder-icon { width: 14px; height: 14px; }
.site-topbar__contact .builder-icon svg { width: 100%; height: 100%; }

/* V.105 — header social icons (top utility bar), same repeater/icon
   pattern the footer's .site-footer__social already uses. */
.site-topbar__social { display: flex; align-items: center; gap: 12px; padding-left: 14px; margin-left: 4px; border-left: 1px solid rgba(255,255,255,.18); }
.site-topbar__social a { color: #d7dde3; display: inline-flex; }
.site-topbar__social a:hover { color: #fff; }
.site-topbar__social .builder-icon { width: 15px; height: 15px; }
.site-topbar__social .builder-icon svg { width: 100%; height: 100%; }

.site-header { position: sticky; top: 0; z-index: 40; background: var(--surface); box-shadow: 0 1px 0 var(--line); }

/* V.105 — real "clean" / "bold" header style toggle (owner: "settings mein
   2 theme"). 'clean' (default) is the pre-existing light header, left
   untouched below. 'bold' additionally darkens the main nav row so the
   whole header — utility bar + nav row — reads as one dark band, per the
   reviewed mockup's "Option A". */
.site-header--bold { background: var(--dark); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-header--bold .site-nav__brand { color: #fff; }
.site-header--bold .site-nav__links a { color: #d7dde3; }
.site-header--bold .site-nav__links a:hover { color: #fff; }
.site-header--bold .site-nav__burger span { background: #fff; }
.site-header--bold .site-nav__search input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.site-header--bold .site-nav__search input::placeholder { color: #b9c2cc; }
.site-header--bold .site-nav__search button { color: #d7dde3; }
@media (min-width: 861px) {
  .site-header--bold .site-nav__links ul.sub-menu { background: var(--dark); border-color: rgba(255,255,255,.18); }
  .site-header--bold .site-nav__links ul.sub-menu a { color: #d7dde3; }
  .site-header--bold .site-nav__links ul.sub-menu a:hover { background: rgba(255,255,255,.08); }
}
.site-nav { max-width: var(--container); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.site-nav__brand { font-size: var(--fs-21); font-weight: 900; color: var(--ink); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; display: inline-flex; align-items: center; }
/* V.107 — real uploaded logo image (Header Settings > Logo), shown instead
   of the plain brand-text string when one is set. Height-capped so an
   admin-uploaded image of any aspect ratio still fits the fixed nav row. */
.site-nav__brand-logo { display: block; height: 34px; width: auto; max-width: 220px; object-fit: contain; }
.site-nav__links { flex: 1; }
.site-nav__links ul { list-style: none; display: flex; align-items: center; gap: 26px; margin: 0; padding: 0; }
.site-nav__links a { color: var(--ink); text-decoration: none; font-size: var(--fs-14); font-weight: 600; }
.site-nav__links a:hover { color: var(--accent); }
.site-nav__actions { display: flex; align-items: center; gap: 14px; }
.site-nav__search { position: relative; display: none; align-items: center; }
.site-nav__search input { border: 1px solid var(--line); border-radius: 999px; padding: 8px 38px 8px 14px; font-size: var(--fs-13); width: 190px; background: var(--bg); }
.site-nav__search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 4px; display: inline-flex; }
.site-nav__search button svg { width: 16px; height: 16px; }
.site-nav__quote { white-space: nowrap; padding: 10px 20px; font-size: var(--fs-13); }
.site-nav__burger { display: none; flex-direction: column; gap: 4px; border: 0; background: transparent; cursor: pointer; padding: 6px; }
.site-nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* V.077 — WordPress-style nested Menu Builder rewrite (DECISIONS.md #100).
   `.sub-menu` is itself a `<ul>` nested inside `.site-nav__links`, so the
   plain `.site-nav__links ul` rules above would otherwise apply to it too
   (same flex-row layout as the top-level list) — every rule here targets
   `ul.sub-menu` specifically (higher specificity than the bare `ul` above)
   so it always wins regardless of source order. */
.site-nav__item--has-children { position: relative; }
.site-nav__item--has-children > a { display: inline-flex; align-items: center; gap: 4px; }
.site-nav__item--has-children > a .builder-icon svg { width: 12px; height: 12px; transition: transform .15s ease; }
.site-nav__item--has-children:hover > a .builder-icon svg,
.site-nav__item--has-children:focus-within > a .builder-icon svg { transform: rotate(180deg); }

@media (min-width: 861px) {
  .site-nav__search { display: inline-flex; }
  .site-nav__links ul.sub-menu {
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 200px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--rs);
    box-shadow: var(--shadow); padding: 8px; z-index: 50;
  }
  .site-nav__item--has-children:hover > .sub-menu,
  .site-nav__item--has-children:focus-within > .sub-menu { display: flex; }
  .site-nav__links ul.sub-menu a { display: block; padding: 8px 10px; border-radius: var(--rs); white-space: nowrap; font-size: var(--fs-13_5); }
  .site-nav__links ul.sub-menu a:hover { background: var(--soft); }
}

@media (max-width: 860px) {
  .site-topbar__message { display: none; }
  .site-nav { flex-wrap: wrap; }
  /* Round M mobile audit — the phone + email Top Bar links (real on every
     Homepage/Header render, and the same Header Builder Top Bar row —
     BuilderRenderer::renderHeaderTopBar() reuses this exact class)
     wrapped in a `display:flex` that never allowed shrinking/wrapping,
     so at 375px both links stayed on one line and forced the whole page
     764px wide — confirmed via real screenshot. Wrapping + a smaller font
     lets both real links stay visible and tappable instead of being cut
     or forcing overflow. */
  .site-topbar__inner { flex-wrap: wrap; gap: 6px 12px; padding: 8px 16px; }
  .site-topbar__contact { flex-wrap: wrap; gap: 6px 14px; }
  .site-topbar__contact a { font-size: var(--fs-11_5); }
  .site-nav__links { order: 3; flex-basis: 100%; display: none; }
  .site-nav.is-open .site-nav__links { display: block; }
  .site-nav__links ul { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0 4px; border-top: 1px solid var(--line); }
  .site-nav__links ul.sub-menu {
    flex-direction: column; gap: 2px; padding: 6px 0 6px 16px; margin: 0;
    border-top: 0; border-left: 2px solid var(--line);
  }
  .site-nav__item--has-children > a .builder-icon svg { display: none; }
  .site-nav__quote { padding: 8px 14px; }
  .site-nav__burger { display: inline-flex; }
  /* V.103 (DECISIONS.md #111) — `.site-nav__search` is unconditionally
     display:none below 861px (see the base rule above) and lives inside
     `.site-nav__actions` (a sibling of `.site-nav__links`, not a child of
     it), which itself doesn't wrap — so there was no way at all to
     search from the header on mobile, not even via the hamburger menu.
     Reveal it, and let `.site-nav__actions` wrap so the search box gets
     its own full-width row above the quote button/burger instead of
     overflowing them. */
  .site-nav__actions { flex-wrap: wrap; }
  .site-nav.is-open .site-nav__search {
    display: flex;
    flex-basis: 100%;
    order: -1;
    margin-bottom: 10px;
  }
  .site-nav.is-open .site-nav__search input { flex: 1; width: auto; }
}