/* 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: REPLACED WITH STRUCTURAL FIXES
   ========================================== */

/* 1. Force Astra's Header Layout engine to treat Row 2 as a solid block below Row 1 */
.ast-below-header, 
.site-header-focus-item.ast-below-header-wrap {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10 !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background-color: #222222 !important; /* Forces the row background to match your upper nav area */
}

/* 2. Fix the flex alignment inside Astra's Center Section grid for Row 2 */
.ast-below-header-bar[data-section="section-below-header-builder"] .site-header-section.ast-below-header-section-center {
    display: flex !important;
    justify-content: center !important; /* Centers your icons and box exactly as configured in Astra */
    align-items: center !important;
    flex-direction: row !important;
    gap: 15px !important;
}

/* 3. Make sure the container doesn't have a negative top margin pulling it down into the body */
.site-below-header-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. Prevent your main page content or hero section from lifting up over the header */
#content, 
.site-content,
.main-header-bar-wrap {
    top: 0 !important;
    margin-top: 0 !important;
}
/* 1. Reset the layout flow of Astra's entire header builder container stack */
header.site-header,
.site-header-header-builder-wrap {
    display: flex !important;
    flex-direction: column !important; /* Forces row 1, then row 2, to stack vertically */
    position: relative !important;
}

/* 2. Target the specific structural block Astra uses for the below-header builder wrap */
.ast-below-header-wrap {
    order: 2 !important; /* Explicitly forces it to render immediately after the primary menu row */
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
}

/* 3. If Astra is rendering it inside an absolute mobile/desktop header container, un-anchor it */
.ast-header-break-point .site-header-header-builder-wrap .ast-below-header-wrap {
    position: relative !important;
}
/* Brute-force float check */
.ast-below-header-wrap, 
[data-section="section-below-header-builder"] {
    position: fixed !important;
    top: 100px !important; /* Forces it to float near the top of your screen */
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
    width: 100% !important;
    max-width: 1200px !important;
    box-shadow: 0 0 20px rgba(255,0,0,0.5) !important; /* Adds a red shadow glow to track it */
}