/* ====================================================================== */
/*          ROYAL STYLE SHEET FOR THE KINGDOM OF MGAMB                    */
/* ====================================================================== */

/* ====================================================================== */
/*                      1. GLOBAL & FONT DEFINITIONS                      */
/* These are the foundational rules that apply to the entire kingdom.     */
/* ====================================================================== */
:root {
    /* We declare your brand colors here for easy reuse. */
    --color-background: #F8F5F2; /* A warm, elegant off-white */
    --color-text-main: #4a4a4a;  /* A soft, dark grey for text */
    --color-accent: #E9A8A9;     /* The delicate pink/coral accent */
}

body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Jost', sans-serif; /* Our selected font */
    background-color: var(--color-background);
    color: var(--color-text-main);
    scroll-behavior: smooth; /* Ensures smooth scrolling if we add anchor links later */
}


/* ====================================================================== */
/*                            2. HERO SECTION                             */
/* Styles for the first screen, focusing on vertical and horizontal       */
/* centering to create that powerful first impression.                    */
/* ====================================================================== */
.hero-section {
    min-height: 100vh; /* Makes the section fill the full height of the screen */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Crucial for positioning the scroll indicator */
}

    .hero-content {
        width: 90%; /* Make content span most of the screen */
        margin: 0 auto; /* Center the content */
    }

    .main-heading {
        font-size: 128px; /* Large and impactful */
    font-weight: lighter; /* A thin weight for elegance */
    font-style:italic;
    letter-spacing: 0;
    margin: 0;
    color: var(--color-text-main);
    position: relative;
    z-index: 1; /* Ensure it has a stacking context */
}

    .subtitle-row {
        display: flex;
        align-items: center;
        justify-content:center;
        margin-top: -2.5rem;    
        gap: 2rem; /* The space between art, the pill, and biz */
        flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}    

.subtitle-text {
    font-size: clamp(32px, 12vw, 64px); /* Responsive font size */
    font-weight: lighter;
}

.pill-image {
    width: 100%; /* Make it fill its container */
    max-width: 260px; /* Set a maximum size for desktop */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves as a block element */
    position: relative;
    z-index: 2; /* Ensure it appears above the brand name */
    margin-top: -30px; /* Adjust this value to control the overlap */
}

.scroll-indicator {
    position: absolute; /* Takes the element out of the normal document flow */
    bottom: 40px; /* Positions it 40px from the bottom of the hero section */
    left: 50%;
    transform: translateX(-50%); /* A classic trick to perfectly center an absolute element */
    display: flex;
    flex-direction: column;
    color: var(--color-accent);
    font-size: 1.2rem;
    line-height: 0.6; /* Brings the 'v's closer together vertically */
}


/* ====================================================================== */
/*                           3. CONTACT SECTION                           */
/* Styles for the content below the fold. We use generous spacing to      */
/* maintain the minimalist feel.                                          */
/* ====================================================================== */
.contact-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 230px; /* Generous vertical padding for breathing room */
}

.contact-title {
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

/* We remove default margins from paragraphs to control spacing precisely */
.contact-details p, .address-details p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    line-height: 1.6;
    
}

.address-details {
    margin-top: 2rem;
}

.contact-link {
    color: inherit; /* The link takes the color of its parent */
    text-decoration: none; /* Removes the default underline */
    font-weight: 600; /* Makes interactive elements slightly bolder */
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--color-accent); /* A subtle color change on hover */
    text-decoration: underline; /* Adds an underline on hover for clarity */
}

.decorative-line {
    width: 80px;
    height: 2px;
    background-color: var(--color-accent);
    margin-top: 4rem;
}

/* ====================================================================== */
/*                           4. MEDIA QUERIES                             */
/* Adjustments for smaller screens to ensure optimal viewing experience.  */
/* ====================================================================== */
@media (max-width: 768px) {
    .hero-section {
        justify-content: flex-start; /* Align content to the top */
        padding-top: 25vh; /* Start content at approximately 1/4 of the viewport height */
    }

    .main-heading {
        font-size: clamp(60px, 10vw, 128px); /* Adjust font size for smaller screens */
    }

    .pill-image {
        max-width: 30vw; /* Responsive max-width for smaller screens */
        min-width: 100px; /* Minimum width for smaller screens */
    }

    .contact-section {
        padding: 20px; /* Reduce padding for mobile to allow centering */
    }
}

@media (max-width: 480px) {
    .main-heading {
        font-size: clamp(40px, 25vw, 90px); /* Further adjust font size for very small screens */
    }
}