/* ============================================================
   UtilityHubs.in — Shared Site Theme
   Loaded on every page AFTER the page's own inline <style> block,
   so these rules intentionally win the cascade and centralize:
   - dark mode contrast fix (was too close to black)
   - mobile "desktop-site" text scaling bug fix
   - animated background (replaces flat plain background)
   - responsive safety net for every screen size
   ============================================================ */

/* ---- 1. Stop mobile browsers auto-inflating text size
   when a page is viewed in "Desktop site" mode ---- */
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}
html, body{
  max-width:100%;
  overflow-x:hidden;
}
img, svg, video, canvas{ max-width:100%; height:auto; }
* { min-width:0; }

/* Ensure the page never gets forced into a wide desktop layout box
   by a browser's "Request Desktop Site" viewport override */
body{ width:100%; }

/* ---- 2. Rebalanced dark theme (previous version read as near-black) ---- */
[data-theme="dark"]{
  --bg:#191210;
  --panel:#251C16;
  --panel-soft:#302419;
  --border:#4A3A2A;
  --ink:#F7ECDD;
  --ink-soft:#CBB89E;
  --ink-faint:#997F65;
  --accent:#F0895A;
  --accent-deep:#FFAE7D;
  --accent-soft:#3E2B1B;
  --lcd-bg:#2E1D12;
  --lcd-text:#FFC98A;
  --field-bg:#2D2118;
  --shadow:0 10px 30px rgba(0,0,0,0.45);
}
[data-theme="dark"] .stat-card,
[data-theme="dark"] .cta-box,
[data-theme="dark"] .result-box{ border:1px solid var(--border); }

/* ---- 3. Animated background — replaces the flat plain color ---- */
body{ position:relative; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:var(--bg);
  transition:background .3s ease;
}
body::after{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 18%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%),
    radial-gradient(30% 26% at 88% 12%, color-mix(in srgb, #5C7A5A 20%, transparent) 0%, transparent 70%),
    radial-gradient(34% 30% at 85% 82%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%),
    radial-gradient(30% 26% at 8% 85%, color-mix(in srgb, #7A5A9A 16%, transparent) 0%, transparent 70%);
  opacity:.7;
  animation:uh-bg-drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
[data-theme="dark"] body::after{ opacity:.35; }
@keyframes uh-bg-drift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-1.5%, 1.5%, 0) scale(1.04); }
  100%{ transform:translate3d(1.5%, -1%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
}

/* ---- 4. Extra small-screen safety net (down to ~280px) ---- */
@media (max-width:380px){
  .hero h1{ font-size:clamp(22px,8vw,28px); }
  .tool-hero h1{ font-size:clamp(19px,7vw,24px); }
  .section{ padding-left:12px; padding-right:12px; }
  .tool-panel, .content-panel, .about-panel{ padding-left:14px; padding-right:14px; margin-left:10px; margin-right:10px; }
  .cta-box{ margin-left:10px; margin-right:10px; }
}

/* ---- 5. Header/nav mount base (site-nav.js renders into these) ---- */
#site-header-mount, #site-footer-mount{ display:contents; }

/* ---- 6. New shared nav (desktop dropdowns + mobile drawer + search) ---- */
.main-nav{ display:none; align-items:center; gap:2px; flex-shrink:0; }
@media(min-width:920px){ .main-nav{ display:flex; } }
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:5px; padding:9px 11px; border-radius:8px;
  font-size:12.5px; font-weight:700; color:var(--ink); background:none; border:none; cursor:pointer;
  white-space:nowrap; font-family:'Inter',sans-serif;
}
.nav-link:hover, .nav-item.open > .nav-link{ color:var(--accent); background:var(--panel-soft); }
.nav-caret{ font-size:8px; opacity:.7; transition:transform .2s ease; }
.nav-item.open .nav-caret{ transform:rotate(180deg); }
.nav-dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:8px;
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60;
}
.nav-item.open .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
@media(hover:hover){
  .nav-item:hover .nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
}
.nav-drop-link{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
}
.nav-drop-link:hover{ background:var(--panel-soft); color:var(--accent); }
.nav-drop-viewall{
  display:block; margin-top:4px; padding:9px 10px; border-top:1px solid var(--border);
  font-size:11.5px; font-weight:700; color:var(--accent);
}
.header-search-wrap{ display:none; position:relative; flex:1; max-width:260px; margin:0 6px; }
@media(min-width:920px){ .header-search-wrap{ display:block; } }
.mobile-search-toggle, .menu-btn{ display:flex; }
@media(min-width:920px){ .mobile-search-toggle, .menu-btn{ display:none; } }
.mobile-search-bar{
  display:none; position:absolute; left:0; right:0; top:100%;
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:10px 14px; align-items:center; gap:8px; z-index:55;
}
.mobile-search-bar.open{ display:flex; }
.mobile-search-inner{ position:relative; flex:1; min-width:0; }
.mobile-search-inner input{
  width:100%; background:var(--panel-soft); border:1px solid var(--border); border-radius:999px;
  padding:9px 14px; font-size:12.5px; color:var(--ink); font-family:'Inter'; outline:none;
}
.mobile-search-inner input:focus{ border-color:var(--accent); }
.search-suggest{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--panel);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
  max-height:280px; overflow-y:auto; z-index:70; display:none;
}
.search-suggest.open{ display:block; }
.suggest-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:12.5px; font-weight:600;
  border-bottom:1px solid var(--border); color:var(--ink);
}
.suggest-item:last-child{ border-bottom:none; }
.suggest-item:hover{ background:var(--panel-soft); color:var(--accent); }
.suggest-item .cat-tag{
  margin-left:auto; font-size:9px; font-weight:700; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.suggest-empty{ padding:14px 12px; font-size:12px; color:var(--ink-soft); text-align:center; line-height:1.5; }

.nav-drawer{ position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none; }
.nav-drawer.open{ visibility:visible; pointer-events:auto; }
.drawer-overlay{ position:absolute; inset:0; background:rgba(15,10,7,.55); opacity:0; transition:opacity .25s ease; }
.nav-drawer.open .drawer-overlay{ opacity:1; }
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:88%; max-width:340px;
  background:var(--panel); border-left:1px solid var(--border);
  padding:16px 16px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav-drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.drawer-head .logo-text{ font-size:16px; }
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 4px; font-size:13px; font-weight:700; cursor:pointer; }
.accordion-head .plus{ font-size:16px; color:var(--accent); transition:transform .2s; flex-shrink:0; }
.accordion-item.open .plus{ transform:rotate(45deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.accordion-item.open .accordion-body{ max-height:600px; padding-bottom:8px; }
.accordion-link{ display:block; padding:9px 10px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border-radius:8px; }
.accordion-link:hover{ background:var(--panel-soft); color:var(--accent); }
.accordion-link.viewall{ color:var(--accent); font-weight:700; }
.drawer-footer-links{ display:flex; flex-direction:column; gap:1px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.drawer-footer-links a{ padding:10px 6px; font-size:12.5px; font-weight:600; color:var(--ink-soft); border-radius:8px; }
.drawer-footer-links a:hover{ background:var(--panel-soft); color:var(--accent); }
.drawer-theme-row{ margin-top:14px; display:flex; }
.drawer-theme-row .icon-btn{ width:100%; justify-content:center; padding:11px; }