/* ============================================================
   MOHAMED FAYEK — Branded core Gutenberg blocks (blog body)
   Loaded on the front-end (.prose) AND in the editor
   (.editor-styles-wrapper) so editing is WYSIWYG.
   Components use unique .is-style-mf-* classes (context-agnostic).
   ============================================================ */

:root,
.editor-styles-wrapper{
  --mf-bg:#15151F; --mf-bg-deep:#0e0e16;
  --mf-text:#F4F4F8; --mf-muted:#8A8A9B; --mf-muted-2:#b6b6c4;
  --mf-violet:#8B5CF6; --mf-violet-glow:#A78BFA;
  --mf-gold:#FBBF24; --mf-gold-soft:#ffd45c;
  --mf-magenta:#E879F9; --mf-mint:#5EE2B5; --mf-cyan:#7DD3FC;
  --mf-line:rgba(167,139,250,0.20);
  --mf-line-soft:rgba(255,255,255,0.08);
  --mf-hairline:rgba(255,255,255,0.08);
  --mf-hairline-2:rgba(255,255,255,0.14);
  --mf-glass:rgba(31,31,43,0.55);
  --mf-accent:#8B5CF6;
  --mf-accent-glow:#A78BFA;
  --mf-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

/* ---- Editor canvas: mimic the live dark site for fidelity ---- */
.editor-styles-wrapper{
  background:var(--mf-bg) !important;
  color:var(--mf-text);
}
.editor-styles-wrapper .wp-block{ color:var(--mf-text); }
.editor-styles-wrapper p,
.editor-styles-wrapper li{ color:var(--mf-muted-2); }
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4{ color:var(--mf-text); }

/* ============================================================
   BASE BLOCKS — dual-scoped so they brand in both contexts
   ============================================================ */

/* Links */
.prose a, .editor-styles-wrapper a{ color:var(--mf-violet-glow); text-underline-offset:3px; }

/* Lists — gradient square markers */
.prose ul:not(.is-style-mf-check), .editor-styles-wrapper ul.wp-block-list:not(.is-style-mf-check){ list-style:none; padding-left:4px; }
.prose ul:not(.is-style-mf-check) > li, .editor-styles-wrapper ul.wp-block-list:not(.is-style-mf-check) > li{ position:relative; padding-left:26px; margin:9px 0; }
.prose ul:not(.is-style-mf-check) > li::before, .editor-styles-wrapper ul.wp-block-list:not(.is-style-mf-check) > li::before{
  content:""; position:absolute; left:3px; top:11px; width:8px; height:8px; border-radius:2px;
  background:linear-gradient(135deg,var(--mf-violet),var(--mf-gold));
}

/* Table — branded by default */
.prose .wp-block-table, .editor-styles-wrapper .wp-block-table{ }
.prose .wp-block-table table, .editor-styles-wrapper .wp-block-table table{
  border-collapse:collapse; width:100%; border:1px solid var(--mf-line); border-radius:16px; overflow:hidden;
}
.prose .wp-block-table th, .editor-styles-wrapper .wp-block-table th{
  background:rgba(139,92,246,0.16); color:var(--mf-violet-glow); text-align:left;
  font-family:var(--mf-mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; padding:13px 16px;
}
.prose .wp-block-table td, .editor-styles-wrapper .wp-block-table td{
  padding:13px 16px; border-top:1px solid var(--mf-line-soft); color:var(--mf-muted-2);
}
.prose .wp-block-table tr:hover td, .editor-styles-wrapper .wp-block-table tr:hover td{ background:rgba(255,255,255,0.025); }

/* Buttons */
.prose .wp-block-button__link, .editor-styles-wrapper .wp-block-button__link{
  background:linear-gradient(135deg,var(--mf-violet),#7c45f0); color:#fff; border:0; border-radius:13px;
  padding:13px 26px; font-weight:700; box-shadow:0 12px 30px rgba(139,92,246,.34), inset 0 1px 0 rgba(255,255,255,.18);
}
.prose .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; border:1px solid var(--mf-line); color:var(--mf-text); box-shadow:none;
}

/* Details / FAQ accordion — matches the site-wide .faq design */
.wp-block-details{
  border:1px solid var(--mf-hairline); border-radius:14px; background:var(--mf-glass);
  overflow:hidden; padding:0; margin:12px 0;
}
.wp-block-details summary{
  list-style:none; cursor:pointer; color:var(--mf-text); font-size:1.08rem; font-weight:600;
  padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.wp-block-details summary::-webkit-details-marker{ display:none; }
.wp-block-details summary::after{
  content:"+"; flex:none; width:26px; height:26px; border:1px solid var(--mf-hairline-2); border-radius:8px;
  display:grid; place-items:center; color:var(--mf-accent-glow); font-family:var(--mf-mono);
  font-weight:400; font-size:18px; line-height:1; transition:transform .3s, border-color .3s, color .3s;
}
.wp-block-details[open] summary::after{ transform:rotate(45deg); border-color:var(--mf-accent); color:var(--mf-accent); }
.wp-block-details > :not(summary){ padding:0 24px; color:var(--mf-muted-2); }
.wp-block-details summary + *{ margin-top:0; }
.wp-block-details > :last-child{ padding-bottom:22px; }

/* Separator — gradient line */
.prose .wp-block-separator, .editor-styles-wrapper .wp-block-separator{
  border:0; height:1px; max-width:120px; margin:34px auto;
  background:linear-gradient(90deg,transparent,var(--mf-violet),var(--mf-gold),transparent); opacity:1;
}

/* Code / preformatted */
.prose code, .editor-styles-wrapper code{ font-family:var(--mf-mono); background:rgba(255,255,255,.06); padding:2px 7px; border-radius:6px; font-size:.88em; color:var(--mf-gold-soft); }
.prose .wp-block-code, .editor-styles-wrapper .wp-block-code{
  border:1px solid var(--mf-line); border-radius:14px; background:var(--mf-bg-deep); padding:18px 20px; font-family:var(--mf-mono); font-size:14px;
}

/* Image — rounded with subtle frame + caption */
.prose .wp-block-image img, .editor-styles-wrapper .wp-block-image img{ border-radius:14px; }
.prose .wp-block-image figcaption, .editor-styles-wrapper .wp-block-image figcaption{
  color:var(--mf-muted); font-size:13px; font-family:var(--mf-mono); text-align:center; margin-top:8px;
}

/* ============================================================
   COMPONENT BLOCK STYLES (.is-style-mf-*) — unique, unscoped
   ============================================================ */

/* Lead paragraph */
.is-style-mf-lead{ font-size:20px !important; line-height:1.7; color:var(--mf-text) !important; font-weight:500; }

/* PRO-TIP callout (quote) */
.wp-block-quote.is-style-mf-protip{
  border:1px solid rgba(251,191,36,0.34); border-left:3px solid var(--mf-gold); border-radius:16px;
  background:linear-gradient(135deg, rgba(251,191,36,0.10), rgba(251,191,36,0.02));
  padding:18px 22px; margin:24px 0; position:relative;
}
.wp-block-quote.is-style-mf-protip::before{
  content:"💡 PRO TIP"; display:block; font-family:var(--mf-mono); font-size:11px; letter-spacing:.09em;
  color:var(--mf-gold); font-weight:700; margin-bottom:8px;
}
.wp-block-quote.is-style-mf-protip p{ color:var(--mf-muted-2) !important; margin:0; font-style:normal; }
.wp-block-quote.is-style-mf-protip cite{ display:none; }

/* NOTE callout (quote, violet) */
.wp-block-quote.is-style-mf-note{
  border:1px solid var(--mf-line); border-left:3px solid var(--mf-violet); border-radius:16px;
  background:rgba(139,92,246,0.08); padding:18px 22px; margin:24px 0;
}
.wp-block-quote.is-style-mf-note::before{
  content:"ℹ NOTE"; display:block; font-family:var(--mf-mono); font-size:11px; letter-spacing:.09em;
  color:var(--mf-violet-glow); font-weight:700; margin-bottom:8px;
}
.wp-block-quote.is-style-mf-note p{ color:var(--mf-muted-2) !important; margin:0; font-style:normal; }

/* CHECKLIST (list) */
ul.is-style-mf-check{ list-style:none !important; padding-left:0 !important; }
ul.is-style-mf-check > li{ position:relative; padding-left:34px !important; margin:11px 0 !important; color:var(--mf-muted-2); }
ul.is-style-mf-check > li::before{
  content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:7px;
  display:grid; place-items:center; color:#0e0e16; font-weight:900; font-size:13px;
  background:linear-gradient(135deg,var(--mf-mint),var(--mf-cyan));
}

/* GLASS table style (stronger card) */
.wp-block-table.is-style-mf-glass table{ box-shadow:0 18px 50px rgba(0,0,0,0.28); background:linear-gradient(180deg,rgba(28,28,42,0.72),rgba(14,14,22,0.84)); }

/* GLASS CARD (group) */
.wp-block-group.is-style-mf-card{
  border:1px solid var(--mf-line); border-radius:20px; padding:24px;
  background:linear-gradient(180deg, rgba(28,28,42,0.72), rgba(14,14,22,0.84)); box-shadow:0 16px 44px rgba(0,0,0,0.26);
}

/* STAT (group) — big gradient number + label */
.wp-block-group.is-style-mf-stat{
  border:1px solid var(--mf-line); border-radius:18px; padding:18px 20px; background:rgba(255,255,255,0.035);
}
.wp-block-group.is-style-mf-stat h2,
.wp-block-group.is-style-mf-stat h3{
  margin:0 0 2px !important; font-size:30px; font-weight:800; letter-spacing:-0.02em;
  background:linear-gradient(120deg,var(--mf-violet-glow),var(--mf-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.wp-block-group.is-style-mf-stat p{ margin:0 !important; color:var(--mf-muted) !important; font-size:13px; }

/* STAT BAND (group) — full-width big number */
.wp-block-group.is-style-mf-band{
  border:1px solid var(--mf-line); border-radius:24px; padding:30px 34px; margin:30px 0;
  background:linear-gradient(135deg, rgba(22,22,34,0.92), rgba(14,14,22,0.8)); box-shadow:0 24px 70px rgba(0,0,0,0.4);
}
.wp-block-group.is-style-mf-band h2{
  font-size:clamp(48px,8vw,84px) !important; line-height:0.9; margin:0 !important; font-weight:900; letter-spacing:-0.04em;
  background:linear-gradient(120deg,var(--mf-violet-glow),var(--mf-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* CTA BAND (group) */
.wp-block-group.is-style-mf-cta{
  border:1px solid var(--mf-line); border-radius:26px; padding:36px; margin:36px 0; text-align:center;
  background:linear-gradient(135deg, rgba(139,92,246,0.22), rgba(251,191,36,0.10)); box-shadow:0 24px 70px rgba(0,0,0,0.4);
}
.wp-block-group.is-style-mf-cta h2,
.wp-block-group.is-style-mf-cta h3{ margin-top:0; }

/* PULLQUOTE — big gradient */
.prose .wp-block-pullquote, .editor-styles-wrapper .wp-block-pullquote{
  border:0; border-top:1px solid var(--mf-line); border-bottom:1px solid var(--mf-line); padding:28px 0; text-align:center;
}
.prose .wp-block-pullquote p, .editor-styles-wrapper .wp-block-pullquote p{
  font-size:clamp(22px,3vw,30px) !important; font-weight:700; letter-spacing:-0.02em; color:var(--mf-text) !important;
}
.prose .wp-block-pullquote cite, .editor-styles-wrapper .wp-block-pullquote cite{ color:var(--mf-gold); font-style:normal; font-family:var(--mf-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }


/* header brand logo (replaces icon + text) */
.brand .brand__mark{ display:block; height:64px; width:auto; filter:drop-shadow(0 0 10px rgba(167,139,250,.45)); } .brand .brand__name{ display:block; font-weight:800; font-size:1.7rem; letter-spacing:-0.02em; line-height:1; color:var(--gold); background:linear-gradient(120deg,var(--gold),var(--amber)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media(max-width:560px){ .brand .brand__mark{ height:46px; } .brand .brand__name{ font-size:1.28rem; } }
 .brand__text{ display:flex; flex-direction:column; justify-content:center; } .brand .brand__role{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text); font-weight:500; margin-top:6px; white-space:nowrap; } @media(max-width:560px){ .brand .brand__role{ font-size:8.5px; letter-spacing:.1em; margin-top:4px; } }

/* ===== content headings (blog Gutenberg blocks) — editor + front-end ===== */
.prose h1,.editor-styles-wrapper h1,.prose h2,.editor-styles-wrapper h2,.prose h3,.editor-styles-wrapper h3,.prose h4,.editor-styles-wrapper h4,.prose h5,.editor-styles-wrapper h5,.prose h6,.editor-styles-wrapper h6{ font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--mf-text); font-weight:800; letter-spacing:-0.03em; line-height:1.18; scroll-margin-top:100px; }
.prose h1,.editor-styles-wrapper h1{ font-size:clamp(2rem,4.5vw,2.7rem); margin:8px 0 18px; color:var(--mf-text); background:linear-gradient(115deg,var(--mf-text),var(--mf-violet-glow) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.prose h2,.editor-styles-wrapper h2{ font-size:clamp(1.55rem,3.2vw,2rem); margin:48px 0 16px; padding-bottom:.38em; border-bottom:1px solid var(--mf-line); color:var(--mf-text); background:linear-gradient(115deg,var(--mf-text),var(--mf-violet-glow) 92%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.prose h3,.editor-styles-wrapper h3{ font-size:clamp(1.22rem,2.3vw,1.45rem); font-weight:700; letter-spacing:-0.02em; margin:34px 0 10px; color:var(--mf-violet-glow); }
.prose h4,.editor-styles-wrapper h4{ font-size:1.12rem; font-weight:700; letter-spacing:-0.01em; margin:26px 0 8px; }
.prose h5,.editor-styles-wrapper h5{ font-size:1rem; font-weight:700; margin:22px 0 8px; }
.prose h6,.editor-styles-wrapper h6{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--mf-violet-glow); margin:22px 0 8px; }
.wp-block-heading.is-style-mf-grad,.is-style-mf-grad{ background:linear-gradient(120deg,var(--mf-text) 30%,var(--mf-violet-glow)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }