/* ==========================================================
   منصة التركيز — style.css
   Shared, site-wide styles: header/nav, buttons, cards, footer
   ========================================================== */

:root{
  --cream:#F7F3EA;
  --navy:#1B3A4B;
  --teal:#2EC4B6;
  --coral:#FF6F59;
  --yellow:#FFD23F;
  --purple:#6A4C93;
  --card:#FFFFFF;
  --radius:22px;
  --text-muted:#5a7280;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(46,196,182,0.14) 0, transparent 40%),
    radial-gradient(circle at 88% 15%, rgba(255,111,89,0.13) 0, transparent 42%),
    radial-gradient(circle at 50% 90%, rgba(106,76,147,0.10) 0, transparent 45%);
  font-family:'Tajawal', sans-serif;
  color:var(--navy);
  min-height:100vh;
}
h1,h2,h3,.display{font-family:'Baloo 2','Tajawal', sans-serif;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
img,iframe{max-width:100%;}

.wrap{max-width:960px; margin:0 auto; padding:0 18px;}

/* ---------- Site header / nav ---------- */
.site-header{
  background:rgba(247,243,234,0.9); backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(27,58,75,0.08);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 18px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px;}
.mascot{
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg, var(--yellow), var(--coral));
  display:flex; align-items:center; justify-content:center; font-size:24px;
  animation:float 3.2s ease-in-out infinite;
  box-shadow:0 6px 16px rgba(255,111,89,0.35);
  flex-shrink:0;
}
.mascot.lg{width:88px; height:88px; font-size:42px;}
@keyframes float{ 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-7px) rotate(4deg);} }
.title-block h1{margin:0; font-size:1.25rem; font-weight:800; color:var(--navy);}
.title-block p{margin:2px 0 0; font-size:0.78rem; color:var(--text-muted); font-weight:500;}

.site-nav{display:flex; gap:6px; flex-wrap:wrap;}
.site-nav a{
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:0.9rem; color:var(--navy);
  transition:background .15s ease, color .15s ease;
}
.site-nav a:hover{background:rgba(46,196,182,0.15);}
.site-nav a.active{background:var(--navy); color:#fff;}

main{display:block; padding:24px 0 10px;}

/* ---------- Hero (home page) ---------- */
.hero{
  text-align:center; padding:38px 18px 30px;
}
.hero .mascot.lg{margin:0 auto 14px;}
.hero h2{font-size:1.9rem; margin:0 0 10px; font-weight:800;}
.hero p{max-width:560px; margin:0 auto 22px; color:var(--text-muted); line-height:1.9; font-size:1rem;}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---------- Generic buttons ---------- */
.primary-btn{
  background:linear-gradient(135deg, var(--teal), #1fa89b); color:#fff; border:none; border-radius:16px;
  padding:14px 26px; font-family:'Baloo 2'; font-weight:700; font-size:1.05rem; cursor:pointer;
  box-shadow:0 6px 16px rgba(46,196,182,0.35); transition:transform .15s ease; display:inline-block;
}
.primary-btn:hover{transform:translateY(-2px);}
.primary-btn:active{transform:translateY(0);}
.primary-btn.alt{background:linear-gradient(135deg, var(--coral), #e2543f); box-shadow:0 6px 16px rgba(255,111,89,0.35);}

.back-btn{
  background:var(--card); border:2px solid var(--navy); border-radius:999px; padding:8px 16px;
  font-weight:700; font-size:0.85rem; cursor:pointer; color:var(--navy); display:inline-block;
}
.back-btn:hover{background:var(--navy); color:#fff;}

.ghost-btn{
  background:var(--cream); border:2px solid var(--navy); border-radius:12px; padding:10px 18px; font-weight:700;
  cursor:pointer; color:var(--navy);
}

/* ---------- Panels / intro boxes ---------- */
.panel{
  background:var(--card); border-radius:var(--radius); padding:24px; box-shadow:0 8px 22px rgba(27,58,75,0.08);
}
.intro{
  background:var(--card); border-radius:var(--radius); padding:16px 20px; margin-bottom:20px;
  border:2px dashed rgba(106,76,147,0.25);
}
.intro p{margin:0; line-height:1.85; font-size:0.94rem; color:#3d5361;}
.intro strong{color:var(--purple);}

/* ---------- Section headings ---------- */
.section-title{display:flex; align-items:center; gap:10px; margin:30px 0 16px;}
.section-title h2{margin:0; font-size:1.3rem;}
.section-title .line{flex:1; height:2px; background:rgba(27,58,75,0.08);}

/* ---------- Generic card + grid (used on home & videos) ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:600px){ .grid{grid-template-columns:1fr;} }

.card{
  background:var(--card); border-radius:var(--radius); padding:20px;
  border:2px solid transparent; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 6px 18px rgba(27,58,75,0.08);
  display:flex; flex-direction:column; gap:10px; text-align:right;
}
.card.clickable{cursor:pointer;}
.card.clickable:hover, .card.clickable:focus-visible{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(27,58,75,0.14); outline:none; }
.card.clickable:focus-visible{ border-color:var(--teal); }
.card.disabled{opacity:0.6; cursor:default;}
.card.disabled:hover{transform:none; box-shadow:0 6px 18px rgba(27,58,75,0.08);}

.icon-badge{
  width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:28px; align-self:flex-start;
}
.bg-teal{background:rgba(46,196,182,0.18);}
.bg-coral{background:rgba(255,111,89,0.18);}
.bg-yellow{background:rgba(255,210,63,0.28);}
.bg-purple{background:rgba(106,76,147,0.16);}

.card h3{margin:0; font-size:1.1rem;}
.card p{margin:0; font-size:0.86rem; color:var(--text-muted); line-height:1.7;}
.skill-tag{
  display:inline-block; margin-top:2px; font-size:0.7rem; font-weight:700; color:var(--navy);
  background:var(--cream); padding:4px 10px; border-radius:999px; width:fit-content;
}
.badge-soon{
  display:inline-block; font-size:0.68rem; font-weight:800; color:#fff; background:var(--purple);
  padding:3px 10px; border-radius:999px; width:fit-content;
}

/* ---------- Video cards ---------- */
.video-card{padding:16px;}
.video-frame-wrap{
  position:relative; width:100%; padding-top:56.25%; border-radius:14px; overflow:hidden; background:#000;
}
.video-frame-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-card h3{margin-top:4px;}
.video-source{font-size:0.75rem; color:var(--text-muted);}

/* ---------- Reels-style random video player (home page) ---------- */
.reel-card{max-width:380px; margin:0 auto 10px; text-align:center;}
.reel-wrap{
  width:100%; aspect-ratio:9/16; border-radius:24px; overflow:hidden; position:relative; background:#000;
  box-shadow:0 12px 32px rgba(27,58,75,0.22);
}
.reel-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.reel-wrap video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.reel-wrap .hidden{display:none !important;}
.reel-actions{display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap;}
.reel-hint{font-size:0.78rem; color:var(--text-muted); margin-top:10px; line-height:1.7;}


/* ---------- Footer ---------- */
footer{text-align:center; margin:34px 0 10px; font-size:0.78rem; color:#8298a2; padding:0 18px;}