@charset "UTF-8";

/* =========================================================
   ghaithkfmc — shared inner-page parts (about, services, policies, board, news, single news / service)
   Built on the design tokens of ghaith.css.
   ========================================================= */

/* ============ ترويسة الصفحة ============ */
.page-hero{
  position:relative;overflow:hidden;padding:64px 0 72px;text-align:center;
  background:
    radial-gradient(900px 420px at 88% -20%,var(--green-100) 0%,transparent 60%),
    linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
}
.page-hero::before{
  content:"";position:absolute;inset-inline-start:-140px;bottom:-160px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(181,139,76,.14),transparent 68%);
}
.page-hero .container{position:relative}
.page-hero .eyebrow::after{content:"";width:26px;height:2px;background:var(--gold-500);border-radius:2px}
.page-hero h1{font-size:clamp(32px,5vw,50px);letter-spacing:-.5px;margin-bottom:12px}
.page-hero-lead{font-size:clamp(16px,1.7vw,18.5px);color:var(--ink-2);max-width:640px;margin:0 auto}

.breadcrumb{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:22px;font-size:14px;color:var(--muted)}
.breadcrumb a{color:var(--green-700);font-weight:700;transition:color .25s}
.breadcrumb a:hover{color:var(--gold-600)}
.breadcrumb span[aria-hidden]{opacity:.5}
.breadcrumb-group{font-weight:700;color:var(--ink-2)}

.page-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:30px}
.page-jump a{
  padding:8px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-size:14px;font-weight:700;color:var(--green-700);box-shadow:var(--shadow-sm);transition:.25s;
}
.page-jump a:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;transform:translateY(-2px)}

/* Anchored sections clear the sticky header */
.page-hero ~ .sec[id]{scroll-margin-top:90px}

/* ============ روابط الحوكمة ============ */
.gov-related{background:var(--cream)}
.gov-related .sec-head{margin-bottom:36px}
.gov-related-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:980px;margin:0 auto}
.gov-related-links li{flex:0 1 100%}
.gov-related-links a{
  display:flex;align-items:center;gap:14px;height:100%;padding:16px 18px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);font-weight:700;color:var(--green-800);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.gov-related-links a > span:nth-child(2){flex:1}
.gov-related-links .ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--gold-100)}
.gov-related-links .ic svg{width:21px;height:21px;stroke:var(--gold-700)}
.gov-related-links a > svg{width:18px;height:18px;stroke:var(--green-700);flex:none;transition:transform .3s}
.gov-related-links a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent;color:var(--green-800)}
.gov-related-links a:hover > svg{transform:translateX(-4px)}
@media (min-width:600px){
  .gov-related-links li{flex-basis:calc((100% - 14px) / 2)}
}
@media (min-width:900px){
  .gov-related-links li{flex-basis:calc((100% - 28px) / 3)}
}
@media (prefers-reduced-motion:reduce){
  .gov-related-links a{transition:none}
}

/* ============ بطاقة الخبر (من نحن + الأخبار) ============ */
.news-grid{display:grid;gap:22px;grid-template-columns:1fr}
.news-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:transform .3s,box-shadow .3s;
}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.news-img{display:block;overflow:hidden}
.news-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.news-card:hover .news-img img{transform:scale(1.05)}
.news-body{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px;flex:1}
.news-date{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--gold-600);font-weight:700}
.news-date svg{width:15px;height:15px;stroke:currentColor}
.news-body h3{font-size:18px}
.news-body h3 a:hover{color:var(--green-600)}
.news-body p{font-size:14.5px;color:var(--muted);line-height:1.8}
.news-more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--green-700)}
.news-more svg{width:16px;height:16px;stroke:currentColor;transition:transform .3s}
.news-more:hover svg{transform:translateX(-4px)}
@media (min-width:600px){
  .news-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .news-grid{grid-template-columns:repeat(3,1fr)}
}

/* ============ محتوى المحرر (الخبر + الخدمة) ============ */
.article-content{font-size:17.5px;line-height:2;color:var(--ink-2)}
.article-content > * + *{margin-top:1.1em}
.article-content h2,.article-content h3,.article-content h4{color:var(--green-800);line-height:1.5;margin-top:1.6em}
.article-content h2{font-size:26px}
.article-content h3{font-size:22px}
.article-content h4{font-size:19px}
.article-content a{color:var(--green-700);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.article-content a:hover{color:var(--gold-600)}
.article-content ul,.article-content ol{padding-inline-start:1.4em}
.article-content ul{list-style:disc}
.article-content ol{list-style:decimal}
.article-content li + li{margin-top:.4em}
.article-content li::marker{color:var(--gold-600)}
.article-content blockquote{
  margin-inline:0;padding:18px 24px;border-inline-start:4px solid var(--gold-500);
  border-radius:var(--radius-sm);background:var(--cream-2);color:var(--green-800);font-weight:700;
}
.article-content img{height:auto;max-width:100%;border-radius:var(--radius)}
.article-content figure{margin-inline:0}
.article-content figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}
.article-content .aligncenter{margin-inline:auto}
.article-content table{width:100%;border-collapse:collapse;font-size:15px}
.article-content th,.article-content td{padding:10px 12px;border:1px solid var(--line);text-align:start}
.article-content th{background:var(--cream-2);color:var(--green-800)}
/* Wide editor tables scroll inside the article on phones. */
@media (max-width:699px){
  .article-content table{display:block;overflow-x:auto}
}