/* Site-wide base for every tool page, all 12 languages. This is the first
   stylesheet each tool page loads, then: css/lang/{lang}.css (per-language body
   font) → an optional css/categories/{cat}.css → css/tools/{tool}.css (per-tool).
   Tool folders no longer contain a style.css — all tool CSS lives under /css/.
   Defaults set here that later files may override:
   - .card { padding: 16px } — category files bump it to 20px; ip-checker → 48px 24px
   - .card-title { margin-bottom: 12px } — unit-converter overrides to 14px
   Body font-family is deliberately NOT here (it's per-language, in css/lang). */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-size: 14px;
  background: #f5f5f5;
  color: #333;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 32px 16px;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 640px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
}
h1 span { color: #0078d4; }

/* Direct-answer paragraph, sitting between the h1 and .card-row. It exists so the
   first prose on the page states what the tool does — previously the first text an
   extractor met was form labels ("Height", "Weight", "Calculate"), because all the
   explanatory copy lives in .info-box BELOW the tool. Spacing comes from
   .container's flex gap, so this rule is typography only. */
.lead {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  background: #f0f6ff;
  border: 1px solid #c5ddf9;
  border-radius: 8px;
  padding: 16px 20px;
}

.home-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #888; text-decoration: none; }
.home-link:hover { color: #0078d4; }

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-nav {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 12px;
  font-weight: 600;
  color: #0078d4;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%230078d4'/></svg>") no-repeat right 10px center;
  background-size: 10px 6px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 5px 24px 5px 10px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  max-width: 60%;
}
.tool-nav:hover { border-color: #0078d4; }

.card-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.main-col {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.info-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px 24px;
}

.info-block + .info-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.info-block h2 {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.info-block p {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* Related tools */
.related-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.related-link {
  display: inline-block;
  padding: 8px 14px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.related-link:hover {
  background: #f0f6ff;
  border-color: #0078d4;
  color: #0078d4;
}

/* Shared "options" control blocks (checkbox grid + count row), hoisted from
   password/uuid/random-number-generator where they were byte-identical (css-checker Top 2). */
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
.check-item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #0078d4;
  cursor: pointer;
}
.count-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.count-row label { white-space: nowrap; }
.count-row input[type=number] {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  text-align: center;
}

/* Site-wide button-state convention: every "primary action" button darkens to #005fa3
   on hover, every "copy" button turns #107c10 (green) once copied — regardless of which
   tool invented the class name. Grouped here since it's the same declaration repeated
   verbatim under ~10 different selectors across categories. */
.btn-primary:hover,
.btn-calc:hover,
.btn-generate:hover,
.btn-copy:hover,
.btn-copy-all:hover {
  background: #005fa3;
}
.btn-copy.copied,
.btn-copy-all.copied {
  background: #107c10;
}

.side-ad {
  display: none;
  width: 300px;
  height: 600px;
  flex-shrink: 0;
}

@media (min-width: 1300px) {
  .side-ad { display: block; }

  .card-row {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
}