/*
Theme Name: Verkykerskop Shop
Template: twentytwentyfive
Description: Child of Twenty Twenty-Five that dresses shop.verkykerskop.co.za in the main site's header, footer, colours and type. Tokens mirror src/styles/tokens.css in the site repo; change both together.
Version: 1.1.2
Requires at least: 6.7
Text Domain: verkykerskop-shop
*/

/* The signature label style: nav, buttons, eyebrows (site global.css @utility label). */
.vkk-label,
.vkk-header .wp-block-navigation-item__content,
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button:not(.is-link) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Header: sticky on the ground with a hairline, as on the site. */
.vkk-header {
	position: sticky;
	top: 0;
	z-index: 40;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}
.vkk-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-muted);
	transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vkk-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--ink);
}
.vkk-logo {
	flex-shrink: 0;
}
.vkk-logo img {
	width: 200px;
	height: auto;
}
.vkk-header .wp-block-button__link {
	white-space: nowrap;
}
/* The site collapses its nav below 1280px (xl) and drops the header button;
   the Navigation block's own breakpoint is 600px, so move it to match. */
@media (max-width: 1279px) {
	.vkk-header .vkk-order {
		display: none;
	}
	.vkk-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.vkk-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
@media (min-width: 640px) {
	.vkk-logo img { width: 240px; }
}

/* Footer links: muted, ink on hover. */
.vkk-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vkk-footer a:hover {
	color: var(--wp--preset--color--ink);
}
.vkk-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Cards: order summary and checkout panels read as the site's cards. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
	background: #ffffff;
	border-color: var(--wp--preset--color--border);
	border-radius: 0.25rem;
}

/* Inputs: near-square, field-coloured border, leather focus. */
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-textarea {
	border-color: var(--wp--preset--color--field) !important;
	border-radius: 0.25rem !important;
}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Radio and selected option borders in ink, not WooCommerce black. */
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink) !important;
	border-radius: 0.25rem;
}