/**
 * CityGas public site — distinct design system from the internal app UI
 * (assets/css/theme.css). Orange + deep teal is grounded in the subject:
 * a flame's orange outer glow and blue-hot core, not an arbitrary pairing.
 */

:root {
    --cg-orange: #F5820C;
    --cg-orange-dark: #D96D00;
    --cg-teal: #0F3D3E;
    --cg-teal-light: #16565A;
    --cg-charcoal: #1C1B1A;
    --cg-charcoal-soft: #4A4744;
    --cg-bg: #FCFBF9;
    --cg-border: #ECE7DE;
}

body.pub {
    background: var(--cg-bg);
    color: var(--cg-charcoal);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.65;
}

.pub h1, .pub h2, .pub h3, .pub .display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--cg-charcoal);
    letter-spacing: -0.01em;
}

.pub .eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cg-teal);
}

.pub .price {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Nav ---- */
.pub-nav {
    background: var(--cg-bg);
    border-bottom: 1px solid var(--cg-border);
}
.pub-nav .navbar-brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--cg-charcoal) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pub-nav .nav-link {
    color: var(--cg-charcoal-soft) !important;
    font-weight: 500;
    font-size: 0.95rem;
}
.pub-nav .nav-link:hover, .pub-nav .nav-link.active {
    color: var(--cg-orange-dark) !important;
}
.pub-btn-primary {
    background: var(--cg-orange);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    transition: transform 0.15s ease, background 0.15s ease;
}
.pub-btn-primary:hover {
    background: var(--cg-orange-dark);
    color: #fff;
    transform: translateY(-1px);
}
.pub-btn-outline {
    background: transparent;
    border: 1.5px solid var(--cg-charcoal);
    color: var(--cg-charcoal);
    font-weight: 600;
    padding: 0.55rem 1.35rem;
    border-radius: 8px;
}
.pub-btn-outline:hover {
    background: var(--cg-charcoal);
    color: #fff;
}

/* ---- Hero ---- */
.pub-hero {
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.pub-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; }
.pub-hero .lead {
    font-size: 1.15rem;
    color: var(--cg-charcoal-soft);
    max-width: 480px;
}
.pub-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cg-teal);
}
.pub-trust-strip span::before {
    content: "✓";
    margin-right: 6px;
}

/* ---- Product / size grid ---- */
.pub-product-card {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    height: 100%;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pub-product-card:hover {
    box-shadow: 0 12px 24px rgba(28, 27, 26, 0.08);
    transform: translateY(-3px);
}
.pub-product-card .price { font-size: 1.4rem; color: var(--cg-charcoal); }
.pub-product-card .pub-size-badge {
    display: inline-block;
    background: var(--cg-bg);
    border: 1px solid var(--cg-border);
    color: var(--cg-teal);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-top: 0.5rem;
}

/* ---- Dark bands (trust / CTA) ---- */
.pub-band-dark {
    background: var(--cg-teal);
    color: #fff;
}
.pub-band-dark h2 { color: #fff; }
.pub-band-dark .pub-step {
    text-align: center;
}
.pub-band-dark .pub-step-icon {
    background: rgba(255,255,255,0.08);
    border-radius: 16px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.pub-band-orange {
    background: var(--cg-orange);
    color: #fff;
}
.pub-band-orange h2 { color: #fff; }

/* ---- Testimonials ---- */
.pub-review-card {
    background: #fff;
    border: 1px solid var(--cg-border);
    border-radius: 14px;
    padding: 1.75rem;
    height: 100%;
}
.pub-review-stars { color: var(--cg-orange); letter-spacing: 2px; }

/* ---- Footer ---- */
.pub-footer {
    background: var(--cg-charcoal);
    color: #C9C5C0;
    padding: 3.5rem 0 2rem;
}
.pub-footer h5, .pub-footer h6 { color: #fff; font-family: 'Space Grotesk', sans-serif; }
.pub-footer a { color: #C9C5C0; text-decoration: none; }
.pub-footer a:hover { color: var(--cg-orange); }

/* ---- Generic content pages (about/services/contact/terms/privacy) ---- */
.pub-content h1 { margin-bottom: 1.5rem; }
.pub-content .pub-page-body { color: var(--cg-charcoal-soft); font-size: 1.05rem; }
.pub-content .pub-page-body p { margin-bottom: 1.1rem; }

@media (max-width: 767px) {
    .pub-hero { padding: 3rem 0 2rem; text-align: center; }
    .pub-trust-strip { justify-content: center; }
}