/**
 * TeckGeck: the handful of styles theme.json can't express.
 *
 * Everything else (colours, fonts, sizes, button shape) is in theme.json.
 * If you're looking to change a colour, go there instead.
 */

/* ------------------------------------------------------------------------
 * 1. The white content panel
 *
 * Designer terms: this is the "card" that sits on top of your background
 * art. It's capped at the wide width (1170px) and centred, so on big screens
 * you see artwork either side; on phones it fills the screen edge to edge.
 *
 * Targeting every <main> (instead of one template) means WooCommerce's own
 * shop, product, cart and checkout templates get the panel too, including
 * product pages, where WooCommerce wraps <main> in an extra container.
 * ---------------------------------------------------------------------- */
.wp-site-blocks main,
.is-root-container > main.wp-block-group {
	background-color: var(--wp--preset--color--base);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: 15px;
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	box-sizing: border-box;
}

/* Header, panel and footer sit flush against each other (no gaps). */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------------
 * 2. Key buttons: the "press" effect
 *
 * theme.json gives the button its orange face, dark edge and 7px ledge
 * (the shadow). Here we make it feel physical: when you click, the key
 * drops 7px onto its ledge, so the shadow disappears.
 * ---------------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
	transition: transform 80ms ease-out, box-shadow 80ms ease-out, background-color 120ms ease-out;
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(7px);
	box-shadow: none;
}

/* Leave room under a row of buttons so the ledge never touches what follows. */
.wp-block-buttons {
	padding-bottom: 7px;
}

/* People who've asked their device for less motion get no movement. */
@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------------
 * 3. Navigation: highlight the page you're on in orange
 * ---------------------------------------------------------------------- */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------------
 * 4. Footer links: no underline until hovered (cleaner on dark).
 * ---------------------------------------------------------------------- */
.tg-footer a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

.tg-footer a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
}

/* A list without bullets (used for the footer links). */
.tg-plain-list {
	list-style: none;
	padding-left: 0;
}

/* Keep the menu on the right, even when it wraps under the site title. */
.wp-block-group.tg-header__nav {
	margin-left: auto;
}

/* ------------------------------------------------------------------------
 * 5. Featured image on a single post: whole image, never stretched
 *
 * Designer terms: the template asks WordPress for the full, uncropped
 * image (not the square crop), and this rule shows it at its real
 * proportions, centred, shrinking to fit on phones but never blown up
 * past its actual size.
 * ---------------------------------------------------------------------- */
.wp-block-post-featured-image.tg-post-feature img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

/* ------------------------------------------------------------------------
 * 6. Blog grid cards: whole image, no cropping
 *
 * Each card shows its thumbnail at its real shape (wide, square or tall),
 * filling the card's width. Cards in a row line up at the top; a tall
 * image simply makes its card longer.
 * ---------------------------------------------------------------------- */
.wp-block-post-featured-image.tg-card-image img {
	width: 100%;
	height: auto;
}