/* ============================================
   PUBLIC LAYOUT STYLES
   
   Shared styles for public-facing pages that use
   the landing page header/footer (no sidebar).
   ============================================ */

/* Import Outfit font to match main app theme */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
    /* Ambient theme colors (matching landing page) */
    --ambient-primary: #7877c6;
    --ambient-accent-coral: rgba(255, 119, 115, 0.08);
    --ambient-accent-teal: rgba(78, 205, 196, 0.06);
    --ambient-accent-purple: rgba(120, 119, 198, 0.12);
    --ambient-surface: #ffffff;
    --ambient-surface-muted: #f7fafc;
}

/* =============================================
   BODY & LAYOUT
   ============================================= */
.public-body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Aurora gradient background */
    background: 
        radial-gradient(ellipse at 20% 80%, var(--ambient-accent-purple) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, var(--ambient-accent-coral) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, var(--ambient-accent-teal) 0%, transparent 70%),
        linear-gradient(180deg, #ffffff 0%, var(--ambient-surface-muted) 100%);
}

.public-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.public-container {
    width: 100%;
    max-width: 1248px;
    margin: 0 auto;
    padding: 2rem 32px 4rem;
}

/* =============================================
   HEADER STYLES
   ============================================= */
.public-header {
    width: 100%;
}

.header_container {
    justify-content: space-between;
    align-items: center;
    padding: 0 48px;
    margin: 0;
    display: flex;
    width: 95%;
    max-width: none;
    height: 84px;
}

.header_logo {
    display: flex;
    align-items: center;
    height: 32px;
}

.header_logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header_logo_image {
    width: auto;
    height: 32px;
    padding: 0;
    margin: 0;
    display: block;
}

.sign_in_top {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 32px;
}

/* Sign in secondary button */
.button-2 {
    background: rgba(255, 255, 255, 0.9);
    color: var(--ambient-primary);
    border-radius: 8px;
    height: 32px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid rgba(120, 119, 198, 0.25);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(120, 119, 198, 0.1);
    box-sizing: border-box;
}

.button-2:hover {
    color: var(--ambient-primary);
    background: #ffffff;
    border-color: var(--ambient-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(120, 119, 198, 0.2);
    text-decoration: none;
}

/* Get Started primary button */
.button-get-started {
    background: linear-gradient(135deg, var(--ambient-primary) 0%, #6366f1 100%);
    color: white;
    border-radius: 8px;
    height: 32px;
    padding: 0 16px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(120, 119, 198, 0.3);
    box-sizing: border-box;
}

.button-get-started:hover {
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(120, 119, 198, 0.4);
    text-decoration: none;
}

/* =============================================
   FOOTER STYLES
   ============================================= */
.landing-footer {
    background: linear-gradient(180deg, var(--ambient-surface-muted) 0%, #ffffff 100%);
    padding: 24px 0;
    text-align: center;
    border-top: 1px solid rgba(120, 119, 198, 0.1);
    width: 100%;
    margin-top: auto;
}

.landing-footer-content {
    max-width: 1248px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

.landing-footer-content span {
    color: #718096;
    font-size: 14px;
}

.landing-footer-content a {
    color: #718096;
    font-size: 14px;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.landing-footer-content a:hover {
    color: #7877c6;
    text-decoration: underline;
}

/* =============================================
   RESPONSIVE STYLES
   ============================================= */
@media screen and (max-width: 991px) {
    .header_container {
        padding: 0 32px;
        height: 72px;
    }

    .header_logo_image {
        height: 28px;
    }
    
    .header_logo {
        height: 28px;
    }
    
    .sign_in_top {
        height: 28px;
    }
    
    .button-2,
    .button-get-started {
        height: 28px;
        padding: 0 12px;
        font-size: 0.8rem;
    }

    .public-container {
        padding: 1.5rem 32px 3rem;
    }
}

@media screen and (max-width: 767px) {
    .header_container {
        padding: 0 24px;
        height: 64px;
    }
    
    .header_logo_image {
        height: 24px;
    }
    
    .header_logo {
        height: 24px;
    }
    
    .sign_in_top {
        gap: 8px;
        height: 26px;
    }
    
    .button-2,
    .button-get-started {
        height: 26px;
        padding: 0 10px;
        font-size: 0.75rem;
    }

    .public-container {
        padding: 1.5rem 24px 3rem;
    }
}

@media screen and (max-width: 539px) {
    .header_container {
        justify-content: space-between;
        align-items: center;
        padding: 0 4%;
        height: 56px;
    }

    .header_logo_image {
        height: 22px;
    }
    
    .header_logo {
        height: 22px;
    }
    
    .sign_in_top {
        gap: 6px;
        height: 24px;
    }
    
    .button-2,
    .button-get-started {
        height: 24px;
        padding: 0 8px;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    .public-container {
        padding: 1rem 4% 2rem;
    }
}

@media screen and (max-width: 479px) {
    .landing-footer {
        padding: 20px 0;
    }
    
    .landing-footer-content {
        padding: 0 4%;
        gap: 0.15rem;
    }
    
    .landing-footer-content span,
    .landing-footer-content a {
        font-size: 12px;
    }
}