/*
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.3
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.
 *
 * Hidden until it receives keyboard focus. WordPress core ships its own
 * .screen-reader-text rules, but they are declared here as well so the link can
 * never become visible if that stylesheet is missing, deferred or overridden.
 */
.skip-link.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	word-wrap: normal;
}

.skip-link.screen-reader-text:focus {
	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;
	margin: 0;
	overflow: visible;
	padding: 14px 22px;
	text-decoration: none;
	top: 12px;
	white-space: normal;
	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);
}

/* ------------------------------------------------------ services grid */

/*
 * Four cards at most, stepping down to one on a phone.
 *
 * The block's own grid layout uses auto-fill, which would let a very wide
 * screen fit a fifth column. Two class selectors here so this beats the
 * single-class rule WordPress generates for the block.
 */
.wp-block-group.litc-service-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
	.wp-block-group.litc-service-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.wp-block-group.litc-service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.wp-block-group.litc-service-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Descriptions vary in length, so pin each card's link to the bottom and the
   "More on ..." links line up across the row. */
.wp-block-group.litc-service-grid > .litc-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/*
 * A flex column turns any inherited horizontal "auto" margin into centring.
 * Cards use the default layout so WordPress should not add one, but reset it
 * here as well in case a card is later switched back to constrained.
 */
.wp-block-group.litc-service-grid > .litc-card > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none;
}

.wp-block-group.litc-service-grid > .litc-card > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------- nav dropdown */

/* Give the Services submenu the same card treatment as everything else. */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border: 1px solid #e6ded3;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--lifted);
	padding: 8px;
	min-width: 15rem;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	border-radius: 8px;
	padding: 8px 12px;
	white-space: nowrap;
}

.wp-block-navigation
	.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--ember);
	text-decoration: none;
}

/* In the mobile overlay the submenu is inline, so drop the card styling. */
.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------- 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;
	}
}