/*
Theme Name: Future Vision Academy
Theme URI: https://fv.academy
Author: Exa Information Technology
Author URI: https://exa.sa
Description: ثيم ووردبريس بسيط لمركز رؤية المستقبل للتدريب الصحي - بيئة اختبار (Test Environment).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: future-vision
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --fv-blue: #1b5e8c;
  --fv-blue-dark: #123a56;
  --fv-blue-darker: #0c2638;
  --fv-blue-light: #2f7fb3;
  --fv-blue-tint: #eaf3f9;
  --fv-white: #ffffff;
  --fv-ink: #14202a;
  --fv-muted: #5c7182;
  --fv-border: #dce6ee;
  --fv-gold: #d9a441;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;
  --shadow-1: 0 4px 18px rgba(18,58,86,.08);
  --shadow-2: 0 14px 40px rgba(12,38,56,.14);
  --container: 1180px;
  --font-body: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--fv-ink);
  background: var(--fv-white);
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:700; line-height:1.35; }
p{ margin:0 0 1em; color: var(--fv-muted); }

.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.skip-link{ position:absolute; right:-999px; top:0; background:var(--fv-blue); color:#fff; padding:10px 18px; z-index:9999; border-radius:0 0 8px 8px; }
.skip-link:focus{ right:0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 26px; border-radius: 999px; font-weight:700; font-size:.95rem;
  transition: all .2s ease; white-space:nowrap;
}
.btn-primary{ background: var(--fv-gold); color: var(--fv-blue-darker); }
.btn-primary:hover{ background:#c8912f; transform: translateY(-2px); }
.btn-outline{ background: transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-outline:hover{ background: rgba(255,255,255,.12); }
.btn-ghost{ background: var(--fv-blue-tint); color: var(--fv-blue-dark); }
.btn-ghost:hover{ background:#dcebf4; }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:8px 18px; font-size:.85rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:200; background: var(--fv-white); box-shadow: var(--shadow-1); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; height:84px; }
.site-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-logo svg{ height:40px; width:auto; }
.site-logo .logo-word{ display:flex; flex-direction:column; line-height:1.15; }
.site-logo .logo-word strong{ font-size:1.05rem; color: var(--fv-blue-dark); font-weight:800; }
.site-logo .logo-word span{ font-size:.68rem; color: var(--fv-muted); }

.primary-nav{ display:flex; align-items:center; gap: 6px; flex:1; justify-content:center; }
.primary-nav ul{ display:flex; align-items:center; gap:4px; }
.primary-nav > ul > li{ position:relative; }
.primary-nav a{ display:block; padding:10px 14px; border-radius:10px; font-weight:600; font-size:.94rem; color: var(--fv-ink); }
.primary-nav > ul > li > a:hover{ background: var(--fv-blue-tint); color: var(--fv-blue-dark); }
.menu-item-has-children > a::after{ content:"˅"; margin-inline-start:5px; font-size:.75em; opacity:.6; }
.sub-menu{
  position:absolute; top: 100%; right:0; min-width:230px; background:#fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-2); padding:8px;
  opacity:0; visibility:hidden; transform: translateY(8px); transition: all .18s ease;
}
.menu-item-has-children:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.sub-menu a{ border-radius:8px; font-weight:500; }
.sub-menu a:hover{ background: var(--fv-blue-tint); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-actions .cart-link{ position:relative; font-size:1.2rem; }
.header-actions .cart-count{
  position:absolute; top:-6px; left:-8px; background:var(--fv-gold); color:var(--fv-blue-darker);
  font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.menu-toggle{ display:none; font-size:1.4rem; color: var(--fv-blue-dark); }

@media (max-width: 960px){
  .primary-nav{ position:fixed; inset:84px 0 0 0; background:#fff; flex-direction:column; justify-content:flex-start;
    padding: 20px; overflow-y:auto; transform: translateX(100%); transition: transform .25s ease; }
  .primary-nav.is-open{ transform: translateX(0); }
  .primary-nav ul{ flex-direction:column; width:100%; align-items:stretch; }
  .sub-menu{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; margin-inline-start:14px; }
  .menu-item-has-children.is-open > .sub-menu{ display:block; }
  .menu-toggle{ display:block; }
  .site-logo .logo-word{ display:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: linear-gradient(155deg, var(--fv-blue-dark), var(--fv-blue) 60%, var(--fv-blue-light));
  color:#fff; padding: 90px 0 70px; position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:auto -10% -60% auto; width:640px; height:640px;
  background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; display:grid; grid-template-columns: 1.1fr .9fr; gap:50px; align-items:center; }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.12); padding:6px 16px; border-radius:999px; font-size:.85rem; font-weight:700; margin-bottom:18px; }
.hero h1{ font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom:.6em; }
.hero p{ color: rgba(255,255,255,.82); font-size:1.05rem; max-width:52ch; }
.hero-actions{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:28px; margin-top:34px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-size:1.6rem; color: var(--fv-gold); }
.hero-stats div span{ font-size:.82rem; color: rgba(255,255,255,.75); }
.hero-visual{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding:26px; backdrop-filter: blur(4px); }
.hero-visual img{ border-radius: var(--radius-md); }

/* ==========================================================================
   Partners strip
   ========================================================================== */
.partners{ padding:34px 0; border-bottom:1px solid var(--fv-border); }
.partners .container{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.partners span{ font-weight:700; color: var(--fv-blue-dark); font-size:.9rem; flex-shrink:0; }
.partners ul{ display:flex; gap:28px; flex-wrap:wrap; }
.partners li{ font-size:.85rem; color: var(--fv-muted); font-weight:600; }

/* ==========================================================================
   Section basics
   ========================================================================== */
.section{ padding: 72px 0; }
.section-alt{ background: var(--fv-blue-tint); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head .eyebrow{ color: var(--fv-blue); font-weight:800; font-size:.85rem; letter-spacing:.03em; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:10px; }
.section-head h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--fv-blue-darker); }

/* Category tabs */
.cat-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.cat-tabs button{ padding:10px 22px; border-radius:999px; font-weight:700; font-size:.9rem; background:#fff; border:1.5px solid var(--fv-border); color: var(--fv-muted); }
.cat-tabs button.is-active, .cat-tabs button:hover{ background: var(--fv-blue); color:#fff; border-color: var(--fv-blue); }

/* Course grid & card */
.course-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap:24px; }
.course-card{ background:#fff; border:1px solid var(--fv-border); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.course-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
.course-card .thumb{ aspect-ratio: 16/10; background: var(--fv-blue-tint); position:relative; overflow:hidden; }
.course-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.course-card .badge{ position:absolute; top:12px; right:12px; background: var(--fv-gold); color:var(--fv-blue-darker); font-size:.7rem; font-weight:800; padding:4px 10px; border-radius:999px; }
.course-card .body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.course-card .meta{ font-size:.78rem; color: var(--fv-blue); font-weight:700; }
.course-card h3{ font-size:1.02rem; margin-bottom:0; }
.course-card .price{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px dashed var(--fv-border); }
.course-card .price strong{ color: var(--fv-blue-dark); font-size:1.15rem; }
.course-card .actions{ display:flex; gap:8px; padding:0 18px 18px; }

.section-cta-link{ text-align:center; margin-top:38px; }

/* Testimonials */
.testimonials{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:22px; }
.testimonial{ background:#fff; border:1px solid var(--fv-border); border-radius: var(--radius-md); padding:24px; box-shadow: var(--shadow-1); }
.testimonial p{ color: var(--fv-ink); font-size:.95rem; }
.testimonial .who{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.testimonial .who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.testimonial .who strong{ display:block; font-size:.9rem; }
.testimonial .who span{ font-size:.78rem; color: var(--fv-muted); }

/* CTA band */
.cta-band{ background: linear-gradient(135deg, var(--fv-blue-dark), var(--fv-blue)); color:#fff; border-radius: var(--radius-lg); padding: 50px 40px; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color: rgba(255,255,255,.8); max-width:52ch; margin-inline:auto; }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */
.page-banner{ background: linear-gradient(135deg, var(--fv-blue-dark), var(--fv-blue)); color:#fff; padding: 54px 0; }
.page-banner h1{ color:#fff; margin-bottom:.2em; }
.breadcrumb{ font-size:.85rem; color: rgba(255,255,255,.75); }
.breadcrumb a{ color: rgba(255,255,255,.9); }
.page-content{ padding: 56px 0; }
.page-content .container{ max-width: 860px; }
.page-content h2{ color: var(--fv-blue-dark); margin-top:1.4em; }

/* ==========================================================================
   Course archive layout
   ========================================================================== */
.archive-layout{ display:grid; grid-template-columns: 260px 1fr; gap:32px; align-items:flex-start; }
.filter-box{ background:#fff; border:1px solid var(--fv-border); border-radius: var(--radius-md); padding:20px; position:sticky; top:104px; }
.filter-box h4{ font-size:.95rem; color: var(--fv-blue-dark); margin-bottom:14px; }
.filter-box label{ display:flex; align-items:center; gap:8px; font-size:.88rem; color: var(--fv-muted); padding:6px 0; cursor:pointer; }
@media (max-width: 860px){ .archive-layout{ grid-template-columns:1fr; } }

/* ==========================================================================
   Single course
   ========================================================================== */
.course-single{ display:grid; grid-template-columns: 1fr 320px; gap:40px; align-items:flex-start; }
.course-single .cover{ border-radius: var(--radius-md); overflow:hidden; margin-bottom:26px; aspect-ratio:16/8; background:var(--fv-blue-tint); }
.course-single .cover img{ width:100%; height:100%; object-fit:cover; }
.course-single .tags{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.course-single .tags span{ background: var(--fv-blue-tint); color: var(--fv-blue-dark); font-size:.78rem; font-weight:700; padding:5px 12px; border-radius:999px; }
.buy-box{ background:#fff; border:1px solid var(--fv-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding:24px; position:sticky; top:104px; }
.buy-box .price{ font-size:1.9rem; font-weight:800; color: var(--fv-blue-dark); margin-bottom:4px; }
.buy-box .price small{ font-size:.9rem; color: var(--fv-muted); font-weight:500; }
.buy-box ul{ margin:18px 0; display:flex; flex-direction:column; gap:10px; }
.buy-box ul li{ font-size:.88rem; color: var(--fv-muted); display:flex; gap:8px; }
.buy-box ul li::before{ content:"✓"; color: var(--fv-blue); font-weight:800; }
@media (max-width:900px){ .course-single{ grid-template-columns:1fr; } }

/* ==========================================================================
   Cart page
   ========================================================================== */
.cart-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--fv-border); border-radius: var(--radius-md); overflow:hidden; }
.cart-table th, .cart-table td{ padding:16px; text-align:right; border-bottom:1px solid var(--fv-border); font-size:.92rem; }
.cart-table th{ background: var(--fv-blue-tint); color: var(--fv-blue-dark); font-size:.82rem; }
.cart-item-name{ display:flex; align-items:center; gap:12px; }
.cart-item-name img{ width:64px; height:48px; object-fit:cover; border-radius:8px; }
.cart-remove{ color:#c0392b; font-size:.82rem; font-weight:700; }
.cart-empty{ text-align:center; padding:60px 20px; color: var(--fv-muted); }
.cart-summary{ background:#fff; border:1px solid var(--fv-border); border-radius: var(--radius-md); padding:22px; }
.cart-summary .row{ display:flex; justify-content:space-between; font-size:.9rem; color: var(--fv-muted); padding:8px 0; }
.cart-summary .row.total{ color: var(--fv-blue-dark); font-weight:800; font-size:1.1rem; border-top:1px dashed var(--fv-border); margin-top:8px; padding-top:14px; }
.cart-layout{ display:grid; grid-template-columns: 1fr 320px; gap:30px; align-items:flex-start; }
@media (max-width:860px){ .cart-layout{ grid-template-columns:1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--fv-blue-darker); color: rgba(255,255,255,.75); padding-top:60px; }
.footer-top{ display:grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap:30px; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand svg{ height:38px; margin-bottom:14px; }
.footer-brand p{ color: rgba(255,255,255,.6); font-size:.9rem; max-width:32ch; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.footer-col h5{ color:#fff; font-size:.92rem; margin-bottom:16px; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color: rgba(255,255,255,.68); font-size:.88rem; }
.footer-col a:hover{ color: var(--fv-gold); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:.82rem; flex-wrap:wrap; gap:10px; }
@media (max-width:860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns: 1fr; } }

/* Mobile sticky bar (mirrors fv.academy mobile nav) */
.mobile-bar{ display:none; }
@media (max-width:640px){
  .mobile-bar{
    display:flex; position:fixed; bottom:0; inset-inline:0; background:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.08);
    z-index:250; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-bar a{ flex:1; text-align:center; font-size:.72rem; color: var(--fv-muted); display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px; }
  .mobile-bar a.is-active{ color: var(--fv-blue); font-weight:700; }
  body{ padding-bottom:64px; }
}