/* ==========================================================================
   SafetySign.com blog — Brimar house brand
   Palette and typography are the Brimar tokens, identical to
   Brimar-OS/frontend/src/theme.ts. See theme-assets/DESIGN-SPEC.md in the
   brimar-blog-migration repo for where they came from.
   ========================================================================== */

/* --- Fonts -----------------------------------------------------------------
   Fira Sans, self-hosted (latin subset) rather than loaded from Google, so
   there is no third-party request on pages whose Core Web Vitals feed into
   rankings. The HubSpot blog also used Source Serif Pro and Montserrat as
   secondary faces; they were doing very little, so this theme is single-family
   on purpose. Add them back here if that turns out to be wrong.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/fira-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/fira-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/fira-sans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/fira-sans-700.woff2') format('woff2');
}

/* --- Tokens --------------------------------------------------------------- */
:root {
    --brand: #175892;
    --brand-dark: #113e65;
    --brand-light: #67a8e2;

    --ink: #231f20;
    --ink-muted: #444444;
    --ink-faint: #736f70;

    --surface: #ffffff;
    --surface-sunk: #f4f6f8;
    --border: #e2e6ea;

    --font: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --wrap: 1200px;
    --wrap-narrow: 720px;
    --gutter: 24px;
    --radius: 6px;

    --shadow: 0 1px 2px rgba(35, 31, 32, .06), 0 4px 12px rgba(35, 31, 32, .06);
    --shadow-lift: 0 2px 4px rgba(35, 31, 32, .08), 0 12px 28px rgba(35, 31, 32, .12);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    color-scheme: light;
    -webkit-text-size-adjust: 100%;
}

/* --gh-font-body / --gh-font-heading are injected by Ghost when a font is
   picked in Settings → Design & branding → Typography. Reading them here is
   how a theme opts in to that picker; Fira Sans stays the fallback, so the
   brand holds unless someone deliberately changes it in Admin. */
body {
    margin: 0;
    font-family: var(--gh-font-body, var(--font));
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--gh-font-heading, var(--font));
    line-height: 1.2;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
}

:focus-visible {
    outline: 3px solid var(--brand-light);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 20px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.site-main { min-height: 60vh; padding: 0 0 80px; }

/* --- Header --------------------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
    flex-wrap: wrap;
}

.site-header__logo img { height: 44px; width: auto; max-width: 100%; }

.site-nav__list {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__item a {
    font-weight: 500;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.site-nav__item a:hover,
.site-nav__item a[aria-current='page'] {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* --- Listing header ------------------------------------------------------- */
.listing-header {
    padding: 56px 0 40px;
    max-width: 760px;
}

.listing-header__eyebrow {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
}

.listing-header__title {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
}

.listing-header__description {
    margin: 12px 0 0;
    font-size: 1.15rem;
    color: var(--ink-muted);
}

.listing-header__count {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--ink-faint);
}

.listing-header--author { text-align: center; margin: 0 auto; }
.listing-header__avatar { border-radius: 50%; margin: 0 auto 16px; }

/* --- Post grid ------------------------------------------------------------ */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 1100px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .post-grid { grid-template-columns: 1fr; gap: 24px; }
}

.post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

.post-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.post-card__media { background: var(--surface-sunk); }

.post-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.post-card__image--placeholder {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
}

.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

.post-card__tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand);
}

.post-card__title {
    margin: 0 0 10px;
    font-size: 1.2rem;
    line-height: 1.35;
}
.post-card:hover .post-card__title { color: var(--brand); }

.post-card__excerpt {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--ink-muted);
}

.post-card__meta {
    margin: auto 0 0;
    font-size: 13.5px;
    color: var(--ink-faint);
}
.post-card__sep { margin: 0 7px; }

/* --- Pagination ----------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 56px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: 15px;
    font-weight: 500;
}

.pagination__link { text-decoration: none; }
.pagination__link--disabled { color: var(--border); }
.pagination__position { color: var(--ink-faint); }

@media (max-width: 560px) {
    .pagination { flex-direction: column; }
}

/* --- Post ----------------------------------------------------------------- */
.post__header { padding: 56px 0 28px; }

.post__tag {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--brand);
    text-decoration: none;
}

.post__title {
    margin: 0;
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem);
}

.post__lede {
    margin: 16px 0 0;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.post__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 22px;
    font-size: 14.5px;
    color: var(--ink-faint);
}
.post__author { display: inline-flex; align-items: center; gap: 8px; }
.post__avatar { border-radius: 50%; }
.post__sep { margin: 0 8px; }

.post__feature-image {
    margin: 12px 0 40px;
}
.post__feature-image img {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    border-radius: var(--radius);
}
.post__feature-image figcaption {
    max-width: var(--wrap-narrow);
    margin: 10px auto 0;
    padding: 0 var(--gutter);
    font-size: 14px;
    color: var(--ink-faint);
    text-align: center;
}

/* --- Prose -----------------------------------------------------------------
   Imported HubSpot post bodies are plain HTML, not Ghost editor cards, so
   these styles have to carry headings, lists, tables and images unaided.
   -------------------------------------------------------------------------- */
.prose { font-size: 1.05rem; }

.prose > * + * { margin-top: 1.25em; }

.prose h2 {
    margin-top: 2.2em;
    font-size: 1.6rem;
}
.prose h3 {
    margin-top: 1.8em;
    font-size: 1.28rem;
}
.prose h4 {
    margin-top: 1.6em;
    font-size: 1.1rem;
}

.prose p { margin: 0; }

.prose ul, .prose ol { margin: 0; padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }

.prose img, .prose figure { border-radius: var(--radius); }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ink-faint);
    text-align: center;
}

/* Ghost editor cards can break out of the reading column. Required by gscan,
   and used by any image, gallery or embed the marketing team sets to wide or
   full width in the editor. The 50%/translateX trick escapes .wrap--narrow
   without needing a different DOM structure. */
.prose .kg-width-wide {
    position: relative;
    width: 100vw;
    max-width: 1100px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.prose .kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.prose .kg-width-full img { border-radius: 0; }

.prose .kg-width-wide img,
.prose .kg-width-full img { width: 100%; }

.prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--brand);
    color: var(--ink-muted);
    font-size: 1.1rem;
}

.prose hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--border);
}

/* display:block makes a wide table scroll inside itself rather than forcing
   the whole page to scroll sideways. Imported HTML has no wrapper element to
   hang overflow on, so it has to go on the table. */
.prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}
.prose th, .prose td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.prose th { background: var(--surface-sunk); font-weight: 600; }

.prose code {
    padding: 2px 6px;
    background: var(--surface-sunk);
    border-radius: 3px;
    font-size: .9em;
}
.prose pre {
    padding: 16px 18px;
    background: var(--ink);
    color: #f6f6f6;
    border-radius: var(--radius);
    overflow-x: auto;
}
.prose pre code { background: none; padding: 0; color: inherit; }

.post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.post__tag-pill {
    padding: 5px 12px;
    background: var(--surface-sunk);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    color: var(--ink-muted);
}
.post__tag-pill:hover { background: var(--brand); color: #fff; }

/* --- Related -------------------------------------------------------------- */
.related {
    margin-top: 72px;
    padding-top: 48px;
    border-top: 1px solid var(--border);
}
.related__title {
    margin-bottom: 28px;
    font-size: 1.4rem;
}

/* --- Footer ----------------------------------------------------------------
   The brand lives here. Dark blue ground, white SafetySign mark, contact
   block, and the sibling-storefront sentence.
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--brand-dark);
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    padding: 56px 0 40px;
}

.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--brand-light); text-decoration: underline; }

.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.site-footer__logo { height: 40px; width: auto; }

.site-footer__contact {
    font-style: normal;
    line-height: 1.8;
}
.site-footer__contact p { margin: 0; }
.site-footer__address { font-weight: 500; color: #fff; }
.site-footer__muted { color: rgba(255, 255, 255, .6); }
.site-footer__sep { margin: 0 8px; color: rgba(255, 255, 255, .4); }

.site-footer__social {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: #fff;
}
.site-footer__social a:hover {
    background: #fff;
    color: var(--brand-dark);
}

.site-footer__bottom { padding-top: 32px; }
.site-footer__bottom p { margin: 0 0 10px; }

.site-footer__division { font-weight: 500; color: #fff; }
.site-footer__siblings { color: rgba(255, 255, 255, .75); }

.site-footer__parent-logo {
    height: 34px;
    width: auto;
    margin: 24px 0 16px;
    background: #fff;
    padding: 8px 12px;
    border-radius: var(--radius);
}

.site-footer__copyright {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
}

/* --- Misc ----------------------------------------------------------------- */
.empty-state {
    padding: 60px 0;
    color: var(--ink-faint);
    text-align: center;
}

.error-page { padding: 100px 0; text-align: center; }
.error-page__code {
    margin: 0;
    font-size: 4rem;
    font-weight: 700;
    color: var(--brand);
    line-height: 1;
}
.error-page__title { margin: 12px 0 16px; font-size: 1.6rem; }
.error-page__help { color: var(--ink-muted); }
.error-page__details { list-style: none; padding: 0; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .post-card:hover { transform: none; }
}