/*
Theme Name: The Albion Makaveli
Theme URI: https://thealbionmakaveli.co.uk/
Description: Block theme for The Albion Makaveli. Organic cotton, screen printed in the UK. Colour, type and spacing are defined as design tokens in theme.json. Every section on every page is block content or a named pattern, editable from wp-admin.
Author: The Albion Makaveli
Author URI: https://thealbionmakaveli.co.uk/
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: albion
Tags: block-theme, full-site-editing, e-commerce, one-column, wide-blocks, block-patterns
*/

/* -------------------------------------------------------------------------
   Only what theme.json cannot express lives here.
   Nothing in this file contains copy, headings, image paths or CTA text.
   ---------------------------------------------------------------------- */

/* Small caps label register, section 7.
   Exposed in the editor as the "Label" block style on headings and paragraphs. */
.is-style-albion-label {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
	line-height: 1.4;
}

/* Standfirst, the serif paragraph that sits under a heading. */
.is-style-albion-lead {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* A gold hairline above a group, the section 9 press block treatment. */
.is-style-albion-ruled {
	border-top: 1px solid var(--wp--preset--color--old-gold);
}

/* Separator, as a hairline rather than the default short bar. */
.wp-block-separator.is-style-albion-hairline {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--faint);
	width: 100%;
	max-width: 100%;
	opacity: 1;
}
.wp-block-separator.is-style-albion-hairline-gold {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--old-gold);
	width: 100%;
	max-width: 100%;
	opacity: 1;
}

/* On a Press Black ground the hairlines need the dark values. */
.has-press-black-background-color .wp-block-separator.is-style-albion-hairline {
	border-top-color: #2E2C26;
}

/* A ruled list. No markers, a hairline under each line.
   Exposed in the editor as the "Ruled lines" block style on lists. */
.wp-block-list.is-style-albion-lines {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.wp-block-list.is-style-albion-lines > li {
	border-bottom: 1px solid var(--wp--preset--color--faint);
	padding: 0.85rem 0;
}
.wp-block-list.is-style-albion-lines > li:first-child {
	border-top: 1px solid var(--wp--preset--color--faint);
}
.has-press-black-background-color .wp-block-list.is-style-albion-lines > li {
	border-bottom-color: #2e2c26;
}
.has-press-black-background-color .wp-block-list.is-style-albion-lines > li:first-child {
	border-top-color: #2e2c26;
}

/* The journal index. Ruled rows, not cards and not a grid. */
.albion-journal-list .wp-block-post {
	border-top: 1px solid var(--wp--preset--color--faint);
	padding: var(--wp--preset--spacing--30) 0;
}
.albion-journal-list .wp-block-post:last-child {
	border-bottom: 1px solid var(--wp--preset--color--faint);
}
.albion-journal-list .wp-block-post-title a {
	text-decoration: none;
}
.albion-journal-list .wp-block-post-title a:hover {
	text-decoration: underline;
}

/* Previous and next at the foot of a piece. */
.wp-block-post-navigation-link {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
}
.wp-block-post-navigation-link a {
	text-decoration: none;
}
.wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

/* The crown, wherever it is placed as an inline image. */
.albion-crown img,
img.albion-crown {
	width: 100%;
	height: auto;
	display: block;
}

/* Body copy measure. Headings balance, paragraphs get room. */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/* Keep wide content from pushing the page sideways. */
.wp-block-table,
.wp-block-preformatted,
.wp-block-code {
	overflow-x: auto;
}

/* Visible keyboard focus, on both grounds. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--old-gold);
	outline-offset: 3px;
}

/* Numerals line up in tables and price columns. */
table,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   WooCommerce. Only the controls a customer touches on the product page.
   Everything else Woo draws is left alone.
   ---------------------------------------------------------------------- */

.woocommerce div.product form.cart .variations {
	border: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	width: 100%;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	display: block;
	width: 100%;
	padding: 0 0 0.4rem 0;
	border: 0;
	text-align: left;
}

.woocommerce div.product form.cart .variations td:not(:last-child) {
	padding-bottom: var(--wp--preset--spacing--20);
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
}

.woocommerce div.product form.cart .variations select,
.woocommerce .quantity input.qty {
	background: transparent;
	color: inherit;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink-grey);
	border-radius: 0;
	padding: 0.6rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	min-width: 12rem;
	max-width: 100%;
}

.woocommerce .quantity input.qty {
	min-width: 4rem;
	text-align: left;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.woocommerce div.product .stock {
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
	color: var(--wp--preset--color--ink-grey);
}

.woocommerce div.product .out-of-stock {
	color: var(--wp--preset--color--old-gold);
}

/* -------------------------------------------------------------------------
   Forms. WPForms ships its own grey and blue chrome, which belongs to
   WPForms and not to this site. Everything below drags it onto the palette
   and the type scale. No copy here, only appearance.
   ---------------------------------------------------------------------- */

/* WPForms draws itself from these custom properties. Setting them here is
   what takes the blue off the submit button and the white boxes off the
   fields, everywhere, including any form added later. */
:root {
	--wpforms-field-border-radius: 0px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: transparent;
	--wpforms-field-border-color: #4a473f;
	--wpforms-field-border-color-spare: #4a473f;
	--wpforms-field-text-color: #12110f;
	--wpforms-field-menu-color: #f5f2ea;
	--wpforms-label-color: #12110f;
	--wpforms-label-sublabel-color: #4a473f;
	--wpforms-label-error-color: #b08d2e;
	--wpforms-button-border-radius: 0px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-size: 1px;
	--wpforms-button-background-color: #12110f;
	--wpforms-button-border-color: #12110f;
	--wpforms-button-text-color: #f5f2ea;
	--wpforms-page-break-color: #b08d2e;
	--wpforms-field-size-input-height: auto;
	--wpforms-field-size-font-size: 1.0625rem;
	--wpforms-field-size-padding-h: 0px;
	--wpforms-label-size-font-size: 0.8125rem;
	--wpforms-button-size-font-size: 0.8125rem;
	--wpforms-button-size-height: auto;
	--wpforms-button-size-padding-h: 2rem;
	--wpforms-container-shadow-size-box-shadow: none;
}

/* The same form on a Press Black band. Custom properties inherit, so the
   band only has to restate the handful that change. */
.has-press-black-background-color .wpforms-container {
	--wpforms-field-border-color: #55524a;
	--wpforms-field-border-color-spare: #55524a;
	--wpforms-field-text-color: #f5f2ea;
	--wpforms-label-color: #f5f2ea;
	--wpforms-button-background-color: #f5f2ea;
	--wpforms-button-border-color: #f5f2ea;
	--wpforms-button-text-color: #12110f;
	--wpforms-label-error-color: #d4b45c;
}

.wpforms-container,
.wpforms-container .wpforms-form {
	max-width: 100%;
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	color: inherit;
}

.wpforms-container .wpforms-field {
	padding: 0 0 var(--wp--preset--spacing--20) 0;
}

.wpforms-container .wpforms-field-label {
	font-family: var(--wp--preset--font-family--garamond);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
	color: inherit;
	margin-bottom: 0.4rem;
}

/* No red stars. The fields that are needed are obvious from the labels,
   and validation still fires if one is left empty. */
.wpforms-container .wpforms-required-label {
	display: none;
}

/* No "First" and "Last" under the boxes. */
.wpforms-container .wpforms-field-sublabel {
	display: none;
}

.wpforms-container .wpforms-field-description {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-grey);
	font-style: normal;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: transparent;
	color: inherit;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--ink-grey);
	border-radius: 0;
	box-shadow: none;
	padding: 0.7rem 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.wpforms-container textarea {
	min-height: 8rem;
	resize: vertical;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
	color: var(--wp--preset--color--ink-grey);
	opacity: 0.7;
}

.wpforms-container input:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-bottom-color: var(--wp--preset--color--old-gold);
	outline: 0;
	box-shadow: none;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit {
	background-color: var(--wp--preset--color--press-black);
	color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--press-black);
	border-radius: 0;
	padding: 0.9rem 2rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--label--letter-spacing, 0.12em);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container .wpforms-submit:hover,
.wpforms-container button[type="submit"]:focus,
.wpforms-container .wpforms-submit:focus {
	background-color: var(--wp--preset--color--old-gold);
	border-color: var(--wp--preset--color--old-gold);
	color: var(--wp--preset--color--press-black);
}

.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error {
	color: var(--wp--preset--color--old-gold);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
}

.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--old-gold);
	border-radius: 0;
	color: inherit;
	padding: var(--wp--preset--spacing--20) 0 0 0;
}

/* The same form on a Press Black band, the email block. */
.has-press-black-background-color .wpforms-container input[type="text"],
.has-press-black-background-color .wpforms-container input[type="email"],
.has-press-black-background-color .wpforms-container textarea {
	border-bottom-color: #55524a;
	color: var(--wp--preset--color--paper);
}

.has-press-black-background-color .wpforms-container input::placeholder {
	color: var(--wp--preset--color--faint);
	opacity: 0.6;
}

.has-press-black-background-color .wpforms-container button[type="submit"],
.has-press-black-background-color .wpforms-container .wpforms-submit {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--press-black);
}

.has-press-black-background-color .wpforms-container button[type="submit"]:hover,
.has-press-black-background-color .wpforms-container .wpforms-submit:hover {
	background-color: var(--wp--preset--color--old-gold);
	border-color: var(--wp--preset--color--old-gold);
	color: var(--wp--preset--color--press-black);
}

/* One field beside one button, where the layout allows it. */
/* One field beside one button. The band is full bleed, but the field is not.
   It holds at about a third of the wide measure and stays left, under the
   heading, with the button standing separately beside it. */
.albion-inline-form div.wpforms-container .wpforms-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--30);
	max-width: 100%;
}
.albion-inline-form div.wpforms-container .wpforms-field-container {
	flex: 0 1 22rem;
	max-width: 22rem;
	min-width: 0;
}
.albion-inline-form div.wpforms-container .wpforms-field {
	padding-bottom: 0;
	width: 100%;
}
.albion-inline-form div.wpforms-container .wpforms-submit-container {
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
}

/* WPForms sets the field height from a variable and leaves the text sitting on
   the rule. Restate the padding at a specificity that beats theirs. */
div.wpforms-container .wpforms-form input[type="text"],
div.wpforms-container .wpforms-form input[type="email"],
div.wpforms-container .wpforms-form input[type="tel"],
div.wpforms-container .wpforms-form input[type="url"],
div.wpforms-container .wpforms-form input[type="number"],
div.wpforms-container .wpforms-form select,
div.wpforms-container .wpforms-form textarea {
	height: auto;
	padding: 0.35rem 0 0.75rem;
	line-height: 1.5;
}
div.wpforms-container .wpforms-form textarea {
	padding-top: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}