/*
 Theme Name:   RevStack Child
 Theme URI:    https://revstack.org
 Description:  Astra Child Theme for RevStack
 Author:       You
 Author URI:   https://revstack.org
 Template:     astra
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  revstack-child
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Global Setup (Variables, Body, Typography)
2.0 Reusable Components (Containers, Buttons, Subtitles)
3.0 Layout & Astra Overrides
4.0 Homepage Sections
    4.1 Hero Section
    4.2 Who We Help Section
    4.3 Framework Section
    4.4 Core Value Proposition Section
    4.5 How It Works Section
    4.6 Final CTA Section
    4.7 Background Aesthetics
5.0 Responsive Styles (Tablet & Mobile)
--------------------------------------------------------------*/

/* 1.0 Global Setup
--------------------------------------------------------------*/
:root {
    /* Brand Colors */
    --color-primary: #1F2937; /* Dark Gray-Blue */
    --color-accent: #3B82F6; /* Bright Blue */
    --color-secondary: #F59E0B; /* Amber/Gold */
    --color-success: #10B981; /* Green */
    --color-error: #EF4444; /* Red */
    --color-background: #F9FAFB; /* Very Light Gray */
    --color-text: #111827; /* Near Black */
    --color-text-muted: #4B5563; /* Medium Gray */
    --color-white: #FFFFFF;
    --color-border: #E5E7EB;
    --color-light-gray: #F3F4F6;

    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'IBM Plex Sans', sans-serif;

    /* Spacing & Layout */
    --site-container-width: 1140px;
    --section-padding: 90px 0;
    --card-border-radius: 12px;
    --button-border-radius: 8px;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.6;
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 3.5rem; margin-bottom: 20px; }
h2 { font-size: 2.75rem; margin-bottom: 20px; text-align: center; }
h3 { font-size: 1.5rem; margin-bottom: 15px; }
h4 { font-size: 1.2rem; margin-bottom: 12px; }
h5 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
p { margin-bottom: 1rem; color: var(--color-text-muted); }
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover { color: #2563EB; }

/* 2.0 Reusable Components
--------------------------------------------------------------*/
.container {
    max-width: var(--site-container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--button-border-radius);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
}
.btn-primary:hover {
    background-color: #2563EB;
    color: var(--color-white);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-border);
}
.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-large {
    padding: 18px 36px;
    font-size: 18px;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    max-width: 750px;
    margin: 0 auto 60px auto;
    text-align: center;
}

/* 3.0 Layout & Astra Overrides
--------------------------------------------------------------*/
.page-template-homepage .site-content > .ast-container,
.page-template-homepage .entry-content,
.page-template-homepage main.site-main {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-template-homepage #primary.content-area {
    margin: 0;
    padding: 0;
}

/* 4.0 Homepage Sections
--------------------------------------------------------------*/

/* 4.1 Hero Section */
.hero-section {
    padding: 120px 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}

.hero-section h1 { max-width: 800px; margin-left: auto; margin-right: auto; }

.hero-section .subtitle {
    font-size: 1.25rem;
    color: var(--color-text-muted);
    max-width: 700px;
    margin: 0 auto 40px;
}

.hero-section .hero-actions a:first-child { margin-right: 15px; }

/* 4.2 Who We Help Section */
.who-we-help-section {
    padding: var(--section-padding);
    background-color: var(--color-background);
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.profile-card {
    background: var(--color-white);
    padding: 30px;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(229, 231, 235, 0.7);
}

.profile-card .icon { font-size: 2rem; margin-bottom: 15px; display: block; }
.profile-card h4 { color: var(--color-primary); margin-bottom: 8px; }
.profile-card p { font-size: 16px; line-height: 1.5; margin-bottom: 0; }

/* 4.3 Framework Section */
.framework-section {
    padding: var(--section-padding);
    border-bottom: 1px solid var(--color-border);
}

.framework-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.pillar-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--card-border-radius);
    padding: 40px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    border-color: var(--color-accent);
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease-in-out;
}

.pillar-card:hover::before { transform: scaleX(1); }
.pillar-icon { font-size: 3rem; margin-bottom: 20px; display: block; }
.pillar-card h3 { margin-bottom: 15px; color: var(--color-primary); text-align: center; }
.pillar-content p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; text-align: left; }

.pillar-features { list-style: none; padding: 0; margin: 0; }
.pillar-features li {
    padding: 8px 0 8px 20px;
    font-size: 15px;
    color: var(--color-text-muted);
    position: relative;
    text-align: left;
}
.pillar-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: 600;
}

.results-highlight {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    padding: 40px;
    border-radius: var(--card-border-radius);
    border: 1px solid #BAE6FD;
    max-width: 800px;
    margin: 40px auto 0;
}
.results-highlight h4 { color: var(--color-primary); margin-bottom: 15px; font-size: 1.4rem; }
.results-highlight p { font-size: 17px; line-height: 1.6; margin-bottom: 0; color: var(--color-text); }

/* 4.4 Core Value Proposition Section */
.value-prop-section {
    padding: var(--section-padding);
    background-color: var(--color-background);
}

.transformation-grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.transformation-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: stretch; /* AESTHETIC: Make cards equal height */
}

.before-state, .after-state {
    padding: 35px;
    border-radius: var(--card-border-radius);
    border: 1px solid;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.before-state:hover, .after-state:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
.before-state { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); border-color: #FECACA; }
.after-state { background: linear-gradient(135deg, #F0F9FF 0%, #DBEAFE 100%); border-color: #93C5FD; }

.state-label {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}
.state-label.before { background-color: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
.state-label.after { background-color: #DBEAFE; color: #2563EB; border: 1px solid #93C5FD; }

.before-state h4, .after-state h4 { margin-bottom: 12px; font-size: 1.25rem; color: var(--color-primary); }
.before-state p, .after-state p { margin-bottom: 20px; font-size: 16px; line-height: 1.6; color: var(--color-text); }

.pain-indicators, .benefit-indicators { display: flex; flex-direction: column; gap: 8px; }
.pain-point, .benefit-point { font-size: 14px; font-weight: 500; padding: 4px 0; }
.pain-point { color: #DC2626; }
.benefit-point { color: #059669; }

.transformation-arrow {
    font-size: 2rem;
    color: var(--color-accent);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 4.5 How It Works Section */
.how-it-works-section {
    padding: var(--section-padding);
    border-bottom: 1px solid var(--color-border);
}

.process-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
}

.phase-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--card-border-radius);
    padding: 40px;
    width: 100%;
    display: flex;
    gap: 30px;
    transition: all 0.3s ease;
}
.phase-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}
.phase-header { flex-shrink: 0; }
.phase-number {
    width: 60px; height: 60px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    margin-bottom: 10px;
}
.phase-duration {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
}
.phase-content h3 { margin-top: 0; margin-bottom: 10px; }
.phase-description { font-size: 17px; margin-bottom: 25px; }

.deliverables {
    background-color: var(--color-light-gray);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.deliverables h5 { color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.5px; font-size: 14px; margin-bottom: 15px; }
.deliverables ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.deliverables ul li { font-size: 15px; color: var(--color-text-muted); position: relative; padding-left: 22px; }
.deliverables ul li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 2px;
    color: var(--color-success);
    font-weight: 600;
}

.phase-connector { display: flex; flex-direction: column; align-items: center; }
.connector-line { width: 2px; height: 30px; background: var(--color-border); }
.connector-arrow { color: var(--color-accent); font-size: 2rem; line-height: 1; font-weight: bold; }

/* 4.6 Final CTA Section */
.final-cta-section {
    padding: 100px 0;
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary) 0%, #111827 100%);
    text-align: center;
    color: var(--color-white);
}

.final-cta-section h2 { color: var(--color-white); font-size: 3rem; }
.final-cta-section p { color: #D1D5DB; font-size: 1.25rem; max-width: 750px; margin: 0 auto 40px auto; }
.final-cta-section .btn-primary:hover {
    background-color: #1D4ED8;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    transform: translateY(-4px); /* AESTHETIC: More pronounced hover effect */
}

/* 4.7 Background Aesthetics - Subtle Dot Pattern */
.hero-section, .framework-section, .how-it-works-section {
    position: relative;
    background-color: var(--color-white);
}
.hero-section::after, .framework-section::after, .how-it-works-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.5;
    z-index: -1;
}

/* 5.0 Responsive Styles (Tablet & Mobile)
--------------------------------------------------------------*/
@media (max-width: 1024px) {
    /* Tablet Styles */
    .transformation-item { gap: 20px; }
    .before-state, .after-state { padding: 25px; }
    .phase-card { flex-direction: column; gap: 20px; text-align: center; }
    .phase-header { display: flex; align-items: center; gap: 20px; justify-content: center; }
    .phase-number { margin-bottom: 0; }
}

@media (max-width: 768px) {
    /* General Mobile Styles */
    :root { --section-padding: 70px 0; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    body { font-size: 16px; }
    .section-subtitle { font-size: 1.1rem; margin-bottom: 40px; }

    /* Hero Section */
    .hero-section { padding: 80px 0; }
    .hero-section .hero-actions { display: flex; flex-direction: column; gap: 15px; align-items: center; }
    .hero-section .hero-actions a { width: 100%; max-width: 300px; }
    .hero-section .hero-actions a:first-child { margin-right: 0; }

    /* Grid Sections */
    .profile-grid, .framework-pillars { grid-template-columns: 1fr; gap: 30px; }
    
    /* Value Prop Section */
    .transformation-item { grid-template-columns: 1fr; align-items: center; }
    .transformation-arrow { transform: rotate(90deg); margin: 25px auto; }

    /* How It Works Section */
    .phase-header { flex-direction: column; gap: 10px; }
    .phase-card { padding: 30px; }
    .phase-content h3, .phase-description { text-align: center; }
    .deliverables { text-align: left; }
    .phase-description { font-size: 16px; }
    .phase-connector { margin: 10px 0; }

    /* Final CTA Section */
    .final-cta-section { padding: 80px 20px; }
    .final-cta-section h2 { font-size: 2.25rem; }
    .final-cta-section p { font-size: 1.1rem; }
}