/*!
 * ais-header.css - AIS Technolabs iGaming header
 *
 * Companion to ais-header.js. The JS emits the markup and the menu data; this
 * file is the geometry that makes it work. Until now it lived in a <style>
 * block inside keno-games-software.html, which meant the header was NOT
 * portable: copying the JS to another page produced markup with no styling.
 *
 * EXTRACTED VERBATIM. Every declaration below is byte-identical to what was in
 * the page; the move was verified by diffing computed styles for 11 selectors
 * across 11 viewport widths before and after. Nothing was tidied or
 * "improved" in the same change - a refactor that also edits is a refactor you
 * cannot prove.
 *
 * Load order matters: this must come AFTER site.css, because several rules
 * here neutralise site.css defaults by overriding rather than by specificity.
 *
 * Usage:  <link rel="stylesheet" href="/assets/css/ais-header.css">
 *         <div id="ais-header"></div>
 *         <script src="/assets/js/ais-header.js"></script>
 *
 * ---------------------------------------------------------------------------
 * Original rationale, preserved from the page:
 *
 *  ================================================================
 *      HEADER FIT — page-scoped, geometry only.
 * 
 *      Design, markup and behaviour are the shared site-layout.js / site.css ones.
 *      Nothing here restyles the header. It only reclaims space so the logo, the
 *      eight main menus and the contact buttons share ONE row, the way the
 *      original six-item header was laid out.
 * 
 *      Where the space came from, measured at 1440:
 *        - "Hire Top Talent" removed .............................. ~149px
 *        - .navbar > .container padding 40px -> 0, margin 30 -> 10 ..  100px
 *        - label size 16px -> ~13px at this width .................  ~150px
 *      Eight labels at 16px need 1200px; the row has roughly 1050px to give.
 * 
 *      The label size is fluid rather than fixed, so only the narrowest desktops
 *      pay for the extra menus. The curve is calibrated against the measured
 *      ceiling — the largest label size before the contact block is pushed off the
 *      right edge — which with SEVEN top-level menus is 14px at 1340, 14.5px at
 *      1366, 15px at 1400 and 16px at 1440 and above:
 * 
 *          clamp(14px, calc(1.25vw - 2.75px), 16px)
 *          -> 14px at 1340, 14.3px at 1366, 14.8px at 1400, 15.3px at 1440,
 *             16px from 1500 up
 * 
 *      It caps at 16px, which is the original header's own label size, so the row
 *      fills the blank space without the header growing or the design changing.
 *      (17px fits at 1600 and 20px at 1920, but that would be larger than the
 *      design's own type, so the cap stays at 16px.)
 * 
 *      Below 1340px the labels wrap to a second line rather than overflow the
 *      viewport the way the original does; below 1025px the original mobile
 *      drawer is used exactly as before.
 *      ================================================================
 * ---------------------------------------------------------------------------
 */

/* STICKY HEADER
   site-layout.js injects `#site-header{position:sticky;top:0}` for the pages
   that use the shared mount. This page mounts the header through
   ais-header.js, which replaces #ais-header with the <header> itself, so that
   rule matches nothing here and the header scrolled away.

   Stick the <header> directly. It is a direct child of <body>, so its
   containing block is the initial containing block and it gets the whole page
   as sticky range. body{overflow-x:hidden} on this page propagates to the
   viewport (html sets no overflow), so body's used overflow stays visible and
   does not trap the sticky element in a zero-height scrollport.

   z-index 1000 matches the value site-layout.js uses and clears .sidebar-icon
   (z-index 50). site.css's `header nav` already paints background + shadow. */
header.ais-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
}

@media (min-width: 1340px) {
  /* reclaim the gutter — the row keeps the original flex layout */
  .ais-nav .navbar > .container {
    max-width: none;
    width: auto;
    flex: 1 1 auto;   /* .navbar is a flex row; without this the container is
                         content-sized and everything packs to the left */
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 0;
    padding-right: 0;
  }
  .ais-nav .main_menu { flex: 1 1 auto; }
  .ais-nav .main_menu > ul { flex: 0 0 auto; flex-wrap: nowrap; }
  /* auto pushes contact to the far right when there is room, and collapses
     to the padding when there is not */
  .ais-nav .main_menu > .header-btn-content { flex: 0 0 auto; gap: 8px; margin-left: auto; padding-left: 12px; }
  .ais-nav .main_menu > ul > li > .menu-heading.title-menu {
    font-size: clamp(14px, calc(1.25vw - 2.75px), 16px);
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* Above the point where the row is fully packed (~1520px of container), stop
   the header stretching. The label size caps at the design's own 16px, so on a
   wider screen the extra width could only reappear as blank space between the
   menu and the contact buttons — 101px at 1600 and 421px at 1920. Capping the
   container freezes the packed layout instead, so every desktop from 1340 up
   renders the same proportions — a constant ~21px between the menu and the
   contact buttons rather than 101px at 1600 and 421px at 1920. The original
   header capped this container at 1440px; this restores that idea at the width
   the current seven-item row actually needs. */
@media (min-width: 1520px) {
  .ais-nav .navbar > .container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 1025-1339: keep the original single row, but let the labels wrap onto a
   second line rather than overflow the viewport the way the original does. */
@media (min-width: 1025px) and (max-width: 1339.98px) {
  .ais-nav .main_menu > ul { flex-wrap: wrap !important; white-space: normal !important; }
  .ais-nav .main_menu > ul > li > .menu-heading.title-menu { font-size: 14px; padding-left: 5px; padding-right: 5px; }
}

/* CASINO GAMES BRANCH — one panel, nothing hidden.

   Casino Games sits inside Casino Software as its own branch. Rendering that
   branch as a further hover tier meant a 4th panel: Casino Software > Casino
   Games > group > links. That failed twice over:
     - a max-height/overflow guard turned the branch panel into a scroll box,
       and a scroll box CLIPS absolutely-positioned descendants, so the 4th
       panel's links were cut away and the branch's own labels were sliced on
       the left by the implied overflow-x;
     - even unclipped, burying 36 links a fourth hover deep hides them.

   So the branch opens as a single mega panel instead: its nine groups are laid
   out in columns with their links already visible. Three tiers, no 4th hover,
   every item on screen at once. Scoped to .aisnest, so only the Casino Games
   branch is affected — every other menu keeps the original behaviour. */
@media (min-width: 1025px) {
  .ais-nav .main_menu li.aisnest { position: static; }

  /* the branch panel becomes the mega panel */
  .ais-nav .main_menu li.aisnest > .sub_menu {
    top: 0;
    left: 100%;
    width: 760px;
    max-width: calc(100vw - 340px);
    padding: 16px 20px 10px;
    columns: 3;
    column-gap: 24px;
  }
  .ais-nav .main_menu li.aisnest > .sub_menu > li {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 14px;
  }
  /* group heading: a label now, not a control — it opens nothing */
  .ais-nav .main_menu li.aisnest > .sub_menu > li > .sub-menu-heading {
    padding: 0 0 5px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e7e4f3;
    font-size: 14px;
    font-weight: 700;
    color: #14123c;
    cursor: default;
    pointer-events: none;
  }
  .ais-nav .main_menu li.aisnest > .sub_menu > li > .sub-menu-heading svg { display: none; }

  /* The links, previously a 4th hover tier, are simply shown under the heading.
     visibility is `inherit`, NOT `visible`. `visible` here was a real bug:
     visibility is an inherited property, so an explicit `visible` on a child
     CANCELS the `hidden` it would otherwise inherit from the closed panel. The
     panel's `opacity: 0` still hid these lists from the eye, but an opacity-0
     element is still hit-testable — so they sat over the page as invisible
     hover targets, and brushing one opened the whole menu.
     It only became noticeable once the header went sticky: these boxes are
     absolutely positioned inside the header, so they used to scroll away with
     it and now stay pinned over the viewport at every scroll offset.
     `inherit` makes them track the panel: hidden (and un-hittable) while it is
     closed, visible the moment it opens. */
  .ais-nav .main_menu li.aisnest > .sub_menu > li > .sub_menu {
    position: static;
    display: block;
    visibility: inherit;
    opacity: 1;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    max-height: none;
    overflow: visible;
  }
  .ais-nav .main_menu li.aisnest > .sub_menu > li > .sub_menu > li > a {
    display: block;
    padding: 4px 0;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Panel containment. The first-level panel is offset left:-89px under its
   label and the second-level flyout opens to the RIGHT of it at left:219px.
   With six top-level items the rightmost ones still landed on screen; with
   eight they do not. Open the right-hand menus leftward instead. */
@media (min-width: 1025px) {
  .ais-nav .main_menu > ul > li:nth-last-child(-n+2) > .sub_menu { left: auto; right: 0; }
  .ais-nav .main_menu > ul > li:nth-last-child(-n+3) .sub_menu .sub_menu { left: auto; right: 100%; }
}
/* In the wrapped tier the labels re-flow, so the item that ends up hard against
   the right edge is the 4th-from-last, not the 3rd. */
@media (min-width: 1025px) and (max-width: 1339.98px) {
  .ais-nav .main_menu > ul > li:nth-last-child(-n+4) .sub_menu .sub_menu { left: auto; right: 100%; }
}
