/* 1. Make the container full-width on EVERY page/post */
.site,
.site-content,
.content-area,
.wrap,
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

/* 2. Keep the TEXT readable (not stretched to the edges) */
.entry-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px; /* Added a bit more breathing room on the sides */
}

/* Centering Post Titles and Aligning Header with Content */
.entry-header, 
.site-header-main, 
.header-wrapper {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

/* Specifically target the Title for centering */
.entry-title {
    text-align: center !important;
    width: 100%;
}

/* Add space around the main title */
.entry-title {
    margin-top: 30px !important;    /* Space above the title */
    margin-bottom: 30px !important; /* Space below the title */
}

/* Add space below every image and image block */
.wp-block-image, 
figure, 
img {
    margin-bottom: 20px !important;
}

/* Add space above images so they don't hug the text above them */
.wp-block-image {
    margin-top: 20px !important;
}



/*.home .site,
.home .site-content,
.home .content-area,
.home .wrap,
.home .container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin: 0 !important;
}

.home .entry-content {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
} */

@media (max-width: 768px) {
	.home .entry-content > :first-child img {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
	}
}

.home {
	overflow-x: hidden;
}

/* Kill the WordPress Like Button and Sharing Branding */
#jp-post-flair, 
.sharedaddy, 
.sd-like, 
.sd-sharing-enabled {
    display: none !important;
}

/* Hide Date and Author Metadata */
.entry-meta, 
.entry-footer, 
.byline, 
.posted-on, 
.author {
    display: none !important;
}

/* Hide Comments Section and "Comments Closed" messages */
#comments, 
.comments-area, 
.comment-respond, 
.no-comments {
    display: none !important;
}



/* Mobile specific spacing for the menu */
@media screen and (max-width: 768px) {
    /* Spacing for the entire menu container */
    .menu-modal-inner, 
    .modal-menu-container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    /* Spacing for individual menu links if the container fix isn't enough */
    .modal-menu a, 
    .menu-item a {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media screen and (max-width: 768px) {
    /* Targets the sub-menu container */
    .modal-menu .sub-menu, 
    .menu-item .sub-menu,
    ul.children {
        padding-left: 30px !important;
        margin-left: 0 !important;
    }

    /* Ensures the links inside that sub-menu also respect the side gap */
    .sub-menu a, 
    .children a {
        padding-left: 10px !important;
    }
}



@media screen and (max-width: 768px) {
    /* 1. Hide sub-menus by default */
    .modal-menu .sub-menu, 
    .menu-item .sub-menu {
        display: none !important;
        visibility: hidden;
    }

    /* 2. Show sub-menu when the parent 'Articles' is tapped/focused */
    .menu-item-has-children:focus-within > .sub-menu,
    .menu-item-has-children:hover > .sub-menu {
        display: block !important;
        visibility: visible;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* 3. Add a small indicator so people know it's expandable */
    .menu-item-has-children > a:after {
        content: ' ▾';
        font-size: 0.8em;
    }
}







/* Penscratch 2 Mobile Padding Reset */
@media screen and (max-width: 768px) {
    /* Tighten the main article text area */
    .entry-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Tighten the header area (Title and Nav) */
    .entry-header, 
    .site-header-main, 
    .header-wrapper {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Ensure the main site container doesn't force extra margins */
    .site-content .wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Hide the page title only on the homepage */
.home .entry-header {
    display: none !important;
}