/* ===================================================================
   One Page PDF Converter — Shared Theme
   Monochrome + Accent: the site stays black/white/gray by default,
   with the orange-red accent reserved specifically for buttons,
   badges, and interactive states (hover/active) — so it pops precisely
   where it means something, rather than being used everywhere.
   Change colors here, once, and every page updates. Page-specific
   styles (tool widgets, FAQ blocks, etc.) stay in each page's own
   <style> block, not here.
   =================================================================== */

:root{
  --primary:#1A1A1A;        /* near-black — headings, links, brand text */
  --primary-dark:#000000;   /* pure black — footer bg end */
  --accent:#FF5A36;         /* orange-red — buttons, badges, hover states */
  --accent-dark:#E14A28;    /* darker orange — button hover/active */
  --ink:#1A1A1A;            /* main body text */
  --muted:#6B6B6B;          /* secondary/lighter text */
  --bg:#FFFFFF;             /* page background */
  --bg-soft:#F5F5F5;        /* subtle section background variation */
  --card:#FFFFFF;           /* card backgrounds */
  --btn-text:#FFFFFF;       /* text color on accent-colored buttons */
  --max-w:1200px;
  --radius:14px;
}

body{
  background:var(--bg);
  color:var(--ink);
}

h1,h2,h3,h4{color:var(--primary)}
a{color:var(--primary)}
a:hover{color:var(--accent)}

.btn-primary, .btn{
  background:var(--accent);
  color:var(--btn-text);
  transition:background 0.15s;
}
.btn-primary:hover, .btn:hover{background:var(--accent-dark)}
.btn.secondary{
  background:transparent;
  color:var(--primary);
  border-color:rgba(26,26,26,0.25);
}
.btn.secondary:hover{background:rgba(26,26,26,0.05);border-color:rgba(26,26,26,0.4)}

/* ---------- Header / Nav ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.97);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(26,26,26,0.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;max-width:var(--max-w);margin:0 auto;gap:16px;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center}
.logo-mark{width:52px;height:52px;flex-shrink:0;display:block}
.logo-mark img{width:100%;height:100%;display:block}
.brand-text strong{display:block;font-size:16px;color:var(--ink)}
.brand-text span{font-size:12px;color:var(--muted)}
.links{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.links a{text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;transition:color 0.15s}
.links a:hover, .links a.active{color:var(--accent)}

/* ---------- Premium badge ---------- */
.premium-badge{display:inline-block;background:var(--accent);color:#fff;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:1px}

/* ---------- Mega-menu ---------- */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{background:none;border:none;font-family:inherit;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:8px;display:flex;align-items:center;transition:color 0.15s}
.nav-dropdown-trigger:hover{background:rgba(26,26,26,0.05);color:var(--accent)}
.nav-dropdown.open .nav-dropdown-trigger{background:rgba(26,26,26,0.05);color:var(--accent)}
.nav-mega-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border-radius:12px;box-shadow:0 14px 34px rgba(26,26,26,0.15);padding:22px;gap:28px;grid-template-columns:repeat(4,170px);z-index:200;border:1px solid rgba(26,26,26,0.08)}
.nav-dropdown.open .nav-mega-menu{display:grid}
.mega-col h4{font-size:11px;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-bottom:10px;font-weight:700}
.mega-col a{display:block;padding:6px 0;color:var(--ink);text-decoration:none;font-size:14px;transition:color 0.15s}
.mega-col a:hover{color:var(--accent)}

/* ---------- Mobile nav ---------- */
.mobile-menu-btn{display:none;background:none;border:none;font-size:20px;color:var(--primary);cursor:pointer;padding:8px}
.mobile-nav-panel{display:none}
@media (max-width:880px){
  nav.links{display:none}
  .mobile-menu-btn{display:block}
  .mobile-nav-panel.open{display:block;position:fixed;top:76px;left:0;right:0;bottom:0;background:#fff;z-index:150;overflow-y:auto;padding:20px 24px 40px}
  .mobile-nav-section{padding:14px 0;border-bottom:1px solid rgba(26,26,26,0.08)}
  .mobile-nav-section h4{font-size:12px;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);margin-bottom:8px}
  .mobile-nav-section a{display:block;padding:8px 0;color:var(--ink);text-decoration:none;font-size:15px;transition:color 0.15s}
  .mobile-nav-section a:hover{color:var(--accent)}
}

/* ---------- Footer ---------- */
footer{margin-top:50px;padding:50px 20px 26px;background:linear-gradient(180deg,var(--primary),var(--primary-dark));color:#F5F5F5}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:var(--max-w);margin:0 auto}
.footer h4{margin-bottom:10px;color:#fff;font-size:14px}
.footer a{color:#D9D9D9;text-decoration:none;font-size:13px;display:block;margin-bottom:6px;transition:color 0.15s}
.footer a:hover{color:var(--accent)}
.footer-bottom{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.12);font-size:13px;color:rgba(255,255,255,0.6)}

@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr}
}