/* Painter's tape brand (George, Oct 12 2026). Guide and kit: R:\_ProsGrade\brand\painters-tape\BRAND.md.
   Loaded LAST by every layout (public, sign-in, Business Manager, homeowner), so it can restyle the shared pieces:
   the tape logo, tape labels, the one main button per view, the current-page underline and the dark footer.
   Tape is an accent only - body copy, cards and tables stay plain. */

:root {
    /* Repeated here because the Business Manager and homeowner layouts do not load tokens.css. */
    --pg-tape: #2F8FE0;
    --pg-tape-hover: #2783D0;
    --pg-tape-ink: #121212;
    --pg-dark: #1A1D21;
    --pg-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body { font-family: var(--pg-font); }
/* Headings were the template's navy-grey #32325d; the brand ink is near-black. */
:root { --bs-heading-color: #121212; }

/* ---------- The tape strip: logo, labels, small callouts ---------- */
.pg-tape {
    display: inline-block;
    background: var(--pg-tape);
    color: var(--pg-tape-ink);
    clip-path: polygon(3% 0, 97% 0, 100% 20%, 97% 40%, 100% 60%, 97% 80%, 100% 100%, 3% 100%, 0 80%, 3% 60%, 0 40%, 3% 20%);
    transform: rotate(-2deg);
}

/* The main logo: tick + word together on one strip (George's combo, Oct 12). */
.pg-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pg-font);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.03em;
    line-height: 1;
    padding: 6px 20px 8px;
    text-decoration: none;
    white-space: nowrap;
}
.pg-logo, .pg-logo:hover, .pg-logo:focus, .pg-logo:visited { color: var(--pg-tape-ink); text-decoration: none; }
.pg-logo__tick { width: 0.85em; height: 0.85em; flex: none; }
.pg-logo-sm { font-size: 22px; padding: 5px 16px 7px; }
.pg-logo-lg { font-size: 34px; padding: 8px 24px 10px; }

/* Small pieces of tape for labels such as TOP CITY, each at a slightly different angle. */
.pg-tape-label {
    display: inline-block;
    background: var(--pg-tape);
    color: var(--pg-tape-ink);
    font: 700 12px/1 var(--pg-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 0;
    clip-path: polygon(5% 0, 95% 0, 100% 25%, 95% 50%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 5% 50%, 0 25%);
    transform: rotate(-2deg);
}

/* ---------- Public header ---------- */
.tg-brand.pg-logo { gap: 6px; margin-right: 0; }
.tg-brand-subtext-tape { display: block; margin-top: 8px; font: 700 11px/1 var(--pg-font); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.tg-brand-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; }

/* The current page gets a 3px tape underline. */
@media (min-width: 992px) {
    .header-list > .header-list-item.is-current > .header-list-link { box-shadow: inset 0 -3px 0 var(--pg-tape); border-radius: 0; }
    /* "Business Manager" is the header's one main button: tape blue, black text. */
    .header-list > .header-list-item.pg-nav-cta > .header-list-link { background: var(--pg-tape); color: var(--pg-tape-ink); font-weight: 600; }
    .header-list > .header-list-item.pg-nav-cta > .header-list-link:hover { background: var(--pg-tape-hover); color: var(--pg-tape-ink); }
}
@media (max-width: 991px) {
    #navbarContent { background-color: var(--pg-dark); }
    #navbarContent .header-list li.is-current > a { text-decoration: underline; text-decoration-color: var(--pg-tape); text-decoration-thickness: 3px; text-underline-offset: 6px; }
}

/* ---------- Buttons ---------- */
/* Main action: black text on tape. */
.btn-primary {
    --bs-btn-color: #121212;
    --bs-btn-bg: var(--pg-tape);
    --bs-btn-border-color: var(--pg-tape);
    --bs-btn-hover-color: #121212;
    --bs-btn-hover-bg: var(--pg-tape-hover);
    --bs-btn-hover-border-color: var(--pg-tape-hover);
    --bs-btn-active-color: #121212;
    --bs-btn-active-bg: #2378BF;
    --bs-btn-active-border-color: #2378BF;
    --bs-btn-disabled-color: #121212;
    --bs-btn-disabled-bg: var(--pg-tape);
    --bs-btn-disabled-border-color: var(--pg-tape);
    --bs-btn-focus-shadow-rgb: 47, 143, 224;
    font-weight: 600;
}
/* Secondary: black outline on white. */
.btn-outline-primary {
    --bs-btn-color: #121212;
    --bs-btn-border-color: #121212;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #121212;
    --bs-btn-hover-border-color: #121212;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #121212;
    --bs-btn-active-border-color: #121212;
}

/* ---------- Footer: the brand dark, not blue ---------- */
#footer.bg-primary { background-color: var(--pg-dark) !important; }
#footer .tg-footer-brand.pg-logo { margin-bottom: 14px; }
#footer .core-footer-pros-btn, #footer .core-footer-pros-btn:hover { background: var(--pg-tape); border-color: var(--pg-tape); color: var(--pg-tape-ink); font-weight: 600; }
#footer .core-footer-pros-btn:hover { background: var(--pg-tape-hover); border-color: var(--pg-tape-hover); }

/* ---------- Listing badges become tape (George, Oct 12 2026: "use it as Featured on listings.. really pops! and maybe
   a green tape for Taking Calls"). The /cities "Top city" label stays a plain pill. Every listing card - city pages,
   home, search, Top Rated, profile recommendations and the profile itself - uses .pg-tier-pill-featured / -calls. ---------- */
:root { --pg-tape-green: #6CC24A; } /* green painter's tape; black text 9.4:1 */
.pg-tier-pill-featured, .pg-tier-pill-calls, .tg-business-hero-tier-pill-featured {
    border-radius: 0;
    color: var(--pg-tape-ink);
    font-family: var(--pg-font);
    font-weight: 700;
    padding: 4px 11px;
    clip-path: polygon(5% 0, 95% 0, 100% 25%, 95% 50%, 100% 75%, 95% 100%, 5% 100%, 0 75%, 5% 50%, 0 25%);
}
.pg-tier-pill-featured, .tg-business-hero-tier-pill-featured { background: var(--pg-tape); transform: rotate(-2deg); }
.pg-tier-pill-calls { background: var(--pg-tape-green); transform: rotate(1.5deg); }
.pg-tier-pill-calls .bi { color: var(--pg-tape-ink); }
.pg-tier-pill-featured + .pg-tier-pill-calls { margin-left: 8px; }
/* The listing page header carries the same tape badges as its card (Oct 13 2026). */
.pg-hero-badges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0 4px 0 0; }
.pg-hero-badges .pg-tier-pill { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Sign-in pages, Business Manager, homeowner area ---------- */
.pg-auth-logo-tape { margin-bottom: 18px; }
.pm-brand.pg-brand-tape { flex-wrap: wrap; gap: 8px; padding: 12px 6px 20px; }
.pm-brand.pg-brand-tape .pg-logo { font-size: 19px; padding: 5px 14px 6px; }
/* The manager colours every link blue and the legacy dashboard CSS forces white text on solid buttons; the tape logo and
   the main button always carry black text. */
.pg-logo, .pm-body .pg-logo, .pm-body .pg-logo:hover { color: var(--pg-tape-ink) !important; }
.pm-body .btn-primary, .pm-body a.btn-primary, .pm-body .btn-primary:hover, .pm-body a.btn-primary:hover,
.pm-body .pm-btn-primary { color: var(--pg-tape-ink) !important; }
.homeowner-brand.pg-logo { color: var(--pg-tape-ink); }