/*
Theme Name: Yasmeen Ultralight Clean v2 - Dark Edition
Theme URI: https://example.com/
Author: Danial / ChatGPT
Description: Clean theme styled with black/gray palette for The Maids branding.
Version: 2.4.0
Text Domain: yasmeen-ultralight-clean-v2
*/

:root{
  --pink:#FF0000;         /* اللون المميز بدل الفوشيا */
  --pink-dark:#000000;    /* الغامق = أسود */
  --pink-light:#222222;   /* الفاتح = رمادي داكن */
  --gray-bg:#111111;      /* خلفيات عامة داكنة */
  --gray-dark:#ffffff;    /* نصوص فاتحة */
  --gray-mid:#cfcfcf;     /* رمادي متوسط */
  --green:#25D366;        /* واتساب */
  --white:#ffffff;

  --radius:16px;
  --shadow:0 6px 20px rgba(0,0,0,.5);
  --focus:0 0 0 3px rgba(0,188,212,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Helvetica,Arial;
  color:var(--gray-dark);
  background:var(--gray-bg);
  line-height:1.7;
  padding-bottom:84px
}
a{color:var(--pink);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
a:focus{outline:none;box-shadow:var(--focus);border-radius:10px}

.container{max-width:1180px;margin:0 auto;padding:0 16px}

/* ====== Breadcrumbs ====== */
.breadcrumbs {
  background: var(--pink-light);
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.breadcrumbs a {
  color: var(--white);
  font-weight: 500;
  transition: color .2s;
}
.breadcrumbs a:hover {
  color: var(--pink);
  text-decoration: underline;
}
.breadcrumbs span.separator {
  margin: 0 8px;
  color: var(--gray-mid);
  opacity: 0.7;
}

/* ====== Logo in Navbar ====== */
.header .custom-logo{max-height:55px;width:auto;height:auto;display:block;margin:0 auto}
.header .custom-logo-link{display:flex;align-items:center;justify-content:center;height:100%}

/* ====== Buttons ====== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:999px;font-weight:800;
  box-shadow:var(--shadow);border:0;cursor:pointer;
  transition:transform .12s ease, background .3s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}

.btn.primary{background:linear-gradient(180deg,var(--pink),var(--pink-dark));color:var(--white)}
.btn.call{background:linear-gradient(180deg,var(--pink-light),var(--pink));color:var(--white)}
.btn.whatsapp{background:linear-gradient(180deg,#22c55e,#16a34a);color:var(--white)}
.btn.lang{background:var(--pink-light);color:var(--white);border-radius:14px;padding:8px 14px;font-weight:800;box-shadow:none}

/* ====== Topbar ====== */
.topbar{
  background:var(--pink-dark);
  color:var(--white);
  font-weight:700;
}
.topbar .container{
  display:flex;justify-content:center;gap:10px;
  padding:8px 16px;flex-wrap:wrap
}
.topbar .btn{
  background: var(--pink) !important;
  color: var(--white) !important;
  font-weight: 800;
  border-radius: 30px;
  padding: 6px 16px;
}
.topbar .btn:hover{
  background: var(--white) !important;
  color: var(--pink-dark) !important;
}

/* ====== Header / Navbar ====== */
.header{
  position:sticky;top:0;z-index:50;
  background:var(--pink-dark);backdrop-filter:saturate(180%) blur(6px);
  border-bottom:3px solid var(--pink)
}
.nav-grid{display:grid;grid-template-columns:30% 20% 50%;align-items:center;padding:10px 0}
.nav-box{display:flex;align-items:center;justify-content:center;min-height:44px}
.lang-box{justify-content:flex-start}
.logo-box{justify-content:center}
.menu-box{justify-content:flex-end}

/* Brand */
.brand{display:flex;align-items:center;font-weight:900;color:var(--white);gap:10px;text-decoration:none}
.brand img{height:36px;width:auto}
.brand .text{font-size:1.1rem}

/* Desktop menu */
.menu{display:none;list-style:none;margin:0;padding:0;gap:20px}
.menu a{color:var(--white);font-weight:700;padding:8px 12px;border-radius:10px}
.menu a:hover{background:var(--pink-light);color:var(--pink)}

/* Burger */
.burger{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--gray-mid);background:var(--pink-light);border-radius:8px}
.burger span{height:2px;width:22px;background:var(--white);border-radius:2px}

/* ====== Mobile overlay + panel ====== */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199}
.mobile-panel{display:none;position:fixed;inset:0;background:var(--pink-dark);z-index:200;padding:24px;overflow-y:auto}
.mobile-panel.open{display:block}
.mobile-overlay.open{display:block}
.mobile-panel a{display:block;padding:12px 14px;border:1px solid var(--gray-mid);border-radius:12px;color:var(--white);margin-top:10px}

/* ====== Cards / Tables / Notes ====== */
.card{background:var(--pink-light);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:18px 0;color:var(--white)}
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;box-shadow:var(--shadow)}
.table thead th{background:var(--pink);font-weight:900;color:var(--white)}
.note{border-left:6px solid var(--pink);background:#1e1e1e;padding:12px 14px;border-radius:12px;color:var(--white)}

/* ====== Footer ====== */
.footer{margin-top:40px;padding:24px 0;background:var(--pink-dark);color:var(--white);text-align:center}
.footer a{color:var(--pink)}

/* ====== Bottom bar (Mobile CTA) ====== */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--pink-dark);z-index:70
}
.bottom-bar .container{display:grid;gap:10px;padding:10px 16px;grid-template-columns:1fr}
.bottom-bar .btn{width:100%;background:var(--pink);color:var(--white);font-weight:900}

/* ====== Polylang list ====== */
.lang-list{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang-list a{background:var(--pink-light);color:var(--white);border-radius:10px;padding:6px 10px;font-weight:800}
.lang-list .current{display:none}
.lang-list img,.lang-list .sep{display:none}

/* Desktop */
@media(min-width:1024px){
  .menu{display:flex}
  .burger{display:none}
  .bottom-bar .container{grid-template-columns:1fr 1fr}
}

/* Responsive H1 */
h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.3;margin:.5em 0}
/* منع الصور من الخروج عن حدود الصفحة أو الجدول */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* إذا كانت الصورة داخل جدول */
.table img,
table img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* إذا الصورة داخل card */
.card img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* اختياري: عشان تنسجم مع الكارد */
}
/* المستوى الأول */
.menu li {
  position: relative;
}
.menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #111;
  z-index: 999;
}
.menu li:hover > ul.sub-menu {
  display: block;
}

/* المستوى الثاني (Sub-submenu → يطلع يمين) */
.menu li ul.sub-menu li {
  position: relative;
}
.menu li ul.sub-menu li ul.sub-menu {
  top: 0;
  left: 100%;
  background: #222;
}

/* الروابط داخل القوائم */
.menu li ul.sub-menu li a {
  padding: 10px 15px;
  display: block;
  color: #fff;
  text-decoration: none;
}
.menu li ul.sub-menu li a:hover {
  background: #333;
  color: #00bcd4;
}

/* الموبايل: نخليها تفتح بالضغط */
.mobile-menu li ul.sub-menu {
  display: none;
}
.mobile-menu li.open > ul.sub-menu {
  display: block;
}
.mobile-menu li ul.sub-menu li a {
  padding-left: 25px;
}
.mobile-menu li ul.sub-menu li ul.sub-menu li a {
  padding-left: 40px; /* المستوى الثالث */
}