/*
 * Philly Charters brand-color override layer.
 * Loaded AFTER uc-fast.css so its CSS custom properties win the cascade.
 * uc-fast.css defines --navy:#1f4d7a + --gold:#dfca8b (UC's palette).
 * Philly's palette per /home/jflbbhmy/brand-registry/brands.json:
 *   bg #faf7f3 (cream)  bgAlt #f0e5dd (warm tan)
 *   dark #1a0608 (oxblood)  darker #0a0203 (near-black)
 *   accent #c11a1d (philly red)  accentDark #9a1316
 *   ctaBg #c11a1d  ctaText #fff
 *   headingFont "Playfair Display"  bodyFont "Lora"
 */
:root {
    /* Override uc-fast.css palette tokens */
    --navy:        #1a0608;        /* was UC navy — now philly oxblood */
    --navy-dark:   #0a0203;
    --navy-deep:   #0a0203;
    --gold:        #c11a1d;        /* was UC gold — now philly red */
    --gold-dark:   #9a1316;
    --gold-soft:   #f0e5dd;        /* warm tan instead of soft gold */

    /* Brand bg (cream) — used as fallback page background */
    --brand-bg:    #faf7f3;
    --brand-bg-alt:#f0e5dd;
}

/* Body background tone — lighter cream feels more local/regional than UC's stark white */
body {
    background: var(--brand-bg);
    color: #141415;
}

/* Hero overlay tints — need to read on the new oxblood background */
.hero { background-color: var(--navy); }
.hero h1 { color: #faf7f3; }
.hero .hero-eyebrow { color: var(--gold-soft); }

/* CTA buttons — philly red */
.uc-cta, .btn-primary, .quote-card-submit, .ucv2-btn-primary,
a.uc-cta, .nearby-link:hover, .ucv2-btn {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold-dark);
}
.uc-cta:hover, .btn-primary:hover, .quote-card-submit:hover {
    background: var(--gold-dark);
    color: #fff;
}

/* Header — keep UC's white-glass header (uc-fast.css default). The Philly
   logo is a dark-script wordmark on a light/cream background, so a white
   header reads correctly. The oxblood-tint header was an earlier experiment
   that made the dark logo invisible. */
/* .uc-header — leave at uc-fast.css default rgba(255,255,255,.96) */

/* Topbar (the slim ribbon ABOVE the header) stays oxblood-tinted */
.uc-topbar { background: #2a0707; }
.uc-topbar a, .uc-topbar span { color: #faf7f3; }

/* Nav text on the white header should be philly oxblood, not UC navy */
.uc-nav a:not(.uc-cta) { color: var(--navy); }
.uc-nav a:not(.uc-cta):hover { color: var(--gold-dark); }

/* Logo size bump — uc-fast.css forces height:48px; bump to 56px so the
   philly wordmark reads at a glance (logo is wider than UC's so 48px is small) */
.uc-logo img { height: 56px !important; }

/* Section accents */
.section-navy, .uc-footer { background: var(--navy); }
.image-band { border-color: var(--gold); }

/* Hero stats — accent in red instead of gold */
.hero-stat strong { color: var(--gold); }

/* Typography swap — Playfair for headings, Lora for body */
body { font-family: 'Lora', Georgia, serif; }
h1, h2, h3, h4, .uc-logo strong { font-family: 'Playfair Display', Georgia, serif; }

/* Breadcrumb hover (uc-fast.css has gold hover — flip to philly red) */
.uc-breadcrumbs a:hover { color: var(--gold); }

/* ── Footer "Powered by" credit (text only, no links) ───────────── */
.uc-footer-poweredby {
    text-align: center;
    padding: 14px 20px 24px;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    letter-spacing: .04em;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 8px;
}

/* ── Philly civic blue circle dots — chips + why-choose feature icons ──
   uc-fast.css uses var(--navy) gradient backgrounds for these badges; my
   --navy override turns them oxblood/near-black. Per Ken 2026-05-03 (chips)
   + 2026-05-06 (why-choose features): swap to Philly blue (#002D72,
   Phillies/76ers shade) so the row reads as Philly-coded, not generic.
   Icons inside the blue dots are Philly red (#c11a1d) — the brand
   accent color — for the full Phillies blue+red contrast. */
.chip-icon, .feature-icon {
    background: #002D72 !important;
    color: #c11a1d !important;
    box-shadow: 0 6px 16px rgba(0,45,114,.22) !important;
}
.chip-icon svg, .feature-icon svg { fill: #c11a1d !important; }
.chip:hover { border-color: #002D72; }
.feature:hover { border-color: #002D72; }

/* ── Image gallery — 4-up Pexels cities/events/venues grid ────────── */
.image-gallery-section { padding: 56px 20px; }
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 24px;
}
.gallery-tile {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px) {
    .image-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Category landing pages — auto-grid of child pages ────────────── */
.category-intro h2 { margin-bottom: 8px; }
.category-intro .lead-text { color: #475569; font-size: 17px; max-width: 720px; }
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 32px;
}
.cat-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; overflow: hidden;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
    color: inherit;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
    border-color: var(--gold);
}
.cat-card-img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #f0e5dd; }
.cat-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.cat-card-body h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.25; color: var(--navy); }
.cat-card-body p { margin: 0 0 14px; font-size: 14px; color: #475569; line-height: 1.5; flex: 1; }
.cat-card-arrow { color: var(--gold); font-weight: 600; font-size: 13px; }

/* ── Quote-form skeleton ─────────────────────────────────────────
   Shown inside #uc-quote-form until the lazy-loaded widget replaces
   the div's innerHTML. Sized to match the rendered form's first step
   so visitors see structure immediately and CLS stays at 0 when the
   widget swaps in. */
.uc-quote-skeleton { padding: 4px 0 8px; }
.uc-quote-skeleton .skel-row { display:flex; gap:10px; margin-bottom:14px; }
.uc-quote-skeleton .skel-pill {
    flex:1; height:36px; border-radius:8px;
    background: linear-gradient(90deg, #efe4dc 25%, #f7efe9 50%, #efe4dc 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
.uc-quote-skeleton .skel-line, .uc-quote-skeleton .skel-btn {
    height: 44px; border-radius: 8px; margin-bottom: 12px;
    background: linear-gradient(90deg, #efe4dc 25%, #f7efe9 50%, #efe4dc 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
.uc-quote-skeleton .skel-line-lg { height: 56px; }
.uc-quote-skeleton .skel-line-half { width: 60%; }
.uc-quote-skeleton .skel-btn {
    height: 48px; margin-top: 8px;
    background: linear-gradient(90deg, #d8c9c2 25%, #e3d6cf 50%, #d8c9c2 75%);
    background-size: 200% 100%;
}
@keyframes skel-shimmer { 0% {background-position: 200% 0} 100% {background-position: -200% 0} }