/*
 * Guide chrome for Truck & Bus Theory Ireland: breadcrumbs, prose tables, callouts, guide cards,
 * related-guide lists and the end-of-article CTA.
 *
 * GENERATED by scripts/guides/build-guides.mjs — do not edit by hand.
 *
 * This lives in the app's own css directory on purpose. A shared root-level
 * stylesheet 404s on a subdomain-canonical host, because the middleware rewrites
 * /css/... into /<app>/css/...
 */

/* ttp */
.ttp-breadcrumb {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--ttp-text-muted);
}

.ttp-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ttp-breadcrumb li + li::before {
    content: "/";
    margin-right: 8px;
    color: var(--ttp-text-muted);
    opacity: 0.6;
}

.ttp-breadcrumb a {
    color: var(--ttp-text-secondary);
    text-decoration: none;
}

.ttp-breadcrumb a:hover,
.ttp-breadcrumb a:focus {
    color: var(--ttp-cream);
    text-decoration: underline;
}

.ttp-prose table {
    width: 100%;
    margin: 24px 0;
    border-collapse: collapse;
    font-size: 15px;
}

.ttp-prose caption {
    caption-side: bottom;
    padding-top: 10px;
    color: var(--ttp-text-muted);
    font-size: 14px;
    text-align: left;
}

.ttp-prose th,
.ttp-prose td {
    padding: 10px 12px;
    border: 1px solid var(--ttp-border);
    text-align: left;
    vertical-align: top;
}

.ttp-prose thead th {
    background: var(--ttp-night-raised);
    color: var(--ttp-cream);
    font-family: "Space Grotesk", sans-serif;
}

.ttp-prose tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}

.ttp-prose figure {
    margin: 24px 0;
}

.ttp-callout {
    margin: 24px 0;
    padding: 18px 20px;
    border-radius: var(--ttp-radius);
    border: 1px solid var(--ttp-panel-border);
    background: var(--ttp-night-surface);
    color: var(--ttp-text-secondary);
}

.ttp-callout > :first-child {
    margin-top: 0;
}

.ttp-callout > :last-child {
    margin-bottom: 0;
}

.ttp-callout strong {
    color: var(--ttp-accent-soft);
}

.ttp-guide-list,
.ttp-related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ttp-guide-card {
    padding: 24px;
    margin-bottom: 18px;
    border-radius: var(--ttp-radius);
    border: 1px solid var(--ttp-border);
    background: var(--ttp-night-surface);
}

.ttp-guide-card h2 {
    margin: 0 0 8px;
    font-size: 21px;
}

.ttp-guide-card h2 a {
    color: var(--ttp-cream);
    text-decoration: none;
}

.ttp-guide-card h2 a:hover,
.ttp-guide-card h2 a:focus {
    text-decoration: underline;
}

.ttp-guide-card p {
    margin: 0 0 6px;
    color: var(--ttp-text-secondary);
}

.ttp-guide-card .ttp-meta {
    margin: 0;
}

.ttp-related {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--ttp-border);
}

.ttp-related-list a {
    display: block;
    padding: 16px 18px;
    margin-bottom: 12px;
    border-radius: var(--ttp-radius);
    border: 1px solid var(--ttp-border);
    background: var(--ttp-night-surface);
    color: var(--ttp-text-secondary);
    text-decoration: none;
}

.ttp-related-list a:hover,
.ttp-related-list a:focus {
    border-color: var(--ttp-panel-border);
}

.ttp-related-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ttp-cream);
    font-family: "Space Grotesk", sans-serif;
}

.ttp-related-list span {
    font-size: 15px;
}

.ttp-guide-cta {
    margin-top: 48px;
    padding: 28px;
    border-radius: var(--ttp-radius);
    border: 1px solid var(--ttp-panel-border);
    background: var(--ttp-night-raised);
}

.ttp-guide-cta h2 {
    margin-top: 0;
}

.ttp-guide-cta p {
    color: var(--ttp-text-secondary);
}