/*
Theme Name: Laser Fusion Technologies 2
Theme URI: https://laserfusiontech.example
Author: LFT
Author URI: https://laserfusiontech.example
Description: Dark, high-tech industrial block theme for Laser Fusion Technologies (Laser Assisted Cold Spray). Includes page patterns for Home, Technology, Applications, Materials, Partnerships, Leadership, Contact and Further Applications, plus an Application custom post type with a reusable single template.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lft
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, editor-style, one-column, two-columns, wide-blocks
*/

/* =========================================================================
 * COLOR SYSTEM — single source of truth is theme.json > settings.color.palette
 * Every colour below references the generated CSS var (e.g. accent =
 * var(--wp--preset--color--accent)); tints use color-mix on the same vars.
 * To re-brand: edit the hex values in theme.json's palette — nothing else.
 *
 * TYPOGRAPHY — base sizes live in theme.json (settings.typography.fontSizes +
 * styles.elements.h1..h6). The rules below scope to .wp-site-blocks so a bare
 * <h1>..<h6> always renders at the intended size even if a global/plugin rule
 * would otherwise override it. Inline or per-block font sizes still win.
 * ========================================================================= */
.wp-site-blocks h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.wp-site-blocks h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; letter-spacing: -0.015em; }
.wp-site-blocks h3 { font-size: 19px; line-height: 1.3; }
.wp-site-blocks h4 { font-size: clamp(18px, 2vw, 22px); line-height: 1.3; }
.wp-site-blocks h5 { font-size: 16px; line-height: 1.4; }
.wp-site-blocks h6 { font-size: 13px; line-height: 1.4; letter-spacing: 0.06em; }

/* Page-hero faint grid backdrop (matches the homepage hero) */
.lft-hero {
	background-image:
		repeating-linear-gradient(0deg,  color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent) 0 1px, transparent 1px 64px),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--accent) 3%, transparent) 0 1px, transparent 1px 64px);
}


/* Block themes are styled from theme.json — this file's header is what makes
   the theme installable. Add any extra global CSS below. */

/* Application card image (fills card top, uniform height, rounded top) */
.lft-cardimg { margin: 0; display: block; width: 100%; }
.lft-cardimg img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	border-radius: 4px 4px 0 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.lft-appcards-lg .lft-cardimg img { height: 220px; }
.lft-tileimg img { height: 120px; }
.lft-tile-home img { height: 96px; border-radius: 3px 3px 0 0; }

/* Footer LinkedIn link */
.lft-social {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	color: var(--wp--preset--color--text-body);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: color 0.15s ease;
}
.lft-social:hover { color: var(--wp--preset--color--accent); }
.lft-social svg { flex-shrink: 0; }

/* List style used by the patterns to drop bullets */
ul.is-style-none { list-style: none; padding-left: 0; margin-left: 0; }

/* -------------------------------------------------------------------------
 * Decorated list treatments used on Home / Technology (match the prototype)
 * ---------------------------------------------------------------------- */
/* Numbered rows: 01, 02 … with dividers (Problem, Technology gap lists) */
.lft-numbered { counter-reset: lftnum; }
.lft-numbered > li {
	counter-increment: lftnum;
	position: relative;
	padding: 16px 0 16px 46px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.lft-numbered > li::before {
	content: counter(lftnum, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 17px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 12px;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent);
}

/* Stepper: circled numbers, laid out in a row (Engagement / How to work with LFT) */
.lft-steps {
	counter-reset: lftstep;
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 16px;
	list-style: none;
}
.lft-steps > li {
	counter-increment: lftstep;
	position: relative;
	padding: 18px 10px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
	font-size: 14.5px;
	line-height: 1.35;
	display: block;
	min-height: 0;
}
.lft-steps > li::before {
	content: counter(lftstep, decimal-leading-zero);
	position: static;
	display: flex;
	width: 30px;
	height: 30px;
	margin-bottom: 16px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	align-items: center;
	justify-content: center;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	color: var(--wp--preset--color--accent);
	box-sizing: border-box;
}
.lft-steps > li:first-child::before { border-color: var(--wp--preset--color--accent); }
@media (max-width: 900px) {
	.lft-steps { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}

/* Number-gutter steps (Technology in brief): teal diamond marker, dividers between */
.lft-techsteps { list-style: none; }
.lft-techsteps > li {
	position: relative;
	padding: 16px 0 16px 28px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}
.lft-techsteps > li:last-child { border-bottom: none; }
.lft-techsteps > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 24px;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
}
.lft-techsteps > li > strong { display: block; margin-bottom: 4px; }

/* Engagement pathway cards — equal height across the row */
.lft-pathways.wp-block-columns { align-items: stretch; }
.lft-pathways .wp-block-column { display: flex; flex-direction: column; }
.lft-pathways .wp-block-column > .wp-block-group { flex: 1; }

/* Divided rows: thin separators between stacked items */
.lft-divided > li { padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent); }
.lft-divided > li:last-child { border-bottom: none; }

/* -------------------------------------------------------------------------
 * Outcomes grid ("What LFT enables"): equal-height boxes, each with a diamond
 * ---------------------------------------------------------------------- */
.lft-outcomes .wp-block-column { display: flex; }
.lft-outcomes .has-surface-2-background-color {
	width: 100%;
	height: 100%;
	position: relative;
}
.lft-outcomes .has-surface-2-background-color::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
	margin-bottom: 20px;
}

/* -------------------------------------------------------------------------
 * Application cards: equal height + image placeholder zone
 * ---------------------------------------------------------------------- */
.lft-appcards .wp-block-column { display: flex; }
.lft-appcards .wp-block-column > .wp-block-group {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* -------------------------------------------------------------------------
 * Mobile / tablet adjustments
 * ---------------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Header: smaller logo + tighter gutters so logo, menu toggle and Contact fit */
	header .wp-block-group[style] { padding-left: 20px !important; padding-right: 20px !important; }
	header .wp-block-site-logo img { width: min(180px, 44vw) !important; }
	header .wp-block-button__link { padding: 9px 16px !important; font-size: 13px !important; }
	header .wp-block-navigation { flex: 0 0 auto; }

	/* Section gutters + vertical rhythm (patterns carry inline desktop padding) */
	main .wp-block-group.alignfull[style] {
		padding-left: 20px !important;
		padding-right: 20px !important;
		padding-top: clamp(56px, 9vw, 80px) !important;
		padding-bottom: clamp(56px, 9vw, 80px) !important;
	}
	footer .wp-block-group[style] { padding-left: 20px !important; padding-right: 20px !important; }

	/* Card imagery a touch shorter when cards go full-width */
	.lft-appcards-lg .lft-cardimg img { height: 200px; }
}
@media (max-width: 520px) {
	.lft-steps { grid-template-columns: 1fr !important; }
	.lft-mshots { gap: 8px; }
}

/* Even card grids: 4-up / 2-up / 1-up and 3-up / 2-up / 1-up (Applications overview) */
.wp-block-columns.lft-grid-4,
.wp-block-columns.lft-grid-3 {
	display: grid;
	gap: 28px;
	align-items: stretch;
}
.wp-block-columns.lft-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-columns.lft-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lft-grid-4 > .wp-block-column,
.lft-grid-3 > .wp-block-column,
.lft-quarters > .wp-block-column {
	display: flex;
	flex-basis: auto !important;
	margin: 0 !important;
	min-width: 0;
}
.lft-grid-4 > .wp-block-column > .wp-block-group,
.lft-grid-3 > .wp-block-column > .wp-block-group,
.lft-quarters > .wp-block-column > .wp-block-group {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
@media (max-width: 1180px) {
	.wp-block-columns.lft-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
	.wp-block-columns.lft-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.wp-block-columns.lft-grid-4,
	.wp-block-columns.lft-grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Two cards sized like a 4-up row (Leadership: commercial support matches technical leadership) */
.wp-block-columns.lft-quarters {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--style--block-gap, 24px);
	align-items: stretch;
}
@media (max-width: 781px) {
	.wp-block-columns.lft-quarters { grid-template-columns: minmax(0, 1fr); }
}

/* Clickable card image + title */
.lft-appcards h3 a { transition: color 0.2s ease; }
.lft-appcards h3 a:hover { color: var(--wp--preset--color--accent) !important; }
.lft-cardimg a { display: block; width: 100%; line-height: 0; }
.lft-cardimg a img { transition: opacity 0.2s ease; }
.lft-cardimg a:hover img { opacity: 0.85; }

.lft-imgph {
	min-height: 170px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	border-radius: 4px 4px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lft-imgph::before {
	content: "IMAGE";
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

/* -------------------------------------------------------------------------
 * Technology page treatments
 * ---------------------------------------------------------------------- */
/* ✕ / ✓ marked lists with breathing room (Why existing methods / What LACS does) */
.lft-cross > li, .lft-check > li {
	position: relative;
	padding: 8px 0 8px 26px;
}
.lft-cross > li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	top: 8px;
	color: color-mix(in srgb, var(--wp--preset--color--laser) 90%, transparent);
	font-size: 13px;
}
.lft-check > li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--wp--preset--color--accent);
	font-size: 13px;
}

/* Capability chips (What this enables) — 2 rows of 4, equal width */
.lft-chips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.lft-chip {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: 2px;
	padding: 16px 18px;
	font-family: Archivo, sans-serif;
	font-weight: 500;
	font-size: 15.5px;
	color: var(--wp--preset--color--text-light);
}
@media (max-width: 781px) {
	.lft-chips { grid-template-columns: repeat(2, 1fr); }
}

/* Lettered credibility rows: A / B / C in a gutter, with dividers */
.lft-creds { counter-reset: lftc; list-style: none; }
.lft-creds > li {
	counter-increment: lftc;
	position: relative;
	padding: 22px 0 22px 44px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
}
.lft-creds > li:last-child { border-bottom: none; }
.lft-creds > li::before {
	content: counter(lftc, upper-alpha);
	position: absolute;
	left: 0;
	top: 23px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13px;
	color: var(--wp--preset--color--accent);
}
.lft-creds > li > strong { display: block; margin-bottom: 6px; }

/* -------------------------------------------------------------------------
 * Materials page: 3-up square image strip + technical-proof diamond list
 * ---------------------------------------------------------------------- */
.lft-mshots { gap: 14px; }
.lft-mshots .wp-block-column { margin: 0; }
.lft-msq { margin: 0; }
.lft-msq img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.lft-msq figcaption {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	color: #7E8C96;
	margin-top: 9px;
	text-align: left;
}
/* Materials hero collage image */
.lft-herofig { margin: 0; }
.lft-herofig img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}
.lft-herofig figcaption {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
	margin-top: 10px;
	text-align: left;
}
.lft-proof { list-style: none; }
.lft-proof > li {
	position: relative;
	padding: 11px 0 11px 26px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.lft-proof > li:last-child { border-bottom: none; }
.lft-proof > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 18px;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
}

/* Diamond-marker rows (Team / credibility lists) */
.lft-diamond > li {
	position: relative;
	padding: 18px 0 18px 28px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
}
.lft-diamond > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 25px;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--accent);
	transform: rotate(45deg);
}

/* Laser-accent diamond markers (Invest & co-develop pathway) */
.lft-diamond-laser > li::before { background: var(--wp--preset--color--laser); }

/* -------------------------------------------------------------------------
 * Primary navigation — medium-weight items + teal underline on current page
 * ---------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
}
/* Active page: teal text + underline (top-level only) */
.wp-block-navigation > ul > li > .wp-block-navigation-item__content[aria-current],
.wp-block-navigation .wp-block-navigation__container > li > .wp-block-navigation-item__content[aria-current] {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 4px;
}

/* -------------------------------------------------------------------------
 * Applications dropdown — dark card matching the mockup
 * (single-line items, bold, divider under the overview link, hover highlight).
 * ---------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--surface-2) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	border-radius: 4px;
	padding: 12px;
	min-width: 300px;
	width: max-content;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	margin-top: 12px;
}
/* Invisible bridge across the 12px gap so the menu stays open while the
   cursor travels from "Applications" down into the card (no hover dead-zone). */
.wp-block-navigation .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
	background: transparent;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 11px 16px;
	border-radius: 3px;
	color: var(--wp--preset--color--text-light);
	font-weight: 600;
	white-space: nowrap;
	border-bottom: none;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
	color: var(--wp--preset--color--accent);
}
/* First item = "Applications overview": teal, with a divider beneath it */
.wp-block-navigation .wp-block-navigation__submenu-container > li:first-child > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation .wp-block-navigation__submenu-container > li:first-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	margin-bottom: 6px;
	padding-bottom: 6px;
}


/* Technology "What LACS does differently" — evidence images shown at native aspect (never cropped) */
.lft-figfit { margin: 0; text-align: center; }
.lft-figfit img {
	width: auto;
	height: auto;
	max-width: 100%;
	display: inline-block;
}
.lft-figborder img {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 16%, transparent);
	border-radius: 4px;
}
.lft-figfit figcaption.wp-element-caption {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 10.5px;
	letter-spacing: 0.12em;
	line-height: 1.6;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--text-light) 55%, transparent);
	margin-top: 14px;
}