/*
Theme Name: Mokoweb Home
Description: Child theme of Twenty Twenty-Five for the network home page.
Template: twentytwentyfive
Version: 1.0.1
Text Domain: mokoweb-home
*/

/* ==========================================================================
   1. BACKGROUND: five vertical stripes behind everything
   ========================================================================== */
.mw-bg {
	--mw-c1: var(--wp--preset--color--mw-background, #0A0E0B);
	--mw-c2: var(--wp--preset--color--mw-background, #0A0E0B);
	--mw-c3: var(--wp--preset--color--mw-background, #0A0E0B);
	--mw-c4: var(--wp--preset--color--mw-background, #0A0E0B);
	--mw-c5: var(--wp--preset--color--mw-background, #0A0E0B);

	--mw-overlay-center: 50%;  /* overlay strength at the center of the image stripes */
	position: fixed;
	inset: 0;
	z-index: -1;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 3fr;  /* stripe widths: change the ratios */
	margin: 0;
	padding: 0;
}
.mw-bg > * { margin: 0; min-height: 0; }

.mw-bg > :nth-child(1) { background-color: var(--mw-c1); }
.mw-bg > :nth-child(2) { background-color: var(--mw-c2); background-size: cover; background-position: center; }
.mw-bg > :nth-child(3) { background-color: var(--mw-c3); }
.mw-bg > :nth-child(4) { background-color: var(--mw-c4); background-size: cover; background-position: center; }
.mw-bg > :nth-child(5) { background-color: var(--mw-c5); }

/* Overlay on the image stripes: stripe color, 50% at the center, 100% at the sides */
.mw-bg > :nth-child(2),
.mw-bg > :nth-child(4) { position: relative; }

.mw-bg > :nth-child(2)::before,
.mw-bg > :nth-child(4)::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.mw-bg > :nth-child(2)::before {
	background: linear-gradient(to right,
		var(--mw-c2),
		color-mix(in srgb, var(--mw-c2) var(--mw-overlay-center), transparent),
		var(--mw-c2));
}
.mw-bg > :nth-child(4)::before {
	background: linear-gradient(to right,
		var(--mw-c4),
		color-mix(in srgb, var(--mw-c4) var(--mw-overlay-center), transparent),
		var(--mw-c4));
}

/* ==========================================================================
   2. FIELD: reusable style. Add the class "mw-field" to a Search block.
   ========================================================================== */

.mw-field {
	/* Field */
	--mw-field-bg: var(--wp--preset--color--mw-background-secondary, #131A14);
	--mw-field-text: var(--wp--preset--color--mw-text, #E8F1E9);
	--mw-field-placeholder: var(--wp--preset--color--mw-text-secondary, #A0ADA3);
	--mw-field-border: var(--wp--preset--color--mw-border, #35443A);
	--mw-field-border-hover: var(--wp--preset--color--mw-primary, #4F7A5B);
	--mw-field-border-focus: var(--wp--preset--color--mw-primary-hover, #9CC7A7);
	--mw-field-radius: 999px;

	/* Button */
	--mw-btn-bg: var(--wp--preset--color--mw-primary, #4F7A5B);
	--mw-btn-bg-hover: var(--wp--preset--color--mw-primary-hover, #9CC7A7);
	--mw-btn-bg-active: var(--wp--preset--color--mw-primary, #4F7A5B);
	--mw-btn-text: var(--wp--preset--color--mw-text, #E8F1E9);
	--mw-btn-text-hover: var(--wp--preset--color--mw-background, #0A0E0B);

	/* Motion */
	--mw-speed: 0.2s;
}

/* The bar */
.mw-field .wp-block-search__inside-wrapper {
	background-color: var(--mw-field-bg);
	border: 1px solid var(--mw-field-border);
	border-radius: var(--mw-field-radius);
	padding: 4px;
	transition: border-color var(--mw-speed) ease, box-shadow var(--mw-speed) ease;
}
.mw-field .wp-block-search__inside-wrapper:hover {
	border-color: var(--mw-field-border-hover);
}
.mw-field .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--mw-field-border-focus);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-field-border-focus) 25%, transparent);
}

/* The text field inside the bar */
.mw-field .wp-block-search__input {
	background: transparent;
	color: var(--mw-field-text);
	border: 0;
	outline: none;
}
.mw-field .wp-block-search__input::placeholder {
	color: var(--mw-field-placeholder);
}

/* The button */
.mw-field .wp-block-search__button {
	background-color: var(--mw-btn-bg);
	color: var(--mw-btn-text);
	border: 0;
	border-radius: var(--mw-field-radius);
	cursor: pointer;
	transition: background-color var(--mw-speed) ease, color var(--mw-speed) ease, transform var(--mw-speed) ease;
}
.mw-field .wp-block-search__button:hover {
	background-color: var(--mw-btn-bg-hover);
	color: var(--mw-btn-text-hover);
}
.mw-field .wp-block-search__button:active {
	background-color: var(--mw-btn-bg-active);
	transform: scale(0.97);
}
.mw-field .wp-block-search__button:focus-visible {
	outline: 2px solid var(--mw-field-border-focus);
	outline-offset: 2px;
}

/* Respect visitors who turn off animations in their device settings */
@media (prefers-reduced-motion: reduce) {
	.mw-field * { transition: none !important; }
}