/* ============================================================
   legal-hero-redesign.css
   
   Unified hero design for shipping/privacy/terms/refund/consign/
   contact/about/thankyou pages.
   
   Strategy: LIGHT background instead of dark photo overlay.
   Eliminates all dark-on-dark contrast issues.
   ============================================================ */

/* ===== TARGET ZONES — completely override dark-zones for these ===== */
.shipping-hero,
.privacy-hero,
.terms-hero,
.refund-hero,
.consign-hero,
.contact-hero,
.dag-contact-hero,
.thankyou-hero,
.about-hero,
section.shipping-hero,
section.privacy-hero,
section.terms-hero,
section.refund-hero,
section.consign-hero,
section.contact-hero,
section.thankyou-hero,
section.about-hero,
header.inventory-hero {
    /* RESET dark-zones tokens — back to light scheme */
    --zone-bg: var(--color-paper);
    --zone-text: var(--color-ink);
    --zone-text-muted: var(--p-gray-600, #52525b);
    --zone-text-faint: var(--p-gray-500, #71717a);
    --zone-border: var(--p-gray-200, #e4e4e7);
    --zone-accent: var(--color-primary);
    --zone-pill-bg: rgba(176, 18, 42, 0.08);
    --zone-pill-border: rgba(176, 18, 42, 0.18);
    --zone-pill-text: var(--color-primary);
    
    /* Layout — full-width light card with red left border */
    background: var(--p-gray-50, #fafafa) !important;
    background-image: none !important;
    color: var(--zone-text) !important;
    border-left: 4px solid var(--color-primary);
    border-bottom: 1px solid var(--zone-border);
    border-radius: 0;
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
    margin: 0 0 var(--space-8, 32px);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative element top-right */
.shipping-hero::after,
.privacy-hero::after,
.terms-hero::after,
.refund-hero::after,
.consign-hero::after,
.contact-hero::after,
.thankyou-hero::after,
.about-hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: linear-gradient(135deg, transparent 50%, rgba(176, 18, 42, 0.04) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ===== INNER LAYOUT ===== */
.shipping-hero > *,
.privacy-hero > *,
.terms-hero > *,
.refund-hero > *,
.consign-hero > *,
.contact-hero > *,
.thankyou-hero > *,
.about-hero > * {
    position: relative;
    z-index: 1;
}

/* ===== KICKER (eyebrow label) ===== */
.shipping-hero__kicker,
.privacy-hero__kicker,
.terms-hero__kicker,
.refund-hero__kicker,
.consign-hero__kicker,
.contact-hero__kicker,
.thankyou-hero__kicker,
.about-hero__kicker,
.shipping-hero > p:first-of-type:not(.shipping-hero__lead),
.privacy-hero > p:first-of-type:not(.privacy-hero__lead) {
    color: var(--color-primary) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 16px;
    line-height: 1;
    display: inline-block;
}

/* ===== TITLE H1 ===== */
.shipping-hero h1,
.privacy-hero h1,
.terms-hero h1,
.refund-hero h1,
.consign-hero h1,
.contact-hero h1,
.thankyou-hero h1,
.about-hero h1,
.shipping-hero__title,
.privacy-hero__title,
.terms-hero__title,
.refund-hero__title,
.consign-hero__title,
.contact-hero__title,
.thankyou-hero__title,
.about-hero__title {
    color: var(--color-ink) !important;
    font-size: clamp(32px, 4.5vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 20px !important;
    max-width: 18ch;
}

/* ===== LEAD/SUBTITLE ===== */
.shipping-hero p,
.privacy-hero p,
.terms-hero p,
.refund-hero p,
.consign-hero p,
.contact-hero p,
.thankyou-hero p,
.about-hero p,
.shipping-hero__lead,
.privacy-hero__lead,
.terms-hero__lead,
.refund-hero__lead,
.consign-hero__lead,
.contact-hero__subtitle,
.thankyou-hero__lead,
.about-hero__lead {
    color: var(--p-gray-700, #3f3f46) !important;
    font-size: clamp(16px, 1.4vw, 19px) !important;
    line-height: 1.55 !important;
    margin: 0 0 28px !important;
    max-width: 64ch;
    font-weight: 400;
}

/* ===== PILLS / CHIPS ===== */
.shipping-hero__chips,
.privacy-hero__chips,
.terms-hero__chips,
.refund-hero__chips,
.consign-hero__chips,
.contact-hero__chips,
.thankyou-hero__chips,
.about-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    list-style: none;
    padding: 0;
}

.shipping-hero__chips a,
.shipping-hero__chips span,
.privacy-hero__chips a,
.privacy-hero__chips span,
.terms-hero__chips a,
.terms-hero__chips span,
.refund-hero__chips a,
.refund-hero__chips span,
.consign-hero__chips a,
.consign-hero__chips span,
.contact-hero__chips a,
.contact-hero__chips span,
.thankyou-hero__chips a,
.thankyou-hero__chips span,
.about-hero__chips a,
.about-hero__chips span {
    background: var(--zone-pill-bg) !important;
    color: var(--zone-pill-text) !important;
    border: 1px solid var(--zone-pill-border) !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ===== HERO ACTIONS (button group) ===== */
.shipping-hero__actions,
.privacy-hero__actions,
.terms-hero__actions,
.refund-hero__actions,
.consign-hero__actions,
.contact-hero__actions,
.thankyou-hero__actions,
.about-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 32px 0 0 !important;
    align-items: center !important;
}

/* PRIMARY button — solid red */
.shipping-hero .dag-btn--primary,
.privacy-hero .dag-btn--primary,
.terms-hero .dag-btn--primary,
.refund-hero .dag-btn--primary,
.consign-hero .dag-btn--primary,
.contact-hero .dag-btn--primary,
.thankyou-hero .dag-btn--primary,
.about-hero .dag-btn--primary {
    background: var(--color-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-primary) !important;
    padding: 14px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 160px !important;
    line-height: 1.2 !important;
    transition: all 160ms ease !important;
}

.shipping-hero .dag-btn--primary:hover,
.privacy-hero .dag-btn--primary:hover,
.terms-hero .dag-btn--primary:hover,
.refund-hero .dag-btn--primary:hover,
.consign-hero .dag-btn--primary:hover,
.contact-hero .dag-btn--primary:hover,
.thankyou-hero .dag-btn--primary:hover,
.about-hero .dag-btn--primary:hover {
    background: var(--color-primary-hover, #8f0f22) !important;
    border-color: var(--color-primary-hover, #8f0f22) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* GHOST button — outline */
.shipping-hero .dag-btn--ghost,
.privacy-hero .dag-btn--ghost,
.terms-hero .dag-btn--ghost,
.refund-hero .dag-btn--ghost,
.consign-hero .dag-btn--ghost,
.contact-hero .dag-btn--ghost,
.thankyou-hero .dag-btn--ghost,
.about-hero .dag-btn--ghost {
    background: #ffffff !important;
    color: var(--color-ink) !important;
    border: 1px solid var(--p-gray-300, #d4d4d8) !important;
    padding: 14px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 160px !important;
    line-height: 1.2 !important;
    transition: all 160ms ease !important;
}

.shipping-hero .dag-btn--ghost:hover,
.privacy-hero .dag-btn--ghost:hover,
.terms-hero .dag-btn--ghost:hover,
.refund-hero .dag-btn--ghost:hover,
.consign-hero .dag-btn--ghost:hover,
.contact-hero .dag-btn--ghost:hover,
.thankyou-hero .dag-btn--ghost:hover,
.about-hero .dag-btn--ghost:hover {
    background: var(--color-ink) !important;
    border-color: var(--color-ink) !important;
    color: #ffffff !important;
}

/* ===== META INFO (last updated etc) ===== */
.shipping-hero__meta,
.privacy-hero__meta,
.terms-hero__meta,
.refund-hero__meta,
.consign-hero__meta,
.contact-hero__meta,
.thankyou-hero__meta,
.about-hero__meta,
.shipping-hero__last-updated,
.privacy-hero__last-updated,
.terms-hero__last-updated,
.refund-hero__last-updated {
    color: var(--zone-text-faint) !important;
    font-size: 12px !important;
    margin: 16px 0 0 !important;
    display: block;
}

.shipping-hero__last-updated a,
.privacy-hero__last-updated a,
.terms-hero__last-updated a,
.refund-hero__last-updated a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* ===== TYPICAL OPTIONS / SIDEBAR CARD inside hero (shipping page) ===== */
.shipping-hero__panel,
.shipping-hero__card,
.shipping-hero aside,
.shipping-hero .typical-options {
    background: #ffffff !important;
    border: 1px solid var(--zone-border) !important;
    border-left: 3px solid var(--color-primary) !important;
    padding: 24px 28px !important;
    margin: 28px 0 0 !important;
    color: var(--color-ink) !important;
    border-radius: 0 !important;
}

.shipping-hero__panel h2,
.shipping-hero__panel h3,
.shipping-hero__card h3,
.shipping-hero aside h2,
.shipping-hero aside h3 {
    color: var(--color-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 12px !important;
}

.shipping-hero__panel ul,
.shipping-hero__card ul,
.shipping-hero aside ul {
    margin: 0 !important;
    padding: 0 0 0 18px !important;
    list-style: disc !important;
}

.shipping-hero__panel li,
.shipping-hero__card li,
.shipping-hero aside li {
    color: var(--color-ink) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 6px 0 !important;
}

/* ===== INVENTORY HERO override (was dark navy) ===== */
header.inventory-hero,
.dag-inventory header.inventory-hero {
    background: var(--p-gray-50, #fafafa) !important;
    background-image: none !important;
    color: var(--color-ink) !important;
    border-left: 4px solid var(--color-primary);
    border-bottom: 1px solid var(--zone-border);
    padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 56px);
}

header.inventory-hero .inventory-title,
.inventory-title {
    color: var(--color-ink) !important;
    font-size: clamp(32px, 4.5vw, 56px) !important;
    font-weight: 700 !important;
}

header.inventory-hero .inventory-lead,
.inventory-lead {
    color: var(--p-gray-700, #3f3f46) !important;
    font-size: clamp(16px, 1.4vw, 19px) !important;
}

/* ===== Mobile responsive ===== */
@media (max-width: 768px) {
    .shipping-hero,
    .privacy-hero,
    .terms-hero,
    .refund-hero,
    .consign-hero,
    .contact-hero,
    .thankyou-hero,
    .about-hero,
    header.inventory-hero {
        padding: 32px 20px !important;
    }
    
    .shipping-hero h1,
    .privacy-hero h1,
    .terms-hero h1,
    .refund-hero h1,
    .consign-hero h1,
    .contact-hero h1,
    .thankyou-hero h1,
    .about-hero h1,
    .inventory-title {
        font-size: 28px !important;
    }
    
    .shipping-hero__actions,
    .privacy-hero__actions,
    .terms-hero__actions,
    .refund-hero__actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .shipping-hero .dag-btn--primary,
    .shipping-hero .dag-btn--ghost,
    .privacy-hero .dag-btn--primary,
    .privacy-hero .dag-btn--ghost,
    .terms-hero .dag-btn--primary,
    .terms-hero .dag-btn--ghost,
    .refund-hero .dag-btn--primary,
    .refund-hero .dag-btn--ghost {
        width: 100% !important;
    }
}