@import '/assets/css/fonts.css';
@import '/assets/css/variables.css';



:root {
  --cream2: #f5ede0;
}
body { font-family:'Rubik',sans-serif; background:var(--cream); color:var(--text); direction:rtl; }

/* NAV */
nav {
  padding:0 20px;
  height:60px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  position:fixed; top:0; width:100%;
  background:rgba(253,248,242,0.97);
  z-index:100;
}
.logo { font-size:1.1rem; font-weight:900; color:var(--navy); text-decoration:none; }
.logo span { color:#c46a2a; }
.nav-btns { display:flex; align-items:center; gap:8px; }
.nav-cta {
  display:flex; align-items:center; gap:6px;
  color:#1a4a6b; text-decoration:none;
  font-size:0.85rem; font-weight:700;
  padding:7px 14px; border-radius:50px;
  background:#eef4f8;
  transition:background 0.2s, color 0.2s;
  border:none; cursor:pointer; font-family:inherit;
}
.nav-cta:hover { background:#fdeede; color:#e8854a; }

/* POST HEADER */
.post-header {
  background:var(--cream2);
  padding:48px max(60px, calc((100% - 640px) / 2));
  border-bottom:1px solid var(--border);
  margin-top:60px;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:32px;
  align-items:center;
}
.post-header-text {
  display:flex; flex-direction:column;
}
.post-label {
  font-size:0.65rem; font-weight:700; letter-spacing:0.2em;
  color:#c46a2a; text-transform:uppercase; margin-bottom:20px;
  display:flex; align-items:center; gap:10px;
}
.post-label::before { content:''; width:28px; height:2px; background:#c46a2a; display:block; }
.post-header h1 {
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:900; line-height:1.2; color:var(--navy);
  margin-bottom:20px; letter-spacing:-0.02em;
}
.post-header .excerpt {
  font-size:1rem; color:var(--text-mid); line-height:1.75;
  margin-bottom:28px;
}
.post-header .excerpt p { margin:0 0 0.25em; }
.post-header .excerpt p:last-child { margin-bottom:0; }
.post-header h1 p { margin:0; }
.post-meta {
  padding-top:24px;
  border-top:1px solid var(--border);
  display:flex; align-items:center; gap:16px;
  font-size:0.78rem; color:var(--text-mid);
}
.post-meta strong { color:var(--navy); }

/* POST IMAGE */
.post-image-box {
  border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem;
  aspect-ratio:1/1;
  width:100%;
  background:linear-gradient(135deg,#1a4a6b,#1e5f74);
  position:relative;
}
.post-image-box::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 40% 40%, rgba(246,166,126,0.2) 0%, transparent 65%);
}
.post-image-box img { width:100%; height:100%; object-fit:cover; }

/* POST BODY */
.post-body-wrap {
  max-width:680px;
  margin:0 auto;
  padding:52px 60px 60px;
}
.post-body { font-size:1rem; line-height:1.85; color:var(--text); word-wrap:break-word; overflow-wrap:break-word; }
.post-body img, .post-body iframe, .post-body video { max-width:100%; height:auto; }
.post-body pre, .post-body code { max-width:100%; overflow-x:auto; word-wrap:break-word; white-space:pre-wrap; }
.post-body h2 {
  font-size:1.25rem; font-weight:900; color:var(--navy);
  margin:36px 0 14px; letter-spacing:-0.01em;
}
.post-body h3 {
  font-size:1.05rem; font-weight:700; color:var(--navy);
  margin:28px 0 10px;
}
.post-body p { margin-bottom:18px; }
.post-body strong { color:var(--navy); font-weight:700; }
.post-body a { color:var(--orange-deep); text-decoration:underline; word-break:break-word; }
.post-body ul, .post-body ol {
  margin:0 0 18px 0; padding-right:24px;
}
.post-body li { margin-bottom:8px; }
.post-body br { line-height:2.4; }

/* BLOCKQUOTE */
.post-body blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  border-right: 4px solid var(--orange-deep);
  background: var(--orange-light);
  border-radius: 0 12px 12px 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--navy);
  font-weight: 500;
}

/* INSIGHT BOX */
.post-body .post-insight {
  margin: 32px 0;
  padding: 22px 28px;
  background: var(--navy);
  color: #fff;
  border-radius: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.01em;
}

/* STEPS */
.post-body .post-steps {
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy);
}
.post-body .post-steps .post-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  line-height: 1.7;
}
.post-body .post-steps .post-step:last-child {
  border-bottom: none;
}
.post-body .post-steps .post-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.85rem;
  margin-top: 2px;
}
.post-body .post-steps .post-step-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(246,166,126,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.post-body .post-steps .post-step-content {
  flex: 1;
}
.post-body .post-steps .post-step-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--orange);
  margin-bottom: 2px;
}
.post-body .post-steps .post-step-text {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.9);
  font-weight: 400;
}

/* TOOL CARD */
.post-body .post-tool-card {
  margin: 28px 0;
  padding: 22px 26px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 12px rgba(30,30,30,0.06);
}
.post-body .post-tool-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}
.post-body .post-tool-by {
  font-size: 0.82rem;
  color: var(--text-light);
}
.post-body .post-tool-link {
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-body .post-tool-link:hover { text-decoration: underline; }

/* TUTORIAL CTA — eye-catching banner for interactive tutorials */
.post-body .tutorial-cta {
  margin: 36px 0 28px;
  padding: 28px 28px 24px;
  background: linear-gradient(135deg, #1a2540 0%, #1e5f74 100%);
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(26,37,64,0.25);
}
.post-body .tutorial-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(246,166,126,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.post-body .tutorial-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(246,166,126,0.18);
  color: #f6a67e;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 14px;
}
.post-body .tutorial-cta-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  line-height: 1.4;
}
.post-body .tutorial-cta-desc {
  color: #ffffffbb;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 18px;
}
.post-body .tutorial-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange-deep);
  color: #fff;
  padding: 14px 32px;
  border-radius: 50px;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 4px 20px rgba(232,133,74,0.4);
  animation: cta-glow 2s ease-in-out infinite;
}
.post-body .tutorial-cta-btn:hover {
  background: #d4743e;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(232,133,74,0.55);
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(232,133,74,0.4); }
  50% { box-shadow: 0 4px 28px rgba(232,133,74,0.65); }
}
.post-body .tutorial-cta-free {
  display: inline-block;
  margin-top: 12px;
  color: #25D366;
  font-size: 0.82rem;
  font-weight: 700;
}

/* NAV PREV/NEXT */
.post-nav {
  padding:36px max(60px, calc((100% - 640px) / 2));
  display:flex; gap:16px;
  border-bottom:1px solid var(--border);
  background:var(--cream2);
}
.post-nav-btn {
  flex:1; padding:20px 24px; border-radius:14px;
  background:#fff; border:1px solid var(--border);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color 0.2s, background 0.2s;
}
.post-nav-btn:hover { border-color:var(--orange-deep); background:var(--orange-light); }
.post-nav-btn .nav-direction {
  font-size:0.65rem; font-weight:700; letter-spacing:0.15em;
  color:var(--orange-deep); text-transform:uppercase;
}
.post-nav-btn .nav-title {
  font-size:0.88rem; font-weight:700; color:var(--navy); line-height:1.35;
}

/* SHARE BUTTONS */
.share-bar {
  padding:28px max(60px, calc((100% - 640px) / 2));
  background:var(--cream2);
  border-bottom:1px solid var(--border);
}
.share-intro {
  font-size:0.9rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:12px;
  line-height:1.5;
}
.share-buttons {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.share-label {
  font-size:0.72rem; font-weight:700; color:var(--text-mid);
  letter-spacing:0.08em; flex-shrink:0; white-space:nowrap;
}
.share-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:50px;
  font-size:0.75rem; font-weight:700; font-family:inherit;
  border:1px solid var(--border);
  background:#fff; color:var(--navy);
  text-decoration:none; cursor:pointer;
  transition:border-color 0.2s, background 0.2s, color 0.2s;
  white-space:nowrap; flex-shrink:0;
}
.share-btn:hover { border-color:var(--navy); background:var(--navy); color:#fff; }
.share-btn:hover svg { fill:#fff; stroke:#fff; }
.share-btn svg { width:14px; height:14px; fill:var(--navy); flex-shrink:0; transition:fill 0.2s, stroke 0.2s; }
.share-btn.copied { border-color:#25D366; background:#25D366; color:#fff; }
.share-btn.copied svg { fill:#fff; stroke:#fff; }
.share-icon-only { padding:9px 12px; }
.share-icon-only svg { width:18px; height:18px; }
.share-wa-btn { border-color:#25D366; }
.share-wa-btn svg { fill:#25D366; }
.share-wa-btn:hover { background:#25D366; border-color:#25D366; }
.share-wa-btn:hover svg { fill:#fff; }
.share-fb-btn { border-color:#1877F2; }
.share-fb-btn svg { fill:#1877F2; }
.share-fb-btn:hover { background:#1877F2; border-color:#1877F2; }
.share-fb-btn:hover svg { fill:#fff; }
@media(max-width:768px){
  .share-bar { padding:24px 20px; }
  .share-buttons { gap:6px; }
  .share-btn { padding:6px 11px; font-size:0.72rem; }
}

/* WHATSAPP JOIN BLOCK */
.wa-join {
  padding:40px max(60px, calc((100% - 640px) / 2));
  background:var(--cream2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.wa-join-text h3 {
  font-size:1.15rem; font-weight:900; color:var(--navy); margin-bottom:6px;
}
.wa-join-text p {
  font-size:0.88rem; color:var(--text-mid); line-height:1.6;
}
.wa-join-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:13px 28px; border-radius:50px;
  font-size:0.9rem; font-weight:900; font-family:inherit;
  text-decoration:none; white-space:nowrap; flex-shrink:0;
  transition:transform 0.2s, background 0.2s;
}
.wa-join-btn:hover { background:#1ebe5d; transform:scale(1.04); }
.wa-join-btn svg { width:20px; height:20px; fill:#fff; flex-shrink:0; }
@media(max-width:768px){
  .wa-join { flex-direction:column; padding:32px 20px; text-align:center; }
}

/* CTA */
.cta-strip {
  background:var(--navy);
  padding:44px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.cta-strip h3 { font-size:1.4rem; font-weight:900; color:#fff; }
.cta-strip p { font-size:0.88rem; color:rgba(255,255,255,0.75); margin-top:6px; }
.cta-btn-white {
  background:var(--orange); color:var(--navy);
  border:none; padding:13px 32px; border-radius:50px;
  font-size:0.9rem; font-weight:900; cursor:pointer; font-family:inherit;
  white-space:nowrap; flex-shrink:0; transition:transform 0.2s;
  text-decoration:none; display:inline-block;
}
.cta-btn-white:hover { transform:scale(1.04); }

/* FOOTER */
footer {
  background:var(--cream2);
  padding:32px 60px;
  display:flex; align-items:center; justify-content:space-between;
  color:var(--text-mid); font-size:0.8rem;
  border-top:1px solid var(--border);
}
.footer-logo { font-size:1rem; font-weight:900; color:var(--navy); }
.footer-logo span { color:#c46a2a; }

/* NOT FOUND */
.not-found {
  max-width:760px; margin:0 auto;
  padding:80px 60px; text-align:center;
}
.not-found h2 { font-size:1.5rem; font-weight:900; color:var(--navy); margin-bottom:16px; }
.not-found p { color:var(--text-mid); margin-bottom:28px; }
.not-found a { color:var(--orange-deep); text-decoration:none; font-weight:700; }

/* SKIP LINK */
.skip-link {
  position:absolute; top:-100px; left:0;
  background:var(--navy); color:#fff;
  padding:12px 24px; z-index:200;
  font-size:0.9rem; font-weight:700;
  text-decoration:none; border-radius:0 0 8px 0;
  transition:top 0.2s;
}
.skip-link:focus { top:0; }

/* MOBILE */
@media(max-width:768px){
  nav { padding:0 20px; }
  .post-header, .post-nav, .share-bar, .wa-join { padding-right:20px; padding-left:20px; }
  .post-body-wrap { padding-right:20px; padding-left:20px; }
  .post-header { padding-top:36px; margin-top:60px; grid-template-columns:1fr; }
  .post-image-box { width:100%; max-width:400px; margin:0 auto; }
  .post-body-wrap { padding-top:32px; padding-bottom:40px; }
  .post-nav { flex-direction:column; }
  .cta-strip { flex-direction:column; padding:36px 20px; text-align:center; }
  footer { flex-direction:column; gap:10px; padding:24px 20px; }
}