/* * Kami – main stylesheet, enqueued via inc/enqueue.php. * style.css in the theme root is left as theme metadata only (WP requirement). */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--fa-color-text); background: var(--fa-color-background); font-family: var(--fa-font-body); font-size: var(--fa-text-size); line-height: var(--fa-line-height); }
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; font-family: var(--fa-font-heading); font-weight: 400; hyphens: auto; }
a { color: var(--fa-color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--fa-color-primary); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 10001; top: -100px; left: 16px; padding: 12px 20px; color: var(--fa-color-background); background: var(--fa-color-primary); border-radius: 0 0 5px 5px; font-family: var(--fa-font-body); font-size: 14px; font-weight: 600; text-decoration: none; transition: top .2s ease; }
.skip-link:focus { top: 0; color: var(--fa-color-background); text-decoration: none; }
.hero__title span, .intro__title span, .process-steps__title span, .services-grid__title span, .faq-block__title span, .cta-block__title span, .benefits__title span, .pricing__title span, .reviews__title span, .contact-form__title span { color: var(--fa-color-primary); }
.image-text__title span { color: var(--fa-color-primary); }
/* ---------- Layout ---------- */
.site-container { width: 100%; max-width: var(--fa-content-width); margin: 0 auto; padding: 0 var(--fa-space-md); }
.site-content { width: 100%; }
.content-area { width: 100%; max-width: var(--fa-reading-width); margin: 0 auto; padding: var(--fa-section-space) var(--fa-space-md); }
/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: var(--fa-button-height); padding: 0 var(--fa-button-padding); color: var(--fa-color-background); background: transparent; border: 1px solid transparent; border-radius: var(--fa-button-radius); font-family: var(--fa-font-heading); font-size: var(--fa-button-font-size); line-height: 1; font-weight: var(--fa-button-font-weight); text-decoration: none; white-space: nowrap; transition: color .3s ease, background .3s ease, border-color .3s ease, filter .3s ease, transform .3s ease; }
.button:hover { text-decoration: none; transform: translateY(-2px); }
.button--primary { color: var(--fa-button-text); background: var(--fa-button-background); border-color: var(--fa-button-background); }
.button--primary:hover { color: var(--fa-color-background); background: var(--fa-color-primary); border-color: var(--fa-color-primary); }
.button--secondary { color: var(--fa-color-background); background: transparent; border-color: var(--fa-color-background); }
.button--secondary:hover { color: var(--fa-color-primary); background: var(--fa-color-background); border-color: var(--fa-color-background); }
.button--outline { color: var(--fa-color-primary); background: transparent; border-color: var(--fa-color-primary); }
.button--outline:hover { color: var(--fa-color-background); background: var(--fa-color-primary); border-color: var(--fa-color-primary); }
.button--blue { color: var(--fa-color-background); background: var(--fa-color-primary); border-color: var(--fa-color-primary); }
.button--blue:hover { color: var(--fa-color-background); background: var(--fa-color-primary); border-color: var(--fa-color-primary); }
.button::after { display: block; flex: 0 0 16px; width: 16px; height: 16px; content: ""; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s ease; }
.button:hover::after { transform: translateX(4px); }
@media (max-width:500px) {
	.site-container { padding-right: 20px; padding-left: 20px; }
}
@media (prefers-reduced-motion:reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}