/* ==========================================================================
   Site header - TWO variants, deliberately not one component with a flag.
   .c-header--bar   the full-bleed 1920x99 band on all seven inner pages
   .c-header--pill  the floating 1278x68 rounded pill on the landing page only
   ========================================================================== */

/* The pill floats over the hero photograph and IS white. The inner-page bar is
   NOT: all seven inner frames sample its ground at #f7f7f7 - Field Grey, the
   same as the page behind it, at zero spread. There is no visible band at all,
   only the rule under it, and the 1920x99 Rectangle 145 the node tree carries
   is filled with the page colour. It had been white here since the component
   was written. */
.c-header{ background:var(--c-white); }
.c-header--bar{ background:var(--c-field); }

/* --- inner-page bar ----------------------------------------------------- */

.c-header--bar{
  display:flex;
  align-items:center;
  /* 101, not 99. Rectangle 145 is the 1920x99 white band and Rectangle 144 is
     a separate 1920x2 gold rule sitting at y99, so the header occupies 101 and
     the breadcrumb below it starts at y121. Under the global border-box this
     leaves the band itself 99 and puts the rule under it, which is what every
     inner frame draws - at 99 the whole page ran 2px high. */
  height:101px;
  /* Hairline Gold at 65%, not at full strength: the rule samples #d2bd9d on
     all seven inner frames, and 0.65 x #c2a170 over #f7f7f7 is #d2bd9d to the
     channel. Kept translucent rather than flattened so it composites the same
     way wherever the band sits. */
  border-bottom:2px solid var(--c-gold-rule);
  /* The logo sits on the container's left edge (x321 at 1920) and the
     language switcher ends on its right (x1599), so the bar's content is the
     nav's 1278 - the width every section is on (DESIGN.md, The One Width
     Rule). The frames drew the logo 16px in, at x337, and with the switcher
     added the row ran 26px past the container on the right; both went on
     24 Sep 2026, and the nav takes `margin-inline:auto` between the two.

     The header's contents are NOT centred in the band: the logo's 196x54 box
     is at y25..79 and the nav labels' boxes at y55..78, both ending 20px above
     the band's 99 bottom. Measured on all seven - see the link rule below.

     Written as a relationship, not a literal: a literal left edge is a PAGE
     COORDINATE, and below about 1600 the old literal 337 pushed the seventh
     nav item off the right edge of the window - the band is full bleed, so
     it never clipped and never wrapped, it scrolled the document sideways on
     every inner page. */
  padding-inline:max(var(--c-page-gutter), calc((100% - var(--c-container)) / 2));
}

/* --- landing pill: floats over the hero photograph ---------------------- */

.c-header--pill{
  position:absolute;
  left:50%;
  top:54px;
  transform:translateX(-50%);
  width:var(--c-container);
  height:68px;
  display:flex;
  align-items:center;
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-pill);
  box-shadow:var(--c-sh-header);
  z-index:2;
}

.c-header__logo{ flex:0 0 auto; }
.c-header__logo img{ height:44px; width:auto; }

/* 196x54 at y25..79, which is the 465x128 lockup at scale - not the 44 the
   landing pill uses - and it sits 20px above the band's bottom, not centred. */
.c-header--bar .c-header__logo{
  width:196px;
  align-self:flex-end;
  margin-bottom:20px;
}
.c-header--bar .c-header__logo img{ height:54px; }
.c-header--pill .c-header__logo{ margin-left:24px; }

.c-header__nav{
  display:flex;
  align-items:center;
  /* Label boxes sit on a uniform 71px rhythm in every frame. Each link is
     padded 12px so its active underline runs label width + 24 (measured on all
     five inner frames that have one), which leaves 47px between padded boxes. */
  gap:47px;
  height:100%;
}

.c-header--bar .c-header__nav{ margin-inline:auto; }
.c-header--pill .c-header__nav{ margin-left:auto; margin-right:24px; gap:36px; }

.c-header__link{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
  /* see .c-header--bar: the label's box ends 20px above the band's bottom, not
     centred in it. Measured ink rows 59..72 against a 99 band on the Academy
     render; centring put it at 41..55, 18px high, on every inner page. */
  padding:0 12px;
  font:500 var(--c-fs-nav)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  transition:color var(--c-ease);
}

/* The link stays the band's full 99 so its active underline can sit on the
   bottom edge; the padding is what puts the label's line box at 55.8..79.2,
   which lands its ink on the frame's 59..72. */
.c-header--bar .c-header__link{
  align-items:flex-end;
  padding-bottom:20px;
}

.c-header__link:hover{ color:var(--c-green); }

/* --- the burger: absent above 1120, and the only control below it -------- */

.c-header__burger{
  display:none;
  position:relative;
  /* 44x44, not the 32x32 the metadata carries. The GLYPH is 26x19 and that is
     measured - three 26x2 bars at y85/93/101 on Search.png - but a 32px box
     misses the 44px touch floor, and the frame's own right inset of 34 is
     wide enough to hold 44 without moving the glyph's centre off x346. */
  width:44px; height:44px;
  margin-left:auto;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
}

.c-header__burger__box{
  position:relative;
  display:block;
  width:26px; height:19px;
  margin:0 auto;
}

.c-header__burger__bar{
  position:absolute;
  left:0;
  width:26px; height:2px;
  background:var(--c-ink);
  /* The system's own .18s, and transform only. The Flat-At-Rest Rule is about
     elevation on hover; a control that changes what it means has to say so. */
  transition:transform var(--c-ease), opacity var(--c-ease);
}
/* the measured 8px pitch: 85, 93, 101 */
.c-header__burger__bar:nth-child(1){ top:0; }
.c-header__burger__bar:nth-child(2){ top:8px; }
.c-header__burger__bar:nth-child(3){ top:16px; }

/* Open is an X on the same three bars rather than a second glyph - see the
   template's note on why there is no separate close control. */
[aria-expanded="true"] .c-header__burger__bar:nth-child(1){ transform:translateY(8px) rotate(45deg); }
[aria-expanded="true"] .c-header__burger__bar:nth-child(2){ opacity:0; }
[aria-expanded="true"] .c-header__burger__bar:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.c-header__scrim{ display:none; }

/* --- the language switcher: c-header.tpl's .c-lang, js1/c-lang.js ------- */
/* DERIVED, not measured - no frame draws it (docs/architecture.md). Closed, it is
   a nav label: the nav's 20px Medium in ink, green under the pointer, with a
   caret and no box, because it sits in the nav's row and a field there would
   be the only boxed thing in the header. Open, it is the multi-select's list
   (multiselect.css): Paper Cream, a Hairline Gold stroke, the control radius,
   the chosen row in the gold fill that means "chosen". */

.c-lang{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  margin-left:24px;
}
.c-header--pill .c-lang{ margin-left:0; margin-right:12px; }
.c-header--pill .c-header__nav{ margin-right:12px; }

/* The bar's labels are not centred in the band - their line box ends 20px
   above its bottom (see .c-header--bar above). The switcher's 44px box
   centres its own label on that same line: 20 - (44 - 23.44) / 2 ≈ 10. */
.c-header--bar .c-lang{ align-self:flex-end; margin-bottom:10px; }

/* Without script: the three codes as links, the current one underlined the
   way the current nav item is. */
.c-lang__list{
  display:flex;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
/* the script hides it once the dropdown stands in for it */
.c-lang__list[hidden]{ display:none; }
.c-lang__link{
  display:flex;
  align-items:center;
  min-height:44px;
  font:500 var(--c-fs-nav)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  transition:color var(--c-ease);
}
.c-lang__link:hover{ color:var(--c-green); }
.c-lang__link[aria-current="true"]{
  text-decoration:underline 3px var(--c-green);
  text-underline-offset:6px;
}

/* the field */
.ss-main.c-lang__select{
  width:auto;
  height:44px;
  min-height:44px;
  /* the caret is the multi-select's glyph, on the right: this field is read
     left to right like the labels beside it, it has no value column to line
     up with */
  padding:0 26px 0 8px;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%231c1c1c'/%3E%3C/svg%3E") no-repeat right 0 center;
  border:0;
  border-radius:var(--c-r-control);
  box-shadow:none;
  font:500 var(--c-fs-nav)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  transition:color var(--c-ease);
}
.ss-main.c-lang__select:hover{ color:var(--c-green); }
.ss-main.c-lang__select .ss-arrow{ display:none; }
.ss-main.c-lang__select .ss-values{ padding:0; }
.ss-main.c-lang__select .ss-values .ss-single{
  padding:0;
  font:inherit;
  line-height:var(--c-lh-sans);
  overflow:visible;
}
/* closed, the code alone; the name is the open list's */
.ss-main.c-lang__select .c-lang__name{ display:none; }

/* one focus treatment, the system's (base.css) - not the vendor's glow */
.ss-main.c-lang__select:focus{ box-shadow:none; }
.ss-main.c-lang__select:focus-visible{
  outline:2px solid var(--c-green);
  outline-offset:3px;
}

/* the list - appended to <body>, so nothing here is scoped by the header */
.ss-content.c-lang__select{
  min-width:180px;
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  box-shadow:var(--c-sh-card);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  overflow:hidden;
}
.ss-content.c-lang__select .ss-search{ display:none; }
.ss-content.c-lang__select .ss-list .ss-option{
  gap:12px;
  min-height:44px;
  padding:0 16px;
  color:var(--c-ink);
  border-left:0;
}
.ss-content.c-lang__select .c-lang__code{ min-width:2em; font-weight:500; }
/* hover and the keyboard's highlight: a tint, so it never reads as chosen */
.ss-content.c-lang__select .ss-list .ss-option:hover:not(.ss-disabled),
.ss-content.c-lang__select .ss-list .ss-option.ss-highlighted{
  background:var(--c-cream-warm);
  color:var(--c-ink);
  border-left:0;
}
.ss-content.c-lang__select .ss-list .ss-option:not(.ss-disabled).ss-selected,
.ss-content.c-lang__select .ss-list .ss-option:not(.ss-disabled).ss-selected:hover{
  background:var(--c-gold);
  color:var(--c-ink);
}

/* ==========================================================================
   Below 1120 - the nav bar does not fit and becomes a drawer.

   MEASURED IN THE BROWSER, not estimated from advances. The estimate said
   1024 and the estimate was wrong by 87px: the rendered row is 941px wide at
   the designed 47px gap and 803px at the relaxed 24, because seven Cyrillic
   labels at 20px Medium plus 12px of link padding each side come out further
   apart than adding up their advances suggests. So the real floor is

     803 row + 196 logo + 32 margin + 2 x 40 gutter = 1111

   and 1120 is that rounded up. See tokens.css for the three-breakpoint set
   this belongs to.
   ========================================================================== */

@media (max-width: 1119px){

  /* +9 on top of the page's own 16 gutter, which lands the 26px glyph's right
     edge on the x359 all four mobile frames draw it at. The button is 44 wide
     around a 26 glyph, so its own 9px of padding is what the offset cancels -
     the TAP TARGET reaches the 16 gutter and the GLYPH sits where the frame
     puts it, which is the only way to have both. */
  .c-header__burger{
    display:block;
    margin-right:9px;
    /* ABOVE the drawer, not under it. The template promises that the burger
       is the only control and that it becomes an X in place; the panel is
       right-anchored and would otherwise cover the very button that closes
       it, leaving the scrim and the Escape key as the only ways out. */
    z-index:21;
  }

  /* Both variants collapse to the same object: logo left, burger right, on
     the page ground. All four mobile frames draw exactly this, the landing
     one included - and that is the frame that has a pill at 1920. */
  .c-header,
  .c-header--bar,
  .c-header--pill{
    position:relative;
    left:auto; top:auto;
    transform:none;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    gap:16px;
    padding:var(--c-header-top-sm) var(--c-page-gutter) 20px;
    background:var(--c-field);
    /* No rule on mobile, and that is measured rather than assumed: on Team,
       Listing and Search there is no inked row anywhere between the logo's
       bottom at y120 and the breadcrumb's ink at y147. */
    border-bottom:none;
    border-radius:0;
    box-shadow:none;
    /* The header is the drawer's stacking context, so ITS z-index - not the
       drawer's 20 - is what the open menu competes with page content on.
       The pill's desktop 2 capped the whole drawer under the landing page's
       search panel (3) and map; 20 puts every variant's drawer, scrim and
       burger over the page and the cookie notice (18) and under the skip
       link (30) and the modals (100, 1000), on every page. The 21/20/19
       below order the three against each other inside it. */
    z-index:20;
  }

  /* The logo does NOT scale, and this is the finding that keeps the header
     honest. Its wordmark inks 128x44 on Search.png at 1920 and 128x44 on
     Search.png at 393 - the same box, to the pixel, on both. So the band's
     only change below 1024 is what happens to the right of it. */
  .c-header--bar .c-header__logo,
  .c-header--pill .c-header__logo{
    width:196px;
    align-self:auto;
    margin:0;
  }
  .c-header--bar .c-header__logo img,
  .c-header--pill .c-header__logo img{ height:54px; }

  /* The switcher stands beside the burger, not in the drawer: one tap, and
     visible before a visitor who cannot read the page has opened anything.
     Later in the source than the burger, so `order` puts it first. */
  .c-header--bar .c-lang,
  .c-header--pill .c-lang{
    order:1;
    align-self:auto;
    margin:0 0 0 auto;
  }
  .c-header__burger{ order:2; margin-left:0; }

  /* --- the drawer ------------------------------------------------------- */

  .c-header--bar .c-header__nav,
  .c-header--pill .c-header__nav{
    position:fixed;
    z-index:20;
    top:0; right:0; bottom:0;
    /* Wide enough for «Политика за поверителност» at 20/500 and never more
       than four fifths of the smallest designed screen. */
    width:min(320px, 82vw);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    height:auto;
    margin:0;
    /* Top: clear of the header band, so the first link opens below the burger
       rather than beside it - 66 above the logo + the logo's 54 + the 20 it
       sits clear of, which is the band the four mobile frames draw.
       Left: the footer's mobile list indents its links 10 from the gutter. */
    padding:calc(var(--c-header-top-sm) + 54px + 20px + env(safe-area-inset-top))
            var(--c-page-gutter)
            calc(24px + env(safe-area-inset-bottom))
            calc(var(--c-page-gutter) + 10px);
    background:var(--c-field);
    /* the header bar's own rule, stood on end */
    border-left:2px solid var(--c-gold-rule);
    box-shadow:var(--c-sh-header);
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform var(--c-ease), visibility var(--c-ease);
  }

  .c-header--bar .c-header__nav.is-open,
  .c-header--pill .c-header__nav.is-open{
    transform:translateX(0);
    visibility:visible;
  }

  /* 35px pitch - the footer's mobile quick-link rhythm, which is the system's
     own existing answer to these seven items stacked on a 393 screen. The
     link keeps the nav's 20px Medium rather than the footer's 16/700, because
     this is the nav. */
  .c-header--bar .c-header__link,
  .c-header--pill .c-header__link{
    align-items:center;
    /* Shrunk to the label, not stretched to the panel: the active underline
       is "a short green underline directly under its label", and a link that
       filled the row would run it the panel's whole width. The 44px floor is
       met by the row's own height rather than by its width, which is the one
       axis a phone actually constrains. */
    align-self:flex-start;
    height:auto;
    min-height:44px;
    padding:8px 0;
  }

  /* The bar's active treatment, verbatim - a short green underline and
     nothing else, no weight change and no colour change. It sits on the
     label's own box because the link is now shrink-to-fit. */
  .c-header--bar .c-header__link[aria-current="page"]::after,
  .c-header--pill .c-header__link[aria-current="page"]::after{
    bottom:6px;
  }

  .c-header__scrim{
    display:block;
    position:fixed;
    z-index:19;
    inset:0;
    background:rgba(28,28,28,.5);
    border:0;
  }
  .c-header__scrim[hidden]{ display:none; }

  /* Set on <html> while the drawer is open, so the page behind it does not
     scroll under the panel. */
  .c-nav-lock{ overflow:hidden; }
}

/* Relaxed gap between 1024 and 1360, where the bar is back but the container
   is not yet the designed 1278: the seven labels advance 483 and the 47px gap
   would put the row at 723 against the 682 a 1024 viewport leaves it. */
@media (min-width: 1120px) and (max-width: 1359px){
  /* 20, not 24, and the switcher 12 from the nav, not 24: the language
     switcher's 61px went into a row the comment above had already measured
     at 9px to spare, and at 1120 it scrolled the page 36px sideways. */
  .c-header__nav,
  .c-header--pill .c-header__nav{ gap:20px; }
  .c-header--bar .c-header__nav{ margin-left:28px; }
  .c-header--bar .c-lang{ margin-left:12px; }
}

/* Russian's seven labels run 40px wider than Bulgarian's («Команда» is 108
   against «Екип»'s 69), and the gaps above were measured to Bulgarian's with
   4px to spare - so below 1440 the switcher left the viewport. The six gaps
   give it back, in Russian only. */
@media (min-width: 1120px) and (max-width: 1359px){
  .c-header__nav:lang(ru),
  .c-header--pill .c-header__nav:lang(ru){ gap:13px; }
}
@media (min-width: 1360px) and (max-width: 1439px){
  .c-header__nav:lang(ru),
  .c-header--pill .c-header__nav:lang(ru){ gap:40px; }
}

/* Below 360 the logo's fixed 196, the switcher and the burger leave the
   header's 16px gaps 10px too many: at 320 the row scrolled sideways. */
@media (max-width: 359px){
  .c-header,
  .c-header--bar,
  .c-header--pill{ gap:4px; }
}

/* The pill is the container, so it follows it rather than restating 1278. */
@media (min-width: 1120px){
  .c-header--pill{ width:min(var(--c-container), 100% - 2 * var(--c-page-gutter)); }
}

/* The active treatment exists only on the bar: the landing page is not in
   the nav, so the pill has no active item to express. */
.c-header__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  /* Rectangle 170 and its siblings: 5px tall, sitting directly on the band's
     2px gold rule. The 12px link padding makes this label width + 24. */
  height:5px;
  background:var(--c-green);
}

/* ==========================================================================
   Pagination - c-pagination.tpl

   Derived, not measured: no frame in the file draws a paginator. Every value
   below is the system's own - the field's height, fill, stroke and radius for
   a page number, and the gold "chosen" fill for the current one. See the
   component's own notes for why it exists at all.
   ========================================================================== */

.c-pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.c-pager__page,
.c-pager__step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--c-field-h);
  height:var(--c-field-h);
  padding:0 12px;
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  font:400 var(--c-fs-body)/1 var(--c-sans);
  color:var(--c-ink);
  transition:background var(--c-ease), color var(--c-ease);
}

.c-pager__page:hover,
.c-pager__step:hover{
  background:var(--c-green);
  color:var(--c-white);
}

/* The one sanctioned meaning of a gold fill: this option is chosen. */
.c-pager__page--current{
  background:var(--c-gold);
  border-color:var(--c-gold);
  color:var(--c-ink);
}