/* layout.css - Complete Responsive Layouts for Homepage & All Tool Pages */

/* HEADER */
.header {
  position: sticky;
  top: 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  z-index: var(--z-header, 1000);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0F172A;
  flex-shrink: 0;
}

.logo-icon-badge {
  width: 38px;
  height: 38px;
  background: #E52B2F;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.5px;
  box-shadow: 0 3px 8px rgba(229, 43, 47, 0.28);
}

.logo-text-group {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  color: #0F172A;
}

.logo-subtitle {
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  list-style: none;
}

.nav-link {
  font-weight: 500;
  color: #334155;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.nav-link:hover {
  color: #E52B2F;
  background-color: #F8FAFC;
}

.nav-link .caret {
  font-size: 9px;
  color: #94A3B8;
  transition: transform 0.15s ease;
}

.nav-item:hover .nav-link .caret {
  transform: rotate(180deg);
  color: #E52B2F;
}

/* MEGA DROPDOWN */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background-color: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
  animation: fadeIn 0.15s ease;
}

.nav-item:hover .nav-dropdown {
  display: flex;
}

.dropdown-tool-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #1E293B;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.dropdown-tool-item:hover {
  background-color: #F1F5F9;
  color: #E52B2F;
}

/* HEADER ACTIONS */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-search-wrap {
  position: relative;
  width: 220px;
  flex-shrink: 0;
}

.header-search-input {
  width: 100%;
  padding: 8px 36px 8px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  font-size: 13px;
  color: #1E293B;
  outline: none;
  transition: all 0.2s ease;
}

.header-search-input:focus {
  border-color: #E52B2F;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px #FEE2E2;
}

.header-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  pointer-events: none;
  font-size: 13px;
}

.theme-toggle-btn {
  background: transparent;
  border: 1px solid #E2E8F0;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  color: #1E293B;
  transition: all 0.15s ease;
}

.theme-toggle-btn:hover {
  background-color: #F1F5F9;
  border-color: #CBD5E1;
}

.lang-btn {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  padding: 6px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mobile-menu-toggle {
  display: none;
  font-size: 22px;
  background: none;
  border: none;
  color: #1E293B;
  cursor: pointer;
}

/* ========================================================= */
/* HOMEPAGE LAYOUT                                           */
/* ========================================================= */
.home-page {
  padding: 24px 0 60px 0;
  background-color: #F8FAFC;
}

.home-layout {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}

.home-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.home-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hero-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.hero-header {
  margin-bottom: 24px;
}

.hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.15;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
}

.hero-title .highlight {
  color: #E52B2F;
}

.hero-desc {
  font-size: 15px;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

.hero-body-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: center;
}

.hero-dropzone-box {
  background: #F8FAFC;
  border: 2px dashed #93C5FD;
  border-radius: 14px;
  padding: 32px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.hero-dropzone-box:hover, .hero-dropzone-box.drag-over {
  border-color: #E52B2F;
  background: #FEF2F2;
}

.dropzone-cloud-icon {
  width: 52px;
  height: 52px;
  color: #E52B2F;
  margin-bottom: 10px;
}

.dropzone-main-text {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 2px;
}

.dropzone-or {
  font-size: 13px;
  color: #64748B;
  margin: 4px 0 10px 0;
}

.choose-files-btn {
  background: #E52B2F;
  color: #FFFFFF;
  border: none;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(229, 43, 47, 0.25);
  transition: all 0.15s ease;
}

.choose-files-btn:hover {
  background: #C91F24;
  transform: translateY(-1px);
}

.hero-privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: #64748B;
  margin-top: 14px;
}

/* HERO LAPTOP ILLUSTRATION */
.hero-illustration-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

.hero-illustration-canvas {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 240px;
}

.orbit-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.laptop-mockup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: 220px;
  height: 138px;
  background: #334155;
  border-radius: 10px 10px 0 0;
  padding: 7px 7px 0 7px;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.12);
  z-index: 2;
}

.laptop-screen {
  background: #FFFFFF;
  width: 100%;
  height: 100%;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.laptop-screen-header {
  position: absolute;
  top: 5px;
  left: 6px;
  display: flex;
  gap: 3px;
}

.dot-red, .dot-yellow, .dot-green {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.dot-red { background: #EF4444; }
.dot-yellow { background: #F59E0B; }
.dot-green { background: #10B981; }

.screen-pdf-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

.pdf-page-icon {
  width: 32px;
  height: 42px;
  background: #EF4444;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.3);
}

.screen-doc-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 56px;
}

.doc-line {
  height: 4px;
  background: #E2E8F0;
  border-radius: 2px;
}

.laptop-base {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 254px;
  height: 8px;
  background: #1E293B;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  z-index: 3;
}

.float-badge {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 16px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
  z-index: 4;
  animation: floatAnim 4s ease-in-out infinite;
}

.badge-green { background: #10B981; top: 12px; left: 70px; animation-delay: 0s; }
.badge-orange { background: #F59E0B; top: 24px; right: 35px; animation-delay: 1s; }
.badge-blue { background: #3B82F6; bottom: 60px; left: 8px; animation-delay: 2s; }
.badge-purple { background: #8B5CF6; bottom: 65px; right: 12px; animation-delay: 3s; }

@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.all-tools-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.all-tools-header {
  font-size: 20px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 18px;
}

/* minmax(0, 1fr), not 1fr: a 1fr track is at least as wide as its longest unbreakable
   line, and the tool names here do not wrap (they end in an ellipsis). With plain 1fr the
   last column stood outside the card at 1280px, and translated pages scrolled sideways. */
.all-tools-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.category-column {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 10px;
  transition: border-color 0.15s ease;
}

.category-column:hover { border-color: #CBD5E1; }

.category-column-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #F1F5F9;
}

.cat-dot { width: 7px; height: 7px; border-radius: 50%; }
.cat-dot-blue { background: #3B82F6; }
.cat-dot-green { background: #10B981; }
.cat-dot-orange { background: #F59E0B; }
.cat-dot-purple { background: #8B5CF6; }
.cat-dot-teal { background: #06B6D4; }

.tool-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}

.tool-list-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 6px;
  text-decoration: none;
  color: #1E293B;
  background: transparent;
  transition: all 0.15s ease;
}

.tool-list-item:hover {
  background: #F8FAFC;
  transform: translateX(2px);
}

.item-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.item-text-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex-grow: 1;
}

.item-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc {
  font-size: 9.5px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-arrow {
  font-size: 11px;
  color: #CBD5E1;
  flex-shrink: 0;
}

.category-view-all {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748B;
  text-decoration: none;
  transition: color 0.15s ease;
}

.category-view-all:hover { color: #E52B2F; }

.feature-badges-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.feature-badge-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.feature-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.feature-badge-text { display: flex; flex-direction: column; }
.feature-badge-title { font-size: 13px; font-weight: 700; color: #0F172A; }
.feature-badge-desc { font-size: 11px; color: #64748B; line-height: 1.3; }

.ad-slot-card {
  background: #FFF1F2;
  border: 1px solid #FFE4E6;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ad-slot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94A3B8;
  margin-bottom: 8px;
}

.ad-slot-banner {
  color: #E11D48;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-popular-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.sidebar-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  color: #0F172A;
}

.sidebar-view-all { font-size: 12px; font-weight: 600; color: #2563EB; text-decoration: none; }

.popular-tools-list { display: flex; flex-direction: column; gap: 8px; }

.popular-tool-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  text-decoration: none;
  color: #1E293B;
  transition: all 0.15s ease;
}

.popular-tool-item:hover {
  border-color: #E52B2F;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}

.pop-icon-box {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #FFFFFF;
  flex-shrink: 0;
}

.pop-text-group { display: flex; flex-direction: column; flex-grow: 1; }
.pop-title { font-size: 12px; font-weight: 700; color: #0F172A; }
.pop-desc { font-size: 10px; color: #64748B; }
.pop-arrow { font-size: 12px; color: #94A3B8; }

/* ========================================================= */
/* TOOL PAGE LAYOUT (FIXED FOR ALL 40+ TOOLS)                */
/* ========================================================= */
.tool-page {
  padding: 40px 0 80px 0;
  background-color: #F8FAFC;
  min-height: calc(100vh - 140px);
}

.tool-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

.tool-main {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  min-width: 0;
}

.tool-header {
  text-align: center;
  margin-bottom: 28px;
}

.tool-header .tool-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.tool-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
}

.tool-header .tool-description {
  font-size: 15px;
  color: #64748B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* The date the page was last checked against its script (static HTML after the FAQ, one
   translation unit). */
.tool-reviewed {
  font-size: 13px;
  color: #64748B;
  margin: 28px 0 0;
  line-height: 1.5;
}

/* Phones: on a first visit the cookie banner sits over the bottom of the screen, so the
   page starts closer to the header and the decorative tool icon is left out. That keeps
   the Choose Files button above the banner on common phone sizes. */
@media (max-width: 640px) {
  .tool-page { padding-top: 16px; }
  .tool-header { margin-bottom: 16px; }
  .tool-header .tool-icon { display: none; }
}

.tool-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.related-tools {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.related-tools h3 {
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F5F9;
}

.related-tools ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.related-tools ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}

.related-tools ul li a:hover {
  background: #F8FAFC;
  color: #E52B2F;
  transform: translateX(2px);
}

.tool-info {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid #F1F5F9;
}

.tool-info h2 {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 12px;
}

.tool-info p {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 16px;
}

.steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

/* A block, not a flex row: as flex items, the <strong> button names inside a step became
   separate columns that could not wrap, which pushed tool pages wider than a phone. */
.step {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  font-weight: 500;
  background: #F8FAFC;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #E52B2F;
}

/* CONTENT & LEGAL PAGES */
.content-page {
  max-width: 840px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

/* DARK THEME. The tool panel and the content panel keep their white background (above),
   and most text in them has fixed dark colours. Text that takes a token colour instead
   (the privacy line, the current breadcrumb, a guide's lede, a table cell) turned light
   on white. Inside these panels the tokens, and the older alias names that about and
   contact use, get their light values back, so everything in them reads as in the light
   theme. Keep this list in step with [data-theme='dark'] in variables.css. */
[data-theme='dark'] .tool-main,
[data-theme='dark'] .content-page {
  --color-bg: #F7F9FC;
  --color-card: #FFFFFF;
  --color-surface: #F1F5F9;
  --color-text: #111827;
  --color-secondary: #64748B;
  --color-border: #E5E7EB;
  --color-primary-light: #FEE2E2;
  --primary-light: #FEE2E2;
  --bg-light: #F1F5F9;
  --border-color: #E5E7EB;
  --text-color: #111827;
  --text-color-light: #64748B;
  color: #111827;
}

.content-page h1 { font-size: 32px; font-weight: 800; color: #0F172A; margin-bottom: 20px; }
.content-page h2 { font-size: 20px; font-weight: 700; color: #1E293B; margin: 24px 0 10px 0; }
.content-page p { font-size: 15px; color: #475569; line-height: 1.7; margin-bottom: 14px; }
.content-page ul { margin: 12px 0 20px 24px; color: #475569; line-height: 1.6; }

/* FOOTER */
.footer {
  background: var(--color-card, #FFFFFF);
  border-top: 1px solid var(--color-border, #E2E8F0);
  margin-top: 40px;
}

.footer-top {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 28px 24px;
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(160px, 1fr));
  gap: 32px 40px;
  align-items: start;
}

.footer-brand .header-logo { display: inline-flex; }
/* The logo's colours are fixed for the white header; the footer follows the theme. */
[data-theme='dark'] .footer .logo-title { color: var(--color-text); }
[data-theme='dark'] .footer .logo-subtitle { color: var(--color-secondary); }

.footer-tagline {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-secondary, #64748B);
  margin: 14px 0 0 0;
  max-width: 320px;
}

.footer-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #0F172A);
  margin: 0 0 12px 0;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.footer-col a {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-secondary, #475569);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover { color: var(--color-primary, #E52B2F); }

.footer-bottom { border-top: 1px solid var(--color-border, #E2E8F0); }

.footer-bottom-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 24px;
  /* Room for the back-to-top button, which sits over this corner at the end of a page;
     on a window wide enough for the button to clear the bar, the usual 24px. */
  padding-right: clamp(24px, calc(76px - (100vw - 1400px) / 2), 76px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 12px;
  color: var(--color-secondary, #64748B); /* the muted token is 2.6:1 on white */
}

/* RESPONSIVENESS */
/* Column counts are chosen so that no tool name is cut short (the descriptions may be).
   Five columns are 184px each once the layout reaches its full width at 1440px, which
   fits every English name; the translated names are longer and keep three columns. With
   the 310px sidebar beside it, three columns fit every language from 1200px. */
@media (max-width: 1439px) {
  .all-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  html:not([lang^="en"]) .all-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
  .all-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .home-layout { grid-template-columns: 1fr; }
  .tool-page-layout { grid-template-columns: 1fr; }
  .hero-body-grid { grid-template-columns: 1fr; }
  .feature-badges-row { grid-template-columns: repeat(2, 1fr); }
  .all-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .header-nav, .header-search-wrap { display: none; }
  .mobile-menu-toggle { display: block; }
  .all-tools-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-badges-row { grid-template-columns: 1fr; }
  .tool-main { padding: 24px 16px; }
}

/* Header and footer at tablet and small-laptop widths. The full nav plus search plus
   buttons needs about 1180px; below that the page used to scroll sideways. */
@media (max-width: 1180px) {
  .lang-menu { display: none; }
  .header-search-wrap { width: 160px; }
  .nav-link { padding: 8px 8px; font-size: 13px; }
}

@media (max-width: 992px) {
  .header-nav, .header-search-wrap { display: none; }
  .mobile-menu-toggle { display: block; }
  /* The row now holds only the logo and the buttons, so the logo gives way when it does
     not fit: a translated subtitle ("Herramientas PDF gratuitas en el navegador", 232px)
     pushed the menu button off a 360px screen. It wraps onto a second line instead.
     Above 992px the logo keeps its width, which common.js relies on to measure the nav. */
  .header .header-logo { flex-shrink: 1; min-width: 0; }
  .header .logo-icon-badge { flex-shrink: 0; }
  .header .logo-text-group { min-width: 0; }
  .header .logo-subtitle { line-height: 1.25; }
  .header .header-actions { flex-shrink: 0; }
  /* opened by the menu button (common.js toggles .nav-open) */
  .header-nav.nav-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 69px;
    left: 0;
    width: 100%;
    background: #FFFFFF; /* like the header itself, in both themes: the links are dark */
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 69px);
    overflow-y: auto;
  }
}

/* Translated nav labels are longer than the English ones, so above 992px the nav can
   still need more than one row. common.js then sets .header-compact: the menu button
   layout from below 992px, keeping the search box, which fits once the nav is gone.
   The gap keeps the nav from touching the search box before it counts as too wide. */
@media (min-width: 993px) {
  .header-inner { gap: 16px; }
}
.header-compact .header-nav { display: none; }
.header-compact .header-search-wrap { width: 220px; }
.header-compact .mobile-menu-toggle { display: block; }
.header-compact .header-nav.nav-open {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 69px;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  max-height: calc(100vh - 69px);
  overflow-y: auto;
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; padding-top: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; }
}

/* LANGUAGES (common.js). The header menu lists this page in every language; below
   1180px it is hidden and the same links appear in the opened mobile menu and in the
   footer. .lang-suggest is the bar offered on English pages to visitors whose browser
   prefers another language we have. */
.lang-menu { position: relative; }
.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1000;
}
.lang-list[hidden] { display: none; }
.lang-link {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #1E293B;
  text-decoration: none;
}
.lang-link:hover, .lang-link:focus-visible { background: #F1F5F9; }
.lang-link[aria-current] { color: #E52B2F; font-weight: 700; }

.nav-lang { display: none; }
.header-nav.nav-open .nav-lang { display: block; border-top: 1px solid #E2E8F0; margin-top: 8px; padding-top: 12px; }
.nav-lang-label { font-size: 12px; font-weight: 700; color: #64748B; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px 0; }
.nav-lang-links { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-lang-link {
  padding: 6px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-size: 13px;
  color: #1E293B;
  text-decoration: none;
}
.nav-lang-link[aria-current] { border-color: #E52B2F; color: #E52B2F; font-weight: 700; }

.footer-langs {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 20px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--color-secondary, #64748B);
}
.footer-langs-label { font-weight: 700; color: var(--color-text, #0F172A); }
.footer-lang-link { color: var(--color-secondary, #475569); text-decoration: none; }
.footer-lang-link:hover { color: var(--color-primary, #E52B2F); }
.footer-lang-link[aria-current] { color: var(--color-text, #0F172A); font-weight: 700; }

.lang-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 10px 44px 10px 16px;
  position: relative;
  background: #EFF6FF;
  border-bottom: 1px solid #BFDBFE;
  color: #1E3A8A;
  font-size: 14px;
  text-align: center;
}
.lang-suggest a { color: #1D4ED8; font-weight: 700; }
.lang-suggest-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #1E3A8A;
  cursor: pointer;
}

/* Back to top. common.js adds this button to every page and gives it .visible after
   300px of scroll. Without these rules it sat unstyled at the bottom left of the page. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: #0F172A;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.15s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover {
  background: #E52B2F;
}
.back-to-top:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}