/* modules/header/header.css */
/* Header + pasek: lupa wewnątrz pola (lewa), bez przycisku „×” – brak kolizji ze search.css */

/* ===== Tokens ===== */
:root{
  --accent:#2f6df6;
  --ink:#0f172a;
  --ink-muted:#5b6b85;

  --bg-grad-start:#eaf2ff;
  --bg-grad-end:#f7faff;
  --bg-tint: radial-gradient(1100px 120px at 50% -60px, rgba(47,109,246,.06), transparent 65%);
  --border:#dbe6ff;

  --radius-pill:999px;
  --ring:0 0 0 2px color-mix(in oklab, var(--accent) 65%, white);

  --search-bg:#fff;
  --search-border: color-mix(in oklab, var(--accent) 30%, white);
}

/* ===== Scaling ===== */
.site-header{
  --scale: 1;

  --header-h-base: 72px;
  --logo-h-base:   40px;

  --btn-m-base:    52px;
  --glyph-base:    28px;

  --search-h-base: 46px;
  --gap-base:      14px;

  --badge-h-base:      18px;
  --badge-font-base:   11px;
  --badge-pad-x-base:   4px;

  --header-h: calc(var(--header-h-base) * var(--scale));
  --logo-h:   calc(var(--logo-h-base)   * var(--scale));
  --btn-m:    calc(var(--btn-m-base)    * var(--scale));
  --glyph:    calc(var(--glyph-base)    * var(--scale));
  --search-h: calc(var(--search-h-base) * var(--scale));
  --gap-x:    calc(var(--gap-base)      * var(--scale));

  --badge-h:       calc(var(--badge-h-base) * var(--scale));
  --badge-font:    calc(var(--badge-font-base) * var(--scale));
  --badge-pad-x:   calc(var(--badge-pad-x-base) * var(--scale));

  /* Pasek */
  --search-btn:   38px;
  --search-glyph: 20px;
  --search-icon-inset: 12px;
  --search-icon-slot: calc(var(--search-glyph) + 10px + var(--search-icon-inset));
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:
    var(--bg-tint),
    linear-gradient(180deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%);
  border-bottom:1px solid var(--border);
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;

  /* Stabilizacja wysokości zanim doładuje się reszta CSS (CLS) */
  min-height: var(--header-h);
  contain: layout paint;
}
.site-header.is-scrolled{ --scale:.80; box-shadow:0 8px 28px rgba(17,24,39,.08); }

.container.header-inner{
  max-width:1320px; width:100%; margin:0 auto;
  padding:8px 12px 12px; display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"logo actions" "search search";
  align-items:center; gap:10px 12px; min-height: var(--header-h);
  transition: padding .18s ease, min-height .18s ease, box-shadow .18s ease;
}
.site-logo{ grid-area:logo; }
.site-logo a{ display:flex; align-items:center; text-decoration:none; color:inherit; }
.site-logo img, .site-logo svg, .site-logo .custom-logo{ height:var(--logo-h); width:auto; display:block; transition:height .18s ease; }
.primary-nav{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ===== Pasek wyszukiwarki (scoped) ======================================= */
.site-header .search-wrap{
  grid-area:search;
  width:100%;
  position:relative; /* kotwica dla dropdownu */
}

/* Jedna kolumna: tylko input (z lupą wewnątrz) */
.site-header .search-wrap .search-form{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  align-items:center;
  gap:0;
  background: var(--search-bg);
  border:1px solid var(--search-border);
  border-radius: var(--radius-pill);
  padding: 0 12px;
  min-height: var(--search-h);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:border-color .18s, box-shadow .18s;
  contain: content; /* drop-down nie wpływa na layout headera */
}
.site-header .search-wrap .search-form:focus-within{
  border-color: color-mix(in oklab, var(--accent) 60%, white);
  box-shadow: var(--ring), 0 2px 8px rgba(15,23,42,.08);
}

/* input – bez ramki; padding na lupę */
.site-header .search-wrap .search-field{
  grid-column:1; min-width:0; width:100%;
  height: var(--search-h);
  -webkit-appearance:none; appearance:none;
  background:transparent; border:0; outline:0;
  border-radius: var(--radius-pill);
  color:var(--ink);
  padding: 0 12px 0 calc(var(--search-icon-slot) + 6px);
  font-size: clamp(14px, calc(14px*var(--scale) + 2px), 16px);
  line-height:1.4;
}
.site-header .search-wrap .search-field::placeholder{ color:var(--ink-muted); }
.site-header .search-wrap .search-field::-webkit-search-cancel-button,
.site-header .search-wrap .search-field::-webkit-search-decoration,
.site-header .search-wrap .search-field::-webkit-search-results-button,
.site-header .search-wrap .search-field::-webkit-search-results-decoration{ -webkit-appearance:none; appearance:none; display:none; }

/* lupa – absolutnie wewnątrz pigułki, LEWA strona */
.site-header .search-wrap .search-submit-icon{
  position:absolute;
  left: var(--search-icon-inset);
  top:50%; transform: translateY(-50%);
  width: var(--search-glyph); height: var(--search-glyph);
  display:grid; place-items:center;
  background:transparent; border:none; padding:0; line-height:0; cursor:pointer;
  color:var(--ink);
  transition: color .12s ease, transform .08s ease;
  user-select: none;
}
.site-header .search-wrap .search-submit-icon .icon,
.site-header .search-wrap .search-submit-icon .icon > svg,
.site-header .search-wrap .search-submit-icon .icon > img{
  width:var(--search-glyph); height:var(--search-glyph); display:block;
}
.site-header .search-wrap .search-submit-icon:hover{ color: var(--accent); }
.site-header .search-wrap .search-submit-icon:active{ transform: translateY(-50%) scale(.96); }

/* ===== Actions ===== */
.actions-list{
  grid-area:actions; display:flex; align-items:center; justify-content:flex-end;
  gap: var(--gap-x); min-height: var(--btn-m);
  flex-wrap: nowrap; /* nie łam rzędu ikon */
}
.action{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:inherit; user-select:none; gap:.5px;
}
.icon-button{ position:relative; display:grid; place-items:center; width:var(--btn-m); height:var(--btn-m); background:transparent; border:none; color:var(--ink); }
.icon, .icon > svg, .icon > img{ width:var(--glyph); height:var(--glyph); display:block; }

/* Podpisy pod ikonami – nie zawijaj */
.actions-list .icon-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.icon-button[data-count]::after{
  content: attr(data-count);
  position:absolute; top:2px; right:2px; transform: translate(35%, -35%);
  display:grid; place-items:center; min-width: var(--badge-h); height: var(--badge-h);
  padding:0 var(--badge-pad-x); border-radius:999px;
  background:#ef4444; color:#fff; font-weight:700; font-size: var(--badge-font); line-height:1;
}
.icon-button[data-count="0"]::after, .icon-button:not([data-count])::after{ content:none; }

/* Desktop */
@media (min-width:861px){
  .container.header-inner{ grid-template-columns:auto 1fr auto; grid-template-areas:"logo search actions"; gap:16px; }
  .search-wrap{ max-width:640px; justify-self:center; }
  .site-header .search-wrap .search-form{ min-width:320px; width: clamp(320px, 36vw, 560px); }
}

/* RTL */
:root[dir="rtl"] .site-header .search-wrap .search-submit-icon{ right: var(--search-icon-inset); left:auto; }
:root[dir="rtl"] .site-header .search-wrap .search-field{ padding-left:6px; padding-right: calc(var(--search-icon-slot) + 6px); }

/* Focus / a11y */
:where(a,button,input){ outline:none; }
:where(a,button,input):focus-visible{ box-shadow: var(--ring); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .container.header-inner, .site-logo img, .site-header .search-wrap .search-form,
  .site-header .search-wrap .search-field, .site-header .search-wrap .search-submit-icon{ transition:none !important; }
}

/* ================= Hej! {imię} – stan wylogowany: neutralnie ================= */
.icon-label--account{
  max-width: 14ch;        /* elipsa – nie rozpycha headera */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* brak wyróżnienia w stanie niezalogowanym */
}

/* ================= Hej! {imię} – wyróżnienie TYLKO po zalogowaniu ================= */
.logged-in .action--account .icon-label--account{
  font-weight: 700;            /* pogrubienie tylko dla zalogowanych */
  letter-spacing: .1px;
  /* subtelne podkreślenie akcentem – tło (nie zmienia metryk linii) */
  background-image: linear-gradient(
    to right,
    color-mix(in oklab, var(--accent) 70%, transparent),
    color-mix(in oklab, var(--accent) 70%, transparent)
  );
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 95%;
}

/* Hover/focus – tylko zalogowani */
.logged-in .action--account:hover .icon-label--account,
.logged-in .action--account:focus-visible .icon-label--account{
  color: color-mix(in oklab, var(--ink) 92%, var(--accent) 8%);
  background-image: linear-gradient(
    to right,
    color-mix(in oklab, var(--accent) 85%, transparent),
    color-mix(in oklab, var(--accent) 85%, transparent)
  );
}

/* ===== MOBILE SAFE (bez ukrywania napisu) ===== */
@media (max-width: 560px){
  /* skróć i minimalnie zmniejsz tylko etykietę konta po zalogowaniu */
  .logged-in .action--account .icon-label--account{
    font-size: clamp(13px, 3.2vw, 15px);
    max-width: 10ch;         /* krótsza elipsa – nie rozpycha */
    background-size: 100% 2px;
  }
  /* ciaśniejsze przerwy między ikonami */
  .actions-list{ gap: 10px; }
}

/* Bardzo wąskie ekrany – opcjonalnie skracamy wszystkie etykiety (bez chowania) */
@media (max-width: 380px){
  .actions-list .icon-label{ max-width: 8ch; }
}