/* =====================================================================
   ttlm — topbar (see custom-header-section.html)

   ONE layout at every width, the desktop mockup's, with fluid spacing
   (and no "Powered by" text — the PerfectDeed logo alone, per request):
     [org logo] ........ [DONATE NOW] ........ [Share] [EN] [PerfectDeed]
   DONATE NOW shows from tablet up (d-none d-md-flex) and Share on desktop
   only (d-none d-xl-flex, as in the shared partial); below 1200px the
   template's fixed bottom bar provides both as well, so on phones the row
   is [org logo + i] ........ [EN] [PerfectDeed].

   - A 3-column grid, 1fr | auto | 1fr: the middle column (DONATE NOW) is
     at the exact center of the bar as long as each side group fits in its
     half. When a side group is wider than its half (only on narrow
     phones), its column grows and the button shifts a little instead of
     overlapping anything.
   - Every size is fluid (clamp(min, vw, max)): the desktop values at the
     top end, phone values at the bottom end, everything in between
     interpolates — no per-breakpoint jumps.
   - Below 1200px the Bootstrap .container cap is lifted so the bar uses
     the full width (the shared template capped it at 720px up to 1094px,
     which wasted ~150px on each side on tablets).
   - The template's fixed bottom bar is kept below 1200px; its tweaks
     (height, blue buttons) are in css/mobile-bottom-bar.css.

   Loaded after /shared/topbar/topbar.css and style.css/responsive.css
   (additionalCss goes right before </head>); selectors here are one level
   more specific than the shared ones they replace.
   ===================================================================== */

/* ---------- shell ---------- */

@media (max-width: 1199.98px) {
  .header__area .container {
    max-width: none;
  }
}

.header__wrap {
  display: grid;
  /* Left track may shrink to 0 (the logo scales down with it); the right
     track never goes below its content, so Share / EN / PerfectDeed can't
     overflow onto the button. While there is room both get equal 1fr
     shares, which is what keeps DONATE NOW at the exact center. */
  grid-template-columns: minmax(0, 1fr) auto 1fr;
  grid-template-areas: "logo donate right"; /* replaces the shared areas */
  align-items: center;
  column-gap: clamp(6px, 1.2vw, 15px);
  padding: clamp(5px, 0.8vw, 10px) 0;
}

/* ---------- left: org logo (clickable) + "i" button ---------- */
/* Both open the organisation info modal (#organization-info-modal), like the
   org name + "i" of the shared partial. .org-info-icon keeps the shared
   topbar.css styling (circled "i", smaller from 768px, top-aligned). */

.ttlm-header__brand {
  grid-area: logo;
  justify-self: start;
  align-self: start;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.ttlm-header__logo-link {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  line-height: 0;
}

.header__wrap .org-logo {
  width: clamp(72px, 14vw, 190px);
  max-width: 100%; /* lets the column shrink it on the narrowest phones */
  max-height: clamp(30px, 5vw, 65px);
  object-fit: contain;
  min-width: 0;
}

/* Blue "i": ring (CSS border) and glyph (inline SVG with fill="currentColor"
   in the partial) in --ttlm-blue like the DONATE NOW buttons; the template's
   a:hover { color: initial !important } would turn the glyph black. */
.header__wrap .org-info-icon {
  flex: 0 0 auto;
  margin-top: 0;
  color: var(--ttlm-blue);
  border-color: var(--ttlm-blue);
}

.header__wrap .org-info-icon:hover {
  color: var(--ttlm-blue) !important;
  background: var(--white);
}

.header__wrap .org-info-icon svg {
  width: 100%;
  height: 100%;
  transition: opacity 0.2s;
}

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

@media (max-width: 767.98px) {
  .header__wrap .org-logo {
    width: clamp(72px, 28vw, 152px);
    max-height: 53px;
  }
}

/* ---------- center: DONATE NOW ---------- */

.ttlm-header__donate {
  grid-area: donate;
  justify-self: center;
  display: flex;
}

/* beats the shared a.btns.donate-btn (189x40 at >= 1200px). Blue like the
   reference campaign's button (--ttlm-blue, see theme-colors.css); the
   shared .btns:hover turns the background transparent with a theme-color
   border/text, so give the hover the same blue. */
.header__wrap .ttlm-header__donate .btns {
  width: auto;
  height: clamp(36px, 4.4vw, 48px);
  padding: 0 clamp(12px, 2.8vw, 36px);
  font-size: clamp(13px, 1.8vw, 20px);
  font-weight: 600;
  white-space: nowrap;
  background-color: var(--ttlm-blue);
}

.header__wrap .ttlm-header__donate .btns:hover {
  color: var(--ttlm-blue) !important; /* .btns:hover uses !important */
  border-color: var(--ttlm-blue);
}

/* ---------- right: Share + language + Powered by ---------- */

.ttlm-header__right {
  grid-area: right;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 11px);
}

.ttlm-header__right > *,
.header__wrap .header__btns > * {
  flex-shrink: 0; /* the pills keep their size; the row never overlaps */
}

.header__wrap .header__btns {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 11px);
}

/* Share button ONLY (direct child): the language picker's trigger is also a
   <button> inside .header__btns, deeper in the tree — a bare "button"
   selector here hit it too and broke the picker on phones. */
.header__wrap .header__btns > button.h-btn {
  height: clamp(32px, 3.6vw, 40px);
  width: auto;
  padding: 0 clamp(8px, 1.2vw, 12px);
  font-size: clamp(12px, 1.3vw, 14px);
  gap: clamp(4px, 0.6vw, 7px);
}

.header__wrap .header__btns > button.h-btn img {
  width: clamp(12px, 1.4vw, 16px);
}

.header__wrap .header__btns div.h-btn {
  width: clamp(56px, 9vw, 103px);
  height: clamp(32px, 3.6vw, 40px);
}

/* Language picker trigger (built by flags.js, styled in flags.css).
   In flags.css two boxes inside the pill have a FIXED 93px width:
   .flag-innerss (which also draws the chevron as its background image, at
   95% 50%) and the trigger label (.language-picker__flag, 93x36px). Inside
   a 58-103px pill that overflows to the right: the chevron lands outside
   the pill (over the PerfectDeed logo on phones) and the overflow pushes
   the whole right group off the viewport. The label also starts with an
   empty 27px flag placeholder (::before — the flag classes never match the
   "en"/"fr" values) that shoves "EN" to the right. Make the whole chain
   fill the pill instead: every box 100% wide/tall, no padding, text
   centered, chevron pinned 10px from the pill's right edge, placeholder
   hidden. The dropdown items are untouched (.language-picker__item). */
.header__wrap .h-lang .flag-innerss {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-size: clamp(9px, 1vw, 12px) auto;
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) 50%;
}

.header__wrap .h-lang .language-picker {
  display: block;
  height: 100%;
}

.header__wrap .language-picker__button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.header__wrap .language-picker__label.language-picker__flag {
  box-sizing: border-box;
  width: 100%;
  height: 100% !important; /* flags.css sets 36px !important */
  justify-content: center;
  padding: 0 clamp(18px, 2vw, 24px) 0 clamp(4px, 0.6vw, 8px); /* room for the chevron */
  font-size: clamp(12px, 1.3vw, 17px);
}

.header__wrap .language-picker__label.language-picker__flag::before {
  display: none;
}

.header__wrap .language-picker__label.language-picker__flag em {
  margin-left: 0;
}

/* Language dropdown: the pill is narrow (56–103px) so the dropdown that
   inherits width:100% clips item text. Give it a fixed min-width and
   anchor it to the right edge of the pill so it doesn't overflow the
   viewport on phones. */
.header__wrap .h-lang {
  position: relative;
}

.header__wrap .h-lang .language-picker__dropdown {
  width: auto;
  min-width: 90px;
  right: 0;
  left: auto;
}

.header__wrap .h-lang .language-picker__list a {
  justify-content: center;
}

/* PerfectDeed logo only (no "Powered by" text, removed from the markup). */
.header__wrap .header__powered {
  display: flex;
  align-items: center;
}

.header__wrap .header__powered a {
  display: flex;
}

.header__wrap .header__powered img {
  width: clamp(48px, 12vw, 199px);
  margin-top: 0;
}

/* Phones: PerfectDeed logo 32% bigger than the fluid value (+20%, then
   +10% more, per request). */
@media (max-width: 767.98px) {
  .header__wrap .header__powered img {
    width: clamp(64px, 15.8vw, 199px);
  }
}

/* Smallest phones: Share becomes icon-only so the row still fits.
   Direct child only — see the note above (this used to hide the picker's
   label span and squash its button to 32px). */
@media (max-width: 575.98px) {
  .header__wrap .header__btns > button.h-btn {
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .header__wrap .header__btns > button.h-btn span {
    display: none;
  }
}

/* ---------- compact "scrolled" state (>= 1200px, class set by topbar.js) ---------- */

@media (min-width: 1200px) {
  .header__area.scrolled .header__wrap .org-logo {
    width: 120px;
    max-height: 45px;
  }

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

  .header__area.scrolled .header__wrap .header__powered img {
    width: 120px;
  }
}