/* badr-tanmia inner.css — demo css/pages.css + css/responsive.css verbatim (url paths rewritten).
   responsive.css MUST stay LAST (demo load order) — see main.css header note. */

/* ===== demo css/pages.css (verbatim, url paths rewritten) ===== */
/* ===== New info sections: about, board, governance, programs, specialized ===== */
.about{background:#fff;}
.about-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;}
.about-text p{color:var(--text-secondary); margin-bottom:16px;}
.vm-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px;}
.vm-card{background:var(--bg); border-radius:var(--radius-md); padding:22px; border:1px solid var(--border); transition:transform .3s, box-shadow .3s;}
.vm-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.vm-card h2{font-size:19px; color:var(--primary-green); margin-bottom:6px;}
.vm-card p{margin:0; font-size:14.5px;}
.goals-list{display:grid; gap:14px;}
.goal-item{display:flex; gap:14px; align-items:flex-start; background:var(--bg); padding:18px; border-radius:var(--radius-md); border:1px solid var(--border);}
.goal-num{flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--primary-green); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:var(--font-display);}
.goal-item h3{font-size:16px; margin-bottom:2px;}
.goal-item p{margin:0; font-size:14px; color:var(--text-secondary);}

.board{background:var(--bg);}
.board-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.member-card{background:#fff; border-radius:var(--radius-md); padding:28px 18px; text-align:center; box-shadow:var(--shadow-card); transition:transform .3s, box-shadow .3s;}
.member-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-soft);}
.member-avatar{width:78px; height:78px; border-radius:50%; margin:0 auto 14px; background:linear-gradient(135deg,var(--primary-green),var(--light-green)); color:#fff; font-size:28px; font-weight:800; display:flex; align-items:center; justify-content:center; font-family:var(--font-display);}
.member-card h2{font-size:16px;}
.member-card span{color:#8A6420; font-weight:700; font-size:14px;}

.governance{background:#fff;}
.doc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.doc-card{display:flex; flex-direction:column; gap:8px; padding:24px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg); transition:.3s;}
.doc-card:hover{border-color:var(--secondary-green); transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.doc-card svg{width:34px; height:34px; color:var(--primary-green);}
.doc-card h3{font-size:16px;}
.doc-card p{font-size:13.5px; color:var(--text-secondary); margin:0;}

.programs{background:var(--bg);}
.program-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.program-card{display:flex; gap:20px; background:#fff; border-radius:var(--radius-md); padding:28px; box-shadow:var(--shadow-card); border-right:5px solid var(--gold); transition:transform .3s, box-shadow .3s;}
.program-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft);}
.program-icon{flex-shrink:0; width:60px; height:60px; border-radius:16px; background:rgba(15,92,74,.09); color:var(--primary-green); display:flex; align-items:center; justify-content:center;}
.program-icon svg{width:30px; height:30px;}
.program-card h3{font-size:19px; margin-bottom:6px;}
.program-card p{color:var(--text-secondary); font-size:14.5px; margin-bottom:12px;}
.program-card a{color:var(--primary-green); font-weight:700; font-size:14px;}

.guide{background:#fff; padding:60px 0;}
.guide-box{display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(120deg,var(--primary-green),var(--secondary-green)); color:#fff; border-radius:var(--radius-lg); padding:36px 44px;}
.guide-box h3{color:#fff; font-size:24px; margin-bottom:6px;}
.guide-box p{color:rgba(255,255,255,.9); margin:0;}

.specialized{background:var(--bg);}
.spec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.spec-card{background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .3s, box-shadow .3s;}
.spec-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-soft);}
.spec-top{height:120px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary-green),var(--secondary-green)); color:#fff;}
.spec-top svg{width:54px; height:54px;}
.spec-body{padding:22px;}
.spec-body h3{font-size:19px; margin-bottom:6px;}
.spec-body p{color:var(--text-secondary); font-size:14.5px; margin-bottom:12px;}
.spec-body li{font-size:14px; padding:4px 0; padding-right:18px; position:relative;}
.spec-body li::before{content:""; position:absolute; right:0; top:14px; width:7px; height:7px; border-radius:50%; background:var(--gold);}

/* ===== Motion helpers (toggled by js/reveal.js) ===== */
.js .reveal{opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s ease;}
.js .reveal.from-right{transform:translateX(40px);}
.js .reveal.from-left{transform:translateX(-40px);}
.js .reveal.in{opacity:1; transform:none;}
.slide{transition:opacity 1s ease, transform 8s ease;}
.slide.active{transform:scale(1.06);}
.section-head h2{position:relative; padding-bottom:14px;}
.section-head h2::after{content:""; position:absolute; right:0; bottom:0; width:0; height:4px; border-radius:4px; background:var(--gold); transition:width .8s ease .2s;}
.section-head.in h2::after{width:70px;}

/* ===== Contact ===== */
.contact{background:#fff;}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:32px; align-items:stretch;} /* minmax(0,…) fix: demo-inherited 320px blowout (live demo scrolls 394px) */
.contact-cards{display:grid; gap:16px;}
.contact-card{display:flex; gap:16px; align-items:flex-start; padding:20px 22px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md); transition:transform .3s, box-shadow .3s;}
.contact-card > div{min-width:0; overflow-wrap:anywhere;} /* long email token floor — demo-inherited */
.contact-card:hover{transform:translateX(-6px); box-shadow:var(--shadow-soft);}
.contact-icon{flex-shrink:0; width:48px; height:48px; border-radius:14px; background:var(--primary-green); color:#fff; display:flex; align-items:center; justify-content:center;}
.contact-icon svg{width:24px; height:24px;}
.contact-card h3{font-size:16px; margin-bottom:4px;}
.contact-card p{font-size:14.5px; color:var(--text-secondary);}
.contact-card a{color:var(--primary-green); font-weight:700;}
.contact-card a:hover{color:var(--gold);}
.contact-card small{color:var(--text-secondary);}
.hours{display:grid; gap:4px; min-width:260px;}
.hours li{display:flex; justify-content:space-between; gap:20px; font-size:14.5px; color:var(--text-secondary);}
.hours b{color:var(--text);}
.hours .closed{color:#B04A3A;}
.contact-map{position:relative; min-height:420px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid var(--border);}
.contact-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.map-open{position:absolute; bottom:16px; right:16px;}
@media (max-width:1080px){.contact-grid{grid-template-columns:minmax(0,1fr);} .contact-map{min-height:340px;}}

/* ===== Photo credits ===== */
.photo-credits{max-width:900px; margin:14px auto 0; font-size:13.5px; color:rgba(255,255,255,.8);}
.photo-credits summary{cursor:pointer; font-weight:700; text-align:center;}
.photo-credits p{margin-top:8px; line-height:1.9;}
.photo-credits a{text-decoration:underline;}

.assembly, .reports{background:var(--bg);}

.demo-tag{display:inline-block; margin-right:8px; padding:3px 12px; border-radius:999px; font-size:13px; font-weight:700; color:#8a5a00; background:#fff3cf; border:1px dashed var(--gold); vertical-align:middle;}

.contact-social .social-icons{margin-top:8px; flex-wrap:wrap;}
.contact-social .social-icons a{background:var(--primary-green); color:#fff;}
.contact-social .social-icons a:hover{background:var(--gold);}

/* ===== Inner pages (عن الجمعية / الحوكمة والشفافية) ===== */
.doc-grid-5{grid-template-columns:repeat(5,1fr);}
.page-hero{background:linear-gradient(120deg,var(--primary-green),var(--secondary-green)); color:#fff; padding:42px 0 38px;}
.page-hero h1{color:#fff; font-size:clamp(26px,3.2vw,38px); margin-top:10px; line-height:1.3;}
.breadcrumb{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.85);}
.breadcrumb a:hover{color:var(--light-gold);}
.breadcrumb b{font-weight:600; color:#fff;}
.page-body{padding:48px 0 72px; background:var(--bg);}
.page-layout{display:grid; grid-template-columns:290px 1fr; gap:32px; align-items:start;}
.side-nav{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden; position:sticky; top:130px;}
.side-nav h2, .side-nav .side-nav-title{background:var(--primary-green); color:#fff; font-size:17px; padding:14px 20px;}
.side-nav a{display:block; padding:11px 20px; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--border); transition:background .2s, padding .2s, color .2s;}
.side-nav li:last-child a{border-bottom:0;}
.side-nav a:hover{background:rgba(15,92,74,.07); color:var(--primary-green); padding-right:26px;}
.side-nav a.current{background:var(--primary-green); color:#fff;}
.page-content{background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:32px; display:grid; gap:26px;}
.page-lead{font-size:17px; color:var(--text-secondary); margin:0;}
.page-content .vm-cards{margin-top:0;}
.page-content .board-grid{grid-template-columns:repeat(2,1fr);}
.page-files h2, .page-files .page-files-title{font-size:20px; margin-bottom:14px; padding-right:14px; border-right:4px solid var(--gold);}
.pdf-list{display:grid; gap:12px;}
.pdf-item{display:flex; align-items:center; gap:16px; padding:16px 20px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg);}
.pdf-badge{flex-shrink:0; width:48px; height:48px; border-radius:12px; background:#c0392b; color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display);}
.pdf-info{flex:1; min-width:0;}
.pdf-info h3{font-size:16px;}
.pdf-info span{font-size:13.5px; color:var(--text-secondary);}
.pdf-actions{display:flex; gap:8px; flex-shrink:0;}
@media (max-width:1080px){
  .doc-grid-5{grid-template-columns:repeat(2,1fr);}
  .page-layout{grid-template-columns:1fr;}
  .side-nav{position:static;}
}
@media (max-width:600px){
  .doc-grid-5, .page-content .board-grid{grid-template-columns:1fr;}
  .page-content{padding:22px 18px;}
  .pdf-item{flex-wrap:wrap;}
}

/* ===== demo css/responsive.css (verbatim, url paths rewritten) ===== */
/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .projects-grid, .testimonials-grid{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .board-grid, .doc-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid{grid-template-columns:1fr;}
  .spec-grid{grid-template-columns:repeat(2,1fr);}
  .main-nav > ul > li > a{padding:13px 14px; font-size:14px;}
  .header-actions .btn-green-outline{display:none;}
}

@media (max-width:860px){
  .brand-name{font-size:14px; max-width:210px;}
  .brand-logo{width:48px; height:48px;}
  .burger{display:flex;}
  .nav-bar{
    position:fixed; top:84px; right:0; left:0; bottom:0; background:#fff;
    transform:translateX(100%); transition:transform .35s ease; overflow-y:auto; z-index:999;
  }
  .nav-bar.open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column; padding:10px 24px 40px; justify-content:flex-start;}
  .main-nav > ul > li{border-bottom:1px solid var(--border);}
  .main-nav > ul > li > a{color:var(--text); padding:15px 0; font-size:16px;}
  .main-nav > ul > li > a::after{display:none;}
  .main-nav > ul > li:hover > a, .main-nav > ul > li > a.active{background:none; color:var(--primary-green);}
  .has-sub > a::before{display:none;}
  .sub-menu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 14px 12px; min-width:0;}
  .sub-menu a{padding:8px 0; white-space:normal;}
  .header-actions .lang-btn span{display:none;}
  .hero-stats-card{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .hs-item:nth-child(2)::after{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr); row-gap:30px;}
  .services-grid, .projects-grid, .testimonials-grid, .program-grid, .spec-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .volunteers-cta{background-attachment:scroll;}
  .guide-box{flex-direction:column; text-align:center; padding:30px 22px;}
}

@media (max-width:640px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .gallery-item:nth-child(4n+1){grid-row:span 1;}
  .board-grid, .doc-grid, .vm-cards{grid-template-columns:1fr;}
}

@media (max-width:560px){
  section{padding:60px 0;}
  .hero-slider{height:560px;}
  .header-actions .btn-gold{padding:10px 16px; font-size:13px;}
  .slide-actions{flex-wrap:wrap;}
}

@media (max-width:1240px) and (min-width:861px){
  .main-nav > ul > li > a{padding:13px 10px; font-size:13.5px;}
  .main-nav > ul > li > a::after{right:10px; left:10px;}
}