/**
 * HEADER ACTION CLUSTER
 *
 * Loaded after header-scoped.css / site-beauty.css so it wins on equal
 * specificity (several earlier sheets set .nav-link padding with !important
 * at the 1200-1399px range, which squashed the Post an Ad CTA).
 *
 * Owns three things:
 *   1. the right-hand cluster (Language | auth | Post an Ad) as one nowrap row
 *   2. the divider that keeps the Post an Ad CTA visually separate from auth
 *   3. the amber CTA itself, desktop pill / mobile full-width block
 *
 * Scoped to .header-blue, .header-blue-wrapper and .header-container only.
 */

/* ============================================
   CLUSTER LAYOUT (desktop: one row, no wrap)
   ============================================ */
.header-blue .header-actions,
.header-container .header-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  min-width: 0;
  flex: 0 0 auto;
  margin-left: auto;
}

.header-blue .header-actions .auth-buttons,
.header-blue .header-actions .lang-dropdown-wrapper,
.header-blue .header-actions .header-report-alert,
.header-blue .header-actions .header-post-ad,
.header-container .header-actions .auth-buttons,
.header-container .header-actions .lang-dropdown-wrapper,
.header-container .header-actions .header-report-alert,
.header-container .header-actions .header-post-ad {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}

/* The nav list keeps the remaining width; nothing may push the cluster out. */
.header-blue .navbar-nav,
.header-container .navbar-nav {
  min-width: 0;
}

/* ============================================
   POST AN AD CTA — separator from the auth group
   ============================================ */
.header-blue .header-post-ad,
.header-blue-wrapper .header-post-ad,
.header-container .header-post-ad {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 4px;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

/* ============================================
   POST AN AD CTA — the button itself
   ============================================ */
.header-blue .header-post-ad .nav-link-post-ad,
.header-blue-wrapper .header-post-ad .nav-link-post-ad,
.header-container .header-post-ad .nav-link-post-ad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  margin: 0;
  padding: 0.5rem 1.15rem;
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  background: #f5c15d;
  color: #10204e;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(6, 16, 50, 0.25);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.header-blue .header-post-ad .nav-link-post-ad:hover,
.header-blue .header-post-ad .nav-link-post-ad:focus,
.header-blue .header-post-ad .nav-link-post-ad:focus-visible,
.header-blue-wrapper .header-post-ad .nav-link-post-ad:hover,
.header-container .header-post-ad .nav-link-post-ad:hover {
  background: #ffd477;
  color: #10204e;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(6, 16, 50, 0.3);
}

.header-blue .header-post-ad .nav-link-post-ad:active {
  transform: translateY(0);
  background: #eeb14a;
  color: #10204e;
}

/* Keep the icon from shrinking when a translated label is long. */
.header-blue .header-post-ad .nav-link-post-ad .fas,
.header-container .header-post-ad .nav-link-post-ad .fas {
  flex: 0 0 auto;
  font-size: 0.95em;
}

/* Defeat the blanket ".nav-link { padding: 0 6px !important }" rules that
   site-beauty.css and friends apply to every nav-link in the 1200-1399px band
   (and the desktop-page overrides below it). Without this the CTA loses its
   padding and sits flush against the auth buttons. */
body:not(.dashboard-page) .header-blue .header-post-ad .nav-link-post-ad,
body:not(.dashboard-page) .header-container .header-post-ad .nav-link-post-ad,
body:not(.dashboard-page) .header-blue-wrapper .header-post-ad .nav-link-post-ad {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0.5rem 1.15rem !important;
  border-radius: 999px !important;
  border-bottom: 0 !important;
  background: #f5c15d !important;
  color: #10204e !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(6, 16, 50, 0.25) !important;
}

body:not(.dashboard-page) .header-blue .header-post-ad .nav-link-post-ad:hover,
body:not(.dashboard-page) .header-container .header-post-ad .nav-link-post-ad:hover {
  background: #ffd477 !important;
  color: #10204e !important;
}

/* ============================================
   AUTH BUTTON / LOG IN — sits inside the same row,
   never collides with the CTA
   ============================================ */
.header-blue .header-actions .auth-buttons,
.header-container .header-actions .auth-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  min-width: 0;
}

.header-blue .header-actions .auth-buttons .user-dropdown-btn,
.header-blue .header-actions #login-button,
.header-container .header-actions .auth-buttons .user-dropdown-btn,
.header-container .header-actions #login-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
}

.header-blue .header-actions #login-button {
  margin-right: 0;
}

/* Report Alert / Dashboard shortcuts stay compact next to the CTA. */
.header-blue .header-actions .report-alert-btn,
.header-blue .header-actions .header-dashboard-btn,
.header-container .header-actions .report-alert-btn,
.header-container .header-actions .header-dashboard-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ============================================
   RESPONSIVE — sidebar menu (<1200px)
   Stack the cluster: Language, auth, then the CTA as a full-width block.
   ============================================ */
@media (max-width: 1199.98px) {
  .header-blue .header-actions,
  .header-blue-wrapper .header-actions,
  .header-container .header-actions {
    flex-direction: column;
    /* !important: the markup carries Bootstrap's .align-items-center (!important),
       which otherwise shrinks each control to its text width. */
    align-items: stretch !important;
    flex-wrap: nowrap;
    width: 100%;
    gap: 10px;
    margin-left: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  .header-blue .header-actions .auth-buttons,
  .header-blue-wrapper .header-actions .auth-buttons,
  .header-container .header-actions .auth-buttons {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    gap: 10px;
  }

  .header-blue .header-actions .auth-buttons .btn,
  .header-blue .header-actions #login-button,
  .header-blue-wrapper .header-actions .auth-buttons .btn,
  .header-blue-wrapper .header-actions #login-button,
  .header-container .header-actions .auth-buttons .btn,
  .header-container .header-actions #login-button {
    width: 100%;
    justify-content: center;
    max-width: none;
  }

  .header-blue .header-post-ad,
  .header-blue-wrapper .header-post-ad,
  .header-container .header-post-ad {
    width: 100%;
    margin: 4px 0 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    align-items: stretch;
  }

  .header-blue .header-actions .lang-dropdown-wrapper,
  .header-blue-wrapper .header-actions .lang-dropdown-wrapper,
  .header-container .header-actions .lang-dropdown-wrapper {
    width: 100%;
    margin: 0;
  }

  /* Every control in the stacked cluster gets the same touch height. */
  .header-blue .header-actions .lang-dropdown-btn,
  .header-blue-wrapper .header-actions .lang-dropdown-btn,
  .header-container .header-actions .lang-dropdown-btn,
  .header-blue .header-actions .auth-buttons .btn,
  .header-blue-wrapper .header-actions .auth-buttons .btn,
  .header-container .header-actions .auth-buttons .btn,
  .header-blue .header-actions .report-alert-btn,
  .header-blue-wrapper .header-actions .report-alert-btn,
  .header-container .header-actions .report-alert-btn {
    min-height: 48px;
    justify-content: center;
  }

  .header-blue .header-post-ad .nav-link-post-ad,
  .header-blue-wrapper .header-post-ad .nav-link-post-ad,
  .header-container .header-post-ad .nav-link-post-ad,
  body:not(.dashboard-page) .header-blue .header-post-ad .nav-link-post-ad,
  body:not(.dashboard-page) .header-blue-wrapper .header-post-ad .nav-link-post-ad,
  body:not(.dashboard-page) .header-container .header-post-ad .nav-link-post-ad {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0.7rem 1rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    white-space: normal !important;
  }

  /* Inside the sidebar the .nav-link block/border rules must not apply. */
  .header-blue .header-post-ad .nav-link-post-ad:hover,
  .header-blue .header-post-ad .nav-link-post-ad:active {
    padding-left: 1rem !important;
    transform: none;
  }

  .header-blue .header-actions .report-alert-btn,
  .header-blue .header-actions .header-dashboard-btn,
  .header-container .header-actions .report-alert-btn,
  .header-container .header-actions .header-dashboard-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   RESPONSIVE — tight desktop band (1200-1399px)
   Same pill, a touch narrower so nav links keep their room.
   ============================================ */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .header-blue .header-actions,
  .header-container .header-actions {
    gap: 8px;
  }

  .header-blue .header-post-ad,
  .header-blue-wrapper .header-post-ad,
  .header-container .header-post-ad {
    margin-left: 2px;
    padding-left: 10px;
  }

  .header-blue .header-post-ad .nav-link-post-ad,
  .header-blue-wrapper .header-post-ad .nav-link-post-ad,
  .header-container .header-post-ad .nav-link-post-ad,
  body:not(.dashboard-page) .header-blue .header-post-ad .nav-link-post-ad,
  body:not(.dashboard-page) .header-blue-wrapper .header-post-ad .nav-link-post-ad,
  body:not(.dashboard-page) .header-container .header-post-ad .nav-link-post-ad {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.85rem !important;
    gap: 5px !important;
  }
}

@media (max-width: 575.98px) {
  .header-blue .header-post-ad .nav-link-post-ad,
  .header-blue-wrapper .header-post-ad .nav-link-post-ad,
  .header-container .header-post-ad .nav-link-post-ad {
    font-size: 0.95rem !important;
  }
}

/* ============================================
   ONE ROW, ONE HEIGHT (desktop >=1200px)
   site-beauty.css shrinks every .btn inside .header-actions at 1200-1399px
   (padding 6px 10px !important), which left Log In 33px tall next to a 42px
   Post an Ad pill. Pin every control in the cluster to the same height, radius
   and font so the row lines up.
   ============================================ */
@media (min-width: 1200px) {
  .header-blue .header-actions .btn,
  .header-blue-wrapper .header-actions .btn,
  .header-container .header-actions .btn,
  .header-blue .header-actions .lang-dropdown-btn,
  .header-blue-wrapper .header-actions .lang-dropdown-btn,
  .header-container .header-actions .lang-dropdown-btn,
  .header-blue .header-actions .user-dropdown-btn,
  .header-blue-wrapper .header-actions .user-dropdown-btn,
  .header-container .header-actions .user-dropdown-btn,
  body:not(.dashboard-page) .header-blue .header-actions .btn,
  body:not(.dashboard-page) .header-blue-wrapper .header-actions .btn,
  body:not(.dashboard-page) .header-container .header-actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0.45rem 1.05rem !important;
    border-radius: 999px !important;
    font-size: 0.86rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
}

/* ============================================
   OVERLAP GUARD (desktop)
   Long translations used to push the nav past the container and the last links
   slid under the action cluster. Nav items may now shrink (and clip inside
   their own link) so the Post an Ad / auth buttons keep their own space.
   ============================================ */
@media (min-width: 1200px) {
  .header-blue .navbar-nav > .nav-item,
  .header-blue-wrapper .navbar-nav > .nav-item,
  .header-container .navbar-nav > .nav-item {
    flex: 0 1 auto;
    min-width: 0;
  }

  .header-blue .navbar-nav > .nav-item > .nav-link,
  .header-blue-wrapper .navbar-nav > .nav-item > .nav-link,
  .header-container .navbar-nav > .nav-item > .nav-link {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================
   ACCESSIBILITY / MOTION
   ============================================ */
.header-blue .header-post-ad .nav-link-post-ad:focus-visible,
.header-blue-wrapper .header-post-ad .nav-link-post-ad:focus-visible,
.header-container .header-post-ad .nav-link-post-ad:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .header-blue .header-post-ad .nav-link-post-ad,
  .header-blue-wrapper .header-post-ad .nav-link-post-ad,
  .header-container .header-post-ad .nav-link-post-ad {
    transition: none;
  }

  .header-blue .header-post-ad .nav-link-post-ad:hover,
  .header-blue-wrapper .header-post-ad .nav-link-post-ad:hover,
  .header-container .header-post-ad .nav-link-post-ad:hover {
    transform: none;
  }
}

/* Primary controls stay visible outside the collapsible navigation. */
body:not(.dashboard-page) .csl-public-header > .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px !important;
  max-width: 1400px;
  padding: 8px 16px !important;
}
body:not(.dashboard-page) .csl-public-header .navbar-brand {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
  min-width: 0;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: auto;
  padding: 0 !important;
  margin: 0 !important;
  border: 0;
  gap: 12px;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .auth-buttons {
  flex-direction: row !important;
  width: auto;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(255,255,255,.35);
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .header-post-ad {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .user-dropdown-btn > span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not(.dashboard-page) .csl-public-header .user-dropdown-btn > img,
body:not(.dashboard-page) .csl-public-header .user-dropdown-btn > div {
  flex-shrink: 0;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .dropdown-menu {
  right: 0;
  left: auto;
  max-width: calc(100vw - 24px);
}
@media (min-width: 1200px) {
  body:not(.dashboard-page) .csl-public-header > .container {
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: 1800px;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions {
    grid-column: 3;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-collapse {
    grid-column: 2;
    grid-row: 1;
    gap: 12px;
    justify-content: space-between !important;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-nav {
    flex-wrap: nowrap !important;
    height: auto !important;
    gap: 0;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-nav > .nav-item {
    flex: 0 1 auto;
    min-width: 0;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-nav > .nav-item > .nav-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 42px;
  }
  body:not(.dashboard-page) .csl-public-header .header-secondary-actions {
    flex: 0 0 auto;
  }
  body:not(.dashboard-page) .csl-public-header .header-dashboard-btn {
    display: none !important;
  }
}
@media (min-width: 1200px) and (max-width: 1599.98px) {
  body:not(.dashboard-page) .csl-public-header .csl-nav-logo-text {
    display: none !important;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .user-dropdown-btn > span {
    max-width: 80px;
  }
}
@media (max-width: 1199.98px) {
  body:not(.dashboard-page) .csl-public-header > .container {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-toggler {
    grid-column: 3;
    grid-row: 1;
    margin: 0;
    min-height: 44px;
    padding: 6px;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions {
    gap: 8px;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .auth-buttons {
    padding-inline-start: 8px;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .btn,
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .nav-link-post-ad {
    width: auto !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: .85rem !important;
    white-space: nowrap !important;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-collapse {
    position: fixed;
    top: var(--csl-nav-h, 64px);
    left: 0;
    width: min(320px, 100vw);
    height: calc(100dvh - var(--csl-nav-h, 64px));
    overflow-y: auto;
    padding: 12px 0;
    background: linear-gradient(135deg,#172a74,#21a9af);
    z-index: 100;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-collapse:not(.show) {
    display: none !important;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-collapse.show {
    display: block !important;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-collapse.show::before {
    content: none;
  }
  body:not(.dashboard-page) .csl-public-header .navbar-nav {
    flex-direction: column;
    width: 100%;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .dropdown-menu {
    position: absolute;
  }
}
@media (max-width: 575.98px) {
  body:not(.dashboard-page) .csl-public-header .csl-nav-logo-text {
    display: none !important;
  }
  body:not(.dashboard-page) .csl-public-header .csl-nav-logo-img {
    width: 32px;
    height: 32px;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .user-dropdown-btn > span {
    display: none;
  }
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .btn,
  body:not(.dashboard-page) .csl-public-header .header-primary-actions .nav-link-post-ad {
    padding: 6px 8px !important;
    font-size: .8rem !important;
  }
}
body:not(.dashboard-page) .csl-public-header {
  animation: none !important;
  transform: none !important;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .auth-buttons {
  width: auto !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .btn {
  margin: 0 !important;
}
body:not(.dashboard-page) .csl-public-header .header-primary-actions .user-dropdown-btn > img,
body:not(.dashboard-page) .csl-public-header .header-primary-actions .user-dropdown-btn > div {
  width: 28px !important;
  height: 28px !important;
}
body:not(.dashboard-page) .header-container .navigation-clean-search.csl-public-header > .container {
  display: grid !important;
  gap: 8px 16px !important;
}
@media (max-width: 1199.98px) {
  body:not(.dashboard-page) .header-container .navigation-clean-search.csl-public-header > .container {
    gap: 8px !important;
  }
}
@media (max-width: 1199.98px) {
  body:not(.dashboard-page) .header-container .csl-public-header .navbar-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}