/* ==========================================================================
   1. GLOBAL HIDDEN ELEMENTS & OVERFLOW FIXES
   ========================================================================== */
.entry-meta, 
.post-meta, 
.meta-wrapper,
.relatedposts,
.related-posts,
div[class*="related-posts"],
div[class*="relatedposts"] { 
    display: none !important; 
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   2. MOBILE VIEWPORT ADJUSTMENTS (768px and down)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* --- FULL-WIDTH BACKGROUND CONTAINERS ---
       Forces your background columns, groups, sections, and structural 
       theme panels to stretch completely edge-to-edge across the phone display. */
    div[class*="layout-"],
    div[class*="container"],
    article, 
    .inside-article,
    .wp-block-group,
    .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --- FLEXBOX BLOCK COLUMN STACKING --- */
    .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- SAFE TEXT BOUNDARIES (THE FIX) ---
       Applies clean padding specifically to typography blocks. 
       Using width: auto instead of 100% lets sentences wrap beautifully 
       before they hit the right safety margin. */
    .entry-content p, 
    .entry-content h1, 
    .entry-content h2, 
    .entry-content h3, 
    .entry-content h4, 
    .entry-content h5, 
    .entry-content h6,
    .wp-block-paragraph,
    .wp-block-heading,
    .wp-block-column, 
    p, h2, h3 {
        box-sizing: border-box !important;
        width: auto !important; 
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- MOBILE BUTTONS --- */
    .wp-block-buttons, 
    div[class*="wp-block-button"] {
        justify-content: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 90% !important;
    }
    
    .wp-block-button__link {
        display: inline-block !important;
    }
}
/* --- Related Posts Display & Spacing Patch --- */
.relatedposts,
.related-posts,
div[class*="related-posts"],
div[class*="relatedposts"] {
    display: block !important; /* Forces the section to show up */
}

/* --- Similar Posts Text Alignment Reset --- */
/* --- Similar Posts Section Alignment Override --- */
@media screen and (max-width: 768px) {
    /* Targets the actual wrapper sections holding the title and the list grids */
    div[id*="similar"], 
    section[class*="similar"],
    div[class*="similar-posts"],
    .wp-block-jetpack-related-posts,
    .sharedaddy {
        padding-left: 20px !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Prevents inner images from breaking out of the new safe padded zone */
    div[class*="similar"] img,
    div[class*="similar-posts"] img,
    .wp-block-jetpack-related-posts img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* --- Force Hide Related Posts --- */
.relatedposts,
.related-posts,
div[class*="related-posts"],
div[class*="relatedposts"] {
    display: none !important;
}

/* --- Similar Posts Padding Fix --- */
@media screen and (max-width: 768px) {
    [class*="similar"] h2, 
    [class*="similar"] h3, 
    [class*="similar"] p,
    [class*="similar"] a,
    .site-main > [class*="similar"] h2 {
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }
}
/* --- Absolute Hamburger Alignment Fix (Enlarged) --- */
@media screen and (max-width: 768px) {
    /* 1. Ensure the header container acts as the anchor point */
    #masthead, 
    #mobile-header,
    .site-header {
        position: relative !important;
    }

    /* 2. Lock and scale up the hamburger button precisely to the right edge */
    .menu-toggle,
    button.menu-toggle,
    #mobile-header .menu-toggle,
    .main-navigation .menu-toggle {
        position: absolute !important;
        right: 20px !important; /* Locks it exactly 20px from the right screen edge */
        top: 50% !important;    /* Pulls it down to the middle */
        transform: translateY(-50%) !important; /* Centers it perfectly vertically */
        margin: 0 !important;
        width: auto !important;
        
        /* Icon Sizing Controls */
        font-size: 28px !important;  /* Significantly scales up the 3 horizontal lines */
        padding: 10px !important;     /* Expands the finger touch area for easier tapping */
    }

    /* 3. Forces custom theme font icons or SVG paths inside the button to match the new size */
    .menu-toggle svg,
    .menu-toggle i,
    .menu-toggle .gp-icon {
        width: 32px !important;
        height: auto !important;
        font-size: 32px !important;
    }
}
/* --- Visual Logo Shift Patch --- */
@media screen and (max-width: 768px) {
    /* Physically shifts the graphic image file 20px to the right */
    .site-logo img,
    .mobile-header-logo img,
    .inside-header img,
    header img {
        transform: translateX(20px) !important;
    }
}
/* --- Footer Mobile Logo Scaling Fix --- */
@media screen and (max-width: 768px) {
    /* Targets the image element specifically within your website's footer block */
    footer img,
    .site-footer img,
    div[class*="footer"] img {
        max-width: 180px !important; /* Adjust this number to make it your perfect size */
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}
/* --- Universal Form Mobile Alignment Fix --- */
@media screen and (max-width: 768px) {
    /* 1. Targets every single element nested inside your forms to force a clean side margin */
    form *, 
    .wp-block-form *, 
    div[class*="form"] * {
        box-sizing: border-box !important;
    }

    /* 2. Pads only text elements, labels, and header titles inside the form */
    form h1, form h2, form h3, form h4, form h5, form h6,
    form label, 
    form p, 
    form span:not([class*="error"]):not([id*="error"]) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 3. Safely pads input wrappers or columns containing the input boxes */
    div[class*="input-"], 
    div[class*="field-"], 
    .wp-block-input {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
/* --- Form Submit Button Mobile Spacing Fix --- */
@media screen and (max-width: 768px) {
    /* Targets the submit button and its container block inside the form area */
    form button,
    form input[type="submit"],
    .wp-block-button:has(form),
    div[class*="button-wrap"] {
        margin-left: 20px !important;
        margin-right: 20px !important;
        box-sizing: border-box !important;
        /* If your button stretches 100% wide, this ensures it leaves 20px room on each side */
        width: calc(100% - 40px) !important; 
    }
}
/* --- Form Dropdown Text Visibility Fix --- */
select,
form select,
.wpcf7-select,
.gfield_select {
    height: 48px !important;       /* Forces a standard comfortable vertical block height */
    line-height: 1.4 !important;    /* Relieves vertical squeezing on font baselines */
    padding-top: 8px !important;    /* Generous breathing space inside the top */
    padding-bottom: 8px !important; /* Generous breathing space inside the bottom */
    font-size: 16px !important;     /* Prevents iOS from forcing an auto-zoom on click */
    box-sizing: border-box !important;
}
/* --- Homepage Full-Bleed Hero Header Extension --- */
@media screen and (max-width: 768px) {
    /* 1. Force the home page header containers to be completely see-through */
    .home .site-header,
    .home #masthead,
    .home #mobile-header,
    .home .main-navigation {
        background: transparent !important;
        background-color: transparent !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999 !important; /* Floats the menu options safely on top of your background image */
    }

    /* 2. Pull the main page content block up to the very top edge of the screen */
    .home #page,
    .home .site-content,
    .home #content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. Reset the logo and hamburger back to their native white styles so they contrast against the image */
    .home .menu-toggle,
    .home .menu-toggle svg,
    .home .site-logo img,
    .home .mobile-header-logo img {
        color: #ffffff !important;
        fill: #ffffff !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        background: transparent !important;
    }
}