/* ==========================================================================
   YourTechTool — shared styles (every page).
   Extracted unchanged from the original index.html except where marked "changed".
   Homepage-only styles live in home.css; each tool keeps its own CSS in assets/css/tools/.
   ========================================================================== */
:root{
  --bg:#070a0f;--surface:#0d121a;--surface2:#111821;
  --line:#26313e;--line2:#2b3746;--text:#f3f6fa;--muted:#8e9aaa;--muted2:#7f8b9b;
  --accent:#38d6a2;--accent2:#23a8ff;--danger:#ff647c;--shadow:rgba(0,0,0,.42);
  --header-bg:rgba(7,10,15,.86);--chip-bg:#151e29;
  --focus:#55c8ff;
  --link:#23a8ff; /* changed: link/text blue; light theme uses a darker blue for 4.5:1 contrast */
}
:root[data-theme="light"]{
  --bg:#f5f7fa;--surface:#ffffff;--surface2:#eef1f5;
  --line:#dde3ea;--line2:#c9d2dc;--text:#101722;--muted:#57657a;--muted2:#4d5a6d;
  --accent:#0f9f76;--accent2:#0b7bd1;--danger:#d13a52;--shadow:rgba(20,30,45,.10);
  --header-bg:rgba(255,255,255,.86);--chip-bg:#eef1f5;
  --focus:#0b7bd1;
  --link:#0a6bb8;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:90px}  /* changed: anchor targets clear the sticky header */
body{
  margin:0;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 50% -15%,rgba(35,168,255,.13),transparent 34rem),
    linear-gradient(180deg,var(--bg) 0%,var(--bg) 100%);
  min-height:100vh;
}
button{font:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.container{width:min(1240px,calc(100% - 32px));margin:auto}
.skip-link{
  position:absolute;left:-999px;top:auto;background:var(--accent);color:#07110d;font-weight:800;
  padding:10px 16px;border-radius:8px;z-index:100;
}
.skip-link:focus{left:14px;top:14px}

/* changed: real classes replace the inline styles the original repeated on every label */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
[hidden]{display:none!important}
/* controls that need JavaScript stay hidden when it is off (the "js" class is set in head.php) */
html:not(.js) .js-only{display:none}

/* narrower column for text pages (about, legal, contact) */
.container-narrow{width:min(880px,calc(100% - 32px))}

/* small labelled pill used above page titles (moved here from home.css: shared by every page) */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;color:#8debd0;background:rgba(56,214,162,.07);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase
}
/* changed: darker green for 4.5:1 contrast in the light theme (was 3.9:1) */
:root[data-theme="light"] .eyebrow{color:#0a7a5b}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

/* ---------- Header ---------- */
header.site-header{
  position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:18px;padding:14px 0}  /* changed: not positioned, so the mobile panel spans the full header width (as on the About/Contact pages) */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.brand .logo{
  width:30px;height:30px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,var(--accent2),var(--accent));
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(35,168,255,.25);
}
.brand .logo svg{width:17px;height:17px}
.brand span{font-size:16px;font-weight:850;letter-spacing:-.01em;color:var(--text)}

.site-nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.site-nav a{
  padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:650;color:var(--muted);text-decoration:none;
}
.site-nav a:hover{color:var(--text);background:var(--surface2)}
.site-nav a.active{color:var(--text)}

.header-search{position:relative;flex:1;max-width:340px;margin-left:auto}
.header-search input{
  width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:999px;
  padding:9px 14px 9px 34px;color:var(--text);font-size:13.5px;font-family:inherit;
}
.header-search input:focus{outline:none;border-color:var(--accent)}
.header-search > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted2)}

/* ---------- Search suggestion dropdown (shared by every search box) ----------
   Injected by YTT.initSearchBox() in assets/js/search-engine.js. */
.search-suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);
  border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 40px var(--shadow);
  overflow-y:auto;max-height:360px;z-index:60;text-align:left;
}
.search-suggest-item{display:flex;align-items:center;gap:12px;padding:11px 14px;text-decoration:none;color:var(--text)}
.search-suggest-item:hover,.search-suggest-item.active{background:var(--surface2)}
.search-suggest-icon{
  width:32px;height:32px;border-radius:9px;flex:none;background:var(--surface2);
  border:1px solid var(--line);color:var(--accent);display:flex;align-items:center;justify-content:center;
}
.search-suggest-icon svg{width:16px;height:16px}
.search-suggest-name{display:block;font-size:13.5px;font-weight:700}
.search-suggest-cat{display:block;font-size:11px;color:var(--muted2);margin-top:1px}
.search-suggest-empty{padding:14px;color:var(--muted);font-size:13px}
.search-suggest-viewall{
  display:block;padding:11px 14px;font-size:12.5px;font-weight:800;color:var(--link);
  text-decoration:none;border-top:1px solid var(--line);background:var(--surface2);
}
.search-suggest-viewall:hover{color:var(--text)}

.theme-toggle{
  flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);
  color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.theme-toggle:hover{border-color:var(--line2)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-moon{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* mobile nav uses a native <details> disclosure so it works with no JS */
.mobile-nav{display:none}
.mobile-nav summary{
  list-style:none;cursor:pointer;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface2);display:flex;align-items:center;justify-content:center;
}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary svg{width:18px;height:18px}
.mobile-nav[open] summary svg{color:var(--accent)}
.mobile-panel{
  position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px 0 16px;box-shadow:0 14px 30px var(--shadow);
  max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;  /* changed: long menus scroll */
}
.mobile-links{display:flex;flex-direction:column;gap:2px}
.mobile-panel a{padding:12px 10px;border-radius:8px;font-weight:650;font-size:14.5px;text-decoration:none;color:var(--text)}
.mobile-panel a:hover{background:var(--surface2)}
.mobile-search{padding:6px 10px 12px;position:relative}
.mobile-search input{
  width:100%;background:var(--surface2);border:1px solid var(--line);border-radius:999px;
  padding:10px 14px;color:var(--text);font-size:14px;font-family:inherit;
}

@media(max-width:860px){
  .site-nav,.header-search{display:none}
  .mobile-nav{display:block;margin-left:auto}
}

/* ---------- Footer ---------- */
footer.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:34px 0 28px}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:8px;max-width:320px}
.footer-brand .brand{margin-bottom:2px}
.footer-brand p{margin:0;color:var(--muted2);font-size:13px;line-height:1.6}
.footer-links{display:flex;gap:44px;flex-wrap:wrap}
/* changed: footer column titles are <p> (they skipped heading levels as <h4>); look is identical */
.footer-heading{margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2)}
/* changed: link padding 4px -> 6px for easier tapping */
.footer-col a{display:block;color:var(--muted);text-decoration:none;font-size:13.5px;padding:6px 0}
.footer-col a:hover{color:var(--text)}
.footer-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted2);font-size:12px;text-align:center}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}