/*
Theme Name: Local IT Care
Theme URI: https://www.localitcare.co.uk
Author: Local IT Care
Description: A block theme for independent IT support and consultancy firms. Built around a warm amber and slate palette, with starter layouts for services, values, pay-as-you-go pricing and enquiries. Includes a dependency-free contact form, self-hosted fonts, and no third-party requests.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: localitcare
Tags: block-theme, full-site-editing, business, one-column, two-columns, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/*
 * Nearly all styling lives in theme.json so it stays editable in the Site
 * Editor. Only rules the block editor cannot express belong here.
 */

/* Skip link — visible only on keyboard focus. */
.skip-link.screen-reader-text {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-radius: 6px;
	box-shadow: 0 2px 10px rgb(35 47 58 / 25%);
	clip: auto !important;
	clip-path: none;
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	height: auto;
	left: 12px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 12px;
	width: auto;
	z-index: 100000;
}

/* Every interactive element gets a visible focus ring. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--ember);
	outline-offset: 2px;
	border-radius: 3px;
}

/* The header sticks, but never on a short viewport where it would eat the screen. */
@media (min-height: 620px) {
	.litc-sticky-header {
		position: sticky;
		top: 0;
		z-index: 50;
		backdrop-filter: saturate(180%) blur(12px);
		background-color: rgb(250 246 241 / 88%);
	}
}

.litc-logo img,
.litc-logo svg {
	display: block;
	height: auto;
	width: clamp(160px, 22vw, 208px);
}

/* Service and value cards lift very slightly on hover. */
.litc-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.litc-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 14px 34px -18px rgb(35 47 58 / 38%);
	}
}

/* Equal-height cards inside a columns block. */
.litc-card-grid .wp-block-column {
	display: flex;
}

.litc-card-grid .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Push a card's last element to the bottom so CTAs line up across a row. */
.litc-card-grid .wp-block-group > :last-child {
	margin-top: auto;
}

/* ---------------------------------------------------------------- form */
.litc-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: 34rem;
}

.litc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.litc-field label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.litc-field .litc-hint {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--steel);
}

.litc-field input,
.litc-field textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid #d8d0c6;
	border-radius: 10px;
	padding: 12px 14px;
	width: 100%;
}

.litc-field input:hover,
.litc-field textarea:hover {
	border-color: #bdb2a4;
}

.litc-field textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.litc-field input[aria-invalid="true"],
.litc-field textarea[aria-invalid="true"] {
	border-color: #b3261e;
}

.litc-error {
	font-size: 0.8125rem;
	color: #8c1d18;
}

/* Honeypot: hidden from people, reachable by bots. */
.litc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.litc-notice {
	border-radius: 12px;
	padding: 16px 18px;
	font-size: 0.9375rem;
	line-height: 1.55;
	margin-bottom: var(--wp--preset--spacing--30);
}

.litc-notice-ok {
	background: #e7f3ec;
	border: 1px solid #9fcbb3;
	color: #14532d;
}

.litc-notice-bad {
	background: #fdecea;
	border: 1px solid #eab3ae;
	color: #8c1d18;
}

.litc-submit {
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	border: 0;
	border-radius: 10px;
	padding: 14px 26px;
	background: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--ink);
	justify-self: start;
}

.litc-submit:hover {
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--paper);
}

/* Links on the dark ground: Ember only reaches 2.6:1 there, so use a lighter
   amber (6.1:1) and drop the underline until hover. */
.has-ink-background-color a:not(.wp-element-button):not(.litc-logo) {
	color: #ee9a56;
	text-decoration: none;
}

.has-ink-background-color a:not(.wp-element-button):not(.litc-logo):hover {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

/* The footer logo should never pick up link colours. */
.has-ink-background-color .litc-logo svg {
	width: clamp(150px, 20vw, 186px);
}

/* ---------------------------------------------------------------- misc */

/* Keep long service names from breaking the card grid on small screens. */
.litc-card h3 {
	overflow-wrap: break-word;
}

/* Post content images get the same soft corner as cards. */
.wp-block-post-content img {
	border-radius: 12px;
}

@media print {
	.litc-sticky-header,
	.wp-block-template-part footer,
	.litc-no-print {
		display: none !important;
	}
}