/* ============================================
   L&K ELECTRICAL - LANDING PAGE
   Industrial Kinetic. Loaded only on the front page.

   Section rhythm alternates weight so no two neighbours read the same:
       white hero -> light band (trust) -> white (categories) -> light (contact)
   Exactly one loud element per page. Here that is the primary hero button.
   ============================================ */

.lk-landing {
	font-family: var(--font-body);
	color: var(--on-surface);
}

/* Belt and braces against wpautop. lk_strip_tag_whitespace() removes the
   newlines it feeds on, but an empty <p> slipping through is not harmless
   here: as the first child of .lk-landing its margin collapses out through
   the wrapper and pushes the whole page down, showing as a stray strip of
   grid-lined background between the nav bar and the hero. */
.lk-landing p:empty { display: none; }

.lk-section__inner,
.lk-hero__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* NB: .lk-trust__inner is deliberately NOT in the rule above. It is a hairline
   grid, so it carries `background: var(--border)` for its 1px gaps to show
   through - and any padding on it paints that colour as a 40px frame around
   the whole strip. The container padding lives on .lk-trust instead. */

@media (max-width: 768px) {
	.lk-section__inner,
	.lk-hero__inner {
		padding-left: var(--stack-md);
		padding-right: var(--stack-md);
	}
}


/* ---- Buttons ------------------------------------------------
   Exactly two variants. Do not add a third.

   inline-flex, not inline-block: these sit in a flex row whose default
   align-items is stretch, so the shorter button grows to match the taller one,
   and an inline-block leaves its text at the top of the box when that happens.

   box-sizing is border-box because min-height under content-box means the
   CONTENT height - which rendered a 46px button at 72.4px. */

.lk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	min-height: 44px;                  /* tap target floor */
	padding: 13px 26px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.lk-btn--primary {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--on-primary) !important;
}

.lk-btn--primary:hover,
.lk-btn--primary:focus-visible {
	background: var(--primary-container);
	border-color: var(--primary-container);
}

.lk-btn--primary:active { background: var(--surface-tint); border-color: var(--surface-tint); }

/* Secondary inverts to a solid fill on hover rather than tinting. */
.lk-btn--secondary,
.lk-btn--ghost {                       /* legacy class name, same component */
	background: transparent;
	border-color: var(--border-strong);
	color: var(--on-surface) !important;
}

.lk-btn--secondary:hover,
.lk-btn--secondary:focus-visible,
.lk-btn--ghost:hover,
.lk-btn--ghost:focus-visible {
	background: var(--on-surface);
	border-color: var(--on-surface);
	color: var(--inverse-on-surface) !important;
}

/* flex, not block - block would drop the centring the base rule sets up. */
.lk-btn--block { display: flex; width: 100%; }

@media (max-width: 768px) {
	.lk-btn { width: 100%; }
}


/* ---- Hero ---------------------------------------------------
   A light hero on white, separated from the trust band below by a hairline.
   The old dark gradient band went with the dark theme and is not coming back
   (DESIGN.md 12). */

.lk-hero {
	background: var(--surface-container-lowest);
	border-bottom: 1px solid var(--border);
	padding: clamp(2rem, 4vw, 3rem) 0;
}

.lk-hero__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 var(--stack-sm);
}

/* 800 at -0.015em is the logo's own display weight, so the lockup above and
   this headline read as one system.

   max-width stays at 18ch deliberately - it is what breaks the line after
   "SUPPLIES" rather than stranding "TRADE" on its own. */
.lk-hero__title {
	font-family: var(--font-body);
	font-size: clamp(1.75rem, 4.5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--on-surface);
	margin: 0 0 var(--stack-sm);
	text-transform: uppercase;
	max-width: 18ch;
}

/* The standfirst measure. At 60ch it wrapped to two lines for no extra
   meaning. */
.lk-hero__strap {
	font-size: 18px;
	line-height: 30px;
	max-width: 52ch;
	color: var(--on-surface-variant);
	margin: 0 0 var(--gutter);
}

.lk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stack-md);
}


/* ---- Trust strip --------------------------------------------
   The house hairline-grid pattern: 1px gaps over a --border background inside
   a 1px-bordered wrapper with overflow hidden. The gaps ARE the rules, so the
   row reads as one ruled instrument panel rather than four floating cards.
   This is the pattern for any set of peer items. */

/* A dark slate band, which is what carries this page.

   The section rhythm has to alternate weight or nothing reads as anything -
   white hero, light strip, white categories left the whole page washed out and
   flat. The reference anatomy runs the same way: hero, then a heavy band, then
   white. Slate gives the page its horizontal anchor and lets the red figures
   do the work they cannot do on a pale background.

   Accents on dark use --primary-container, the brighter of the two reds. */
.lk-trust {
	background: var(--inverse-surface);
	padding: var(--stack-lg) 40px;
}

.lk-trust__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	/* The 1px gaps ARE the rules - the background shows through them. */
	gap: 1px;
	background: #3f4548;
	border: 1px solid #3f4548;
	border-radius: var(--radius);
	overflow: hidden;
}

.lk-trust__item {
	background: var(--inverse-surface);
	text-align: center;
	padding: var(--gutter) var(--stack-md);
}

.lk-trust__figure {
	display: block;
	font-family: var(--font-body);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--primary-container);
	line-height: 1.1;
}

/* 600, not 500. Montserrat's caps are optically lighter than most sans faces
   at 12-14px; at 500 these labels look weedy. */
.lk-trust__label {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--inverse-on-surface);
}

@media (max-width: 768px) {
	.lk-trust { padding: var(--stack-lg) var(--stack-md); }
}


/* ---- Generic section ---------------------------------------- */

.lk-section { padding: 72px 0; }
.lk-section--alt { background: var(--surface-container-low); }

@media (max-width: 768px) {
	.lk-section { padding: 40px 0; }
}

.lk-section__title {
	font-family: var(--font-body);
	font-size: clamp(1.75rem, 4vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--on-surface);
	text-transform: uppercase;
	margin: 0 0 var(--stack-sm);
}

.lk-section__intro {
	color: var(--on-surface-variant);
	margin: 0 0 var(--stack-lg);
	max-width: 60ch;
}


/* ---- Category grid ------------------------------------------
   Also a hairline grid. auto-FIT, not auto-fill: empty tracks collapse, so a
   handful of categories sit together at the left rather than leaving ghost
   columns. The max track width stops two tiles stretching to 600px each. */

.lk-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
	justify-content: start;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	/* fit-content, not the default 100%. The hairline pattern paints --border
	   behind the grid so the 1px gaps read as rules - but a full-width
	   container with only one or two categories in it paints that colour
	   across the whole empty remainder as a large pale panel. Hugging the
	   tracks keeps the panel the size of its contents.
	   max-width keeps auto-fit wrapping instead of running off the side. */
	width: fit-content;
	max-width: 100%;
}

/* wpautop wraps some of the cards in a <p>, which then becomes the grid item
   instead of the card itself. display:contents takes the paragraph out of the
   layout so the card is the item again.
   This is a defence, not the fix - lk_strip_tag_whitespace() in
   inc/landing.php stops the paragraphs being created at all. */
.lk-cat-grid > p {
	display: contents;
}

.lk-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--surface-container-lowest);
	text-decoration: none;
	/* Hover changes background, never elevation. The old rule lifted the card
	   3px, which DESIGN.md 12 rules out - nothing moves. */
	transition: background var(--transition);
}

.lk-cat-card:hover { background: var(--surface-container-low); }

.lk-cat-card__media {
	background: var(--surface-container-lowest);   /* cut-outs shot on white */
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--stack-md);
}

.lk-cat-card__img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	object-fit: contain;
}

.lk-cat-card__body {
	padding: var(--stack-md);
	border-top: 1px solid var(--border);
}

.lk-cat-card__title {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--on-surface);
	margin: 0 0 4px;
}

/* Counts are data, so they take the mono face. */
.lk-cat-card__count {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--on-surface-variant);
}


/* ---- About -------------------------------------------------- */

.lk-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--stack-lg);
}

@media (min-width: 860px) {
	.lk-about { grid-template-columns: 1.6fr 1fr; align-items: start; }
}

.lk-about__text p { line-height: 26px; margin-bottom: var(--stack-md); }

.lk-tick-list { list-style: none; margin: var(--gutter) 0 0; padding: 0; }

.lk-tick-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.6rem;
	line-height: 1.5;
}

.lk-tick-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 8px;
	height: 8px;
	background: var(--primary);
	transform: rotate(45deg);
}

/* A card that is information about the business takes a 3px red TOP border;
   one representing a thing you can act on takes a red LEFT border. */
.lk-about__panel {
	background: var(--surface-container-lowest);
	border: 1px solid var(--border);
	border-top: 3px solid var(--primary);
	border-radius: var(--radius);
	padding: var(--gutter);
}

.lk-about__panel-title {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--on-surface);
	margin: 0 0 var(--stack-sm);
	padding-bottom: var(--stack-sm);
	border-bottom: 1px solid var(--border);
}

.lk-about__panel p {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: var(--gutter);
}


/* ---- Contact ------------------------------------------------ */

.lk-contact {
	background: var(--surface-container);
	border-top: 1px solid var(--border);
}

.lk-contact__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--stack-lg);
}

.lk-contact__block h3 {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--on-surface);
	margin: 0 0 var(--stack-sm);
}

.lk-contact__block p { line-height: 1.8; margin: 0; font-size: 15px; }
.lk-contact__block a { color: var(--primary); text-decoration: none; }
.lk-contact__block a:hover { color: var(--primary-container); text-decoration: underline; }