/* rythmic/public/css/main-layout.css */
/* Ensure the correct font variables are loaded from styleguide.css */
@import url("/css/styleguide.css"); /* */
@import url("/css/globals.css"); /* */
/* Keep existing body and .main-content-area styles */
body {
    padding-top: 80px; /* Adjusted for 80px fixed-top navbar height */
    background-color: var(--white); /* Use theme variable */
    font-family: 'Inter', sans-serif; /* Global font */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-content-area {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    flex-grow: 1;
}

/* Custom styles for the navbar to match index.html header */
.main-navbar {
    background-color: var(--white);
    border-bottom: 1px solid var(--gray100);
    height: 80px;
    padding: 0 80px; /* Desktop padding */
    box-shadow: none;
    z-index: 2;
}

.main-navbar .navbar-collapse {
    align-items: center;
}

.main-navbar .navbar-brand {
    padding: 0;
    display: flex;
    align-items: center;
    margin-right: 40px; /* Desktop margin-right */
}

.main-navbar .navigation-custom {
    display: inline-flex;
    gap: 32px;
    padding-left: 0;
    align-items: center;
    list-style: none;
}

.main-navbar .navigation-custom .nav-item {
    padding: 4px 0px;
}

.main-navbar .navigation-custom .nav-link {
    color: var(--gray600);
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    width: fit-content;
    padding: 0;
}

.main-navbar .navigation-custom .nav-link:hover {
    color: var(--blue-chill);
}

.main-navbar .navigation-actions-custom {
    display: inline-flex;
    gap: 12px;
    align-items: center;
}

.main-navbar .login-button-custom {
    background-color: var(--white) !important;
    border: 1px solid var(--blue-chill) !important;
    border-radius: 8px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.main-navbar .login-button-custom div {
    color: var(--blue-chill) !important;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
}

.main-navbar .login-button-custom:hover {
    background-color: var(--gray100) !important;
}

.main-navbar .signup-button-custom {
    background-color: var(--blue-chill-2) !important;
    border-color: var(--blue-chill-2) !important;
    border-radius: 8px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.main-navbar .signup-button-custom div {
    color: var(--white) !important;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
}

.main-navbar .signup-button-custom:hover {
    background-color: var(--blue-chill) !important;
    border-color: var(--blue-chill) !important;
}

.main-navbar .navbar-toggler {
    border: none;
    padding: 0;
}
.main-navbar .navbar-toggler:focus {
    box-shadow: none;
}

/* --- NEW: Mobile-specific Navbar Styles (Logo Left, Toggler Right, Solid Dropdown) --- */
@media (max-width: 991.98px) { /* Applies to Bootstrap's 'lg' breakpoint and below */
    .main-navbar {
        padding: 0 16px; /* Adjust padding for mobile viewports */
    }
    .main-navbar .header-container-custom {
        width: 100%; /* Ensure container takes full width */
        display: flex; /* Ensure flex is active */
        justify-content: space-between; /* PUSH items to ends: Logo Left, Toggler Right */
        align-items: center; /* Vertically align */
        padding: 0; /* Remove internal padding if container-fluid has it */
    }
    .main-navbar .navbar-brand {
        margin-right: 0; /* Remove margin-right from brand */
    }
    .main-navbar .navbar-toggler {
        /* No need for margin-left: auto here as justify-content: space-between handles it */
        /* Remove any default fixed width/height on toggler if present */
    }

    /* Fix: Mobile Menu Dropdown Styles (Transparent to Solid Transition) */
    .main-navbar .navbar-collapse {
        background-color: var(--white); /* Ensure background is always white, even when collapsed */
        position: absolute; /* Position it absolutely within the fixed navbar */
        top: 80px; /* Push it down below the main navbar height */
        left: 0;
        width: 100%; /* Take full width */
        box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Add a subtle shadow */
        z-index: 1050; /* Ensure it's above other content (Bootstrap modals are usually 1050) */
        padding-bottom: 1rem; /* Add some padding at the bottom */
        will-change: transform, height, contents; /* Hint browser for better rendering performance during transition */
        transition: background-color 0.01s linear; /* Very quick background fill, to appear instantly */
    }

    .main-navbar .navbar-collapse.show {
        background-color: var(--white); /* Ensure solid background when expanded */
    }

    .main-navbar .navbar-nav {
        flex-direction: column; /* Stack nav items vertically */
        align-items: flex-start; /* Align items to the left */
        width: 100%;
        padding: 1rem; /* Add padding inside the dropdown */
    }

    .main-navbar .navbar-nav .nav-item {
        width: 100%; /* Make each nav item take full width */
        text-align: left; /* Ensure text alignment */
        padding: 8px 0; /* Adjust vertical padding for mobile links */
    }

    .main-navbar .navigation-actions-custom {
        flex-direction: column; /* Stack buttons vertically */
        width: 100%;
        padding: 0 1rem 1rem; /* Padding for buttons */
        gap: 8px; /* Smaller gap between stacked buttons */
    }

    .main-navbar .login-button-custom,
    .main-navbar .signup-button-custom {
        width: calc(100% - 2rem); /* Adjust width to account for padding */
        margin-left: 1rem; /* Match padding */
        margin-right: 1rem; /* Match padding */
    }
}


/* START OF FOOTER LAYOUT FIXES AND RESPONSIVENESS */

.footer {
    align-items: center;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 64px 0px 48px;
    width: 100%;
}

/* Make containers responsive with max-width */
.footer .container-2.container-5,
.footer .container-3.container-5 {
    align-items: flex-start;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 48px; /* For container-2.container-5 */
    max-width: 1280px; /* Allow it to shrink */
    width: 100%; /* Take full width up to max-width */
    margin-left: auto;
    margin-right: auto;
    padding: 0 32px; /* Add horizontal padding for smaller screens */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Content div that holds logo and footer links */
.footer .content-5 {
    align-items: center; /* Center children horizontally (logo and footer-links) */
    align-self: stretch;
    display: flex;
    flex-direction: column; /* Stack logo and links vertically */
    gap: 32px; /* Default gap when links are present */
    width: 100%;
}

/* Footer links section */
.footer .footer-links {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 32px;
    justify-content: center; /* Center the links horizontally */
    position: relative;
    width: 100%;
    flex-wrap: wrap; /* Allow links to wrap on smaller screens */
    text-align: center; /* Fallback for text alignment if flex items don't take full width */
}

/* Individual footer link article - ensure they don't have excessive min-width */
.footer .footer-link {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
    justify-content: center; /* Center content within each link */
}

/* Copyright section specific content */
.footer .content-6 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    justify-content: center; /* Center the copyright text */
    position: relative;
    width: 100%;
    padding: 0; /* Remove any padding that might push text off center */
}


/* Remove underline from footer links */
.footer .footer-links a {
    text-decoration: none !important;
}

/* Ensure footer links have correct color (if not already handled by .link or .text-mdsemibold) */
.footer .footer-links a .link {
    color: var(--gray600);
}

/* --- Hide footer links on mobile and adjust parent gap --- */
@media (max-width: 768px) { /* Adjust breakpoint as needed (e.g., 767.98px for Bootstrap's 'md' breakpoint) */
    .footer .footer-links {
        display: none !important; /* Added !important to force hiding */
    }
    .footer .content-5 {
        gap: 0; /* Remove gap when links are hidden */
    }
}





/* Keep existing common form styling and other elements */
.form-label.required::after {
    content: " *";
    color: red;
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.form-section-title {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    color: #333;
}

.spinner-border {
    vertical-align: text-bottom;
}

.btn-lander {
    background-color: #108fa0 !important;
    border-color: #108fa0 !important;
    color: white !important;
    text-decoration-color: #108fa0 !important;
}

.btn-lander:hover,
.btn-lander:focus {
    background-color: #0d7a8a !important;
    border-color: #0d7a8a !important;
    color: white !important;
}

.main-content-area h2.card-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.72px;
}

.main-content-area fieldset {
    margin-bottom: 2.5rem;
}
.main-content-area .form-section-title {
    margin-bottom: 2.5rem;
}

.main-content-area p,
.main-content-area .form-check-label {
    line-height: 1.7;
}

.main-content-area form .row > [class*="col-"] {
    margin-bottom: 1.3rem;
}

.form-select option {
    color: #212529;
    background-color: #fff;
}