/* Mobile navigation — rid-energy.uz
 *
 * The motion is lifted from reyta.uz: the panel is wiped open with a clip-path
 * that grows out of the corner the button sits in, the icon counter-rotates
 * between bars and cross, the links arrive in sequence, and the page behind is
 * blurred and locked. That interaction is what was asked for and it is good —
 * it makes the panel feel attached to the button that opened it rather than
 * dropped on top of the page.
 *
 * The SKIN is not copied. reyta is soft glass with 21-27px corners and violet
 * washes; this site runs square corners everywhere (refinement.css zeroes the
 * radius on every control), hairline seams on the partner wall, and a 3px blue
 * rail as its "this one is live" signal. Rounded glass pills would read as a
 * component borrowed from somewhere else. So the panel is a panel schedule:
 * square, seamed, with the rail doing the work the radius would have done.
 *
 * Spacing is one rhythm, not a pile of one-off values:
 *     10px  panel inset and the gap under the bar
 *     14px  inside a cell
 *      1px  seam
 *      8px  between the two tools
 *     44px  control height, matching the language button already in the bar
 */

.rn-trigger,
.rn-backdrop,
.rn-panel { display: none; }

@media (max-width: 991px) {
  /* The theme's own button and list are replaced wholesale: its handler slides
     #nav open in the document flow, which shoved the hero down the page. */
  .header-style1 .navbar-toggler { display: none !important; }
  .menu_area #nav { display: none !important; }

  .rn-trigger {
    position: relative;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin-left: 10px;
    place-items: center;
    /* Neutral, not brand blue. The panel it opens holds a blue call to action
       and a blue rail on the current page; a blue button to open a menu made
       four blue things compete in one small surface, and the two that carry
       meaning lost. */
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
  }
  .rn-trigger:hover,
  .rn-trigger[aria-expanded="true"] {
    border-color: rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .11);
  }
  .rn-trigger:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  /* Two glyphs stacked in one cell, swapped by rotation. Bars and cross rather
     than an icon font: three rules, no extra request. */
  .rn-trigger-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
  }
  .rn-trigger-icon i {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 420ms cubic-bezier(.16,.9,.18,1.16), opacity 200ms ease;
  }
  .rn-trigger-icon i:nth-child(1) { top: 0; }
  .rn-trigger-icon i:nth-child(2) { top: 6px; }
  .rn-trigger-icon i:nth-child(3) { top: 12px; }

  .rn-trigger[aria-expanded="true"] .rn-trigger-icon i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .rn-trigger[aria-expanded="true"] .rn-trigger-icon i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  .rn-trigger[aria-expanded="true"] .rn-trigger-icon i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .rn-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    border: 0;
    padding: 0;
    background: rgba(3, 6, 9, .72);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: opacity 260ms ease, backdrop-filter 340ms ease, -webkit-backdrop-filter 340ms ease;
  }
  .rn-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .rn-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 10px;
    left: 10px;
    z-index: 2;
    display: block;
    max-height: calc(100dvh - 104px - env(safe-area-inset-bottom));
    overflow: auto;
    /* No rail along the top: it marked nothing, and it spent the same blue the
       current-page marker below uses to mean something. The panel reads as
       attached because it wipes open out of the button's corner. */
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0b1218;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Grows out of the top-right corner, which is where the button is. */
    clip-path: inset(0 0 100% 72%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    transform: translate3d(0, -8px, 0);
    transition:
      clip-path 460ms cubic-bezier(.16,.88,.18,1),
      opacity 200ms ease,
      transform 460ms cubic-bezier(.16,.88,.18,1),
      visibility 0s linear 460ms;
  }
  .rn-panel[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  /* Seams are drawn by the grid's own background showing through a 1px gap —
     the device the partner wall already uses. */
  .rn-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .rn-link {
    position: relative;
    display: flex;
    min-height: 56px;
    align-items: center;
    background: #0b1218;
    padding: 14px;
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
      background 180ms ease,
      opacity 300ms ease,
      transform 400ms cubic-bezier(.16,.9,.18,1.12);
  }
  .rn-link:hover,
  .rn-link:focus-visible { background: #121c24; color: #fff; }
  .rn-link:focus-visible { outline: 2px solid #0066ff; outline-offset: -2px; }

  /* Current page: the rail again, inset on the leading edge. */
  .rn-link[data-current="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: #0066ff;
  }
  .rn-link[data-current="true"] { color: #4d96ff; }

  .rn-panel[data-open="true"] .rn-link { opacity: 1; transform: none; }
  .rn-panel[data-open="true"] .rn-link:nth-child(1) { transition-delay: 70ms; }
  .rn-panel[data-open="true"] .rn-link:nth-child(2) { transition-delay: 110ms; }
  .rn-panel[data-open="true"] .rn-link:nth-child(3) { transition-delay: 150ms; }
  .rn-panel[data-open="true"] .rn-link:nth-child(4) { transition-delay: 190ms; }
  .rn-panel[data-open="true"] .rn-link:nth-child(n+5) { transition-delay: 230ms; }

  /* One action, full width. The language switcher stays in the bar — see the
     note at the top of mobile-nav.js. */
  .rn-tools { padding: 10px; }

  .rn-cta {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: #0066ff;
    padding: 0 16px;
    color: #fff;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 200ms ease;
  }
  .rn-cta:hover,
  .rn-cta:focus-visible { background: #1a7cff; color: #fff; }
  .rn-cta:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

  html.rn-locked { overflow: hidden; }
}

/* Under ~340px two columns start breaking words; one column reads better than
   a cramped grid. */
@media (max-width: 359px) {
  .rn-links { grid-template-columns: minmax(0, 1fr); }
  .rn-link { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-trigger-icon i,
  .rn-backdrop,
  .rn-panel,
  .rn-link { transition-duration: .01ms !important; }
}