/* ============================================================
   SHARED TOPBAR — single source for the standard & matching templates
   Served at /shared/topbar/topbar.css (see server/app.js).

   Layout: CSS grid areas, re-mapped per breakpoint.
     <768px   : orglogo | name (i + lang centered UNDER it) | Powered by PD
     768-1199 : PD logo (no text) | orglogo + name + i | lang   (Donate/Share => bottom bar)
     >=1200   : Powered by PD | orglogo + name + i (top-right) | Donate Share lang

   The org name is fitted by /shared/topbar/topbar.js — never truncated,
   2 lines max. The CSS line-clamp on .org-name is only a no-JS safety net.
   Loaded AFTER style.css/responsive.css so it wins the cascade.
   ============================================================ */

/* ---------- header shell (mobile-first: fixed) ---------- */
.header__area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--white);
  z-index: 9999999;
  box-shadow: 0 2px 10px var(--black-opacity-10) !important;
  transition: all 0.3s ease-in-out;
}

.header__area .container {
  padding-left: 12px;
  padding-right: 12px;
}

.header__wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "orglogo title powered";
  align-items: center;
  column-gap: 8px;
  padding: 5px 0;
  font-family: "Rubik", sans-serif;
  transition: all 0.3s ease-in-out;
}

/* ---------- organisation logo ---------- */
.org-logo {
  grid-area: orglogo;
  justify-self: start;
  width: 52px;
  max-height: 52px;
  object-fit: contain;
}

/* ---------- organisation name + info button ---------- */
.org-title {
  grid-area: title;
  display: flex;
  /* mobile: the name takes the full first line, the "i" button and the
     language picker wrap onto a second line, centered under it */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 20.8px; /* mobile: i-button ↔ language picker spacing */
  min-width: 0;
}

.org-name {
  flex: 0 0 100%; /* own line on mobile (controls wrap below) */
  margin: 0;
  /* per-breakpoint MAX — topbar.js shrinks from the computed value when needed */
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.25;
  min-width: 0;
  text-align: center;
  overflow-wrap: break-word;
  /* no-JS safety net: never more than 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.org-name-clickable {
  cursor: pointer;
  transition: color 0.2s;
}

.org-name-clickable:hover {
  color: var(--theme_color);
}

.org-info-icon {
  /* Circle drawn as a CSS border (info.svg is the "i" glyph only) so its ring
     renders exactly like the language picker's border — a crisp 1px, not the
     soft anti-aliased SVG stroke it used to be. */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid var(--black);
  border-radius: 50%;
  background: var(--white);
  transition: all 0.2s;
}

.org-info-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s;
}

/* ---------- powered by (mobile: text over logo, right-aligned) ---------- */
.header__powered {
  grid-area: powered;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.65rem;
  font-weight: 300;
  color: var(--textGray);
  white-space: nowrap;
  line-height: 1.3;
}

.header__powered a {
  display: flex;
}

.header__powered img {
  width: 90px;
}

/* ---------- mobile language picker (inside .org-title, under the name) ---------- */
.org-title .h-btn.res-select {
  flex-shrink: 0;
  width: 46px;
  height: 20px;
  border: 1px solid var(--black); /* thin ring, permanent (no click state) */
}

.res-select .nice-select {
  padding: 0 16px 0 8px;
  font-size: var(--f11);
}

.res-select .select__marker {
  right: 6px;
  width: 8px;
}

/* ---------- content offset under the fixed header (<1200px) ---------- */
/* --pd-header-h is kept in sync with the real header height by topbar.js,
   so 1-line and 2-line titles both work. */
@media (max-width: 1199.98px) {
  body.body-area > main,
  .header__area + main {
    padding-top: var(--pd-header-h, 64px);
  }

  section.donations__area {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: var(--pd-header-h, 64px);
    padding-bottom: 0 !important;
  }

  section.donations__area .container {
    padding-top: 0;
  }

  section.donations__area + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  section.donations__area + main section.hero__area,
  section.donations__area ~ main section.hero__area {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
}

/* ============================================================
   TABLET & UP (>=768px): powered | orglogo title | actions
   ============================================================ */
@media (min-width: 768px) {
  .header__area .container {
    padding-left: 26px;
    padding-right: 26px;
  }

  .header__wrap {
    /* symmetric flexible side columns keep the title group centered when
       there is room; when space is tight the title column wins (the name
       is the priority and must never be cut) */
    grid-template-columns: minmax(max-content, 1fr) auto minmax(0, max-content) minmax(max-content, 1fr);
    grid-template-areas: "powered orglogo title btns";
    column-gap: 15px;
    row-gap: 0;
    padding: 6px 0;
  }

  .header__powered {
    justify-self: start;
    align-items: flex-start;
    font-size: var(--f14);
    line-height: 1.4;
  }

  .header__powered img {
    width: 150px;
  }

  .org-title {
    flex-wrap: nowrap;
    gap: 8px; /* name ↔ icon on desktop/tablet (mobile spacing is wider) */
  }

  .org-name {
    flex: 0 1 auto;
  }

  .org-logo {
    justify-self: end;
    width: 80px;
    max-height: 60px;
  }

  .org-name {
    font-size: 20px;
  }

  .org-info-icon {
    /* circled "i" at the top-right of the name (CSS border, same as mobile) */
    align-self: flex-start;
    width: 18px;
    height: 18px;
    margin-top: 4px;
  }

  .org-info-icon:hover {
    background: var(--white);
  }

  .org-info-icon:hover img {
    opacity: 0.7;
  }

  .header__btns {
    grid-area: btns;
    justify-self: end;
    align-items: center;
    justify-content: flex-end;
    gap: 11px;
  }

  .header__btns button {
    font-size: var(--f14);
    width: 84px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
  }

  .header__btns div.h-btn {
    width: 103px;
    position: relative;
  }

  .header__btns div.h-btn > img {
    width: 28px;
    height: 15px;
    flex-shrink: 0;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
  }

  /* tablet only: PerfectDeed logo without the "Powered by" text */
  @media (max-width: 1199.98px) {
    .header__powered span {
      display: none;
    }
  }

  .h-lang .nice-select {
    line-height: 40px;
    padding: 0 16px 0 45px;
    background-color: transparent;
    position: relative;
    z-index: 2;
  }
}

/* ============================================================
   DESKTOP (>=1200px): sticky header, Donate/Share inline,
   compact "scrolled" state (title re-fitted by JS, never clipped)
   ============================================================ */
@media (min-width: 1200px) {
  .header__area {
    position: sticky;
    left: auto;
    right: auto;
    z-index: 1000;
  }

  .header__wrap {
    padding: 8px 0 10px;
  }

  .header__powered img {
    width: 199px;
    margin-top: -14px; /* offset SVG top whitespace (chart/arrow area) */
  }

  .org-info-icon {
    margin-top: 6px;
  }

  .org-logo {
    width: 100px;
    max-height: 80px;
  }

  .org-name {
    font-size: 24px;
  }

  a.btns.donate-btn {
    height: 40px;
    width: 189px;
    font-size: var(--f17);
  }

  /* scrolled compact state — NO white-space:nowrap anywhere */
  .header__area.scrolled .header__wrap {
    padding: 4px 0;
  }

  .header__area.scrolled .header__powered {
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
  }

  .header__area.scrolled .header__powered img {
    width: 120px;
    margin-top: 0;
  }

  .header__area.scrolled .org-logo {
    width: 50px;
    max-height: 50px;
  }

  .header__area.scrolled .org-name {
    font-size: 16px;
  }

  .header__area.scrolled .org-info-icon {
    margin-top: 2px;
  }

  .header__area.scrolled .org-info-icon {
    width: 16px;
    height: 16px;
  }

  .header__area.scrolled .header__btns {
    gap: 6px;
  }

  .header__area.scrolled .header__btns .btns,
  .header__area.scrolled .header__btns .h-btn {
    transform: scale(0.9);
  }
}

/* ---------- RTL (Hebrew): mirror the header only ---------- */
/* The document keeps dir=ltr by design (see i18n.js); scoping direction to
   the header grid mirrors columns, flex rows and justify-self for free. */
body.rtl .header__wrap {
  direction: rtl;
}