/*
Theme Name: Hasoubna Landing (Hasoubna)
Theme URI: https://example.com/
Author: Hasoobna IT
Author URI: https://example.com/
Description: ثيم هبوط عربي خفيف وسريع لشركة Hasoubna لتقنية المعلومات (Landing Page) مع أفضل الممارسات (RTL, أداء, أمان, قابلية وصول) ونموذج تواصل عبر AJAX.
Version: 1.2.3
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hasoobna
Tags: one-column, custom-logo, rtl-language-support, translation-ready, responsive-layout
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========
   Base
   ========== */
:root{
  --bg:#070B14;
  --card:#0B1220;
  --text:#EAF0FF;
  --muted:#A9B6D3;
  --brand:#4F7DFF;
  --brand2:#22C55E;
  --line: rgba(255,255,255,.10);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  background:
    radial-gradient(900px 450px at 15% 5%, rgba(79,125,255,.22), transparent 60%),
    radial-gradient(700px 400px at 85% 10%, rgba(34,197,94,.14), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(79,125,255,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 18px}

.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height:1px; margin:-1px; overflow:hidden; padding:0;
  position:absolute !important; width:1px; word-wrap:normal !important;
}

/* ==========
   Components
   ========== */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.04);
  color:var(--muted); font-size:13px;
  backdrop-filter: blur(6px);
}
.dot{width:8px; height:8px; border-radius:999px; background:var(--brand2); box-shadow:0 0 0 4px rgba(34,197,94,.18)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  will-change: transform;
  font-weight:650;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18)}
.btn.primary{
  background: linear-gradient(135deg, rgba(79,125,255,.95), rgba(79,125,255,.70));
  border-color: rgba(79,125,255,.55);
  box-shadow: 0 10px 26px rgba(79,125,255,.22);
}
.btn.primary:hover{background: linear-gradient(135deg, rgba(79,125,255,1), rgba(79,125,255,.75))}
.btn.ghost{background:transparent}

/* ==========
   Header
   ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(7,11,20,.55);
  backdrop-filter: blur(10px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  min-width:200px;
}
.logo{
  width:40px; height:40px; border-radius:14px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(135deg, rgba(79,125,255,1), rgba(34,197,94,.85));
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  flex:0 0 auto;
}
.brand .name{font-weight:800; letter-spacing:.2px}
.brand .sub{display:block; color:var(--muted); font-size:12px; margin-top:2px}

.primary-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:center;
}
.primary-nav a{
  color:var(--muted);
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
  transition: background .15s ease, color .15s ease;
}
.primary-nav a:hover{background: rgba(255,255,255,.06); color:var(--text)}
.nav-actions{display:flex; gap:10px; align-items:center}

/* ==========
   Hero
   ========== */
.hero{padding:54px 0 24px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:stretch;
}
.hero-card{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-main{padding:26px}
h1{
  margin:14px 0 10px;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height:1.18;
  letter-spacing:-.2px;
}
.lead{color:var(--muted); font-size:16px; margin:0 0 18px}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.trust{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
  color:var(--muted); font-size:13px
}
.trust span{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:14px;
  border:1px dashed rgba(255,255,255,.14); background: rgba(255,255,255,.03)
}
.kpis{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-top:18px
}
.kpi{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding:12px;
  background: rgba(11,18,32,.55);
}
.kpi b{display:block; font-size:18px}
.kpi small{color:var(--muted)}
.hero-side{padding:18px}
.side-box{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.55);
  border-radius: var(--radius);
  padding:16px;
  margin-bottom:12px;
}
.side-box h3{margin:0 0 8px; font-size:15px}
.side-box p{margin:0; color:var(--muted); font-size:13px}
.bullets{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.bullets li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px}
.check{
  flex:0 0 auto;
  width:22px; height:22px; border-radius:8px;
  background: rgba(34,197,94,.16);
  border:1px solid rgba(34,197,94,.25);
  display:grid; place-items:center;
}
.check svg{width:14px; height:14px}

/* ==========
   Sections
   ========== */
section{padding:26px 0}
.section-title{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:12px; margin-bottom:14px
}
.section-title h2{
  margin:0;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing:-.1px
}
.section-title p{margin:0; color:var(--muted); max-width:560px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}

.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: rgba(11,18,32,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding:16px;
}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:14px}
.tagrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.tag{
  font-size:12px; color:var(--muted);
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.steps{counter-reset: step}
.step{
  position:relative;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.step:before{
  counter-increment: step;
  content: counter(step);
  position:absolute;
  top:14px; left:14px;
  width:34px; height:34px; border-radius:14px;
  background: rgba(79,125,255,.18);
  border:1px solid rgba(79,125,255,.28);
  display:grid; place-items:center;
  font-weight:800; color:var(--text);
}
.step h3{margin:0 0 6px; padding-left:46px; font-size:16px}
.step p{margin:0; padding-left:46px; color:var(--muted); font-size:14px}

.cta{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(600px 220px at 20% 30%, rgba(79,125,255,.30), transparent 60%),
    radial-gradient(500px 220px at 85% 20%, rgba(34,197,94,.20), transparent 60%),
    rgba(11,18,32,.55);
  padding:18px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px;
  box-shadow: var(--shadow);
}
.cta h3{margin:0; font-size:18px}
.cta p{margin:4px 0 0; color:var(--muted); font-size:14px}

.faq details{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,18,32,.55);
  border-radius: var(--radius);
  padding:12px 14px;
}
.faq details + details{margin-top:10px}
summary{cursor:pointer; font-weight:700}
summary::-webkit-details-marker{display:none}
.faq p{color:var(--muted); margin:10px 0 0; font-size:14px}

form{display:grid; gap:10px}
.row{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
label{font-size:13px; color:var(--muted)}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
textarea{min-height:110px; resize:vertical}
input:focus, textarea:focus, select:focus{
  border-color: rgba(79,125,255,.55);
  box-shadow: 0 0 0 4px rgba(79,125,255,.12)
}

/* ==========
   Footer
   ========== */
.site-footer{
  padding:26px 0 30px;
  border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}
.footgrid{
  display:grid; grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.footlinks{display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start}
.footlinks a{color:var(--muted); font-size:13px}
.footlinks a:hover{color:var(--text)}
.copy{color:var(--muted); font-size:12px; margin-top:10px}

/* Responsive */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
  .primary-nav{display:block}
}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}


/* ==========
   WordPress content styling (pages, posts, archives, 404)
   ========== */
.site-main{padding:24px 0 40px}
.content-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}
.page-title{margin:0 0 10px; font-size: clamp(20px, 2.6vw, 32px); line-height:1.2}
.meta{color:var(--muted); font-size:13px; margin-top:-4px; margin-bottom:10px}
.post-list{display:grid; gap:12px}
.post-card{
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: rgba(11,18,32,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  padding:16px;
}
.post-card h2{margin:0 0 6px; font-size:18px}
.post-card p{margin:0; color:var(--muted)}
.post-card a:hover{opacity:.95}
.entry-content{color:var(--text); font-size:16px}
.entry-content a{color:#CFE0FF; text-decoration:underline; text-underline-offset:3px}
.entry-content a:hover{opacity:.92}
.entry-content h2,.entry-content h3,.entry-content h4{margin:18px 0 10px; line-height:1.25}
.entry-content ul,.entry-content ol{padding-right:18px}
.entry-content li{margin:6px 0}
.entry-content blockquote{
  margin:14px 0;
  padding:14px 14px;
  border-right:3px solid rgba(79,125,255,.55);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  color: var(--muted);
}
.entry-content code{
  padding:2px 6px; border-radius:8px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.entry-content pre{
  overflow:auto;
  padding:14px;
  border-radius:16px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.entry-content table{
  width:100%; border-collapse: collapse; overflow:hidden;
  border-radius:16px; border:1px solid rgba(255,255,255,.10);
}
.entry-content th,.entry-content td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.entry-content th{background: rgba(255,255,255,.04); text-align:right}
.pagination{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:12px
}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.pagination .current{background: rgba(79,125,255,.25); border-color: rgba(79,125,255,.45)}

/* Logo sizing if Custom Logo used */
.custom-logo-link{display:inline-flex; align-items:center; justify-content:center}
.custom-logo{max-height:40px; width:auto; height:auto; border-radius:12px}

/* Menus styling to ensure WP outputs look good */
.primary-nav ul{list-style:none; margin:0; padding:0; display:flex; gap:14px; flex-wrap:wrap}
.primary-nav li{margin:0}

/* Footer menu layout */
.footlinks ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-start;
}
.footlinks li{margin:0}
.footlinks a{display:inline-flex}

/* Fix select options visibility on some OS/browsers */
select option{color:#0B1220; background:#ffffff}


/* ==========
   Responsive Header Menu
   ========== */
.brand-logo-only{min-width:auto}
.brand-logo-only .name{display:none}

/* Make custom logo larger and look like a title image */
.brand-logo-only .custom-logo{
  max-height:56px;
  width:auto;
  height:auto;
  border-radius:14px;
}
@media (max-width: 920px){
  .brand-logo-only .custom-logo{max-height:50px}
}

/* Hamburger button */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.nav-toggle:hover{background: rgba(255,255,255,.10)}
.nav-toggle-lines{
  position:relative;
  width:20px; height:2px;
  background: rgba(234,240,255,.95);
  border-radius:999px;
  display:block;
}
.nav-toggle-lines:before,
.nav-toggle-lines:after{
  content:"";
  position:absolute;
  left:0;
  width:20px; height:2px;
  background: rgba(234,240,255,.95);
  border-radius:999px;
  transition: transform .15s ease, top .15s ease, opacity .15s ease;
}
.nav-toggle-lines:before{top:-6px}
.nav-toggle-lines:after{top:6px}

/* Mobile menu panel */
@media (max-width: 920px){
  .nav{position:relative}
  .nav-toggle{display:inline-flex}
  .primary-nav{display:block}
  .primary-nav{
    position:absolute;
    top:64px;
    left:0; right:0;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(7,11,20,.92);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding:10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    transform-origin: top;
    transform: scaleY(.98);
    opacity:0;
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .primary-nav ul{flex-direction:column; align-items:stretch; gap:6px}
  .primary-nav a{
    display:flex;
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    background: rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    color: var(--text);
    justify-content:space-between;
  }
  .primary-nav a:hover{background: rgba(255,255,255,.08)}
  body.hasoubna-menu-open .primary-nav{
    opacity:1;
    transform: scaleY(1);
    pointer-events:auto;
  }
  /* Hide desktop-only nav in earlier rule */
  .primary-nav{display:block !important}
}

/* Animate hamburger into X when open */
body.hasoubna-menu-open .nav-toggle-lines{background: transparent}
body.hasoubna-menu-open .nav-toggle-lines:before{top:0; transform: rotate(45deg)}
body.hasoubna-menu-open .nav-toggle-lines:after{top:0; transform: rotate(-45deg)}






/* Header alignment (RTL correct):
   - Brand/logo on the RIGHT
   - Menu on the LEFT
   We keep the flex container RTL so the first item appears on the right.
*/
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  direction:rtl;
}
.site-header .brand,
.site-header .brand-logo-only{ order:1; }
.site-header .nav-toggle{ order:2; }
.site-header .primary-nav{ order:3; }