/*
Theme Name: Smart Brains
Author: Smart Brains Company Limited
Description: The official Smart Brains Company Limited block theme, built on the Smart Brains brand (Smart Navy #002366, Circuit Grey #E6E4E5). Every section is a native Gutenberg block pattern (Cover, Group, Columns, Image, Buttons, Query Loop), so all text, images and links are editable in the WordPress editor. Includes an optional "Projects" portfolio post type with a live-site URL field.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smart-brains
Tags: full-site-editing, block-patterns, portfolio, one-column, wide-blocks, custom-colors, editor-style
*/

/* ---------------------------------------------------------------
   Tokens. Colours, fonts and sizes live in theme.json; these are
   the motion/effect values theme.json can't express.
---------------------------------------------------------------- */
:root {
	--sb-ease: cubic-bezier(.2, .7, .2, 1);
	--sb-radius: var(--wp--custom--radius--card, 18px);
	--sb-navy: var(--wp--preset--color--navy);
	--sb-deep: var(--wp--preset--color--deep-navy);
	--sb-blue: var(--wp--preset--color--signal-blue);
	--sb-grey: var(--wp--preset--color--grey);
	--sb-line: var(--wp--preset--color--line);
	--sb-shadow: var(--wp--custom--shadow--card);
	--sb-lift: var(--wp--custom--shadow--lift);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--sb-navy); color: #fff; }
[id] { scroll-margin-top: 88px; }

/* ---------------------------------------------------------------
   Dark sections (.sb-dark or a dark Cover): text, links, buttons
---------------------------------------------------------------- */
.sb-dark,
.wp-block-cover.is-dark { color: #fff; }
.sb-dark a:not(.wp-block-button__link),
.wp-block-cover.is-dark a:not(.wp-block-button__link) { color: var(--sb-grey); }
.sb-dark a:not(.wp-block-button__link):hover,
.wp-block-cover.is-dark a:not(.wp-block-button__link):hover { color: #fff; }
/* Primary buttons flip to white-on-navy inside dark sections (unless a colour was picked in the editor) */
.sb-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
.wp-block-cover.is-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background: #fff;
	color: var(--sb-navy);
}
.sb-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.wp-block-cover.is-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
	background: var(--sb-grey);
	color: var(--sb-navy);
}

/* Circuit-line brand graphic behind dark sections */
.sb-circuit { position: relative; isolation: isolate; overflow: hidden; }
.sb-circuit::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url("assets/images/circuit-pattern.svg") center / cover no-repeat;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 55%, #000 100%);
	mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 55%, #000 100%);
}
.sb-circuit > * { position: relative; z-index: 1; }
.sb-circuit .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   Header: white glass bar with the full-colour logo
---------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-block-start: 0;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }
.sb-header {
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--sb-line);
}
.sb-header .sb-logo { margin: 0; }
.sb-header .sb-logo img { display: block; height: auto; }
.sb-header .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff !important;
	color: var(--wp--preset--color--ink) !important;
}
.sb-header-cta .wp-block-button__link { font-size: .9rem; }
@media (max-width: 600px) {
	.sb-header .sb-header-cta { display: none; }
	.sb-header .sb-logo img { width: 145px !important; height: auto !important; }
}
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * { margin-block-start: 0; }

/* ---------------------------------------------------------------
   Eyebrow label (Paragraph style). Michroma echoes the logo lettering.
---------------------------------------------------------------- */
.is-style-sb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--wp--preset--font-family--accent);
	font-size: .7rem !important;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--sb-blue);
}
.is-style-sb-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}
.has-text-align-center.is-style-sb-eyebrow { display: flex; justify-content: center; }
.sb-dark .is-style-sb-eyebrow,
.wp-block-cover.is-dark .is-style-sb-eyebrow { color: var(--sb-grey); }

/* Gradient words: select text in a heading → Highlight. */
h1 mark, h2 mark, .sb-gradient-text mark {
	background: linear-gradient(110deg, var(--sb-navy) 0%, var(--sb-blue) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	padding: 0;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.sb-dark h1 mark, .sb-dark h2 mark,
.wp-block-cover.is-dark h1 mark, .wp-block-cover.is-dark h2 mark {
	background: linear-gradient(100deg, #E6E4E5 0%, #8FB0FF 70%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
}

/* ---------------------------------------------------------------
   Hero
---------------------------------------------------------------- */
.sb-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.sb-hero-visual { margin: 0; }
.sb-hero-visual img {
	width: 100%;
	height: auto;
	animation: sb-float 8s ease-in-out infinite;
}
@keyframes sb-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
.sb-stats { border-top: 1px solid rgba(230, 228, 229, .18); }
.sb-stats .wp-block-heading { margin: 0; color: #fff; }

/* ---------------------------------------------------------------
   Hover Card (Group block style)
---------------------------------------------------------------- */
.is-style-sb-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: var(--sb-radius);
	box-shadow: var(--sb-shadow);
	transition: transform .45s var(--sb-ease), box-shadow .45s var(--sb-ease), border-color .45s var(--sb-ease);
	will-change: transform;
}
.is-style-sb-card::before {
	/* navy → signal-blue edge that draws in on hover */
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	top: -1px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--sb-navy), var(--sb-blue));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--sb-ease);
}
.is-style-sb-card:hover,
.is-style-sb-card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(0, 35, 102, .18);
	box-shadow: var(--sb-lift);
}
.is-style-sb-card:hover::before,
.is-style-sb-card:focus-within::before { transform: scaleX(1); }
.is-style-sb-card h3 a,
.is-style-sb-card .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.is-style-sb-card h3 a:hover,
.is-style-sb-card .wp-block-post-title a:hover { color: var(--sb-blue); text-decoration: none; }

.sb-cards > .is-style-sb-card,
.sb-cards .wp-block-post > .is-style-sb-card { height: 100%; display: flex; flex-direction: column; }
.sb-card-body { display: flex; flex-direction: column; flex: 1; }
.sb-card-body > .wp-block-buttons { margin-top: auto; padding-top: .5rem; }

/* ---------------------------------------------------------------
   Browser Frame (Image / Featured Image style)
---------------------------------------------------------------- */
.is-style-sb-browser {
	position: relative;
	margin-block-end: 0;
	padding: 28px 6px 6px;
	border-radius: 12px;
	background:
		radial-gradient(circle at 16px 14px, var(--sb-grey) 3.5px, transparent 4px),
		radial-gradient(circle at 30px 14px, rgba(230,228,229,.6) 3.5px, transparent 4px),
		radial-gradient(circle at 44px 14px, rgba(230,228,229,.35) 3.5px, transparent 4px),
		var(--sb-navy);
	overflow: hidden;
}
.is-style-sb-browser img,
.is-style-sb-browser a { display: block; border-radius: 8px; }
.is-style-sb-browser a { overflow: hidden; }
.is-style-sb-browser img {
	width: 100%;
	background: var(--wp--preset--color--cloud);
	transition: transform .7s var(--sb-ease);
}
.is-style-sb-card:hover .is-style-sb-browser img,
.is-style-sb-browser:hover img { transform: scale(1.04); }

/* ---------------------------------------------------------------
   Tech badges (Paragraph style + Post Terms style)
---------------------------------------------------------------- */
.is-style-sb-badge,
.wp-block-post-terms.is-style-sb-badges a {
	display: inline-block;
	margin: 0 !important;
	padding: .3rem .7rem;
	font-size: .75rem !important;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sb-navy);
	background: var(--wp--preset--color--sky);
	border-radius: 6px;
	text-decoration: none;
}
.is-style-sb-badge:nth-child(3n+3),
.wp-block-post-terms.is-style-sb-badges a:nth-of-type(3n+3) { background: var(--wp--preset--color--cloud); color: var(--wp--preset--color--slate); box-shadow: inset 0 0 0 1px var(--sb-line); }
.wp-block-post-terms.is-style-sb-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.wp-block-post-terms.is-style-sb-badges .wp-block-post-terms__separator { display: none; }

/* ---------------------------------------------------------------
   Buttons: lift + arrow nudge
---------------------------------------------------------------- */
.wp-block-button__link {
	transition: transform .3s var(--sb-ease), box-shadow .3s var(--sb-ease), background-color .25s, border-color .25s, color .25s;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -14px rgba(31, 91, 255, .7);
}
.wp-block-button.is-style-outline .wp-block-button__link { border-color: color-mix(in srgb, currentColor 35%, transparent) !important; }
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: currentColor !important;
	transform: translateY(-2px);
	text-decoration: none;
}
.is-style-sb-arrow .wp-block-button__link::after,
.sb-visit .wp-block-button__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: .5em;
	transition: transform .3s var(--sb-ease);
}
.sb-visit .wp-block-button__link::after { content: "\2197"; }
.is-style-sb-arrow .wp-block-button__link:hover::after { transform: translateX(4px); }
.sb-visit .wp-block-button__link:hover::after { transform: translate(3px, -3px); }
.sb-visit .wp-block-button__link { padding: .55rem 1rem; font-size: .9rem; color: var(--sb-navy); }
.sb-visit:not(.is-style-outline) .wp-block-button__link { color: #fff; }

/* ---------------------------------------------------------------
   Services icons
---------------------------------------------------------------- */
.sb-icon img { transition: transform .45s var(--sb-ease); border-radius: 14px; }
.is-style-sb-card:hover .sb-icon img { transform: rotate(-6deg) scale(1.06); }

/* ---------------------------------------------------------------
   Contact
---------------------------------------------------------------- */
.sb-contact-list strong {
	display: block;
	font-family: var(--wp--preset--font-family--accent);
	font-size: .62rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	margin-bottom: .15rem;
}
.sb-contact-list a { font-weight: 600; color: var(--sb-navy); }
.sb-form { box-shadow: var(--sb-shadow); }
.sb-form-slot { border: 1.5px dashed #C5CEE0; border-radius: 12px; background: var(--wp--preset--color--cloud); }

/* Form plugins (WPForms, Contact Form 7, Fluent Forms) */
.sb-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.sb-form select,
.sb-form textarea {
	width: 100%;
	padding: .85rem 1rem !important;
	color: var(--wp--preset--color--ink) !important;
	background: #fff !important;
	border: 1px solid #CBD3E3 !important;
	border-radius: 10px !important;
	font: inherit;
	transition: border-color .25s, box-shadow .25s;
}
.sb-form input:focus, .sb-form select:focus, .sb-form textarea:focus {
	outline: none;
	border-color: var(--sb-blue) !important;
	box-shadow: 0 0 0 3px rgba(31, 91, 255, .16) !important;
}
.sb-form label, .sb-form .wpforms-field-label, .sb-form .ff-el-input--label label {
	color: var(--wp--preset--color--ink) !important;
	font-weight: 600 !important;
}
.sb-form input[type="submit"],
.sb-form button[type="submit"],
.sb-form .wpforms-submit,
.sb-form .ff-btn-submit {
	padding: .9rem 1.6rem !important;
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var(--sb-navy) !important;
	border: 0 !important;
	border-radius: 10px !important;
	cursor: pointer;
	transition: background-color .25s, transform .3s var(--sb-ease);
}
.sb-form input[type="submit"]:hover, .sb-form button[type="submit"]:hover { background: var(--sb-blue) !important; transform: translateY(-2px); }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
.sb-footer a:not(.wp-block-button__link) { color: var(--wp--preset--color--haze); }
.sb-footer a:not(.wp-block-button__link):hover { color: #fff; text-decoration: none; }
.sb-footer .wp-block-social-links .wp-social-link { transition: transform .3s var(--sb-ease), color .3s; }
.sb-footer .wp-block-social-links .wp-social-link:hover { transform: translateY(-3px); color: #fff; }
.sb-footer-logo img { display: block; height: auto; }

/* ---------------------------------------------------------------
   Responsive
---------------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 601px) {
	.sb-cards .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 1024px) and (min-width: 782px) {
	.sb-footer > .wp-block-columns { flex-wrap: wrap !important; }
	.sb-footer > .wp-block-columns > .wp-block-column:first-child { flex-basis: 100% !important; }
}
@media (max-width: 781px) {
	.sb-hero .wp-block-columns { gap: 2rem; }
	.sb-hero-visual { max-width: 380px; margin-inline: auto; }
	.sb-stats .wp-block-heading { font-size: 1.6rem !important; }
}
@media (max-width: 480px) {
	.sb-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
	.sb-hero .wp-block-buttons .wp-block-button,
	.sb-hero .wp-block-buttons .wp-block-button__link { width: 100%; }
}

/* ---------------------------------------------------------------
   Scroll reveal: CSS only, progressive enhancement
---------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sb-reveal > *,
		.sb-cards > *,
		.sb-cards .wp-block-post {
			animation: sb-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}
@keyframes sb-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}
.editor-styles-wrapper .sb-reveal > *,
.editor-styles-wrapper .sb-cards > *,
.editor-styles-wrapper .sb-hero-visual img { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	html { scroll-behavior: auto; }
}