/*
Theme Name: IntellX
Theme URI: https://intellx.co.uk
Description: Block theme for intellx.co.uk, fixed to the IntellX brand guide (Navy 600 #1f3a59, Sky 500 #55b8e7, Sky 300 #a6dcf3; Moderat; crossing-streams X mark).
Version: 1.1.1
Requires at least: 6.6
Requires PHP: 8.0
Author: IntellX
License: Proprietary
Text Domain: intellx
*/

/* Small extras theme.json can't express. */
:root { --ix-radius: 14px; --ix-shadow: 0 1px 2px rgba(20,38,59,.06), 0 8px 24px rgba(20,38,59,.06); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--wp--preset--color--sky); outline-offset: 2px; }

.ix-skip { position: absolute; left: -9999px; top: 8px; z-index: 10000; background: var(--wp--preset--color--navy); color: #fff; padding: 10px 16px; border-radius: 8px; }
.ix-skip:focus { left: 8px; }

/* Header */
.ix-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--wp--preset--color--line); }
.ix-header .wp-block-site-logo img, .ix-logo img { height: 34px; width: auto; }
.ix-logo { display: inline-flex; align-items: center; }
.ix-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.ix-header .wp-block-navigation a:hover, .ix-header .wp-block-navigation .current-menu-item a { color: var(--wp--preset--color--sky-ink); }
.ix-header .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }

/* Eyebrow + strapline */
.ix-eyebrow { font-family: var(--wp--preset--font-family--heading); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; color: var(--wp--preset--color--sky-ink); margin-bottom: .5rem; }
.has-navy-background-color .ix-eyebrow, .ix-dark .ix-eyebrow { color: var(--wp--preset--color--sky-300); }
.ix-strap { font-family: var(--wp--preset--font-family--heading); font-weight: 500; letter-spacing: .02em; }
.ix-lead { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted); max-width: 46ch; }
.has-navy-background-color .ix-lead { color: #d8e8f4; }

/* Hero */
.ix-hero { position: relative; overflow: hidden; }
.ix-hero::after { content: ""; position: absolute; right: -120px; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none; opacity: .14;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke-linecap='round' stroke-width='14' fill='none'%3E%3Cpath d='M82 18 L58 42' stroke='%2355b8e7'/%3E%3Cpath d='M42 58 L18 82' stroke='%23a6dcf3'/%3E%3Cpath d='M18 18 L82 82' stroke='%231f3a59'/%3E%3C/g%3E%3C/svg%3E"); }
.ix-hero > * { position: relative; z-index: 1; }
@media (max-width: 781px) { .ix-hero::after { right: -320px; opacity: .6; } }

/* Cards */
.ix-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ix-radius); padding: 1.5rem; box-shadow: var(--ix-shadow); height: 100%; }
.ix-card h3 { margin-top: .5rem; }
.ix-card p { color: var(--wp--preset--color--muted); margin-bottom: 0; }
.ix-card .ix-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); }
.ix-card .ix-ico svg { width: 22px; height: 22px; }
.ix-cards > .wp-block-column { display: flex; }
.ix-tick { list-style: none; padding-left: 0; }
.ix-tick li { position: relative; padding-left: 1.75rem; margin: .45rem 0; }
.ix-tick li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--wp--preset--color--sky); border-bottom: 2.5px solid var(--wp--preset--color--sky); transform: rotate(-45deg); }

/* Steps */
.ix-steps { counter-reset: ix; }
.ix-step { counter-increment: ix; position: relative; padding-left: 3.25rem; }
.ix-step::before { content: counter(ix); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--wp--preset--color--navy); color: #fff; display: grid; place-items: center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; }

/* Video */
.ix-video { border-radius: var(--ix-radius); overflow: hidden; background: var(--wp--preset--color--navy); box-shadow: var(--ix-shadow); }
.ix-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--wp--preset--color--navy); }
.ix-video-slot { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; color: #d8e8f4; padding: 1.5rem;
	background: radial-gradient(circle at 70% 40%, rgba(85,184,231,.25), transparent 60%), var(--wp--preset--color--navy); }
.ix-video-slot strong { display: block; color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; }

/* Downloads */
.ix-download { display: flex; gap: 1rem; align-items: flex-start; }
.ix-download .ix-file { flex: none; width: 44px; height: 54px; border-radius: 6px; background: var(--wp--preset--color--navy); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: end center; padding-bottom: 8px; }

/* Screens */
.ix-screen img { border-radius: var(--ix-radius); border: 1px solid var(--wp--preset--color--line); box-shadow: 0 20px 50px rgba(20,38,59,.18); }

/* Footer */
.ix-footer a { color: #d8e8f4; text-decoration: none; }
.ix-footer a:hover { color: #fff; text-decoration: underline; }
.ix-footer .ix-fine { color: #b6cbe0; font-size: .875rem; }

/* Forms (contact shortcode) */
.ixc-contact { display: grid; gap: .25rem; max-width: 640px; }
.ixc-contact button { cursor: pointer; }

/* Tables */
.wp-block-table table { border-collapse: collapse; }
.wp-block-table th { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); text-align: left; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--wp--preset--color--line); padding: .7rem .9rem; }

/* Cookie banner */
.ix-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; max-width: 560px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--ix-radius); padding: 1rem 1.25rem; box-shadow: 0 16px 48px rgba(20,38,59,.22); }
.ix-cookie p { margin: 0 0 .75rem; font-size: .9375rem; }
.ix-cookie .ix-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ix-cookie button { border-radius: 999px; padding: .55rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--wp--preset--color--navy); }
.ix-cookie .ix-yes { background: var(--wp--preset--color--navy); color: #fff; }
.ix-cookie .ix-no { background: transparent; color: var(--wp--preset--color--navy); }
.ix-cookie[hidden] { display: none; }
body:has(.ix-cookie:not([hidden])) #intellx-chat-root { bottom: 150px; }
@media (min-width: 640px) { body:has(.ix-cookie:not([hidden])) #intellx-chat-root { bottom: 16px; } .ix-cookie { right: auto; } }

/* Dark mode: follows the device */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: #0f1d2d;
		--wp--preset--color--surface: #16283d;
		--wp--preset--color--line: #2a4562;
		--wp--preset--color--muted: #b3c6d8;
		--wp--preset--color--contrast: #e8f1f8;
		--wp--preset--color--sky-ink: #7fcbef;
	}
	:where(h1, h2, h3, h4, h5, h6, .wp-block-heading) { color: #ffffff !important; }
	.has-navy-color { color: #ffffff !important; }
	.ix-header { background: rgba(15,29,45,.94); }
	.ix-logo-light { display: none !important; }
	.ix-logo-dark { display: inline-block !important; }
	.has-surface-background-color { background-color: var(--wp--preset--color--surface) !important; }
	.has-navy-background-color { background-color: #142a42 !important; }
	.ix-card { box-shadow: none; }
	.wp-element-button, .wp-block-button__link { background-color: var(--wp--preset--color--sky); color: #0f1d2d; }
	.is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: #fff; }
	.ix-step::before { background: var(--wp--preset--color--sky); color: #0f1d2d; }
	.ix-cookie .ix-yes { background: var(--wp--preset--color--sky); color: #0f1d2d; border-color: var(--wp--preset--color--sky); }
	.ix-cookie .ix-no { color: #fff; border-color: #fff; }
}
.ix-logo-dark { display: none; }

/* Hero flow graphic */
.ix-flow { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: 1.25rem; box-shadow: 0 24px 60px rgba(20,38,59,.14); max-width: 440px; margin-left: auto; }
.ix-flow-head { font-family: var(--wp--preset--font-family--heading); font-weight: 500; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 .75rem; }
.ix-flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; position: relative; }
.ix-flow li { display: flex; gap: .85rem; align-items: center; padding: .7rem .85rem; border-radius: 12px; background: var(--wp--preset--color--surface); position: relative; }
.ix-flow li:not(:last-child)::after { content: ""; position: absolute; left: 1.95rem; bottom: -.62rem; width: 2px; height: .62rem; background: var(--wp--preset--color--sky); }
.ix-flow li:last-child { background: var(--wp--preset--color--navy); color: #fff; }
.ix-flow li:last-child small { color: var(--wp--preset--color--sky-300); }
.ix-flow li:last-child .ix-ico { background: rgba(255,255,255,.12); color: #fff; }
.ix-flow strong { display: block; font-family: var(--wp--preset--font-family--heading); }
.ix-flow small { color: var(--wp--preset--color--muted); }
.ix-flow .ix-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--wp--preset--color--base); color: var(--wp--preset--color--navy); }
.ix-flow .ix-ico svg { width: 22px; height: 22px; }
@media (max-width: 781px) { .ix-flow { margin: 1rem auto 0; } }
.ix-draft { background: #fff4d6; color: #5a4300; border-left: 4px solid #e0a800; padding: .75rem 1rem; border-radius: 8px; }
.ix-footer ul { list-style: none; }
.ix-head-cta { flex-shrink: 0; }
@media (max-width: 600px) { .ix-head-cta { display: none; } }
.wp-block-table { overflow-x: auto; }
.ix-dark :where(h1, h2, h3, h4) { color: #ffffff; }
.ix-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--wp--preset--color--sky); color: #0f1d2d; }
.ix-dark .is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; }
.ix-dark a:not(.wp-block-button__link) { color: var(--wp--preset--color--sky-300); }
.ix-hero h1 { overflow-wrap: normal; hyphens: manual; }
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.ix-grid .ix-card { height: auto; }
.ix-ico { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); }
.ix-ico svg { width: 22px; height: 22px; }
@media (prefers-color-scheme: dark) {
	.ix-ico, .ix-card .ix-ico, .ix-flow .ix-ico { color: var(--wp--preset--color--sky-300); background: #1d3550; }
	.ix-header .wp-block-navigation a { color: #e8f1f8; }
	.ix-download .ix-file { background: var(--wp--preset--color--sky); color: #0f1d2d; }
}