/**
 * ADVOCATE Component Utilities
 *
 * This file defines reusable CSS utilities for ADVOCATE landing pages.
 * Extends the warm parchment design system with consistent components.
 *
 * USAGE:
 * - Background: .bg-advocate-parchment, .bg-advocate-parchment-dark
 * - Text: .text-advocate-ink, .text-advocate-ink-muted, .text-advocate-amber
 * - Borders: .border-advocate-ink-light, .border-advocate-amber
 * - Components: .advocate-card, .advocate-badge, .advocate-icon-box
 *
 * IMPORTANT: Use these utility classes instead of inline styles.
 * Never use style="background-color: var(--advocate-parchment);" in templates.
 *
 * Color Palette (Warm Parchment Theme):
 * - parchment: #faf6f0 (Primary background)
 * - parchment-dark: #f5ede0 (Section backgrounds, cards)
 * - ink: #2c1810 (Headings)
 * - ink-muted: #5c4a40 (Body text)
 * - ink-light: #8a7a6c (Borders, subtle text)
 * - amber: #c17f24 (Accent, CTAs, icons)
 * - amber-deep: #8b5a1b (Hover states)
 */

/* ============================================
   BACKGROUND UTILITIES
   ============================================ */

.bg-advocate-parchment {
    background-color: var(--advocate-parchment);
}

/* Consistent dots background pattern - use CSS for pixel-perfect sizing */
.advocate-dots-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: radial-gradient(circle at center, var(--advocate-ink) 5px, transparent 5px);
    background-size: 32px 32px;
    background-position: 0 0;
}

.bg-advocate-parchment-dark {
    background-color: var(--advocate-parchment-dark);
}

.bg-advocate-amber {
    background-color: var(--advocate-amber);
}

.bg-advocate-amber-deep {
    background-color: var(--advocate-amber-deep);
}

.bg-advocate-ink {
    background-color: var(--advocate-ink);
}

/* Background with subtle amber tint (for icon boxes) */
.bg-advocate-amber-subtle {
    background-color: rgba(193, 127, 36, 0.15);
}

/* ============================================
   TEXT UTILITIES
   ============================================ */

.text-advocate-ink {
    color: var(--advocate-ink);
}

.text-advocate-ink-muted {
    color: var(--advocate-ink-muted);
}

.text-advocate-ink-light {
    color: var(--advocate-ink-light);
}

.text-advocate-amber {
    color: var(--advocate-amber);
}

.text-advocate-amber-deep {
    color: var(--advocate-amber-deep);
}

/* Gradient text (amber to deep amber) */
.text-gradient-advocate {
    background-image: linear-gradient(to right, var(--advocate-amber), var(--advocate-amber-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* RTL variant */
.text-gradient-advocate-rtl {
    background-image: linear-gradient(to left, var(--advocate-amber), var(--advocate-amber-deep));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================
   BORDER UTILITIES
   ============================================ */

.border-advocate-ink-light {
    border-color: var(--advocate-ink-light);
}

.border-advocate-amber {
    border-color: var(--advocate-amber);
}

.border-advocate-amber-subtle {
    border-color: rgba(193, 127, 36, 0.2);
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

/**
 * Base card styling
 * Use for feature cards, navigation cards, value prop cards
 */
.advocate-card {
    background-color: var(--advocate-parchment);
    border: 1px solid var(--advocate-ink-light);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    transition: all 0.2s ease;
}

.advocate-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/**
 * Card on dark background variant
 */
.advocate-card-dark {
    background-color: var(--advocate-parchment-dark);
    border-color: rgba(193, 127, 36, 0.2);
}

/**
 * Large card variant (for feature cards)
 */
.advocate-card-lg {
    padding: 2rem; /* p-8 */
    border-radius: 1rem; /* rounded-2xl */
}

/**
 * Navigation card (clickable, with arrow indicator)
 */
.advocate-nav-card {
    display: block;
    background-color: var(--advocate-parchment-dark);
    border: 2px solid rgba(193, 127, 36, 0.2);
    border-radius: 1rem;
    padding: 1.75rem;
    height: 100%;
    transition: all 0.25s ease;
    cursor: pointer;
}

.advocate-nav-card:hover {
    border-color: var(--advocate-amber);
    box-shadow: 0 12px 24px -6px rgba(193, 127, 36, 0.2), 0 6px 12px -4px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.7);
}

.advocate-nav-card:hover .advocate-arrow {
    transform: translateX(0.25rem);
}

/* ============================================
   ICON BOX COMPONENT
   ============================================ */

/**
 * Default icon box (12x12, amber background)
 */
.advocate-icon-box {
    width: 3rem; /* w-12 */
    height: 3rem; /* h-12 */
    border-radius: 0.5rem; /* rounded-lg */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(193, 127, 36, 0.15);
    flex-shrink: 0;
}

/**
 * Large icon box (16x16)
 */
.advocate-icon-box-lg {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    border-radius: 0.75rem; /* rounded-xl */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--advocate-amber);
    flex-shrink: 0;
}

/**
 * Small icon box (10x10)
 */
.advocate-icon-box-sm {
    width: 2.5rem; /* w-10 */
    height: 2.5rem; /* h-10 */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(193, 127, 36, 0.15);
    flex-shrink: 0;
}

/* ============================================
   BADGE COMPONENTS
   ============================================ */

/**
 * Primary badge (amber background)
 */
.advocate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px; /* rounded-full */
    background-color: var(--advocate-amber);
    border: 2px solid var(--advocate-amber-deep);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/**
 * Secondary badge (parchment background)
 */
.advocate-badge-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background-color: var(--advocate-parchment-dark);
    border: 1px solid var(--advocate-ink-light);
    color: var(--advocate-ink-muted);
    font-weight: 600;
    font-size: 1rem;
}

/**
 * Small badge
 */
.advocate-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background-color: rgba(193, 127, 36, 0.15);
    color: var(--advocate-amber);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/**
 * Primary CTA button (amber)
 */
.advocate-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: var(--advocate-amber);
    color: white;
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.2s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.advocate-btn-primary:hover {
    background-color: var(--advocate-amber-deep);
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(193, 127, 36, 0.3);
}

/**
 * Secondary CTA button (outline)
 */
.advocate-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: transparent;
    color: var(--advocate-ink);
    font-weight: 600;
    border: 2px solid var(--advocate-ink);
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.advocate-btn-secondary:hover {
    background-color: var(--advocate-ink);
    color: white;
}

/* ============================================
   SECTION UTILITIES
   ============================================ */

/**
 * Section with transparent background (inherits from wrapper)
 * Updated: Minimal top padding for tight hero-to-section transition
 */
.advocate-section {
    background-color: transparent;
    padding-top: 0.5rem;    /* 8px - minimal top */
    padding-bottom: 2rem;   /* 32px - normal bottom */
}

@media (min-width: 1024px) {
    .advocate-section {
        padding-top: 0.75rem; /* 12px - minimal top */
        padding-bottom: 2.5rem; /* 40px - normal bottom */
    }
}

/**
 * Section with transparent background (dark variant)
 */
.advocate-section-dark {
    background-color: transparent;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
}

@media (min-width: 1024px) {
    .advocate-section-dark {
        padding-top: 0.75rem;
        padding-bottom: 2.5rem;
    }
}

/* ============================================
   COMPACT SPACING UTILITIES
   For above-the-fold content optimization
   ============================================ */

/**
 * Compact hero section - reduced vertical padding
 * Use for landing pages where content visibility matters
 */
.advocate-hero-compact {
    padding-top: 2.5rem;    /* 40px */
    padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
    .advocate-hero-compact {
        padding-top: 3rem;    /* 48px */
        padding-bottom: 3rem;
    }
}

/**
 * Compact section - tighter spacing for follow-up sections
 */
.advocate-section-compact {
    background-color: transparent;
    padding-top: 2rem;      /* 32px */
    padding-bottom: 2rem;
}

@media (min-width: 1024px) {
    .advocate-section-compact {
        padding-top: 3rem;    /* 48px */
        padding-bottom: 3rem;
    }
}

/**
 * Compact section header - tighter margin below
 */
.advocate-section-header-compact {
    margin-bottom: 1.5rem;  /* 24px - reduced from 40px */
}

/**
 * Compact card grid - tighter gaps
 */
.advocate-grid-compact {
    gap: 1.25rem;  /* 20px */
}

@media (min-width: 768px) {
    .advocate-grid-compact {
        gap: 1.5rem;  /* 24px */
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

/**
 * Arrow animation for navigation cards
 */
.advocate-arrow {
    transition: transform 0.2s ease;
}

/**
 * Hover lift effect
 */
.advocate-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.advocate-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

/**
 * Section title styling
 */
.advocate-section-title {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--advocate-ink);
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .advocate-section-title {
        font-size: 1.875rem;
    }
}

/**
 * Section subtitle styling
 */
.advocate-section-subtitle {
    font-size: 1.125rem;
    color: var(--advocate-ink-muted);
}

/**
 * Card title styling
 */
.advocate-card-title {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--advocate-ink);
    margin-bottom: 0.5rem;
}

/**
 * Large card title
 */
.advocate-card-title-lg {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--advocate-ink);
    margin-bottom: 0.75rem;
}

/**
 * Card description styling
 */
.advocate-card-description {
    color: var(--advocate-ink-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

/**
 * CTA link styling (amber button-like)
 */
.advocate-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    background-color: var(--advocate-amber);
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(193, 127, 36, 0.25);
}

.advocate-cta-link:hover {
    background-color: var(--advocate-amber-deep);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(193, 127, 36, 0.35);
}

.advocate-cta-link:hover .advocate-arrow {
    transform: translateX(0.25rem);
}

/* ============================================
   CONTACT CARD THEME (Anton Card)
   Updated to match warm parchment theme
   ============================================ */

/**
 * CEO card with warm parchment theme
 */
.advocate-ceo-card-warm {
    background: linear-gradient(135deg, rgba(250, 246, 240, 0.98) 0%, rgba(245, 237, 224, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(193, 127, 36, 0.25);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 8px 32px -8px rgba(193, 127, 36, 0.15),
        0 20px 60px -20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.advocate-ceo-card-warm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--advocate-amber) 0%, var(--advocate-ink) 50%, var(--advocate-amber) 100%);
    opacity: 0.9;
}

.advocate-ceo-card-warm:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.6),
        0 12px 40px -8px rgba(193, 127, 36, 0.2),
        0 30px 80px -20px rgba(0, 0, 0, 0.1);
}

/**
 * Photo wrapper with warm gradient ring
 */
.advocate-photo-ring {
    position: relative;
}

.advocate-photo-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--advocate-amber) 0%, var(--advocate-ink) 50%, var(--advocate-amber) 100%);
    opacity: 0.8;
    animation: advocate-ring-spin 8s linear infinite;
}

.advocate-photo-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(193, 127, 36, 0.3) 0%, rgba(44, 24, 16, 0.3) 100%);
    filter: blur(12px);
    opacity: 0.6;
}

@keyframes advocate-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/**
 * Social link styling (warm theme)
 */
.advocate-social-link-warm {
    position: relative;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--advocate-ink-muted);
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.advocate-social-link-warm::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, rgba(193, 127, 36, 0.1) 0%, rgba(44, 24, 16, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.advocate-social-link-warm:hover {
    color: var(--advocate-amber);
}

.advocate-social-link-warm:hover::before {
    opacity: 1;
}

/**
 * Contact method cards (Schedule, Email, etc.)
 */
.advocate-contact-card-warm {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.advocate-contact-card-warm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.advocate-contact-card-warm:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 20px 40px -10px var(--card-shadow-color, rgba(193, 127, 36, 0.3)),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.advocate-contact-card-warm:hover .card-icon {
    transform: scale(1.1) translateY(-2px);
}

/* Card color variants */
.advocate-contact-schedule {
    --card-shadow-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.advocate-contact-email {
    --card-shadow-color: rgba(193, 127, 36, 0.4);
    background: linear-gradient(135deg, var(--advocate-amber) 0%, var(--advocate-amber-deep) 100%);
}

.advocate-contact-whatsapp {
    --card-shadow-color: rgba(37, 211, 102, 0.4);
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}

.advocate-contact-telegram {
    --card-shadow-color: rgba(56, 189, 248, 0.4);
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
}