/*
╔════════════════════════════════════════════════════════════════════╗
║  ROOTED VITALITY, INC.                                             ║
║  File: help-center/articles/styles/articles.css                   ║
║  Purpose: Universal styles for all article pages                  ║
║  Holistic Wellness · Modern Connection Platform                    ║
║  rootedvitality.health | 2025                                         ║
╚════════════════════════════════════════════════════════════════════╝

TABLE OF CONTENTS
  1. CSS Variables & Brand Colors
  2. Root & Base Styles
  3. Hero Section Styles
  4. Container & Layout
  5. Typography Hierarchy
  6. Content Elements
  7. CTA Section
  8. Button Styles
  9. Mobile-First Responsive Design (360px+)
*/

/* ========================================== */
/* 1. CSS VARIABLES & BRAND COLORS */
/* ========================================== */

:root {
    /* PRIMARY COLORS (from Rooted Vitality brand) */
    --rooted-primary: #77883e;         /* Sage green - primary color */
    --rooted-accent: #d4c47c;          /* Herbal gold - secondary accent */
    --rooted-cream: #f8f5e2;           /* Warm cream - backgrounds */
    --rooted-dark: #6b5b47;            /* Earth brown - text */
    
    /* SECONDARY COLORS */
    --rooted-bright-green: #6b9820;    /* Bright accent green */
    --rooted-olive: #5c5438;           /* Dark olive - alternative */
    --rooted-light: #e8e4d6;           /* Light beige - borders */
    --rooted-green-light: #ebf6e8;     /* Light sage - backgrounds */
    --rooted-white: #ffffff;           /* Clean white */
    
    /* TYPOGRAPHY */
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Lora', Georgia, serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* SPACING SYSTEM (8px base) */
    --spacing-xs: 0.5rem;      /* 8px */
    --spacing-sm: 1rem;        /* 16px */
    --spacing-md: 1.5rem;      /* 24px */
    --spacing-lg: 2rem;        /* 32px */
    --spacing-xl: 3rem;        /* 48px */
    --spacing-2xl: 4rem;       /* 64px */
    
    /* SIZING & LAYOUT */
    --max-width: 900px;
    --border-radius: 8px;
    --transition-ease: 0.3s ease;
    
    /* LINE HEIGHTS */
    --line-height-tight: 1.4;
    --line-height-normal: 1.6;
    --line-height-loose: 1.8;
}

/* ========================================== */
/* 2. ROOT & BASE STYLES */
/* ========================================== */

html {
    scroll-behavior: smooth;
    font-family: var(--font-body);
    color: var(--rooted-dark);
    background-color: var(--rooted-white);
    font-size: 16px;
}
body {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: var(--line-height-normal);
    color: var(--rooted-dark);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ============================================================================ */
/* 2. HERO SECTION (DEPRECATED - use back-link instead) */
/* ============================================================================ */

.hero {
    background: linear-gradient(135deg, var(--rooted-primary) 0%, var(--rooted-bright-green) 100%);
    color: var(--rooted-cream);
    padding: var(--spacing-2xl) var(--spacing-lg);
    text-align: center;
    margin: 0;
}

.hero .container {
    max-width: var(--max-width);
    margin: 0 auto;
}

.hero__title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: var(--line-height-tight);
    color: var(--rooted-white);
}

.hero__subtitle {
    font-family: var(--font-body);
    font-size: 1.2rem;
    margin: 0;
    opacity: 0.95;
    line-height: var(--line-height-normal);
}

/* ============================================================================ */
/* 2B. BACK TO HELP CENTER LINK */
/* ============================================================================ */

.article-back-link {
    padding: 0.75rem 0;
    margin: 0;
}

.article-back-link a {
    font-size: 0.9rem;
    color: var(--rooted-primary);
    text-decoration: none;
    border: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
}

.article-back-link a:hover {
    color: var(--rooted-accent);
}

@media (max-width: 768px) {
    .hero__title {
        font-size: 1.8rem;
    }
    
    .hero__subtitle {
        font-size: 1rem;
    }
}

/* ============================================================================ */
/* 3. ARTICLE LAYOUT & CONTAINERS */
/* ============================================================================ */

main {
    margin: 0;
    padding: 0;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem;
}

.article-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rooted-light);
}

.article-section:last-of-type {
    border-bottom: none;
}

.article-section .container {
    padding: 0 var(--spacing-lg);
}

/* ============================================================================ */
/* 4. HEADING HIERARCHY */
/* ============================================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin: 1rem 0 0.75rem 0;
    color: var(--rooted-primary);
}

h1 {
    font-size: 2.5rem;
    margin-top: 0;
}

h2 {
    font-size: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--rooted-accent);
}

h3 {
    font-size: 1.3rem;
    color: var(--rooted-dark);
    margin-top: 0.75rem;
}

h4,
h5,
h6 {
    font-size: 1.1rem;
}

/* ============================================================================ */
/* 5. CONTENT TYPOGRAPHY */
/* ============================================================================ */

p {
    margin: 0.75rem 0;
    line-height: var(--line-height-normal);
    font-size: 1rem;
}

strong,
b {
    font-weight: 600;
    color: var(--rooted-primary);
}

em,
i {
    font-style: italic;
}

/* Article content links only - not footer/header */
main a,
.article-section a {
    color: var(--rooted-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rooted-accent);
    transition: color 0.2s ease;
}

main a:hover,
.article-section a:hover {
    color: var(--rooted-accent);
}

/* ============================================================================ */
/* 6. LISTS & EMPHASIS */
/* ============================================================================ */

ul,
ol {
    margin: var(--spacing-md) 0;
    padding-left: 2rem;
    line-height: var(--line-height-loose);
}

li {
    margin: var(--spacing-sm) 0;
    color: var(--rooted-dark);
}

ul li::marker,
ol li::marker {
    color: var(--rooted-primary);
    font-weight: 600;
}

blockquote {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--rooted-cream);
    border-left: 4px solid var(--rooted-primary);
    font-style: italic;
    color: var(--rooted-dark);
}

/* ============================================================================ */
/* 7. CTA SECTION */
/* ============================================================================ */

.cta-section {
    background: linear-gradient(135deg, var(--rooted-cream) 0%, rgba(248, 245, 226, 0.8) 100%);
    padding: var(--spacing-2xl) 0;
    text-align: center;
    border-top: 3px solid var(--rooted-accent);
}

.cta-section h2 {
    border-bottom: none;
    color: var(--rooted-primary);
}

.cta-section p {
    font-size: 1.1rem;
    margin: var(--spacing-md) 0 var(--spacing-lg) 0;
}

.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--rooted-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-family: var(--font-heading);
    font-weight: 600;
    border: 2px solid var(--rooted-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.btn:hover {
    background: white;
    color: var(--rooted-primary);
    border-color: var(--rooted-primary);
}

.btn--primary {
    background: var(--rooted-primary);
    color: white;
}

.btn--secondary {
    background: transparent;
    color: var(--rooted-primary);
    border-color: var(--rooted-primary);
}

.btn--secondary:hover {
    background: var(--rooted-primary);
    color: white;
}

/* ============================================================================ */
/* 8. RESPONSIVE DESIGN */
/* ============================================================================ */

@media (max-width: 768px) {
    .container {
        padding: var(--spacing-lg);
    }
    
    .article-section .container {
        padding: var(--spacing-md);
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    .hero {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .btn {
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    :root {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    .container {
        padding: var(--spacing-md);
    }
    
    ul,
    ol {
        padding-left: 1.5rem;
    }
}

/* Dark mode styles handled by dark-mode-*.css files */

@media (max-width: 768px) {
    .container {
        background-color: transparent;
    }
    
    .hero {
        padding: var(--spacing-xl) var(--spacing-md);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 480px) {
    :root {
        --rooted-primary: #8fa44a;
        --rooted-accent: #d9cc94;
    }
}

.article-page {
      background: var(--rv-bg, #0b0b0b);
      color: var(--rv-text, rgba(255,255,255,0.92));
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    .article-wrap {
      max-width: 980px;
      margin: 0 auto;
      padding: 3.25rem 1.25rem 4rem;
    }
    .article-hero {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 2rem;
      align-items: start;
      margin-bottom: 2rem;
    }
    @media (max-width: 900px) {
      .article-hero { grid-template-columns: 1fr; }
    }
    .kicker {
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.78rem;
      opacity: 0.8;
      margin-bottom: 0.75rem;
    }
    .article-title {
      font-family: Lora, Georgia, serif;
      font-weight: 400;
      font-size: 2.4rem;
      line-height: 1.15;
      margin: 0 0 0.75rem 0;
    }
    .article-subtitle {
      font-size: 1.05rem;
      opacity: 0.85;
      margin: 0 0 1.25rem 0;
      line-height: 1.6;
      max-width: 56ch;
    }
    .meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1rem;
      align-items: center;
      font-size: 0.9rem;
      opacity: 0.85;
    }
    .meta-pill {
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 999px;
      padding: 0.35rem 0.7rem;
      backdrop-filter: blur(6px);
    }
    .video-card {
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,0.03);
      box-shadow: 0 18px 60px rgba(0,0,0,0.35);
    }
    .video-card__top {
      padding: 1.1rem 1.1rem 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .video-card__title {
      font-weight: 700;
      margin: 0 0 0.35rem 0;
      font-size: 1rem;
    }
    .video-card__note {
      margin: 0;
      font-size: 0.9rem;
      opacity: 0.82;
      line-height: 1.5;
    }
    .video-placeholder {
      aspect-ratio: 16 / 9;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 25% 20%, rgba(212,196,124,0.20), transparent 55%),
                  radial-gradient(circle at 70% 60%, rgba(255,255,255,0.06), transparent 55%),
                  rgba(0,0,0,0.35);
    }
    .video-placeholder__inner {
      text-align: center;
      padding: 1.25rem;
      max-width: 40ch;
    }
    .video-placeholder__badge {
      display: inline-block;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      padding: 0.35rem 0.75rem;
      font-size: 0.82rem;
      margin-bottom: 0.75rem;
      opacity: 0.9;
    }
    .video-placeholder__cta {
      display: inline-flex;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.9rem;
      padding: 0.7rem 0.95rem;
      border-radius: 12px;
      border: 1px solid rgba(212,196,124,0.35);
      background: rgba(212,196,124,0.10);
      color: rgba(255,255,255,0.92);
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
    }
    .video-placeholder__cta:hover {
      background: rgba(212,196,124,0.16);
    }
    .pull-quote {
      margin: 1.75rem 0 1.5rem;
      padding: 1.25rem 1.25rem;
      border-left: 4px solid rgba(212,196,124,0.55);
      background: rgba(255,255,255,0.03);
      border-radius: 12px;
      font-family: Lora, Georgia, serif;
      font-size: 1.2rem;
      line-height: 1.6;
      opacity: 0.95;
    }
    .article-body {
      max-width: 72ch;
      font-size: 1.02rem;
      line-height: 1.85;
      opacity: 0.92;
    }
    .article-body p { margin: 0 0 1.05rem 0; }
    .article-body h2 {
      margin: 2.1rem 0 0.85rem 0;
      font-size: 1.2rem;
      letter-spacing: 0.02em;
    }
    .article-actions {
      margin-top: 2.25rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      align-items: center;
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 1.05rem;
      border-radius: 12px;
      border: 1px solid rgba(212,196,124,0.45);
      background: rgba(212,196,124,0.12);
      color: rgba(255,255,255,0.92);
      font-weight: 700;
      text-decoration: none;
    }
    .btn-primary:hover { background: rgba(212,196,124,0.18); }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.85rem 1.05rem;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.92);
      font-weight: 700;
      text-decoration: none;
    }
    .btn-secondary:hover { background: rgba(255,255,255,0.06); }

    .signature {
      margin-top: 2rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(255,255,255,0.12);
      opacity: 0.95;
      max-width: 72ch;
    }
    .signature strong { font-weight: 700; }
    .disclaimer {
      margin-top: 1.75rem;
      font-size: 0.88rem;
      opacity: 0.7;
      line-height: 1.6;
      max-width: 72ch;
    }
    .skip-link {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .skip-link:focus {
      left: 1rem;
      top: 1rem;
      width: auto;
      height: auto;
      padding: 0.6rem 0.9rem;
      z-index: 9999;
      border-radius: 10px;
      background: rgba(0,0,0,0.9);
      border: 1px solid rgba(255,255,255,0.2);
      color: #fff;
    }