/* =========================================================
   Purrap Packaging — public site styling (Home / Catalog / Contact / Login)
   Colors, fonts, and button styling below were pulled directly from the
   live purrappackaging.com (brand red, charcoal, section grays, Inter
   font, 9px button radius) via a live browser inspection.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --purrap-white: #FFFFFF;
    --purrap-gray: #F5F5F5;
    --purrap-sage: #EEF1EA;
    --purrap-charcoal: #161616;
    --purrap-charcoal-soft: #4A4A4A;
    --purrap-red: #A50201;
    --purrap-red-dark: #7E0101;
    --purrap-border: #E4E4E4;
    --purrap-font-heading: 'Inter', system-ui, sans-serif;
    --purrap-font-body: 'Inter', system-ui, sans-serif;
}

body.site-body {
    font-family: var(--purrap-font-body);
    color: var(--purrap-charcoal);
    background: var(--purrap-white);
}

.site-body h1, .site-body h2, .site-body h3, .site-body h4,
.site-body .brand-font {
    font-family: var(--purrap-font-heading);
    font-weight: 700;
}

/* ---- Announcement bar (color-scheme-4: red bg, white fg) ---- */
.site-announcement {
    background: var(--purrap-red);
    color: var(--purrap-white);
    text-align: center;
    font-size: .85rem;
    padding: .5rem 1rem;
    letter-spacing: .01em;
}
.site-announcement strong { color: var(--purrap-white); }

/* ---- Header / nav (color-scheme-5: charcoal bg, white fg) ---- */
.site-header {
    background: var(--purrap-charcoal);
    border-bottom: 1px solid var(--purrap-charcoal);
}
.site-logo {
    font-family: var(--purrap-font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--purrap-white);
    text-decoration: none;
    letter-spacing: -.01em;
}
.site-logo span { color: inherit; }
.site-logo-img {
    height: 34px;
    width: auto;
    display: block;
}
.site-nav .nav-link {
    font-weight: 600;
    color: rgba(255,255,255,.8) !important;
}
.site-nav .nav-link:hover, .site-nav .nav-link.active {
    color: var(--purrap-white) !important;
}
.site-phone {
    font-weight: 700;
    color: var(--purrap-white);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.1;
}
.site-phone small { display: block; font-weight: 500; color: rgba(255,255,255,.7); }

.btn-purrap {
    background: var(--purrap-red);
    border-color: var(--purrap-red);
    color: #fff;
    font-weight: 700;
    border-radius: 9px;
    padding: 11px 18px;
}
.btn-purrap:hover, .btn-purrap:focus {
    background: var(--purrap-red-dark);
    border-color: var(--purrap-red-dark);
    color: #fff;
}
.btn-purrap-outline {
    border: 2px solid var(--purrap-red);
    color: var(--purrap-red);
    font-weight: 700;
    border-radius: 9px;
    padding: 9px 16px;
    background: transparent;
}
.btn-purrap-outline:hover {
    background: var(--purrap-red);
    color: #fff;
}
/* Outline button on the dark header needs to stay legible on charcoal */
.site-header .btn-purrap-outline {
    border-color: var(--purrap-white);
    color: var(--purrap-white);
}
.site-header .btn-purrap-outline:hover {
    background: var(--purrap-white);
    color: var(--purrap-charcoal);
}

/* ---- Hero ---- */
.site-hero {
    background: linear-gradient(180deg, #FAF7F4 0%, #FFFFFF 100%);
    padding: 4rem 0 3rem;
}
.site-hero h1 {
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -.02em;
}
.site-hero p.lead {
    color: var(--purrap-charcoal-soft);
    font-size: 1.15rem;
}
.badge-feature {
    background: var(--purrap-white);
    border: 1px solid var(--purrap-border);
    border-radius: 2rem;
    padding: .5rem 1rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--purrap-charcoal);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ---- Sections ---- */
.site-section { padding: 3.5rem 0; }
.site-section.section-kraft { background: var(--purrap-sage); }
.site-section h2 {
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.step-num {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--purrap-red);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-family: var(--purrap-font-heading);
    flex-shrink: 0;
}
.site-card {
    background: var(--purrap-white);
    border: 1px solid var(--purrap-border);
    border-radius: 9px;
    overflow: hidden;
    height: 100%;
}
.site-card .card-img-top { height: 170px; object-fit: cover; background: var(--purrap-gray); }
.site-price { color: var(--purrap-red); font-weight: 700; }

blockquote.site-quote {
    font-family: var(--purrap-font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--purrap-charcoal);
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
}

.site-cta {
    background: var(--purrap-charcoal);
    color: var(--purrap-white);
    border-radius: 9px;
    padding: 3rem 2rem;
    text-align: center;
}
.site-cta h2 { color: #fff; }
.site-cta p { color: rgba(255,255,255,.75); }

/* ---- Footer (color-scheme-1: white bg, charcoal fg) ---- */
.site-footer {
    background: var(--purrap-white);
    color: var(--purrap-charcoal-soft);
    border-top: 1px solid var(--purrap-border);
    padding: 3rem 0 1.5rem;
    margin-top: 3rem;
}
.site-footer a { color: var(--purrap-charcoal); text-decoration: none; }
.site-footer a:hover { color: var(--purrap-red); text-decoration: underline; }
.site-footer .site-logo { color: var(--purrap-charcoal); }
.site-footer h3 { color: var(--purrap-charcoal) !important; }
.site-footer input.form-control {
    background: var(--purrap-white);
    border-color: var(--purrap-border);
    color: var(--purrap-charcoal);
}
.site-footer input.form-control::placeholder { color: #9A9A9A; }

/* ---- Forms (contact page) ---- */
.site-form label { font-weight: 600; color: var(--purrap-charcoal); }
.site-form .form-control, .site-form .form-select {
    border-color: var(--purrap-border);
    border-radius: 9px;
}
.site-form .form-control:focus, .site-form .form-select:focus {
    border-color: var(--purrap-red);
    box-shadow: 0 0 0 .2rem rgba(165,2,1,.15);
}

@media print { .site-announcement, .site-footer { display: none !important; } }