/* standard.css - The Living Room */

/* 1. Global Typography Reset */
body { 
    background-color: #faf9f6; 
    color: #1a1a1a; 
    font-family: 'Outfit', sans-serif; /* Body Font: Outfit */
    line-height: 1.8; 
    font-size: 1.15rem;
    -webkit-font-smoothing: antialiased; 
}

h1, h2, h3, h4, .font-display { 
    font-family: 'Playfair Display', serif; /* Display Font: Playfair Display */
}

/* 2. Headline & Brand Styles */
.hero-title { 
    font-size: 4.5rem; 
    line-height: 1.1; 
    font-weight: 700; 
}
@media (max-width: 768px) { .hero-title { font-size: 3rem; } }

.accent-teal { color: #2d5a5a; }
.text-gold { color: #c5a059; }

/* 3. Reusable Components */
.glass-card { 
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 2rem; 
    padding: 2.5rem; 
    transition: all 0.4s ease; 
}
.glass-card:hover { 
    transform: translateY(-5px); 
    border-color: rgba(45, 90, 90, 0.2); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.btn-teal { 
    background-color: #2d5a5a; 
    color: white !important; 
    padding: 1.25rem 2.5rem; 
    border-radius: 999px; 
    transition: all 0.3s ease; 
    display: inline-block;
    font-size: small !important; 
    font-weight: 600; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    text-align: center; 
}
.btn-teal:hover { 
    background-color: #3d7a7a; 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px rgba(45, 90, 90, 0.2); 
}

/* 4. Deep Dive & Editorial System */
.editorial-header { 
    border-bottom: 1px solid rgba(26, 26, 26, 0.05); 
    padding-bottom: 4rem; 
    margin-bottom: 5rem; 
}

.lead-quote { 
    border-left: 4px solid rgba(45, 90, 90, 0.2); 
    padding-left: 2rem; 
    font-style: italic; 
    font-weight: 300; 
}

.scripture-box { 
    background: rgba(45, 90, 90, 0.03); 
    border-left: 4px solid #c5a059; 
    padding: 2.5rem; 
    border-radius: 0 1rem 1rem 0; 
    font-style: italic;
    color: #52525b;
}

/* 5. Comparison Table */
.comparison-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 2rem 0; 
    font-size: 0.875rem; 
    color: #52525b; 
}
.comparison-table th, .comparison-table td { 
    padding: 1.25rem; 
    border: 1px solid rgba(26, 26, 26, 0.1); 
    text-align: left; 
}
.comparison-table th { 
    background: rgba(45, 90, 90, 0.05); 
    font-family: 'Playfair Display', serif; 
    color: #1a1a1a;
}

/* 6. Utility Styles */
.line-clamp-3 { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}

.img-reveal { 
    filter: grayscale(40%) contrast(90%); 
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); 
}
.group:hover .img-reveal { 
    filter: grayscale(0%) contrast(100%); 
    transform: scale(1.03); 
}

/* 7. Navigation Utilities */
.nav-link { 
    font-weight: 700; 
    letter-spacing: 0.1em; 
    text-transform: uppercase; 
    font-size: 0.85rem; 
    color: #a1a1aa; 
    transition: 0.3s; 
}
.nav-link:hover { color: #2d5a5a; }

/* 8. Media & Video Components */
.video-container { 
    position: relative; 
    padding-bottom: 56.25%; /* Standard 16:9 Aspect Ratio */
    height: 0; 
    overflow: hidden; 
    border-radius: 2rem; /* Matches your glass-card and img-box rounding */
}

.video-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

/* 9. --- Navigation & Header --- */
.nav-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Ensure it can use the full available width */
}

.nav-link {
    width: 100%;
    padding: 1rem 0;
    font-weight: 600; 
    letter-spacing: 0.20em; /* Slightly reduced for better fit */
    text-transform: uppercase;
    font-size: 0.8rem; /* Slightly smaller to ensure fit on smaller laptops */
    color: #a1a1aa;
    transition: color 0.3s ease;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.03); 
    white-space: nowrap; /* Keeps "JOIN LIVE" as one piece */
}

@media (min-width: 768px) {
    .nav-wrapper {
        flex-direction: row;
        justify-content: center;
        gap: 2.5rem; /* Tightened gap to keep everything on one line */
        max-width: none; /* Removes the 'max-w-sm' that was choking the layout */
    }
    .nav-link {
        width: auto;
        border-bottom: none;
        padding: 0.5rem 0;
    }
}

/* 10. --- Footer --- */
.footer-nav-link {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #a1a1aa;
    transition: color 0.3s ease;
}

.footer-nav-link:hover {
    color: #c5a059; /* Brand Gold */
}

/* 11. --- 40Flex Hub Visuals --- */
.hero-gradient { 
    background: linear-gradient(180deg, #1a1a1a 0%, #2d5a5a 100%); 
}

.day-grid-item { 
    background: white; 
    border: 1px solid rgba(26, 26, 26, 0.05); 
    transition: all 0.3s ease; 
}

.day-grid-item:hover { 
    transform: translateY(-3px); 
    border-color: #c5a059; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    color: #c5a059 !important;
}

.faq-card { 
    background: rgba(26, 26, 26, 0.02); 
    border-radius: 1.5rem; 
    padding: 2rem; 
    border: 1px solid rgba(26, 26, 26, 0.05); 
}

/* --- 11. 40Flex Journey Specifics --- */

/* The "Big Steps" Forward Cards */
.challenge-card { 
    background: white; 
    border: 1px solid rgba(26, 26, 26, 0.05); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
    height: 100%; 
}

.challenge-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.06); 
    border-color: rgba(197, 160, 89, 0.3); /* Soft Gold border on hover */
}

/* The Subtle Divider (Dots) */
.divider { 
    color: #c5a059; 
    opacity: 0.3; 
    letter-spacing: 0.2em; 
    text-align: center; 
    margin: 3.5rem 0; 
    font-weight: 300;
}

/* The Main Journey Hub Grid Items */
.day-grid-item { 
    background: white; 
    border: 1px solid rgba(26, 26, 26, 0.05); 
    transition: all 0.3s ease; 
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
}

.day-grid-item:hover { 
    transform: translateY(-3px); 
    border-color: #c5a059; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    color: #c5a059 !important;
}

/* 40Flex Hero Gradient */
.hero-gradient { 
    background: linear-gradient(180deg, #1a1a1a 0%, #2d5a5a 100%); 
}

/* Button Outline (For "Back to Journey") */
.btn-outline {
    display: inline-block;
    border: 1px solid #2d5a5a;
    color: #2d5a5a;
    padding: 1.25rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-outline:hover {
    background-color: #2d5a5a;
    color: white !important;
    transform: translateY(-2px);
}

/* 12. --- Ghost CMS Content Renderer --- */
/* Styles for post.html injected by the dynamic /deep-dive.html template */

.ghost-content p {
    color: #52525b;
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.ghost-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.ghost-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.ghost-content h4 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: #c5a059;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.ghost-content strong { color: #1a1a1a; font-weight: 600; }
.ghost-content em     { font-style: italic; }

.ghost-content blockquote {
    border-left: 4px solid rgba(197, 160, 89, 0.4);
    padding: 1.5rem 2rem;
    font-style: italic;
    font-weight: 300;
    color: #1a1a1a;
    background: rgba(45, 90, 90, 0.03);
    border-radius: 0 1rem 1rem 0;
    margin: 2.5rem 0;
}

.ghost-content ul,
.ghost-content ol {
    color: #52525b;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.ghost-content ul { list-style-type: disc; }
.ghost-content ol { list-style-type: decimal; }

.ghost-content li { margin-bottom: 0.5rem; }

.ghost-content hr {
    border: none;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
    margin: 4rem 0;
}

.ghost-content a {
    color: #2d5a5a;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.ghost-content a:hover { color: #c5a059; }

/* Ghost figure/image cards */
.ghost-content figure { margin: 2.5rem 0; }
.ghost-content figure img {
    width: 100%;
    border-radius: 1.5rem;
}
.ghost-content figcaption {
    text-align: center;
    font-size: 0.8rem;
    color: #a1a1aa;
    margin-top: 0.75rem;
    font-style: italic;
}