/* ==========================================================================
   SANGU header polish — spacing/alignment refinements only.
   The bar stays white; this file only fixes rhythm, hover states and the
   legacy -8px alignment hacks. Loaded AFTER header_style_min.css so
   equal-specificity rules here win.
   ========================================================================== */

/* softer, modern elevation instead of the harsh 30px black shadow */
.header {
    -webkit-box-shadow: 0 1px 0 rgba(20, 20, 26, .05), 0 10px 28px rgba(20, 20, 26, .08);
    box-shadow: 0 1px 0 rgba(20, 20, 26, .05), 0 10px 28px rgba(20, 20, 26, .08);
}

/* --- main nav: one consistent rhythm ------------------------------------ */
/* The bar holds six labels and Georgian ones are long. Measured with the real
   FiraGO face at 14px, the six labels are 788px of text on their own; with the
   links' padding and even tight gaps that needs ~890px. What the bar actually
   has, once the logo (190px), the burger (109px, absolutely positioned over the
   right edge) and the language switch (~95px) come out of the container:

       1366px screen -> 794px      1600px screen -> 976px
       1440px screen -> 776px      1920px screen -> 976px

   So below 1600 the row is 100–200px short, and the browser coped the only way
   it could: by breaking "ჩვენ შესახებ" onto a second line.

   Two rules settle it. A label may never break mid-item, and below 1600 the
   type and gaps step down to what the measurements allow — 12px with 14px gaps
   needs 779px, which clears both tight cases.

   The better fix is shorter labels: სტუდენტებისთვის -> სტუდენტებს and
   აბიტურიენტებისთვის -> აბიტურიენტებს frees 114px and lets the bar keep 14px
   type at every width. That is a wording decision, so this stands until it is
   taken. */
.header-nav__category {
    align-items: center;
    flex-wrap: nowrap;
    gap: 38px;
}
.header-nav__category li { margin-right: 0; }

/* the two-line bug itself: a label is one line, always */
.header-nav__category li a { white-space: nowrap; }

@media only screen and (max-width: 1599px) {
    .header-nav__category { gap: 14px; }
    .header-nav__category li a { font-size: 12px; }
}

/* non-jumpy underline: no layout shift, animates in from the left */
.header-nav__category li a {
    position: relative;
    padding: 8px 2px;
    border-bottom: 0 !important;
    transition: color .2s ease;
}
.header-nav__category li:hover a {
    border-bottom: 0 !important;
    color: #1d1d24;
}
.header-nav__category li:hover a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: #e32d44;
}

/* --- language switch: small pill + card dropdown ------------------------ */
.header-nav__lang {
    margin-top: 0;
    margin-left: 40px;
    font-size: 15px;
}
.header-nav__lang--active {
    padding: 9px 14px;
    line-height: 1;
    border: 1px solid #e4e4ea;
    border-radius: 100px;
    transition: border-color .2s ease, background .2s ease;
}
.header-nav__lang--active:hover {
    border-color: #cfcfd8;
    background: #fafafb;
}
.header-nav__lang--active img { margin-left: 7px; }

.header-nav__lang--items {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
}
.header-nav__lang:hover .header-nav__lang--items {
    height: auto;
    overflow: visible;
    margin-top: 8px;
    padding: 6px;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    -webkit-box-shadow: 0 14px 34px rgba(20, 20, 26, .14);
    box-shadow: 0 14px 34px rgba(20, 20, 26, .14);
}
/* invisible bridge so the dropdown doesn't close crossing the 8px gap */
.header-nav__lang:hover .header-nav__lang--items::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.header-nav__lang--items li a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.header-nav__lang--items li a:hover {
    background: #f5f5f7;
    color: #e32d44;
    text-decoration: none;
}

/* --- action icons: equal hit areas, gentle hover ------------------------- */
.header-icons {
    margin-left: 30px;
    margin-top: 0;
}
.header-icons__item {
    margin-top: 0;
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .2s ease;
}
.header-icons__item:hover { background: #f3f3f6; }
.header-icons .search-icon { margin-right: 8px; }

/* --- burger block: keep the red, add feedback ---------------------------- */
.header-menu {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: background .2s ease;
}
.header-menu:hover { background: #cb2038; }

/* mobile bar (≤800px): keep the legacy compact metrics */
@media only screen and (max-width: 800px) {
    .header-icons__item { width: 38px; height: 38px; }
    .header-nav__lang { margin-left: 0; }
}

/* the dropdown is a <ul>: never show list bullets */
.header-nav__lang--items,
.header-nav__lang--items li {
    list-style: none;
    margin: 0;
}

/* ---------- logo sizing: match by height, not width ----------------------
   The two logo files have different aspect ratios — logo.png is 162x83
   (1.95:1) and eng_logo.png is 464x273 (1.70:1). The legacy rules size them by
   width (.logo img { width: 100px }) and pin the container to 162px, which is
   the Georgian file's width. At an equal width the English mark renders 8px
   taller and sits differently in the header.

   A header logo is read by its height, so height is what must be equal. 51px
   is exactly what the Georgian logo already renders at, so this leaves it
   untouched and only brings the English one into line. */
/* The logo hangs from the header as a pennant that rests on the slider.

   It is one element with two zones rather than a flat plate: white at the top,
   because the crest is red-and-charcoal and would be unreadable on red, then
   brand red for the body, cut at the foot with an inward triangle — a ribbon
   tail. The white head also does the job the old plate did: the artwork behind
   changes every few seconds, so a bare mark would sometimes land on a light
   area and vanish.

   The drop reads as a proportion of the slider, not a fixed number. The slider
   is (100vw - 40px) wide at a 2.494:1 ratio, so 30% of its height is
   0.3 * (100vw - 40px) / 2.494 = 12.03vw - 4.8px; adding the 104px header gives
   the pennant's full height. It therefore keeps the same 30% at every width.

   Absolutely positioned inside .header__container (already position: relative);
   .logo keeps a fixed width so taking the pennant out of flow does not pull the
   nav left. Elevation is a drop-shadow filter, not box-shadow — box-shadow
   traces the unclipped box and would print a straight edge across the tail. */
.logo {
    width: 190px;
    flex: none;
}
.logo a {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: calc(12.03vw + 99px);   /* 104px header + 30% of the slider */
    max-height: 340px;              /* the tail stops growing on ultrawide */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 24px 0;
    /* Two layers. The lower one is the pennant itself, white head over red body.
       The upper one is a soft band painted from the fold downwards, so the head
       casts onto the body and the two zones read as stacked material instead of
       a flat colour change. */
    background-image:
        /* left edge catches the light, right edge falls away — the red body
           stops being a flat rectangle and reads as something with thickness */
        linear-gradient(90deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 16px),
        linear-gradient(270deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0) 18px),
        /* the white head casting down onto the red */
        linear-gradient(180deg, rgba(20, 20, 26, .32), rgba(20, 20, 26, 0)),
        linear-gradient(180deg, #fff 0 108px, var(--brand, #E32D44) 108px 100%);
    background-size:
        100% calc(100% - 108px),
        100% calc(100% - 108px),
        100% 16px,
        100% 100%;
    background-position: 0 108px, 0 108px, 0 108px, 0 0;
    background-repeat: no-repeat;
    /* head, body, then the inward triangle cut into the foot */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 34px), 0 100%);
    /* Two shadows, both tracing the cut shape: a tight one that draws the edge
       so the silhouette and the tail stay crisp, and a wide soft one underneath
       that lifts the whole pennant off the artwork. */
    /* Three shadows, each tracing the cut shape: a hairline that keeps the
       silhouette and the tail crisp, a directional one so the long red body
       casts sideways instead of only at its foot, and a wide soft one that
       lifts the whole pennant off the artwork. */
    filter:
        drop-shadow(0 2px 3px rgba(20, 20, 26, .32))
        drop-shadow(7px 9px 16px rgba(20, 20, 26, .26))
        drop-shadow(0 20px 36px rgba(20, 20, 26, .34));
    text-decoration: none;   /* the mark is text inside a link — no underline */
    z-index: 6;
    transition: filter .25s ease, transform .25s ease;
}
.logo a:hover {
    filter:
        drop-shadow(0 2px 3px rgba(20, 20, 26, .32))
        drop-shadow(0 22px 38px rgba(20, 20, 26, .38));
    transform: translateY(2px);   /* the pennant sways down, not up */
}
.logo img {
    width: auto;
    height: 72px;
    display: block;
    max-width: 100%;
}

/* The number owns the red body: it takes the space left under the crest and
   centres itself in it, with the tail's cut discounted from the bottom so the
   optical centre lands in the visible red rather than the full box.

   44px is measured, not guessed: in FiraGO Bold "#145" is 124px wide, against
   142px of usable width once the pennant's 24px side padding is removed. That
   is 87% — filled, with a clear margin either side. 48px would be 95% and read
   as jammed against the edges. */
.logo__mark {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 34px;   /* the tail cut */
    margin-top: 10px;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    letter-spacing: .01em;
    /* text-decoration set on the ancestor <a> is painted in the ancestor's
       colour, so a white span alone would still show the link's blue rule */
    text-decoration: none;
}

@media only screen and (max-width: 800px) {
    /* The mobile header is 60px and the slider only ~147px tall, so the same
       30% drop would be a stub. The pennant keeps its shape at a smaller size
       and stops being proportional. */
    .logo { width: 128px; }
    .logo a {
        width: 128px;
        height: 104px;
        padding: 10px 14px 0;
        background-image:
            linear-gradient(180deg, rgba(20, 20, 26, .26), rgba(20, 20, 26, 0)),
            linear-gradient(180deg, #fff 0 62px, var(--brand, #E32D44) 62px 100%);
        background-size: 100% 10px, 100% 100%;
        background-position: 0 62px, 0 0;
        background-repeat: no-repeat, no-repeat;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 18px), 0 100%);
        filter:
            drop-shadow(0 1px 2px rgba(20, 20, 26, .28))
            drop-shadow(0 9px 18px rgba(20, 20, 26, .26));
    }
    .logo a:hover { transform: none; }
    .logo img { width: auto; height: 40px; }
    /* 100px of usable width here, and only ~24px of red left under the crest
       once the tail is cut — so the number scales down rather than filling. */
    .logo__mark { margin-top: 4px; padding-bottom: 18px; font-size: 20px; }
    .menu-board__header--logo img { width: auto; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .logo a { transition: none; }
    .logo a:hover { transform: none; }
}

/* ---------- site authorship line ---------------------------------------- */
/* Sits under the footer logo, quiet but real text. Contrast is kept above the
   4.5:1 line: the footer ground is dark, so a mid grey would fail. */
.footer__copyright {
    padding: 18px 20px 26px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 8px;
}
.footer__copyright p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}
.footer__copyright span { color: #fff; }

/* ---------- header stacking order ---------------------------------------- */
/* The mega-menu panel lives after </header> in the document, and the legacy
   values put it below: .header is z-index 3 and .categoriebi is 2, so the whole
   header — including the pennant hanging 30% down the slider — painted over an
   open menu and hid its left column.
   
   One scale, written down so the next addition has somewhere to sit:
       slider artwork ....... 1-2
       header bar ........... 3   (.header, legacy)
       logo pennant ......... 6   (.logo a, inside the header)
       open mega menu ...... 12   (must clear the pennant)
       language dropdown ... 20   (opens above everything else) */
.categoriebi { z-index: 12; }