/* webdb mobile.css — loaded only if Customizer > Enable separate mobile CSS = On */
@media (max-width:760px){
  .site-header .container{min-height:58px}
  .nav-toggle{display:block}
  .primary-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--webdb-bg);border-bottom:1px solid var(--webdb-border);padding:8px 12px}
  .primary-nav.open{display:block}
  .primary-nav .menu{flex-direction:column;gap:6px}
  .primary-nav .menu .sub-menu{position:static;opacity:1;transform:none;pointer-events:auto;box-shadow:none;border:0;padding:4px 0;margin-left:10px}
  /* Stacks */
  .results-grid{grid-template-columns:1fr}
  .posts{gap:12px}
  .archive-hero .tools, .search-hero .search-tools{gap:6px;flex-wrap:wrap}
}

/* webdb 0.5.11: Fix backToTop arrow centering consistently */
#backToTop { /* unify layout across pages and sizes */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important; /* reset baseline issues */
  padding: 0 !important;
}
#backToTop svg {
  display: block !important; /* remove inline baseline gap */
  width: 20px; height: 20px; /* ensure consistent icon size */
}
#backToTop.fab { display: inline-flex !important; }


/* webdb 0.5.13: Mobile header hardening */
@media (max-width: 760px){
  .site-header .container{ gap:10px; padding-left:12px; padding-right:12px; min-height:56px }
  .brand img, .custom-logo-link img{ max-height:36px; height:auto; width:auto }
  .site-title{ font-size:18px }
  .header-search{ display:none }
  .theme-toggle{ padding:6px 8px }
}

/* webdb 0.5.14: Mobile menu restructure */
@media (max-width: 760px){
  /* Navigation panel scrollable and stable */
  .primary-nav{ max-height: calc(100vh - 64px); overflow:auto }
  /* Hide submenus by default on mobile; show only when parent li.open */
  .primary-nav .menu .sub-menu{ display:none; position:static; opacity:1; transform:none; pointer-events:auto; box-shadow:none; border:0; padding:4px 0; margin-left:12px }
  .primary-nav .menu li.open > .sub-menu{ display:block }
  /* Mobile submenu toggle button look */
  .primary-nav .submenu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:6px; border:1px solid var(--webdb-border); border-radius:6px; background:var(--webdb-bg); font-size:14px; line-height:1 }
  .primary-nav .menu a{ display:inline-flex; align-items:center; justify-content:space-between }
}

/* webdb 0.5.14: Homepage card sizing on mobile */
@media (max-width: 760px){
  .home-grid{ grid-template-columns:1fr }
  .post-item{ grid-template-columns:1fr; gap:10px; padding:12px }
  .post-item .thumb img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px }
  .post-item .title{ font-size:19px; line-height:1.25; margin-bottom:6px }
  .post-item .byline{ font-size:12px }
  .post-item .byline .cat-chip{ transform:scale(.95); transform-origin:left center }
}

/* webdb 0.5.15: Mobile list density & hierarchy cues */
@media (max-width: 760px){
  /* Homepage/List density: horizontal cards */
  .posts{ gap:10px }
  .post-item{ grid-template-columns:120px 1fr; gap:10px; padding:10px }
  .post-item.no-thumb{ grid-template-columns:1fr }
  .post-item .thumb img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:10px }
  .post-item .title{ font-size:18px; line-height:1.25; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .post-item .byline{ font-size:12px; margin-bottom:6px }
  .post-item .excerpt{ font-size:14px; color:var(--webdb-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }

  /* Dropdown hierarchy cues */
  .primary-nav .menu{ gap:4px }
  .primary-nav .menu .sub-menu{ background:var(--webdb-surface); border-left:2px solid var(--webdb-border); border-radius:8px; padding:6px 8px; margin-left:8px }
  .primary-nav .menu .sub-menu a{ font-size:14px; padding:6px 8px; border-radius:6px }
  .primary-nav .menu .sub-menu .sub-menu{ margin-left:10px; border-left:2px solid var(--webdb-border); background:transparent }
  .primary-nav .menu .sub-menu .sub-menu a{ font-size:13px }
}

/* webdb 0.5.16: Mobile density ++ and hierarchy markers */
@media (max-width: 760px){
  /* List/card density: small phones show more items per screen */
  .posts{ gap:8px }
  .post-item{ grid-template-columns:96px 1fr; gap:8px; padding:10px; align-items:flex-start }
  .post-item.no-thumb{ grid-template-columns:1fr }
  .post-item .thumb img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:10px }
  .post-item .title{ font-size:17px; line-height:1.25; margin:0 0 2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .post-item .byline{ font-size:12px; margin:0 0 4px }
  .post-item .excerpt{ display:none }
  /* On extra-small phones, hide byline to tighten further */
}
@media (max-width: 380px){ .post-item .byline{ display:none } }

@media (max-width: 760px){
  /* Menu hierarchy cues: clear indentation + connectors */
  .primary-nav .menu{ gap:4px }
  .primary-nav .menu .sub-menu{ background:var(--webdb-surface); border-left:2px solid var(--webdb-border); border-radius:8px; padding:6px 8px; margin-left:10px }
  .primary-nav .menu .sub-menu > li{ position:relative; padding-left:10px }
  .primary-nav .menu .sub-menu > li::before{ content:""; position:absolute; left:0; top:0.95em; width:6px; height:2px; background:var(--webdb-border) }
  .primary-nav .menu .sub-menu .sub-menu{ margin-left:12px; background:transparent; border-left:2px solid var(--webdb-border) }
  .primary-nav .menu a{ font-size:15px }
  .primary-nav .menu .sub-menu a{ font-size:14px }
}

/* webdb 0.5.23 — Consolidated mobile layout & menu hierarchy (≤760px) */
@media (max-width:760px){
  .site-header .container{ min-height:56px; gap:10px; padding:0 12px }
  .container{ padding-left:14px; padding-right:14px }
  .header-search{ display:none }
  .posts{ gap:10px }
  .post-item{ display:grid; grid-template-columns:104px 1fr; gap:10px; padding:12px; align-items:flex-start }
  .post-item.no-thumb{ grid-template-columns:104px 1fr }
  .post-item .thumb img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:10px }
  .post-item .title{ font-size:18px; line-height:1.25; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .post-item .byline{ font-size:12px; margin:0 0 6px }
  .post-item .excerpt{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; color:var(--webdb-muted) }
  .post-item.no-thumb .thumb.placeholder .ph{ display:block; width:100%; aspect-ratio:3/2; border-radius:10px; background:linear-gradient(135deg,#e2e8f0,#f8fafc) }
  .dark .post-item.no-thumb .thumb.placeholder .ph{ background:linear-gradient(135deg,#1f2937,#111827) }
}
@media (max-width:380px){ .post-item .byline{ display:none } }

@media (max-width:760px){
  .nav-toggle{ display:block }
  .primary-nav{ display:none; position:absolute; left:0; right:0; top:64px; background:var(--webdb-bg); border-bottom:1px solid var(--webdb-border); padding:8px 12px; max-height:calc(100vh - 64px); overflow:auto }
  .primary-nav.open{ display:block }
  .primary-nav .menu{ list-style:none; display:flex; flex-direction:column; gap:6px; margin:0; padding:0 }
  .primary-nav .menu .sub-menu{ display:none; position:static; opacity:1; transform:none; pointer-events:auto; background:var(--webdb-surface); border-left:2px solid var(--webdb-border); border-radius:8px; padding:6px 8px; margin-left:10px }
  .primary-nav .menu li.open > .sub-menu{ display:block }
  .primary-nav .submenu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin-left:6px; border:1px solid var(--webdb-border); border-radius:6px; background:var(--webdb-bg); font-size:14px; line-height:1 }
  .primary-nav .menu .sub-menu > li{ position:relative; padding-left:10px }
  .primary-nav .menu .sub-menu > li::before{ content:""; position:absolute; left:0; top:0.95em; width:6px; height:2px; background:var(--webdb-border) }
  .primary-nav .menu .sub-menu .sub-menu{ margin-left:12px; background:transparent; border-left:2px solid var(--webdb-border) }
}

/* webdb 0.5.28 — Mobile: tiny reduction for Popular titles and chips */
@media (max-width:760px){
  .section-popular .post-item .title,
  .popular .post-item .title,
  .widget-popular .post-item .title{ font-size:16px; line-height:1.3 }
  .section-popular .chip, .section-popular .cat-chip, .section-popular .tag-chip,
  .popular .chip, .popular .cat-chip, .popular .tag-chip,
  .widget-popular .chip, .widget-popular .cat-chip, .widget-popular .tag-chip{ font-size:12px }
}

/* webdb 0.5.29 — Mobile: precise selectors for Popular titles and tag cloud */
@media (max-width:760px){
  .widget_recent_entries .post-item .title,
  .widget_recent_entries li a,
  .widget_popular_posts .post-item .title,
  .widget_popular_posts li a,
  .section-popular .post-item .title{ font-size: 16px; line-height:1.3 }
  .tagcloud a{ font-size: 12px !important }
}

/* webdb 0.5.30 — Mobile: Popular list + topic chips precise tweak */
@media (max-width:760px){
  .home-rail .list-simple .item{ font-size:15px; line-height:1.35 }
  .home-rail .list-simple .item .date{ font-size:12px }
  .home-rail .chips .chip{ font-size:12px }
}

/* webdb 0.5.37 — Mobile comment polish */
@media (max-width:760px){
  .comment-list{ gap:10px }
  .comment-list > li{ padding:10px }
  .c-meta{ gap:6px }
  .c-time{ font-size:11px }
}