/* ---------------------------------------------------------------------------
 * The header below the desktop breakpoint, the menu, the tab bar on phones
 * and the footer spacing.
 *
 * Below 1200px the theme collapses the header (navbar-expand-xl) and folds
 * the account controls - search, sign-in or the avatar - behind a second
 * hamburger. Tapping it drops a whole second bar under the header: 110px of
 * dark strip on a phone holding a 150px search box and, on a row of its own,
 * one button; 56-67px on a tablet with two controls pushed to the far right.
 * On top of that the brand link keeps Bootstrap's navbar-brand padding
 * (--bs-navbar-brand-padding-y: 1.30625rem = 20.9px above and below the logo),
 * so the bar mobile-header.css meant to be 50-56px tall is 81px on a phone and
 * 91px on a tablet.
 *
 * Here instead: one row, 56px on a phone and 64px on a tablet - menu, logo,
 * then search and the account controls inline - and on a phone a five-tab
 * bar along the bottom (footer-sticky-menu.blade.php).
 *
 * Also one spacing fix for the desktop menu (section 2), which the four new
 * sections would otherwise wrap onto two lines.
 *
 * Spacing is on a 4px grid: 4 / 8 / 12 / 16. Every rule outside section 2 is
 * scoped to html:not(.tv-mode): a television lays out on the 1280px desktop
 * canvas (master.blade.php) and must never see the phone header or the bar.
 * ------------------------------------------------------------------------- */

:root {
  --uz-hdr-h: 56px;      /* header row, phone */
  --uz-hdr-btn-h: 36px;  /* sign-in / subscribe buttons in that row */
  --uz-tab-h: 56px;      /* tab bar row, before the home-indicator inset */
  --uz-tab-accent: var(--bs-primary, #e50914);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  :root {
    --uz-hdr-h: 64px;
    --uz-hdr-btn-h: 40px;
  }
}

/* ===== 1. The header, below 1200px ====================================== */

@media (max-width: 1199.98px) {

  /* one row, one height: the brand padding was the extra 25-35px */
  html:not(.tv-mode) header .iq-navbar {
    min-height: var(--uz-hdr-h);
    padding-top: 0;
    padding-bottom: 0;
  }

  html:not(.tv-mode) header .landing-header {
    gap: 12px;
    min-height: var(--uz-hdr-h);
  }

  html:not(.tv-mode) header .landing-header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* left: menu button, then the logo, 16px apart once the button's own
     8px of padding is counted */
  html:not(.tv-mode) header .landing-header > .d-flex:first-child {
    gap: 8px !important;   /* .gap-3 is !important */
    min-width: 0;
  }

  /* the icon buttons: a 40px hit area drawing a 24px glyph; the negative
     margin lines the glyph up with the 16px page gutter instead of the
     button's edge */
  html:not(.tv-mode) header .uz-icon-btn {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    padding: 0;
    transition: background-color .15s ease;
    width: 40px;
  }

  html:not(.tv-mode) header .uz-icon-btn i { font-size: 24px; line-height: 1; }
  html:not(.tv-mode) header .uz-icon-btn svg { height: 22px; width: 22px; }
  html:not(.tv-mode) header .toggle-rounded-btn.uz-icon-btn { margin-inline-start: -8px; }

  html:not(.tv-mode) header .uz-icon-btn:active { background: rgba(255, 255, 255, .12); }

  html:not(.tv-mode) header .uz-icon-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* right: no second hamburger, no second bar - the account area sits in
     the row itself */
  html:not(.tv-mode) header .landing-header .navbar-toggler { display: none; }

  html:not(.tv-mode) header .landing-header #navbarSupportedContent {
    background: transparent;
    box-shadow: none;
    display: flex !important;   /* beats .collapse:not(.show) */
    flex-basis: auto;
    flex-grow: 0;
    height: auto !important;    /* in case a .collapsing height was left on it */
    position: static;
    width: auto;
  }

  html:not(.tv-mode) header .landing-header #navbarSupportedContent > .d-flex {
    align-items: center !important;   /* .align-items-end */
    flex-direction: row !important;   /* .flex-column */
    gap: 8px !important;              /* .gap-0 */
  }

  html:not(.tv-mode) header .landing-header .right-panel .navbar-nav {
    align-items: center;
    flex-direction: row;
    float: none;
    gap: 8px;
    margin: 0 !important;             /* .mt-3 on the search list */
    padding: 0;
    width: auto;
  }

  html:not(.tv-mode) header .landing-header .right-panel .navbar-nav .nav-item { padding: 0; }

  /* the two text buttons: one height, one radius, no wrapping */
  html:not(.tv-mode) header .landing-header .login-btn,
  html:not(.tv-mode) header .landing-header .subscribe-btn {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-size: 14px !important;       /* mobile-header.css says .88rem !important */
    font-weight: 600;
    height: var(--uz-hdr-btn-h);
    letter-spacing: .01em;
    line-height: 1;
    padding: 0 16px !important;       /* ditto, 7px 14px */
    white-space: nowrap;
  }

  /* the avatar: 32px on a 40px target */
  html:not(.tv-mode) header .landing-header .dropdown-user {
    min-height: 40px !important;
    min-width: 40px !important;
    padding: 0 4px !important;
  }

  html:not(.tv-mode) header .dropdown-user-wrapper .dropdown-user .user-image {
    height: 32px;
    width: 32px;
  }

  /* the drawer: its title sat 50px above the first link */
  html:not(.tv-mode) .horizontal-nav.mobile-offcanvas .offcanvas-header {
    padding-bottom: 16px;
    padding-top: 16px;
  }
}

/* a hover tint only where there is a pointer: on a phone :hover sticks to
   whatever was tapped last */
@media (hover: hover) and (max-width: 1199.98px) {
  html:not(.tv-mode) header .uz-icon-btn:hover { background: rgba(255, 255, 255, .08); }
}

/* tablets: the theme's search icon stays (it opens the field leftwards, as on
   a desktop) but on the same 40px box as everything else in the row -
   mobile-header.css gives it a 44px min-height that left the glyph 9px high */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html:not(.tv-mode) header .landing-header #search-drop {
    align-items: center;
    display: inline-flex !important;   /* .d-md-inline-block */
    height: 40px;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    padding: 0 !important;
    width: 40px;
  }
}

/* phones: the 150px inline search field becomes an icon that opens /search,
   which has a full-width field of its own */
@media (max-width: 767.98px) {
  html:not(.tv-mode) header .landing-header .search-box { display: none; }
  html:not(.tv-mode) .search-page header .uz-search-link { display: none !important; }

  /* "БАГЦ АВАХ" in capitals is 30px wider than the row can spare at 360px */
  html:not(.tv-mode) header .landing-header .subscribe-btn {
    padding: 0 12px !important;
    text-transform: none !important;
  }

  /* the account menu: header.blade.php gives it min-width:370px, which on a
     360-414px phone pushes its left edge off the screen (and min-width beats
     its own max-width:90vw). Keep it 16px clear of both edges. */
  html:not(.tv-mode) header .landing-header .dropdown-user-wrapper .dropdown-user-menu {
    min-width: 0;
    width: min(320px, calc(100vw - 32px));
  }
}

/* ===== 2. The desktop menu, 1200px and up =============================== */

/* One gap between items, not two. The theme puts a margin-right on every
   item (2.3125em, stepping down to .8rem with the width) and
   dashboard-fix.css adds gap:1rem on top, so the labels sat 45-69px apart -
   and with the four new sections the two-word labels broke onto two lines at
   1200-1366px. 12px of link padding either side of a 4px gap is 28px between
   labels, and a label never wraps. Not tv-scoped: the 1280px television
   canvas has the same menu and the same problem. */
@media (min-width: 1200px) {
  header #header-menu { gap: 4px; }
  header #header-menu > li { margin-right: 0; }

  header #header-menu > li > .nav-link {
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }
}

/* ===== 3. The tab bar, phones only ====================================== */

/* hidden by default: the theme already hides .footer-stcky-menu, and this
   repeats it for any layout that loads this file and not the theme */
.uz-tabbar { display: none; }

@media (max-width: 767.98px) {

  html:not(.tv-mode) .uz-tabbar {
    background: rgba(14, 14, 16, .86);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid rgba(255, 255, 255, .08);
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
    display: block;
    left: 0;
    /* the home indicator: env() is 0 unless the viewport is viewport-fit=cover */
    padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
    position: fixed;
    right: 0;
    z-index: 999;    /* over the page; just under the header (1000). The
                        drawer (#navbar_main, 1200) lives inside the header,
                        whose backdrop-filter makes it a stacking context of
                        its own - so anything above 1000 here would paint over
                        the open drawer. Bootstrap modals (1055), SweetAlert
                        (1060) and the film dialog (3000) are all above. */
  }

  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html:not(.tv-mode) .uz-tabbar { background: #0e0e10; }
  }

  html:not(.tv-mode) .uz-tabbar__list {
    display: grid;
    grid-template-columns: repeat(var(--uz-tabs, 5), minmax(0, 1fr));
    height: var(--uz-tab-h);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  html:not(.tv-mode) .uz-tabbar__item { min-width: 0; }

  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link {
    align-items: center;
    background: transparent;          /* header.blade.php: li a:hover { #222 } */
    border-radius: 0;
    color: rgba(255, 255, 255, .62);
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    justify-content: center;
    padding: 0 2px;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
  }

  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link i {
    font-size: 24px;
    line-height: 1;
    transition: transform .15s ease;
  }

  html:not(.tv-mode) .uz-tabbar__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link:hover { background: transparent; }
  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link:active { color: #fff; }
  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link:active i { transform: scale(.9); }

  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link.is-active { color: #fff; }

  /* the current page: white, the filled glyph, and a short red bar on the top
     edge */
  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link.is-active::before {
    background: var(--uz-tab-accent);
    border-radius: 0 0 3px 3px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 24px;
  }

  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link:focus-visible {
    border-radius: 12px;
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  /* room for the bar: the copyright line, and the black under it, end above
     it instead of behind it. The side padding (plus the container's own 16px)
     keeps the centred line out of the back-to-top button's column: 16px
     gutter + 44px button + 4px. */
  html:not(.tv-mode) body .footer .footer-bottom {
    padding-bottom: calc(24px + var(--uz-tab-h) + env(safe-area-inset-bottom)) !important;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* the back-to-top button sat 84px up - level with the bar on an iPhone;
     put it 16px above the bar, on the page gutter */
  html:not(.tv-mode) #back-to-top .top {
    bottom: calc(var(--uz-tab-h) + 16px + env(safe-area-inset-bottom));
    height: 44px;
    line-height: 44px;
    right: 16px;
    width: 44px;
  }

  /* and a toast should not cover the bar it came from */
  html:not(.tv-mode) .snackbar-pos.bottom-left,
  html:not(.tv-mode) .snackbar-pos.bottom-center,
  html:not(.tv-mode) .snackbar-pos.bottom-right {
    bottom: calc(var(--uz-tab-h) + env(safe-area-inset-bottom));
  }
}

/* very narrow phones (320-359px): five labels need a size smaller - at 11px
   "Гишүүнчлэл" is 63px and the column is 57px */
@media (max-width: 359.98px) {
  html:not(.tv-mode) .uz-tabbar { padding-left: 4px; padding-right: 4px; }
  html:not(.tv-mode) .uz-tabbar__label { font-size: 10px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link,
  html:not(.tv-mode) .uz-tabbar .uz-tabbar__link i { transition: none; }
}

/* ===== 4. The menu labels =============================================== */

/* The shelves read in capitals, as the owner writes them. The theme
   capitalises each word of these links (.iq-nav-menu > li > a), which would
   print "Олон Ангит". */
#header-menu.uz-main-nav > .nav-item > .nav-link {
  letter-spacing: .04em;
  text-transform: uppercase;
}

@media (min-width: 1200px) {
  #header-menu.uz-main-nav > .nav-item > .nav-link {
    font-size: 14px;
    font-weight: 600;
  }
}

/* ===== 5. The footer ==================================================== */

/* The theme pads the footer 80px above and 100px below three short columns:
   on a 1440px screen 621px of mostly empty black between the last row and
   the copyright line. One rhythm instead - 56 / 40 on a desktop, 40 / 16 on
   a phone - and a hairline over the copyright bar, so it reads as the end of
   the footer rather than another gap. */
.footer.footer-modern .footer-top {
  padding-bottom: 40px;
  padding-top: 56px;
}

@media (max-width: 991.98px) {
  .footer.footer-modern .footer-top {
    padding-bottom: 16px;
    padding-top: 40px;
  }
}

.footer.footer-modern .footer-title {
  font-weight: 600;
  letter-spacing: .01em;
}

.footer.footer-modern .uz-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
}