/*
 * OneNav iOS 26 Liquid Glass Plus
 * v1.7.12.1 — Blog Glass Polish
 * Scope: OneNav template-blog.php only.
 *
 * Goal: make /blog visibly part of the iOS 26 glass system without changing
 * its native layout, AJAX article loading, widgets or article data.
 */

body.mf-blog-glass {
  --mf-blog-panel: rgba(255,255,255,.56);
  --mf-blog-panel-strong: rgba(255,255,255,.68);
  --mf-blog-card: rgba(255,255,255,.58);
  --mf-blog-card-hover: rgba(255,255,255,.72);
  --mf-blog-border: rgba(255,255,255,.72);
  --mf-blog-line: rgba(87,111,145,.10);
  --mf-blog-text: #2f3948;
  --mf-blog-muted: #7f8b9b;
  --mf-blog-shadow:
    0 12px 30px rgba(38,57,85,.065),
    0 2px 8px rgba(38,57,85,.035),
    inset 0 1px 0 rgba(255,255,255,.74);
  --mf-blog-shadow-hover:
    0 17px 38px rgba(38,57,85,.105),
    0 4px 12px rgba(38,57,85,.045),
    inset 0 1px 0 rgba(255,255,255,.82);

  /* A quiet background variation is important: transparent glass needs
     something behind it to read as glass. No animation / no fixed attachment. */
  background-color:#eef3f9 !important;
  background-image:
    radial-gradient(circle at 12% 9%, rgba(108,167,255,.10), transparent 29%),
    radial-gradient(circle at 86% 18%, rgba(255,151,188,.075), transparent 26%),
    radial-gradient(circle at 72% 72%, rgba(139,111,255,.055), transparent 30%);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

html.io-black-mode body.mf-blog-glass {
  --mf-blog-panel: rgba(27,34,46,.70);
  --mf-blog-panel-strong: rgba(31,39,52,.82);
  --mf-blog-card: rgba(32,40,54,.68);
  --mf-blog-card-hover: rgba(38,47,62,.80);
  --mf-blog-border: rgba(255,255,255,.10);
  --mf-blog-line: rgba(190,207,230,.075);
  --mf-blog-text: #edf2f9;
  --mf-blog-muted: #97a4b5;
  --mf-blog-shadow:
    0 14px 34px rgba(0,0,0,.20),
    0 3px 10px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.035);
  --mf-blog-shadow-hover:
    0 20px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);

  background-color:#171d27 !important;
  background-image:
    radial-gradient(circle at 12% 9%, rgba(56,116,195,.10), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(129,69,126,.08), transparent 27%),
    radial-gradient(circle at 72% 72%, rgba(73,65,141,.07), transparent 31%);
}

/* =========================================================
   Top full-width widgets / featured block
   ========================================================= */
body.mf-blog-glass main.container > .module-sidebar-widget {
  position:relative;
  overflow:hidden;
  margin-bottom:14px;
  padding:10px;
  border:1px solid var(--mf-blog-border);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.015)),
    var(--mf-blog-panel);
  box-shadow:var(--mf-blog-shadow);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
}

body.mf-blog-glass main.container > .module-sidebar-widget::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 16% -6%,rgba(255,255,255,.34),transparent 31%),
    linear-gradient(180deg,rgba(255,255,255,.075),transparent 38%);
}

body.mf-blog-glass main.container > .module-sidebar-widget > * {
  position:relative;
  z-index:1;
}

/* =========================================================
   Article cards — the main missing glass area in the screenshot
   ========================================================= */
body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item,
body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item {
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:10px !important;
  border:1px solid var(--mf-blog-border) !important;
  border-radius:18px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.025)),
    var(--mf-blog-card) !important;
  box-shadow:var(--mf-blog-shadow) !important;
  -webkit-backdrop-filter:blur(11px) saturate(135%);
  backdrop-filter:blur(11px) saturate(135%);
  transition:
    transform .17s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item::before,
body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.32),transparent 27%),
    linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%);
}

body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item > *,
body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item > * {
  position:relative;
  z-index:1;
}

/* Image becomes a separate polished glass inset instead of a plain rectangle. */
body.mf-blog-glass .posts-item.style-post-min .item-media,
body.mf-blog-glass .posts-item.post-item .item-media {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.54);
  border-radius:13px !important;
  background:rgba(255,255,255,.20);
  box-shadow:
    0 6px 16px rgba(42,61,90,.055),
    inset 0 1px 0 rgba(255,255,255,.34);
}

html.io-black-mode body.mf-blog-glass .posts-item.style-post-min .item-media,
html.io-black-mode body.mf-blog-glass .posts-item.post-item .item-media {
  border-color:rgba(255,255,255,.075);
  background:rgba(255,255,255,.025);
  box-shadow:0 7px 18px rgba(0,0,0,.15);
}

body.mf-blog-glass .posts-item.style-post-min .item-title,
body.mf-blog-glass .posts-item.post-item .item-title {
  margin-bottom:5px !important;
  line-height:1.42 !important;
}

body.mf-blog-glass .posts-item.style-post-min .item-title a,
body.mf-blog-glass .posts-item.post-item .item-title a {
  color:var(--mf-blog-text) !important;
  font-weight:750 !important;
  text-shadow:none !important;
}

body.mf-blog-glass .posts-item.style-post-min .line1.text-muted,
body.mf-blog-glass .posts-item.post-item .line1.text-muted {
  color:var(--mf-blog-muted) !important;
  line-height:1.55 !important;
}

body.mf-blog-glass .posts-item .item-meta,
body.mf-blog-glass .posts-item .item-meta *,
body.mf-blog-glass .posts-item .item-tags {
  text-shadow:none !important;
}

@media (hover:hover) and (pointer:fine) {
  body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item:hover,
  body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item:hover {
    transform:translateY(-2px);
    border-color:rgba(95,153,230,.30) !important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.035)),
      var(--mf-blog-card-hover) !important;
    box-shadow:var(--mf-blog-shadow-hover) !important;
  }

  body.mf-blog-glass .posts-item.style-post-min:hover .item-title a,
  body.mf-blog-glass .posts-item.post-item:hover .item-title a {
    color:#4b83ce !important;
  }

  html.io-black-mode body.mf-blog-glass .posts-item.style-post-min:hover .item-title a,
  html.io-black-mode body.mf-blog-glass .posts-item.post-item:hover .item-title a {
    color:#9fc8ff !important;
  }
}

/* =========================================================
   Blog tabs / pagination
   ========================================================= */
body.mf-blog-glass .blog-tab {
  padding:4px;
  border:1px solid var(--mf-blog-border);
  border-radius:15px;
  background:var(--mf-blog-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.54);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
}

body.mf-blog-glass .blog-tab .btn-tab-h {
  border-radius:10px !important;
}

body.mf-blog-glass .posts-nav {
  margin-top:10px;
}

body.mf-blog-glass .posts-nav .page-numbers,
body.mf-blog-glass .posts-nav a,
body.mf-blog-glass .posts-nav span {
  border-radius:10px;
}

/* =========================================================
   Right sidebar — all widgets become real glass panels
   ========================================================= */
body.mf-blog-glass .sidebar-tools .card.io-sidebar-widget {
  overflow:hidden;
  border:1px solid var(--mf-blog-border) !important;
  border-radius:20px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.02)),
    var(--mf-blog-panel-strong) !important;
  box-shadow:var(--mf-blog-shadow) !important;
  -webkit-backdrop-filter:blur(17px) saturate(140%);
  backdrop-filter:blur(17px) saturate(140%);
}

/* OneNav intentionally makes the hot-api widget transparent; restore the outer
   glass shell only on /blog. */
body.mf-blog-glass .sidebar-tools .io-widget-hot-api.io-sidebar-widget.card {
  border:1px solid var(--mf-blog-border) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.02)),
    var(--mf-blog-panel-strong) !important;
  box-shadow:var(--mf-blog-shadow) !important;
}

body.mf-blog-glass .sidebar-tools .card-header {
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.10) !important;
  border-bottom:1px solid var(--mf-blog-line) !important;
}

body.mf-blog-glass .sidebar-tools .card-body {
  position:relative;
  z-index:1;
  background:transparent !important;
}

/* Keep widget header texts crisp: outer widget already owns the blur. */
body.mf-blog-glass .sidebar-tools .card-header,
body.mf-blog-glass .sidebar-tools .card-body,
body.mf-blog-glass .sidebar-tools .hotapi-card,
body.mf-blog-glass .sidebar-tools .about-website-body {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* "关于本站" stats: translucent inset cells, not solid white boxes. */
body.mf-blog-glass .io-widget-about-website .about-website-body {
  padding:10px !important;
}

body.mf-blog-glass .io-widget-about-website .about-cover {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 8px 20px rgba(29,52,88,.09);
}

body.mf-blog-glass .io-widget-about-website .about-meta .tips-box {
  border:1px solid rgba(255,255,255,.56) !important;
  background:rgba(255,255,255,.38) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50);
}

html.io-black-mode body.mf-blog-glass .io-widget-about-website .about-meta .tips-box {
  border-color:rgba(255,255,255,.065) !important;
  background:rgba(255,255,255,.035) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* Hot list stays clear; add only a subtle separator rhythm. */
body.mf-blog-glass .sidebar-tools .hotapi-list > li {
  border-radius:9px;
  transition:background .15s ease;
}

@media (hover:hover) and (pointer:fine) {
  body.mf-blog-glass .sidebar-tools .hotapi-list > li:hover {
    background:rgba(255,255,255,.22);
  }
  html.io-black-mode body.mf-blog-glass .sidebar-tools .hotapi-list > li:hover {
    background:rgba(255,255,255,.045);
  }
}

/* Sidebar cards breathe evenly instead of looking like separate unrelated blocks. */
body.mf-blog-glass .sidebar-tools .io-sidebar-widget + .io-sidebar-widget {
  margin-top:14px;
}

/* =========================================================
   Dark mode
   ========================================================= */
html.io-black-mode body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item,
html.io-black-mode body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item {
  border-color:var(--mf-blog-border) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
    var(--mf-blog-card) !important;
  box-shadow:var(--mf-blog-shadow) !important;
}

html.io-black-mode body.mf-blog-glass .sidebar-tools .card.io-sidebar-widget,
html.io-black-mode body.mf-blog-glass .sidebar-tools .io-widget-hot-api.io-sidebar-widget.card {
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
    var(--mf-blog-panel-strong) !important;
}

html.io-black-mode body.mf-blog-glass .sidebar-tools .card-header {
  background:rgba(255,255,255,.018) !important;
}

html.io-black-mode body.mf-blog-glass main.container > .module-sidebar-widget {
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
    var(--mf-blog-panel);
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width:767.98px) {
  body.mf-blog-glass {
    /* Gradients remain static; smaller saturation = cleaner iOS Safari text. */
    background-image:
      radial-gradient(circle at 8% 7%, rgba(108,167,255,.075), transparent 31%),
      radial-gradient(circle at 93% 16%, rgba(255,151,188,.055), transparent 29%);
  }

  body.mf-blog-glass main.container {
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body.mf-blog-glass main.container > .module-sidebar-widget {
    padding:8px;
    border-radius:18px;
    -webkit-backdrop-filter:blur(14px) saturate(130%);
    backdrop-filter:blur(14px) saturate(130%);
  }

  /* Important for performance: many article cards on a long list should not
     each create a live blur surface on mobile. Transparency + border + highlight
     keeps the glass look with much lower GPU cost. */
  body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item,
  body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item {
    padding:9px !important;
    border-radius:16px !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:
      linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025)),
      rgba(255,255,255,.72) !important;
  }

  html.io-black-mode body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item,
  html.io-black-mode body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item {
    background:
      linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,0)),
      rgba(31,39,52,.80) !important;
  }

  body.mf-blog-glass .posts-item.style-post-min .item-title,
  body.mf-blog-glass .posts-item.post-item .item-title {
    font-size:13px !important;
    line-height:1.42 !important;
  }

  body.mf-blog-glass .posts-item.style-post-min .line1.text-muted,
  body.mf-blog-glass .posts-item.post-item .line1.text-muted {
    display:-webkit-box !important;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  /* Native template hides sidebar on mobile, but keep safe rules if theme
     settings/widgets later make it visible. */
  body.mf-blog-glass .sidebar-tools .card.io-sidebar-widget {
    -webkit-backdrop-filter:blur(13px) saturate(130%);
    backdrop-filter:blur(13px) saturate(130%);
  }
}

/* iOS Safari: slightly less saturation, no text-bearing nested blur. */
@media (max-width:1024px) {
  html.mf-ios body.mf-blog-glass main.container > .module-sidebar-widget,
  html.mf-ios body.mf-blog-glass .sidebar-tools .card.io-sidebar-widget {
    -webkit-backdrop-filter:blur(14px) saturate(125%) !important;
    backdrop-filter:blur(14px) saturate(125%) !important;
  }

  html.mf-ios body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.style-post-min.ajax-item,
  html.mf-ios body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item.post-item.ajax-item {
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
}

/* Performance-lite devices: retain visual glass with no per-card blur. */
html.mf-performance-lite body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item,
html.mf-performance-lite body.mf-blog-glass .sidebar-tools .card.io-sidebar-widget {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

html.mf-performance-lite:not(.io-black-mode) body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item {
  background:rgba(255,255,255,.80) !important;
}

html.io-black-mode.mf-performance-lite body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item {
  background:rgba(30,38,51,.88) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  body.mf-blog-glass .content-layout .ajax-posts-row > .posts-item {
    transition:none !important;
    transform:none !important;
  }
}