/* --- THE DUDE'S ABYSS: MASTER CSS --- */

/* 1. THE RUG (Keep this so the background stays fixed) */
body {
    background-image: url('https://serenityrhythms.com/wp-content/uploads/2025/11/the-big-lebowski-the-room.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #5e2020;
}

/* 2. THE CONTENT BOX (Readability) */
.wp-site-blocks, .entry-content, .site-main {
    background-color: #F5F5DC !important;
    color: #222 !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 3. FOOTER COLORS (Fixing the "Invisible" Links) */
.site-footer, footer {
    background-color: #0d0d0d !important; /* Pure Black */
    color: #F5F5DC !important;
}

/* Force Menu Links to be Visible */
footer a, 
footer li,
footer .wp-block-navigation-item__content {
    color: #F5F5DC !important; /* Cream */
    opacity: 1 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* --- MAILPOET "PERFECT FORM" FIXES --- */

/* A. The Headline (Fixing the Red Cut-off text) */
.mailpoet_form h2, 
.mailpoet_stack_child_h2 {
    color: #d4af37 !important; /* Gold (Not Red!) */
    font-size: 18px !important; /* Smaller to fit */
    line-height: 1.4 !important;
    white-space: normal !important; /* WRAP text (Don't cut off) */
    word-wrap: break-word !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

/* B. The Body Text (Making it Visible) */
.mailpoet_paragraph, 
.mailpoet_stack_child_paragraph {
    color: #ffffff !important; /* White */
    font-weight: normal !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* C. The Input Box (Cream color) */
.mailpoet_text {
    background-color: #F5F5DC !important;
    color: #000 !important;
    border: 2px solid #8B0000 !important;
    border-radius: 5px !important;
    padding: 10px !important;
}

/* D. The Button (Force Round & Teal) */
/* We target 'input' specifically to override default square styles */
input.mailpoet_submit,
.mailpoet_submit {
    background-color: #20B2AA !important; /* Teal */
    color: #fff !important;
    border-radius: 50px !important; /* ROUND */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: 2px solid #fff !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 15px !important;
    -webkit-appearance: none !important; /* Fix for Safari squares */
}

/* Hover Effect */
input.mailpoet_submit:hover {
    background-color: #800080 !important; /* Purple */
    transform: translateY(-2px);
}


/* --- FINAL FIXES: BUTTON & GAP --- */

/* 1. FORCE THE BUTTON TO BE ROUND (The Nuclear Option) */
/* We use '999px' to force a pill shape no matter what */
div.mailpoet_form input.mailpoet_submit,
.mailpoet_submit {
    border-radius: 999px !important;
    -webkit-border-radius: 999px !important;
    -moz-border-radius: 999px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* 2. KILL THE GAP (The Light Bar above Footer) */
/* This removes the margin from the bottom of the page content */
.site-main, .wp-site-blocks, .entry-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* --- FORCE HEADLINE TO ONE LINE --- */
.mailpoet_form h2, 
.mailpoet_stack_child_h2 {
    white-space: nowrap !important; /* Forces it to stay on one line */
    font-size: 15px !important; /* Slightly smaller to fit the width */
    width: 100% !important;
    overflow: visible !important;
}

/* --- GOD MODE: FORCE ROUND BUTTON --- */
html body .mailpoet_form input.mailpoet_submit {
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    background-color: #20B2AA !important; /* Teal */
    appearance: none !important; /* Removes default square button styling */
    -webkit-appearance: none !important;
}

/* --- DUDE'S BODY TEXT POLISH --- */
.mailpoet_paragraph, 
.mailpoet_stack_child_paragraph {
    text-align: center !important;   /* Centers the text */
    line-height: 1.6 !important;     /* Adds breathing room between lines */
    max-width: 90% !important;       /* Pulls the edges in so it doesn't hit the walls */
    margin-left: auto !important;    /* Centers the block itself */
    margin-right: auto !important;
    padding-bottom: 15px !important; /* Adds space above the input box */
    font-size: 14px !important;      /* crisp size */
}

/* --- NEON GREEN HEADERS (THE GLOW) --- */
footer h2, 
footer h3,
footer strong, 
footer .wp-block-heading {
    color: #39FF14 !important; /* Pure Neon Green */
    text-shadow: 0 0 8px rgba(57, 255, 20, 0.4); /* A subtle radioactive glow */
    font-weight: 900 !important;
    letter-spacing: 1px;
}

/* Ensure the Links below them stay Cream */
footer a, footer li, footer p {
    color: #F5F5DC !important;
    text-shadow: none !important;
}

CSS

/* --- SITE TITLE & NAVIGATION LINK COLOR OVERRIDE --- */

/* 1. Fix the Site Title ("Serenity Rhythms") */
.wp-site-header .site-title,
.wp-site-header .site-title a {
    color: #F5F5DC !important; /* Forces Cream/White */
}

/* 2. Fix the Navigation Links (THE PAD, THE ROYAL WE, etc.) */
.wp-site-header nav a, 
.wp-site-header .wp-block-navigation-item a {
    color: #F5F5DC !important; /* Forces Cream/White */
}


/* --- HEADER STACKING OVERRIDE (FINAL FIX) --- */

/* Targets the container holding the Site Title and Tagline */
.wp-site-header .wp-block-group > .wp-block-row {
    flex-wrap: nowrap !important; /* Prevents wrapping onto a new row */
    align-items: center !important;
}

/* Forces the Site Title block to be flexible and stay horizontal */
.wp-site-header .wp-block-site-title {
    max-width: 250px !important; /* Gives room for the word Rhythms */
    white-space: nowrap !important; /* Forces the two words onto one line */
    margin-right: 10px !important;
}

/* Forces the Tagline (Paragraph) to sit on one line and right next to the Title */
.wp-site-header .wp-block-paragraph {
    display: inline-block !important; /* Key fix for horizontal flow */
    max-width: 350px !important; 
    white-space: nowrap !important; /* Forces the quote text onto one line */
    font-size: 10px !important; /* Keeps the quote small so it fits */
    line-height: 1.2 !important;
}