/*
Theme Name: mokhaled 2026
Theme URI: https://mokhaled.com/
Author: Mohamed Khaled
Author URI: https://mokhaled.com/
Description: Minimal block theme for mokhaled.com: personal site with lessons, insights and products modules. Long-form reading focus, tinted-warm palette, system sans body with Source Serif 4 for h1 headings.
Version: 0.1.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mokhaled-2026
Tags: block-theme, full-site-editing, one-column, minimal
*/

/* Skip link visible only on focus. */
.skip-link.screen-reader-text:focus {
	background: var( --wp--preset--color--background, #fbfdfc );
	color: var( --wp--preset--color--accent, #0a6e62 );
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	left: 1rem;
	top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	box-shadow: 0 0 0 2px var( --wp--preset--color--accent, #0a6e62 );
	text-decoration: none;
	z-index: 100000;
}

/* Focus ring for keyboard users on links and interactive elements. */
a:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-post-title a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent, #0a6e62 );
	outline-offset: 2px;
	border-radius: 2px;
}

/* Site logo: circular crop, header height. */
.mokhaled-site-logo .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.mokhaled-site-logo .custom-logo {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 999px;
	background: var( --wp--preset--color--subtle, #eef2f0 );
}

/* Navigation: mobile overlay surface follows the palette in both light + dark.
   WP renders the overlay with overlayBackgroundColor/overlayTextColor on the
   block; these rules are a hairline-safe fallback for the open state. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--background, #fbfdfc );
	color: var( --wp--preset--color--foreground, #161d1b );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 2rem 1.5rem;
	width: 100%;
	max-width: 28rem;
	margin: 0 auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	padding: 1rem;
	top: 0.5rem;
	right: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open {
	padding: 1rem;
}

/* Mobile overlay layout: override desktop's items-justified-right so the open
   menu stacks vertically, full-width, left-aligned. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.25rem;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
}

/* Mobile overlay link: full-width tap target, left-aligned, hairline divider
   between items (matches the post-row pattern from DESIGN.md). WCAG 2.5.5
   target size satisfied by min-height 48px + padding. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 48px;
	padding: 0.875rem 0.25rem;
	font-size: var( --wp--preset--font-size--medium, 1rem );
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var( --wp--preset--color--subtle, #eef2f0 );
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	border-bottom: 0;
}

/* Navigation: active item state. */
@media ( prefers-reduced-motion: no-preference ) {
	.wp-block-navigation .wp-block-navigation-item__content {
		transition: color 0.12s ease;
	}
}
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
	color: var( --wp--preset--color--accent, #0a6e62 );
	font-weight: 600;
}

/* Quote block: enforce the Notebook "font-shift is the signal" rule.
   WordPress core ships a 0.25em left border on .wp-block-quote by default;
   the design system bans side-stripe borders. The font change to Charter
   italic carries the quote on its own — no border, no glyph, no tint. */
.wp-block-quote {
	border: 0;
	padding-inline-start: 0;
}

/* Dark mode: auto-apply when the visitor's OS is in dark mode.
   Site Editor users who explicitly select the "Dark" style variation will see
   it regardless of OS preference (variation overrides via theme.json output).
   This @media block handles the visitor-side auto-follow case only. */
@media ( prefers-color-scheme: dark ) {
	:root {
		--wp--preset--color--background:  #1a201e;
		--wp--preset--color--foreground:  #e6ebe8;
		--wp--preset--color--muted:       #9aa3a0;
		--wp--preset--color--subtle:      #262d2a;
		--wp--preset--color--accent:      #5ec2a9;
		--wp--preset--color--accent-soft: #143a35;
	}
	.mokhaled-site-logo .custom-logo {
		background: var( --wp--preset--color--subtle, #262d2a );
	}
}