/* osobnistrazce.cz, a site plan on paper (proposal 049, 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. */

:root {
  --os-paper: #f3f1ec;
  --os-card: #ffffff;
  --os-stone: #e4e0d7;
  --os-line: #c9c3b6;
  --os-ink: #1c2227;
  --os-muted: #55606a;
  --os-cobalt: #1f4e8c;
  --os-cobalt-dark: #163a69;
  --os-slate: #2c3640;
  --os-brass: #d2ab55;
  --os-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --os-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* The global demand-form.twig prints these two, recoloured here (049, Design identity). */
.os-body .text-gray-900 { color: var(--os-ink); }
.os-body .text-gray-700 { color: var(--os-ink); }
.os-body main h1.text-gray-900 { font-family: var(--os-display); letter-spacing: -0.01em; }

/* Header and nav */
.os-header {
  background: var(--os-card);
  color: var(--os-ink);
  border-bottom: 1px solid var(--os-line);
}
.os-logo { color: var(--os-ink); text-decoration: none; }
.os-header .os-mark { color: var(--os-cobalt); }
.os-footer .os-mark { color: var(--os-brass); }
.os-mark .os-mark-disc { fill: var(--os-ink); }
.os-footer .os-mark .os-mark-disc { fill: var(--os-paper); }
.os-logo-word {
  font-family: var(--os-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.os-navrow {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.os-navrow::-webkit-scrollbar { display: none; }
.os-nav {
  font-size: 16px;
  font-weight: 500;
  color: var(--os-ink);
  text-decoration: none;
  white-space: nowrap;
}
.os-nav:hover, .os-nav:focus-visible { color: var(--os-cobalt); }

/* Buttons: white on cobalt */
.os-btn {
  display: inline-block;
  background: var(--os-cobalt);
  color: #ffffff;
  border-radius: 2px;
  font-weight: 600;
  padding: 14px 28px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.os-btn:hover, .os-btn:focus-visible { background: var(--os-cobalt-dark); color: #ffffff; }
.os-btn-small {
  padding: 8px 16px;
  font-size: 15px;
}

/* Hero */
.os-hero {
  background: var(--os-stone);
  border-bottom: 3px solid var(--os-ink);
}
.os-kicker {
  font-family: var(--os-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--os-cobalt);
}

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

/* The perimeter in the hero */
.os-plan { width: 100%; max-width: 320px; margin: 0 auto; display: block; height: auto; }
@media (min-width: 768px) {
  .os-plan { max-width: 100%; }
}

/* Cards */
.os-card {
  background: var(--os-card);
  border: 1px solid var(--os-line);
  border-radius: 2px;
  padding: 20px;
}
a.os-card { display: block; color: var(--os-ink); text-decoration: none; }
a.os-card:hover, a.os-card:focus-visible { border-color: var(--os-cobalt); color: var(--os-cobalt-dark); }

/* The signature: corner brackets that mark what is inside the line */
.os-frame, .os-frame-dark {
  --os-b: var(--os-cobalt);
  background-color: var(--os-card);
  background-image:
    linear-gradient(var(--os-b), var(--os-b)), linear-gradient(var(--os-b), var(--os-b)),
    linear-gradient(var(--os-b), var(--os-b)), linear-gradient(var(--os-b), var(--os-b)),
    linear-gradient(var(--os-b), var(--os-b)), linear-gradient(var(--os-b), var(--os-b)),
    linear-gradient(var(--os-b), var(--os-b)), linear-gradient(var(--os-b), var(--os-b));
  background-size:
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    18px 2px, 2px 18px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
  border-radius: 2px;
  padding: 22px;
}
.os-frame-dark {
  --os-b: var(--os-brass);
  background-color: var(--os-slate);
}

.os-step {
  display: block;
  font-family: var(--os-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--os-cobalt);
}

/* Tables scroll inside their wrapper, the page never scrolls sideways */
.os-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.os-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--os-card);
}
.os-table th {
  background: var(--os-stone);
  font-family: var(--os-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--os-ink);
}
.os-table th, .os-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--os-line);
  vertical-align: top;
}
.os-table td.os-num {
  white-space: nowrap;
  font-weight: 700;
  font-family: var(--os-display);
  font-variant-numeric: tabular-nums;
}
.os-table td.os-num-wrap { white-space: normal; min-width: 14rem; }
.os-table td:first-child { min-width: 10rem; }
.os-table td:last-child { min-width: 14rem; }
.os-table a { color: var(--os-cobalt); text-decoration: underline; text-underline-offset: 3px; }
.os-table a:hover { color: var(--os-cobalt-dark); }

/* Notes, links, lists */
.os-note { color: var(--os-muted); font-size: 15px; }
.os-link {
  color: var(--os-cobalt);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.os-link:hover, .os-link:focus-visible { color: var(--os-cobalt-dark); }
.os-prose a:not(.os-btn):not(.os-card) { color: var(--os-cobalt); text-decoration: underline; text-underline-offset: 3px; }
.os-prose a:not(.os-btn):not(.os-card):hover { color: var(--os-cobalt-dark); }
.os-list { list-style: disc; padding-left: 1.25rem; }
.os-list li + li { margin-top: 0.4rem; }
.os-steps { list-style: decimal; padding-left: 1.5rem; }
.os-steps li + li { margin-top: 0.4rem; }
.os-steps li::marker { font-family: var(--os-display); font-weight: 700; color: var(--os-cobalt); }
.os-quote {
  border-left: 2px solid var(--os-cobalt);
  padding-left: 1rem;
  font-style: normal;
}
.os-label {
  font-family: var(--os-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Footer, the one dark surface */
.os-footer {
  background: var(--os-slate);
  color: rgba(243, 241, 236, 0.85);
}
.os-footer .os-label { color: var(--os-brass); }
.os-footer .os-logo-word { color: var(--os-paper); }
.os-footer a:not(.os-btn) { color: var(--os-paper); text-decoration: none; }
.os-footer a:not(.os-btn):hover, .os-footer a:not(.os-btn):focus-visible { color: var(--os-brass); text-decoration: underline; }