/* ===== AnyFormat — Dark UI ===== */
:root{
  --bg:#0e1117;          /* page background */
  --panel:#151a23;       /* cards/sections */
  --panel-2:#1b2230;
  --border:#232b3a;
  --text:#e8ecf2;
  --muted:#a6b0bf;
  --shadow:0 10px 30px rgba(0,0,0,.35);

  /* accents per tool */
  --acc-red:#ff6b6b;
  --acc-orange:#ffa336;
  --acc-green:#3ddc97;
  --acc-blue:#64a3ff;
  --acc-purple:#9c7bff;
  --acc-pink:#ff7cc8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* Header */
header{max-width:1100px;margin:0 auto;padding:56px 20px 24px;text-align:center}
header h1{margin:0 0 10px 0;font-size:44px;letter-spacing:.4px}
header p{margin:0;color:var(--muted);font-size:18px}

/* Grid of tools */
main{max-width:1100px;margin:0 auto;padding:0 20px 32px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:22px}
.tool-card{display:block;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:22px 20px;text-decoration:none;color:var(--text);box-shadow:none;transition:.18s ease;position:relative;overflow:hidden}
.tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:var(--panel-2);border-color:#2b3550}
.tool-row{display:flex;align-items:center;gap:16px}
.icon-wrap{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:26px;color:#0e1117;font-weight:700}
.tool-title{font-size:18px;font-weight:800;margin:0 0 4px 0}
.tool-desc{margin:0;color:var(--muted);font-size:14px}
.badge{position:absolute;right:14px;top:14px;padding:4px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);color:var(--muted);background:rgba(255,255,255,0.02)}

/* icon colors (gradient-ish by using solid bg) */
.icon-red{background:var(--acc-red)}
.icon-orange{background:var(--acc-orange)}
.icon-green{background:var(--acc-green)}
.icon-blue{background:var(--acc-blue)}
.icon-purple{background:var(--acc-purple)}
.icon-pink{background:var(--acc-pink)}

/* Uploader / shared controls on inner pages */
.dropzone{border:2px dashed var(--border);border-radius:16px;padding:30px;text-align:center;background:var(--panel);transition:.2s;cursor:pointer}
.dropzone:hover{border-color:#2f3b55;background:var(--panel-2)}
.dropzone input[type=file]{display:block;margin:0 auto 10px auto;color:var(--muted)}
.controls{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0;flex-wrap:wrap}
select,button{padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text)}
button{cursor:pointer;background:var(--acc-blue);border-color:transparent}
button:hover{filter:brightness(1.05)}
#result{text-align:center;margin-top:16px}
a.button{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--panel);text-decoration:none;color:var(--text)}
a.button:hover{background:var(--panel-2)}
footer{padding:28px;text-align:center;color:var(--muted)}
a{color:var(--acc-blue);text-decoration:none}
a:hover{text-decoration:underline}
/* v=20250812 */

/* ---- Nav & Footer (added auto) ---- */
.site-nav{display:flex;gap:14px;align-items:center;justify-content:center;margin:18px auto 0;opacity:.95}
.site-nav a{padding:6px 10px;border:1px solid #232b3a;border-radius:10px;background:#121722}
.site-nav a:hover{border-color:#2d3a52}
.site-footer{margin:36px auto 24px;color:#8b95a6;font-size:13px;display:flex;gap:14px;justify-content:center}

/* --- AnyFormat: refined nav & footer (dark) --- */
.site-nav{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:center;
  margin:14px auto 26px;
  padding:8px 10px;
  max-width:980px;
  background:rgba(13,19,32,.55);
  border:1px solid #1e2a3d;
  border-radius:16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) inset, 0 2px 10px rgba(0,0,0,.15);
  backdrop-filter:saturate(135%) blur(4px);
}
.site-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px;
  line-height:1; font-weight:600; letter-spacing:.2px;
  color:#cfd8ee; text-decoration:none;
  border-radius:9999px;
  border:1px solid transparent;
  background:rgba(17,24,38,.4);
  transition: all .18s ease;
}
.site-nav a:hover{
  color:#ffffff;
  border-color:#2b3a55;
  background:rgba(18,26,42,.85);
  box-shadow:0 0 0 3px rgba(43,58,85,.25);
}
.site-nav a:active{ transform:translateY(1px); }

/* Headline/Tagline etwas knapper, damit die Chips näher dran sitzen */
header h1{ margin-bottom:6px; }
header p { margin-top:0; opacity:.9 }

/* Footer dezenter, mit Punkten als Trenner */
.site-footer{
  margin:34px auto 28px; gap:8px; color:#92a1b6;
  font-size:13px; opacity:.95; justify-content:center; display:flex; flex-wrap:wrap;
}
.site-footer a{
  color:#b9c5da; text-decoration:none; padding:0 4px; transition:color .15s ease;
}
.site-footer a:hover{ color:#ffffff; }
.site-footer a + a::before{
  content:"•"; opacity:.35; margin:0 10px 0 6px; color:#7e8aa0;
}

/* etwas mehr Luft unter den Tool-Kacheln */
.cards, main .grid, main .tools { margin-top:10px }

/* Brand-Link oben links */
.brand-link{
  font-size:18px; font-weight:700;
  color:#fff; background:none; border:none;
  padding:0 8px;
}
.brand-link:hover{
  color:#61dafb;
  background:none;
  box-shadow:none;
}

/* placement tweak: nav closer to input box */
.site-nav{ margin: 0 auto 14px; padding:8px 10px; }
#convert-form, .dropzone{ margin-top: 10px; }

/* --- Uniform header + upload box alignment --- */
.page-header {
    margin-bottom: 40px; /* space below the title bar */
}

.convert-section {
    margin-top: 20px; /* space above the file upload area */
}

.site-nav {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
}

#convert-form, 
.dropzone {
    margin-top: 30px !important;
}
/* --- End uniform alignment --- */


/******** Per-page nav colors (stable, no hover change) ********/
.site-nav a {
  color: var(--nav-color, #cfd3da);   /* default fallback */
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active {
  color: var(--nav-color, #cfd3da);   /* no color change on hover */
  opacity: 1;
}

/* Default (home / any page without a class) */
body { --nav-color: #cfd3da; }

/* Word → PDF (PDF coral) */
body.page-word-to-pdf     { --nav-color: #F2786A; }

/* PDF → Word (DOC amber) */
body.page-pdf-to-word     { --nav-color: #F4A941; }

/* Merge PDF (mint green) */
body.page-merge-pdf       { --nav-color: #79E0A8; }

/* Compress PDF (indigo/blue) */
body.page-compress-pdf    { --nav-color: #8FB4FF; }

/* Images → PDF (violet) */
body.page-images-to-pdf   { --nav-color: #A78BFA; }

/* OCR PDF (pink) */
body.page-ocr-pdf         { --nav-color: #FF8BB0; }
/******** End Per-page nav colors ********/

/* --- Fixed nav link colors --- */
.site-nav a {
  text-decoration: none;
  opacity: 1;
}

.site-nav a:hover,
.site-nav a:focus,
.site-nav a:active {
  opacity: 0.85; /* Slight hover fade, no color change */
}

/* Assign fixed colors to each menu link based on its text */
.site-nav a[href*="word-to-pdf"]   { color: #F2786A; }  /* Coral */
.site-nav a[href*="pdf-to-word"]   { color: #F4A941; }  /* Amber */
.site-nav a[href*="merge-pdf"]     { color: #79E0A8; }  /* Mint Green */
.site-nav a[href*="compress-pdf"]  { color: #8FB4FF; }  /* Blue */
.site-nav a[href*="images-to-pdf"] { color: #A78BFA; }  /* Violet */
.site-nav a[href*="ocr-pdf"]       { color: #FF8BB0; }  /* Pink */

/* Home link always white */
.site-nav a[href="/"], .site-nav a[href="index.html"] {
  color: #FFFFFF;
}
/* --- End fixed nav link colors --- */
/* AF_ACTIVE_CSS START */
.site-nav a {
  position: relative;
  transition: color 0.4s ease, opacity 0.3s ease;
  font-weight: 600;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%);
  transition: width 0.5s ease, opacity 0.5s ease, height 0.3s ease;
}
.site-nav a:hover::after {
  width: 100%;
  opacity: 1;
  height: 2px;
}
.site-nav a.active {
  font-weight: 700;
}
.site-nav a.active::after {
  width: 100%;
  opacity: 1;
  height: 3px; /* Thicker underline for active page */
}
/* AF_ACTIVE_CSS END */