/* GENERATED by scripts/build-public-chrome-css.mjs from the @gp-public regions of css/styles.css
 * marked for "aboutpage". DO NOT EDIT: edit styles.css, run `npm run public-chrome`, commit both.
 * The About page (the migrate plugin prints it as greasepilot.com/about/, from biz
 * src/lib/about-page.json and greasepilot-platform/shared/organization.js) for a
 * host that cannot load styles.css. Every selector is scoped to div[data-gp-about-page], so
 * nothing here styles anything outside that element, and every rem is written out in px (16px to the
 * rem) so the host's root font size cannot resize it. Fonts (Quicksand, Oswald) are the host's to load; the icons are inline SVG in the markup. Regions: btn, btn-primary, type, org-follow, about-page. */

/* ── region: btn ── */
div[data-gp-about-page] .btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
}

/* ── region: btn-primary ── */
div[data-gp-about-page] .btn-primary {
    background: #0170b9;
    color: white;
}

div[data-gp-about-page] .btn-primary:hover {
    background: #015a94;
    color: white;
}

/* ── region: type ── */
/* Headings */
div[data-gp-about-page] h1,
div[data-gp-about-page] h2,
div[data-gp-about-page] h3,
div[data-gp-about-page] h4,
div[data-gp-about-page] h5,
div[data-gp-about-page] h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Links */
div[data-gp-about-page] a {
    color: #0170B9;
    transition: color 0.3s;
}

div[data-gp-about-page] a:hover {
    color: #00acff;
}

/* ── region: org-follow ── */
div[data-gp-about-page] .gp-org-follow { margin: 36px 0 0; text-align: center; }
div[data-gp-about-page] .gp-org-follow h3 { font-size: 16px; color: #1a1a1a; margin: 0 0 12px; }
div[data-gp-about-page] .gp-org-follow ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9.6px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
div[data-gp-about-page] .gp-org-follow a {
    display: inline-flex;
    align-items: center;
    gap: 7.2px;
    padding: 6.4px 15.2px;
    border: 1px solid var(--color-border-light, #e2e8f0);
    border-radius: 999px;
    background: #fff;
    color: var(--color-text, #3a3a3a);
    font-weight: 600;
    font-size: 14.4px;
    text-decoration: none;
}
div[data-gp-about-page] .gp-org-follow a:hover { border-color: var(--color-primary, #0170b9); color: var(--color-primary, #0170b9); }
/* The network's own mark left of its name (brand-* icons from the one icon list). The colour is set on
   the mark's path, so the hover colour above changes the words and never the logo (their guidelines). */
div[data-gp-about-page] .gp-org-follow a svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── region: about-page ── */
div[data-gp-about-page].gp-about-page *,
div[data-gp-about-page].gp-about-page *::before,
div[data-gp-about-page].gp-about-page *::after { box-sizing: border-box; }
div[data-gp-about-page].gp-about-page {
    background: #f8fafc;
    padding: 40px 20px 48px;
    /* The design system's body type, stated here because a host page's body type is its own. */
    font-family: var(--font-body, 'Quicksand', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: #475569;
}
div[data-gp-about-page] .gp-about-page-inner { max-width: 800px; margin: 0 auto; }
div[data-gp-about-page].gp-about-page h1 { font-size: 32px; font-weight: 700; line-height: 1.2; color: #1e293b; margin: 0 0 12px; }
div[data-gp-about-page].gp-about-page h2 { font-size: 25.6px; font-weight: 700; line-height: 1.2; color: #1e293b; margin: 0 0 5.6px; }
div[data-gp-about-page].gp-about-page h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: #1e293b; margin: 32px 0 14.4px; }
div[data-gp-about-page].gp-about-page p { font-size: 16.8px; line-height: 1.8; margin: 0 0 20px; }
div[data-gp-about-page] .gp-about-lead { font-size: 17.6px; }
div[data-gp-about-page] .gp-about-section {
    border-top: 1px solid #e2e8f0;
    margin-top: 40px;
    padding-top: 40px;
    display: flow-root; /* holds the floated photos inside their own section */
    scroll-margin-top: 110px; /* a link to #michael-sawyer lands below the sticky header */
}
div[data-gp-about-page] .gp-about-subtitle { color: var(--color-primary, #0170b9); font-weight: 600; margin-bottom: 28px; }
div[data-gp-about-page].gp-about-page p.gp-about-subtitle { font-size: 16.8px; margin-bottom: 28px; }
div[data-gp-about-page] .gp-about-photo {
    width: 220px;
    height: auto;
    border-radius: 8px;
    float: right;
    margin: 5.6px 0 20px 24px;
}
div[data-gp-about-page] .gp-about-list { margin: 0 0 24px; padding-left: 20px; display: grid; gap: 8px; }
div[data-gp-about-page] .gp-about-list li { font-size: 16.32px; line-height: 1.7; }
div[data-gp-about-page] .gp-about-cta {
    text-align: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}
@media (max-width: 600px) {
    div[data-gp-about-page].gp-about-page { padding: 32px 16px 40px; }
    div[data-gp-about-page].gp-about-page h1 { font-size: 25.6px; }
    /* Its own width up to the column (and never past 360px): a small photo is not stretched into a blur. */
    div[data-gp-about-page] .gp-about-photo { float: none; display: block; width: auto; max-width: min(100%, 360px); margin: 8px auto 20px; }
}