/*
 * Design language: header layout on every page (T-117 A0). Every rule needs html.fcd.
 * Fixes the fixed header covering the page top (desktop 108 px header vs 69 px body offset;
 * 768-1199 px header stacked to 286 px). Reference: forcar-concepts-docs/reference/design-language.md
 */

@media (min-width: 768px) {
  /* Cause: main-*.css has the global `.m-2, a { margin: .5rem !important }`, which leaks into the header links
     (top-level menu links, logo link, brand title, action icons) and adds 16 px to each row. The 69 px body
     offset (= logo 48 + line 21) never matched the real header. Sub-menu links keep their spacing. */
  html.fcd body.fc-header-preview .fc-preview-header :is(.fc-preview-menu > li > a, .fc-preview-brand a, .fc-preview-actions a) {
    margin: 0 !important;
  }
}

/* 768-1199 px: the stacked header (logo / menu / icons on three rows, 286 px) becomes one compact row.
   The JS switches to the mobile drawer at 767 only (matchMedia), so the desktop menu has to stay usable here. */
@media (min-width: 768px) and (max-width: 1199px) {
  html.fcd body.fc-header-preview:not(.fc-header-search-active) .fc-preview-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 16px;
  }
  html.fcd body.fc-header-preview:not(.fc-header-search-active) .fc-preview-brand {
    justify-content: flex-start;
  }
  html.fcd body.fc-header-preview:not(.fc-header-search-active) .fc-preview-menu {
    justify-content: center;
    gap: 14px;
  }
  html.fcd body.fc-header-preview:not(.fc-header-search-active) .fc-preview-actions {
    justify-content: flex-end;
  }
  html.fcd body.fc-header-preview:not(.fc-header-search-active) .fc-preview-search {
    width: 38px;
  }
}

/* below 900 px logo + four menu links + icons no longer fit beside the brand title: the logo (alt text "Forcar Concepts") stands alone */
@media (min-width: 768px) and (max-width: 899px) {
  html.fcd body.fc-header-preview:not(.fc-header-search-active) .fc-preview-brand .mycustomtitleaudiowide {
    display: none !important;
  }
}

/* body offset = real header height (92 px); the old 69 px left the top of every page under the fixed header */
@media (min-width: 768px) {
  html.fcd body.fc-header-preview {
    --fc-preview-desktop-header-height: 92px;
  }
}