/*
Theme Name: Moomal BI Portfolio
Theme URI: https://moomalzahid.com
Author: Moomal Zahid
Author URI: https://moomalzahid.com
Description: A premium dark analytics portfolio theme for Business Intelligence, Amazon analytics and Power BI professionals. Every section, image, colour, logo, background, text block and footer element is editable or removable from Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moomal-bi
Tags: portfolio, dark, one-column, custom-colors, custom-logo, custom-menu, custom-background, editor-style, featured-images, full-width-template, blog, translation-ready
*/

/* ============================================================
   1. Design tokens  (values are injected by the Customizer)
   ============================================================ */
:root{
  --mz-bg:#07090c;
  --mz-surface:#0e1218;
  --mz-border:#1d232d;
  --mz-text:#eef2f7;
  --mz-muted:#93a0b1;
  --mz-accent:#3ea0ff;
  --mz-accent-2:#7bf0d0;
  --mz-radius:16px;
  --mz-font-head:'Manrope',system-ui,sans-serif;
  --mz-font-body:'Inter',system-ui,sans-serif;
  --mz-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --mz-max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--mz-bg);color:var(--mz-text);
  font-family:var(--mz-font-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.mz-has-bg-image{background-size:cover;background-position:center;background-attachment:fixed}
.mz-bg-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--mz-accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--mz-font-head);line-height:1.15;letter-spacing:-.02em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
.mz-wrap{max-width:var(--mz-max);margin:0 auto;padding:0 20px}
.mz-mono{font-family:var(--mz-font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mz-accent)}
.mz-muted{color:var(--mz-muted)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:999;background:var(--mz-surface);padding:10px 16px;border-radius:8px}

/* ============================================================ 2. Header */
.mz-header{position:fixed;inset:0 0 auto;z-index:80;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.mz-header.is-solid{background:color-mix(in srgb,var(--mz-bg) 85%,transparent);backdrop-filter:blur(14px);border-bottom-color:var(--mz-border)}
.mz-header-inner{max-width:var(--mz-max);margin:0 auto;padding:0 20px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.mz-brand{display:flex;align-items:center;gap:12px;color:var(--mz-text)}
.mz-brand:hover{text-decoration:none}
.mz-brand img{max-height:40px;width:auto}
.mz-monogram{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--mz-border);border-radius:10px;background:var(--mz-surface);font-family:var(--mz-font-mono);font-size:11px;letter-spacing:.14em;color:var(--mz-accent)}
.mz-brand-name{font-family:var(--mz-font-head);font-weight:700;font-size:.95rem}
.mz-brand-tag{display:block;font-size:.7rem;color:var(--mz-muted);font-weight:400;letter-spacing:.02em}
.mz-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.mz-nav a{display:block;padding:8px 12px;border-radius:999px;font-size:.85rem;color:var(--mz-muted)}
.mz-nav a:hover,.mz-nav .current-menu-item>a{background:var(--mz-surface);color:var(--mz-text);text-decoration:none}
.mz-cta{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid color-mix(in srgb,var(--mz-accent) 45%,transparent);background:color-mix(in srgb,var(--mz-accent) 14%,transparent);color:var(--mz-accent)}
.mz-cta:hover{background:color-mix(in srgb,var(--mz-accent) 26%,transparent);text-decoration:none}
.mz-cta--solid{background:var(--mz-accent);color:#04070a;border-color:var(--mz-accent)}
.mz-cta--ghost{background:transparent;border-color:var(--mz-border);color:var(--mz-text)}
.mz-burger{display:none;width:42px;height:42px;border:1px solid var(--mz-border);background:var(--mz-surface);border-radius:10px;color:var(--mz-text);cursor:pointer}
.mz-mobile{display:none;border-top:1px solid var(--mz-border);background:var(--mz-bg)}
.mz-mobile.is-open{display:block}
.mz-mobile ul{list-style:none;margin:0;padding:6px 20px 18px}
.mz-mobile a{display:block;padding:14px 0;border-bottom:1px solid var(--mz-border);color:var(--mz-text)}
@media(max-width:900px){.mz-nav,.mz-header .mz-cta{display:none}.mz-burger{display:grid;place-items:center}}

/* ============================================================ 3. Sections */
.mz-section{padding:96px 0;position:relative}
.mz-section--tight{padding:64px 0}
.mz-section-head{max-width:760px;margin-bottom:52px}
.mz-section-head h2{margin-top:.4em}
.mz-grid{display:grid;gap:22px}
.mz-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mz-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.mz-grid--2,.mz-grid--3{grid-template-columns:1fr}}
.mz-card{background:color-mix(in srgb,var(--mz-surface) 80%,transparent);border:1px solid var(--mz-border);border-radius:var(--mz-radius);padding:26px;transition:transform .35s,border-color .35s}
.mz-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--mz-accent) 45%,var(--mz-border))}
.mz-card h3{margin-bottom:.4em}
.mz-card p{color:var(--mz-muted);margin:0}

/* Hero */
.mz-hero{padding:150px 0 96px;position:relative;overflow:hidden}
.mz-hero::before{content:"";position:absolute;top:-30%;left:50%;width:120vw;height:80vh;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--mz-accent) 20%,transparent),transparent);pointer-events:none}
.mz-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative}
@media(max-width:1000px){.mz-hero-grid{grid-template-columns:1fr}}
.mz-hero p.mz-lead{font-size:1.06rem;color:var(--mz-muted);max-width:38em}
.mz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.mz-hero-media img{border-radius:var(--mz-radius);border:1px solid var(--mz-border)}

/* KPI strip */
.mz-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
@media(max-width:800px){.mz-kpis{grid-template-columns:repeat(2,1fr)}}
.mz-kpi{border:1px solid var(--mz-border);border-radius:14px;background:color-mix(in srgb,var(--mz-surface) 75%,transparent);padding:16px 18px}
.mz-kpi-value{font-family:var(--mz-font-head);font-size:1.6rem;font-weight:700}
.mz-kpi-label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mz-muted)}

/* Command center (decorative, removable) */
.mz-cc{border:1px solid var(--mz-border);border-radius:20px;background:linear-gradient(180deg,color-mix(in srgb,var(--mz-surface) 92%,transparent),color-mix(in srgb,var(--mz-bg) 92%,transparent));padding:20px}
.mz-cc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mz-cc-dots span{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mz-border);margin-right:6px}
.mz-cc-dots span:first-child{background:var(--mz-accent)}
.mz-cc-bars{display:flex;align-items:flex-end;gap:8px;height:130px;margin:18px 0}
.mz-cc-bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--mz-accent),color-mix(in srgb,var(--mz-accent) 20%,transparent));animation:mzGrow 2.4s ease-in-out infinite alternate}
@keyframes mzGrow{from{opacity:.55;transform:scaleY(.72)}to{opacity:1;transform:scaleY(1)}}
.mz-cc-bars i{transform-origin:bottom}
.mz-cc-line{height:2px;background:linear-gradient(90deg,transparent,var(--mz-accent),transparent);background-size:200% 100%;animation:mzFlow 3.5s linear infinite}
@keyframes mzFlow{to{background-position:200% 0}}
.mz-cc-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.mz-cc-mini div{border:1px solid var(--mz-border);border-radius:10px;padding:10px}
.mz-cc-mini strong{display:block;font-family:var(--mz-font-head)}
.mz-cc-mini small{color:var(--mz-muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Process */
.mz-process{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.mz-process{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.mz-process{grid-template-columns:repeat(2,1fr)}}
.mz-step{border:1px solid var(--mz-border);border-radius:14px;padding:18px;background:color-mix(in srgb,var(--mz-surface) 65%,transparent)}
.mz-step span{font-family:var(--mz-font-mono);font-size:.72rem;color:var(--mz-accent)}
.mz-step h3{font-size:1rem;margin:.5em 0 .3em}
.mz-step p{font-size:.85rem;color:var(--mz-muted);margin:0}

/* Projects */
.mz-project{overflow:hidden;padding:0}
.mz-project-shot{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--mz-border)}
.mz-project-shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mz-project:hover .mz-project-shot img{transform:scale(1.04)}
.mz-project-body{padding:24px}
.mz-project-body h3{font-size:1.25rem}
.mz-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.mz-tag{font-size:.72rem;padding:5px 10px;border-radius:999px;border:1px solid var(--mz-border);color:var(--mz-muted)}
.mz-project-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}

/* Embed */
.mz-embed{position:relative;border:1px solid var(--mz-border);border-radius:var(--mz-radius);overflow:hidden;background:var(--mz-surface)}
.mz-embed iframe{display:block;width:100%;height:min(72vh,640px);border:0}
.mz-embed-hold{display:grid;place-items:center;gap:14px;padding:60px 20px;text-align:center}

/* About */
.mz-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
@media(max-width:900px){.mz-about{grid-template-columns:1fr}}
.mz-portrait img{border-radius:var(--mz-radius);border:1px solid var(--mz-border)}
.mz-timeline{list-style:none;margin:0;padding:0;border-left:1px solid var(--mz-border)}
.mz-timeline li{padding:0 0 26px 22px;position:relative}
.mz-timeline li::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--mz-accent)}
.mz-timeline span{font-family:var(--mz-font-mono);font-size:.72rem;color:var(--mz-accent)}
.mz-timeline h3{font-size:1rem;margin:.3em 0 .2em}
.mz-timeline p{color:var(--mz-muted);font-size:.9rem;margin:0}

/* Contact */
.mz-contact-card{border:1px solid var(--mz-border);border-radius:var(--mz-radius);background:color-mix(in srgb,var(--mz-surface) 80%,transparent);padding:34px}
.mz-detail{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--mz-border);font-size:.92rem}
.mz-detail:last-child{border-bottom:0}
.mz-detail span{color:var(--mz-muted)}

/* Content / blog */
.mz-page-head{padding:140px 0 30px}
.mz-content{max-width:820px;margin:0 auto;padding:0 20px 90px}
.mz-content img{border-radius:var(--mz-radius)}
.mz-content blockquote{border-left:2px solid var(--mz-accent);margin:0;padding-left:18px;color:var(--mz-muted)}
.mz-post-list{display:grid;gap:20px}
.mz-pagination{display:flex;gap:10px;margin-top:30px}
.mz-widgets{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.mz-widgets{grid-template-columns:1fr}}
.mz-widgets ul{list-style:none;padding:0;margin:0}
.mz-widgets a{color:var(--mz-muted)}

/* Footer */
.mz-footer{border-top:1px solid var(--mz-border);background:color-mix(in srgb,var(--mz-surface) 45%,transparent);padding:56px 0 28px}
.mz-footer-top{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.mz-footer-name{font-family:var(--mz-font-head);font-weight:700;font-size:1.05rem}
.mz-footer nav ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.mz-footer nav a{color:var(--mz-muted);font-size:.88rem}
.mz-social{display:flex;gap:12px;margin-top:14px}
.mz-social a{font-size:.82rem;color:var(--mz-muted)}
.mz-footer-bottom{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:40px;padding-top:18px;border-top:1px solid var(--mz-border);font-size:.78rem;color:var(--mz-muted)}

/* WP core classes */
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text,.wp-block-image figcaption{font-size:.8rem;color:var(--mz-muted)}
.sticky,.gallery-caption,.bypostauthor{}