/*
Theme Name: Monshina
Description: قالب بلوکی سایت منشینا، راست‌چین، با فونت پیدا از خود سایت.
Version: 0.2.0
Requires at least: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: monshina
*/

/*
Peyda fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com
---------------------------------------------------------------------
This set of fonts are used in this project under the license: (9W2SNC)
---------------------------------------------------------------------
*/
@font-face {
	font-family: Peyda;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/PeydaWeb-Regular.woff2) format("woff2");
}
@font-face {
	font-family: Peyda;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(assets/fonts/PeydaWeb-Bold.woff2) format("woff2");
}

/* Layout pieces used by the page content (classes are set on core blocks with "className"). */

.mn-hero { padding-block: clamp(3rem, 6vw, 5.5rem); background: var(--wp--preset--color--surface); }
.mn-hero h1 { margin-block-end: 1rem; }
.mn-hero .mn-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); max-width: 40rem; }

.mn-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.mn-section--alt { background: var(--wp--preset--color--surface); }
.mn-section > h2 { margin-block-end: .5rem; }
.mn-section > .mn-sub { color: var(--wp--preset--color--muted); margin-block-start: 0; }

.mn-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

.mn-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.mn-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: 1.5rem;
}
.mn-section--alt .mn-card { box-shadow: 0 1px 2px rgb(16 24 40 / 6%); }
.mn-card h3 { font-size: var(--wp--preset--font-size--large); margin-block: 0 .5rem; }
.mn-card p { margin-block: 0; }
.mn-card .mn-icon { font-size: 1.75rem; line-height: 1; margin-block-end: .75rem; }

.mn-steps { counter-reset: mn-step; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mn-step { position: relative; padding-block-start: 3.25rem; }
.mn-step::before {
	counter-increment: mn-step;
	content: counter(mn-step, persian);
	position: absolute; inset-block-start: 0; inset-inline-start: 0;
	inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base);
	font-weight: 700;
}
.mn-step h3 { font-size: var(--wp--preset--font-size--large); margin-block: 0 .5rem; }

.mn-callout {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	background: #fff8e8;
	border-radius: 10px;
	padding: 1rem 1.25rem;
}

.mn-faq .wp-block-details {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: .9rem 1.25rem;
	background: var(--wp--preset--color--base);
}
.mn-faq .wp-block-details + .wp-block-details { margin-block-start: .75rem; }
.mn-faq summary { font-weight: 700; cursor: pointer; }
.mn-faq .wp-block-details[open] summary { margin-block-end: .5rem; }

.mn-cta { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border-radius: 18px; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.mn-cta h2, .mn-cta p { color: inherit; }
.mn-cta .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--wp--preset--color--primary-dark); }
.mn-cta .wp-block-buttons { justify-content: center; }

.mn-legal h2 { font-size: var(--wp--preset--font-size--large); margin-block-start: 2.25rem; }

/* Header and footer */
.mn-header { border-block-end: 1px solid var(--wp--preset--color--line); }
.mn-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.mn-footer { background: var(--wp--preset--color--ink); color: #d7dee6; }
.mn-footer a { color: #fff; }

/* Request form (rendered by the [monshina_request_form] shortcode) */
.mn-form { display: grid; gap: 1.25rem; }
.mn-form label, .mn-form legend { font-weight: 700; display: block; margin-block-end: .35rem; }
.mn-form .mn-help { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-block: .25rem 0; }
.mn-form input[type=text], .mn-form input[type=tel], .mn-form input[type=url], .mn-form select, .mn-form textarea {
	inline-size: 100%; box-sizing: border-box;
	font: inherit; padding: .7rem .9rem;
	border: 1px solid #b8c4c1; border-radius: 10px; background: #fff; color: inherit;
}
.mn-form input:focus, .mn-form select:focus, .mn-form textarea:focus { outline: 3px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent); border-color: var(--wp--preset--color--primary); }
.mn-form textarea { min-block-size: 8rem; }
.mn-form fieldset { border: 0; padding: 0; margin: 0; }
.mn-form .mn-choice { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin-block: .25rem; }
.mn-form details { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1rem 1.25rem; }
.mn-form details[open] { display: grid; gap: 1.25rem; }
.mn-form summary { font-weight: 700; cursor: pointer; }
.mn-form .mn-error { color: #b42318; font-size: var(--wp--preset--font-size--small); margin-block: .3rem 0; }
.mn-form [aria-invalid=true] { border-color: #b42318; }
.mn-form .mn-hp { position: absolute; inset-inline-start: -9999px; }
.mn-form .mn-field-bale { display: none; }
.mn-form:has(#mn-contact-bale:checked) .mn-field-bale { display: block; }
.mn-form button[type=submit] {
	font: inherit; font-weight: 700; cursor: pointer;
	background: var(--wp--preset--color--primary); color: #fff;
	border: 0; border-radius: 10px; padding: .85rem 1.75rem; justify-self: start;
}
.mn-form button[type=submit]:hover { background: var(--wp--preset--color--primary-dark); }
.mn-form-done { border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 1.5rem; background: var(--wp--preset--color--surface); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }