/*
Theme Name: PDSG Theme
Theme URI: https://yopalt.com
Author: Yopalt
Description: Light Arabic RTL corporate theme for Palestine Digital Solutions Group (PDSG). Colors editable from Appearance > Customize > PDSG Colors.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pdsg
*/

:root{
  --pdsg-primary:#164a8f;
  --pdsg-accent:#19c9c4;
  --pdsg-ink:#0e2a4d;
  --pdsg-bg:#ffffff;
  --pdsg-surface:#f1f7fc;
  --pdsg-line:#d8e6f2;
  --pdsg-muted:#4a6178;
  --pdsg-primary-soft:color-mix(in srgb,var(--pdsg-primary) 10%,white);
  --radius:14px;
  --wrap:1140px;
  --f-head:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Readex Pro",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--pdsg-bg);color:var(--pdsg-ink);font-family:var(--f-body);font-size:17px;line-height:1.9;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--pdsg-primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--pdsg-primary);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.35;margin:0 0 .5em;color:var(--pdsg-ink);font-weight:600}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{inset-inline-start:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:99}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Cross-stitch band (نمط التطريز) */
.stitch{height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cg fill='none' stroke='%23164a8f' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 3l6 6-6 6-6-6z'/%3E%3Cpath d='M27 3l6 6-6 6-6-6z' stroke='%2319c9c4'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat-x;background-size:36px 18px;opacity:.55}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--pdsg-line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--pdsg-ink);font-family:var(--f-head);font-weight:600}
.brand:hover{text-decoration:none}
.brand img{height:44px;width:auto;display:block}
.nav ul{display:flex;gap:1.4rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--pdsg-ink);font-size:.95rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.is-active{text-decoration:none;border-color:var(--pdsg-accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--pdsg-line);border-radius:10px;width:46px;height:46px;padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--pdsg-ink);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,6vw,4.5rem);background:linear-gradient(180deg,var(--pdsg-surface),#fff)}
.hero .wrap{max-width:880px;margin-inline-start:max(1.25rem,calc((100% - var(--wrap))/2))}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.6rem);font-weight:700;letter-spacing:-.01em;margin-bottom:.35em}
.hero .name{font-family:var(--f-head);font-size:1.15rem;color:var(--pdsg-primary);margin-bottom:1rem;font-weight:500}
.hero .en{color:var(--pdsg-muted);font-size:1rem;margin-bottom:2rem}
.btn{display:inline-block;background:var(--pdsg-primary);color:#fff;padding:.8rem 1.6rem;border-radius:999px;font-family:var(--f-head);font-weight:500;border:2px solid var(--pdsg-primary);transition:background .2s}
.btn:hover{background:var(--pdsg-ink);border-color:var(--pdsg-ink);text-decoration:none;color:#fff}
.btn.ghost{background:transparent;color:var(--pdsg-ink);border-color:var(--pdsg-line);margin-inline-start:.6rem}
.btn.ghost:hover{background:var(--pdsg-surface);color:var(--pdsg-ink);border-color:var(--pdsg-primary)}

/* Sections */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.sec-head{max-width:720px;margin-bottom:2.5rem}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem);position:relative;padding-inline-start:1.1rem}
.sec-head h2::before{content:"";position:absolute;inset-inline-start:0;top:.25em;bottom:.25em;width:5px;border-radius:3px;background:var(--pdsg-accent)}
.alt{background:var(--pdsg-surface)}
.lead{font-size:1.15rem;color:var(--pdsg-ink)}
.muted{color:var(--pdsg-muted)}

/* About */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:start}
.about-side{border-inline-start:3px solid var(--pdsg-primary);padding-inline-start:1.5rem}
.about-side p{font-family:var(--f-head);font-size:1.2rem;line-height:1.8}

/* Vision & mission */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--pdsg-line);border-radius:var(--radius);overflow:hidden;background:#fff}
.vm>div{padding:2.5rem}
.vm>div+div{border-inline-start:1px solid var(--pdsg-line);background:var(--pdsg-primary-soft)}
.vm h2{font-size:1.9rem}
.vm .big{font-family:var(--f-head);font-size:1.5rem;font-weight:500;line-height:1.6}

/* Goals */
.goals{list-style:none;margin:0;padding:0;counter-reset:g;display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.goals li{counter-increment:g;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--pdsg-line)}
.goals li::before{content:counter(g);font-family:var(--f-head);font-size:1.8rem;font-weight:700;color:var(--pdsg-primary);line-height:1.2}
.goals h3{font-size:1.15rem;margin-bottom:.2em}
.goals p{margin:0;color:var(--pdsg-muted);font-size:.98rem;line-height:1.8}
.goals li:last-child{grid-column:1/-1}

/* Offer */
.offer{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem}
.offer article{grid-column:span 2;background:#fff;border:1px solid var(--pdsg-line);border-radius:var(--radius);padding:1.8rem}
.offer article:nth-child(1){grid-column:span 3;border-top:4px solid var(--pdsg-primary)}
.offer article:nth-child(2){grid-column:span 3;border-top:4px solid var(--pdsg-accent)}
.offer h3{font-size:1.25rem}
.offer p{margin:0;color:var(--pdsg-muted);font-size:.98rem}
.offer svg{width:34px;height:34px;stroke:var(--pdsg-primary);fill:none;stroke-width:1.7;margin-bottom:.8rem}

/* Process — the signature moment */
.process p.big{font-family:var(--f-head);font-size:clamp(1.4rem,3vw,2rem);max-width:820px;margin-bottom:.6em}
.flow{list-style:none;display:flex;align-items:stretch;margin:2.5rem 0 0;padding:0;gap:0}
.flow li{flex:1;position:relative;background:#fff;border:2px solid var(--pdsg-primary);padding:1.1rem .8rem;text-align:center;font-family:var(--f-head);font-weight:500;margin-inline-end:-2px}
.flow li:first-child{border-start-start-radius:999px;border-end-start-radius:999px}
.flow li:last-child{border-start-end-radius:999px;border-end-end-radius:999px;background:var(--pdsg-primary);color:#fff}
.flow li:not(:last-child)::after{content:"";position:absolute;inset-inline-end:-9px;top:50%;width:14px;height:14px;background:#fff;border-inline-start:2px solid var(--pdsg-primary);border-block-end:2px solid var(--pdsg-primary);transform:translateY(-50%) rotate(45deg);z-index:2}
.flow li:nth-child(odd){background:var(--pdsg-primary-soft)}
.flow li:last-child::after{display:none}

/* Differentiators */
.why{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.why div{border-top:3px solid var(--pdsg-line);padding-top:1rem;transition:border-color .2s}
.why div:hover{border-color:var(--pdsg-accent)}
.why h3{font-size:1.1rem}
.why p{font-size:.95rem;color:var(--pdsg-muted);margin:0;line-height:1.8}

/* Ambition */
.ambition{background:var(--pdsg-ink);color:#eaf3f1;position:relative}
.ambition h2,.ambition h3{color:#fff}
.ambition .sec-head h2::before{background:var(--pdsg-accent)}
.ambition .closing{font-family:var(--f-head);font-size:clamp(1.5rem,3.4vw,2.3rem);color:#fff;margin-top:1.5rem;font-weight:600}
.ambition .lead{color:#eaf3f1}
.ambition .wrap{max-width:820px}

/* Yopalt */
.tree{display:grid;grid-template-columns:1fr;gap:0;max-width:760px;margin:2rem auto 0;text-align:center}
.tree .node{border:2px solid var(--pdsg-primary);border-radius:var(--radius);padding:1.2rem 1.5rem;background:#fff}
.tree .node strong{display:block;font-family:var(--f-head);font-size:1.5rem}
.tree .node span{color:var(--pdsg-muted);font-size:.95rem}
.tree .node.root{background:var(--pdsg-ink);border-color:var(--pdsg-ink)}
.tree .node.root strong,.tree .node.root span{color:#fff}
.tree .node.leaf{border-style:dashed;background:var(--pdsg-primary-soft)}
.tree .link{width:2px;height:28px;background:var(--pdsg-primary);margin:0 auto}

/* Slogan + footer */
.slogan{text-align:center;padding:4rem 0 3rem}
.slogan p.big{font-family:var(--f-head);font-size:clamp(1.8rem,4.5vw,3rem);font-weight:700;margin-bottom:.2em}
.site-footer{border-top:1px solid var(--pdsg-line);padding:1.5rem 0 2rem;font-size:.9rem;color:var(--pdsg-muted)}
.site-footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* Generic content */
.content{padding:3rem 0;max-width:780px}
.content h1{font-size:2.2rem}

@media (max-width:960px){
  .about-grid,.vm{grid-template-columns:1fr}
  .vm>div+div{border-inline-start:0;border-top:1px solid var(--pdsg-line)}
    .goals{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr 1fr}
  .offer article,.offer article:nth-child(1),.offer article:nth-child(2){grid-column:span 1}
  .offer article:last-child{grid-column:1/-1}
  .why{grid-template-columns:1fr 1fr}
  .flow{flex-direction:column}
  .flow li,.flow li:first-child,.flow li:last-child{border-radius:12px;margin:0 0 -2px}
  .flow li:not(:last-child)::after{inset-inline-end:auto;inset-inline-start:50%;top:auto;bottom:-9px;transform:translateX(-50%) rotate(-45deg);border:0;border-inline-end:2px solid var(--pdsg-primary);border-block-end:2px solid var(--pdsg-primary)}
  .nav-toggle{display:flex}
  .nav{display:none;position:absolute;inset-inline:0;top:100%;background:#fff;border-bottom:1px solid var(--pdsg-line);padding:1rem 1.5rem}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:.4rem}
}
@media (max-width:560px){
  .offer,.why{grid-template-columns:1fr}
  .offer article:last-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}