/* ===== base.css ===== */
*, *::before, *::after{box-sizing:border-box;}html, body{height:100%;}html{-webkit-text-size-adjust:100%;line-height:1.15;scroll-behavior:smooth;}body{margin:0;font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#0b1020;background:#f5f7fb;}:root{--bg:#ffffff;--text:#0b1020;--muted:#64748b;--border:#e5e7eb;--accent:#22c55e;--accent-600:#16a34a;--panel:#ffffff;--shadow:0 6px 14px rgba(10,16,28,.06);}a{color:#0a66c2;text-decoration:none;}a:hover{text-decoration:underline;}img, canvas, video, svg{max-width:100%;height:auto;}h1, h2, h3, h4{color:var(--text);margin:.25rem 0 .5rem;}h1{font-size:clamp(1.6rem, 2.6vw, 2.1rem);}h2{font-size:clamp(1.3rem, 2vw, 1.6rem);}h3{font-size:1.125rem;}p{margin:.5rem 0;color:var(--text);}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid transparent;border-radius:10px;background:#16a34a;color:#fff;padding:.55rem .9rem;font-weight:700;line-height:1.1;cursor:pointer;}.btn:hover{background:#128a3f;text-decoration:none;}.btn:disabled{opacity:.6;cursor:not-allowed;}.btn--ghost{background:#fff;color:#0b1020;border-color:var(--border);}.btn--lg{padding:.7rem 1.05rem;}.btn--sm{padding:.45rem .7rem;font-size:.94rem;}.chip{padding:.35rem .7rem;border:1px solid var(--border);border-radius:999px;background:#f7f9fc;color:#0b1020;cursor:pointer;}.chip:hover{background:#eef3fb;}.chip.is-active{outline:2px solid var(--accent);}.text-muted{color:var(--muted);}.hidden{display:none !important;}code, pre, .nowrap-break{overflow-wrap:anywhere;word-break:break-word;}@media (max-width:640px){.btn--lg{padding:.65rem .95rem;}}

/* ===== layout.css ===== */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--border);padding:0;}.header-inner{max-width:1100px;margin:0 auto;width:100%;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;}.brand-logo{height:44px;width:auto;display:block;}.main-nav a{margin-left:14px;color:var(--text);}.main-nav a:hover{color:var(--link);}.main-nav a.active{text-decoration:underline;text-underline-offset:4px;}@media (max-width:520px){.brand-logo{height:36px;}.main-nav a{margin-left:10px;}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.nav-panel{display:flex;gap:14px;align-items:center;}.nav-panel a{color:var(--text);}.nav-toggle{display:none;}.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);}.nav-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::before, .nav-toggle .nav-toggle-bar::after{display:block;position:relative;width:18px;height:2px;background:#0b1020;border-radius:2px;content:"";}.nav-toggle .nav-toggle-bar::before{position:absolute;left:0;top:-6px;}.nav-toggle .nav-toggle-bar::after{position:absolute;left:0;top:6px;}@media (max-width:768px){.main-nav{position:relative;}.nav-toggle{display:flex;}.nav-panel{position:fixed;z-index:100002;top:60px;right:12px;left:auto;width:260px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);box-shadow:0 16px 28px rgba(10,16,28,.12);border-radius:12px;padding:8px;gap:0;display:none;flex-direction:column;}.nav-panel.is-open{display:flex;}.nav-panel a{display:block;padding:12px 10px;font-size:17px;line-height:1.35;border-radius:8px;color:var(--text);}.nav-panel a:hover{background:#f2f4f8;text-decoration:none;}}.nav-backdrop{position:fixed;inset:0;z-index:100001;display:none;background:rgba(10,16,28,.35);backdrop-filter:saturate(120%) blur(1px);}.nav-backdrop.is-open{display:block;}html.no-scroll, html.no-scroll body{overflow:hidden;}.page-shell{max-width:1300px;margin:0 auto;padding:0 12px;}@media (min-width:1280px){.page-shell{display:grid;grid-template-columns:160px minmax(0, 1fr) 160px;column-gap:16px;align-items:start;overflow:visible;}.page-main{min-width:0;}}@media (max-width:1279.98px){.page-shell{display:block;}.page-main{margin:0 auto;padding:0 0;max-width:1000px;}}.hero{max-width:1100px;margin:0 auto;padding:28px 18px 8px;}.page-intro{max-width:1100px;margin:18px auto 0;padding:0 12px;text-align:center;}.site-footer{border-top:1px solid var(--border);background:#fff;color:var(--muted);text-align:center;padding:20px 18px 34px;}.site-footer a{color:#0a66c2;}@media (max-width:1279.98px){.page-shell{display:block !important;grid-template-columns:initial !important;column-gap:0 !important;}.ad-rail{display:none !important;}.page-main{margin:0 auto;max-width:1100px;padding:0 16px;min-width:0;}}@media (min-width:700px) and (max-width:1279.98px){.tools-grid{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}}

/* ===== components.css ===== */
:root{--header-h:60px}@media (max-width:520px){:root{--header-h:56px}}.site-header{position:sticky;top:0;z-index:1100;background:#fff;border-bottom:1px solid var(--border);padding:0;min-height:64px}.header-inner{max-width:1100px;margin:0 auto;width:100%;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand-logo{height:44px;width:auto;display:block}@media (max-width:520px){.brand-logo{height:36px}}.main-nav{min-height:48px}.main-nav a{margin-left:14px;color:var(--text)}.main-nav a:hover{color:var(--link)}.main-nav a.active{text-decoration:underline;text-underline-offset:4px}.cookie-bar,.notice-bar{min-height:48px}
:root{--header-h:60px}@media (max-width:520px){:root{--header-h:56px}}.site-header{position:sticky;top:0;z-index:1100;background:#fff;border-bottom:1px solid var(--border);padding:0}.header-inner{max-width:1100px;margin:0 auto;width:100%;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand-logo{height:44px;width:auto;display:block}@media (max-width:520px){.brand-logo{height:36px}}.main-nav a{margin-left:14px;color:var(--text)}.main-nav a:hover{color:var(--link)}.main-nav a.active{text-decoration:underline;text-underline-offset:4px}.nav-panel{display:flex;gap:14px;align-items:center}.nav-panel a{color:var(--text)}.nav-toggle{display:none}.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text)}.nav-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.nav-toggle .nav-toggle-bar,.nav-toggle .nav-toggle-bar::before,.nav-toggle .nav-toggle-bar::after{display:block;position:relative;width:18px;height:2px;background:#0b1020;border-radius:2px;content:""}.nav-toggle .nav-toggle-bar::before{position:absolute;left:0;top:-6px}.nav-toggle .nav-toggle-bar::after{position:absolute;left:0;top:6px}@media (max-width:768px){.main-nav{position:relative}.nav-toggle{display:flex}.nav-panel{position:fixed;z-index:100002;top:var(--header-h);right:12px;left:auto;width:260px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--border);box-shadow:0 16px 28px rgba(10,16,28,.12);border-radius:12px;padding:8px;gap:0;display:none;flex-direction:column}.nav-panel.is-open{display:flex}.nav-panel a{display:block;padding:12px 10px;font-size:17px;line-height:1.35;border-radius:8px}.nav-panel a:hover{background:#f2f4f8;text-decoration:none}}.nav-backdrop{position:fixed;inset:0;z-index:100001;display:none;background:rgba(10,16,28,.35);backdrop-filter:saturate(120%) blur(1px)}.nav-backdrop.is-open{display:block}.ad-topbar{position:sticky;top:var(--header-h);z-index:900}.hero{max-width:1100px;margin:0 auto;padding:28px 18px 8px}.hero h1{margin:0 0 6px;font-size:clamp(1.6rem,3.6vw,2.4rem);color:#0b1020}.hero p{margin:0;color:var(--muted)}.page-intro{max-width:1100px;margin:18px auto 0;padding:0 12px;text-align:center}.page-intro h1{font-size:2rem;margin-bottom:.4em;color:#0b1020}.page-intro p{font-size:1.1rem;color:var(--muted)}.site-footer{border-top:1px solid var(--border);background:#fff;color:var(--muted);text-align:center;padding:20px 18px 34px}.site-footer a{color:#0a66c2}.breadcrumb{max-width:1100px;margin:10px auto 0;padding:0 12px}.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.95rem;color:var(--muted)}.breadcrumb li{display:flex;align-items:center;gap:6px}.breadcrumb li+li::before{content:"/";opacity:.6}.breadcrumb a{color:var(--link);text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb [aria-current="page"]{color:var(--text);font-weight:600}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.mt-8{margin-top:8px!important}.mt-12{margin-top:12px!important}.mt-16{margin-top:16px!important}.mb-8{margin-bottom:8px!important}.mb-12{margin-bottom:12px!important}.mb-16{margin-bottom:16px!important}.hidden{display:none!important}html,body{max-width:100%;overflow-x:hidden}img,canvas,video,svg{max-width:100%;height:auto}@media (max-width:520px){.file-card{grid-template-columns:64px minmax(0,1fr)}.file-actions{grid-column:1/-1;flex-wrap:wrap}}.file-meta h4{overflow-wrap:anywhere;word-break:break-word}@media (max-width:1024px){.controls,.controls-row{gap:10px}.quality-group{flex:1 1 100%}.quality-group input[type="range"]{width:100%;min-width:0}}@media (max-width:640px){.actions{width:100%;flex-wrap:wrap;gap:6px}.actions .btn{flex:1 1 auto}}@media (max-width:640px){.results-zipbar,#results .zipbar,#results .zip-area{flex-wrap:wrap}}

/* ===== home.css ===== */
.home-hero, .home-intro{position:relative;z-index:0;}.tools-grid{max-width:1100px;margin:14px auto 24px;padding:0 18px;display:grid;gap:14px;grid-template-columns:repeat(3, minmax(0,1fr));}@media (max-width:900px){.tools-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}@media (max-width:520px){.tools-grid{grid-template-columns:1fr;}}.tools-grid .tool-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;min-height:210px;box-shadow:0 6px 14px rgba(10,16,28,.06);}.tool-head{display:flex;align-items:center;gap:10px;margin:0 0 6px;}.tool-icon{width:28px;height:28px;flex:0 0 28px;object-fit:contain;}@media (min-width:900px){.tool-icon{width:32px;height:32px;flex-basis:32px;}}.tools-grid .tool-card h3{margin:0;font-size:1.06rem;color:#0b1020;line-height:1.25;}.tools-grid .tool-card p{margin:0;color:var(--muted);font-size:.95rem;}.tools-grid .tool-card .grow{flex:1;}.tools-grid > .tools-grid-ad{grid-column:1 / -1;display:block;margin:12px 0;width:100%;}.tools-grid > .tools-grid-ad .ad-slot{max-width:100%;overflow:hidden;}.seo-block{text-align:left;max-width:900px;margin:40px auto;padding:0 18px;}.seo-block h2{margin:0 0 10px;font-size:clamp(1.2rem,2vw,1.6rem);color:#0b1020;}.seo-block h3{margin:18px 0 8px;font-size:1.05rem;color:#0b1020;}.seo-block p{margin:.4em 0;color:var(--text);}.seo-block ul{margin:.4em 0 .2em 1.2em;}@media (min-width:820px) and (max-width:1180px) and (orientation:landscape){.page-shell{display:block !important;max-width:1100px;padding:0 18px;}.page-main{max-width:1100px;margin:0 auto;padding:0;}.hero{max-width:1100px;padding:28px 0 8px;}.tools-grid{padding:0;}}@media (hover:none), (pointer:coarse){.page-shell{display:block;}}

/* ===== faq.css ===== */
:root{--faq-border:var(--border, #e6eaf2);--faq-focus:var(--focus, #2f6efb);--faq-text:var(--text, #0b1020);--faq-muted:var(--muted, #6b7280);--faq-card:var(--card, #ffffff);--faq-open:var(--open-bg,#f6f9ff);--faq-font:var(--font-body, var(--font, inherit));}.faq-section{padding-block-start:clamp(16px, 2.4vw, 28px);}.faqs{max-width:1000px;margin:28px auto;padding:0 18px;font-family:var(--faq-font);}.faqs h2{margin:0 0 12px;font-size:clamp(1.1rem, 2.2vw, 1.5rem);font-weight:700;color:var(--faq-text);}.faq-list{display:grid;gap:8px;}.faqs details{border:1px solid var(--faq-border);border-radius:12px;margin:0;background:var(--faq-card);box-shadow:0 6px 16px rgba(10,16,28,.06);overflow:hidden;transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;}@media (hover:hover){.faqs details:hover{box-shadow:0 10px 22px rgba(10,16,28,.08);}}.faqs summary{cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:start;gap:12px;padding:12px 16px;min-height:44px;font:inherit;font-weight:600;color:var(--faq-text);list-style:none;}.faqs summary::-webkit-details-marker{display:none;}.faqs summary::after{content:"";width:18px;height:18px;margin-top:2px;background:center / contain no-repeat url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true'>\ <path fill='%23858fa3' d='M12 15.5 6.5 10l1.4-1.4L12 12.7l4.1-4.1L17.5 10z'/></svg>");transform:rotate(0deg);transition:transform .18s ease;opacity:.9;}.faqs details[open]{background:var(--faq-open);border-color:#d5defa;}.faqs details[open] > summary::after{transform:rotate(180deg);}.faqs summary:focus-visible{outline:3px solid var(--faq-focus);outline-offset:3px;border-radius:10px;}.faqs .answer{padding:8px 16px 12px;color:var(--faq-text);line-height:1.6;}.faqs .answer > *{margin-block:8px;}.faqs .answer > *:first-child{margin-block-start:0;}.faqs .answer > *:last-child{margin-block-end:0;}.faqs .answer ul, .faqs .answer ol{margin:8px 0 8px 20px;}@media (min-width:769px){.faqs{padding:0 22px;}.faqs summary{padding:13px 18px;}.faqs .answer{padding:9px 18px 12px;}.faq-list{gap:10px;}}@media (min-width:1025px){.faqs{padding:0 24px;}.faqs summary{padding:14px 20px;}.faqs .answer{padding:10px 20px 12px;}}@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important;}}@media print{.faqs details{border:none;box-shadow:none;background:#fff;}.faqs summary::after{display:none;}}

/* ===== recommended.css ===== */
.rec-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));min-height:360px}
.rec-card{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:16px;background:#fff}
.rec-head{display:flex!important;align-items:center;gap:12px;margin:0 0 8px 0}
.rec-icon{display:inline-block!important;width:28px;height:28px;flex:0 0 auto}
.rec-title{display:block!important;margin:0;font-size:1rem;line-height:1.2;font-weight:700;color:var(--text,#0b1020)}
.rec-title a{color:inherit!important;text-decoration:none}
.rec-desc{margin:6px 0 12px 0;color:#333}
.rec-actions .btn--sm{padding:8px 12px}
/* Optional skeleton items shown by templates while content resolves */
.rec-skeleton{border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:16px;background:linear-gradient(90deg,#f3f3f3 25%,#ecebeb 37%,#f3f3f3 63%);background-size:400% 100%;animation:recShimmer 1.2s ease-in-out infinite}
.rec-skel-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.rec-skel-avatar{width:28px;height:28px;border-radius:6px;background:#e5e5e5;flex:0 0 auto}
.rec-skel-title{height:14px;width:60%;border-radius:4px;background:#e5e5e5}
.rec-skel-line{height:12px;border-radius:4px;background:#e5e5e5;margin:8px 0}
@keyframes recShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ===== dark-hooks.css ===== */
html[data-theme="dark"]{--bg:#0a0f1c;--panel:#0f1628;--text:#e5e7eb;--muted:#9ca3af;--border:#1b263b;--accent:#16a34a;--link:#86efac;--focus:#ffd166;color-scheme:dark;}html[data-theme="dark"] body{background:radial-gradient(1200px 800px at 70% -10%, #0d1324 0%, var(--bg) 45%);color:var(--text);}html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-footer{background:var(--panel);}

/* ===== mega-menu.css ===== */
/* ===== Mega menu ===== */
:root{ --header-h:60px } /* JS keeps this in sync with real header height */

.mega-menu[hidden]{display:none !important}

.mega-menu{
  position:fixed;
  left:0; right:0;
  top:var(--header-h);
  z-index:100003;              /* above header/nav/backdrop */
  background:#fff;
  border-top:1px solid #eceeef;
  box-shadow:0 8px 16px rgba(0,0,0,.1);
  padding:20px 40px;
  max-height:calc(100vh - var(--header-h));
  overflow:auto;

  /* animation base state (closed) */
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
}
.mega-menu.is-open{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.mega-menu-inner{display:flex;flex-wrap:wrap;gap:40px}
.mega-column{flex:1;min-width:200px}
.mega-heading{display:flex;align-items:center;font-size:1rem;font-weight:600;margin:0 0 8px;color:#0b1020}
.cat-icon{width:20px;height:20px;margin-right:6px;vertical-align:middle}

.mega-list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}

.mega-link{
  display:flex;align-items:center;
  border:1px solid #e1e4e8;border-radius:8px;
  padding:8px 10px;background:#fff;color:#0b1020;text-decoration:none;
  transition:background .15s ease, box-shadow .15s ease;
}
.mega-link:hover,.mega-link:focus{
  background:#f5f7fa;box-shadow:0 0 0 2px var(--accent,#005cb9) inset
}
.tool-icon{width:18px;height:18px;margin-right:6px;flex-shrink:0}
.tool-name{flex:1;font-size:.9rem}
.mega-empty{font-size:.85rem;color:#777;margin:8px 0}

/* Tools chevron (works for desktop & mobile links with class .nav-tools) */
.nav-tools{
  position:relative;
  padding-right:16px; /* space for chevron */
}
.nav-tools::after{
  content:"";
  display:inline-block;
  width:.55em;height:.55em;
  margin-left:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);           /* ▼ */
  transition:transform 160ms ease;
  vertical-align:middle;
}
.nav-tools[aria-expanded="true"]::after,
.nav-tools.is-open::after{
  transform:rotate(-135deg);         /* ▲ */
}

/* Touch / small screens: denser spacing for the sheet */
@media (max-width:768px), (hover:none), (pointer:coarse){
  .mega-menu{padding:14px 16px;box-shadow:0 10px 24px rgba(0,0,0,.16)}
  .mega-menu-inner{gap:16px}
  .mega-list{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* Very small phones */
@media (max-width:360px){
  .mega-menu{padding:12px}
  .mega-list{grid-template-columns:1fr 1fr}
}


/* new quick action row */
.mega-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin: 6px 6px 10px;
}
.mega-all-link {
  display:inline-block;
  padding:.45rem .75rem;
  border:1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}
.mega-all-link:hover { background: var(--hover, #f5f7fb); }
@media (max-width: 768px) {
  .mega-actions { justify-content: center; }
}


/* ===== ads.css ===== */
/* ===== Generic ad slot styles (place FIRST so later overrides can win) ===== */
:root{ --ad-top-h-mobile:72px; --ad-bottom-h-mobile:60px; }
.ad-slot{
  display:block;
  margin:12px auto;
  text-align:center;
  max-width:100%;
  /* Zero-CLS base guard (never fully collapse) */
  min-height:1px;
  width:100%;
  background:rgba(0,0,0,.03)
}
.ad-fluid ins,
.ad-fluid iframe{
  display:block;
  margin:0 auto;
  max-width:100% !important;
}
.ad-fixed ins,
.ad-fixed iframe{
  display:block;
  margin:0 auto;
  max-width:none !important;
}

/* Minimum slot heights */
/* Top/bottom are fully controlled by the height clamp below */
.ad-slot--mid{min-height:280px;margin-block:24px}
.ad-slot--rail{min-height:600px}

/* Mobile-first reserved space & spacing (CLS guard) */
.ad-slot{display:block}
.ad-slot > ins.adsbygoogle{display:block;width:100%}
@media (max-width:480px){
  .ad-slot--mid{min-height:280px;margin-block:12px}
  .ad-slot--rail{display:none}
}
@media (min-width:481px) and (max-width:767.98px){
  .ad-slot--mid{min-height:280px;margin-block:16px}
  .ad-slot--rail{display:none}
}
@media (min-width:768px) and (max-width:1023.98px){
  .ad-slot--mid{min-height:280px;margin-block:16px}
  .ad-slot--rail{display:block;min-height:600px}
}
@media (min-width:1024px){
  .ad-slot--mid{min-height:280px;margin-block:18px}
  .ad-slot--rail{display:block;min-height:600px}
}

/* Removed previous mid-size override (@media max-width:1024) to keep consistent 250px reserve per spec */
@media (max-width:640px){
  /* Maintain 280px reserve for mid on small screens (zero CLS) */
  .ad-slot--mid{min-height:280px}
}

/* Reserve top banner height to avoid CLS */
@media (max-width: 639.98px){
  .ad-topbar{ min-height:120px; }
}
@media (min-width: 640px){
  .ad-topbar{ min-height:90px; }
}

/* Ensure creatives expand per slot */
.ad-slot--top .adsbygoogle,
.ad-slot--mid .adsbygoogle,
.ad-slot--bottom .adsbygoogle{display:block;width:100%}

/* ===== Ad Height Clamp (CSS-only; prevents post-load growth) =====
 * Rationale:
 * - Top bar: 100px on phones (≤640px), 120px on tablet/desktop (≥641px).
 * - Bottom:  90px on phones (≤640px), 120px on tablet/desktop (≥641px).
 * - Fixed wrapper height avoids CLS; inner content fills and is clipped.
 * - Neutralize AdSense absolute wrappers on ≥641px so creatives don’t escape.
 * - Single source of truth; no JS height writes.
 */
/* 1) Wrappers: fixed height per breakpoint, overflow hidden, neutral stacking */
.ad-topbar > .ad-slot,
.ad-slot--bottom { position: relative !important; overflow: hidden !important; z-index: auto !important; }

/* Phone ≤640px: use variables for compact visual caps */
@media (max-width:640px){
  /* No fixed height for topbar on mobile; bottom keeps compact cap */
  .ad-slot--bottom     { height: var(--ad-bottom-h-mobile) !important; min-height: var(--ad-bottom-h-mobile) !important; max-height: var(--ad-bottom-h-mobile) !important; margin-bottom: env(safe-area-inset-bottom); }
}
/* Tablet/Desktop ≥641px: top/bottom = 120px */
@media (min-width:641px){
  /* No fixed height for topbar on tablet/desktop; bottom keeps cap */
  .ad-slot--bottom { height: 120px !important; min-height: 120px !important; max-height: 120px !important; }
}

/* 2) Inner <ins>/<iframe>: fill wrapper (never exceed) */
.ad-slot iframe,
.ad-slot .adsbygoogle,
.ad-slot ins,
.ad-slot [id^="monetag"],
.ad-slot .monetag-banner,
.ad-topbar > .ad-slot .adsbygoogle,
.ad-topbar > .ad-slot iframe,
.ad-topbar > .ad-slot ins,
.ad-slot--bottom .adsbygoogle,
.ad-slot--bottom iframe,
.ad-slot--bottom ins{
  display:block !important;
  position:static !important; /* neutralize absolute placement */
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  margin:0 auto !important;
  overflow:hidden !important;
  object-fit:contain !important;
}
/* If no creative renders, collapse the wrapper to avoid blank space */
.ad-topbar > .ad-slot:empty { height: 0 !important; min-height: 0 !important; max-height: 0 !important; }

/* 3) Line-height zero to avoid extra text line space */
.ad-topbar{ line-height:0 }

/* Removed duplicate clamp blocks: unified above */

/* Footer wrapper avoids extra line-box space */
.site-footer .ad-block-bottom { line-height: 0; }

/* ===== Top bar (scrolls; NOT sticky) ===== */
.ad-topbar{
  position:relative !important; /* hard override in case any legacy sticky rules leak in */
  top:auto !important;
  margin-top:0;                 /* no blank band above the bar */
  display:block;
  width:100%;
  line-height:0; /* prevent extra line box space */
}
/* Apply visual styling only when a slot exists */
.ad-topbar:has(> .ad-slot){
  background:#f7f9fc;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
/* Make sure any generic ad-slot margin doesn’t add gaps inside the bar */
.site-header + .ad-topbar{margin-top:0 !important}
.ad-topbar > .ad-slot{
  max-width:1100px;
  margin:0 auto !important;     /* overrides the 12px .ad-slot margin */
  padding:0 18px;
  text-align:center;
  line-height:0; /* prevent extra line box space */
}
/* Kill inner margins that iframes/ins sometimes carry */
.ad-topbar .adsbygoogle,
.ad-topbar iframe{display:block;margin:0 !important}

/* If a top bar exists, don’t add the usual main offset */
.ad-topbar ~ main{margin-top:0 !important}

/* (Removed legacy max-height cap on .ad-topbar; wrapper clamps height now) */
/* (Removed conflicting small-screen expansion: keep absolute containment on mobile) */
@media (max-width:640px){
  /* Sticky only when armed to avoid initial push */
  html.arm-sticky-topbar .ad-topbar { position: sticky !important; top: 0; left: 0; right: 0; width: 100vw; z-index: 1200; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  /* Only add top offset when an .ad-topbar actually precedes the content */
  html.arm-sticky-topbar .ad-topbar ~ main,
  html.arm-sticky-topbar .ad-topbar ~ .page-main {
    margin-top: var(--ad-top-h-mobile) !important; /* Adjust if your topbar ad is taller */
  }

}

/* Defensive: prevent overly tall creatives on small screens */
.ad-slot{overflow:hidden}
.ad-slot iframe, .ad-slot > ins.adsbygoogle{max-height:600px !important;overflow:hidden !important}
@media (max-width:900px){
  .ad-slot iframe, .ad-slot > ins.adsbygoogle{max-height:300px !important}
}
/* (Removed conflicting small-screen overflow/height relaxations for top/bottom) */

/* Small-screen specific: ensure topbar ad shows fully (overrides generic .ad-slot overflow) */
/* (Removed small-screen block that overrode topbar containment) */

/* Footer ad wrapper - ensure visible and not collapsed */
.ad-block-bottom{display:block;width:100%;padding-top:8px;padding-bottom:8px}
.site-footer .ad-slot{margin:12px auto}

/* Collapsible state for empty/no-fill slots */
.ad-slot.is-empty{ display:none !important; height:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; }

/* Oversize creative scaling (mobile fallback for stubborn 300x250, etc.) */
@media (max-width:640px){
  .ad-slot.is-oversize > * { transform-origin:center center; pointer-events:auto; }
  .ad-topbar > .ad-slot.is-oversize > * { transform: scale(calc(var(--ad-top-h-mobile) / var(--creative-h, 250px))); }
  .ad-slot--bottom.is-oversize > * { transform: scale(calc(var(--ad-bottom-h-mobile) / var(--creative-h, 250px))); }
}

/* Debug placeholder for missing slots */
.ad-debug{border:1px dashed var(--border);padding:10px;border-radius:8px;color:var(--muted);background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}

/* ===== Rails / page-shell grid ===== */
:root{--rail-width:160px}
/* FIX: rails were hidden by overly strict breakpoint (1280px + hover/pointer).
   Broaden to >=1024px and drop input modality filters so rails return on standard desktop & tablets. */
@media (min-width:1024px){
  .page-shell{
    display:grid;
    grid-template-columns:var(--rail-width) minmax(0,1fr) var(--rail-width);
    column-gap:16px;
    align-items:start;
    overflow:visible;
  }
  .page-main{min-width:0}
  .ad-rail{display:block;position:sticky;top:80px;width:var(--rail-width);text-align:center}
  .ad-rail .ad-slot{min-height:600px}
  /* Mid ad slot: allow 280px on desktop */
  .ad-slot--mid{min-height:280px}
}
/* Defensive override */
@media (min-width:1024px){.ad-rail{display:block !important}}
@media (max-width:1023.98px){.ad-rail{display:none !important}}

/* Tools grid “inline ad card” container */
.tools-grid > .tools-grid-ad{width:100%}
.tools-grid > .tools-grid-ad .ad-slot,
.tools-grid > .tools-grid-ad .ad-slot iframe,
.tools-grid > .tools-grid-ad .ad-slot .adsbygoogle{max-width:100% !important}
.tools-grid > .tools-grid-ad .ad-slot{overflow:hidden}

/* Visibility helpers for breakpoint-specific ad insertions */
.only-desktop, .only-tablet, .only-mobile { display: none; }
@media (min-width:1024px){ .only-desktop{display:block;} }
@media (min-width:640px) and (max-width:1023.98px){ .only-tablet{display:block;} }
@media (max-width:639.98px){ .only-mobile{display:block;} }


/* Keep stacking neutral */
.ad-slot,.ad-rail{overflow:hidden}
.ad-topbar,.ad-slot,.ad-slot *{z-index:auto !important}

/* Remove blur when mobile menu is open – dim only */
.nav-backdrop{backdrop-filter:none !important}

/* Dark theme */
html[data-theme="dark"] .ad-topbar,
html[data-theme="dark"] .ad-rail{
  background:#0a1427;
  border-color:#1b263b;
}

/* (Removed old desktop caps in favor of explicit fixed heights above) */

/* Desktop/tablet: neutralize AdSense absolute positioning in topbar so size stays constrained */
@media (min-width:641px){
  .ad-topbar div[id^="aswift_"],
  .ad-topbar div[id$="_host"],
  .ad-topbar iframe[id^="aswift_"],
  .ad-topbar ins.adsbygoogle,
  .ad-topbar .adsbygoogle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .ad-topbar [style*="position:absolute"]{ position: static !important; left: auto !important; right: auto !important }
  /* Bottom slot: neutralize absolute wrappers too */
  .ad-slot--bottom div[id^="aswift_"],
  .ad-slot--bottom div[id$="_host"],
  .ad-slot--bottom iframe[id^="aswift_"],
  .ad-slot--bottom ins.adsbygoogle,
  .ad-slot--bottom .adsbygoogle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  .ad-slot--bottom [style*="position:absolute"]{ position: static !important; left: auto !important; right: auto !important }
}

/* (Removed previous tablet caps block in favor of fixed-height clamps above) */

/* Hide rails and remove reservations on tablets/phones */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  .ad-rail,
  .rail-left,
  .rail-right,
  .ads-rail,
  .ads-rail-top,
  .ads-rail-bottom {
    display: none !important;
    visibility: hidden !important;
  }

  /* Remove reserved space used for CLS guards on small viewports */
  .ad-rail-placeholder,
  .ads-rail-placeholder,
  .ads--reserve-rail,
  .ads-reserve-top,
  .ads-reserve-bottom {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* If content columns add margins to make room for rails, reset them */
  .has-rails-left  { margin-left: 0 !important; }
  .has-rails-right { margin-right: 0 !important; }
  .has-rails       { margin-left: 0 !important; margin-right: 0 !important; }
}

/* === Main site: remove top ad/rail/hero reserves on tablets/phones === */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  /* 2a) Hide/zero any top ad/rail containers */
  .ads-reserve-top,
  .ads--reserve-top,
  .ads-rail-top,
  .ad-top,
  .ad-leaderboard,
  .ad-slot--top,
  .ad-slot--leaderboard,
  .rail-top,
  .ad-rail-placeholder-top,
  .hero-spacer,
  .header-spacer,
  .sticky-spacer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2b) Collapse grid row that reserved space for rails/hero */
  .page-shell { display: block !important; }
  .page-shell .page-main {
    margin-top: 0 !important;
    padding-top: clamp(8px, 1.2vh, 16px) !important;
  }

  /* 2c) If content wrapper adds offset when rails are present, reset it */
  .page-shell.has-rails,
  .page-shell.has-top-rail {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* === MAIN SITE: kill remaining top reserve on tablets/phones (except .ad-topbar) === */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  /* A) collapse non-ad top reserves on small screens */
  .ads-reserve-top,
  .ad-slot--top:empty,
  .ad-slot--leaderboard:empty,
  .ads-rail-top,
  .hero-spacer,
  .header-spacer,
  .sticky-spacer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* B) Some pages use a grid row for top content – flatten shell on small screens */
  .page-shell { display: block !important; }
  .page-shell .page-main {
    margin-top: 0 !important;
    padding-top: clamp(8px, 1.2vh, 16px) !important;
  }

  /* C) Prevent H1/hero “margin-top collapse” creating phantom space */
  .page-main > :first-child { margin-top: 0 !important; }

  /* D) Ensure the element immediately after header never adds offset */
  .site-header + main,
  .site-header + .page-shell,
  .site-header + .page-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Desktop safety: if you need explicit reserves, add them near the topbar clamp rules. */

/* === MAIN SITE: remove sticky/top reserve on tablets/phones === */
@media (max-width: 1200px), (hover: none) and (pointer: coarse) {
  /* Zero common CSS variables used for top spacing */
  :root{
    --header-h: 0px !important;
    --top-reserve: 0px !important;
    --ads-top-reserve: 0px !important;
  }

  /* Nuke any layout offsets below the header */
  .site-header + main,
  .site-header + .page-shell,
  .site-header + .page-main,
  .page-shell,
  .page-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* If a sticky spacer exists, collapse it */
  .sticky-spacer,
  .header-spacer,
  .hero-spacer,
  .ads-reserve-top,
  .ad-topbar,
  .ad-slot--top,
  .ad-slot--leaderboard {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Guard against first-child margin collapsing into the body */
  .page-main > :first-child { margin-top: 0 !important; }

  /* If grid reserves a top row, flatten it */
  .page-shell { display: block !important; }
}

  /* ===== Main site: collapse any top reserve on touch devices & tablets ===== */

  /* (Tablet-targeted rules will be appended after this file.) */

/* Tablet-only runtime class applied by includes/head.php script: .is-tablet-touch
   This collapses top/hero/leaderboard space and rail reserves only on tablets
   where the script determined a touch-capable tablet experience (iPad-ish).
   Desktop touch-capable laptops should NOT receive these rules because the
   runtime detection avoids setting the class there. */
.is-tablet-touch .ad-topbar,
.is-tablet-touch .ads-reserve-top,
.is-tablet-touch .ad-slot--top,
.is-tablet-touch .ad-slot--leaderboard,
.is-tablet-touch .ads-rail-top,
.is-tablet-touch .hero-spacer,
.is-tablet-touch .header-spacer,
.is-tablet-touch .sticky-spacer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.is-tablet-touch .site-header + main,
.is-tablet-touch .site-header + .page-shell,
.is-tablet-touch .site-header + .page-main,
.is-tablet-touch .page-shell,
.is-tablet-touch .page-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.is-tablet-touch .page-main > :first-child { margin-top: 0 !important; }
.is-tablet-touch .page-shell { display: block !important; }

/* Keep the rail collapse at <=1200px for narrow viewports (phones/tablets)
   regardless of runtime class — this is width-based and already conservative. */
@media (max-width: 1200px) {
  .ads--reserve-rail,
  .ad-rail-placeholder,
  .ad-rail { display: none !important; }
  .ad-rail-placeholder { height: 0 !important; min-height: 0 !important; }
}

/* ===== Main site: iPad/tablet-only top-gap collapse ===== */
.is-tablet-touch .site-header + .page-shell,
.is-tablet-touch .site-header + .page-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Collapse the usual gap sources on tablets only */
.is-tablet-touch .ad-topbar,
.is-tablet-touch .ads-reserve-top,
.is-tablet-touch .page-hero,
.is-tablet-touch .banner-top,
.is-tablet-touch .hero-spacer,
.is-tablet-touch .header-spacer,
.is-tablet-touch .sticky-spacer,
.is-tablet-touch .ads-rail-top {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Some pages reserve a grid row for a hero/topbar */
.is-tablet-touch .page-shell {
  display: block !important;            /* flatten grid */
  padding-top: 0 !important;
}

/* Defensive: first child margin collapsing into the body */
.is-tablet-touch .page-main > :first-child { margin-top: 0 !important; }

/* Defensive: any CSS variables used as sticky offsets */
.is-tablet-touch :root {
  --header-h: 0px !important;
  --top-reserve: 0px !important;
  --ads-top-reserve: 0px !important;
}
.is-tablet-touch body { scroll-padding-top: 0 !important; }
.is-tablet-touch :target { scroll-margin-top: 0 !important; }

/* If the first node after header is a spacer, remove it on tablets */
.is-tablet-touch .site-header + .ad-topbar,
.is-tablet-touch .site-header + .ads-reserve-top,
.is-tablet-touch .site-header + .ads-rail-top,
.is-tablet-touch .site-header + .page-hero,
.is-tablet-touch .site-header + .banner-top,
.is-tablet-touch .site-header + .hero-spacer,
.is-tablet-touch .site-header + .header-spacer,
.is-tablet-touch .site-header + .sticky-spacer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ===== Topbar (always on when it renders) ===== */
.ad-topbar {
  display: block;
  margin: 0 auto;
  padding: 8px 0;           /* breathing room */
  max-width: 100%;
  text-align: center;
}
.ad-topbar:empty { display:none !important; height:0 !important; padding:0 !important; }
.ad-topbar:not(:has(.topbar-slot)) { display:none !important; height:0 !important; padding:0 !important; }