/* ============================================================
   ToolBench shared chrome styles — header, nav, footer.
   Loaded by every page. Edit here and it changes site-wide.
   Design tokens live in each page too, but are repeated here so
   this file is self-sufficient if loaded first.
   ============================================================ */
:root{
  --ink:#141821; --ink-2:#3E4757; --ink-3:#7B8598; --ink-4:#AEB6C4;
  --bg:#FFFFFF; --bg-2:#F6F7FA; --bg-3:#EDEFF4;
  --line:#E2E6ED;
  --brand:#F97316; --brand-dk:#EA6407; --brand-lt:#FFF3EA;
  --ok:#16A34A; --err:#DC2626;
  --r:12px;
  --f:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --sh:0 1px 2px rgba(20,24,33,.05),0 4px 14px rgba(20,24,33,.06);
  --sh-lg:0 12px 40px rgba(20,24,33,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
button{font-family:var(--f)}

/* hero (styling shared; the text in each page is unique) */
.hero{padding:46px 0 10px;text-align:center}
.hero h1,h1{font-size:clamp(1.9rem,4.6vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.14;margin-bottom:10px}
.hero p{color:var(--ink-2);max-width:560px;margin:0 auto;font-size:1rem}
.hero p a{color:var(--brand);font-weight:600;text-decoration:none}
.hero p a:hover{text-decoration:underline}

/* header */
header{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:60}
.hd{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:1000px;margin:0 auto;padding:0 20px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo-m{width:28px;height:28px;border-radius:8px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:.9rem;font-weight:700}

/* nav */
.hd-nav{display:flex;gap:18px;align-items:center}
.hd-nav>a{font-size:.9rem;font-weight:600;color:var(--ink-2);text-decoration:none}
.hd-nav>a:hover{color:var(--brand)}
.hd-nav>a.active{color:var(--brand)}
.nav-dd{position:relative;display:flex;align-items:center}
.nav-trigger{display:flex;align-items:center;gap:5px;font-family:var(--f);font-size:.9rem;font-weight:600;color:var(--ink-2);background:none;border:none;padding:0 !important;margin:0 !important;cursor:pointer}
.nav-trigger:hover,.nav-dd.open .nav-trigger{color:var(--brand);background:none !important;padding:0 !important}
.nav-trigger.active{color:var(--brand)}
.nav-plain{font-size:.9rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:0}
.nav-plain:hover{color:var(--brand)}
.nav-plain.active{color:var(--brand)}
.nav-trigger .caret{font-size:.6rem;transition:transform .18s;color:var(--ink-3)}
.nav-dd.open .nav-trigger .caret{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 12px);left:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg);padding:8px;min-width:210px;display:none;z-index:70}
.nav-dd.open .nav-menu{display:block}
.nav-menu.wide{min-width:430px;display:none;grid-template-columns:1fr 1fr;gap:2px}
.nav-dd.open .nav-menu.wide{display:grid}
.nav-cat{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);padding:9px 11px 5px}
.nav-menu a{display:block;font-size:.87rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:9px 11px;border-radius:7px;white-space:nowrap}
.nav-menu a:hover{background:var(--brand-lt);color:var(--brand)}
.nav-menu a.active{color:var(--brand);font-weight:700}
.nav-col{min-width:0}

/* mobile nav: hamburger button + full-width slide-down panel, shown only
   below 700px. The desktop .hd-nav dropdown nav is hidden at that width —
   it has no room to fit four items plus dropdowns on a phone screen, which
   is what caused the horizontal-scroll bug. */
.hd-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;position:relative;flex-shrink:0}
.hd-burger span{display:block;position:absolute;left:8px;right:8px;height:2px;background:var(--ink);border-radius:2px;transition:.2s ease}
.hd-burger span:nth-child(1){top:13px}
.hd-burger span:nth-child(2){top:19px}
.hd-burger span:nth-child(3){top:25px}
.hd-burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.hd-burger.open span:nth-child(2){opacity:0}
.hd-burger.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

.mob-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;
  background:var(--bg);z-index:59;overflow-y:auto;padding:6px 20px 40px;
  -webkit-overflow-scrolling:touch}
.mob-menu.open{display:block}
.mob-sec{padding:14px 0;border-bottom:1px solid var(--line)}
.mob-sec:last-child{border-bottom:none}
.mob-h{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.mob-sec.active .mob-h{color:var(--brand)}
.mob-menu a{display:block;font-size:.98rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:11px 4px;border-radius:8px}
.mob-menu a:hover,.mob-menu a:active{background:var(--brand-lt);color:var(--brand)}
.mob-menu a.active{color:var(--brand)}

@media (max-width:700px){
  .hd-nav{display:none}
  .hd-burger{display:block}
}
@media (min-width:701px){
  .mob-menu{display:none !important}
}

/* footer */
footer{border-top:1px solid var(--line);padding:26px 0;margin-top:44px;background:var(--bg-2)}
.ft{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.83rem;color:var(--ink-3);max-width:1000px;margin:0 auto;padding:0 20px}
.ft a{color:var(--ink-3);text-decoration:none}
.ft a:hover{color:var(--brand)}

@media (max-width:700px){
  .nav-cat{padding-top:6px}
  .nav-menu.wide{min-width:300px;grid-template-columns:1fr}
}

/* ── repair for pages deployed before the nav-CSS cleanup ──
   An earlier build left a broken CSS fragment in some pages that
   swallowed the .hero rule and pushed .nav-trigger on hover.
   These !important rules neutralise that so a layout.css-only
   deploy fixes it without re-uploading every page. Harmless on
   already-clean pages. ── */
.hero{padding:46px 0 10px !important;text-align:center !important}
.nav-trigger,.nav-trigger:hover{padding:0 !important;margin:0 !important;background:none !important;position:static !important}

/* shared "featured on" badge slot — used by admin-managed pages that
   don't have their own scrolling badge strip. Collapses to nothing
   when no badges have been added yet. */
.badges-row{padding:28px 20px;text-align:center;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px}
.badges-row:empty{display:none;padding:0;border-top:none}
.badges-row a{display:inline-flex;align-items:center;opacity:.85;transition:opacity .15s}
.badges-row a:hover{opacity:1}

/* ---- universal ads (see /ads.json and /assets/js/ads.js) ---- */
.ad-top{margin:22px 0 0;min-height:90px}
.ad-rail{position:absolute;top:0;width:var(--rail-w,160px);display:none;z-index:5;text-align:center;pointer-events:none}
.ad-rail-in{position:sticky;top:92px;pointer-events:auto}
.ad-rail.on{display:block}
.ad-rail-left{left:calc(50% - 524px - var(--rail-w,160px))}
.ad-rail-right{right:calc(50% - 524px - var(--rail-w,160px))}
@media (max-width:1287px){.ad-rail{display:none !important}}
.tb-ad-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:90px;width:100%;max-width:728px;margin:0 auto;border:2px dashed var(--brand);border-radius:10px;background:var(--brand-lt);color:var(--brand);font-size:.85rem;text-align:center;padding:10px}
.tb-ad-demo b{font-weight:800}
.tb-ad-demo span{font-size:.75rem;color:var(--ink-3)}
.ad-rail .tb-ad-demo{max-width:none}
.tb-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.88rem;font-weight:600;padding:12px 18px;border-radius:10px;box-shadow:var(--sh-lg);z-index:100;max-width:calc(100% - 32px);text-align:center}
/* the ad box must have a real width, or responsive AdSense units get 0px and never load */
.ad > [id^="ad-"]{width:100%;max-width:970px;text-align:center}
.ad .tb-ad-demo{width:728px;max-width:100%}

/* links like /#converters or /resize#sizes land below the sticky header, not under it */
html{scroll-padding-top:80px}
.tb-ad-frame{margin:0 auto;overflow:hidden;max-width:100%}


/* ============================================================
   DARK THEME
   - Follows the visitor's phone / computer setting by default.
   - The sun / moon button in the header switches it, and the
     choice is remembered (layout.js sets data-theme on <html>).
   - Colours are the variables at the top of this file; the dark
     values are below. The rules after them only swap colours that
     were written as fixed hex codes in the other CSS files.
   ============================================================ */
:root{
  --dz-line:#C9D0DC; --brand-line:#FDD9BE;
  --ok-bg:#F0FDF4; --ok-line:#BBF7D0;
  --err-bg:#FEF2F2; --err-line:#FECACA; --err-ink:#B91C1C;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E9EDF4; --ink-2:#B9C1CF; --ink-3:#8A94A7; --ink-4:#5F6979;
    --bg:#0F1318; --bg-2:#161B23; --bg-3:#1F2631;
    --line:#2B323E;
    --brand:#F97316; --brand-dk:#FB8B3E; --brand-lt:#2A1B10;
    --ok:#22C55E; --err:#F87171;
    --sh:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35);
    --sh-lg:0 12px 40px rgba(0,0,0,.6);
    --dz-line:#3B4454; --brand-line:#5C3517;
    --ok-bg:#0E2618; --ok-line:#1E5A36;
    --err-bg:#2B1515; --err-line:#6B2A2A; --err-ink:#FCA5A5;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E9EDF4; --ink-2:#B9C1CF; --ink-3:#8A94A7; --ink-4:#5F6979;
  --bg:#0F1318; --bg-2:#161B23; --bg-3:#1F2631;
  --line:#2B323E;
  --brand:#F97316; --brand-dk:#FB8B3E; --brand-lt:#2A1B10;
  --ok:#22C55E; --err:#F87171;
  --sh:0 1px 2px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.35);
  --sh-lg:0 12px 40px rgba(0,0,0,.6);
  --dz-line:#3B4454; --brand-line:#5C3517;
  --ok-bg:#0E2618; --ok-line:#1E5A36;
  --err-bg:#2B1515; --err-line:#6B2A2A; --err-ink:#FCA5A5;
  color-scheme:dark;
}

/* fixed colours in the tool CSS files, now following the theme */
html .dz{border-color:var(--dz-line)}
html .dz.drag{border-color:var(--brand)}
html .est,html .callout,html .card-i{border-color:var(--brand-line)}
html .totals{background:linear-gradient(90deg,var(--ok-bg),transparent)}
html .done-pill{background:var(--ok-bg);border-color:var(--ok-line)}
html .form-msg.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err-ink)}
html .src-err{background:var(--err-bg);border-color:var(--err-line);border-left-color:var(--err);color:var(--err-ink)}
html .src-err b,html .src-err .x{color:var(--err-ink)}
html .pcard{background:var(--bg)}
html .tb-toast,html .convmore{color:var(--bg)}
html body{transition:background-color .2s,color .2s}

/* theme switch button (added to the header by layout.js) */
.theme-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink-2);cursor:pointer;flex-shrink:0;padding:0}
.theme-btn:hover{color:var(--brand);border-color:var(--brand)}
.theme-btn svg{width:18px;height:18px;display:block}
.theme-btn .i-sun{display:none}
[data-theme-now="dark"] .theme-btn .i-sun{display:block}
[data-theme-now="dark"] .theme-btn .i-moon{display:none}
.theme-btn.mob{display:none;margin-left:auto;margin-right:6px}
@media (max-width:700px){.theme-btn.mob{display:grid}.hd-nav .theme-btn{display:none}}

/* long link lists (All sizes / All compressors / converters): two columns on phones
   instead of one very long column */
@media (max-width:560px){
  html .pairs{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px}
  html .pairs a{font-size:.86rem;overflow-wrap:anywhere}
}

/* wide two-column menus near the right edge open towards the left, so they never run off the screen */
.nav-dd[data-nav="resize"] .nav-menu,.nav-dd[data-nav="tools"] .nav-menu{left:auto;right:0}

/* language menu in the header (layout.js adds it only on pages that have translations) */
.lang-dd{position:relative;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg-2);color:var(--ink-2);font-family:var(--f);font-size:.78rem;font-weight:700;letter-spacing:.03em;cursor:pointer}
.lang-btn svg{color:var(--brand)}
.lang-btn:hover,.lang-dd.open .lang-btn{color:var(--brand);border-color:var(--brand)}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh-lg);padding:6px;display:none;z-index:80}
.lang-dd.open .lang-menu{display:block}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;
  font-size:.88rem;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.lang-menu a:hover{background:var(--brand-lt);color:var(--brand)}
.lang-menu a.on{color:var(--brand);font-weight:700}
.lang-menu a.on::after{content:'\2713';font-weight:800}
.lang-dd.mob{display:none;margin-left:auto;margin-right:6px}
.lang-dd.mob + .theme-btn.mob{margin-left:0}
@media (max-width:700px){.lang-dd.mob{display:block}.hd-nav .lang-dd{display:none}}

/* ---- size facts table + short how-to (size & file-size pages) ---- */
.specs-wrap{overflow-x:auto;margin:18px 0 26px;border:1px solid var(--line);border-radius:var(--r)}
table.specs{width:100%;border-collapse:collapse;font-size:.93rem}
table.specs th,table.specs td{padding:11px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
table.specs tr:last-child th,table.specs tr:last-child td{border-bottom:0}
table.specs th{width:40%;font-weight:600;color:var(--ink);background:var(--bg-2)}
table.specs td{color:var(--ink-2)}
table.specs a{color:var(--brand-dk);font-weight:600;text-decoration:none}
table.specs a:hover{text-decoration:underline}
.glance .howto-h{font-size:1.1rem;font-weight:700;margin:6px 0 10px}
.glance .more-guide{margin-top:14px;font-size:.92rem;color:var(--ink-3)}
.glance .more-guide a{color:var(--brand-dk);font-weight:600}
@media (max-width:560px){table.specs th{width:46%}table.specs th,table.specs td{padding:9px 11px;font-size:.88rem}}
.feat p a{color:var(--brand-dk);font-weight:600;text-decoration:none}
.feat p a:hover{text-decoration:underline}