/* ==========================================================================
   Desktop / large-screen presentation layer.

   Driven by the admin's «إعدادات الديسكتوب» page. Mirror of mobile.css:
   every rule lives behind min-width:861px so the mobile layer is untouched.

   Guidance applied:
   - Content is CAPPED (max-width), never fixed, so ultrawide monitors don't
     stretch the design out of proportion.
   - Body copy stays inside a ~700–800px measure even in full-bleed sections.
   - A header that hides on scroll-down and returns on scroll-up is the
     current standard; mega menus are the dominant pattern for large catalogues.
   - Mega panels: 3–5 groups, 7–9 links each, generous white space.
   ========================================================================== */

/* Desktop-only elements are hidden by DEFAULT, outside any media query, so
   they can never render unstyled on small screens. */
.topbar-strip { display: none; }
.mega { display: none; }

@media (min-width: 861px) {

  /* ---------- container ----------
     The width setting governs PAGE CONTENT only. The header, the footer and
     the announcement strip are chrome: they run edge to edge so the bar always
     spans the viewport, and narrowing the content never squeezes the nav or
     the footer columns into an awkward shape. */
  .wrap {
    max-width: var(--d-max-w, 1280px);
    padding-inline: var(--d-gutter, 28px);
  }

  header .wrap,
  footer .wrap {
    max-width: 100%;
    padding-inline: clamp(24px, 3vw, 64px);
  }

  /* Long-form copy keeps a readable measure even inside a wide container. */
  .hero p,
  .sec-head p,
  .atelier .txt p,
  .news p,
  .page-body p,
  .pdp-info .desc {
    max-width: var(--d-measure, 760px);
  }

  /* ---------- rhythm ---------- */
  section { padding-block: var(--d-sec-space, 96px); }
  /* hero height is owned by hero.css / HeroUI */

  /* ---------- grids ---------- */
  .prod-grid {
    grid-template-columns: repeat(var(--d-grid-cols, 4), minmax(0, 1fr));
    gap: var(--d-grid-gap, 28px);
  }
  .col-grid {
    grid-template-columns: repeat(var(--d-col-cols, 2), minmax(0, 1fr));
    gap: var(--d-grid-gap, 28px);
  }

  /* ---------- announcement strip ---------- */
  .topbar-strip {
    display: block;
    background: var(--plum);
    color: var(--gold-soft);
    text-align: center;
    font-size: .82rem;
    letter-spacing: .06em;
    padding: 9px 20px;
  }

  /* ---------- header behaviour ----------
     orchide.css makes the header sticky unconditionally, so turning the
     setting off has to actively undo it — otherwise the switch does nothing. */
  body:not(.d-sticky) header {
    position: relative;
    top: auto;
  }
  body.d-sticky header {
    position: sticky;
    top: 0;
    z-index: 90;
  }

  body.d-autohide header {
    transition: transform .3s ease;
    will-change: transform;
  }
  body.d-autohide.d-scrolled-down header { transform: translateY(-100%); }

  /* Shrink the bar once the page has moved — keeps focus on the content. */
  body.d-shrink header .nav {
    transition: height .25s ease;
  }
  /* Only the single-row layouts have a height to shrink; the centred layout
     is two rows and sizes itself, so shrinking it would squash it. */
  body.d-shrink.d-scrolled[data-dhead="classic"] header .nav,
  body.d-shrink.d-scrolled[data-dhead="split"] header .nav { height: 68px; }
  body.d-shrink.d-scrolled[data-dhead="centered"] header .nav { padding-block: 8px 4px; }
  body.d-shrink.d-scrolled header .brand .mono { font-size: 1.55rem; }

  /* ---------- header layouts ----------
     The bar has three children on desktop (.brand, .menu, .actions) — the
     burger is display:none above the breakpoint, so it is NOT a grid item.
     Every child is placed explicitly: relying on auto-placement put them in
     DOM order (brand, menu, actions) instead of the intended arrangement,
     which is why "split" came out wrong. In RTL the columns flow
     right-to-left on their own, so no direction-specific rules are needed. */

  /* classic — logo, menu, actions in one row (the default flex bar) */
  body[data-dhead="classic"] header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* centered — logo alone on top, menu centred beneath it */
  body[data-dhead="centered"] header .nav {
    display: grid;
    /* Same reasoning as "split": a 0 minimum is what keeps the two flanks
       equal, and therefore the logo genuinely centred. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    height: auto;
    row-gap: 4px;
    padding-block: 18px 6px;
  }
  body[data-dhead="centered"] header .brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }
  body[data-dhead="centered"] header .actions {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }
  body[data-dhead="centered"] header .menu {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: center;
    margin: 0;
  }

  /* split — menu at the start, logo centred, actions at the end.

     grid-row:1 on ALL THREE is load-bearing, not decoration. Auto-placement
     is "sparse": the cursor only moves forward. .brand comes first in the DOM
     and claims row 1 / column 2, so .menu — which asks for column 1, i.e.
     *behind* the cursor — gets pushed onto a new row, dragging .actions with
     it. That is what stacked the logo above the nav. Pinning the row keeps
     all three on one line regardless of DOM order. */
  body[data-dhead="split"] header .nav {
    display: grid;
    /* minmax(0,1fr) — NOT plain 1fr. `1fr` is shorthand for minmax(auto,1fr),
       so a column can never shrink below its content: the six-item nav forced
       column 1 to ~450px while the icons only needed ~150px, the two sides
       stopped being equal, and the logo drifted off centre. A 0 minimum makes
       both flanks mathematically identical, which is what actually centres
       the middle column. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: 92px;
    column-gap: 18px;
  }

  /* The flanks STRETCH across their whole column (the default justify-self)
     and align their contents from the inside.

     Do NOT put justify-self:start/end on these: that shrink-wraps the grid
     item to fit-content, whose minimum for a flex row is the widest single
     link — so the six-item nav collapsed and wrapped onto a second line.
     Stretching keeps the item as wide as the column, and justify-content
     (which is flow-relative, so it mirrors between Arabic and English) does
     the aligning instead. */
  body[data-dhead="split"] header .menu {
    grid-row: 1;
    grid-column: 1;
    justify-content: start;   /* right edge in Arabic, left edge in English */
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0;
    gap: clamp(12px, 1.5vw, 30px);
  }
  /* A centred logo leaves each flank only ~40% of the bar, so the split
     layout gets its own compact nav type — the tighter, smaller lettering
     luxury houses use for exactly this header. Without it a six-item nav
     cannot share the row with the logo. */
  body[data-dhead="split"] header .menu a {
    white-space: nowrap;
    font-size: clamp(.74rem, .55vw + .34rem, .9rem);
    letter-spacing: .03em;
  }

  body[data-dhead="split"] header .brand {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }

  /* ---------- stacked monogram (centred and split only) ----------
     The base sheet sets .brand to a column, then `header .brand` in
     orchide.css overrides it back to a row for every header. That is right for
     the classic layout, where the brand sits at one edge and stacking it would
     double the header height for no gain.

     But when the brand is centred it is the focal point, and the monogram
     reads as a crest above the wordmark rather than a bullet beside it. So the
     column is restored for these two layouts only. */
  body[data-dhead="centered"] header .brand,
  body[data-dhead="split"] header .brand {
    flex-direction: column;
    gap: 0;
  }

  /* The tuck that the base sheet applies and `header .brand .mono` removes.
     Cinzel carries noticeable descender space; without pulling the monogram
     down it floats away from the word it belongs to. */
  body[data-dhead="centered"] header .brand .mono,
  body[data-dhead="split"] header .brand .mono {
    margin-bottom: -2px;
  }

  /* Stacking adds roughly 45px. A fixed 92px bar would clip the wordmark, so
     the height becomes a floor rather than a ceiling. */
  body[data-dhead="split"] header .nav {
    height: auto;
    min-height: 92px;
    padding-block: 10px;
  }
  body.d-shrink.d-scrolled[data-dhead="split"] header .nav {
    height: auto;
    min-height: 74px;
    padding-block: 6px;
  }
  body[data-dhead="split"] header .actions {
    grid-row: 1;
    grid-column: 3;
    justify-content: end;     /* left edge in Arabic, right edge in English */
  }

  /* ---------- simple menu presentation (MenuUI) ---------- */
  .menu { gap: var(--nav-gap, 38px); }
  .menu a {
    font-size: calc(.9rem * var(--nav-size, 90%) / 90%);
    letter-spacing: var(--nav-track, .06em);
  }
  body[data-navcase="upper"] .menu a { text-transform: uppercase; }

  /* hover affordance */
  body[data-navhover="none"] .menu a::after { display: none; }
  body[data-navhover="fade"] .menu a::after { display: none; }
  body[data-navhover="fade"] .menu a { opacity: .72; }
  body[data-navhover="fade"] .menu a:hover,
  body[data-navhover="fade"] .menu a[aria-expanded="true"] { opacity: 1; }

  /* ---------- mega menu ----------
     The panel belongs to its nav item, not to the header. The <li> is the
     positioning context for an item-aligned panel; for a full-bleed panel we
     fall back to the header, which orchide.css already makes sticky. */
  .menu .has-mega-item { position: relative; }
  body[data-megafull="1"] .menu .has-mega-item { position: static; }

  .mega {
    position: absolute;
    top: 100%;
    background: #fff;
    border-top: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 80;
  }
  body[data-megashadow="1"] .mega,
  .mega { box-shadow: 0 24px 48px -28px rgba(46, 26, 36, .5); }

  /* full-bleed panel spans the bar; otherwise it hangs under its own item */
  body[data-megafull="1"] .mega { inset-inline: 0; }
  body[data-megafull="0"] .mega {
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 520px;
    border-radius: 0 0 14px 14px;
  }
  html[dir="rtl"] body[data-megafull="0"] .mega { transform: translateX(50%) translateY(-6px); }

  body[data-dmenu="mega"] .mega { display: block; }

  /* Opened by JS (which also handles the close delay and the keyboard), so a
     single .is-open class drives both the hover and the click mode. */
  .mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  html[dir="rtl"] body[data-megafull="0"] .mega.is-open { transform: translateX(50%); }
  body[data-megafull="0"] .mega.is-open { transform: translateX(-50%); }

  .mega-inner {
    max-width: 100%;
    margin-inline: auto;
    padding: 34px clamp(24px, 3vw, 64px) 38px;
    display: grid;
    grid-template-columns: repeat(var(--mega-cols, 4), minmax(0, 1fr));
    gap: 30px;
    align-items: start;
  }
  body[data-megafull="0"] .mega-inner { padding: 26px 28px 30px; gap: 22px; }

  .mega-card { display: block; }
  .mega-card .thumb {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--wine), var(--plum));
    margin-bottom: 11px;
  }
  .mega-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }
  .mega-card:hover .thumb img { transform: scale(1.05); }
  .mega-card .name {
    font-family: var(--serif);
    color: var(--plum);
    font-size: 1rem;
  }
  html[dir="rtl"] .mega-card .name { font-family: var(--ar); font-weight: 600; }

  .mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
  .mega-col a {
    display: block;
    padding: 8px 0;
    color: var(--ink);
    font-size: .93rem;
    transition: color .18s;
  }
  .mega-col a:hover { color: var(--wine); }

  /* featured card — the "next step" tile that closes the panel */
  .mega-feature {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    align-self: stretch;
    min-height: 100%;
  }
  .mega-feature img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mega-feature .cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 26px 16px 14px;
    background: linear-gradient(transparent, rgba(26, 18, 22, .82));
    color: #fff;
    font-size: .92rem;
    text-align: center;
  }

  /* Keyboard users get a visible focus ring inside the panel (WCAG 2.4.7). */
  .mega a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ---------- footer ---------- */
  .foot-grid {
    grid-template-columns: 1.6fr repeat(auto-fit, minmax(150px, 1fr));
  }
  body[data-dfoot="2"] .foot-grid { grid-template-columns: 1.6fr repeat(2, minmax(0, 1fr)); }
  body[data-dfoot="3"] .foot-grid { grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); }
  body[data-dfoot="4"] .foot-grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  body[data-dfoot="5"] .foot-grid { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); }

  /* An element the admin hid on desktop. */
  .d-off { display: none !important; }
}

/* --------------------------------------------------------------------------
   Split layout, narrow desktops.

   A centred logo forces the two flanks to be equal, which caps the nav at
   roughly 40% of the bar — and since the bar is now full-bleed, that flank is
   a fraction of the VIEWPORT, not of the content cap. Measured against the real labels, a six-item Arabic
   nav stops fitting below ~1440px however tight the type gets — and a header
   that clips its own links is worse than one that rearranges. So below that
   width the split layout falls back to the classic arrangement, which has no
   symmetry constraint. Above it, split renders as designed.
   -------------------------------------------------------------------------- */
@media (min-width: 861px) and (max-width: 1439px) {
  body[data-dhead="split"] header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* The brand is still stacked in this range, so a fixed height would clip
       the wordmark. Same floor-not-ceiling reasoning as the wide layout. */
    height: auto;
    min-height: 92px;
    padding-block: 10px;
  }
  body[data-dhead="split"] header .menu,
  body[data-dhead="split"] header .brand,
  body[data-dhead="split"] header .actions {
    grid-row: auto;
    grid-column: auto;
    justify-self: auto;
  }
  body[data-dhead="split"] header .menu { justify-content: center; }
}

/* Very large displays: hold the cap, just add breathing room. */
@media (min-width: 1800px) {
  .wrap { padding-inline: calc(var(--d-gutter, 28px) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  body.d-autohide header,
  body.d-shrink header .nav,
  .mega,
  .mega-card .thumb img { transition: none; }
}