/* ============================================================================
   megamenu.css — the two desktop mega-menu dropdown panels
   Designer Jewellery (mr-mm-deep) and Jewellery Collection (mr-mm-flat)

   WHY A SEPARATE FILE
   -------------------
   .sub-menu-block / .sub-menu-lists / .desktop-categoryLink / .sub-menu-head are
   each declared in FOUR stylesheets: mrnew.css, stylesheet.css, index.css and
   index.min.css (586 KB on six lines — never hand-edit it). Editing any of them
   is how you break a header that renders on every page of the site. This file is
   loaded LAST from app/Views/templates/main.php and overrides only what it needs.

   HARD SAFETY RULES OBSERVED HERE
   -------------------------------
   1. EVERY rule lives inside `@media only screen and (min-width:1280px)`.
      The mobile/tablet hamburger accordion is scoped `max-width:1279px` in
      header.php, so the two bands are strictly disjoint and nothing in this file
      can reach the accordion. Do not move a rule outside the media block.
   2. Every selector is scoped under `.mr-mm`, a class that exists ONLY on those
      two dropdown panels. Nothing else on the page can be touched.
   3. index.min.css carries `a{color:#212529!important}`, so every link colour
      here needs `!important` — that is why the `!important`s are not laziness.
   4. Layout is chosen by SHAPE, not by menu name: `.mr-mm-deep` (children have
      grandchildren) vs `.mr-mm-flat` (they do not). See header.php.

   THE PROBLEM THIS FIXES (measured, 1280px viewport, panel 1033px wide)
   --------------------------------------------------------------------
   Designer Jewellery's 22 blocks hold 3546 px of real content. Bootstrap laid
   them out as .col-lg-2 at flex:0 0 20%, five per row, and every row stretched
   to its tallest cell — heights came out 570,570,570,570,570 / 445x5 / 120x5 /
   95x5 / 45,45 = 1275 px. 565 px of that (44%) was equal-height row padding and
   nothing else, and the panel scrolled 820 px inside its 470 px window.
   `column-count` + `break-inside:avoid` turns the row into true masonry, so each
   block occupies its own height and the columns pack to the content.

   Jewellery Collection had the opposite problem: 31 px of content per 45 px cell
   and one short word per 203 px column. It becomes a dense hairline-ruled index.

   Palette is the header's own: maroon #8a0f1b / #6a1618, gold #d8a440 / #b0895a,
   ink #2b2420, hairline #ece0dd.
   ============================================================================ */

@media only screen and (min-width: 1280px) {

  /* ==========================================================================
     1. SHARED PANEL CHROME
     ========================================================================== */

  /* The theme sets the panel's geometry on `ul.main-nav > li:hover >
     div.sub-menu-block` (position:fixed; width:81%; left:9.5%; max-height:475px;
     overflow-y:scroll). We keep that geometry and only redress it. */
  ul.main-nav > li.top-level-link > div.mr-mm {
    padding: 20px 30px 22px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-top: 2px solid #8a0f1b !important;
  }

  ul.main-nav > li.top-level-link:hover > div.mr-mm {
    background: #ffffff !important;
    box-shadow: 0 22px 44px -14px rgba(60, 0, 0, .30),
                0 2px 0 0 rgba(216, 164, 64, .35) inset !important;
    /* The theme pins this at 475px, which is what forced 820px of hidden
       scrolling. Masonry cut the content to 799px, so give the panel room to
       simply finish: on a standard 1080p desktop this resolves to 800px and the
       menu does not scroll at all. It stays bounded two ways so it can never run
       off-screen — the panel starts at top:6.6em (~105px), hence the 132px
       subtraction. The flat 620px line is the fallback for engines without min(). */
    max-height: 620px !important;
    max-height: min(800px, calc(100vh - 132px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d8c9c4 transparent;
  }

  /* A discreet scrollbar for the cases that still overflow (very long menus, or
     a short laptop viewport). The theme's default is the fat OS bar. */
  ul.main-nav > li.top-level-link > div.mr-mm::-webkit-scrollbar { width: 6px; }
  ul.main-nav > li.top-level-link > div.mr-mm::-webkit-scrollbar-track { background: transparent; }
  ul.main-nav > li.top-level-link > div.mr-mm::-webkit-scrollbar-thumb {
    background: #ddcdc8; border-radius: 6px;
  }
  ul.main-nav > li.top-level-link > div.mr-mm::-webkit-scrollbar-thumb:hover { background: #c9b3ad; }

  /* The panel sets white-space:nowrap and every descendant inherits it — that is
     what was clipping "TEMPLE JEWELLERY FINGER RIN" and "ANTIQUE DESIGNER
     PENDANT" mid-word. Release it for the whole panel; labels now wrap. */
  ul.main-nav > li.top-level-link > div.mr-mm,
  ul.main-nav > li.top-level-link > div.mr-mm * {
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* The theme alternates bg-white / bg-gray-mega-menu per cell to stripe the
     columns. With masonry the stripes land at random, so flatten them. */
  ul.main-nav > li.top-level-link > div.mr-mm .row,
  ul.main-nav > li.top-level-link > div.mr-mm .bg-white,
  ul.main-nav > li.top-level-link > div.mr-mm .bg-gray-mega-menu,
  ul.main-nav > li.top-level-link > div.mr-mm .color-card {
    background: transparent !important;
  }

  /* Already display:none in the theme at this width; pinned so a future theme
     edit cannot reintroduce them into the packed layout. */
  ul.main-nav > li.top-level-link > div.mr-mm .maga-megamenu-seprator,
  ul.main-nav > li.top-level-link > div.mr-mm .mobile-megamenu-arrow {
    display: none !important;
  }

  /* ==========================================================================
     2. DESIGNER JEWELLERY — masonry (.mr-mm-deep)
     ========================================================================== */

  /* Bootstrap's flex row becomes a multi-column block. `break-inside:avoid`
     keeps each category card whole, so columns pack by real content height
     instead of every row stretching to its tallest cell.

     FIVE columns is measured, not guessed. At the 1033px panel width of a 1280px
     viewport, packed row height came out: 5 cols = 757px, 6 cols = 772px,
     7 cols = 691px but only 124px per column. Six is WORSE than five because the
     narrower column wraps the long labels ("TEMPLE JEWELLERY PENDANT SETS") onto
     an extra line and the added height cancels the packing gain — leaf headings
     go from 16px to 31px. Do not "optimise" this to 6 without re-measuring; the
     sixth column only pays off from 1600px up, where it is applied below. */
  ul.main-nav > li.top-level-link > div.mr-mm-deep > .row {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    column-count: 5;
    column-gap: 30px;
    column-rule: 1px solid #f4edea;
  }

  ul.main-nav > li.top-level-link > div.mr-mm-deep > .row > div {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 0 18px !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep > .row > div:last-child { margin-bottom: 0 !important; }

  ul.main-nav > li.top-level-link > div.mr-mm-deep .color-card {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ---- category heading ---------------------------------------------------
     A hairline rule with a short gold segment under the start of the label:
     the whole hierarchy cue, at zero height cost. */
  ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head {
    display: block !important;
    position: relative;
    margin: 0 0 8px !important;
    padding: 0 0 7px !important;
    border-bottom: 1px solid #ece0dd !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #d8a440, #b0895a);
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head > span:first-child {
    display: block;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head span a {
    display: block !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    letter-spacing: .09em !important;
    font-weight: 600 !important;
    color: #8a0f1b !important;
    text-decoration: none !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head span a:hover,
  ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head span a:focus {
    color: #6a1618 !important;
    text-decoration: none !important;
  }

  /* ---- child links -------------------------------------------------------
     The density lever. The theme ran these at line-height 23px; 1.4 on a 11.5px
     font is ~16px, and a 21-item list loses ~145px on its own. */
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink {
    display: block !important;
    padding: 1px 0 1px 9px !important;
    position: relative;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    letter-spacing: .035em !important;
    font-weight: 400 !important;
    color: #5f5854 !important;
    text-decoration: none !important;
    transition: color .14s ease;
  }
  /* Gold marker, always present but transparent, so hovering cannot reflow the
     column — a width or font-weight change on hover would reshuffle masonry. */
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink::before {
    content: '';
    position: absolute;
    left: 0;
    top: .72em;
    width: 3px;
    height: 3px;
    background: #d8a440;
    opacity: 0;
    transition: opacity .14s ease;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink:hover,
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink:focus {
    color: #8a0f1b !important;
    font-weight: 400 !important;   /* the theme sets 600 on hover -> jitter */
    text-decoration: none !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink:hover::before,
  ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink:focus::before {
    opacity: 1;
  }

  /* Blocks with no children (Kalangi, Heritage, Pearl…) would otherwise read as
     an orphaned heading. Drop the rule and gold tick so they read as a link. */
  ul.main-nav > li.top-level-link > div.mr-mm-deep .color-card > .sub-menu-head:only-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-deep .color-card > .sub-menu-head:only-child::after {
    display: none;
  }

  /* ==========================================================================
     3. JEWELLERY COLLECTION — compact index (.mr-mm-flat)
     ==========================================================================
     Every child here is a leaf, so there is no hierarchy to show. 28 single
     words floating in a 5-across grid at 45px a cell read as an accident. Turn
     it into a dense hairline-ruled index: multi-column, one tap-target row per
     category, gold marker and tint on hover. */

  ul.main-nav > li.top-level-link > div.mr-mm-flat > .row {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    column-count: 5;
    column-gap: 36px;
    column-rule: 1px solid #f4edea;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat > .row > div {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .color-card {
    padding: 0 !important;
    margin: 0 !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head {
    display: block !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head > span:first-child {
    display: block;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a {
    display: block !important;
    position: relative;
    padding: 7px 6px 7px 14px !important;
    border-bottom: 1px solid #f2eae7 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    letter-spacing: .06em !important;
    font-weight: 500 !important;
    color: #433b37 !important;
    text-decoration: none !important;
    transition: color .14s ease, background-color .14s ease;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    background: #d8a440;
    transform: rotate(45deg) scale(0);
    transition: transform .16s ease;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a:hover,
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a:focus {
    color: #8a0f1b !important;
    background-color: #fdf8f6 !important;
    text-decoration: none !important;
  }
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a:hover::before,
  ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a:focus::before {
    transform: rotate(45deg) scale(1);
  }

  /* ==========================================================================
     4. WIDER SCREENS — one more column, more air
     ========================================================================== */
  @media only screen and (min-width: 1600px) {
    ul.main-nav > li.top-level-link > div.mr-mm { padding: 24px 34px 26px !important; }
    ul.main-nav > li.top-level-link > div.mr-mm-deep > .row { column-count: 6; column-gap: 32px; }
    ul.main-nav > li.top-level-link > div.mr-mm-flat > .row { column-count: 6; column-gap: 38px; }
    ul.main-nav > li.top-level-link > div.mr-mm-deep .sub-menu-head span a,
    ul.main-nav > li.top-level-link > div.mr-mm-deep ul.sub-menu-lists > li > a.desktop-categoryLink,
    ul.main-nav > li.top-level-link > div.mr-mm-flat .sub-menu-head span a { font-size: 12px !important; }
  }

  /* ==========================================================================
     5. REDUCED MOTION
     ========================================================================== */
  @media (prefers-reduced-motion: reduce) {
    ul.main-nav > li.top-level-link > div.mr-mm a,
    ul.main-nav > li.top-level-link > div.mr-mm a::before { transition: none !important; }
  }

}