/* ==========================================================================
   mtemps7 — HEADER  (هيدر غامق دايمًا: شفاف فوق صورة الهيرو، كحلي ليلي بعد السكرول)
   ستراكشر واحد: نفس الـ <nav> = منيو أفقي على الديسكتوب ↔ شاشة كاملة على الموبايل.
   ========================================================================== */
.mtemps7-hdr {
  --mtemps7-s-text: var(--mtemps7-on-deep);
  --mtemps7-s-muted: var(--mtemps7-on-deep-muted);
  --mtemps7-s-focus: var(--mtemps7-accent);
  --mtemps7-s-line: var(--mtemps7-deep-line);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--mtemps7-z-header);
  border-block-end: var(--mtemps7-hair) solid var(--mtemps7-deep-line);
  background: color-mix(in srgb, var(--mtemps7-ink) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  color: var(--mtemps7-on-deep);
  transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-film), background-color var(--mtemps7-dur-3), border-color var(--mtemps7-dur-3);
}
.mtemps7-hdr.mtemps7-is-hidden { transform: translateY(-100%); }
.mtemps7-hdr-bar { display: flex; align-items: center; gap: var(--mtemps7-sp-5); min-height: var(--mtemps7-hdr-h); transition: min-height var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
.mtemps7-hdr.mtemps7-is-scrolled .mtemps7-hdr-bar { min-height: var(--mtemps7-hdr-h-sm); }
/* فوق الهيرو الغامق: شفاف بتدرّج خفيف (الصورة باينة ورا الهيدر) */
body:has(.mtemps7-hero-dark) .mtemps7-hdr:not(.mtemps7-is-scrolled) { border-color: transparent; background: linear-gradient(color-mix(in srgb, var(--mtemps7-ink) 70%, transparent), transparent); }

/* ---------- logo ---------- */
.mtemps7-hdr-logo { display: inline-flex; align-items: center; gap: var(--mtemps7-sp-3); flex-shrink: 0; min-width: 0; }
.mtemps7-hdr-logo-box { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; overflow: hidden; border: var(--mtemps7-hair) solid var(--mtemps7-accent); border-radius: var(--mtemps7-r-sm); background: var(--mtemps7-deep-2); }
.mtemps7-hdr-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.mtemps7-hdr-logo-text { display: grid; line-height: 1.25; min-width: 0; }
.mtemps7-hdr-logo-text strong { overflow: hidden; color: var(--mtemps7-on-deep); font-size: var(--mtemps7-fs-md); text-overflow: ellipsis; white-space: nowrap; }
.mtemps7-hdr-logo-text small { overflow: hidden; color: var(--mtemps7-accent); font-size: var(--mtemps7-fs-2xs); font-weight: var(--mtemps7-fw-semibold); letter-spacing: 0.06em; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- actions ---------- */
.mtemps7-hdr-actions { display: flex; align-items: center; gap: var(--mtemps7-sp-4); margin-inline-start: auto; }
.mtemps7-hdr-phone { display: inline-flex; align-items: center; gap: var(--mtemps7-sp-3); color: var(--mtemps7-on-deep); font-weight: var(--mtemps7-fw-bold); }
.mtemps7-hdr-phone i { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: var(--mtemps7-hair) solid var(--mtemps7-glass-line); border-radius: 50%; color: var(--mtemps7-accent); font-size: 0.9rem; transition: background-color var(--mtemps7-dur-2), color var(--mtemps7-dur-2), border-color var(--mtemps7-dur-2); }
.mtemps7-hdr-phone:hover i { border-color: var(--mtemps7-accent); background: var(--mtemps7-accent); color: var(--mtemps7-on-accent); }
.mtemps7-hdr-phone-txt { display: grid; line-height: 1.25; }
.mtemps7-hdr-phone-txt small { color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-2xs); font-weight: var(--mtemps7-fw-medium); }
.mtemps7-hdr-phone-txt [dir="ltr"] { font-size: var(--mtemps7-fs-sm); font-variant-numeric: tabular-nums; }
.mtemps7-hdr-burger { display: none; place-items: center; width: var(--mtemps7-tap); height: var(--mtemps7-tap); border: var(--mtemps7-hair) solid var(--mtemps7-glass-line); border-radius: 50%; }
.mtemps7-hdr-burger-lines { display: grid; gap: 6px; width: 1.25rem; }
.mtemps7-hdr-burger-lines span { display: block; height: 2px; border-radius: 2px; background: var(--mtemps7-on-deep); transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-film); }
.mtemps7-hdr-burger-lines span:last-child { width: 65%; margin-inline-start: auto; }
.mtemps7-hdr-burger:hover .mtemps7-hdr-burger-lines span:last-child { transform: scaleX(1.5); transform-origin: var(--mtemps7-x-end); }

.mtemps7-hdr-link { position: relative; display: inline-flex; align-items: center; gap: var(--mtemps7-sp-2); color: var(--mtemps7-on-deep); font-weight: var(--mtemps7-fw-semibold); }
.mtemps7-hdr-link i { font-size: 0.65em; transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
.mtemps7-hdr-item--dd.mtemps7-is-open .mtemps7-hdr-link i { transform: rotate(180deg); }

/* =================== DESKTOP (≥1100) =================== */
@media (min-width: 1100px) {
  .mtemps7-hdr-panel-top, .mtemps7-hdr-panel-cta, .mtemps7-hdr-scrim { display: none; }
  .mtemps7-hdr-nav { margin-inline: auto; }
  .mtemps7-hdr-menu { display: flex; align-items: center; gap: var(--mtemps7-sp-1); }
  .mtemps7-hdr-link { min-height: var(--mtemps7-tap); padding: var(--mtemps7-pad-nav-y) var(--mtemps7-pad-nav-x); font-size: var(--mtemps7-fs-sm); }
  /* خط كهرماني بيتمد تحت الرابط */
  .mtemps7-hdr-link::after { content: ""; position: absolute; inset-inline: var(--mtemps7-pad-nav-x); inset-block-end: 0.35rem; height: 1.5px; background: var(--mtemps7-accent); transform: scaleX(0); transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-film); }
  .mtemps7-hdr-link:hover::after, .mtemps7-hdr-link.mtemps7-is-active::after, .mtemps7-hdr-item--dd.mtemps7-is-open > .mtemps7-hdr-link::after { transform: scaleX(1); }
  .mtemps7-hdr-link.mtemps7-is-active { color: var(--mtemps7-accent); }

  /* dropdown: لوحة غامقة عريضة (قائمة مرقّمة + كادر صورة) */
  .mtemps7-hdr-item--dd { position: relative; }
  .mtemps7-hdr-dd {
    position: absolute;
    inset-block-start: calc(100% + 0.9rem);
    inset-inline-start: calc(var(--mtemps7-pad-nav-x) * -1);
    width: min(44rem, 90vw);
    padding-block-start: 0.5rem;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
    transition: opacity var(--mtemps7-dur-3) var(--mtemps7-ease-out), transform var(--mtemps7-dur-3) var(--mtemps7-ease-out), visibility 0s linear var(--mtemps7-dur-3);
  }
  .mtemps7-hdr-item--dd.mtemps7-is-open .mtemps7-hdr-dd { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .mtemps7-hdr-dd-in { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--mtemps7-sp-3); padding: var(--mtemps7-sp-3); border: var(--mtemps7-hair) solid var(--mtemps7-deep-line); border-radius: var(--mtemps7-r-md); background: var(--mtemps7-ink); box-shadow: var(--mtemps7-shadow-lift); }
  .mtemps7-hdr-dd-list { display: grid; gap: 2px; }
  .mtemps7-hdr-dd-promo { position: relative; display: grid; align-content: end; min-height: 100%; overflow: hidden; padding: var(--mtemps7-sp-5); border-radius: var(--mtemps7-r-sm); background: var(--mtemps7-deep-2); isolation: isolate; }
  .mtemps7-hdr-dd-promo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--mtemps7-dur-5) var(--mtemps7-ease-out); }
  .mtemps7-hdr-dd-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 20%, color-mix(in srgb, var(--mtemps7-ink) 92%, transparent)); }
  .mtemps7-hdr-dd-promo:hover img { transform: scale(1.06); }
  .mtemps7-hdr-dd-promo-txt { display: grid; gap: var(--mtemps7-sp-2); }
  .mtemps7-hdr-dd-promo-txt strong { font-size: var(--mtemps7-fs-md); line-height: 1.4; }
  .mtemps7-hdr-dd-all { display: inline-flex; align-items: center; gap: var(--mtemps7-sp-2); color: var(--mtemps7-accent); font-size: var(--mtemps7-fs-sm); font-weight: var(--mtemps7-fw-bold); }
}
.mtemps7-hdr-dd-link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mtemps7-sp-4); padding: var(--mtemps7-sp-3) var(--mtemps7-sp-4); border-radius: var(--mtemps7-r-sm); transition: background-color var(--mtemps7-dur-2); }
.mtemps7-hdr-dd-link:hover, .mtemps7-hdr-dd-link:focus-visible { background: var(--mtemps7-deep-2); }
.mtemps7-hdr-dd-num { color: var(--mtemps7-accent); font-size: var(--mtemps7-fs-xs); font-weight: var(--mtemps7-fw-bold); }
.mtemps7-hdr-dd-txt { display: grid; line-height: 1.4; }
.mtemps7-hdr-dd-txt strong { color: var(--mtemps7-on-deep); font-size: var(--mtemps7-fs-sm); }
.mtemps7-hdr-dd-txt small { color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-xs); }
.mtemps7-hdr-dd-link > i { color: var(--mtemps7-on-deep-muted); font-size: 0.8rem; opacity: 0; transform: translateX(calc(var(--mtemps7-dir) * -6px)); transition: opacity var(--mtemps7-dur-2), transform var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
html[dir="ltr"] .mtemps7-hdr-dd-link > i { transform: translateX(-6px) scaleX(-1); }
.mtemps7-hdr-dd-link:hover > i, .mtemps7-hdr-dd-link:focus-visible > i { opacity: 1; color: var(--mtemps7-accent); transform: none; }
html[dir="ltr"] .mtemps7-hdr-dd-link:hover > i, html[dir="ltr"] .mtemps7-hdr-dd-link:focus-visible > i { transform: scaleX(-1); }

@media (min-width: 1100px) and (max-width: 1279px) { .mtemps7-hdr-phone-txt { display: none; } }

/* =================== MOBILE (<1100): نفس الـ nav = شاشة كاملة =================== */
@media (max-width: 1099px) {
  /* مفيش filter/transform على الهيدر في الموبايل (عشان اللوحة الـ fixed تاخد الشاشة كلها) */
  .mtemps7-hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mtemps7-ink); }
  .mtemps7-hdr-burger { display: grid; }
  .mtemps7-hdr-phone-txt { display: none; }
  .mtemps7-hdr-scrim { position: fixed; inset: 0; z-index: var(--mtemps7-z-menu); background: var(--mtemps7-scrim); visibility: hidden; opacity: 0; transition: opacity var(--mtemps7-dur-3), visibility 0s linear var(--mtemps7-dur-3); }
  .mtemps7-hdr-nav {
    position: fixed;
    inset: 0;
    z-index: calc(var(--mtemps7-z-menu) + 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline: var(--mtemps7-gutter);
    background:
      linear-gradient(color-mix(in srgb, var(--mtemps7-ink) 90%, transparent), var(--mtemps7-ink) 80%),
      url("../mtemps7-images/mtemps7-photo-lift.webp") center bottom / cover no-repeat,
      var(--mtemps7-ink);
    color: var(--mtemps7-on-deep);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--mtemps7-dur-3) var(--mtemps7-ease-film), visibility 0s linear var(--mtemps7-dur-3);
  }
  html.mtemps7-menu-open .mtemps7-hdr-nav { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }
  html.mtemps7-menu-open .mtemps7-hdr-scrim { visibility: visible; opacity: 1; transition-delay: 0s; }

  .mtemps7-hdr-panel-top { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: var(--mtemps7-hdr-h-sm); border-block-end: var(--mtemps7-hair) solid var(--mtemps7-deep-line); background: var(--mtemps7-ink); }
  .mtemps7-hdr-panel-label { display: inline-flex; align-items: center; gap: var(--mtemps7-sp-2); color: var(--mtemps7-on-deep-muted); font-size: var(--mtemps7-fs-xs); font-weight: var(--mtemps7-fw-bold); letter-spacing: var(--mtemps7-tracking-label); }
  .mtemps7-hdr-close { display: grid; place-items: center; width: 3rem; height: 3rem; border: var(--mtemps7-hair) solid var(--mtemps7-glass-line); border-radius: var(--mtemps7-r-md); color: var(--mtemps7-on-deep); font-size: 1.1rem; transition: transform var(--mtemps7-dur-3) var(--mtemps7-ease-out), border-color var(--mtemps7-dur-2); }
  .mtemps7-hdr-close:hover { border-color: var(--mtemps7-accent); transform: rotate(90deg); }

  /* روابط كبيرة مرقّمة (01، 02…) بخطوط شعرة */
  .mtemps7-hdr-menu { counter-reset: mtemps7-nav; padding-block: var(--mtemps7-sp-4) var(--mtemps7-sp-6); }
  .mtemps7-hdr-menu > li { counter-increment: mtemps7-nav; border-block-end: var(--mtemps7-hair) solid var(--mtemps7-deep-line); opacity: 0; transform: translate3d(0, 1.25rem, 0); transition: opacity var(--mtemps7-dur-3) var(--mtemps7-ease-out), transform var(--mtemps7-dur-4) var(--mtemps7-ease-out); }
  html.mtemps7-menu-open .mtemps7-hdr-menu > li { opacity: 1; transform: none; transition-delay: calc(200ms + var(--mtemps7-i, 0) * 60ms); }
  .mtemps7-hdr-link { width: 100%; min-height: 4rem; padding-block: var(--mtemps7-sp-3); font-size: var(--mtemps7-fs-xl); font-weight: var(--mtemps7-fw-bold); text-align: start; }
  .mtemps7-hdr-link::before { content: counter(mtemps7-nav, decimal-leading-zero); min-width: 2.25rem; color: var(--mtemps7-accent); font-size: var(--mtemps7-fs-xs); font-variant-numeric: tabular-nums; }
  .mtemps7-hdr-link i { margin-inline-start: auto; font-size: 0.9rem; }
  .mtemps7-hdr-link.mtemps7-is-active { color: var(--mtemps7-accent); }

  /* "خدماتنا" = أكورديون */
  .mtemps7-hdr-dd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--mtemps7-dur-3) var(--mtemps7-ease-out); }
  .mtemps7-hdr-item--dd.mtemps7-is-open .mtemps7-hdr-dd { grid-template-rows: 1fr; }
  .mtemps7-hdr-dd-in { overflow: hidden; }
  .mtemps7-hdr-dd-list { display: grid; gap: 2px; padding-block-end: var(--mtemps7-sp-3); }
  .mtemps7-hdr-dd-link { padding-inline: var(--mtemps7-sp-3); background: var(--mtemps7-ink-2); }
  .mtemps7-hdr-dd-link > i { opacity: 1; transform: none; }
  html[dir="ltr"] .mtemps7-hdr-dd-link > i { transform: scaleX(-1); }
  .mtemps7-hdr-dd-promo { display: none; }

  .mtemps7-hdr-panel-cta { position: sticky; inset-block-end: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--mtemps7-sp-2); margin-block-start: auto; margin-inline: calc(var(--mtemps7-gutter) * -1); padding: var(--mtemps7-sp-3) var(--mtemps7-gutter) calc(var(--mtemps7-sp-3) + env(safe-area-inset-bottom, 0px)); border-block-start: var(--mtemps7-hair) solid var(--mtemps7-deep-line); background: var(--mtemps7-ink); }
}
@media (max-width: 639px) {
  .mtemps7-hdr-cta { display: none; }
  .mtemps7-hdr-actions { gap: var(--mtemps7-sp-2); }
  .mtemps7-hdr-logo-text small { display: none; }
}
@media (max-width: 359px) { .mtemps7-hdr-panel-cta { grid-template-columns: 1fr; } }
