/* GENERATED by scripts/build-public-chrome-css.mjs from the @gp-public regions of css/styles.css
 * marked for "footer". DO NOT EDIT: edit styles.css, run `npm run public-chrome`, commit both.
 * The shared logged-out footer (the markup biz, school and greasepilot.com's migrate plugin share) for a
 * host that cannot load styles.css. Every selector is scoped to footer[data-gp-public-footer], 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) and the matching
 * js/components/public-footer.js are the host's to load. Regions: btn, type, footer, badge, cta-identity. */

/* ── region: btn ── */
footer[data-gp-public-footer] .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: type ── */
/* Headings */
footer[data-gp-public-footer] h1,
footer[data-gp-public-footer] h2,
footer[data-gp-public-footer] h3,
footer[data-gp-public-footer] h4,
footer[data-gp-public-footer] h5,
footer[data-gp-public-footer] h6 {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

footer[data-gp-public-footer] a:hover {
    color: #00acff;
}

/* ── region: footer ── */
footer[data-gp-public-footer] {
    background-color: #2a2a2a;
    color: #ccc;
    padding: 48px 0 0;
    font-size: 14.4px;
    line-height: 1.7;
}

footer[data-gp-public-footer] .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

footer[data-gp-public-footer] .footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 40px;
}

footer[data-gp-public-footer] .footer-mission h3 {
    color: white;
    font-size: 20.8px;
    margin-bottom: 12px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    /* The footer's own 1.7, stated so a host theme's heading line-height (Astra: h3 1.3, h4 1.2) cannot
       change the footer's rhythm — the app pill inherits it too. Same on the column headings below. */
    line-height: inherit;
}

footer[data-gp-public-footer] .footer-mission p {
    color: #aaa;
    line-height: 1.8;
    margin: 0;
}

/* The sign-up block's heading (below) is the same heading as a column's. */
footer[data-gp-public-footer] .footer-column h4,
footer[data-gp-public-footer] .footer-signup h4 {
    color: white;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    line-height: inherit;
}

footer[data-gp-public-footer] .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer[data-gp-public-footer] .footer-column ul li {
    margin-bottom: 8px;
}

footer[data-gp-public-footer] .footer-column ul li a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s;
}

footer[data-gp-public-footer] .footer-column ul li a:hover {
    color: #00acff;
}

/* Email-updates sign-up inside the mission block (biz + greasepilot.com; school's footer has none).
   Dark-surface inputs; the button is the global .btn.btn-accent. The status line is empty until the
   shared js/components/public-footer.js writes into it, and the form hides once the sign-up is done.
   font-family is restated on the input because the compiled footer file cannot rely on the global
   `button, input … { font-family: inherit }` reset above. */
footer[data-gp-public-footer] .footer-signup {
    margin-top: 24px;
    max-width: 420px;
}

footer[data-gp-public-footer] .footer-signup p {
    color: #aaa;
    margin: 0 0 12px;
}

footer[data-gp-public-footer] .footer-signup form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

footer[data-gp-public-footer] .footer-signup input {
    width: 100%;
    padding: 9.6px 12px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #333;
    color: #fff;
    font-family: inherit;
    font-size: 15.2px;
    font-weight: 400; /* the browser default, stated: a host theme's `input { font-weight: inherit }` would make it 500 */
    transition: border-color 0.2s;
}

footer[data-gp-public-footer] .footer-signup input::placeholder {
    color: #888;
}

footer[data-gp-public-footer] .footer-signup input:focus {
    outline: none;
    border-color: #00acff;
    box-shadow: 0 0 0 3px rgba(0, 172, 255, 0.15);
}

footer[data-gp-public-footer] .footer-signup .btn {
    align-self: flex-start;
}

footer[data-gp-public-footer] .footer-signup [data-gp-signup-status] {
    margin: 8px 0 0;
    font-size: 13.6px;
    color: #ccc;
}

footer[data-gp-public-footer] .footer-signup [data-gp-signup-status]:empty {
    display: none;
}

footer[data-gp-public-footer] .footer-signup [data-gp-signup-status][data-kind="error"] {
    color: #ff8a80;
}

footer[data-gp-public-footer] .footer-signup[data-state="done"] form {
    display: none;
}

/* YouTube subscribe button */
footer[data-gp-public-footer] .yt-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 9.6px;
    background: #333;
    border: 1px solid #555;
    border-radius: 24px;
    padding: 8px 16px 8px 9.6px;
    text-decoration: none;
    color: white;
    font-size: 14.4px;
    font-weight: 600;
    transition: background 0.2s, border-color 0.2s;
}

footer[data-gp-public-footer] .yt-subscribe-btn:hover {
    background: #444;
    border-color: #777;
    color: white;
}

footer[data-gp-public-footer] .yt-subscribe-btn .yt-icon {
    width: 28px;
    height: 20px;
    flex-shrink: 0;
}

footer[data-gp-public-footer] .footer-bottom {
    margin-top: 40px;
    padding: 20px 0;
    border-top: 1px solid #444;
    text-align: center;
}

footer[data-gp-public-footer] .footer-bottom p {
    margin: 0;
    color: #777;
    font-size: 13.6px;
}

/* Footer responsive */
@media (max-width: 1024px) {
    footer[data-gp-public-footer] .footer-main {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 32px;
    }

    footer[data-gp-public-footer] .footer-mission {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    footer[data-gp-public-footer] .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    footer[data-gp-public-footer] .footer-mission {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    footer[data-gp-public-footer] .footer-main {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    footer[data-gp-public-footer] {
        padding: 32px 0 0;
    }
}

/* ── region: badge ── */
footer[data-gp-public-footer] .app-badge {
  display: inline-block;
  padding: 1.6px 8.8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── region: cta-identity ── */
/* ── THE global orange CTA identity (SSOT — Michael 2026-09-09: ONE orange
   standard across the platform, .btn-accent's behavior). Solid accent, darken
   on hover, soft ring, NO lift. This block owns fill/hover/ring for EVERY
   orange CTA class — sizing/layout stay contextual on each class, and orange
   button colors must never be defined anywhere else (that is how we ended up
   with four different orange buttons). New code uses .btn-accent; the other
   selectors are legacy aliases already in markup. ── */
footer[data-gp-public-footer] .btn-accent,
footer[data-gp-public-footer] .btn-get-started,
footer[data-gp-public-footer] .mobile-get-started,
footer[data-gp-public-footer] .btn-secondary-large,
footer[data-gp-public-footer] .quiz-nav-btn--orange,
footer[data-gp-public-footer] .gp-attn-cta {
  background: var(--color-accent, #f97316); color: #fff; border: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px var(--color-accent-ring, rgba(249,115,22,.18));
}
footer[data-gp-public-footer] .btn-accent:hover,
footer[data-gp-public-footer] .btn-accent:focus,
footer[data-gp-public-footer] .btn-get-started:hover,
footer[data-gp-public-footer] .mobile-get-started:hover,
footer[data-gp-public-footer] .btn-secondary-large:hover,
footer[data-gp-public-footer] .quiz-nav-btn--orange:hover,
footer[data-gp-public-footer] .gp-attn-cta:hover {
  background: var(--color-accent-dark, #ea580c); color: #fff;
  /* The standard does NOT lift — also neutralizes lifts inherited from
     composite classes (.nav-link's hover on the header CTA). */
  transform: none;
}
footer[data-gp-public-footer] .btn-accent:disabled { background: var(--color-accent, #f97316); opacity: 0.6; cursor: default; box-shadow: none; }