/* ==========================================================================
   CARRY & ROLL | CORE CONFIG & RESET
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;800&display=swap');

:root {
    --deep-pine: #2A4B3C;
    --pale-oat: #D1C7A3;
    --charcoal: #1A1A1A;
    --text-light: #F4F4F4;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    background: linear-gradient(to bottom, rgba(42, 75, 60, 0.25), rgba(42, 75, 60, 1)), url('images/bg_fairway.png') no-repeat fixed top center / cover var(--deep-pine) !important;
    color: var(--text-light) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ==========================================================================
   STRUCTURE & LAYOUT
   ========================================================================== */
.hero-banner { width: 100%; padding: 50px 20px; }
.content-container { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 800px; padding: 0 20px; }
.brand-footer { padding: 30px 20px 40px; opacity: 0.6; }
.footer-text { font-size: 0.85rem; color: var(--text-light) !important; text-wrap: balance; }

/* Inverts dark visual brand elements to pure white */
.primary-logo, .monogram-icon { filter: brightness(0) invert(1) !important; }
.primary-logo { max-width: 220px; height: auto; display: inline-block !important; }
.monogram-icon { width: 25px; margin-bottom: 10px; }

/* Typography */
/* Typography */
.headline { font-weight: 800 !important; font-size: 2.5rem; line-height: 1.2; margin-bottom: 15px; letter-spacing: -0.02em; color: var(--text-light) !important; text-wrap: balance; }
.subheadline { 
    font-weight: 400 !important; 
    font-size: 1.1rem; 
    line-height: 1.6; 
    opacity: 0.85; 
    max-width: 600px; 
    margin: 0 auto 50px auto; 
    color: var(--text-light) !important; 
    text-wrap: balance; 
}

/* The Premium Charcoal Form Unit */
.form-container {
    background-color: var(--charcoal) !important;
    padding: 35px 30px;
    border-radius: 6px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    border-top: 2px solid var(--pale-oat) !important;
    margin: 0 auto 50px auto; 
}

/* ==========================================================================
   CONSOLIDATED MAILERLITE ENGINE & FIXES
   ========================================================================== */
#mailerlite-embed-wrapper,
[id^="mlb2-"],
.ml-form-embedContainer,
.ml-form-embedWrapper,
.ml-form-embedBody,
.ml-form-formContent,
.ml-block-form,
.ml-form-fieldRow,
.ml-form-embedSubmit {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
}

.ml-form-fieldRow { margin-bottom: 15px !important; }

.ml-form-fieldRow input {
    background-color: #ffffff !important;
    color: var(--charcoal) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    font: 14px 'Plus Jakarta Sans', sans-serif !important;
    width: 100% !important;
}

.ml-form-embedSubmit button {
    background-color: var(--text-light) !important;
    color: var(--charcoal) !important;
    border-radius: 4px !important;
    font: 700 14px 'Plus Jakarta Sans', sans-serif !important;
    padding: 12px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer;
    transition: background-color 0.2s ease !important;
}

.ml-form-embedSubmit button:hover { background-color: var(--pale-oat) !important; }

#mlb2-42230720 .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
    outline: 2px solid var(--pale-oat) !important;
    border-color: transparent !important;
}

#mlb2-42230720 .ml-form-embedSubmit button:focus {
    outline: 2px solid var(--text-light) !important;
    background-color: var(--pale-oat) !important;
}


/* ==========================================================================
   MOBILE RESPONSIVE OVERRIDES
   ========================================================================== */
@media screen and (max-width: 480px) {
    .headline {
        font-size: 1.85rem !important; /* Dynamically scales the text down to avoid single-word splits */
        padding: 0 10px !important;    /* Loosens desktop constraints so text flows naturally */
    }
    
    .subheadline {
        font-size: 1rem !important;
        padding: 0 15px !important;
        margin-bottom: 30px auto;
    }

    .form-container {
        padding: 25px 20px; /* Slims internal padding slightly to give input elements more real estate */
        width: calc(100% - 10px); /* Keeps the charcoal container safely tucked inside viewport boundaries */
    }
}

/* ==========================================================================
   BULLETPROOF MAILERLITE SUCCESS TOGGLE
   ========================================================================== */

/* 1. By default, ensure the success message is hidden until submission */
.ml-form-successBody.row-success {
    display: none;
}

/* 2. When the success state triggers, completely vanish the form inputs */
.ml-form-embedWrapper:has(.row-success[style*="display: block"]) .row-form,
.ml-form-embedWrapper:has(.row-success:not([style*="display: none"])) .row-form {
    display: none !important;
}

/* 3. When the success state triggers, format the container beautifully */
.ml-form-embedWrapper:has(.row-success[style*="display: block"]) .ml-form-successBody.row-success,
.ml-form-embedWrapper:has(.row-success:not([style*="display: none"])) .ml-form-successBody.row-success {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 102px !important;
    padding: 0 !important;
}

.ml-form-successContent h4 { padding:0 0 10px 0 !important; }