/*
Theme Name: Derma Clinic — Fatima Binsayyar
Description: قالب عيادة جلدية وتجميل ثنائي اللغة (عربي / English) بتحكم كامل من لوحة WordPress.
Version: 2.0
Requires PHP: 7.4
Text Domain: derma-clinic
*/

:root{
  --bg:#f9f4ee;--card:#fffdf9;--ink:#24352e;--muted:#5f6e66;--gold:#8f7648;--goldl:#c2a77c;--line:#e6dccd;--deep:#1c2b25;--on:#f6efe3;--blush:#e6c3b3;--cream:#f9f4ee;
  color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg);color:var(--ink);font-family:Tajawal,Tahoma,sans-serif;font-weight:300;font-size:17px;line-height:1.9}
h1,h2,h3{font-family:Amiri,"Times New Roman",serif;font-weight:700;line-height:1.25}
html[lang=en] h1,html[lang=en] h2,html[lang=en] h3{font-family:"Playfair Display",Georgia,serif;font-weight:500}
html[lang=en] body{line-height:1.7}
html[lang=ar] .en,html[lang=en] .ar{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--goldl);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.eyebrow{color:var(--gold);letter-spacing:.18em;font-size:13px;font-weight:500;margin-bottom:10px;text-transform:uppercase}
h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:34px}

header{position:sticky;top:0;z-index:30;background:var(--deep);color:var(--on);border-bottom:1px solid #ffffff1a}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{text-decoration:none;font-family:Amiri,serif;font-size:20px;font-weight:700;color:var(--goldl)}
html[lang=en] .brand{font-family:"Playfair Display",serif;font-size:19px;font-weight:500}
nav{display:flex;gap:24px;font-size:15px}
nav a{text-decoration:none;opacity:.75}nav a:hover{opacity:1;color:var(--goldl)}
.lang{border:1px solid var(--goldl);background:none;color:var(--goldl);border-radius:2px;padding:3px 16px;font:inherit;font-size:14px;cursor:pointer}
@media(max-width:760px){nav{display:none}}

.hero{background:var(--deep);color:var(--on);position:relative;overflow:hidden;padding:84px 0 0}
.hero::after{content:"";position:absolute;width:520px;height:520px;border:1px solid #c9a56a55;border-radius:50%;top:-120px;inset-inline-end:-140px;box-shadow:0 0 0 60px #c9a56a10,0 0 0 120px #c9a56a08}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(42px,8vw,92px);max-width:13ch;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--goldl)}
.hero p{max-width:46ch;opacity:.78;margin-bottom:34px}
.btn{display:inline-block;background:var(--goldl);color:#17140f;padding:12px 34px;text-decoration:none;font-weight:500;border-radius:2px}
.btn.ghost{background:none;color:var(--on);border:1px solid #ffffff55;margin-inline-start:10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px;border-top:1px solid #ffffff22}
.stats div{padding:26px 0;border-inline-end:1px solid #ffffff22;padding-inline-start:22px}
.stats div:first-child{padding-inline-start:0}.stats div:last-child{border:0}
.stats b{display:block;font-family:Amiri,serif;font-size:clamp(28px,4vw,44px);color:var(--goldl);font-weight:400;line-height:1.2}
html[lang=en] .stats b{font-family:"Playfair Display",serif}
.stats span{font-size:14px;opacity:.7}

section{padding:84px 0}
.about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.photo{aspect-ratio:4/5;border:1px solid var(--goldl);border-radius:2px;position:relative;background:linear-gradient(160deg,var(--card),var(--line));display:grid;place-items:center;color:var(--muted);font-size:14px}
.photo::before{content:"";position:absolute;inset:14px;border:1px solid var(--line)}
.about p{color:var(--muted);margin-bottom:16px}
@media(max-width:760px){.about .wrap{grid-template-columns:1fr}.photo{max-width:280px}}

.svc{border-top:1px solid var(--line)}
.svc li{list-style:none;display:grid;grid-template-columns:70px 1fr 1.3fr;gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .25s}
.svc li:hover{padding-inline-start:14px}
.svc ol,.svc ul{padding:0}
.svc .n{font-family:"Playfair Display",serif;color:var(--gold);font-size:18px}
.svc h3{font-size:clamp(22px,3vw,30px)}
.svc p{color:var(--muted);font-size:15.5px;line-height:1.75}
@media(max-width:700px){.svc li{grid-template-columns:44px 1fr}.svc p{grid-column:2}}

.res{background:var(--card);border-block:1px solid var(--line)}
.res .grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.cmp{position:relative;direction:ltr;aspect-ratio:4/3;overflow:hidden;--p:50%;border:1px solid var(--line)}
.cmp .side{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px;font-size:13px}
.cmp .before{background:radial-gradient(circle at 30% 40%,#c98f7e 0 9%,transparent 10%),radial-gradient(circle at 64% 60%,#bd8372 0 7%,transparent 8%),#dcb4a4}
.cmp .after{background:#ecd1c4;clip-path:inset(0 0 0 var(--p));justify-content:flex-end}
.cmp .tag{background:#17140fcc;color:#f2ebdd;padding:2px 12px}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#c9a56a;pointer-events:none}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.res p{color:var(--muted)}.note{font-size:13.5px;margin-top:14px}
@media(max-width:760px){.res .grid{grid-template-columns:1fr}}

.art a{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none}
.art{border-top:1px solid var(--line)}
.art h3{font-size:clamp(20px,2.6vw,26px)}.art p{color:var(--muted);font-size:15px}
.art .ar-w{font-size:26px;color:var(--gold)}
html[dir=rtl] .art .ar-w{transform:scaleX(-1)}

.contact{background:var(--deep);color:var(--on)}
.contact h2{margin-bottom:30px}
.contact .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px;border-top:1px solid #ffffff22;padding-top:30px}
.contact h3{font-size:15px;color:var(--goldl);font-family:Tajawal,sans-serif!important;font-weight:500;letter-spacing:.08em;margin-bottom:6px}
.contact p{font-size:20px}
footer{background:var(--deep);color:#f2ebddaa;text-align:center;padding:22px;font-size:13.5px;border-top:1px solid #ffffff14}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.svc li{transition:none}}

header{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
.brand{color:var(--ink);display:flex;align-items:center;gap:10px}
.brand img{height:40px;width:auto}
nav a:hover{color:var(--gold)}
.lang{border-color:var(--gold);color:var(--gold)}
.hero::after{border-color:#c2a77c66}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-logo{background:var(--cream);border:1px solid var(--goldl);border-radius:999px 999px 14px 14px;aspect-ratio:3/4;max-width:340px;width:100%;margin-inline:auto;display:grid;place-items:center;padding:30px 22px}
.hero-logo img{width:100%;height:auto;max-height:100%;object-fit:contain}
.btn{background:var(--goldl);color:#1c2b25}
.eyebrow{color:var(--gold)}
.hero .eyebrow{color:var(--goldl)}
@media(max-width:760px){.hero-grid{grid-template-columns:1fr}.hero-logo{max-width:260px;order:-1}}

:root{--sage-t:#e9eee6;--blush-t:#f6e8e0;--green:#3f5c4e;--ong:#fff}

.hero{background:linear-gradient(160deg,var(--bg) 0%,var(--blush-t) 100%);color:var(--ink)}
.hero::after{border-color:#c2a77c88;box-shadow:0 0 0 60px #c2a77c14,0 0 0 120px #c2a77c0c}
.hero p{opacity:1;color:var(--muted)}
.hero .eyebrow,.hero h1 em{color:var(--gold)}
.btn{background:var(--green);color:var(--ong)}
.btn.ghost{background:none;color:var(--green);border:1px solid var(--green)}
.stats,.stats div{border-color:var(--line)}
.stats b{color:var(--gold)}.stats span{opacity:1;color:var(--muted)}
.hero-photo{position:relative;overflow:hidden;aspect-ratio:3/4;max-width:340px;width:100%;margin-inline:auto;border-radius:999px 999px 14px 14px;border:1px solid var(--goldl);background:linear-gradient(170deg,var(--sage-t),var(--blush));display:grid;place-items:end center}
.hero-photo::before{content:"";position:absolute;inset:12px;border:1px dashed #c2a77c99;border-radius:999px 999px 8px 8px;pointer-events:none}
.hero-photo.has::before{display:none}
.hero-photo span{position:relative;font-size:13px;color:var(--ink);background:var(--bg);padding:3px 16px;border-radius:99px;margin-bottom:26px}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.logo-card{background:var(--cream);border:1px solid var(--line);padding:30px;display:grid;place-items:center;border-radius:4px}
.logo-card img{width:100%;max-width:330px;height:auto}
.res{background:var(--sage-t)}
.cases{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.contact{background:var(--blush-t);color:var(--ink)}
.contact .grid{border-top-color:var(--line)}
.contact h3{color:var(--gold)}
footer{background:var(--bg);color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:760px){.hero-photo{max-width:260px;order:-1}.logo-card{max-width:300px}}

.admin-bar header{top:32px}@media(max-width:782px){.admin-bar header{top:46px}}
.post{max-width:720px;margin:0 auto;padding:56px 24px}
.post h1{font-size:clamp(30px,5vw,44px);margin-bottom:20px}
.post .body p{margin-bottom:1em}
.back{display:inline-block;margin-top:28px;color:var(--gold)}