/*
Theme Name: Stapp Theme
Description: Child theme of Newspaperly for the Stapp website. Custom footer, responsive layout, and dynamic legal metadata.
Author: Ali Dearmon, LLC
Author URI: https://alidearmon.com/
Template: newspaperly
Version: 1.0.0
Tested up to: 6.7
Requires PHP: 7.4
License: This child theme is licensed for Stapp Official Use only. No license to modify theme.
Text Domain: stapp-theme
*/

/* ==========================================================================
   Stapp Footer Navigation
   ========================================================================== */

.stapp-footer-nav {
	background-color: #f2f4f4;
	padding: 40px 25px 30px;
	width: auto; /* was 100% */
	float: left;
	/* added 3 lines below */
	/* smaller margin value = more dark gray showing */
	/* larger marger value = less dark gray showing */
	margin: 0 -23px;
	padding-left: 46px;
	padding-right: 46px;
}

.stapp-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.stapp-footer-col h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 15px;
	color: #000;
}

.stapp-footer-col p {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	color: #333;
	margin: 0 0 12px;
}

.stapp-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.stapp-footer-col ul li {
	margin-bottom: 8px;
}

.stapp-footer-col a {
	font-size: 14px;
	font-weight: 300;
	color: #0073aa;
	text-decoration: none;
}

.stapp-footer-col a:hover,
.stapp-footer-col a:focus {
	color: #005177;
	text-decoration: underline;
}

/* ==========================================================================
   Mobile Responsive – 768px Breakpoint (Phase 4, Concept 1)

   Parent theme breakpoint context:
   1023px – hamburger menu activates, site branding full-width
    992px – content/sidebar stack to 100%
    900px – parent footer widget columns stack
    768px – THIS breakpoint (child theme)
    700px – parent font-size reductions
   ========================================================================== */

@media screen and (max-width: 768px) {

	/* ------------------------------------------------------------------
	   1. Navigation – Enhanced mobile menu spacing
	   ------------------------------------------------------------------ */

	#smobile-menu .main-navigation ul li a {
		padding: 14px 20px;
		font-size: 16px;
		line-height: 1.4;
	}

	#smobile-menu .main-navigation ul li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}

	#smobile-menu .main-navigation ul ul.sub-menu li a,
	#smobile-menu .main-navigation ul ul.children li a {
		padding: 12px 20px 12px 35px;
		font-size: 14px;
	}

	.secondary-menu .smenu ul li a,
	.secondary-menu ul.smenu li a {
		padding: 14px 16px;
	}

	/* ------------------------------------------------------------------
	   2. Header logo – Smaller sizing
	   ------------------------------------------------------------------ */

	.site-branding {
		padding: 15px 20px 20px;
	}

	.site-branding .site-title {
		font-size: 24px;
	}

	.site-branding .site-description {
		font-size: 13px;
	}

	.branding-logo .custom-logo,
	.site-branding.branding-logo img {
		display: block;
		margin: 0 auto;
		max-width: 50%;
		height: auto;
	}

	/* Featured images (post thumbnails) */
	.featured-thumbnail img {
		display: block;
		margin: 0 auto;
		max-width: 50%;
		height: auto;
	}

	/* Related post thumbnails – 50% of desktop 160px = 80px */
	.posts-related .list-related-posts .featured-thumbnail {
		max-width: 80px;
		max-height: 80px;
		margin: 0 auto;
	}

	/* Images inside post/page content */
	article .entry-content img {
		display: block;
		margin: 0 auto 2em;
		max-width: 50%;
		height: auto;
	}

	/* Gutenberg image blocks (figure wrapper) */
	article .entry-content figure.wp-block-image {
		margin-bottom: 2em;
	}

	/* ------------------------------------------------------------------
	   3. Multi-column layouts – Single column stacking
	   ------------------------------------------------------------------ */

	/* Stapp footer grid: 4 columns → 1 column */
	.stapp-footer-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.stapp-footer-nav {
		padding: 25px 20px 20px;
		margin: 0 -23px;
		padding-left: 23px;
		padding-right: 23px;
	}

	.stapp-footer-col {
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	}

	.stapp-footer-col:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	/* Header widget columns */
	.header-widgets-three {
		max-width: 100%;
		padding: 10px 0;
	}

	/* Related posts grid */
	.posts-related ul.grid-related-posts li {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 20px;
	}

	/* ------------------------------------------------------------------
	   4. Touch targets – Minimum 44px (WCAG 2.5.8)
	   ------------------------------------------------------------------ */

	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"] {
		min-height: 44px;
		padding: 12px 24px;
		font-size: 16px;
	}

	.blogpost-button {
		min-height: 44px;
		padding: 14px 25px;
		font-size: 15px;
		display: inline-block;
	}

	.page-numbers li a,
	.page-numbers.current,
	.page-numbers.dots {
		min-height: 44px;
		min-width: 44px;
		padding: 12px 14px;
		font-size: 14px;
		text-align: center;
	}

	.nav-links .nav-previous a,
	.nav-links .nav-next a {
		padding: 12px 16px;
		min-height: 44px;
	}

	.stapp-footer-col ul li {
		margin-bottom: 4px;
	}

	.stapp-footer-col ul li a,
	.stapp-footer-col a {
		display: inline-block;
		padding: 6px 0;
		min-height: 44px;
		line-height: 1.6;
	}

	.comments-area .reply .comment-reply-link {
		display: inline-block;
		min-height: 44px;
		padding: 10px 16px;
		line-height: 1.5;
	}

	.widget ul li a {
		display: inline-block;
		padding: 4px 0;
		min-height: 44px;
		line-height: 2.2;
	}

	/* ------------------------------------------------------------------
	   5. Font sizes – Readability on small screens
	   ------------------------------------------------------------------ */

	h1.entry-title,
	h2.entry-title {
		font-size: 26px;
	}

	.blogposts-list-content h2 {
		font-size: 20px;
	}

	article .entry-content {
		font-size: 15px;
		line-height: 1.7;
	}

	.entry-meta,
	.post-data-text {
		font-size: 15px;
	}

	.archive .page-header h1 {
		font-size: 28px;
	}

	.comments-area .comments-title,
	#comments h3#reply-title {
		font-size: 22px;
	}

	span.bottom-header-title {
		font-size: 34px;
	}

	#secondary .widget {
		font-size: 14px;
	}

	.swidgets-wrap h3 {
		font-size: 16px;
	}

	/* ------------------------------------------------------------------
	   6. Image-to-heading spacing
	   ------------------------------------------------------------------ */

	article .entry-content h3 {
		margin-top: 3em;
	}

}

/* ==========================================================================
   700px Cascade Fix
   Restores parent theme's intended font sizes that the 768px block
   would otherwise override due to child stylesheet source order.
   ========================================================================== */

@media screen and (max-width: 700px) {

	.site-branding .site-title {
		font-size: 29px;
	}

	.site-branding .site-description {
		font-size: 14px;
	}

}

/* ==========================================================================
   Concept 2: Hamburger Menu – Breakpoint Override (Phase 4)

   Parent theme activates mobile menu at 1023px.
   We override: desktop nav stays visible 769px–1023px,
   hamburger activates at 768px with enhanced styling.
   ========================================================================== */

/* ------------------------------------------------------------------
   Desktop nav restored for 769px+ (overrides parent 1023px rules)
   ------------------------------------------------------------------ */

@media screen and (min-width: 769px) {

	.main-navigation {
		display: block !important;
	}

	.super-menu,
	.toggle-mobile-menu {
		display: none !important;
	}

	#smobile-menu,
	#mobile-menu-overlay {
		display: none !important;
	}

	body.mobile-menu-active #page {
		transform: none !important;
		position: static !important;
	}

	.site-branding {
		width: 50%;
		max-width: 50%;
		text-align: left;
	}

}

/* ------------------------------------------------------------------
   Mobile menu at 768px and below
   ------------------------------------------------------------------ */

@media screen and (max-width: 768px) {

	/* Hide desktop nav, show hamburger */
	.main-navigation {
		display: none;
	}

	.super-menu {
		display: block;
	}

	/* Site branding – full width, centered */
	.site-branding {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}

	/* Hamburger button – touch-friendly */
	.super-menu .toggle-mobile-menu {
		min-height: 44px;
		padding: 10px 0;
		font-size: 16px;
	}

	/* Slide-in panel – smooth transition, wider */
	#smobile-menu {
		width: 80%;
		left: -80%;
		transition: transform 0.3s ease;
	}

	#smobile-menu.show {
		transform: translateX(0);
	}

	/* Menu items – touch-friendly spacing */
	#smobile-menu.show .main-navigation ul li a {
		padding: 14px 20px;
		font-size: 16px;
		min-height: 44px;
		display: block;
		line-height: 1.4;
	}

	#smobile-menu.show .main-navigation ul li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	/* Sub-menu items – indented, slightly smaller */
	#smobile-menu.show .main-navigation ul ul.sub-menu li a,
	#smobile-menu.show .main-navigation ul ul.children li a {
		padding: 12px 20px 12px 40px;
		font-size: 14px;
		min-height: 44px;
	}

	#smobile-menu.show .main-navigation ul ul.sub-menu li,
	#smobile-menu.show .main-navigation ul ul.children li {
		border-bottom-color: rgba(255, 255, 255, 0.05);
	}

	/* Sub-arrow touch target */
	#smobile-menu .main-navigation ul li .sub-arrow {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	/* Overlay – smooth fade */
	#mobile-menu-overlay {
		transition: opacity 0.3s ease;
		background: rgba(0, 0, 0, 0.6);
	}

	/* Page push – smooth transition matching menu slide */
	.mobile-menu-active #page {
		transition: transform 0.3s ease;
		transform: translate(80%, 0);
	}

	/* Prevent body scroll when menu open */
	html.noscroll,
	body.mobile-menu-active {
		overflow: hidden;
	}
}