/*
Theme Name: Koinonia
Theme URI: https://themeshaper.com/koinonia/
Author: Automattic
Author URI: https://automattic.com
Description: Koinonia is a WordPress theme designed for non-profit organizations and community-driven projects. Perfect for showcasing services and initiatives that bring people and pets together, it’s an ideal choice for those who share a passion for caring, connection, and our furry companions.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: koinonia
Tags: wide-blocks, featured-images, full-site-editing, rtl-language-support, style-variations, threaded-comments, translation-ready

/* Progresive enhancement to reduce widows and orphans.
/* https://github.com/WordPress/gutenberg/issues/55190
*/

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption {
    text-wrap: balance;
}
p {
    text-wrap: pretty;
}

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */

/*
 * Control the hover stylings of outline block style.
 * Unnecessary once block styles are configurable via theme.json
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: .0625em !important;
	text-underline-offset: .15em;
}

/*
 * Mobile responsive header styles
 */
@media (max-width: 782px) {
	/* CRITICAL: Hide mobile overlay when closed - must override other display rules */
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Make logo responsive */
	.header-logo img {
		width: 150px !important;
		max-width: 100% !important;
		height: auto !important;
	}
	
	/* Header bar: logo left, hamburger right, both vertically centered */
	.header-bar {
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		gap: var(--wp--preset--spacing--20);
		text-align: left;
	}
	.header-bar .wp-block-navigation {
		justify-content: flex-end !important;
		align-self: center !important;
		width: auto !important;
		margin-left: auto !important;
	}
	.header-bar .wp-block-navigation__responsive-container-open {
		align-self: center !important;
		margin: 0 !important;
	}
	.header-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	/* Adjust header padding on mobile */
	.wp-block-columns.alignwide {
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
	}
	
	/* Stack header elements on mobile */
	.wp-block-group > .wp-block-group {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}
	
	/* Navigation on mobile: hamburger at right */
	.header-bar .wp-block-navigation {
		justify-content: flex-end !important;
		width: auto !important;
	}
	
	/* Hamburger / close: keep control on the right of the bar, but center the icon inside the tap target */
	.header-bar .wp-block-navigation__responsive-container-open,
	.header-bar .wp-block-navigation__toggle,
	.header-bar .wp-block-navigation__responsive-container-close,
	.header-bar button.wp-block-navigation__responsive-container-open,
	.header-bar button.wp-block-navigation__toggle,
	.header-bar .wp-block-navigation button {
		margin-left: auto !important;
		margin-right: 0 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		float: none !important;
		transform: none !important;
	}
	
	/* Navigation wrapper: hamburger at right, vertically centered */
	.header-bar .wp-block-navigation > div:not(.wp-block-navigation__responsive-container),
	.header-bar .wp-block-navigation > nav,
	.header-bar .wp-block-navigation > *:not(.wp-block-navigation__responsive-container) {
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		width: auto !important;
		margin: 0 !important;
		margin-left: auto !important;
		text-align: right !important;
	}
	
	/* Target the specific navigation container - only when OPEN (do not force display when closed) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin: 0 auto !important;
	}
	
	/* Override any inline styles WordPress might add */
	.header-bar .wp-block-navigation[style*="justify-content"] {
		justify-content: center !important;
	}
	
	.header-bar .wp-block-navigation[style*="align-items"] {
		align-items: center !important;
	}
	
	/* Header bar: logo left, hamburger right */
	.header-bar > *:first-child {
		text-align: left !important;
	}
	
	/* Do not use .wp-block-navigation * here — it forced flex-end + margin-left:auto on the SVG inside the hamburger. */

	/* Hamburger button: right side, no centering transform */
	.header-bar button[aria-label*="menu"],
	.header-bar button[aria-label*="Menu"],
	.header-bar button[aria-expanded],
	.header-bar .wp-block-navigation__responsive-container-open,
	.header-bar .wp-block-navigation__responsive-container-open[aria-expanded] {
		position: relative !important;
		left: auto !important;
		transform: none !important;
		margin-left: auto !important;
		margin-right: 0 !important;
	}
	
	/* Collapse submenus by default - only show when toggle is expanded */
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child:has([aria-expanded="false"]) .wp-block-navigation__submenu-container {
		display: none !important;
	}
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child:has([aria-expanded="true"]) .wp-block-navigation__submenu-container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Center the menu items inside the mobile navigation menu */
	.wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-dialog {
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
	}
	
	/* Center all menu items and links (submenu-container has its own collapse/expand rules above) */
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item,
	.wp-block-navigation__responsive-container-content .wp-block-navigation-link,
	.wp-block-navigation__responsive-container-content a,
	.wp-block-navigation__responsive-container-content .wp-block-navigation-link__content {
		text-align: center !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	
	/* Center the menu list (submenu-container when expanded gets flex from collapse rules) */
	.wp-block-navigation__responsive-container-content ul:not(.wp-block-navigation__submenu-container),
	.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container ul {
		text-align: center !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		list-style: none !important;
		padding: 0 !important;
		margin: 0 auto !important;
	}
	
	/* Center list items */
	.wp-block-navigation__responsive-container-content li,
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		text-align: center !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* Target the actual link text content */
	.wp-block-navigation__responsive-container-content .wp-block-navigation-link__label,
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		text-align: center !important;
		display: block !important;
		width: 100% !important;
		margin: 0 auto !important;
	}
	
	/* Override any text-align: right that WordPress might be adding */
	.wp-block-navigation__responsive-container-content * {
		text-align: center !important;
	}
	
	/* Ensure the navigation menu wrapper is centered */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: center !important;
		text-align: center !important;
	}
	
	/* Force center alignment on all navigation link elements */
	.wp-block-navigation__responsive-container-content .wp-block-navigation-link,
	.wp-block-navigation__responsive-container-content .wp-block-navigation-link a {
		text-align: center !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		display: flex !important;
		margin: 0 auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* Override any right alignment styles */
	.wp-block-navigation__responsive-container-content [style*="text-align: right"],
	.wp-block-navigation__responsive-container-content [style*="text-align:right"] {
		text-align: center !important;
	}
	
	.wp-block-navigation__responsive-container-content [style*="justify-content: flex-end"],
	.wp-block-navigation__responsive-container-content [style*="justify-content:flex-end"] {
		justify-content: center !important;
	}
	
	/* Center the entire menu content area */
	.wp-block-navigation__responsive-container.is-menu-open {
		text-align: center !important;
	}
	
	.wp-block-navigation__responsive-container.is-menu-open * {
		text-align: center !important;
	}
	
	/* Ensure navigation container is centered - only when open (preserve hidden state when closed) */
	.wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		margin: 0 auto !important;
	}
	
	/* Navigation block: keep right-aligned in header bar (see earlier rules) */
}

@media (max-width: 480px) {
	/* Smaller logo on very small screens */
	.header-logo img {
		width: 120px !important;
	}
	
	/* Reduce header spacing */
	.wp-block-columns.alignwide {
		padding-left: var(--wp--preset--spacing--10) !important;
		padding-right: var(--wp--preset--spacing--10) !important;
	}
}