/* advokatnikancelarpraha.cz, the brass plate look (proposal 060, D4 and "Design
   identity"). 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 {
  --ak-slate: #2f3a48;
  --ak-slate-dark: #212a35;
  --ak-text: #262c33;
  --ak-muted: #5a6270;
  --ak-stone: #efede6;
  --ak-stone-2: #e4e1d8;
  --ak-white: #ffffff;
  --ak-brass: #b8923a;
  --ak-brass-dark: #74560f;
  --ak-brass-light: #ecdcae;
  --ak-line: #cfcabd;
  --ak-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --ak-sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ak-engraved: 'Spectral SC', 'Libre Caslon Text', Georgia, serif;
}

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

/* The inherited directory partials (areas, breadcrumbs, pagination) keep their
   Tailwind colours, recoloured here as 048 and 050 do. */
.ak-body .text-gray-700, .ak-body .text-gray-600, .ak-body .text-gray-500, .ak-body .text-gray-400 { color: var(--ak-muted); }
.ak-body .hover\:text-blue-700:hover { color: var(--ak-slate); }
.ak-body .bg-white { background: var(--ak-white); }
.ak-body .border-gray-200 { border-color: var(--ak-line); }
.ak-body .hover\:border-blue-400:hover { border-color: var(--ak-brass); }
.ak-body .text-xl.font-semibold { font-family: var(--ak-serif); color: var(--ak-slate); font-weight: 700; }

/* Header and nav. */
.ak-header { background: var(--ak-slate); color: var(--ak-white); }
.ak-logo-word { font-family: var(--ak-serif); font-weight: 700; font-size: 18px; color: var(--ak-white); line-height: 1.2; }
.ak-logo-city { color: var(--ak-brass-light); }
.ak-navrow { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.ak-nav { color: var(--ak-white); font-size: 15px; font-weight: 500; white-space: nowrap; }
.ak-nav:hover { color: var(--ak-brass-light); text-decoration: underline; text-underline-offset: 3px; }

/* Type. */
.ak-h1, .ak-h2, .ak-h3 { font-family: var(--ak-serif); color: var(--ak-slate); }
.ak-h1 { font-weight: 700; line-height: 1.15; }
.ak-h2 { font-weight: 700; line-height: 1.25; }
.ak-h3 { font-weight: 400; line-height: 1.3; }
.ak-kicker { font-family: var(--ak-engraved); font-weight: 600; letter-spacing: 0.06em; font-size: 14px; color: var(--ak-muted); }
.ak-note { color: var(--ak-muted); font-size: 15px; }
.ak-label { color: var(--ak-brass-light); font-weight: 600; }
.ak-link, .ak-card a:not(.ak-btn), .ak-table a:not(.ak-btn), main article p a:not(.ak-btn), main article li a:not(.ak-btn) {
  color: var(--ak-brass-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ak-link:hover, .ak-card a:not(.ak-btn):hover { color: var(--ak-slate); }

/* Button. */
.ak-btn {
  display: inline-block;
  background: var(--ak-brass-dark);
  color: var(--ak-white);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 2px;
  text-decoration: none;
}
.ak-btn:hover { background: var(--ak-slate); color: var(--ak-white); }

/* Hero. */
.ak-hero { background: var(--ak-stone); border-bottom: 1px solid var(--ak-line); }

/* The plate, the signature element: brass, an inner rule 4 px in, four screws. Used on
   the hero (as SVG), the top of an entity page and the 404, nowhere else. */
.ak-plate {
  --screw: radial-gradient(circle, var(--ak-slate-dark) 0 3px, transparent 3.5px);
  background:
    var(--screw) 8px 8px / 12px 12px no-repeat,
    var(--screw) calc(100% - 8px) 8px / 12px 12px no-repeat,
    var(--screw) 8px calc(100% - 8px) / 12px 12px no-repeat,
    var(--screw) calc(100% - 8px) calc(100% - 8px) / 12px 12px no-repeat,
    var(--ak-brass);
  outline: 1px solid var(--ak-slate-dark);
  outline-offset: -5px;
  border-radius: 2px;
  color: var(--ak-slate-dark);
  font-family: var(--ak-engraved);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  font-size: 18px;
  padding: 28px 32px;
  overflow-wrap: anywhere;
}
.ak-plate-name { font-size: 22px; line-height: 1.3; margin: 0; font-weight: 600; }
@media (min-width: 768px) { .ak-plate-name { font-size: 28px; } }

/* Cards. */
.ak-cardgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .ak-cardgrid { grid-template-columns: 1fr 1fr; } }
.ak-card {
  display: block;
  background: var(--ak-white);
  border: 1px solid var(--ak-line);
  border-left: 3px solid var(--ak-brass);
  padding: 1rem 1.25rem;
}
.ak-card-name { font-family: var(--ak-serif); font-weight: 700; color: var(--ak-slate); font-size: 18px; line-height: 1.3; }

/* An entity's contact list, one column on a phone. */
.ak-dl { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.ak-dl dt { color: var(--ak-muted); font-size: 15px; }
.ak-dl dd { margin: 0 0 0.6rem; }
@media (min-width: 640px) {
  .ak-dl { grid-template-columns: 8rem 1fr; }
  .ak-dl dd { margin: 0 0 0.4rem; }
}

/* Tables scroll inside their wrapper on a phone. */
.ak-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ak-table { width: 100%; min-width: 32rem; border-collapse: collapse; background: var(--ak-white); }
.ak-table th { background: var(--ak-stone-2); text-align: left; font-weight: 600; padding: 0.5rem 0.75rem; }
.ak-table td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--ak-line); vertical-align: top; }
.ak-num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Footer. Links are styled with :not(.ak-btn), never a bare `.ak-footer a` (044). */
.ak-rule { height: 3px; background: var(--ak-brass); }
.ak-footer { background: var(--ak-slate-dark); color: var(--ak-stone); }
.ak-footer a:not(.ak-btn) { color: var(--ak-brass-light); text-decoration: underline; text-underline-offset: 3px; }