/* 1. Make the header wrapper transparent and let it float on top of the hero section */
html body #page header#masthead {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    z-index: 9999 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 15px !important; /* Gives the floating links breathing room from the screen edge */
}

/* 2. Clear background layers from the internal theme blocks */
html body #page .site-primary-header-wrap,
html body #page .ast-header-builder-main-bar,
html body #page .main-header-bar,
html body #page .ast-builder-grid-row,
html body #page .ast-builder-grid-row-cell {
    background: transparent !important;
    background-color: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* 3. Re-align the menu links cleanly to stand out against a dark hero graphic */
html body #page .main-header-menu .menu-item a {
    color: #ebdcb9 !important; /* High-contrast antique cream color */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Subtle shadow so text is legible over light parts of an image */
    line-height: normal !important;
    height: auto !important;
}

/* 4. Reposition the logo to the left side and scale it up */
html body #page .site-header-section.ast-site-identity {
    justify-content: flex-start !important; /* Pulls it out of the center row split */
    height: auto !important;
}

html body #page .ast-site-identity img {
    position: relative !important;
    left: 0 !important;
    transform: none !important; /* Removes the center positioning tools */
    max-height: 120px !important; /* <--- Set your preferred logo size here */
    width: auto !important;
    height: auto !important;
    z-index: 99999 !important;
}
/* Apply the retro texture to the main site canvas */
body, .site, .site-content {
    background-color: #f1e9d2; !important; /* Soft, warm antique cream background */
    background-image: url("https://www.transparenttextures.com/patterns/fabric-of-squares.png") !important;
    background-repeat: repeat !important;
}
/* ==========================================
   PART 1: KEEP YOUR WORKING JETPACK STYLES
   ========================================== */

/* 1. Force the Jetpack container to behave like a compact, single-row element */
html body #page .jetpack_subscription_widget,
html body #page .jetpack-sub-widget-container {
    display: inline-block !important;
    vertical-align: middle !important;
    max-width: 280px !important; /* Prevents it from expanding over your hero content */
    margin: 0 0 0 15px !important; /* Adds a clean gap between the social icons and the form */
}

/* 2. Force Jetpack's internal layout wrapper to stay on one line */
html body #page .jetpack_subscription_widget form,
html body #page .jetpack_subscription_widget p {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Shrink the Email Input Box to match the icon heights */
html body #page .jetpack_subscription_widget input[type="email"] {
    font-size: 12px !important;
    height: 24px !important; /* Standardized height */
    padding: 4px 10px !important;
    margin: 0 !important;
    border: 1px solid #ebdcb9 !important; /* Antique cream border color */
    background-color: rgba(255, 255, 255, 0.1) !important; /* Semitransparent background */
    color: #ebdcb9 !important;
    border-radius: 4px 0 0 4px !important; /* Rounds only the far left corners */
    width: 140px !important; /* Limits width so it doesn't crowd row 2 */
}

/* Fix placeholder text visibility against the dark background */
html body #page .jetpack_subscription_widget input[type="email"]::placeholder {
    color: rgba(235, 220, 185, 0.6) !important;
}

/* 4. Shrink the Subscribe Button and snap it flush against the input box */
html body #page .jetpack_subscription_widget input[type="submit"],
html body #page .jetpack_subscription_widget button[type="submit"] {
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    height: 24px !important; /* Matches input box height exactly for a continuous line */
    line-height: 24px !important; /* Vertically centers text inside the button */
    padding: 0 8px !important;
    margin: 0 0 0 -1px !important; /* Snaps the button edge directly against the input box border */
    background-color: #ebdcb9 !important; /* Pop of antique cream */
    color: #222222 !important; /* Dark text for clean legibility */
    border: 1px solid #ebdcb9 !important;
    border-radius: 0 4px 4px 0 !important; /* Rounds only the far right corners */
    cursor: pointer !important;
    transition: background 0.2s ease-in-out !important;
    box-sizing: border-box !important; /* Ensures borders don't alter the height */
}

/* Subtle hover effect for the button */
html body #page .jetpack_subscription_widget input[type="submit"]:hover,
html body #page .jetpack_subscription_widget button[type="submit"]:hover {
    background-color: #ffffff !important; 
    border-color: #ffffff !important;
    color: #222222 !important;
}

/* ==========================================
   PART 2: REVERT ABSOLUTE CODE & FIX SPACING
   ========================================== */

/* 1. Reset theme containers back to natural page flow so the gap disappear */
.ast-below-header-wrap,
.ast-below-header,
header .site-below-header-wrap,
header.site-header + div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* 2. Target the actual widget box container inside the body flow and force it upward */
.site-content .jetpack_subscription_widget,
#content .jetpack_subscription_widget {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: -40px auto 20px auto !important; /* Negative top margin pulls it back up right below your main navigation menu */
    position: relative !important;
    z-index: 999 !important;
}

/* 3. Remove the broken gap pushing down your hero section */
#content,
.site-content,
.main-header-bar-wrap + div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}