@charset "UTF-8";

/* =========================================================
   ghaithkfmc — صفحة الخدمة (single-services.php)
   Built on the design tokens of ghaith.css; the editor content is in pages.css.
   ========================================================= */

/* ============ ترويسة الخدمة ============ */
.svc-hero h1{max-width:860px;margin-inline:auto;font-size:clamp(28px,4.4vw,46px);line-height:1.4}
.svc-hero-ic{
  width:84px;height:84px;margin:0 auto 22px;border-radius:24px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,var(--green-700),var(--green-600));box-shadow:0 14px 30px rgba(11,77,52,.22);
}
.svc-hero-ic svg{width:38px;height:38px;stroke:#fff}
/* An uploaded icon may be a photo or the org logo, so it sits on a white tile */
.svc-hero-ic.has-img{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.svc-hero-ic img{width:100%;height:100%;object-fit:contain;padding:10px}
.svc-hero-tag{color:var(--gold-600);font-weight:800}

/* ============ تفاصيل الخدمة ============ */
.svc-detail{background:#fff;padding-top:64px}
.svc-layout{display:grid;gap:36px;align-items:start}

/* Content pasted from Word keeps inline fonts, sizes and colours — use the design's. */
.svc-body [style]{font-family:inherit!important;font-size:inherit!important;color:inherit!important;background:none!important}
.svc-body [align]{text-align:start}
.svc-body p:empty{display:none}

.svc-foot{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);
}
.svc-main > .svc-foot:first-child{margin-top:0;padding-top:0;border-top:0}
.svc-foot .btn svg{stroke:currentColor}
/* Wrapped buttons on phones fill the row instead of hugging the start edge */
.svc-foot .btn{flex:1 1 auto;justify-content:center}

/* Side: help box + all services */
.svc-aside{display:grid;gap:22px}
.svc-help{
  position:relative;overflow:hidden;color:#fff;padding:30px 28px;border-radius:var(--radius-lg);
  background:linear-gradient(140deg,var(--green-800),var(--green-600));
}
.svc-help::before{
  content:"";position:absolute;inset-inline-end:-90px;top:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,139,76,.32),transparent 66%);
}
.svc-help > *{position:relative}
.svc-help h2{color:#fff;font-size:21px;margin-bottom:8px}
.svc-help p{color:rgba(255,255,255,.82);font-size:15px;line-height:1.85}
.svc-help-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.svc-help-links .btn{padding:11px 20px;font-size:14.5px}
.svc-help-links .btn svg{width:17px;height:17px}
.svc-help-links .btn-white svg{stroke:currentColor}
.svc-help-links .btn-ghost-light svg{fill:currentColor}
.svc-help-links .btn-white:hover{color:var(--green-800)}

.svc-list{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 22px}
.svc-list h2{font-size:19px;margin-bottom:14px;padding-inline:6px}
.svc-list ul{display:grid;gap:6px}
.svc-list a,.svc-list .is-current{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);
  font-weight:700;font-size:15px;color:var(--green-800);transition:background .25s,color .25s;
}
.svc-list a svg{width:16px;height:16px;flex:none;stroke:var(--gold-600);transition:transform .25s}
.svc-list a:hover{background:#fff;color:var(--green-700)}
.svc-list a:hover svg{transform:translateX(-4px)}
.svc-list .is-current{background:var(--green-700);color:#fff}

/* ============ الاستجابة ============ */
@media (min-width:600px){
  .svc-foot .btn{flex:0 0 auto}
}
@media (min-width:900px){
  .svc-layout{grid-template-columns:minmax(0,1fr) 340px;gap:48px}
  .svc-aside{position:sticky;top:110px}
}
@media (prefers-reduced-motion:reduce){
  .svc-list a,.svc-list a svg{transition:none}
}