/*
Theme Name: OK BOTS
Theme URI: https://ok-bots.com/
Author: OK BOTS LLC
Description: Single-page brochure block theme for OK BOTS. Routes visitors to on-site or remote service and captures leads.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.9.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: okbots
*/

/* Only what theme.json cannot express lives here. Dark UI; all text pairs measured >= 5:1. */

html { scroll-behavior: smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:where([id]) { scroll-margin-top: 1.5rem; }

:where(a, button, input, select, textarea, summary, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--sage);
	outline-offset: 3px;
	border-radius: 2px;
}

.okb-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--wp--preset--color--sage); color: var(--wp--preset--color--night); padding: .6rem 1rem; text-decoration: none; font-weight: 600;
}
.okb-skip:focus { top: 1rem; }

/* Section rhythm */
.okb-section { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.okb-lead { font-size: var(--wp--preset--font-size--large); max-width: 38rem; }
.okb-muted { color: var(--wp--preset--color--muted); }

/* Header: centered logo, menu row below. Not sticky: a two-row header would cover too much
   of the screen while scrolling; phones get the fixed call/text/request bar instead. */
.okb-header { background: var(--wp--preset--color--night); border-bottom: 1px solid var(--wp--preset--color--line); }
.okb-header-inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding-top: 1rem; padding-bottom: 1rem; }
.okb-header-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.75rem; }
.okb-header .wp-block-site-logo img { height: 435px; width: auto; }
.okb-logo { display: block; line-height: 0; }
.okb-header .okb-logo img { display: block; height: 435px; width: auto; } /* stacked logo, 471x435 */
@media (max-width: 781px) { .okb-header .okb-logo img, .okb-header .wp-block-site-logo img { height: 240px; } }
@media (max-width: 781px) { .okb-header-inner { gap: .25rem; padding-top: .75rem; padding-bottom: .5rem; } }
.okb-footer .okb-logo img { height: 130px; width: auto; }
.okb-nav a { color: var(--wp--preset--color--text); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.okb-nav a:hover { color: var(--wp--preset--color--sage); text-decoration: underline; }
.okb-phone { font-weight: 600; white-space: nowrap; }
@media (max-width: 781px) { .okb-header .okb-header-cta, .okb-header .okb-phone { display: none !important; } }

/* Hero */
.okb-hero, .okb-services { background: var(--wp--preset--gradient--brand); }
.okb-hero h1 { max-width: none; margin-bottom: var(--wp--preset--spacing--50); text-wrap: balance; }
.okb-hero h2.okb-lead-first { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--wp--preset--color--white); margin: 0 0 .35rem; }
.okb-hero h2.okb-lead-first + .okb-lead { margin-top: 0; }
.okb-trust { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin-top: 1.25rem; }
.okb-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--wp--preset--color--line); }

/* Photos. Swap files via tools/make-images.py; markup and sizes stay the same. */
.okb-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--wp--preset--color--line); }
@media (max-width: 781px) { .okb-hero-media .okb-photo { aspect-ratio: 16 / 9; } }
.okb-route-photo {
	display: block; width: calc(100% + 2 * var(--wp--preset--spacing--40)); max-width: none; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40);
}
.okb-why { position: relative; overflow: hidden; isolation: isolate; }
.okb-why > .okb-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none !important; margin: 0 !important; object-fit: cover; z-index: -2; }
.okb-why::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,23,19,.8) 0%, rgba(15,23,19,.74) 100%); }
/* Industries photo fills the full height of the industry list beside it (desktop). */
@media (min-width: 782px) {
	.okb-industries-media { position: relative; min-height: 16rem; }
	.okb-industries-media > .okb-photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}
@media (max-width: 781px) { .okb-industries-media > .okb-photo { aspect-ratio: 16 / 9; } }
/* Trim the last row's trailing paragraph margin so photo and text end on the same line. */
.okb-industries p:last-child { margin-bottom: 0; }
.okb-robot { display: block; width: min(240px, 60vw); height: auto; margin-inline: auto; }

/* Route panels: the two ways we work */
.okb-route { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--wp--preset--color--line); border-top: 4px solid var(--wp--preset--color--forest); }
.okb-route.is-remote { border-top-color: var(--wp--preset--color--sage); }
.okb-route .wp-block-buttons { margin-top: auto; padding-top: 1.25rem; }
.okb-route ul { padding-left: 1.1rem; margin: 0; }
.okb-route li + li { margin-top: .3rem; }
.okb-route li::marker { color: var(--wp--preset--color--sage); }
.okb-tag { font-size: .9375rem; color: var(--wp--preset--color--muted); margin: 0 0 .75rem; }

/* Secondary button on dark */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--sage); border: 2px solid currentColor; }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--wp--preset--color--white); }
.wp-block-button.is-style-forest > .wp-block-button__link { background: var(--wp--preset--color--forest); color: #fff; border: 1px solid var(--wp--preset--color--sage); }
.wp-block-button.is-style-forest > .wp-block-button__link:hover { background: #4E785B; }

/* Process: a true sequence, so it is numbered */
.okb-steps { counter-reset: okb; list-style: none; padding: 0; }
.okb-step { counter-increment: okb; border-left: 2px solid var(--wp--preset--color--line); padding-left: 1.25rem; }
.okb-step h3::before {
	content: counter(okb); display: inline-grid; place-items: center;
	width: 2rem; height: 2rem; margin-right: .6rem; border-radius: 50%;
	background: var(--wp--preset--color--forest); color: #fff; font-size: 1rem; vertical-align: .15em;
}

/* Industries: rows, not cards */
.okb-industries > * { border-top: 1px solid var(--wp--preset--color--line); padding-top: .9rem; }

/* Service area */
.okb-cities { columns: 2 12rem; column-gap: 2rem; padding-left: 1.1rem; margin: 0; }

/* Contact */
.okb-contact-card { border: 1px solid var(--wp--preset--color--line); }
.okb-fallback { border-left: 4px solid var(--wp--preset--color--sage); padding: .25rem 1.25rem; }
.okb-emergency { border-left: 4px solid #E0782B; padding: .25rem 1rem; }

/* Fluent Forms on dark [VERIFY selectors against installed version] */
.okb-contact-card .ff-el-input--label label { color: var(--wp--preset--color--text); font-weight: 600; }
.okb-contact-card .ff-el-form-control { background: var(--wp--preset--color--night); color: var(--wp--preset--color--text); border: 1px solid #6F8578; border-radius: 4px; padding: .7rem .8rem; font: inherit; }
.okb-contact-card .ff-el-form-check-label { color: var(--wp--preset--color--text); }
.okb-contact-card .ff-btn-submit { background: var(--wp--preset--color--sage) !important; color: var(--wp--preset--color--night) !important; font-weight: 600; border-radius: 4px; padding: .85rem 1.35rem; }
.okb-contact-card .ff-message-success { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--text); border-color: var(--wp--preset--color--sage); }

.okb-admin-note { border-left: 4px solid #E0782B; padding: .5rem 1rem; font-size: .9375rem; }

.okb-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Footer */
.okb-footer { border-top: 1px solid var(--wp--preset--color--line); }

/* Mobile quick-contact bar: call, text, request */
.okb-callbar { display: none; }
@media (max-width: 781px) {
	.okb-callbar {
		display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 1px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		background: var(--wp--preset--color--line); box-shadow: 0 -2px 12px rgba(0,0,0,.45);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.okb-callbar a { display: flex; align-items: center; justify-content: center; min-height: 3.25rem; font-weight: 600; text-decoration: none; }
	.okb-callbar .is-call { background: var(--wp--preset--color--sage); color: var(--wp--preset--color--night); }
	.okb-callbar .is-text { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--white); }
	.okb-callbar .is-book { background: var(--wp--preset--color--forest); color: #fff; }
	body { padding-bottom: 3.5rem; }
}