/* spedicnifirmy.cz, the consignment note look (proposal 048, D2 and D3).
   Hand-written, not part of the Tailwind build. Every colour this domain prints lives
   here as a custom property. Tailwind utilities in the templates carry spacing, grid
   and type scale only. Unlayered, so it beats Tailwind's utility layer.
   Square corners everywhere, no drop shadow, no gradient but the copies strip. */

:root {
  --sf-red: #b3261e;
  --sf-red-dark: #8f1d17;
  --sf-ink: #1c2330;
  --sf-text: #222a35;
  --sf-muted: #5b6370;
  --sf-paper: #f6f5f1;
  --sf-paper-2: #eceae3;
  --sf-white: #ffffff;
  --sf-line: #c9c5b9;
  --sf-pink: #f6dcd8;
  --sf-copy-blue: #1f5aa8;
  --sf-copy-green: #2c7a4b;
  --sf-head: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --sf-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sf-mono: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
}

.sf-body {
  background: var(--sf-paper);
  color: var(--sf-text);
  font-family: var(--sf-sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* The global demand-form.twig and the inherited directory partials print these,
   recoloured here (048, "How the directory pages take the look"). */
.sf-body .text-gray-900 { color: var(--sf-ink); }
.sf-body .text-gray-700 { color: var(--sf-text); }
.sf-body .text-gray-600,
.sf-body .text-gray-500,
.sf-body .text-gray-400 { color: var(--sf-muted); }
.sf-body .hover\:text-blue-700:hover { color: var(--sf-red-dark); }
.sf-body main h1.text-gray-900 { font-family: var(--sf-head); font-weight: 800; letter-spacing: -0.01em; }

/* Header and nav */
.sf-header {
  background: var(--sf-red);
  color: var(--sf-white);
}
.sf-logo { color: var(--sf-white); text-decoration: none; }
.sf-logo-word {
  font-family: var(--sf-head);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  color: var(--sf-white);
}
.sf-logo-word span + span { opacity: 0.7; }
.sf-navrow {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sf-navrow::-webkit-scrollbar { display: none; }
.sf-navrow > div { flex-wrap: nowrap; }
.sf-nav {
  font-size: 15px;
  font-weight: 600;
  color: var(--sf-white);
  text-decoration: none;
  white-space: nowrap;
}
.sf-nav:hover, .sf-nav:focus-visible { color: var(--sf-white); text-decoration: underline; text-underline-offset: 3px; }

/* The four copies of a waybill, under the header and on top of the footer */
.sf-copies {
  height: 6px;
  background: linear-gradient(90deg, #b3261e 0 25%, #1f5aa8 25% 50%, #2c7a4b 50% 75%, #1c2330 75% 100%);
}

/* Buttons */
.sf-btn {
  display: inline-block;
  background: var(--sf-red);
  color: var(--sf-white);
  border: 2px solid var(--sf-red-dark);
  border-radius: 0;
  font-weight: 600;
  padding: 14px 28px;
  text-decoration: none;
  white-space: nowrap;
}
.sf-btn:hover, .sf-btn:focus-visible { background: var(--sf-red-dark); color: var(--sf-white); }
.sf-btn-invert {
  background: var(--sf-white);
  color: var(--sf-red-dark);
  border-color: var(--sf-white);
  padding: 8px 16px;
  font-size: 15px;
}
.sf-btn-invert:hover, .sf-btn-invert:focus-visible { background: var(--sf-pink); color: var(--sf-red-dark); border-color: var(--sf-pink); }

/* Hero */
.sf-hero {
  background: var(--sf-paper);
  border-bottom: 1.5px solid var(--sf-ink);
}
.sf-kicker {
  font-family: var(--sf-mono);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sf-red-dark);
}

/* Headings */
.sf-h1, .sf-h2, .sf-h3 {
  font-family: var(--sf-head);
  color: var(--sf-ink);
  letter-spacing: -0.01em;
}
.sf-h1 { font-weight: 800; line-height: 1.1; font-size: 2rem; }
.sf-h2 { font-weight: 700; line-height: 1.2; font-size: 1.5rem; }
.sf-h3 { font-weight: 600; line-height: 1.25; font-size: 1.2rem; }
@media (min-width: 768px) {
  .sf-h1 { font-size: 2.75rem; }
  .sf-h2 { font-size: 1.75rem; }
}

/* The numbered box, a cell of a consignment note */
.sf-box {
  background: var(--sf-white);
  border: 1.5px solid var(--sf-ink);
  border-radius: 0;
  padding: 14px 20px 20px;
}
.sf-box-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--sf-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sf-muted);
}
.sf-box-no {
  font-family: var(--sf-mono);
  font-weight: 500;
  color: var(--sf-red);
  font-variant-numeric: tabular-nums;
}
.sf-box-cta { background: var(--sf-pink); }
.sf-boxrow {
  display: grid;
  gap: 0;
}
.sf-boxrow > * { margin: -0.75px; }
@media (min-width: 768px) {
  .sf-boxrow { grid-template-columns: repeat(var(--sf-cols, 3), minmax(0, 1fr)); }
}
a.sf-box {
  display: block;
  color: var(--sf-ink);
  text-decoration: none;
}
a.sf-box:hover, a.sf-box:focus-visible { background: var(--sf-paper-2); }
.sf-box a:not(.sf-btn), .sf-table a { color: var(--sf-red-dark); }

/* Type helpers */
.sf-mono {
  font-family: var(--sf-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sf-tag {
  display: inline-block;
  font-family: var(--sf-mono);
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid var(--sf-ink);
  border-radius: 0;
  padding: 2px 8px;
  background: var(--sf-white);
  color: var(--sf-ink);
}
.sf-note { color: var(--sf-muted); font-size: 15px; }
.sf-link {
  color: var(--sf-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sf-link:hover, .sf-link:focus-visible { color: var(--sf-red-dark); }
.sf-list { list-style: disc; padding-left: 1.25rem; }
.sf-list li + li { margin-top: 0.4rem; }
.sf-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Tables scroll inside their wrapper, the page never scrolls sideways */
.sf-tablewrap { overflow-x: auto; }
.sf-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  background: var(--sf-white);
}
.sf-table th {
  background: var(--sf-paper-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  color: var(--sf-ink);
}
.sf-table th, .sf-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sf-line);
  vertical-align: top;
}
.sf-table td.sf-num { white-space: nowrap; font-family: var(--sf-mono); font-weight: 500; }

/* Footer */
.sf-footer {
  background: var(--sf-ink);
  color: rgba(246, 245, 241, 0.85);
}
.sf-footer a:not(.sf-btn) { color: var(--sf-paper); text-decoration: underline; text-underline-offset: 3px; }
.sf-footer a:not(.sf-btn):hover, .sf-footer a:not(.sf-btn):focus-visible { color: var(--sf-pink); }