/* pultcentralniochrany.cz, the yellow plate on the gate (proposal 054, 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.
   Yellow is a ground, the text of an ink button or a mark on ink, never text on a light
   ground. Every pair printed passes 4.5 (contrast table in the proposal). */

:root {
  --pc-paper: #f6f6f3;
  --pc-card: #ffffff;
  --pc-yellow: #ffd400;
  --pc-soft: #fff4b8;
  --pc-ink: #15171a;
  --pc-muted: #565b62;
  --pc-line: #d5d5cf;
  --pc-asphalt: #24272b;
  --pc-fog: #c9ccd1;
  --pc-black: #000000;
  --pc-display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --pc-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

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

/* Header and nav */
.pc-header {
  background: var(--pc-card);
  color: var(--pc-ink);
  border-bottom: 3px solid var(--pc-ink);
}
.pc-logo { color: var(--pc-ink); text-decoration: none; }
.pc-footer .pc-mark rect { stroke: var(--pc-yellow); }
.pc-logo-word {
  font-family: var(--pc-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pc-navrow {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pc-navrow::-webkit-scrollbar { display: none; }
.pc-nav {
  font-size: 16px;
  font-weight: 500;
  color: var(--pc-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 8px;
}
.pc-nav:hover, .pc-nav:focus-visible { background: var(--pc-yellow); color: var(--pc-ink); }

/* Buttons: yellow on ink, black on hover */
.pc-btn {
  display: inline-block;
  background: var(--pc-ink);
  color: var(--pc-yellow);
  border-radius: 8px;
  font-family: var(--pc-display);
  font-weight: 700;
  padding: 14px 28px;
  line-height: 1.3;
  text-decoration: none;
  max-width: 100%;
  text-align: center;
}
.pc-btn:hover, .pc-btn:focus-visible { background: var(--pc-black); color: var(--pc-yellow); }
.pc-btn-small {
  padding: 8px 16px;
  font-size: 15px;
  white-space: nowrap;
}

/* Hero */
.pc-hero {
  background: var(--pc-yellow);
  color: var(--pc-ink);
  border-bottom: 3px solid var(--pc-ink);
}
.pc-tag {
  display: inline-block;
  background: var(--pc-ink);
  color: var(--pc-yellow);
  font-family: var(--pc-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
}

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

/* The signal path in the hero */
.pc-signal { width: 100%; max-width: 360px; margin: 0 auto; }
.pc-signal svg { width: 100%; height: auto; display: block; }
.pc-signal-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
  font-family: var(--pc-display);
  font-weight: 600;
  font-size: 13px;
  margin-top: 6px;
}

/* Cards */
.pc-card {
  background: var(--pc-card);
  border: 2px solid var(--pc-ink);
  border-radius: 8px;
  padding: 20px;
}
a.pc-card { display: block; color: var(--pc-ink); text-decoration: none; font-weight: 500; }
a.pc-card:hover, a.pc-card:focus-visible { background: var(--pc-yellow); }

/* The signature: the printed plate with its double edge */
.pc-plate {
  background: var(--pc-yellow);
  color: var(--pc-ink);
  border: 3px solid var(--pc-ink);
  border-radius: 12px;
  outline: 1px solid var(--pc-ink);
  outline-offset: -8px;
  padding: 28px;
}

.pc-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--pc-yellow);
  border: 2px solid var(--pc-ink);
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--pc-ink);
}

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

/* Notes, links, lists */
.pc-note { color: var(--pc-muted); font-size: 15px; }
/* Muted is never set on yellow (4.78), the hero and the plates use ink only. */
.pc-hero .pc-note, .pc-plate .pc-note { color: var(--pc-ink); }
.pc-box {
  background: var(--pc-soft);
  border-radius: 8px;
  padding: 16px 20px;
}
.pc-box .pc-note { color: var(--pc-muted); }
.pc-link, .pc-prose a:not(.pc-btn):not(.pc-card) {
  color: var(--pc-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.pc-link:hover, .pc-link:focus-visible,
.pc-prose a:not(.pc-btn):not(.pc-card):hover { background: var(--pc-yellow); }
.pc-list { list-style: none; padding-left: 0; }
.pc-list li { position: relative; padding-left: 1.4rem; }
.pc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--pc-ink);
}
.pc-list li + li { margin-top: 0.45rem; }
.pc-quote {
  border-left: 3px solid var(--pc-ink);
  padding-left: 1rem;
  font-style: normal;
}
.pc-label {
  font-family: var(--pc-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Footer: asphalt under a yellow rule */
.pc-footer {
  background: var(--pc-asphalt);
  color: var(--pc-paper);
  border-top: 6px solid var(--pc-yellow);
}
.pc-footer .pc-label { color: var(--pc-paper); }
.pc-footer .pc-fine, .pc-footer .pc-fine.pc-label { color: var(--pc-fog); }
.pc-footer .pc-logo-word { color: var(--pc-paper); }
.pc-footer a:not(.pc-btn) { color: var(--pc-paper); text-decoration: underline; text-underline-offset: 3px; }
.pc-footer a:not(.pc-btn):hover, .pc-footer a:not(.pc-btn):focus-visible { color: var(--pc-yellow); }
.pc-footer a.pc-logo { text-decoration: none; }