/**
 * SEO Template Page Styles
 * Inherits main page structure, adds software-specific styling
 */

/* ========================================
   SEO HERO MODIFICATIONS
   ======================================== */

.seo-software-for,
.seo-software-name {
    display: inline;
    font-family: var(--font-display);
    font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9)); /* Match hero-title size */
    font-weight: var(--font-weight-bold);
    
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

.seo-software-for {
    margin-right: 0.15em;
}

.seo-software-name {
    text-decoration: underline;
    text-decoration-thickness: var(--border-width-medium);
    text-underline-offset: 0.2em;
}

/* ========================================
   SEO SOFTWARE-SPECIFIC FEATURE SECTION
   ======================================== */

.seo-software-feature {
    background-color: var(--color-bg-primary);
}

/* Ensure feature-title in SEO section follows guidelines */
.seo-software-feature .feature-title {
    color: var(--color-text-primary);
}

/* Red color for software name in TARGET section */
.seo-software-name-red {
    color: var(--color-error);
}

.seo-feature-list {
    list-style: disc;
    padding-left: 1.2em; /* Align bullets with header text */
    margin: var(--spacing-md) 0 0 0;
}

.seo-feature-list li {
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    color: var(--color-text-secondary); /* Body text should use secondary color */
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
}

/* ========================================
   SEO FAQ SECTION
   ======================================== */

.seo-faq-section {
    background-color: var(--color-bg-secondary);
    /* Reduce excessive feature-section padding */
    padding: var(--spacing-lg) 0 !important;
}

.seo-faq-section .container {
    max-width: 900px;
    margin: 0 auto;
}

.seo-faq-section .feature-grid {
    grid-template-columns: 1fr;
}

.seo-faq-header {
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.seo-faq-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.seo-faq-subtitle {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Category accordion styling for FAQ */
.seo-faq-categories {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Software name highlight in FAQ */
.seo-faq-software-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .seo-software-for,
    .seo-software-name {
        font-size: clamp(calc(2.5rem * 0.9), calc(6vw * 0.9), calc(4.5rem * 0.9)); /* Keep same size as hero-title */
    }
    
    .seo-faq-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}