/* =========================================
   R3 PSYCHOLOGY - COMPLETE MASTER CSS
   Sage, Blush, & Beige Palette 2026
   ========================================= */

:root {
    --site-bg: #EDDCCD;        /* Light Beige */
    --card-bg: #FFFFFF;        /* Pure White */
    --text-heading: #647B70;   /* Dark Sage */
    --text-body: #212121;      /* Charcoal */
    --accent-blush: #E0C9C7;   /* Dusty Pink */
    --accent-sage: #899E90;    /* Medium Sage */
    --btn-bg: #647B70;         /* Dark Sage */
    --btn-text: #FFFFFF;
    --sidebar-color: #647B70;
    --font-serif: 'Lora', serif;
    --font-sans: 'Inter', sans-serif;
}

/* 1. BASE RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); background-color: var(--site-bg); color: var(--text-body); display: flex; }

/* 2. TYPOGRAPHY */
h1 {
    font-size: 4rem; /* Change this number to go larger (e.g., 4.5rem or 5rem) */
    line-height: 1.1; /* Keeps lines close together so it doesn't look gapped */
    margin-bottom: 20px;
    color: var(--accent-sage); /* Optional: Add a subtle color to the main headline */
}

h2, h3 { font-family: var(--font-serif); color: var(--text-heading); font-weight: 700; }
p { font-family: var(--font-sans); color: var(--text-body); font-weight: 300; line-height: 1.6; }
strong { color: var(--accent-sage); font-weight: 600; }

/* 3. SIDEBAR NAVIGATION */
.sidebar {
    width: 210px; height: 100vh; background-color: var(--sidebar-color);
    color: var(--btn-text); position: fixed; display: flex;
    flex-direction: column; padding: 40px 20px; z-index: 100;
}
.logo-area { margin-bottom: 50px; }
.logo-r3 { font-family: var(--font-serif); font-size: 2.8rem; color: #FFF; display: block; }
.logo-text { font-size: 1.15rem; letter-spacing: 2px; text-transform: uppercase; color: #FFF; }
.tagline { font-size: 0.65rem; color: var(--accent-blush); margin-top: 10px; }

.nav-links { list-style: none; flex-grow: 1; }
.nav-links li { margin-bottom: 22px; }
.nav-links a { color: #FFF; text-decoration: none; font-size: 0.95rem; font-weight: 300; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { padding-left: 8px; border-left: 2px solid var(--accent-blush); }

.sub-nav { list-style: none; padding-left: 15px; margin-top: 10px; }
.sub-nav li { margin-bottom: 10px; font-size: 0.85rem; }
.sub-nav a { color: rgba(255,255,255,0.7) !important; }

/* 4. MAIN CONTENT LAYOUT */
.content { margin-left: 210px; width: calc(100% - 210px); background-color: var(--site-bg); min-height: 100vh; }
section { padding: 80px 8%; }

/* 5. HERO & HEADERS */
.hero { 
    height: 85vh; display: flex; align-items: center;
    background: linear-gradient(rgba(237,220,205,0.8), rgba(237,220,205,0.8)), 
                url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&q=80&w=2070');
    background-size: cover; background-position: center;
}
.page-header { background-color: var(--card-bg); border-bottom: 1px solid #eee; padding: 60px 8%; }
.sub-headline { font-size: 1.4rem; margin-top: 10px; font-weight: 300; }

/* 6. UNIVERSAL CARD & GRID SYSTEMS */

/* Home Page Services & Psychoedu Grid */
.service-grid, .edu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 40px; }

.service-card, .edu-category { 
    background: var(--card-bg); padding: 35px; border-radius: 12px; 
    border-left: 5px solid var(--accent-sage); transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.service-card:hover, .edu-category:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

/* 7. ASSESSMENT / TEST PAGES (DASS21, K10, PCL5) */
.test-container { max-width: 800px; margin: 40px auto; }
.scale-legend { background: var(--card-bg); padding: 25px; border-radius: 8px; margin-bottom: 30px; border: 1px solid var(--accent-blush); }

.q-block { 
    background: var(--card-bg); padding: 25px; margin-bottom: 20px; 
    border-radius: 8px; border-left: 4px solid var(--accent-blush); 
}
.options { margin-top: 15px; display: flex; gap: 20px; flex-wrap: wrap; }
.options label { font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 8px; }

/* 8. BLOG SYSTEM */
.blog-list { max-width: 900px; margin: 0 auto; padding: 60px 0; }
.blog-card { background: var(--card-bg); padding: 40px; border-radius: 12px; margin-bottom: 30px; border-bottom: 4px solid var(--accent-blush); }
.blog-card .date { font-size: 0.8rem; color: var(--accent-sage); text-transform: uppercase; font-weight: 600; }

/* 9. RESULTS & THANKS PAGES */
.results-container, .thanks-container { display: flex; flex-direction: column; align-items: center; padding: 80px 10%; }
.result-card, .thanks-card { 
    background: var(--card-bg); width: 100%; max-width: 700px; padding: 60px; 
    border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); text-align: center; 
}

.score-circle, .icon-circle { 
    width: 110px; height: 110px; border: 5px solid var(--accent-sage); border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; margin: 0 auto 20px;
}
.score-circle span { font-family: var(--font-serif); font-size: 2rem; color: var(--text-heading); font-weight: 700; }
.interpretation-box, .expectation-box { 
    background: var(--site-bg); padding: 30px; border-radius: 8px; 
    margin: 30px 0; text-align: left; border-left: 4px solid var(--accent-blush); 
}

/* 10. FORMS & CONTACT */
.contact-card { max-width: 600px; margin: 0 auto; background: var(--card-bg); padding: 50px; border-radius: 12px; }
.contact-form { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.contact-form input, .contact-form textarea { padding: 14px; border: 1px solid #ddd; border-radius: 6px; font-family: var(--font-sans); }

/* 11. BUTTONS (Pill Shape) */
.btn-primary, .btn-submit { 
    padding: 15px 45px; background-color: var(--btn-bg); color: var(--btn-text); 
    text-decoration: none; font-weight: 600; border-radius: 50px; border: 2px solid var(--btn-bg); 
    display: inline-block; cursor: pointer; transition: 0.3s; text-align: center; font-size: 1rem;
}
.btn-primary:hover { background-color: transparent; color: var(--btn-bg); }

.cta-sidebar { 
    display: block; padding: 10px 15px; background-color: var(--site-bg); 
    color: var(--sidebar-color); text-decoration: none; border-radius: 50px; 
    font-weight: 600; font-size: 0.9rem; text-align: center;
}

/* 12. MISC UI ELEMENTS */
.tag { font-size: 0.7rem; background: var(--site-bg); padding: 4px 12px; border-radius: 20px; color: var(--text-heading); font-weight: 600; }
footer { text-align: center; padding: 50px; font-size: 0.8rem; color: #888; }

/* 13. IMPROVED RESPONSIVE DESIGN */
@media (max-width: 1000px) {
    body { flex-direction: column; }

    .sidebar {
        width: 100%;
        height: auto;
        position: fixed; /* Sticks to the top of the phone screen */
        top: 0;
        left: 0;
        padding: 15px 25px;
        flex-direction: column;
        background-color: var(--sidebar-color);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .logo-area { margin-bottom: 0; }
    .logo-r3 { font-size: 2rem; }
    .logo-text { font-size: 0.9rem; }
    .tagline { display: none; } /* Hide tagline on mobile to save space */

    /* The Hamburger Icon */
    .mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .mobile-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: white;
        border-radius: 3px;
        transition: 0.3s;
    }

    /* Hide links by default on mobile */
    .nav-links {
        display: none; 
        width: 100%;
        flex-direction: column;
        padding: 20px 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        margin-top: 15px;
    }

    /* When the menu is toggled open via JS */
    .nav-links.active {
        display: flex;
    }

    .nav-links li { margin-bottom: 15px; }

    .content {
        margin-left: 0;
        width: 100%;
        padding-top: 80px; /* Prevents content from hiding behind the fixed header */
    }

    .hero { height: 70vh; }
    h1 { font-size: 2.2rem; }

    /* Hide the footer CTA in the sidebar on mobile and show as a regular link */
    .nav-footer { display: none; }
    .mobile-only-cta {
        background: var(--accent-blush) !important;
        color: var(--sidebar-color) !important;
        padding: 10px !important;
        text-align: center;
        border-radius: 5px;
        font-weight: 600;
        border: none !important;
    }
}
/* Styling for the About Section Cards */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.about-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    border-left: 5px solid var(--accent-sage); /* Sage border to match services */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: 0.3s;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.about-card h3 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.section-header {
    margin-bottom: 40px;
    max-width: 800px;
}

.philosophy-intro {
    font-size: 1.25rem;
    margin-top: 15px;
}
/* Blog Post Styling */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
}

.post-header h1 {
    font-size: 3rem;
    margin: 20px 0;
}

.post-body p {
    font-size: 1.15rem;
    margin-bottom: 25px;
    color: var(--text-body);
}

.post-body h2 {
    margin: 40px 0 15px;
    font-size: 1.8rem;
}

.post-footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--accent-blush);
}
/* Intake Form Specifics */
.intake-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.intake-form {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.form-section {
    margin-bottom: 40px;
}

.form-section h3 {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--site-bg);
    padding-bottom: 10px;
    font-size: 1.4rem;
}

.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.input-group label {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--text-heading);
}

.input-group input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: var(--font-sans);
}

.input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Consent Box Styling */
.consent-box {
    background: var(--site-bg);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--accent-sage);
}

.agreement-text {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.agreement-text p, .agreement-text li {
    margin-bottom: 10px;
}

/* Custom Checkbox */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.checkbox-container input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-sage);
}

@media (max-width: 600px) {
    .input-row { grid-template-columns: 1fr; }
    .intake-form { padding: 25px; }
}
@media (max-width: 1000px) {
    /* Hide the links by default on mobile */
    .nav-links {
        display: none !important; 
        flex-direction: column;
        width: 100%;
        background-color: var(--sidebar-color);
        position: absolute;
        top: 60px; /* Adjust based on your header height */
        left: 0;
        padding: 20px;
        z-index: 999;
    }

    /* THIS IS THE FIX: This class is added by JavaScript */
    .nav-links.active {
        display: flex !important;
    }

    /* Style the hamburger lines so we know they are there */
    .mobile-toggle span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px 0;
        background-color: white;
        transition: 0.3s;
    }
}