/* =========================
   PrivaTools — Site Styles
   Keep Bootstrap typography defaults; only the logo uses a custom font/style.
   ========================= */

/* ---------- Brand & Bootstrap variable overrides ---------- */
:root {
  /* Brand palette */
  --pt-dark: #0F172A;   /* wordmark dark */
  --pt-blue: #2563EB;   /* brand blue */

  /* Bootstrap primary + links */
  --bs-primary: var(--pt-blue);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--pt-blue);
  --bs-link-hover-color: #1d4ed8; /* blue-700 */
  --bs-link-color-rgb: 37, 99, 235;

  /* Page background (light grey) */
  --bs-body-bg: #f8fafc;        /* soft grey */
  --bs-tertiary-bg: #f8fafc;    /* used by .bg-body-tertiary */

  /* Subtle variants */
  --bs-primary-bg-subtle: #dbeafe;     /* blue-100 */
  --bs-primary-border-subtle: #93c5fd; /* blue-300 */
  --bs-primary-text-emphasis: #1e3a8a; /* blue-900 */
}

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

/* ---------- Optional: font for the LOGO only ----------
   Safe to remove if you don't want to load Manrope locally. */
@font-face{
  font-family: "Manrope";
  src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Navbar / Brand ---------- */
.navbar { border-bottom: 1px solid #e5e7eb; } /* gray-200 */

.brand-logo {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* logo only */
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.35rem;
  line-height: 1;
  display: inline-flex;
  gap: 0;
  text-decoration: none;
}
.brand-logo .priva { color: var(--pt-dark); }
.brand-logo .tools { color: var(--pt-blue); }
.navbar .brand-logo:hover { text-decoration: none; opacity: .95; }

/* ---------- Hero ---------- */
.hero {
  /* keep subtle look; blends with page bg */
  background: linear-gradient(180deg, #f8fafc, #ffffff 60%, #ffffff);
  padding: 3.5rem 0 2rem;
}
.hero .lead { color: #64748b; } /* slate-500 */

/* ---------- Buttons ---------- */
.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #1d4ed8;        /* blue-700 */
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1e40af;       /* blue-800 */
  --bs-btn-active-border-color: #1e40af;
}
.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
}
/* Subtle primary button (if used) */
.btn-primary-subtle{
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
}
.btn-primary-subtle:hover{
  background-color: #c7ddfd;
  border-color: #7fb6fb;
  color: var(--bs-primary-text-emphasis);
}

/* ---------- Sections & headings ---------- */
.section-title { font-weight: 600; font-size: 1.25rem; margin-bottom: .75rem; }

/* ---------- Cards (tool tiles, info blocks) ---------- */
.card.tool-card {
  border: 1px solid #e5e7eb;   /* gray-200 */
  border-radius: 14px;
}
.card.tool-card .bi {
  font-size: 1.25rem;
  color: var(--bs-primary);
}
.tool-card.tool-card--soon { opacity: .75; pointer-events: none; }

/* ---------- Dropzone (shared look) ---------- */
.dropzone{
  border: 2px dashed var(--bs-primary-border-subtle);
  background: var(--bs-primary-bg-subtle);
  border-radius: .75rem;
  padding: 1.25rem;
  text-align: center;
}
.dropzone .bi { font-size: 1.25rem; color: var(--bs-primary); }
.dropzone p { margin-bottom: .5rem; }
.dropzone .d-flex { justify-content: center; } /* center buttons row */
.dropzone .btn + .btn { margin-left: .5rem; }

/* ---------- Tool page helpers ---------- */
.preview{
  max-width: 100%;
  height: auto;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
}
.hidden{ display: none !important; }

/* Align sections on converter page (left dropzone/options with right info cards) */
@media (min-width: 992px){
  .converter-layout > [class*='col-lg-']{ display: flex; flex-direction: column; }
  .converter-layout > [class*='col-lg-'] > *:first-child{ margin-top: 0 !important; }
}

/* ---------- Sticky footer structure ----------
   Requires your layout to wrap content in .page-wrap and put <main> inside it. */
html, body { height: 100%; }
.page-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrap > main,
.page-wrap > .page-main,
.page-wrap > .content { flex: 1 0 auto; }
.page-wrap footer { flex-shrink: 0; }

/* Footer bar */
footer.site-footer {
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}

/* brand-logo already sets the font-size (e.g., 1.35rem) */
.brand-logo { font-size: 1.35rem; }

/* Icon sized relative to the logo text for perfect match */
.brand-icon{
  font-size: 1.2em;          /* ~same visual height as text; tweak 1.15–1.25 */
  line-height: 1;
  color: var(--bs-primary);
  display: inline-block;
  transform: translateY(-0.02em); /* tiny optical nudge */
}

/* ---------- Mega menu ---------- */
/* Make mega dropdown as wide as the navbar container */
.navbar .container { position: relative; }
.navbar .nav-item.dropdown { position: static; }
.dropdown-menu.mega-menu {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  min-width: 100%;
}
.mega-menu a { white-space: normal; overflow: visible; text-overflow: clip; }
.mega-menu .mega-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mega-menu .disabled { cursor: default; }
.mega-menu .disabled .badge-soon { opacity: 1; }

/* Column flow top-to-bottom, then next column */
.mega-menu .mega-columns {
  column-width: 220px;   /* target column width; browser chooses count */
  column-gap: 16px;
}
.mega-menu .mega-section { break-inside: avoid; margin: 4px 6px 10px; }
.mega-menu .mega-title { letter-spacing: .04em; }
.mega-menu .mega-item { break-inside: avoid; padding: 2px 4px; }

/* Unified "SOON" pill badge styling */
.badge-soon {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-text-emphasis);
  border: 1px solid var(--bs-secondary-border-subtle);
  border-radius: 999px;
  padding: .12rem .48rem;
  font-size: .675rem;
  font-weight: 600;
  line-height: 1;
}