/*
Theme Name: مساج منزلي — Home Massage
Author: مساج منزلي
Description: قالب عربي لخدمات المساج المنزلي في مدن المملكة مع رقم اتصال وواتساب مستقل لكل صفحة ومقالة.
Version: 1.7.1
Text Domain: sa-massage
*/
:root{--gold:#a88750;--dark:#171713;--cream:#f7f2e9;--ink:#302c25;--green:#5e7041}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Tahoma,Arial,sans-serif;direction:rtl;color:var(--ink);line-height:1.9;background:#fff}a{text-decoration:none;color:inherit}.wrap{width:min(1180px,92%);margin:auto}
.top{background:#171713;color:#eee;padding:7px 0;font-size:14px}.top .wrap,.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}.site-head{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 2px 15px #00000012}.nav{min-height:86px}.logo img{max-height:68px;width:auto}.menu{display:flex;gap:23px;font-weight:700}.call{background:var(--gold);color:#fff;padding:11px 20px;border-radius:999px;font-weight:800}
.hero{min-height:670px;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,#0009,#0003) }.hero-box{max-width:680px;padding:55px 0}.eyebrow{color:#f0d9ad;font-weight:800}.hero h1{font-size:54px;line-height:1.25;margin:12px 0}.hero p{font-size:20px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.btn{display:inline-block;padding:12px 23px;border-radius:999px;font-weight:800}.btn-gold{background:var(--gold);color:#fff}.btn-light{background:#fff;color:#222}.section{padding:75px 0}.section.alt{background:var(--cream)}.title{text-align:center;max-width:780px;margin:0 auto 38px}.title h2{font-size:36px;margin:0}.title p{color:#746d63}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 35px #4e402315}.card img{width:100%;height:220px;object-fit:cover}.card-body{padding:22px}.card h3{margin:0 0 8px;color:#403623}.cities{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.city{padding:25px 15px;background:#fff;border:1px solid #eadfcd;border-radius:14px;text-align:center;font-weight:800}.why{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.why img{width:100%;border-radius:22px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{background:#fff;padding:14px;border-radius:12px;border:1px solid #eadfcd}.cta{background:linear-gradient(120deg,#211d17,#5b4a31);color:#fff;text-align:center}.cta h2{font-size:39px;margin:0}.article{width:min(900px,92%);margin:45px auto}.article h1{font-size:42px;line-height:1.3}.article-content{font-size:18px}.article-content img{max-width:100%;height:auto}.post-contact{margin:30px 0;padding:25px;border-radius:18px;background:var(--cream);text-align:center;border:1px solid #e5d5bc}.post-contact h3{margin-top:0}.footer{background:#151511;color:#cfc8bc;padding:45px 0 25px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}.footer img{max-height:70px}.copy{border-top:1px solid #ffffff20;margin-top:30px;padding-top:20px;text-align:center}.floating{position:fixed;bottom:20px;left:20px;display:flex;flex-direction:column;gap:10px;z-index:70}.float{width:57px;height:57px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:23px;box-shadow:0 8px 25px #0004}.phone{background:var(--gold)}.wa{background:#25D366}
@media(max-width:850px){.menu{display:none}.hero{min-height:580px}.hero h1{font-size:40px}.cards,.cities{grid-template-columns:1fr 1fr}.why,.footer-grid{grid-template-columns:1fr}.article h1{font-size:34px}}
@media(max-width:520px){.cards,.cities,.checks{grid-template-columns:1fr}.hero h1{font-size:34px}.logo img{max-height:55px}.call{padding:8px 13px}.top{font-size:12px}}

/* V4 speed + accessibility */
img{max-width:100%;height:auto}
.card img{aspect-ratio:525/371;height:auto;object-fit:cover}
.why img{aspect-ratio:1600/893;object-fit:cover}
.city,.btn,.call,.float{min-height:44px}
.city{display:flex;align-items:center;justify-content:center}
.hero{background-image:linear-gradient(90deg,#0009,#0003)}

/* V7 audit fixes */
body{overflow-x:hidden}
img{max-width:100%;height:auto}
.card img{width:100%;aspect-ratio:525/371;object-fit:cover}
.why img{width:100%;aspect-ratio:1200/670;object-fit:cover}
a:focus-visible,button:focus-visible{outline:3px solid #7b5b28;outline-offset:3px}
.top{color:#fff}
.title p{color:#625b52}
.footer{color:#e4ded5}
.menu a,.city,.btn,.call{min-height:44px;display:inline-flex;align-items:center}
.menu a{padding:10px 3px}
.city{justify-content:center}


/* V13 homepage excerpt + floating contact buttons */
.home-seo-intro{gap:48px}.home-seo-copy h2{font-size:38px;line-height:1.45;margin:8px 0 18px}.home-seo-copy p{margin:0 0 14px}.home-seo-image img{width:100%;aspect-ratio:525/371;object-fit:cover;border-radius:22px;box-shadow:0 18px 45px #4e402326}.home-wa-btn{background:#25D366;color:#fff}
.floating{bottom:22px;left:20px;gap:9px;align-items:flex-start}.float{width:auto;height:54px;min-width:148px;padding:0 18px;border-radius:999px;gap:10px;font-size:16px;font-weight:800;justify-content:flex-start;box-shadow:0 8px 22px #00000030;transition:transform .2s ease,box-shadow .2s ease}.float:hover{transform:translateY(-2px);box-shadow:0 11px 26px #00000038}.float-icon{width:26px;height:26px;display:grid;place-items:center;flex:0 0 26px}.float-icon svg{width:25px;height:25px;fill:#fff;display:block}.phone{background:var(--gold)}.wa{background:#25D366}
@media(max-width:850px){.home-seo-intro{gap:28px}.home-seo-copy h2{font-size:31px}}
@media(max-width:520px){.home-seo-copy h2{font-size:28px}.home-seo-image{order:-1}.floating{left:14px;bottom:18px}.float{height:50px;min-width:132px;padding:0 14px;font-size:14px}.float-icon{width:23px;height:23px;flex-basis:23px}.float-icon svg{width:22px;height:22px}}

/* V13.2 mobile hardening: prevent legacy/custom CSS from shrinking floating buttons */
.floating .float{
  width:auto !important;
  height:54px !important;
  min-width:148px !important;
  max-width:none !important;
  padding:0 18px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  white-space:nowrap !important;
  overflow:visible !important;
  line-height:1 !important;
}
.floating .float > span:last-child{display:inline-block !important;white-space:nowrap !important}

/* Keep post/page content inside the viewport, including old editor content */
.article,.article article,.article-content{max-width:100%;min-width:0}
.article-content{overflow-wrap:anywhere;word-break:normal}
.article-content img,.article-content figure,.article-content .wp-caption,.article-content .wp-block-image,
.article-content iframe,.article-content video,.article-content embed,.article-content object{
  max-width:100% !important;
}
.article-content img{height:auto !important}
.article-content figure,.article-content .wp-caption,.article-content .wp-block-image{
  width:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.article-content table{display:block;max-width:100%;overflow-x:auto}
.article-content pre{max-width:100%;overflow-x:auto;white-space:pre-wrap}

@media(max-width:520px){
  .article{width:92% !important;margin:28px auto !important;overflow:hidden}
  .article article,.article-content{width:100% !important;max-width:100% !important;overflow:hidden}
  .article-content > *{max-width:100% !important}
  .floating{left:14px !important;right:auto !important;bottom:18px !important;align-items:flex-start !important}
  .floating .float{height:50px !important;min-width:132px !important;padding:0 14px !important;font-size:14px !important}
}


/* V13.3 floating buttons — style 4: rounded squares, icon only */
.floating{align-items:center !important;gap:10px !important}
.floating .float{
  width:62px !important;height:62px !important;min-width:62px !important;max-width:62px !important;
  padding:0 !important;border-radius:18px !important;display:flex !important;
  align-items:center !important;justify-content:center !important;overflow:hidden !important;
  box-shadow:0 8px 22px #00000030 !important;
}
.floating .float-icon{width:32px !important;height:32px !important;flex:0 0 32px !important}
.floating .float-icon svg{width:31px !important;height:31px !important;fill:#fff !important}
@media(max-width:520px){
 .floating .float{width:58px !important;height:58px !important;min-width:58px !important;max-width:58px !important;border-radius:17px !important}
 .floating .float-icon{width:30px !important;height:30px !important;flex-basis:30px !important}
 .floating .float-icon svg{width:29px !important;height:29px !important}
}

/* V13.4 — guaranteed white icons for style 4 floating buttons */
.floating .float .float-icon{display:none !important}
.floating .float::before{
  content:"" !important;
  display:block !important;
  width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:contain !important;
}
.floating .wa::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M16 3a12.8 12.8 0 0 0-11 19.3L3.5 28.5l6.4-1.7A12.9 12.9 0 1 0 16 3Zm0 23.4c-2 0-3.9-.5-5.6-1.5l-.4-.2-3.8 1 1-3.7-.2-.4A10.5 10.5 0 1 1 16 26.4Zm5.8-7.9c-.3-.2-1.9-.9-2.2-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-.9 1.2-.2.2-.3.2-.7.1-1.8-.9-3-1.6-4.2-3.7-.3-.6.3-.6.9-1.4.1-.2.2-.4.3-.6.1-.2 0-.4 0-.6-.1-.2-.7-1.8-1-2.4-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 3 0 1.8 1.3 3.5 1.5 3.7.2.2 2.6 4 6.3 5.6 2.3 1 3.2 1.1 4.4.9.7-.1 1.9-.8 2.2-1.5.3-.7.3-1.3.2-1.5-.1-.2-.3-.3-.7-.5Z'/%3E%3C/svg%3E") !important;
}
.floating .phone::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8c1.7 3.4 3.2 4.9 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E") !important;
}
@media(max-width:520px){
  .floating .float::before{width:29px !important;height:29px !important;flex-basis:29px !important}
}

/* V13.5: icon source is ::before only; footer contains no duplicate inline SVG */

/* V13.6 Accessibility improvements */
:root{--gold:#7b5b28}
/* WCAG-friendly text contrast on gold buttons and accents */
.call,.btn-gold,.phone{background:#7b5b28;color:#fff}
.eyebrow{color:#f4dfb8}
/* Keep interactive targets comfortably tappable */
a.call,.btn,.city,.floating .float{min-height:48px}
.footer a{display:inline-block;min-height:44px;padding-block:7px}
/* Strong keyboard focus without changing normal appearance */
a:focus-visible,button:focus-visible{outline:3px solid #111;outline-offset:3px}
/* Floating controls: accessible 58x58 targets with one icon each */
.floating .float{width:58px !important;height:58px !important;min-width:58px !important;max-width:58px !important;min-height:58px !important;padding:0 !important}
/* Avoid adjacent inline links becoming undersized touch targets on mobile */
@media(max-width:850px){
  .actions{gap:14px}
  .actions .btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
  .top .wrap{gap:12px}
}


/* V13.7 targeted Lighthouse accessibility + LCP fixes */
:root{--gold:#76531f;--wa:#08783f}
.call,.btn-gold,.phone{background:var(--gold) !important;color:#fff !important}
.wa,.home-wa-btn{background:var(--wa) !important;color:#fff !important}
.eyebrow{color:#fff !important;text-shadow:0 1px 3px #000}
.title p{color:#514b43}
.footer{color:#f2eee8}
.footer a{color:#fff}
/* Every navigational/control target gets a comfortable target box */
.logo{min-width:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.menu a{min-height:48px;padding:11px 8px}
.footer a{min-height:48px;padding:10px 4px}
.actions .btn,.call,.city{min-height:48px;min-width:48px}
/* Do not let adjacent footer links collapse into tiny targets */
.footer p{margin:.35em 0}

/* V13.8 exact Lighthouse targets */
.menu{gap:10px}
.menu a{min-width:48px;min-height:48px;padding:12px 14px}
.btn-light{background:#fff !important;color:#111 !important}
.btn-gold,.call{background:#5b3b0d !important;color:#fff !important}
.home-wa-btn{background:#006b35 !important;color:#fff !important}

/* V13.9.2 mobile homepage image safeguard */
@media (max-width:767px){
  body.home .card img,body.home .why img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}
  body.home .cards{grid-template-columns:1fr}
  body.home .why{grid-template-columns:1fr}
  body.home .hero{min-height:560px;background-position:center center;background-size:cover}
}

/* V14 navigation: WordPress menu + accessible mobile menu. */
.sa-menu-list{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.sa-menu-list a{min-width:48px;min-height:48px;padding:12px 14px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.menu-toggle{display:none;min-height:48px;border:1px solid #e6dccd;background:#fff;color:#222;border-radius:12px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer}
.navigation.pagination{margin:35px 0}.nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.page-numbers{min-width:44px;min-height:44px;padding:10px 13px;border:1px solid #e5d5bc;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}.page-numbers.current{background:#5b3b0d;color:#fff}
@media(max-width:850px){
 .nav{position:relative;gap:10px}
 .menu-toggle{display:inline-flex;align-items:center;gap:7px}
 .menu{display:none;position:absolute;top:calc(100% - 4px);right:4%;left:4%;background:#fff;border:1px solid #eadfcd;border-radius:15px;box-shadow:0 12px 30px #0002;padding:10px;z-index:90}
 .menu.is-open{display:block}
 .sa-menu-list{display:flex;flex-direction:column;align-items:stretch;gap:2px}
 .sa-menu-list li,.sa-menu-list a{width:100%}
 .sa-menu-list a{justify-content:flex-start;padding:12px 14px}
}
@media(max-width:520px){.menu-toggle span{display:none}.site-head .call{padding-inline:13px}.logo img{max-width:58px;height:auto}}

/* Home Massage edition */
.brand .logo{gap:12px;justify-content:flex-start;color:#344a39;font-weight:800;font-size:23px;line-height:1.5}
.brand .logo img{width:60px;height:60px}.brand small{display:block;font-size:12px;font-weight:400;color:#5d6157}
.hero{background-image:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,.62))}
.home-seo-copy .eyebrow{color:#5b3b0d!important;text-shadow:none}.cities{grid-template-columns:repeat(3,1fr)}
.skip-link{position:absolute;top:-100px;right:10px;padding:12px;background:white;z-index:1000}.skip-link:focus{top:10px}
.footer{padding-bottom:95px} @media(max-width:520px){.brand .logo{font-size:18px;gap:7px}.brand .logo img{width:44px;height:44px}.brand small{font-size:10px}.cities{grid-template-columns:1fr}.top .wrap{flex-wrap:wrap;gap:0}.hero-box{padding:40px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.float{transition:none}}

/* City WhatsApp booking */
#booking,#cities{scroll-margin-top:110px}.city-booking-card{padding:16px;background:#fff;border:1px solid #eadfcd;border-radius:16px;text-align:center}.city-booking-card .city{border:0;padding:12px;background:none}.city-booking-card .btn{display:flex;justify-content:center;margin-top:10px}
.booking-section{background:#f4f0e8}.booking-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}.booking-intro h2{font-size:38px;line-height:1.4;margin:12px 0}.booking-intro .eyebrow{color:#344a39!important;text-shadow:none}.booking-intro li{padding:8px 0}.booking-note{border-right:3px solid #76531f;padding:8px 16px}.booking-form{padding:30px;background:#fff;border:1px solid #e4dccd;border-radius:22px;box-shadow:0 16px 50px #302c2510}.booking-form h3{font-size:26px;margin:0 0 22px}.booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}.booking-full{grid-column:1/-1}.booking-form label{display:block;font-weight:700;margin-bottom:6px}.booking-form input,.booking-form select,.booking-form textarea{width:100%;min-width:0;min-height:50px;padding:12px;border:1px solid #b9b6ad;border-radius:10px;background:#fff;color:#302c25;font:inherit}.booking-form textarea{resize:vertical}.booking-form :is(input,select,textarea):focus-visible{outline:3px solid #344a39;outline-offset:2px}.booking-privacy{font-size:13px;color:#59584e}.booking-submit{width:100%;background:#006b35;color:white;border:0;cursor:pointer;font:inherit;font-weight:bold}.booking-form #booking-status{margin:12px 0 0}.booking-layout>*{min-width:0}
@media(max-width:850px){.booking-layout{grid-template-columns:1fr;gap:24px}.booking-intro h2{font-size:30px}}
@media(max-width:520px){.booking-fields{grid-template-columns:1fr}.booking-form{padding:20px}.booking-form h3{font-size:23px}}

/* Responsive hero: native early discovery without a CSS image dependency. */
.hero{position:relative;isolation:isolate;background:#303326!important;overflow:hidden}
.hero-picture{position:absolute;inset:0;z-index:-2;display:block}.hero-picture img{display:block;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,.62))}
.hero>.wrap{position:relative}.custom-logo-link{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:60px}