/* ==========================================================================
   Durusi · menu.css  (2026-08-24)
   Stripe-style two-level "Services" mega-menu for the site header.

   Scope: .site-header .nav only. No other stylesheet is edited; this file is
   linked last on every page that carries the nav, so it wins on order where
   specificity ties.

   House rules honoured here:
   · white panel, hairline var(--line) borders, 20px radius, layered shadow
   · whitespace and rules instead of nested cards
   · logical properties throughout, so ar/ (dir="rtl") mirrors for free and
     the second-level panel opens to the LEFT in Arabic with no extra CSS
   · the menu only exists on a hover-capable, fine-pointer viewport >= 900px.
     Below that .mm collapses to display:contents and "Services" renders as
     an ordinary nav link, so the existing hamburger nav is untouched.
   ========================================================================== */

/* ------------------------------------------------------------- 1 · baseline
   No menu anywhere by default. display:contents removes the wrapper box, so
   .mm-trigger sits inside .nav exactly where the old plain
   <a href="services.html">Services</a> sat: same flex gap, same mobile card
   styling from rb.css, same everything. */
.mm{ display:contents; }
.mm-panel,
.mm-caret{ display:none; }


/* ================================================================ 2 · desktop
   Everything below only applies to a real pointer on a wide screen. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){

/* --- trigger ------------------------------------------------------------- */
.site-header .nav .mm{
  display:inline-flex;
  align-items:center;
  align-self:stretch;      /* full nav height, so the pointer has room */
  position:static;         /* panel anchors to .nav, which rb.css makes relative */
}
.site-header .nav .mm-trigger{
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:100%;
  text-decoration:none;
}
.site-header .nav .mm-caret{
  display:block;
  inline-size:10px;
  block-size:6px;
  flex:none;
  color:currentColor;
  opacity:0.65;
  transition:transform .18s ease, color .18s ease, opacity .18s ease;
}
.site-header .nav .mm.is-open .mm-caret{
  transform:rotate(180deg);
  color:var(--soul);
  opacity:1;
}
.site-header .nav .mm-trigger:focus-visible{
  outline:2px solid var(--soul);
  outline-offset:4px;
  border-radius:9px;
}

/* --- panel --------------------------------------------------------------- */
.site-header .nav .mm-panel{
  display:grid;
  /* two columns: the service lines, then the panel they reveal.
     row 3 is a slack track so the two lines stay stacked at the top while the
     second-level panel spans the full height of whichever is taller. */
  grid-template-columns:clamp(198px,21vw,248px) clamp(248px,30vw,322px);
  grid-template-rows:auto auto 1fr;
  gap:0;

  position:absolute;
  top:100%;
  margin-block-start:22px;
  inset-inline-end:0;                 /* mirrors in RTL with no extra rule */
  max-inline-size:calc(100vw - 48px); /* never overflows the viewport */

  padding:14px;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:
    0 1px 2px rgba(16,39,24,0.05),
    0 14px 30px -10px rgba(16,39,24,0.12),
    0 34px 64px -22px rgba(16,39,24,0.18);
  z-index:20;

  opacity:0;
  visibility:hidden;                  /* keeps every row out of the tab order */
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* The pointer has to be able to cross the 22px gap between trigger and panel
   without falling into a dead zone. This invisible bridge covers it, and stops
   just short of the nav link boxes so it never swallows a click on them.
   (It is inert while the panel is closed: pointer-events:none is inherited.) */
.site-header .nav .mm-panel::before{
  content:"";
  position:absolute;
  inset-inline:0;
  top:-26px;
  block-size:26px;
}

.site-header .nav .mm.is-open > .mm-panel,
:root:not(.mm-js) .site-header .nav .mm:hover > .mm-panel,
:root:not(.mm-js) .site-header .nav .mm:focus-within > .mm-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s;
}

/* --- the two service lines (column one) ---------------------------------- */
.site-header .nav .mm-group{ display:contents; }

.site-header .nav .mm-row{
  grid-column:1;
  align-self:start;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  column-gap:10px;
  padding:12px 13px;
  border-radius:13px;
  opacity:1;
  text-decoration:none;
  transition:background .16s ease;
}
.site-header .nav .mm-row .mm-t{ grid-column:1; }
.site-header .nav .mm-row .mm-d{ grid-column:1; }
.site-header .nav .mm-row .mm-chev{ grid-column:2; grid-row:1 / span 2; }

/* --- the revealed panel (column two) ------------------------------------- */
.site-header .nav .mm-sub{
  grid-column:2;
  grid-row:1 / -1;        /* spans all three rows, incl. the slack track */
  align-self:stretch;
  padding-inline-start:16px;
  margin-inline-start:14px;
  border-inline-start:1px solid var(--line);   /* hairline, not a card */
  background:#FFFFFF;
  opacity:0;
  visibility:hidden;
  transition:opacity .16s ease, visibility 0s linear .16s;
}
.site-header .nav .mm-group.is-cur > .mm-sub{
  opacity:1;
  visibility:visible;
  z-index:2;
  transition:opacity .16s ease, visibility 0s;
}
/* no-JS fallback: line one is the default, hover raises the other over it */
:root:not(.mm-js) .site-header .nav .mm-group:first-child > .mm-sub{
  opacity:1; visibility:visible; z-index:1;
}
:root:not(.mm-js) .site-header .nav .mm-group:hover > .mm-sub,
:root:not(.mm-js) .site-header .nav .mm-group:focus-within > .mm-sub{
  opacity:1; visibility:visible; z-index:2;
}

.site-header .nav .mm-cap{
  margin:2px 0 7px;
  padding-inline:11px;
  font-family:var(--sans);
  font-size:0.68rem;
  font-weight:600;
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--soul);
}
[dir="rtl"] .site-header .nav .mm-cap{
  text-transform:none;
  letter-spacing:0;
  font-size:0.75rem;
}

.site-header .nav .mm-link{
  display:block;
  padding:9px 11px;
  border-radius:11px;
  opacity:1;
  text-decoration:none;
  transition:background .16s ease;
}

/* --- shared row typography ----------------------------------------------- */
.site-header .nav .mm-t,
.site-header .nav .mm-d{ display:block; }

.site-header .nav .mm-t{
  font-family:var(--sans);
  font-weight:600;
  font-size:0.97rem;
  line-height:1.35;
  color:#1A1914;
  transition:color .16s ease;
}
.site-header .nav .mm-link .mm-t{ font-size:0.92rem; }

.site-header .nav .mm-d{
  margin-block-start:3px;
  font-weight:400;
  font-size:0.79rem;
  line-height:1.5;
  color:#5A574F;
}

/* --- hover / active state, brand green ----------------------------------- */
.site-header .nav .mm-row:hover,
.site-header .nav .mm-row.is-active,
.site-header .nav .mm-link:hover{
  background:rgba(var(--rbA-rgb,69,251,178),0.16);
}
.site-header .nav .mm-row:hover .mm-t,
.site-header .nav .mm-row.is-active .mm-t,
.site-header .nav .mm-link:hover .mm-t{ color:var(--soul); }

.site-header .nav .mm-row:focus-visible,
.site-header .nav .mm-link:focus-visible{
  outline:2px solid var(--soul);
  outline-offset:-2px;
  background:rgba(var(--rbA-rgb,69,251,178),0.16);
}

/* --- the little chevron on each service line ----------------------------- */
.site-header .nav .mm-chev{
  inline-size:7px;
  block-size:11px;
  flex:none;
  color:#B6B2A8;
  transition:transform .18s ease, color .18s ease;
}
[dir="rtl"] .site-header .nav .mm-chev{ transform:scaleX(-1); }
.site-header .nav .mm-row:hover .mm-chev,
.site-header .nav .mm-row.is-active .mm-chev{
  color:var(--soul);
  transform:translateX(2px);
}
[dir="rtl"] .site-header .nav .mm-row:hover .mm-chev,
[dir="rtl"] .site-header .nav .mm-row.is-active .mm-chev{
  transform:scaleX(-1) translateX(2px);
}

} /* end desktop */


/* ------------------------------------------------------------ 3 · motion off */
@media (prefers-reduced-motion:reduce){
  .mm-panel,
  .mm-sub,
  .mm-row,
  .mm-link,
  .mm-chev,
  .mm-caret{ transition:none !important; }
  .mm-panel{ transform:none !important; }
}