/*
 * Obi GEO Site: the few styles theme.json can't express.
 * Colours come from theme.json presets (--wp--preset--color--*).
 */

:root {
	--og-radius: 16px;
	--og-radius-lg: 24px;
	--og-line: var(--wp--preset--color--line);
	--og-shadow: var(--wp--preset--shadow--soft);
	--og-focus: var(--wp--preset--color--violet);
}

html { scroll-padding-top: 5.5rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--og-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

:where(p, li) code,
.og-footer__mcp code {
	background: var(--wp--preset--color--sand);
	border-radius: 6px;
	padding: 0.1em 0.4em;
	font-size: 0.9em;
	font-family: var(--wp--preset--font-family--mono);
	word-break: break-word;
}

/* ---------- Header ---------- */

/* The template-part wrapper sticks; the inner group only draws the bar. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.og-header {
	position: relative;
	isolation: isolate;
	border-bottom: 1px solid var(--og-line);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
/* The blur sits on a pseudo-element: a backdrop-filter on the header itself
   would trap the full-screen mobile menu inside the header bar. */
.og-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}
.og-header__row { gap: 1rem; }
.og-header__end { gap: 1.25rem; }
.og-header__cta .wp-block-button__link { padding: 0.6em 1.1em; font-size: 0.95rem; white-space: nowrap; }

.og-brand { margin: 0; }
.og-brand a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	white-space: nowrap;
}
.og-brand a::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 7px;
	flex: none;
	background:
		radial-gradient(circle at 34% 34%, #fff 0 20%, transparent 21%),
		linear-gradient(135deg, var(--wp--preset--color--wine) 0%, var(--wp--preset--color--wine) 45%, var(--wp--preset--color--violet) 100%);
}

.og-nav { gap: 1.5rem; }
.og-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--wine); }
.og-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background: var(--wp--preset--color--surface);
}
.og-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.1rem; font-size: 1.15rem; }

/* Keep the hamburger up to tablet width so the bar never wraps. */
@media (min-width: 600px) and (max-width: 1023px) {
	.og-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.og-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
	.og-header__end .og-header__cta { order: -1; }
}
@media (max-width: 380px) {
	.og-header__cta .wp-block-button__link { padding: 0.55em 0.85em; font-size: 0.875rem; }
	.og-header__end { gap: 0.75rem; }
}

/* ---------- Page structure ---------- */

.og-main { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--80); }
.og-main--front { padding-top: 0; }
.og-page-head { margin-bottom: var(--wp--preset--spacing--60); }
.og-page-head .wp-block-post-title { margin-bottom: 0.5rem; }
.og-updated::before { content: "Updated "; }
.og-byline { gap: 0.4rem 1rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.og-byline > * { margin: 0; }
.og-byline .og-published::before { content: "Published "; }

.og-eyebrow {
	font-size: 0.8rem;
	font-weight: 680;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--wine);
	margin-bottom: 0.5rem;
}
.og-eyebrow a { text-decoration: none; }
.og-lead { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--muted); line-height: 1.55; }
.og-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.og-kicker { font-weight: 650; }

/* First heading in a section shouldn't carry the big top margin. */
:where(.wp-block-group, .wp-block-column) > :where(h2, h3):first-child { margin-top: 0; }

/* ---------- Hero ---------- */

.og-hero {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--70);
}
.og-hero h1 { margin-top: 0; font-size: clamp(2.35rem, 5.2vw, 3.6rem); }
.og-hero .og-lead { max-width: 36rem; }
.og-hero .wp-block-columns { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.og-hero__fine { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); margin-top: 0.75rem; }

/* ---------- Example chat ---------- */

.og-chat {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--og-line);
	border-radius: var(--og-radius-lg);
	box-shadow: var(--og-shadow);
	padding: 1.25rem;
	font-size: 0.95rem;
	line-height: 1.5;
}
.og-chat > * + * { margin-top: 0.75rem; }
.og-chat__label {
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.25rem;
}
.og-chat__you {
	background: var(--wp--preset--color--sand);
	border-radius: 16px 16px 4px 16px;
	padding: 0.7rem 0.95rem;
	margin-left: 18%;
}
.og-chat__tool {
	display: inline-block;
	background: var(--wp--preset--color--violet-soft);
	color: #4b38b8;
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
}
.og-chat__ai { padding: 0 0.25rem; }
.og-chat__ai + .og-chat__ai { margin-top: 0.4rem; }
.og-chat .og-chat__list { margin: 0.25rem 0 0; padding-left: 1.25rem; }
.og-chat .og-chat__list li { margin: 0.2rem 0; }
.og-chat__status {
	background: var(--wp--preset--color--green-soft);
	color: var(--wp--preset--color--green);
	border-radius: 12px;
	padding: 0.6rem 0.9rem;
	font-weight: 600;
	font-size: 0.9rem;
}
.og-chat__status::before { content: "\2713\00a0"; }

/* ---------- Sections ---------- */

.is-style-band {
	background: var(--wp--preset--color--sand);
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	margin-top: var(--wp--preset--spacing--70);
}
.is-style-band + * { margin-top: var(--wp--preset--spacing--70); }
.is-style-band + .is-style-band { margin-top: 0; }
.is-style-band.og-band--white { background: var(--wp--preset--color--surface); border-top: 1px solid var(--og-line); border-bottom: 1px solid var(--og-line); }
.og-section { margin-top: var(--wp--preset--spacing--70); }
.og-section-head { margin-top: var(--wp--preset--spacing--70); margin-bottom: var(--wp--preset--spacing--50); text-align: center; }
.og-section-head > p { color: var(--wp--preset--color--muted); }
.og-section-head > h2 { margin-top: 0; }

.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--og-line);
	border-radius: var(--og-radius);
	padding: 1.5rem;
	height: 100%;
}
.is-style-card > :first-child { margin-top: 0; }
.is-style-card > :last-child { margin-bottom: 0; }
.is-style-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.is-style-card p { margin-top: 0.4rem; }
.og-card-link { font-weight: 620; }
.og-cards { gap: 1.25rem; }
.og-cards > .wp-block-column { display: flex; flex-direction: column; }

.og-icon {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 10px;
	background: var(--wp--preset--color--wine-soft);
	color: var(--wp--preset--color--wine);
	font-weight: 750;
	font-size: 1rem;
	margin-bottom: 0.25rem !important;
}

.is-style-cta {
	background: var(--wp--preset--color--wine);
	color: #fff;
	border-radius: var(--og-radius-lg);
	padding: clamp(1.75rem, 5vw, 3rem);
	margin-top: var(--wp--preset--spacing--70);
}
.is-style-cta :where(h2, h3) { color: #fff; margin-top: 0; }
.is-style-cta a:where(:not(.wp-element-button)) { color: #fff; }
.is-style-cta .wp-block-button__link { background: #fff; color: var(--wp--preset--color--wine); }
.is-style-cta .wp-block-button__link:hover,
.is-style-cta .wp-block-button__link:focus { background: var(--wp--preset--color--wine-soft); color: var(--wp--preset--color--wine-deep); }
.is-style-cta .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.is-style-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.is-style-cta .wp-block-button.is-style-outline > .wp-block-button__link:focus { background: rgba(255, 255, 255, 0.12); color: #fff; }
.is-style-cta :where(a, button):focus-visible { outline-color: #fff; }


/* ---------- Buttons ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--wine);
	border: 1.5px solid currentColor;
	padding: calc(0.8em - 1.5px) calc(1.4em - 1.5px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--wine-soft); }
.wp-block-buttons { gap: 0.75rem; }

/* ---------- Lists ---------- */

ul.is-style-checks { list-style: none; padding-left: 0; }
ul.is-style-checks > li { position: relative; padding-left: 2rem; margin: 0.55rem 0; }
ul.is-style-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231d6f47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

ol.is-style-steps { list-style: none; padding-left: 0; counter-reset: og-step; }
ol.is-style-steps > li { counter-increment: og-step; position: relative; padding-left: 3.1rem; margin: 0 0 1.4rem; min-height: 2.2rem; }
ol.is-style-steps > li::before {
	content: counter(og-step);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--wine);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
}
ol.is-style-steps > li strong:first-child { display: block; font-size: 1.08rem; margin-bottom: 0.15rem; }

/* ---------- Tables ---------- */

.wp-block-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 0.95rem; }
.wp-block-table table th,
.wp-block-table table td { border: 0; border-bottom: 1px solid var(--og-line); padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; }
.wp-block-table table thead th { background: var(--wp--preset--color--sand); font-weight: 650; border-bottom: 1px solid var(--og-line); }
.wp-block-table table thead { border-bottom: 0; }
.wp-block-table.is-style-compare { border: 1px solid var(--og-line); border-radius: var(--og-radius); overflow-x: auto; background: var(--wp--preset--color--surface); }
@media (max-width: 600px) {
	.wp-block-table table { font-size: 0.875rem; }
	.wp-block-table table th,
	.wp-block-table table td { padding: 0.55rem 0.5rem; overflow-wrap: anywhere; }
}
.wp-block-table.is-style-compare table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table.is-style-compare table td:first-child { font-weight: 600; }
.wp-block-table figcaption { margin: 0; padding: 0.75rem 0.85rem; border-top: 1px solid var(--og-line); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); text-align: left; }

/* ---------- FAQ (Details blocks) ---------- */

.wp-block-details { border-bottom: 1px solid var(--og-line); padding: 1rem 0; margin: 0; }
.wp-block-details + .wp-block-details { margin-top: 0; }
.wp-block-details:first-of-type { border-top: 1px solid var(--og-line); }
.wp-block-details summary { font-weight: 620; font-size: 1.08rem; cursor: pointer; list-style: none; padding-right: 2rem; position: relative; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: -0.1rem;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--wine);
}
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details[open] > summary { margin-bottom: 0.6rem; }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--ink); }

/* ---------- Guides list ---------- */

.og-guide-list .wp-block-post-template { list-style: none; padding: 0; display: grid; gap: 0; }
.og-guide-list .wp-block-post { border-bottom: 1px solid var(--og-line); padding: 1.4rem 0; margin: 0; }
.og-guide-list .wp-block-post-title { margin: 0 0 0.35rem; font-size: 1.3rem; }
.og-guide-list .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.og-guide-list .wp-block-post-title a:hover { color: var(--wp--preset--color--wine); }
.og-guide-list .wp-block-post-excerpt { color: var(--wp--preset--color--muted); margin: 0; }
.og-guide-list .wp-block-post-excerpt__excerpt { margin: 0; }
.og-more { margin-top: var(--wp--preset--spacing--70); }

/* ---------- Early access form (setup plugin) ---------- */

.og-form { box-sizing: border-box; background: var(--wp--preset--color--surface); border: 1px solid var(--og-line); border-radius: var(--og-radius); padding: 1.5rem; display: grid; gap: 1rem; }
.og-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.og-form .og-form__hint { font-weight: 400; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.og-form :where(input[type="text"], input[type="email"], input[type="url"], select, textarea) {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 0.7rem 0.85rem;
	border: 1px solid #8f8689;
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.og-form textarea { min-height: 6rem; }
.og-form .og-form__check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.og-form .og-form__check input { margin-top: 0.35rem; }
.og-form button {
	font: inherit;
	font-weight: 620;
	background: var(--wp--preset--color--wine);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 0.8em 1.4em;
	cursor: pointer;
	justify-self: start;
}
.og-form button:hover { background: var(--wp--preset--color--wine-deep); }
.og-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.og-notice { border-radius: 12px; padding: 0.9rem 1.1rem; font-weight: 550; }
.og-notice--ok { background: var(--wp--preset--color--green-soft); color: var(--wp--preset--color--green); }
.og-notice--error { background: var(--wp--preset--color--wine-soft); color: var(--wp--preset--color--wine-deep); }

/* ---------- Footer ---------- */

.og-footer {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--og-line);
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--60);
	font-size: 0.95rem;
}
.og-footer__cols { gap: 2rem; }
.og-footer__about, .og-footer__mcp { color: var(--wp--preset--color--muted); max-width: 22rem; }
.og-footer__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--muted); margin: 0 0 0.75rem; font-weight: 680; }
.og-footer__list { list-style: none; padding: 0; margin: 0; }
.og-footer__list li { margin: 0.45rem 0; }
.og-footer__list a { color: var(--wp--preset--color--ink); text-decoration: none; }
.og-footer__list a:hover { color: var(--wp--preset--color--wine); text-decoration: underline; }
.og-footer__legal { margin-top: var(--wp--preset--spacing--60); padding-top: 1.25rem; border-top: 1px solid var(--og-line); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

@media (max-width: 781px) {
	.og-chat__you { margin-left: 8%; }
	.og-hero { padding-top: var(--wp--preset--spacing--70); }
}

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