/*
 * xfer.tech brand layer for iA4.
 * All colors live here. style.css uses these variables instead of hard-coded hex values.
 * Palette is shared with gleaminnovation.com (navy + cyan) and adilanis.com (purple + coral).
 */

:root {
	--xf-bg: #fbfbfd;
	--xf-text: #242943;          /* Gleam navy */
	--xf-text-hover: #3a4170;
	--xf-muted: #5a6380;
	--xf-soft: #eef1f6;
	--xf-mark: #d6f7fd;
	--xf-rule: #d5dbe6;
	--xf-link: #0a7389;          /* deep cyan, 5.3:1 on background */
	--xf-link-hover: #7a4fa0;    /* purple, echoes adilanis.com */
	--xf-on-strong: #ffffff;     /* text on navy buttons and badges */
	--xf-accent-1: #53e3fb;      /* cyan */
	--xf-accent-2: #8d82c4;      /* lavender */
	--xf-accent-3: #ec8d81;      /* coral */
	--xf-gradient: linear-gradient(90deg, var(--xf-accent-1), var(--xf-accent-2) 55%, var(--xf-accent-3));
	--xf-ui-font: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
	color-scheme: light;
}

/* Automatic dark mode, following the reader's system setting */
@media (prefers-color-scheme: dark) {
	:root {
		--xf-bg: #1d2138;
		--xf-text: #e8eaf4;
		--xf-text-hover: #ffffff;
		--xf-muted: #aab0cf;
		--xf-soft: #2a2f4c;
		--xf-mark: #3b4370;
		--xf-rule: #3a4062;
		--xf-link: #9bf1ff;
		--xf-link-hover: #f2b6ad;
		--xf-on-strong: #1d2138;
		color-scheme: dark;
	}
}

html, body { background: var(--xf-bg); color: var(--xf-text); }

/* Brand accent bar across the top of every page */
body::before {
	content: "";
	display: block;
	height: 4px;
	background: var(--xf-gradient);
}

/* Site title, navigation, meta and buttons in the sans used on gleaminnovation.com */
.site-header .header-title-text,
.site-header .header-text-logo,
.main-navigation,
.main-navigation a,
.mobile-menu,
.entry-meta, .post-meta,
footer .footer-menu,
.wp-block-button__link,
button, input[type="submit"], input[type="button"] {
	font-family: var(--xf-ui-font);
}
.site-header .header-title-text,
.site-header .header-text-logo { font-weight: 700; letter-spacing: 0.01em; }

/* Links inside content: colored, with a tidy underline */
.entry-content a,
.page-content a,
.comment-content a {
	color: var(--xf-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.entry-content a:hover,
.entry-content a:focus,
.page-content a:hover,
.comment-content a:hover { color: var(--xf-link-hover); }

/* Keyboard focus that is visible on both themes */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--xf-accent-1);
	outline-offset: 2px;
}

::selection { background: var(--xf-mark); color: var(--xf-text); }

/* ---------------------------------------------------------------- Block editor content */

/* Buttons */
.wp-block-button__link,
.wp-block-button .wp-block-button__link,
.wp-element-button {
	background: var(--xf-text);
	color: var(--xf-on-strong) !important;
	border-radius: 3px;
	padding: 0.7em 1.4em;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	border: 0;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus { background: var(--xf-link); color: var(--xf-on-strong) !important; }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--xf-text) !important;
	border: 2px solid currentColor;
}
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75em; margin: 1.5em 0; }

/* Quotes and pull quotes */
.wp-block-quote,
.entry-content blockquote {
	border-left: 3px solid var(--xf-accent-1);
	padding-left: 1.1em;
	margin-left: 0;
	color: var(--xf-text);
}
.wp-block-quote cite, .wp-block-quote footer { color: var(--xf-muted); font-style: normal; font-size: 0.85em; }
.wp-block-pullquote {
	border-top: 3px solid var(--xf-accent-1);
	border-bottom: 3px solid var(--xf-accent-3);
	padding: 1.5em 0;
	text-align: center;
}

/* Tables */
.wp-block-table { overflow-x: auto; margin: 1.5em 0; }
.wp-block-table table,
.entry-content table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td,
.entry-content th, .entry-content td {
	border: 1px solid var(--xf-rule);
	padding: 0.5em 0.75em;
	text-align: left;
}
.wp-block-table thead th,
.entry-content thead th { background: var(--xf-soft); border-bottom: 2px solid var(--xf-text); }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--xf-soft); }

/* Separators */
.wp-block-separator, .entry-content hr {
	border: 0;
	height: 3px;
	background: var(--xf-gradient);
	max-width: 120px;
	margin: 2.5em auto;
}
.wp-block-separator.is-style-wide { max-width: none; height: 1px; background: var(--xf-rule); }

/* Code */
.entry-content code, .wp-block-code {
	background: var(--xf-soft);
	color: var(--xf-text);
	border-radius: 3px;
}
.entry-content code { padding: 0.1em 0.35em; font-size: 0.88em; }
.wp-block-code { padding: 1em 1.2em; overflow-x: auto; }
.wp-block-code code { background: none; padding: 0; }

/* Images, captions, embeds */
.wp-block-image figcaption, .wp-element-caption, figcaption { color: var(--xf-muted); font-size: 0.85em; text-align: center; }
.wp-block-image img, .entry-content img { max-width: 100%; height: auto; }
.wp-block-embed__wrapper iframe { max-width: 100%; }
.alignwide { margin-left: -6vw; margin-right: -6vw; max-width: calc(100% + 12vw); }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
@media (max-width: 767px) { .alignwide { margin-left: 0; margin-right: 0; max-width: 100%; } }

/* Callout: add the CSS class "xf-callout" to a Group block under Advanced */
.xf-callout {
	background: var(--xf-soft);
	border-left: 4px solid var(--xf-accent-1);
	padding: 1em 1.25em;
	margin: 1.5em 0;
}
.xf-callout > :last-child { margin-bottom: 0; }

/* Footer gets the brand bar too */
footer.site-footer, #colophon { border-top: 0; }
footer.site-footer::before, #colophon::before {
	content: "";
	display: block;
	height: 3px;
	max-width: 120px;
	margin: 0 auto 2em;
	background: var(--xf-gradient);
}

/* Dark mode: swap the mobile search field icon for a light version */
@media only screen and (max-width: 767px) and (prefers-color-scheme: dark) {
	header .navigation #searchterm {
		background: url("img/icn-search-light.svg") no-repeat right center !important;
		background-size: 16px !important;
	}
}

/* Section headings demoted from <h1> to <h2> for a single-h1 page outline; keep the iA4 look */
h2.xf-h1-look {
	font-weight: 700;
	text-align: center;
	letter-spacing: 1.5px;
	margin: 0 0 32px 0;
	text-transform: uppercase;
	font-size: 19px;
}
@media only screen and (max-width: 767px) {
	h2.xf-h1-look { letter-spacing: 1px; margin: 0 0 25px 0; font-size: 16px; }
}