/* =========================
   MN DARK MODE SWITCH (robust)
   Supports: html[data-theme="dark"], html.dark, body.dark, body.dark-mode
   ========================= */

:root{
  --mn-bg: #ffffff;
  --mn-text: #0b1220;
  --mn-muted: rgba(15,23,42,.70);
  --mn-line: rgba(15,23,42,.12);
  --mn-surface: #ffffff;
  --mn-surface2: rgba(15,23,42,.04);

  --mn-input-bg: #ffffff;
  --mn-input-text: #0b1220;

  --mn-link: #2563eb;
}

/* SYSTEM DARK (fallback) */
@media (prefers-color-scheme: dark){
  :root{
    --mn-bg:#070b14; --mn-text:#eaf0ff; --mn-muted:rgba(234,240,255,.72);
    --mn-line:rgba(255,255,255,.16);
    --mn-surface:rgba(255,255,255,.07); --mn-surface2:rgba(255,255,255,.05);
    --mn-input-bg:#0c1220; --mn-input-text:#eaf0ff;
    --mn-link:#7dd3fc;
  }
}

/* MANUAL DARK (wins over everything) */
html[data-theme="dark"],
html.dark,
body.dark,
body.dark-mode{
  --mn-bg:#070b14; --mn-text:#eaf0ff; --mn-muted:rgba(234,240,255,.72);
  --mn-line:rgba(255,255,255,.16);
  --mn-surface:rgba(255,255,255,.07); --mn-surface2:rgba(255,255,255,.05);
  --mn-input-bg:#0c1220; --mn-input-text:#eaf0ff;
  --mn-link:#7dd3fc;
}

html, body{
  background: var(--mn-bg) !important;
  color: var(--mn-text) !important;
}

a{ color: var(--mn-link); }
p, li, small{ color: var(--mn-muted); }
h1,h2,h3,h4,h5,h6{ color: var(--mn-text) !important; }

/* Inputs always readable */
input, select, textarea{
  background: var(--mn-input-bg) !important;
  color: var(--mn-input-text) !important;
  border: 1px solid var(--mn-line) !important;
}
::placeholder{ color: var(--mn-muted) !important; }

/* Autofill fix */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--mn-input-text) !important;
  box-shadow: 0 0 0 1000px var(--mn-input-bg) inset !important;
}
/* =========================
     MUSTAFA.NET :: HOME V1
     Modern, mobile-first
     Auto Light/Dark by time
     ========================= */

  :root{
    --bg: #0b1220;
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(255,255,255,.10);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --line: rgba(255,255,255,.14);
    --shadow: 0 24px 70px rgba(0,0,0,.45);

    --brand: #6ee7ff;
    --brand2:#a78bfa;
    --ok:#22c55e;

    --radius: 18px;
    --radius2: 26px;
    --max: 1180px;
    --pad: clamp(16px, 3.5vw, 28px);
  }

  [data-theme="light"]{
    --bg: #f6f8ff;
    --panel: rgba(255,255,255,.74);
    --panel2: rgba(255,255,255,.95);
    --text: rgba(10,18,32,.92);
    --muted: rgba(10,18,32,.68);
    --line: rgba(10,18,32,.12);
    --shadow: 0 24px 70px rgba(16,24,40,.12);

    --brand: #2563eb;
    --brand2:#7c3aed;
  }

  .mn-home *{ box-sizing:border-box; }
  .mn-home{
    color: var(--text);
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(110,231,255,.18), transparent 60%),
      radial-gradient(900px 500px at 90% 10%, rgba(167,139,250,.16), transparent 60%),
      radial-gradient(900px 500px at 50% 110%, rgba(34,197,94,.10), transparent 60%),
      var(--bg);
    padding: 18px 0 44px;
  }

  .mn-wrap{
    width:min(var(--max), 100% - 2*var(--pad));
    margin:0 auto;
  }

  .mn-panel{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius2);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .mn-topbar{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding: 12px;
    border-radius: 24px;
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 14px;
  }

  .mn-brand{
    display:flex; gap:10px; align-items:center;
    min-width: 220px;
  }
  .mn-logo{
    width:120px; height:120px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 12px 34px rgba(0,0,0,.25);
    flex: 0 0 auto;
  }
  .mn-brand b{ display:block; font-size:14px; letter-spacing:.2px; }
  .mn-brand span{ display:block; font-size:12px; color: var(--muted); margin-top:2px; }

  .mn-nav{
    display:none;
    gap: 10px;
    align-items:center;
    color: var(--muted);
    font-weight: 750;
    font-size: 13px;
  }
  .mn-nav a{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
  }
  .mn-nav a:hover{
    background: var(--panel2);
    border-color: var(--line);
    color: var(--text);
  }

  .mn-actions{ display:flex; gap:10px; align-items:center; }

  .mn-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--text);
    font-weight: 800;
    cursor:pointer;
    text-decoration:none !important;
    transition: transform .12s ease, filter .12s ease;
    user-select:none;
  }
  .mn-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
  .mn-btn:active{ transform: translateY(0) scale(.99); }

  .mn-btn-primary{
    border:0;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    color: #fff !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.25);
  }
  [data-theme="light"] .mn-btn-primary{
    box-shadow: 0 18px 55px rgba(37,99,235,.25);
  }

  .mn-iconbtn{
    width:44px; height:44px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel2);
    display:grid; place-items:center;
    cursor:pointer;
  }
  .mn-iconbtn svg{ opacity:.92; }

  @media (min-width: 980px){
    .mn-nav{ display:flex; }
  }

  .mn-hero{
    display:grid;
    gap: 14px;
    grid-template-columns: 1fr;
    align-items:start;
  }
  @media (min-width: 980px){
    .mn-hero{ grid-template-columns: 1.15fr .85fr; gap: 16px; }
  }

  .mn-hero-left{
    padding: 20px;
    border-radius: 30px;
    overflow:hidden;
    position:relative;
  }
  .mn-hero-left::before{
    content:"";
    position:absolute; inset:-1px;
    background:
      radial-gradient(650px 360px at 18% 0%, rgba(110,231,255,.22), transparent 60%),
      radial-gradient(650px 360px at 92% 18%, rgba(167,139,250,.20), transparent 60%);
    pointer-events:none;
  }
  .mn-hero-left > *{ position:relative; }

  .mn-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.04);
    border-radius: 999px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
  }
  [data-theme="light"] .mn-chip{ background: rgba(255,255,255,.65); }
  .mn-dot{
    width:8px; height:8px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  }

  .mn-hero h1{
    margin: 0 0 10px;
    font-size: clamp(28px, 4.8vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.7px;
  }
  .mn-sub{
    margin: 0 0 16px;
    color: var(--muted);
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.55;
  }
  .mn-ctas{ display:flex; gap:10px; flex-wrap:wrap; }

  .mn-search{
    padding: 16px;
    border-radius: 30px;
  }
  .mn-search h2{
    margin: 0 0 10px;
    font-size: 16px;
    letter-spacing: -.2px;
  }
  .mn-searchform{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top: 8px;
  }
  .mn-searchform input{
    flex:1;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--panel2);
    color: var(--text);
    outline:none;
    font-weight: 750;
    font-size: 14px;
  }
  .mn-searchform input::placeholder{
    color: rgba(255,255,255,.45);
  }
  [data-theme="light"] .mn-searchform input::placeholder{
    color: rgba(10,18,32,.40);
  }

  .mn-section{ padding: 16px 0; }
  .mn-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 12px;
  }
  .mn-title h3{
    margin:0;
    font-size: 16px;
    letter-spacing: -.2px;
  }
  .mn-title p{
    margin:0;
    color: var(--muted);
    font-size: 13px;
  }

  .mn-grid{
    display:grid;
    gap: 12px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 620px){
    .mn-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1020px){
    .mn-grid{ grid-template-columns: repeat(4, 1fr); }
  }

  .mn-card{
    padding: 14px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: 0 16px 50px rgba(0,0,0,.18);
    min-height: 120px;
    text-decoration:none !important;
    color: var(--text) !important;
    display:block;
  }
  [data-theme="light"] .mn-card{ box-shadow: 0 16px 50px rgba(16,24,40,.10); }
  .mn-ico{
    width:38px; height:38px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.06);
    display:grid; place-items:center;
    margin-bottom: 10px;
    font-size: 18px;
  }
  .mn-card b{ display:block; margin-bottom: 4px; font-size: 14px; }
  .mn-card small{ color: var(--muted); font-size: 12px; line-height: 1.45; display:block; }

  .mn-posts{
    display:grid;
    gap: 12px;
    grid-template-columns: 1fr;
  }
  @media (min-width: 980px){
    .mn-posts{ grid-template-columns: 1.2fr .8fr; }
  }

  .mn-list{
    padding: 14px;
    border-radius: var(--radius2);
  }
  .mn-item{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
    text-decoration:none !important;
    color: var(--text) !important;
  }
  [data-theme="light"] .mn-item{ background: rgba(255,255,255,.70); }

  .mn-thumb{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.16));
    border: 1px solid var(--line);
    flex: 0 0 auto;
    overflow:hidden;
    display:grid; place-items:center;
  }
  .mn-thumb img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .mn-meta b{ display:block; margin: 0 0 6px; line-height:1.25; }
  .mn-meta .m{
    color: var(--muted);
    font-size: 12px;
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    font-weight: 700;
  }

  .mn-side{
    padding: 14px;
    border-radius: var(--radius2);
  }
  .mn-side .box{
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.03);
  }
  [data-theme="light"] .mn-side .box{ background: rgba(255,255,255,.70); }
  .mn-side h4{ margin:0 0 10px; font-size: 14px; letter-spacing: -.1px; }
  .mn-side p{ margin:0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }

  .mn-footer{
    margin-top: 16px;
    padding: 14px;
    border-radius: 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    color: var(--muted);
    font-size: 12px;
  }

  /* Mobile sticky CTA */
  .mn-sticky{
    position: fixed;
    left: 0; right: 0; bottom: 10px;
    z-index: 10;
    display:flex;
    justify-content:center;
    padding: 0 var(--pad);
    pointer-events:none;
  }
  .mn-sticky .bar{
    pointer-events:auto;
    width: min(var(--max), 100%);
    display:flex;
    gap:10px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  [data-theme="light"] .mn-sticky .bar{
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(10,18,32,.10);
  }
  .mn-sticky .bar a{ flex:1; }

  @media (min-width: 980px){
    .mn-sticky{ display:none; }
  }
  
  /* =========================================================
   MN DARK MODE PATCH (Publisher compatibility)
   Fix: white text on light surfaces / washed-out hero
   Paste at bottom of assets/mn.css
   ========================================================= */

/* Ensure the page background actually becomes dark */
html[data-theme="dark"] body,
html[data-theme="dark"] #page,
html[data-theme="dark"] .site,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .content-wrap,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .container,
html[data-theme="dark"] .wrap{
  background: var(--mn-bg) !important;
  color: var(--mn-text) !important;
}

/* Force common “card” surfaces to be dark (Publisher widgets, blocks, sections) */
html[data-theme="dark"] .widget,
html[data-theme="dark"] .sidebar .widget,
html[data-theme="dark"] .post,
html[data-theme="dark"] .page,
html[data-theme="dark"] article,
html[data-theme="dark"] section,
html[data-theme="dark"] .mn-card,
html[data-theme="dark"] .mn-tile,
html[data-theme="dark"] .mn-post-card,
html[data-theme="dark"] .mn-shortcode-wrap,
html[data-theme="dark"] .mn-hero{
  background: var(--mn-surface) !important;
  border-color: var(--mn-line) !important;
  color: var(--mn-text) !important;
}

/* Fix “washed out” look caused by bright hero glow overlay */
html[data-theme="dark"] .mn-hero::before{
  opacity: .35 !important;
  filter: saturate(.85) contrast(1.05);
}

/* Make sure text inside headings/labels doesn’t inherit low-contrast Publisher styles */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .mn-hero,
html[data-theme="dark"] .mn-post-title{
  color: var(--mn-text) !important;
}

/* Inputs: ensure they remain dark + readable in dark mode */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background: var(--mn-input-bg) !important;
  color: var(--mn-input-text) !important;
  border-color: var(--mn-line) !important;
}

/* Autofill fix */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill{
  -webkit-text-fill-color: var(--mn-input-text) !important;
  box-shadow: 0 0 0 1000px var(--mn-input-bg) inset !important;
}

/* Links on dark */
html[data-theme="dark"] a{
  color: var(--mn-link) !important;
}
/* =========================
   LOGO VISIBILITY FIX
   ========================= */
.site-logo img,
.logo img,
.bf-logo img,
.header .logo img,
.site-branding img.custom-logo,
.custom-logo-link img{
  display:block !important;
  max-height: 44px;
  width:auto;
  opacity: 1 !important;
  visibility: visible !important;
}

.custom-logo-link{ display:inline-flex !important; align-items:center; }
/* =========================
   LINK COLOR (BRAND)
   ========================= */
:root{
  --mn-link: #6d5efc; /* change this: example premium violet */
}

/* Only style links inside the site, not WP UI like admin bar */
#page a, #page a:visited,
.site a, .site a:visited{
  color: var(--mn-link) !important;
}


html[data-theme="dark"] a,
html[data-theme="dark"] a:visited{
  color: rgba(234,240,255,.92) !important;
}
html[data-theme="dark"] a:hover{
  color: #ffffff !important;
}
/* =========================
   BUTTONS (MATCH BRAND)
   ========================= */
:root{
  --mn-accent: #6d5efc; /* premium violet */
  --mn-accent2:#4cc9ff; /* cyan */
  --mn-btn-grad: linear-gradient(135deg, var(--mn-accent2), var(--mn-accent));
}

/* Primary buttons */
button,
input[type="submit"],
input[type="button"],
.wp-element-button,
.wp-block-button__link,
a.button,
a.btn,
.bf-btn,
.publisher-btn,
.search-submit{
  background: var(--mn-btn-grad) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 40px rgba(109,94,252,.22);
}

/* Secondary buttons (optional) */
.mn-btn-secondary,
a.button.secondary{
  background: var(--mn-surface2) !important;
  border: 1px solid var(--mn-line) !important;
  color: var(--mn-text) !important;
  box-shadow: none !important;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.button:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
}


/* Brand should not force nav to wrap */
.mn-brand{
  flex: 0 0 auto !important;
  min-width: 180px;
}

/* Nav takes remaining space, centered */
.mn-nav{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display:flex !important;
  justify-content:center !important;
}

/* Actions fixed width to the right */
.mn-actions{
  flex: 0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
}



/* 5) Logo image sizing (WordPress custom logo) */
.custom-logo-link img{
  max-height: 44px !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
}
/* ===== MN Mobile Nav Drawer ===== */
.mn-burger{ display:none; }
@media (max-width: 980px){
  .mn-burger{ display:inline-grid; place-items:center; font-size:18px; line-height:1; }
}



/* --- Brand / logo area --- */
.mn-brand{
  gap: 12px !important;
}
.custom-logo-link img{
  max-height: 40px !important;
}
.mn-brand b{
  font-size: 13px !important;
  font-weight: 800 !important;
}
.mn-brand span{
  font-size: 11px !important;
  opacity: .6 !important;
}


/* Active menu item */
.mn-nav-list .current-menu-item > a,
.mn-nav-list .current-menu-ancestor > a{
  color: #000 !important;
  font-weight: 800 !important;
}



/* --- Actions area: make it clearly separate --- */
.mn-actions{
  gap: 12px !important;
}

/* Icon button (theme toggle) calmer */
.mn-iconbtn{
  background: var(--mn-surface2) !important;
  border-color: var(--mn-line) !important;
  color: #000 !important;
}

/* Search button: neutral */
.mn-actions .mn-btn{
  background: transparent !important;
  border: 1px solid var(--mn-line) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Primary CTA only one with weight */
.mn-btn-primary{
  background: linear-gradient(135deg, #111, #000) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
}

/* --- Dark mode adjustments --- */
html[data-theme="dark"] .mn-nav-list > li > a{
  color: rgba(234,240,255,.75) !important;
}
html[data-theme="dark"] .mn-nav-list > li > a:hover{
  color: #fff !important;
}
html[data-theme="dark"] .mn-actions .mn-btn{
  color: rgba(234,240,255,.9) !important;
  border-color: var(--mn-line) !important;
}


/* Brand */
.mn-brand{
  flex: 0 0 auto !important;
  min-width: 200px !important;
}



/* Keep brand + actions on top row */
.mn-brand{ order: 1 !important; }
.mn-actions{ order: 2 !important; }


/* =========================
   MN FOOTER (FIXED)
   ========================= */

.mn-footer{
  margin-top: 28px;
  padding: 18px 0 70px; /* space for mobile sticky */
}

.mn-footbar{
  padding: 16px 18px;
  border-radius: 22px;
  display:flex;
  gap: 16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap; /* prevents overflow */
}

.mn-footbrand{
  display:flex;
  gap: 12px;
  align-items:center;
  min-width: 240px;
}

.mn-footbrand-text b{
  display:block;
  color: var(--mn-text);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
}
.mn-footbrand-text span{
  display:block;
  color: var(--mn-muted);
  font-size: 12px;
  margin-top: 3px;
}

.mn-footnav{ display:block; }
.mn-footlist{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mn-footlist li{ margin:0; padding:0; }
.mn-footlist a{
  display:inline-flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--mn-line);
  background: var(--mn-surface2);
  color: var(--mn-text);
  text-decoration:none;
  font-weight: 750;
}
.mn-footlist a:hover{ filter: brightness(1.03); }

.mn-footmeta{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  color: var(--mn-muted);
  font-size: 12px;
}
.mn-footmeta a{ color: inherit; text-decoration:none; }
.mn-footmeta a:hover{ text-decoration: underline; }
.mn-footsep{ opacity: .55; }

/* Mobile sticky CTA – mobile only */
.mn-sticky{ display:none; }
@media (max-width: 980px){
  .mn-sticky{
    display:flex;
    position: fixed;
    left: 0; right: 0; bottom: 10px;
    z-index: 9999;
    justify-content:center;
    padding: 0 16px;
    pointer-events:none;
  }
  .mn-sticky .bar{
    pointer-events:auto;
    width: min(1180px, 100%);
    display:flex;
    gap:10px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15,23,42,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  html[data-theme="dark"] .mn-sticky .bar{
    background: rgba(10,12,20,.55);
    border-color: rgba(255,255,255,.16);
  }
  .mn-sticky .bar a{ flex:1; }
}
/* =========================================================
   MN ARCHIVE CARDS WITH FEATURED IMAGES (NOT TOO BIG)
   ========================================================= */

.mn-archive-grid .mn-postcard{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 14px !important;
}

/* Thumbnail area */
.mn-thumbwrap{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--mn-line);
  background: var(--mn-surface2);
}

/* Keep thumbs a nice size */
.mn-thumbwrap{
  aspect-ratio: 16 / 9;     /* clean modern crop */
  max-height: 160px;        /* prevents being too tall */
}

/* Image fill */
.mn-thumbimg{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  display:block !important;
}

/* Placeholder if no thumbnail */
.mn-thumbwrap--empty{
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(600px 240px at 90% 20%, rgba(0,0,0,.05), transparent 60%),
    var(--mn-surface2);
}
html[data-theme="dark"] .mn-thumbwrap--empty{
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(600px 240px at 90% 20%, rgba(255,255,255,.06), transparent 60%),
    rgba(255,255,255,.05);
}
.mn-thumbplaceholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.mn-thumbdot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: #111;
  opacity:.35;
}
html[data-theme="dark"] .mn-thumbdot{
  background:#fff;
  opacity:.35;
}

/* Text */
.mn-postbody{ display:block; }
.mn-posttitle{
  display:block;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.25;
}

.mn-postmeta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size: 12px;
  font-weight: 750;
  color: var(--mn-muted);
  margin-bottom: 8px;
}

.mn-postexcerpt{
  margin:0;
  color: var(--mn-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Hover: subtle premium lift */
.mn-archive-grid .mn-postcard:hover{
  transform: translateY(-1px);
  filter: brightness(1.01);
}
/* =========================
   MN LOGO: BIGGER + AUTO SWITCH
   ========================= */

.mn-brand-link{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
}

/* Bigger logo */
.mn-logo-img{
  height: 100px;     /* <-- increase to 60/64 if you want */
  width: auto;
  display:block;
}

/* Only show light logo by default */
.mn-logo-dark{ display:none; }

/* When dark mode is active: swap */
html[data-theme="dark"] .mn-logo-light{ display:none; }
html[data-theme="dark"] .mn-logo-dark{ display:block; }

/* Mobile: slightly smaller so header doesn’t overflow */
@media (max-width: 520px){
  .mn-logo-img{ height: 44px; }
}

/* =========================================================
   HEADER FIX: menu must sit ABOVE logo/actions
   ========================================================= */

.mn-topbar{
  position: relative;
  z-index: 1000;
}

/* Desktop layout */
@media (min-width: 1100px){
  .mn-topbar{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    column-gap: 18px !important;
    overflow: visible !important;   /* 🔑 CRITICAL */
  }

  .mn-brand,
  .mn-actions{
    position: relative;
    z-index: 2;
  }

  .mn-nav{
    position: relative;
    z-index: 3;                     /* menu above everything */
    overflow: visible !important;   /* 🔑 allow dropdowns */
  }
}

/* =========================================================
   WP ADMIN BAR: DO NOT LET SITE CSS OVERRIDE IT
   Put this at the VERY BOTTOM of mn.css
   ========================================================= */

#wpadminbar{
  font: 13px/32px "Open Sans", sans-serif !important;
}

/* Reset anything our globals might have changed */
#wpadminbar, 
#wpadminbar *{
  text-shadow: none !important;
}

/* Force WP admin bar link colors back to WP defaults */
#wpadminbar a,
#wpadminbar a:visited{
  color: #f0f0f1 !important; /* default WP admin bar text */
}

/* Hover */
#wpadminbar a:hover,
#wpadminbar a:focus{
  color: #72aee6 !important;
}

/* Keep the bar background correct */
#wpadminbar{
  background: #1d2327 !important;
}

/* Ensure dropdowns are readable */
#wpadminbar .ab-sub-wrapper,
#wpadminbar .ab-submenu{
  background: #1d2327 !important;
}
#wpadminbar .ab-sub-wrapper a,
#wpadminbar .ab-submenu a{
  color: #f0f0f1 !important;
}
#wpadminbar .ab-sub-wrapper a:hover,
#wpadminbar .ab-submenu a:hover{
  color: #72aee6 !important;
}
/* Buttons must always stay white */
.mn-btn,
.mn-btn-primary,
a.mn-btn,
a.mn-btn-primary{
  color: #fff !important;
}
/* Primary buttons: force gradient in all modes */
.mn-btn-primary,
a.mn-btn-primary{
  background: var(--mn-btn-grad) !important;
}

/* Full-width CTA button */
.mn-btn.mn-btn-primary{
  display: flex;
  width: 100%;
  justify-content: center;
}

/* =========================================================
   HEADER HARD RESET (wins over theme)
   Fix: menu vertical/bullets + logo centered weirdly
   ========================================================= */

.mn-topbar{
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Desktop: 3-column header */
@media (min-width: 980px){
  .mn-topbar{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important; /* brand | nav | actions */
    align-items: center !important;
    column-gap: 18px !important;
  }

  /* Place items in correct columns */
  .mn-brand{ grid-column: 1 !important; justify-self: start !important; }
  .mn-nav{ grid-column: 2 !important; justify-self: center !important; overflow: visible !important; }
  .mn-actions{ grid-column: 3 !important; justify-self: end !important; }

  /* Force the WP menu list to be horizontal + no bullets */
  .mn-nav .mn-nav-list,
  .mn-nav ul{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 16px !important;
  }

  .mn-nav .mn-nav-list li,
  .mn-nav ul li{
    margin: 0 !important;
    padding: 0 !important;
  }

  .mn-nav .mn-nav-list a,
  .mn-nav ul a{
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  /* Dropdowns must not be clipped */
  .mn-nav .sub-menu{
    list-style: none !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    position: absolute !important;
    z-index: 9999 !important;
  }
}
.mn-home-hero{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
@media (min-width:980px){.mn-home-hero{grid-template-columns:1.15fr .85fr;gap:16px}}
.mn-home-left{padding:20px;border-radius:30px;overflow:hidden;position:relative}
.mn-home-left::before{content:"";position:absolute;inset:-1px;background:radial-gradient(650px 360px at 18% 0%, rgba(110,231,255,.22), transparent 60%),radial-gradient(650px 360px at 92% 18%, rgba(167,139,250,.20), transparent 60%);pointer-events:none;opacity:.95}
.mn-home-left>*{position:relative}
.mn-home-h1{margin:8px 0 10px;font-size:clamp(28px,4.8vw,52px);line-height:1.05;letter-spacing:-0.7px}
.mn-home-sub{margin:0 0 16px;color:var(--muted);font-size:clamp(14px,1.6vw,16px);line-height:1.55}
.mn-home-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.mn-trust{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px}
.mn-trust .t{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
html[data-theme="light"] .mn-trust .t{background:rgba(255,255,255,.65)}
.mn-home-right{padding:18px;border-radius:30px}
.mn-searchform{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.mn-searchform input{flex:1;min-width:240px;padding:13px 14px;border-radius:16px;border:1px solid var(--line);background:var(--panel2);color:var(--text);outline:none;font-weight:750}
.mn-searchform input::placeholder{color:rgba(255,255,255,.45)}
html[data-theme="light"] .mn-searchform input::placeholder{color:rgba(10,18,32,.40)}
.mn-mini{margin-top:12px;padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
html[data-theme="light"] .mn-mini{background:rgba(255,255,255,.70)}
.mn-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0 12px}
.mn-section-title h2{margin:0;font-size:16px;letter-spacing:-.2px}
.mn-section-title p{margin:0;color:var(--muted);font-size:13px}
.mn-cat-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.mn-cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.mn-cat-grid{grid-template-columns:repeat(4,1fr)}}
.mn-cat{padding:14px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);box-shadow:0 16px 50px rgba(0,0,0,.18);display:block}
html[data-theme="light"] .mn-cat{box-shadow:0 16px 50px rgba(16,24,40,.10)}
.mn-cat .ico{width:38px;height:38px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);display:grid;place-items:center;margin-bottom:10px;font-size:18px}
.mn-cat b{display:block;margin-bottom:4px;font-size:14px}
.mn-cat small{color:var(--muted);font-size:12px;display:block}
.mn-latest{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:980px){.mn-latest{grid-template-columns:1.2fr .8fr}}
.mn-list{padding:14px;border-radius:var(--radius2)}
.mn-item{display:block;padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:10px}
html[data-theme="light"] .mn-item{background:rgba(255,255,255,.70)}
.mn-item b{display:block;margin-bottom:6px;font-size:15px;line-height:1.25}
.mn-item .m{color:var(--muted);font-size:12px;font-weight:700;display:flex;gap:10px;flex-wrap:wrap}
.mn-item p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.mn-sidebox{padding:14px;border-radius:var(--radius2)}
.mn-sidebox .box{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
html[data-theme="light"] .mn-sidebox .box{background:rgba(255,255,255,.70)}
.mn-sidebox h3{margin:0 0 10px;font-size:14px;letter-spacing:-.1px}
.mn-sidebox p{margin:0 0 12px;color:var(--muted);font-size:12px;line-height:1.55}

/* =========================================================
   mustafa-mn :: mn.css (REBUILT FROM SCRATCH)
   - Clean light/dark theme system (html[data-theme="dark"])
   - Header: 3-column grid (brand | nav | actions)
   - Desktop dropdown + mobile drawer
   - Buttons, panels, cards
   - NO global link overrides that break WP admin bar
   ========================================================= */

/* -------------------------
   0) Design tokens
   ------------------------- */
:root{
  --mn-max: 1180px;
  --mn-pad: clamp(16px, 3.5vw, 28px);
  --mn-radius: 18px;
  --mn-radius2: 26px;

  /* Light defaults */
  --mn-bg: #f6f8ff;
  --mn-text: rgba(10,18,32,.92);
  --mn-muted: rgba(10,18,32,.68);
  --mn-line: rgba(10,18,32,.12);

  --mn-surface: rgba(255,255,255,.74);
  --mn-surface2: rgba(255,255,255,.95);

  --mn-shadow: 0 24px 70px rgba(16,24,40,.12);

  --mn-link: #111;
  --mn-link-hover: #000;

  /* Brand */
  --mn-accent: #6d5efc;
  --mn-accent2:#4cc9ff;
  --mn-btn-grad: linear-gradient(135deg, var(--mn-accent2), var(--mn-accent));

  /* Inputs */
  --mn-input-bg: #fff;
  --mn-input-text: rgba(10,18,32,.92);
}

/* Dark theme */
html[data-theme="dark"]{
  --mn-bg: #070b14;
  --mn-text: rgba(234,240,255,.92);
  --mn-muted: rgba(234,240,255,.72);
  --mn-line: rgba(255,255,255,.16);

  --mn-surface: rgba(255,255,255,.07);
  --mn-surface2: rgba(255,255,255,.05);

  --mn-shadow: 0 24px 70px rgba(0,0,0,.45);

  --mn-link: rgba(234,240,255,.92);
  --mn-link-hover: #fff;

  --mn-input-bg: #0c1220;
  --mn-input-text: rgba(234,240,255,.92);
}

/* -------------------------
   1) Base / typography
   ------------------------- */
html, body{
  background: var(--mn-bg);
  color: var(--mn-text);
}

body{
  margin:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*{ box-sizing:border-box; }

img{ max-width:100%; height:auto; display:block; }

.mn-wrap{
  width: min(var(--mn-max), calc(100% - (2 * var(--mn-pad))));
  margin: 0 auto;
}

/* Scope link styling to the site container so WP chrome (admin bar) isn’t affected */
#page a, #page a:visited,
.site a, .site a:visited{
  color: var(--mn-link);
  text-decoration: none;
}
#page a:hover, .site a:hover{
  color: var(--mn-link-hover);
  text-decoration: none;
}

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: var(--mn-text);
  letter-spacing: -.2px;
}

/* Text */
p, li, small{
  color: var(--mn-muted);
}

/* -------------------------
   2) Inputs
   ------------------------- */
#page input, #page select, #page textarea,
.site input, .site select, .site textarea{
  width:100%;
  background: var(--mn-input-bg);
  color: var(--mn-input-text);
  border: 1px solid var(--mn-line);
  border-radius: 14px;
  padding: 12px 14px;
  outline: none;
}
#page input:focus, #page select:focus, #page textarea:focus,
.site input:focus, .site select:focus, .site textarea:focus{
  border-color: rgba(109,94,252,.55);
  box-shadow: 0 0 0 4px rgba(109,94,252,.12);
}
::placeholder{ color: var(--mn-muted); }

/* Autofill */
#page input:-webkit-autofill,
#page textarea:-webkit-autofill,
#page select:-webkit-autofill{
  -webkit-text-fill-color: var(--mn-input-text);
  box-shadow: 0 0 0 1000px var(--mn-input-bg) inset;
}

/* -------------------------
   3) Surfaces (panels/cards)
   ------------------------- */
.mn-panel{
  background: var(--mn-surface);
  border: 1px solid var(--mn-line);
  border-radius: var(--mn-radius2);
  box-shadow: var(--mn-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* -------------------------
   4) Buttons
   ------------------------- */
.mn-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 12px 16px;
  border-radius: 14px;

  border: 1px solid var(--mn-line);
  background: var(--mn-surface2);
  color: var(--mn-text);

  font-weight: 800;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

.mn-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.mn-btn:active{ transform: translateY(0); filter: brightness(.99); }

.mn-btn-primary{
  border: 0;
  background: var(--mn-btn-grad);
  color: #fff;
  box-shadow: 0 18px 55px rgba(109,94,252,.22);
}
html[data-theme="dark"] .mn-btn-primary{
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Icon button */
.mn-iconbtn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid var(--mn-line);
  background: var(--mn-surface2);
  display:grid; place-items:center;
  cursor:pointer;
}

/* Full-width CTA helper */
.mn-btn--block{
  display:flex;
  width:100%;
  justify-content:center;
}

/* -------------------------
   5) Header (Topbar) — CLEAN
   ------------------------- */
.mn-topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  padding: 14px 18px;
  margin: 14px auto 14px;

  border-radius: 24px;

  background: var(--mn-surface);
  border: 1px solid var(--mn-line);
  box-shadow: var(--mn-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Desktop grid */
  display:grid;
  grid-template-columns: auto 1fr auto; /* brand | nav | actions */
  align-items:center;
  column-gap: 18px;
}

.mn-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}

.mn-brand-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.mn-logo-img{
  height: 40px;
  width:auto;
}

/* Auto logo swap */
.mn-logo-dark{ display:none; }
html[data-theme="dark"] .mn-logo-light{ display:none; }
html[data-theme="dark"] .mn-logo-dark{ display:block; }

.mn-nav{
  min-width:0;
  overflow: visible;
  display:flex;
  justify-content:center;
}

.mn-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-end;
}

/* -------------------------
   6) Menu (WP nav) — HORIZONTAL + DROPDOWN
   ------------------------- */
.mn-nav ul{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;

  flex-wrap: nowrap;
  white-space: nowrap;
}

.mn-nav ul li{
  position: relative;
  margin:0;
  padding:0;
}

.mn-nav ul li a{
  display:inline-flex;
  align-items:center;
  gap: 10px;

  padding: 8px 10px;
  border-radius: 12px;

  font-weight: 750;
  font-size: 13px;
  color: var(--mn-text);

  border: 1px solid transparent;
}

.mn-nav ul li a:hover{
  background: var(--mn-surface2);
  border-color: var(--mn-line);
}

/* Active */
.mn-nav ul .current-menu-item > a,
.mn-nav ul .current-menu-ancestor > a{
  font-weight: 850;
}

/* Dropdown */
.mn-nav ul .sub-menu{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;

  min-width: 240px;
  padding: 8px;
  margin:0;

  list-style:none;

  border-radius: 16px;
  background: var(--mn-surface2);
  border: 1px solid var(--mn-line);
  box-shadow: 0 24px 70px rgba(0,0,0,.12);
  z-index: 9999;
}

html[data-theme="dark"] .mn-nav ul .sub-menu{
  background: rgba(10,12,20,.92);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.mn-nav ul li:hover > .sub-menu{ display:block; }

.mn-nav ul .sub-menu a{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.mn-nav ul .sub-menu a:hover{
  background: rgba(109,94,252,.10);
  border-color: rgba(109,94,252,.25);
}

/* Prevent nav from pushing actions off-screen: allow horizontal scroll if long */
.mn-nav ul{
  overflow-x:auto;
  scrollbar-width:none;
}
.mn-nav ul::-webkit-scrollbar{ display:none; }

/* -------------------------
   7) Mobile header behavior
   ------------------------- */
.mn-burger{ display:none; }

@media (max-width: 980px){
  .mn-topbar{
    grid-template-columns: auto 1fr auto;
  }

  /* Hide desktop nav; show burger (you must have a burger element in markup) */
  .mn-nav{ display:none; }
  .mn-burger{ display:inline-grid; place-items:center; }
}

/* -------------------------
   8) Mobile nav drawer (optional)
   Requires markup:
   #mnNavOverlay, #mnMobileNav, body.mn-nav-open
   ------------------------- */
#mnNavOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}

#mnMobileNav{
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: min(360px, calc(100vw - 20px));
  border-radius: 22px;
  background: var(--mn-surface2);
  border: 1px solid var(--mn-line);
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  transform: translateX(110%);
  transition: transform .22s ease;
  z-index: 9999;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

body.mn-nav-open #mnNavOverlay{
  opacity: 1;
  pointer-events: auto;
}
body.mn-nav-open #mnMobileNav{
  transform: translateX(0);
}

.mn-mnav-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px;
  border-bottom: 1px solid var(--mn-line);
}
.mn-mnav-title{
  font-weight: 950;
  color: var(--mn-text);
}
.mn-mnav-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--mn-line);
  background: var(--mn-surface);
  color: var(--mn-text);
  font-weight: 900;
  cursor:pointer;
}
.mn-mnav-bd{ padding: 10px; overflow:auto; }

.mn-mnav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.mn-mnav-list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--mn-line);
  background: var(--mn-surface);
  color: var(--mn-text);
  text-decoration:none;
  font-weight: 850;
}
.mn-mnav-list .sub-menu{
  list-style:none;
  margin: 6px 0 0;
  padding: 0 0 0 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

/* -------------------------
   9) WP Admin bar immunity
   ------------------------- */
#wpadminbar a,
#wpadminbar a:visited{
  color: #f0f0f1 !important;
}
#wpadminbar a:hover{
  color: #72aee6 !important;
}

/* =========================================================
   END
   ========================================================= */
.mn-home .mn-btn{
  color: var(--mn-text);
  background: var(--mn-surface2);
  border-color: var(--mn-line);
}
.mn-home .mn-btn-primary{
  color: #fff;
  background: var(--mn-btn-grad);
  border: 0;
}
/* =========================
   COMPAT: map old vars -> new vars
   ========================= */
:root{
  --bg: var(--mn-bg);
  --panel: var(--mn-surface);
  --panel2: var(--mn-surface2);
  --text: var(--mn-text);
  --muted: var(--mn-muted);
  --line: var(--mn-line);
  --shadow: var(--mn-shadow);
  --radius: var(--mn-radius);
  --radius2: var(--mn-radius2);
}