/*
Theme Name: SBC Skills Club
Author: SBC
Description: Arabic and English website for Skills Building Club. Includes editable bilingual content and contact form.
Version: 1.1.0
Requires at least: 6.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbc-club
*/
@import url('assets/fonts.css');
:root{--navy:#063365;--blue:#137fe5;--ink:#092a4d;--muted:#566b81;--line:#dce6f0;--pale:#f2f7fd;--white:#fff;--gradient:linear-gradient(120deg,#063365,#0866bc 68%,#159edc)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--ink);font:16px/1.85 Cairo,Arial,sans-serif;background:white}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{max-width:100%;display:block}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.5}p{color:var(--muted)}.wrap{width:min(1200px,calc(100% - 64px));margin:auto}.topbar{background:var(--navy);color:#fff;font-size:14px}.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 0}.top-links{display:flex;gap:26px;align-items:center}.top-links a{direction:ltr;display:inline-block}.header{background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.admin-bar .header{top:32px}.navrow{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:30px}.logo{width:275px;flex-shrink:0}.logo img{width:100%;height:auto}.nav{display:flex;gap:28px;align-items:center}.nav a{font-size:15px;font-weight:650;white-space:nowrap}.nav a:hover{color:var(--blue)}.nav-actions{display:flex;align-items:center;gap:18px}.lang{font-weight:750;font-size:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:12px 26px;min-height:50px;border-radius:7px;background:var(--gradient);color:white;font-weight:750;border:0;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 10px 22px #06336526}.button.light{background:white;color:var(--navy)}.button.outline{background:transparent;color:var(--navy);border:1px solid #aebfd1}.arrow{font-family:Arial;font-size:23px}[dir=ltr] .arrow{transform:scaleX(-1)}.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;padding:6px 13px;color:var(--navy)}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 13% 60%,#d5e9fa 0,transparent 44%),linear-gradient(125deg,#f7faff,#edf3fc);padding:82px 0 80px}.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:65px}.eyebrow{display:flex;align-items:center;gap:11px;color:#126cc0;font-size:14px;font-weight:800;margin-bottom:18px}.eyebrow:before{content:'';width:30px;height:3px;background:#168ae4}.hero h1{font-size:clamp(38px,4.4vw,60px);font-weight:850;letter-spacing:-1.3px;line-height:1.48}.gradient-text{display:block;background:var(--gradient);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-copy>p{font-size:17px;max-width:540px;margin-top:23px;line-height:2}.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.hero-note{display:flex;gap:10px;margin-top:25px;font-size:14px;color:var(--muted)}.hero-note span:first-child{color:#177dc9}.hero-art{position:relative;padding:22px 20px 28px 0}.photo-frame{position:relative;border-radius:100px 12px 100px 12px;overflow:hidden;aspect-ratio:1.03;background:#c8dfef;box-shadow:0 22px 60px #0633651a}.photo-frame img{height:100%;width:100%;object-fit:cover;object-position:center}.photo-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#052c6370,transparent 65%)}.photo-label{position:absolute;bottom:32px;inset-inline-start:32px;color:#fff;z-index:1}.photo-label small{display:block;font-size:13px;letter-spacing:2px}.photo-label strong{font-size:24px}.float-card{position:absolute;background:white;border:1px solid #edf2f8;border-radius:13px;box-shadow:0 16px 35px #062f621c;padding:18px 24px;display:flex;gap:14px;align-items:center}.float-card strong{display:block;font-size:18px;line-height:1.5}.float-card small{color:var(--muted);font-size:13px}.float-card.top{top:0;inset-inline-start:-14px}.float-card.bottom{bottom:0;inset-inline-end:-16px}.badge-icon{height:46px;width:46px;border-radius:50%;display:grid;place-items:center;color:#0878d3;background:#eaf4ff;font-size:22px}.features{background:#fff;border-bottom:1px solid var(--line)}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0}.feature{padding:0 22px;border-inline-end:1px solid var(--line);display:flex;gap:15px;align-items:center}.feature:first-child{padding-inline-start:0}.feature:last-child{border:0}.feature strong{display:block;font-size:16px}.feature p{font-size:13px}.icon{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;color:#137fe5}.section{padding:94px 0}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}.about-visual{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:1.1;background:var(--navy)}.about-visual img{width:100%;height:100%;object-fit:cover;object-position:65%}.about-strip{position:absolute;bottom:0;right:0;left:0;background:#063365ec;color:#fff;padding:25px 28px;display:flex;justify-content:space-between;align-items:center}.about-strip strong{font-size:23px}.about-strip span{font-size:14px;color:#d1e7fd}h2{font-size:clamp(29px,3vw,42px);font-weight:800;letter-spacing:-.6px}.section-copy>p{margin-top:22px}.checks{padding:0;list-style:none;margin:24px 0 28px;display:grid;gap:10px}.checks li:before{content:'✓';color:var(--blue);font-weight:bold;margin-inline-end:12px}.programs{background:var(--pale)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px}.section-heading h2{max-width:650px}.section-heading>p{max-width:330px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{padding:32px;background:white;border:1px solid var(--line);border-radius:12px;transition:transform .2s,border-color .2s;display:flex;flex-direction:column;align-items:start}.card:hover{transform:translateY(-5px);border-color:#208de0}.card-head{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:22px}.card-head .icon{width:45px;height:45px}.card-number{font-size:14px;font-weight:700;color:#74889d}.card h3{font-size:23px;margin-bottom:12px}.card p{font-size:15px;flex:1}.text-link{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;width:100%;font-weight:750;color:var(--navy)}.journey{background:var(--gradient);color:#fff;position:relative}.journey .eyebrow{color:#a9dfff}.journey .eyebrow:before{background:#a9dfff}.journey p{color:#d4e6f7}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:48px}.step{border-top:1px solid #ffffff55;padding-top:24px}.step .number{font-size:32px;font-weight:800;color:#91d7ff;display:block;margin-bottom:12px}.step h3{font-size:21px;margin-bottom:12px}.step p{font-size:15px}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}.contact-copy>p{margin:22px 0 30px}.contact-item{display:flex;gap:17px;align-items:center;margin:22px 0}.contact-item small{display:block;color:var(--muted);font-size:14px}.contact-item a{font-weight:750;display:block;direction:ltr;text-align:start}.form{border:1px solid var(--line);padding:32px;border-radius:14px;background:#f8fbff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:700}.field.full{grid-column:1/-1}.field input,.field textarea,.field select{width:100%;min-width:0;border:1px solid #cbd8e7;border-radius:6px;background:white;color:var(--ink);padding:11px 13px;font-size:16px;outline:none}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px #137fe51a}.field textarea{min-height:125px;resize:vertical}.consent{font-size:13px;color:var(--muted);margin:17px 0;display:flex;align-items:start;gap:9px}.consent input{margin-top:6px;width:17px;height:17px;flex-shrink:0}.form .button{width:100%}.form-status{margin:15px 0;font-weight:700;font-size:14px}.form-status:empty{display:none}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.footer{background:#052747;color:#fff;padding:48px 0 20px}.footer-grid{display:flex;justify-content:space-between;gap:50px;align-items:start}.footer-brand{max-width:400px}.footer-brand img{width:270px;background:white;border-radius:5px;padding:8px}.footer-brand p{font-size:14px;color:#b9cee0;margin-top:20px}.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px;font-size:14px}.copyright{border-top:1px solid #ffffff26;margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;font-size:13px;color:#b9cee0}.skip{position:absolute;top:-100px;inset-inline-start:20px;z-index:100;background:white;padding:10px}.skip:focus{top:10px}:focus-visible{outline:3px solid #20a0ed;outline-offset:5px}.page-content{min-height:50vh;padding:70px 0}.page-content img{height:auto}.page-content a{text-decoration:underline}.privacy{margin-top:25px;font-size:14px;color:var(--muted)}.privacy summary{cursor:pointer;color:var(--navy);font-weight:700}.privacy p{margin-top:10px}html[dir=ltr] .hero h1{font-size:clamp(38px,4vw,56px);line-height:1.25;letter-spacing:-1.5px}html[dir=ltr] h2{line-height:1.3}html[dir=ltr] .logo{width:250px}html[dir=ltr] .nav{gap:20px}
@media(min-width:1500px){.hero{padding:100px 0}}
@media(max-width:1100px){.wrap{width:calc(100% - 40px)}.logo{width:220px}.nav{gap:16px}.nav-actions .button{display:none}.hero-grid{gap:35px}.hero h1{font-size:44px}.float-card{padding:14px}.about-grid,.contact-grid{gap:40px}.feature{padding:0 12px}.feature .icon{width:27px}.feature p{font-size:12px}}
@media(max-width:800px){.topbar .top-label{display:none}.topbar .wrap{justify-content:center}.top-links{gap:16px;font-size:12px}.navrow{min-height:78px;gap:12px}.logo,html[dir=ltr] .logo{width:220px;max-width:58vw}.menu-toggle{display:block}.nav-actions{gap:15px}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:white;padding:25px;box-shadow:0 15px 20px #06336518;flex-direction:column;align-items:stretch}.nav.open{display:flex}.hero{padding:46px 0 50px}.hero-grid{grid-template-columns:1fr;gap:36px}.hero-copy{max-width:650px}.hero h1{font-size:43px}.hero-copy>p{font-size:16px}.hero-art{max-width:520px;width:100%;margin:auto;padding:16px 15px 20px}.photo-frame{aspect-ratio:1.3}.float-card.top{inset-inline-start:0}.float-card.bottom{inset-inline-end:0}.features-grid{grid-template-columns:1fr 1fr;gap:24px 0}.feature{padding:0 15px}.feature:first-child{padding-inline-start:15px}.feature:nth-child(2){border:0}.feature p{font-size:13px}.section{padding:60px 0}.about-grid,.contact-grid{grid-template-columns:1fr;gap:35px}.about-visual{max-height:420px}.section-heading{display:block}.section-heading>p{margin-top:16px;max-width:100%}.cards{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.footer-grid{flex-direction:column;gap:28px}.copyright{gap:15px;flex-wrap:wrap}.admin-bar .header{top:46px}}
@media(max-width:520px){.wrap{width:calc(100% - 32px)}.hero h1,html[dir=ltr] .hero h1{font-size:36px}.hero-buttons{gap:10px}.hero-buttons .button{padding:11px 18px;font-size:14px}.float-card strong{font-size:15px}.float-card small{font-size:12px}.float-card{gap:9px;padding:10px 13px}.badge-icon{width:36px;height:36px;font-size:18px}.photo-label strong{font-size:20px}.photo-label{bottom:25px;inset-inline-start:22px}.features-grid{gap:20px 0}.feature{gap:9px;padding:0 9px}.feature:first-child{padding-inline-start:0}.feature strong{font-size:14px}.feature p{font-size:12px}.cards{grid-template-columns:1fr}.card{padding:26px}.steps{gap:22px}.step h3{font-size:18px}.form{padding:22px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-nav{gap:12px 30px}.top-links{font-size:12px;gap:14px}.hero-note{font-size:13px}.about-strip strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.honeypot{left:auto;inset-inline-start:0;clip-path:inset(50%);white-space:nowrap}.photo-label{bottom:75px}.top-links a{unicode-bidi:isolate}
.footer-brand img{height:auto}
.program-dropdown{position:relative}.program-dropdown summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;font-size:15px;font-weight:650;white-space:nowrap}.program-dropdown summary::-webkit-details-marker{display:none}.chevron{width:7px;height:7px;border-inline-end:1.8px solid;border-bottom:1.8px solid;transform:rotate(45deg);margin-top:-4px}.program-dropdown[open] .chevron{transform:rotate(225deg);margin-top:4px}.program-dropdown[open] summary{color:var(--blue)}.program-menu{position:absolute;top:calc(100% + 22px);inset-inline-start:-20px;width:295px;padding:10px;border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:10px;background:white;box-shadow:0 16px 40px #062f6226;z-index:30}.program-menu a,.program-siblings a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 13px;border-radius:6px;white-space:normal;font-size:14px;line-height:1.7}.program-menu a span:last-child,.program-siblings a span:last-child{font-size:12px;color:#6384a5}.program-menu a:hover,.program-menu a:focus-visible,.program-menu a[aria-current=page],.program-siblings a:hover,.program-siblings a[aria-current=page]{background:#eaf4ff;color:var(--navy)}.program-menu .all-programs{border-top:1px solid var(--line);margin-top:5px;padding-top:14px;color:var(--blue)}.program-hero{padding:28px 0 65px;background:radial-gradient(ellipse at 10% 100%,#d6e9fa,transparent 55%),#f2f7fd}.breadcrumbs{display:flex;gap:13px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--muted);margin-bottom:45px}.breadcrumbs a:hover{color:var(--blue)}.breadcrumbs>span:last-child{color:var(--navy)}.program-intro{display:grid;grid-template-columns:1fr 280px;gap:80px;align-items:center}.program-intro h1{font-size:clamp(34px,4vw,54px);line-height:1.4;margin-bottom:17px}.program-intro p{font-size:18px;max-width:750px;margin-bottom:25px}.program-index{background:var(--gradient);color:white;aspect-ratio:1;border-radius:24px 6px 24px 6px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;direction:ltr;text-align:left}.program-index span{font-size:13px;letter-spacing:2px}.program-index strong{font-size:100px;line-height:1.2}.program-index small{font-size:12px;letter-spacing:1px}.program-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:70px;align-items:start}.program-main h2{font-size:30px}.topic-list{list-style:none;padding:0;margin:25px 0 40px;border-top:1px solid var(--line)}.topic-list li{display:flex;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}.topic-list span{color:var(--blue);font-size:15px;font-weight:700}.topic-list h3{font-size:20px;font-weight:650}.program-audience,.program-method{margin-top:35px}.program-audience p,.program-method p{margin-top:15px}.program-contact{padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--pale)}.program-contact h2,.program-siblings h2{font-size:22px}.program-contact p{font-size:15px;margin:16px 0 22px}.program-contact .button{width:100%;font-size:15px;padding:12px}.program-email{display:block;direction:ltr;text-align:center;margin-top:14px;font-size:14px;overflow-wrap:anywhere}.program-siblings{margin-top:30px}.program-siblings h2{margin-bottom:15px}.program-siblings a{padding:12px;border-bottom:1px solid var(--line)}
@media(max-width:1000px){.program-layout{grid-template-columns:minmax(0,1fr) 300px;gap:35px}.program-intro{gap:40px;grid-template-columns:1fr 220px}}
@media(max-width:800px){.nav{max-height:calc(100dvh - 100px);overflow-y:auto}.program-dropdown summary{padding:0}.program-menu{position:static;width:100%;margin-top:15px;box-shadow:none;border-top-width:1px;background:#f6faff}.program-intro{grid-template-columns:1fr}.program-index{display:none}.program-layout{grid-template-columns:1fr;gap:40px}.program-hero{padding-bottom:45px}.breadcrumbs{margin-bottom:30px}.program-intro p{font-size:16px}.program-contact{padding:24px}.program-main h2{font-size:27px}}
.chevron{border-inline-end:0;border-right:1.8px solid}
/* Homepage image refresh: preserve the full artwork and keep captions outside images. */
.hero{background:radial-gradient(ellipse at 12% 40%,#daeefe,transparent 55%),linear-gradient(120deg,#f8fbff,#edf5fd);padding:60px 0}.hero-grid{grid-template-columns:1fr 1.05fr;gap:55px}.hero-art{margin:0;padding:0;max-width:100%;width:100%;border:1px solid #dce8f3;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 18px 50px #06336512}.photo-frame{border-radius:0;aspect-ratio:1;box-shadow:none;background:#e9f4fd}.photo-frame img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;object-position:center}.photo-frame:after{display:none}.hero-caption{display:flex;align-items:center;gap:14px;padding:17px 22px;background:white}.hero-caption strong{display:block;color:var(--navy);font-size:18px;line-height:1.6}.hero-caption div>span{display:block;color:var(--muted);font-size:14px}.hero-caption small{margin-inline-start:auto;font-size:19px;font-weight:900;letter-spacing:2px;color:var(--navy)}.hero-caption .badge-icon{flex-shrink:0}.about-grid{grid-template-columns:1fr 1.08fr;gap:65px}.about-visual{aspect-ratio:auto;border:1px solid #dce8f3;border-radius:24px;background:#edf7ff;overflow:hidden}.about-visual img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;object-position:center}.about-strip{position:static;gap:15px;background:var(--gradient);padding:21px 24px}.about-strip span{font-size:12px;letter-spacing:.7px}.about-strip strong{font-size:20px}.hero h1{font-size:clamp(38px,4.2vw,56px)}
@media(max-width:1100px){.hero-grid{gap:30px}.about-grid{gap:35px}.hero-caption{padding:14px 16px}.hero-caption strong{font-size:16px}}
@media(max-width:800px){.hero{padding:40px 0}.hero-grid,.about-grid{grid-template-columns:1fr;gap:32px}.hero-art{max-width:540px;margin-inline:auto;padding:0}.photo-frame{aspect-ratio:1}.about-visual{max-height:none;max-width:540px;width:100%;margin-inline:auto}.hero h1{font-size:43px}}
@media(max-width:520px){.hero-art{border-radius:18px}.hero h1{font-size:36px}.hero-caption{padding:13px;gap:10px}.hero-caption strong{font-size:15px}.hero-caption div>span{font-size:13px}.hero-caption small{font-size:16px}.about-strip{padding:18px;flex-wrap:wrap}.about-strip strong{font-size:18px}}

/* Social profiles shared by both language versions. */
.top-community{display:flex;align-items:center;gap:20px}.social-links{display:flex;align-items:center;gap:8px}.social-links a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff52;border-radius:50%;color:#fff;background:#ffffff0a;transition:background .2s,border-color .2s}.social-links svg{width:20px;height:20px;flex-shrink:0}.social-links a:hover{background:#137fe5;border-color:#78bdff}.social-links a:focus-visible{outline:3px solid #8fd4ff;outline-offset:3px}.footer-brand .social-links{margin-top:20px}.topbar .wrap{padding-block:7px}
@media(max-width:800px){.topbar .wrap{gap:12px}.top-community .top-label{display:none}.topbar .top-links{gap:14px;font-size:12px}.top-community{gap:0}}
@media(max-width:520px){.topbar .wrap{justify-content:space-between;gap:8px}.topbar .top-links{flex-direction:column;align-items:flex-start;gap:0;line-height:1.7}.topbar .social-links{gap:7px}}