/* --- Global type scale fixes (gentle, responsive) --- */
h1 {
  font-size: clamp(1.75rem, 3.2vw + 1rem, 2.4rem);   /* ~28–38px */
  line-height: 1.25;
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.25rem, 1.8vw + .9rem, 1.75rem); /* ~20–28px */
  line-height: 1.3;
  margin: 1.25rem 0 .5rem;
}
h3 {
  font-size: clamp(1.1rem, 1.2vw + .85rem, 1.35rem);
  line-height: 1.35;
  margin: 1rem 0 .35rem;
}

/* Nice lead paragraph for page intros */
.lead {
  font-size: 1.05rem;
  color: #475569; /* slate-600 */
  margin-bottom: .75rem;
}

/* Tighter rhythm */
hr { margin: 1rem 0; }

/* Tool page small polish (optional; harmless elsewhere) */
.inline-links { padding-left: 1rem; }
.inline-links li { margin: .25rem 0; }

.button, .btn {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  text-decoration: none;
}
.button:hover, .btn:hover { background:#f8fafc; }

/* --- Tools grid & cards --- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 12px 0 20px;
}

.tool-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 14px 16px;
  background: #fff;
  transition: box-shadow .15s ease, transform .05s ease;
}
.tool-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.05); }
.tool-card h3 { display:flex; align-items:center; gap:10px; margin-top:0; }
.tool-card .fa { font-size: 20px; color:#64748b; }

/* Inputs & buttons look tidy inside cards */
.tool-card input[type="file"],
.tool-card input[type="text"],
.tool-card select {
  width: 100%;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.tool-card .button {
  display:inline-block;
  padding:.5rem .9rem;
  border:1px solid #e5e7eb;
  border-radius:8px;
  text-transform: uppercase;
  font-size:.8rem;
  letter-spacing:.02em;
}
.tool-card .button:hover { background:#f8fafc; }

/* fine-tune headings now that we use cards */
h2.tools-subtitle { margin: .25rem 0 1rem; color:#475569; font-size:1.05rem; }

/* File row inside merge cards */
.file-row{
  display:flex;
  align-items:center;          /* centers the button text vertically */
  gap:12px;
  flex-wrap:wrap;              /* wrap on very small screens */
}
.file-name{
  flex:1 1 auto;
  min-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;      /* truncate long names with … */
  white-space:nowrap;
}
.file-pages{
  color:#64748b;
  font-size:.95rem;
}
.button.small{ padding:.4rem .7rem; font-size:.78rem; }

/* Buttons that match theme but aren't red */
.button.neutral {
  box-shadow: inset 0 0 0 2px #9fa3a6;      /* gray */
  color: #3d4449 !important;
}
.button.neutral:hover { background-color: rgba(159,163,166,0.08); }

.button.ghost {
  box-shadow: inset 0 0 0 2px #cbd5e1;      /* light slate */
  color: #475569 !important;
}
.button.icon {
  height: 2.25em; line-height: 2.25em;
  padding: 0 .8em; font-size: .75em;
}

/* File row UI */
.file-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.file-name{ flex:1 1 auto; min-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-pages{ color:#64748b; font-size:.95rem; }
.file-actions{ display:flex; align-items:center; gap:8px; }

/* Center labels inside all theme buttons */
.button,
a.button,
button.button {
  display: inline-flex;          /* use flex for centering */
  align-items: center;           /* vertical center */
  justify-content: center;       /* horizontal center */
  line-height: 1;                /* avoid top bias from large line-height */
}

/* Consistent heights for the small/neutral/icon variants we introduced */
.button.small     { height: 32px; padding: 0 12px; }
.button.icon      { height: 32px; padding: 0 10px; }
#addFilesBtn.button { height: 40px; padding: 0 14px; }

/* Keep the visual style you already set */
.button.neutral { box-shadow: inset 0 0 0 2px #9fa3a6; color: #3d4449 !important; }
.button.neutral:hover { background-color: rgba(159,163,166,0.08); }
.button.ghost   { box-shadow: inset 0 0 0 2px #cbd5e1; color: #475569 !important; }

/* --- Top Navbar (replacing sidebar) --- */
#header { align-items: center; gap: 16px; }
#topnav {
  display: flex; gap: 18px; align-items: center; justify-content: flex-end;
  font-family: "Roboto Slab", serif; font-weight: 700; text-transform: uppercase;
}
#topnav a { border-bottom: 0; color: #3d4449; }
#topnav a:hover { color: #f56a6a; }

/* Hide the left sidebar everywhere */
#sidebar { display: none !important; }

/* Make wrapper behave like single column since sidebar is gone */
#wrapper { flex-direction: column; }

/* ===== Top Navbar (desktop + mobile) ===== */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Links row */
#topnav {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  text-transform: uppercase;
}

#topnav a {
  border-bottom: 0;
  color: #3d4449;
  letter-spacing: .02em;
  padding: 6px 4px;
}
#topnav a:hover { color: #f56a6a; }

/* Active page highlight */
#topnav a.active {
  color: #f56a6a;
  position: relative;
}
#topnav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: #f56a6a;
  border-radius: 2px;
}

/* Hide the left sidebar globally */
#sidebar { display: none !important; }
/* Make wrapper single column since sidebar is gone */
#wrapper { flex-direction: column; }

/* ----- Mobile menu ----- */
.nav-toggle {
  display: none;
  width: 40px; height: 34px;
  border: 0; background: transparent;
  padding: 0; margin-left: auto;
  cursor: pointer;
}
.nav-toggle .bar {
  display: block;
  width: 100%; height: 3px;
  margin: 6px 0;
  background: #3d4449;
  transition: transform .2s ease, opacity .2s ease;
}

/* Breakpoint */
@media (max-width: 820px) {
  /* show burger */
  .nav-toggle { display: inline-block; }

  /* stack header */
  #header { align-items: center; }

  /* collapsed by default */
  #topnav {
    position: absolute;
    top: 64px; right: 16px; left: 16px;
    display: none;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
    z-index: 1000;
  }
  #topnav.open { display: flex; }

  #topnav a { padding: 10px 6px; }

  /* shorter active underline on mobile */
  #topnav a.active::after { bottom: -2px; }
}

/* Optional: subtle animation for toggle to “X” when open */
@media (max-width: 820px) {
  #topnav.open + .nav-toggle .bar { /* keep specificity low; we’ll flip using :has not widely supported yet */
    /* (We’ll just keep simple burger for broad compatibility) */
  }
}
/* ===== Minimal footer ===== */
#site-footer {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid #e5e7eb;
  color: #7f888f;
  font-size: 0.95rem;
}
#site-footer .inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  text-align: center;
}
#site-footer a { color: #3d4449; border-bottom: 0; font-weight: 700; }
#site-footer a:hover { color: #f56a6a; }
#site-footer .sep { margin: 0 10px; color: #c5c7cb; }

@media (max-width: 820px) {
  #site-footer { padding: 18px 0; font-size: 0.9rem; }
}

/* ===== Top nav (desktop stays the same) ===== */
#header { align-items: center; gap: 16px; }
#topnav {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: flex-end;
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  text-transform: uppercase;
}
#topnav a { border-bottom: 0; color: #3d4449; padding: 6px 4px; letter-spacing: .02em; }
#topnav a:hover { color: #f56a6a; }
#topnav a.active { color: #f56a6a; position: relative; }
#topnav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#f56a6a; border-radius:2px; }

/* Hide legacy sidebar column */
#sidebar { display:none !important; }
#wrapper { flex-direction: column; }

/* ===== Mobile behavior (<=820px) ===== */
.nav-toggle {
  display: none;
  appearance: none; -webkit-appearance:none;
  background: transparent !important;
  border: 0 !important; box-shadow:none !important;
  width: 44px; height: 38px; padding: 6px; margin-left: auto;
  cursor: pointer; line-height:0; z-index: 10002; /* above sheet */
}
.nav-toggle:focus-visible { outline: 2px solid #3d4449; outline-offset: 2px; }
.nav-toggle .navline {
  display:block; width:100%; height:2px; margin:6px 0;
  background:#3d4449 !important; border-radius:2px;
}

/* Make the dropdown a full-width sheet with backdrop */
@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }

  /* Remove desktop underline on mobile */
  #topnav a.active::after { display: none; }

  /* Turn nav into a fixed sheet */
  #topnav.mobile-sheet {
    position: fixed;
    left: 0; right: 0; top: 0;
    transform: translateY(-100%);
    display: flex; flex-direction: column; gap: 14px;
    background: #ffffff;
    padding: 76px 16px 16px;   /* top padding leaves space for header area */
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    z-index: 10001;           /* under the toggle, over content */
    will-change: transform;
    transition: transform .25s ease;
  }

  /* Backdrop behind the sheet */
  .nav-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 10000;
  }

  /* Open state */
  body.nav-open #topnav.mobile-sheet { transform: translateY(0); }
  body.nav-open { overflow: hidden; }        /* lock scroll while open */
}

/* Tidy header spacing on phones so sheet aligns with the red border nicely */
@media (max-width: 736px) {
  #header { padding-top: 1.25rem; padding-bottom: .5rem; }
}
/* Hide top nav on small screens (simple + final) */
@media (max-width: 820px) {
  #topnav { display: none !important; }
  #header { justify-content: flex-start; } /* keep logo aligned left */
}