/*
 * LifeHustleAI Global Design System — Phase 2 (Normalized)
 *
 * Load BEFORE page‑specific CSS.
 */

/* =========================================================
   FULL WIDTH WORDPRESS CONTENT RESET (unchanged)
   ========================================================= */
body.lh-site #content,
body.lh-site #content > .ast-container,
body.lh-site #primary,
body.lh-site .content-area,
body.lh-site .site-main,
body.lh-site article,
body.lh-site .entry-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

:root {
    /* Brand (unchanged) */
    --lh-navy: #0B1E33;
    --lh-navy-2: #102B47;
    --lh-navy-3: #173A5C;
    --lh-blue: #21759B;
    --lh-green: #10B981;
    --lh-orange: #F59E0B;
    --lh-orange-dark: #D97706;
    --lh-teal: #2DD4BF;
    --lh-teal-dark: #0F766E;
    --lh-whatsapp: #25D366;

    /* Text & Surfaces */
    --lh-text: #0F1724;
    --lh-text-soft: #334155;
    --lh-muted: #64748B;
    --lh-white: #FFFFFF;
    --lh-bg: #FFFFFF;
    --lh-surface: #F7F9FC;        /* lighter than previous #F8FAFC */
    --lh-surface-2: #F1F5F9;
    --lh-border: #E5E7EB;          /* softer border */
    --lh-border-strong: #CBD5E1;

    /* Semantic */
    --lh-success: #10B981;
    --lh-warning: #F59E0B;
    --lh-danger: #EF4444;
    --lh-info: #21759B;

    /* Layout */
    --lh-container: min(1200px, 95%);
    --lh-container-wide: min(1280px, 97%);
    --lh-container-narrow: min(800px, 92%);  /* 760–800px for legal/blog */
    --lh-gutter-desktop: 20px;
    --lh-gutter-tablet: 18px;
    --lh-gutter-mobile: 14px;

    /* Radius – normalized */
    --lh-radius-xs: 8px;
    --lh-radius-sm: 10px;          /* buttons, inputs */
    --lh-radius-md: 16px;          /* standard cards */
    --lh-radius-lg: 24px;          /* marketing cards, hero containers */
    --lh-radius-xl: 32px;
    --lh-radius-pill: 999px;       /* badges, pills */

    /* Shadows – used sparingly */
    --lh-shadow-xs: 0 1px 4px rgba(15,23,42,.04);
    --lh-shadow-sm: 0 4px 16px rgba(15,23,42,.06);
    --lh-shadow-md: 0 10px 30px rgba(15,23,42,.08);
    --lh-shadow-lg: 0 20px 50px rgba(15,23,42,.12);

    /* Typography */
    --lh-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --lh-font-heading: Sora, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --lh-h1: clamp(2.35rem, 4vw, 3.25rem);  /* ~56px max */
    --lh-h2: clamp(1.8rem, 3vw, 2.5rem);    /* ~40px max */
    --lh-h3: clamp(1.25rem, 2vw, 1.6rem);   /* ~24px */
    /* h4 = 1.15rem (~18.4px) */

    /* Spacing – keep as is */
    --lh-space-1: 8px;
    --lh-space-2: 12px;
    --lh-space-3: 16px;
    --lh-space-4: 20px;
    --lh-space-5: 24px;
    --lh-space-6: 32px;
    --lh-space-7: 40px;
    --lh-space-8: 48px;
    --lh-space-9: 64px;
    --lh-space-10: 80px;

    /* Aliases for inline styles */
    --deep-blue: var(--lh-navy);
    --green: var(--lh-green);
    --orange: var(--lh-orange);
    --teal: var(--lh-teal);
    --surface: var(--lh-surface);
    --gray-400: #98A2B3;
}

/* ---------- Reset (unchanged) ---------- */
.lh-site {
    color: var(--lh-text);
    background: var(--lh-bg);
    font-family: var(--lh-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.lh-site *,
.lh-site *::before,
.lh-site *::after { box-sizing: border-box; }
.lh-site img { max-width: 100%; height: auto; }
.lh-site button,
.lh-site input,
.lh-site select,
.lh-site textarea { font: inherit; }
.lh-site a { color: inherit; }
.lh-site p,
.lh-site ul,
.lh-site ol { max-width: 78ch; }

.lh-site h1,
.lh-site h2,
.lh-site h3,
.lh-site h4,
.lh-site h5,
.lh-site h6 {
    margin-top: 0;
    color: var(--lh-navy);
    font-family: var(--lh-font-heading);
    line-height: 1.12;          /* tighter for headings */
    letter-spacing: -0.015em;
}
.lh-site h1 { font-size: var(--lh-h1); font-weight: 700; }
.lh-site h2 { font-size: var(--lh-h2); font-weight: 700; }
.lh-site h3 { font-size: var(--lh-h3); font-weight: 600; }
.lh-site h4 { font-size: 1.15rem; font-weight: 600; }
.lh-site p { color: var(--lh-text-soft); }
.lh-site::selection {
    color: var(--lh-white);
    background: var(--lh-teal);
}

/* ---------- Containers ---------- */
.lh-container {
    width: min(var(--lh-container), calc(100% - (var(--lh-gutter-desktop) * 2)));
    margin-inline: auto;
}
.lh-container--wide {
    width: min(var(--lh-container-wide), calc(100% - (var(--lh-gutter-desktop) * 2)));
    margin-inline: auto;
}
.lh-container--narrow {
    width: min(var(--lh-container-narrow), calc(100% - (var(--lh-gutter-desktop) * 2)));
    margin-inline: auto;
}

/* ---------- Sections (spacing normalized) ---------- */
.lh-section {
    padding-block: var(--lh-space-9);    /* 64px – normal */
}
.lh-section--compact {
    padding-block: var(--lh-space-7);    /* 40px – small */
}
.lh-section--large {
    padding-block: var(--lh-space-10);   /* 80px – large */
}
.lh-section--dark {
    color: var(--lh-white);
    background: linear-gradient(135deg, var(--lh-navy) 0%, var(--lh-navy-3) 100%);
}
.lh-section--dark h1,
.lh-section--dark h2,
.lh-section--dark h3,
.lh-section--dark p { color: var(--lh-white); }

/* ---------- Cards (page‑specific variants) ---------- */
.lh-card {
    background: var(--lh-white);
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius-md);   /* 16px – standard */
    padding: var(--lh-space-5);           /* 24px */
    /* no shadow by default – border‑driven */
}
.lh-card--soft {
    background: var(--lh-surface);
}
.lh-card--elevated {
    box-shadow: var(--lh-shadow-sm);      /* subtle hover only */
}
.lh-card--marketing {
    padding: 28px 32px;                   /* 28–32px */
    border-radius: var(--lh-radius-lg);   /* 24px */
    border: 1px solid var(--lh-border);
    box-shadow: var(--lh-shadow-xs);      /* very subtle */
}
.lh-card--dashboard {
    padding: var(--lh-space-4);           /* 20px */
    border-radius: 14px;                  /* 14px */
    border: 1px solid var(--lh-border);
    box-shadow: none;
}
.lh-card--blueprint {
    padding: var(--lh-space-5);           /* 24px */
    border-radius: var(--lh-radius-md);   /* 16px */
    border: 1px solid var(--lh-border);
    box-shadow: var(--lh-shadow-xs);
}
.lh-card--dark {
    color: var(--lh-white);
    background: linear-gradient(135deg, var(--lh-navy) 0%, var(--lh-navy-2) 100%);
    border-color: rgba(255,255,255,.08);
}
.lh-card--dark h2,
.lh-card--dark h3,
.lh-card--dark p { color: var(--lh-white); }

/* ---------- Buttons (normalized variants) ---------- */
/* Base button – resets only */
.lh-btn,
.lh-site .lh-btn-primary,
.lh-site .lh-btn-secondary,
.lh-site .lh-button,
.lh-site .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--lh-radius-sm);   /* 10px */
    font-family: var(--lh-font-body);
    font-weight: 600;                     /* 600 (not 750) */
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

/* Primary CTA – high‑impact (orange) – keep as .lh-btn-primary */
.lh-btn-primary,
.lh-site .lh-btn-primary,
.lh-site .btn-primary {
    height: 52px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    background: var(--lh-orange);
    color: var(--lh-navy);                /* navy text on orange */
    box-shadow: 0 8px 18px rgba(245,158,11,.18);
}
.lh-btn-primary:hover,
.lh-site .lh-btn-primary:hover,
.lh-site .btn-primary:hover {
    background: var(--lh-orange-dark);
    color: var(--lh-navy);
    transform: translateY(-1px);
}

/* Highlight CTA – navy background, white text */
.lh-btn-highlight {
    height: 52px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    background: var(--lh-navy);
    color: var(--lh-white);
    border: 1px solid var(--lh-navy);
}
.lh-btn-highlight:hover {
    background: var(--lh-navy-2);
    color: var(--lh-white);
    transform: translateY(-1px);
}

/* Secondary – white with navy border */
.lh-btn-secondary,
.lh-site .lh-btn-secondary {
    height: 52px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
    background: var(--lh-white);
    color: var(--lh-navy);
    border: 1px solid var(--lh-navy);
}
.lh-btn-secondary:hover,
.lh-site .lh-btn-secondary:hover {
    background: var(--lh-surface);
    border-color: var(--lh-teal);
}

/* Utility / dashboard button – smaller */
.lh-btn-utility {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--lh-radius-sm);
    border: 1px solid var(--lh-border);
    background: var(--lh-white);
    color: var(--lh-text);
}
.lh-btn-utility:hover {
    background: var(--lh-surface);
    border-color: var(--lh-teal);
}

/* Form submit – full width */
.lh-btn-submit {
    height: 52px;
    width: 100%;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--lh-radius-sm);
    border: none;
    background: var(--lh-orange);
    color: var(--lh-navy);
    cursor: pointer;
}
.lh-btn-submit:hover {
    background: var(--lh-orange-dark);
}

/* Success / danger (kept) */
.lh-btn-success {
    background: var(--lh-green);
    color: var(--lh-white);
}
.lh-btn-danger {
    background: var(--lh-danger);
    color: var(--lh-white);
}

/* Mobile CTA – full width */
@media (max-width: 767px) {
    .lh-btn-full-mobile {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Badges ---------- */
.lh-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--lh-radius-pill);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
}
.lh-badge--verified,
.lh-badge--success {
    color: #047857;
    background: rgba(16,185,129,.10);
    border-color: rgba(16,185,129,.16);
}
.lh-badge--warning {
    color: #92400E;
    background: rgba(245,158,11,.11);
    border-color: rgba(245,158,11,.18);
}
.lh-badge--danger {
    color: #991B1B;
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.16);
}
.lh-badge--teal {
    color: var(--lh-teal-dark);
    background: rgba(45,212,191,.11);
    border-color: rgba(45,212,191,.18);
}

/* ---------- Forms (unchanged) ---------- */
.lh-site input,
.lh-site select,
.lh-site textarea {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    color: var(--lh-text);
    background: var(--lh-white);
    border: 1px solid var(--lh-border-strong);
    border-radius: var(--lh-radius-sm);
}
.lh-site textarea {
    min-height: 110px;
    resize: vertical;
}
.lh-site input:focus,
.lh-site select:focus,
.lh-site textarea:focus {
    outline: 0;
    border-color: var(--lh-teal);
    box-shadow: 0 0 0 3px rgba(45,212,191,.14);
}
.lh-site label {
    color: var(--lh-navy);
    font-weight: 600;
}

/* ---------- Tables ---------- */
.lh-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--lh-border);
    border-radius: var(--lh-radius-md);
    background: var(--lh-white);
}
.lh-table-wrap > table {
    min-width: 760px;
}

/* ---------- Accessibility ---------- */
.lh-site a:focus-visible,
.lh-site button:focus-visible,
.lh-site input:focus-visible,
.lh-site select:focus-visible,
.lh-site textarea:focus-visible {
    outline: 3px solid rgba(45,212,191,.45);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lh-site *,
    .lh-site *::before,
    .lh-site *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Responsive (global) ---------- */
@media (max-width: 1100px) {
    .lh-container,
    .lh-container--wide,
    .lh-container--narrow {
        width: min(100% - (var(--lh-gutter-tablet) * 2), var(--lh-container));
    }
    .lh-section {
        padding-block: var(--lh-space-8);   /* 48px */
    }
    .lh-section--large {
        padding-block: var(--lh-space-9);   /* 64px */
    }
}
@media (max-width: 767px) {
    .lh-container,
    .lh-container--wide,
    .lh-container--narrow {
        width: calc(100% - (var(--lh-gutter-mobile) * 2));
    }
    .lh-section {
        padding-block: var(--lh-space-7);   /* 40px */
    }
    .lh-section--compact {
        padding-block: var(--lh-space-6);   /* 32px */
    }
    .lh-section--large {
        padding-block: var(--lh-space-8);   /* 48px */
    }
    .lh-card {
        padding: 20px;
        border-radius: var(--lh-radius-md);
    }
    .lh-card--marketing {
        padding: 24px 20px;
        border-radius: var(--lh-radius-md);
    }
    .lh-card--dashboard {
        padding: 18px;
    }
    .lh-site h1 {
        font-size: clamp(2.05rem, 9vw, 2.55rem);
    }
    .lh-site h2 {
        font-size: clamp(1.65rem, 7vw, 2rem);
    }
    .lh-site h3 {
        font-size: 1.25rem;
    }
    .lh-btn,
    .lh-btn-primary,
    .lh-btn-highlight,
    .lh-btn-secondary,
    .lh-btn-submit {
        min-height: 48px;   /* slightly smaller on mobile */
        height: auto;       /* allow content to dictate */
        padding: 0 20px;
    }
}
@media (max-width: 480px) {
    .lh-card {
        padding: 17px;
    }
    .lh-card--dashboard {
        padding: 16px;
    }
    .lh-site p {
        line-height: 1.65;
    }
}

/* ---------- Application width (unchanged) ---------- */
body.lh-site .lh-page-shell,
body.lh-site .lh-homepage {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}
body.lh-site,
body.lh-site #page,
body.lh-site #content,
body.lh-site .lh-page-shell,
body.lh-site .lh-homepage {
    overflow-x: clip;
}