/**
 * Outrank — theme stylesheet.
 *
 * Scope: design tokens, utility classes shared with Elementor templates
 * (highlight marks, striped placeholders, blobs, nav, forms), and the
 * PHP-rendered templates (blog, single, archives, 404, fallbacks).
 *
 * Page layouts themselves live in Elementor — colors/typography there
 * reference the Global Kit, so rebranding happens in Site Settings.
 */

/* ---------------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------------- */
:root {
	--ok-lime: #C8F542;
	--ok-lime-soft: #E3FA9E;
	--ok-ink: #16211A;
	--ok-deep: #121B14;
	--ok-card-dark: #233024;
	--ok-body: #4A524C;
	--ok-body-inv: #B9C4BB;
	--ok-ivory: #F2F0E9;
	--ok-lavender: #B49CF6;
	--ok-line: #E3E1D6;
	--ok-white: #FFFFFF;

	--ok-font-display: "Archivo Black", "Archivo", sans-serif;
	--ok-font-body: "Archivo", sans-serif;
	--ok-font-mono: "Space Mono", monospace;

	--ok-radius: 16px;
	--ok-radius-sm: 10px;
	--ok-shadow: 0 14px 34px rgba(18, 27, 20, 0.10);
}

html { scroll-behavior: smooth; }
body {
	font-family: var(--ok-font-body);
	color: var(--ok-body);
	background: var(--ok-white);
	-webkit-font-smoothing: antialiased;
}

.ok-container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.ok-container--narrow { max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
.ok-section { padding: 90px 0; }
.ok-section--ivory { background: var(--ok-ivory); }
.ok-row-between { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }

.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { clip: auto; width: auto; height: auto; left: 12px; top: 12px; z-index: 9999; background: var(--ok-lime); color: var(--ok-ink); padding: 10px 16px; border-radius: 999px; }

/* ---------------------------------------------------------------------
 * 2. Typography helpers (PHP templates; Elementor uses Kit globals)
 * ------------------------------------------------------------------- */
.ok-display {
	font-family: var(--ok-font-display);
	font-weight: 400;
	color: var(--ok-ink);
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: -0.5px;
	font-size: clamp(2.5rem, 6vw, 4.3rem);
	margin: 0 0 18px;
}
.ok-display--sm { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.ok-display--post { font-size: clamp(2rem, 4.6vw, 3.3rem); }
.ok-h2 { font-family: var(--ok-font-display); font-weight: 400; text-transform: uppercase; color: var(--ok-ink); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.08; margin: 0; }
.ok-h3 { font-family: var(--ok-font-body); font-weight: 800; color: var(--ok-ink); font-size: 1.25rem; margin: 0 0 14px; }

.ok-overline {
	font-family: var(--ok-font-mono);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ok-body);
	margin: 0 0 14px;
}
.ok-overline--lime { color: var(--ok-lime); }

.ok-meta { font-family: var(--ok-font-mono); font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #8A938C; margin: 0; }

/* Highlight marks — usable inside any Elementor heading (HTML spans). */
.hl-lime, .hl-ink, .hl-ink-w, .hl-white, .hl-lav {
	padding: 0.04em 0.14em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.hl-lime { background: var(--ok-lime); color: var(--ok-ink); }
.hl-ink { background: var(--ok-ink); color: var(--ok-lime); }
.hl-ink-w { background: var(--ok-ink); color: var(--ok-ivory); }
.hl-white { background: var(--ok-white); color: var(--ok-ink); }
.hl-lav { background: var(--ok-lavender); color: var(--ok-ink); }

/* ---------------------------------------------------------------------
 * 3. Buttons, pills, chips, links
 * ------------------------------------------------------------------- */
.ok-btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--ok-font-body); font-weight: 700; font-size: 15px;
	line-height: 1; padding: 16px 26px; border-radius: 999px;
	text-decoration: none; border: 1px solid transparent;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}
.ok-btn:hover { transform: translateY(-2px); }
.ok-btn--ink { background: var(--ok-ink); color: var(--ok-white); }
.ok-btn--ink:hover { background: #060a07; color: var(--ok-white); }
.ok-btn--lime { background: var(--ok-lime); color: var(--ok-ink); }
.ok-btn--lime:hover { background: #b7e433; color: var(--ok-ink); }
.ok-btn--white { background: var(--ok-white); color: var(--ok-ink); border-color: var(--ok-line); }
.ok-btn--outline { background: transparent; color: var(--ok-white); border-color: rgba(255,255,255,.45); }
.ok-btn__dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--ok-ink); color: var(--ok-lime); font-size: 11px;
}
.ok-btn__dot--lime { background: var(--ok-lime); color: var(--ok-ink); }
.ok-btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

.ok-pill {
	display: inline-block; font-family: var(--ok-font-body); font-weight: 600; font-size: 13px;
	color: var(--ok-ink); background: var(--ok-white); border: 1px solid var(--ok-line);
	padding: 9px 18px; border-radius: 999px; text-decoration: none;
}
.ok-pill.is-active, .ok-pill:hover { background: var(--ok-ink); color: var(--ok-white); border-color: var(--ok-ink); }
.ok-pill--sm { padding: 6px 12px; font-size: 12px; }

.ok-chip {
	display: inline-block; font-family: var(--ok-font-mono); font-size: 10.5px; letter-spacing: 1.5px;
	background: var(--ok-lime); color: var(--ok-ink); padding: 6px 12px; border-radius: 999px; text-decoration: none;
}
.ok-chip--ink { background: var(--ok-ink); color: var(--ok-lime); }

.ok-arrow-link {
	font-weight: 700; font-size: 14px; color: var(--ok-ink); text-decoration: none;
	border-bottom: 2px solid var(--ok-lime); padding-bottom: 3px;
}
.ok-arrow-link:hover { border-bottom-color: var(--ok-ink); }
.ok-arrow-link--lime { color: var(--ok-lime); border-bottom-color: var(--ok-lime); }

.ok-crumb { font-family: var(--ok-font-mono); font-size: 11px; letter-spacing: 2px; color: var(--ok-ink); margin: 0 0 22px; }
.ok-crumb a { color: inherit; text-decoration: none; }
.ok-crumb__brand { background: var(--ok-ink); color: var(--ok-lime); padding: 4px 10px; border-radius: 999px; }

/* ---------------------------------------------------------------------
 * 4. Decorations: striped placeholders + floating blobs
 * ------------------------------------------------------------------- */
.ok-ph {
	--ph-a: #9FB0BC; --ph-b: #8CA0AD;
	position: relative; overflow: hidden; border-radius: var(--ok-radius);
	background: repeating-linear-gradient(-45deg, var(--ph-a) 0 16px, var(--ph-b) 16px 32px);
	display: block; min-height: 220px;
}
.ok-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ok-ph--blue   { --ph-a: #4C56B5; --ph-b: #414A9F; }
.ok-ph--olive  { --ph-a: #6E7D66; --ph-b: #5F6E58; }
.ok-ph--orange { --ph-a: #E1922F; --ph-b: #D08322; }
.ok-ph--green  { --ph-a: #35984F; --ph-b: #2B8A44; }
.ok-ph--lilac  { --ph-a: #C0A7F0; --ph-b: #B197E5; }
.ok-ph--red    { --ph-a: #C4473A; --ph-b: #B33B2F; }
.ok-ph--teal   { --ph-a: #3E8E86; --ph-b: #337B74; }
.ok-ph--navy   { --ph-a: #39538F; --ph-b: #2F477E; }
.ok-ph--violet { --ph-a: #8B6FC9; --ph-b: #7C60BA; }
.ok-ph--forest { --ph-a: #2A3A2C; --ph-b: #243226; }
.ok-ph--slate  { --ph-a: #AAB4BD; --ph-b: #9AA6B0; }

.ok-blob, .ok-blob .elementor-spacer-inner {
	width: 46px; height: 46px; border-radius: 10px;
}
.ok-blob { position: absolute; transform: rotate(14deg); z-index: 1; background: var(--ok-lavender); }
.ok-blob--lav { background: var(--ok-lavender); }
.ok-blob--lime { background: var(--ok-lime); }
.ok-blob--ink { background: var(--ok-ink); }
.ok-blob--line { background: transparent; border: 2px solid rgba(22,33,26,.35); }
.ok-blob--tr { top: 46px; right: 7%; }
.ok-blob--tl { top: 46px; left: 7%; }
.ok-blob--bl { bottom: 40px; left: 5%; transform: rotate(-18deg); }
.ok-blob--br { bottom: 40px; right: 6%; transform: rotate(-10deg); }

/* Elementor spacer used as a blob: kill flow height, keep the square. */
.elementor-widget.ok-blob { position: absolute; }

/* ---------------------------------------------------------------------
 * 5. Header / footer fallbacks (pre-import) + logo
 * ------------------------------------------------------------------- */
.ok-logo { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.ok-logo__box {
	font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 20px;
	background: var(--ok-lime); color: var(--ok-ink); padding: 4px 10px; border-radius: 4px;
}
.ok-logo__tag { font-family: var(--ok-font-mono); font-size: 9px; letter-spacing: 3px; color: currentColor; opacity: .8; }

.ok-fallback-header { background: var(--ok-ink); color: var(--ok-white); }
.ok-fallback-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.ok-fallback-nav__list { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.ok-fallback-nav__list a { color: var(--ok-white); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.ok-fallback-nav__list a:hover { color: var(--ok-lime); }
.ok-fallback-footer { background: var(--ok-deep); color: var(--ok-body-inv); }
.ok-fallback-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; flex-wrap: wrap; }
.ok-fallback-footer .ok-fallback-nav__list a { color: var(--ok-body-inv); }

/* ---------------------------------------------------------------------
 * 6. Elementor header template helpers (nav + mobile menu)
 * ------------------------------------------------------------------- */
.ok-nav .elementor-icon-list-items { display: flex; }
.ok-nav .elementor-icon-list-item a { transition: color .15s ease; }
.ok-nav-toggle { display: none; }

@media (max-width: 1024px) {
	.ok-nav-toggle { display: inline-flex; }
	.ok-nav-links {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--ok-ink); z-index: 999;
		padding: 12px 24px 20px; border-top: 1px solid rgba(255,255,255,.08);
	}
	.ok-nav.is-open .ok-nav-links { display: block; }
	.ok-nav.is-open .ok-nav-links .elementor-icon-list-items,
	.ok-nav-links .elementor-icon-list-items { flex-direction: column; gap: 4px; }
	.ok-nav-links .elementor-icon-list-item { padding: 10px 0; }
}

/* ---------------------------------------------------------------------
 * 7. Blog: hero band, filters, cards, featured, pager
 * ------------------------------------------------------------------- */
.ok-hero-band { background: var(--ok-lime); padding: 84px 0 92px; position: relative; overflow: hidden; text-align: center; }
.ok-hero-band__inner { position: relative; z-index: 2; }
.ok-hero-band__narrow { max-width: 780px; margin: 0 auto; position: relative; z-index: 2; padding: 0 24px; }
.ok-hero-band__sub { max-width: 540px; margin: 0 auto; color: var(--ok-ink); font-size: 15.5px; line-height: 1.65; }
.ok-hero-band--post { text-align: left; padding-bottom: 150px; }
.ok-hero-band--post .ok-hero-band__sub { margin: 14px 0 26px; }
.ok-hero-band--post .ok-chip { margin-bottom: 18px; }

.ok-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 44px; }

.ok-grid { display: grid; gap: 28px; }
.ok-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .ok-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ok-grid--3 { grid-template-columns: 1fr; } }

.ok-card { display: flex; flex-direction: column; gap: 12px; }
.ok-card__media { min-height: 230px; }
.ok-card__media .ok-chip, .ok-ph > .ok-chip { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--ok-ink); color: var(--ok-lime); }
.ok-card__title { font-size: 19px; font-weight: 800; line-height: 1.3; margin: 2px 0 0; }
.ok-card__title a { color: var(--ok-ink); text-decoration: none; }
.ok-card__title a:hover { background: var(--ok-lime); }
.ok-card__excerpt p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ok-card .ok-arrow-link { align-self: flex-start; }

.ok-featured {
	display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; overflow: hidden;
	background: var(--ok-ink); border-radius: var(--ok-radius); margin-bottom: 44px;
}
.ok-featured__media { border-radius: 0; min-height: 320px; --ph-a: #3D65A8; --ph-b: #345896; }
.ok-featured__body { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ok-featured__title { font-family: var(--ok-font-body); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0; }
.ok-featured__title a { color: var(--ok-white); text-decoration: none; }
.ok-featured__excerpt p { color: var(--ok-body-inv); font-size: 14.5px; line-height: 1.65; margin: 0; }
@media (max-width: 900px) { .ok-featured { grid-template-columns: 1fr; } }

.ok-pager { margin-top: 52px; text-align: center; }
.ok-pager .nav-links { display: inline-flex; gap: 8px; }
.ok-pager .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px;
	border: 1px solid var(--ok-line); background: var(--ok-white);
	color: var(--ok-ink); font-weight: 700; font-size: 14px; text-decoration: none;
}
.ok-pager .page-numbers.current { background: var(--ok-ink); color: var(--ok-white); border-color: var(--ok-ink); }

/* ---------------------------------------------------------------------
 * 8. Single post
 * ------------------------------------------------------------------- */
.ok-author-row { display: flex; align-items: center; gap: 14px; }
.ok-author-row__name { font-weight: 700; color: var(--ok-ink); margin: 0; font-size: 14px; }
.ok-author-row__role { margin: 0; font-size: 12.5px; color: rgba(22,33,26,.7); }
.ok-author-row .ok-meta { margin-left: 12px; color: rgba(22,33,26,.7); }

.ok-avatar {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
	background: var(--ok-ink); color: var(--ok-lime);
	font-family: var(--ok-font-mono); font-size: 13px; letter-spacing: 1px;
}

.ok-single-media { margin-top: -110px; position: relative; z-index: 3; }
.ok-single-media__frame { min-height: 360px; box-shadow: var(--ok-shadow); border: 1px solid rgba(18,27,20,.18); }

.ok-article { padding: 56px 0 40px; }
.ok-prose { font-size: 16.5px; line-height: 1.75; color: var(--ok-body); }
.ok-prose > * { margin: 0 0 1.35em; }
.ok-prose h2 { font-family: var(--ok-font-body); font-weight: 800; color: var(--ok-ink); font-size: 1.5rem; margin: 1.8em 0 .7em; }
.ok-prose h3 { font-weight: 800; color: var(--ok-ink); font-size: 1.2rem; margin: 1.6em 0 .6em; }
.ok-prose a { color: var(--ok-ink); text-decoration-color: var(--ok-lime); text-decoration-thickness: 2px; }
.ok-prose strong { color: var(--ok-ink); }
.ok-prose blockquote {
	background: var(--ok-ink); color: var(--ok-white); border-radius: var(--ok-radius);
	padding: 30px 34px; font-weight: 700; font-size: 1.15rem; line-height: 1.5; position: relative;
}
.ok-prose blockquote::before { content: "\201C"; color: var(--ok-lime); font-family: var(--ok-font-display); font-size: 2rem; display: block; line-height: 1; margin-bottom: 8px; }
.ok-prose blockquote p { margin: 0; }
.ok-prose ol { counter-reset: ok-li; list-style: none; padding-left: 0; }
.ok-prose ol > li { counter-increment: ok-li; position: relative; padding-left: 44px; margin-bottom: 14px; }
.ok-prose ol > li::before {
	content: counter(ok-li); position: absolute; left: 0; top: 1px;
	width: 26px; height: 26px; border-radius: 50%; background: var(--ok-lime); color: var(--ok-ink);
	font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
}
.ok-prose ul { padding-left: 0; list-style: none; }
.ok-prose ul > li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.ok-prose ul > li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok-ink); font-weight: 800; }
.ok-prose img { max-width: 100%; height: auto; border-radius: var(--ok-radius); }

.ok-article__foot {
	display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
	border-top: 1px solid var(--ok-line); border-bottom: 1px solid var(--ok-line); padding: 18px 0; margin: 40px 0;
}
.ok-taglist { display: flex; gap: 8px; flex-wrap: wrap; }
.ok-share { display: flex; align-items: center; gap: 10px; }
.ok-share__btn {
	width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: var(--ok-ink); color: var(--ok-white); font-size: 12px; font-weight: 700; text-decoration: none;
}
.ok-share__btn:hover { background: var(--ok-lime); color: var(--ok-ink); }

.ok-author-box {
	display: flex; gap: 18px; align-items: flex-start;
	background: var(--ok-ink); border-radius: var(--ok-radius); padding: 30px 34px;
}
.ok-author-box .ok-avatar { width: 52px; height: 52px; background: var(--ok-lime); color: var(--ok-ink); }
.ok-author-box__name { color: var(--ok-white); font-weight: 800; margin: 2px 0 6px; }
.ok-author-box__bio { color: var(--ok-body-inv); font-size: 14px; line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------------------
 * 9. CTA + newsletter bands (PHP versions)
 * ------------------------------------------------------------------- */
.ok-cta-band { background: var(--ok-ink); padding: 96px 0; position: relative; overflow: hidden; text-align: center; }
.ok-cta-band .ok-display { color: var(--ok-white); }
.ok-cta-band p { color: var(--ok-body-inv); max-width: 520px; margin: 0 auto 26px; }
.ok-cta-band__inner { position: relative; z-index: 2; }

.ok-newsletter { background: var(--ok-lime); padding: 84px 0; position: relative; overflow: hidden; text-align: center; }
.ok-newsletter p { color: var(--ok-ink); margin: 0 auto 24px; max-width: 480px; }
.ok-newsletter__inner { position: relative; z-index: 2; }

/* ---------------------------------------------------------------------
 * 10. Forms (Contact Form 7, markup provided by the demo importer)
 * ------------------------------------------------------------------- */
.ok-form { display: block; }
.ok-form .ok-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.ok-form .ok-form__grid .ok-form__field--full { grid-column: 1 / -1; }
.ok-form label { display: block; font-family: var(--ok-font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 7px; }
.ok-form .wpcf7-form-control-wrap { display: block; }

.ok-form input[type="text"],
.ok-form input[type="email"],
.ok-form input[type="url"],
.ok-form input[type="tel"],
.ok-form select,
.ok-form textarea {
	width: 100%; box-sizing: border-box;
	font-family: var(--ok-font-body); font-size: 14.5px;
	padding: 13px 16px; border-radius: 10px;
	transition: border-color .15s ease;
}
.ok-form textarea { min-height: 110px; resize: vertical; }

/* Dark card variant (contact page / landing). */
.ok-form--dark { color: var(--ok-white); }
.ok-form--dark label { color: var(--ok-lime); }
.ok-form--dark input, .ok-form--dark select, .ok-form--dark textarea {
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: var(--ok-white);
}
.ok-form--dark input::placeholder, .ok-form--dark textarea::placeholder { color: rgba(255,255,255,.38); }
.ok-form--dark input:focus, .ok-form--dark select:focus, .ok-form--dark textarea:focus { border-color: var(--ok-lime); outline: none; }
.ok-form--dark select { appearance: none; }
.ok-form--dark option { color: var(--ok-ink); }

.ok-form .ok-form__submit { margin-top: 18px; }
.ok-form input[type="submit"] {
	display: inline-block; width: 100%; cursor: pointer; border: 0;
	font-family: var(--ok-font-body); font-weight: 700; font-size: 15px;
	background: var(--ok-lime); color: var(--ok-ink);
	padding: 16px 28px; border-radius: 999px;
	transition: transform .15s ease, background .15s ease;
}
.ok-form input[type="submit"]:hover { transform: translateY(-2px); background: #b7e433; }
.ok-form__note { font-size: 11.5px; color: rgba(255,255,255,.45); text-align: center; margin-top: 12px; }

/* Inline single-field forms (newsletter / free guide). */
.ok-form--inline .ok-form__row { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.ok-form--inline .wpcf7-form-control-wrap { flex: 1; }
.ok-form--inline input[type="email"] {
	width: 100%; box-sizing: border-box; font-size: 14.5px; padding: 14px 18px;
	border-radius: 999px; border: 1px solid rgba(18,27,20,.25); background: var(--ok-white); color: var(--ok-ink);
}
.ok-form--inline input[type="submit"] { width: auto; background: var(--ok-ink); color: var(--ok-white); padding: 14px 26px; }
.ok-form--inline input[type="submit"]:hover { background: #060a07; }
.ok-form--inline.ok-form--guide input[type="submit"] { background: var(--ok-lavender); color: var(--ok-ink); width: 100%; margin-top: 10px; }
.ok-form--inline.ok-form--guide .ok-form__row { flex-direction: column; max-width: none; }

/* CF7 feedback, restyled as brand pills. */
.wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0; padding: 12px 18px; border-radius: 12px; border: 0;
	font-size: 13.5px; background: var(--ok-lime-soft); color: var(--ok-ink);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { background: #F3D1CC; color: #5B1F17; }
.wpcf7-not-valid-tip { font-size: 12px; color: #E8A79D; margin-top: 5px; }

/* ---------------------------------------------------------------------
 * 11. Elementor accordion polish (FAQ +/− dots like the mockups)
 * ------------------------------------------------------------------- */
.ok-faq .elementor-accordion-item {
	border: 0 !important; border-bottom: 1px solid var(--ok-line) !important; border-radius: 0;
}
.ok-faq .elementor-tab-title { padding: 20px 4px; }
.ok-faq .elementor-tab-content { border: 0 !important; padding: 0 4px 20px; }
.ok-faq .elementor-accordion-icon {
	width: 26px; height: 26px; border-radius: 50%; background: var(--ok-lime); color: var(--ok-ink) !important;
	display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.ok-faq .elementor-accordion-icon i { display: inline-flex; }
.ok-faq--dark .elementor-accordion-item { border-bottom-color: rgba(255,255,255,.12) !important; }

/* ---------------------------------------------------------------------
 * 12. Misc: comparison rows, video frame, hero dashboard bars
 * ------------------------------------------------------------------- */
.ok-tick { color: var(--ok-ink); font-weight: 800; }
.ok-video-frame { border-radius: var(--ok-radius); overflow: hidden; }
.ok-bar { border-radius: 6px 6px 0 0; }

/* 404 search form */
.ok-404 + .ok-section .search-form { display: flex; gap: 10px; max-width: 460px; }
.search-form .search-field { flex: 1; padding: 13px 18px; border-radius: 999px; border: 1px solid var(--ok-line); font-size: 14.5px; }
.search-form .search-submit { border: 0; border-radius: 999px; padding: 13px 24px; background: var(--ok-ink); color: var(--ok-white); font-weight: 700; cursor: pointer; }

/* ---------------------------------------------------------------------
 * 12b. Elementor demo-content helpers
 * ------------------------------------------------------------------- */
.e-con { position: relative; }

/* Button icon rendered as the little circular arrow "dot". */
.ok-ebtn .elementor-button-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; font-size: 10px;
}
.ok-ebtn--limedot .elementor-button-icon { background: var(--ok-lime); color: var(--ok-ink); }
.ok-ebtn--inkdot .elementor-button-icon { background: var(--ok-ink); color: var(--ok-lime); }
.ok-ebtn .elementor-button:hover { transform: translateY(-2px); }
.ok-ebtn .elementor-button { transition: transform .15s ease, background .25s ease; }

/* Floating blob squares (spacer widgets). */
.elementor-widget.ok-blob { width: 46px !important; height: 46px !important; }
.elementor-widget.ok-blob .elementor-widget-container,
.elementor-widget.ok-blob .elementor-spacer,
.elementor-widget.ok-blob .elementor-spacer-inner { width: 100%; height: 100%; }
.ok-blob.ok-blob--line, .ok-blob.ok-blob--line .elementor-spacer-inner { background: transparent; }

/* Counters: centered, mono labels. */
.ok-counter .elementor-counter-number-wrapper { justify-content: center; }
.ok-counter .elementor-counter-title { text-align: center; margin-top: 6px; }

/* Announcement bar link. */
.ok-announce a { color: var(--ok-lime); text-decoration: underline; }

/* Constrained centered blocks. */
.ok-faq-col { max-width: 780px; width: 100%; margin-left: auto; margin-right: auto; }
.ok-letter { max-width: 680px; width: 100%; margin-left: auto; margin-right: auto; }
.ok-dashboard { max-width: 860px; width: 100%; margin-left: auto; margin-right: auto; }

/* Accordion body colors (widget content inherits section bg otherwise). */
.ok-faq .elementor-tab-content { color: var(--ok-body); font-size: 14.5px; line-height: 1.65; }
.ok-faq--dark .elementor-tab-content { color: var(--ok-body-inv); }
.ok-faq--dark .elementor-tab-title, .ok-faq--dark .elementor-tab-title a { color: var(--ok-white); }

/* Inline forms inside Elementor shortcodes. */
.ok-newsletter-el { width: 100%; max-width: 520px; margin: 0 auto; }
.ok-guide-form { width: 100%; }
.ok-guide-form .ok-form--inline input[type="email"] { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--ok-white); }
.ok-guide-form .ok-form--inline input[type="email"]::placeholder { color: rgba(255,255,255,.4); }

/* Contact split form spacing inside the dark card. */
.ok-contact-form-el .ok-form .ok-form__grid { gap: 12px; }

/* Header nav icon-list link color transition already themed; tighten gaps. */
.ok-nav-links .elementor-icon-list-item > a { font-weight: 500; }

/* ---------------------------------------------------------------------
 * 13. Responsive touch-ups for PHP templates
 * ------------------------------------------------------------------- */
@media (max-width: 782px) {
	.ok-section { padding: 60px 0; }
	.ok-hero-band { padding: 56px 0 64px; }
	.ok-hero-band--post { padding-bottom: 120px; }
	.ok-featured__body { padding: 30px 26px; }
	.ok-article__foot { flex-direction: column; align-items: flex-start; }
	.ok-form .ok-form__grid { grid-template-columns: 1fr; }
	.ok-single-media { margin-top: -90px; }
	.ok-blob { width: 34px; height: 34px; }
}