/* wwwroot/css/app.css */

/*
    --------------------------------------------------------------------------------
    @FONT-FACE RULES
    Defines the custom "CaviarDreams" font. Ensure your font files
    (caviardreams.woff2, caviardreams.woff, caviardreams.ttf) are
    located in the 'wwwroot/fonts/' folder.
    --------------------------------------------------------------------------------
*/
@font-face {
    font-family: 'CaviarDreams';
    src: url('../fonts/caviardreams.woff2') format('woff2'), url('../fonts/caviardreams.woff') format('woff'), url('../fonts/caviardreams.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
    --------------------------------------------------------------------------------
    CSS VARIABLES (CUSTOM PROPERTIES)
    Your central color palette for easy updates.
    --------------------------------------------------------------------------------
*/
:root {
    --color-dark-bg: #323c46;
    --color-light-text: #ffffff;
    --color-light-text-hover: #e0e0e0;
    --color-accent: #ed6984;
    --color-accent-hover: #e85370;
    --color-heading-line: #e6600e; /* Color for the heading underline in tiled sections */
    --color-secondary-line: #5fc1ca; /* NEW: Color for lines in hero and contact sections */
}


/*
    --------------------------------------------------------------------------------
    GLOBAL BASE STYLES
    Applies fundamental styles to the entire page.
    --------------------------------------------------------------------------------
*/
html, body {
    font-family: 'CaviarDreams', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-dark-bg);
    color: var(--color-light-text);
}

a, .btn-link {
    color: var(--color-light-text);
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: var(--color-light-text-hover);
        text-decoration: underline;
    }


/*
    --------------------------------------------------------------------------------
    BUTTON STYLES
    Defines the appearance of primary and outline buttons using accent colors.
    --------------------------------------------------------------------------------
*/
.btn-primary {
    color: var(--color-light-text);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

    .btn-primary:hover {
        background-color: var(--color-accent-hover);
        border-color: var(--color-accent-hover);
    }

.btn-outline-primary {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

    .btn-outline-primary:hover {
        color: var(--color-light-text);
        background-color: var(--color-accent);
        border-color: var(--color-accent);
    }


/*
    --------------------------------------------------------------------------------
    CORE LAYOUT STYLES
    Ensures the overall page structure (page, main content, footer) stacks correctly.
    --------------------------------------------------------------------------------
*/
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.content {
    padding: 1.1rem;
}


/*
    --------------------------------------------------------------------------------
    SECTION-SPECIFIC STYLES
    Styles for the alternating content sections and the contact section.
    --------------------------------------------------------------------------------
*/
.content-section-default {
    background-color: var(--color-dark-bg);
    padding: 0;
    width: 100%;
}

.content-section-alt {
    background-color: var(--color-dark-bg);
    padding: 0;
    width: 100%;
}

    /* Ensure text within content sections uses the light text color */
    .content-section-default h2,
    .content-section-default p,
    .content-section-alt h2,
    .content-section-alt p {
        color: var(--color-light-text);
    }

    /* Styles for the underline under headings in the tiled sections */
    .content-section-default h2,
    .content-section-alt h2 {
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

        .content-section-default h2::after,
        .content-section-alt h2::after {
            content: '';
            display: block;
            width: 30%;
            height: 2px;
            background-color: var(--color-heading-line);
            margin: 10px auto 0 auto;
        }

/*
    NEW: Styles for underlines in Hero (H1) and Contact (H2) sections
*/
header.text-center h1, /* Target the H1 in the main hero section */
.contact-section-bg h2 /* Target the H2 in the contact section */ {
    position: relative;
    padding-bottom: 10px; /* Space between text and line */
    margin-bottom: 20px; /* Space below the line and content */
}

    header.text-center h1::after,
    .contact-section-bg h2::after {
        content: '';
        display: block;
        width: 15%;
        height: 2px;
        background-color: var(--color-secondary-line); /* Use the new color variable */
        margin: 10px auto 0 auto; /* Centers the line horizontally and adds spacing */
    }


.contact-section-bg {
    background-color: var(--color-dark-bg) !important;
    color: var(--color-light-text);
}
s
/*
    --------------------------------------------------------------------------------
    CONTACT EMAIL LINK STYLES
    --------------------------------------------------------------------------------
*/
.contact-email-link {
    font-size: 1.2em; /* CHANGED: Reduced from 1.5em to 1.2em */
    color: var(--color-light-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

    .contact-email-link:hover {
        color: var(--color-light-text-hover);
        text-decoration: underline;
    }

/*
    --------------------------------------------------------------------------------
    FOOTER STYLES
    Customizes the footer's appearance.
    --------------------------------------------------------------------------------
*/
footer.footer {
    width: 100%;
    background-color: var(--color-accent);
    color: var(--color-light-text);
}

    footer.footer a {
        color: var(--color-light-text);
    }

        footer.footer a:hover {
            color: var(--color-light-text-hover);
        }

/*
    --------------------------------------------------------------------------------
    SEPARATOR LINE STYLES
    For the HR tags above and below the tiled sections.
    --------------------------------------------------------------------------------
*/
.section-separator {
    border: none; /* Remove default border */
    border-top: 3px solid var(--color-light-text);
    opacity: 0.2; /* Slightly subtle */
    width: 80%; /* Set width to 80% */
    margin: 5rem auto; /* Center horizontally and add vertical margin */
}

/*
    --------------------------------------------------------------------------------
    RESPONSIVENESS (Media Queries)
    Adjusts layout for different screen sizes.
    --------------------------------------------------------------------------------
*/
@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

        .top-row ::deep a, .top-row ::deep .btn-link {
            margin-left: 0;
        }
}