/*
 * The shop's two chrome surfaces: the header band that every page wears, and the account page,
 * which is a working surface rather than a landing page. Everything here is logical-property CSS,
 * so the whole sheet mirrors between Persian (RTL) and English (LTR).
 */

/* Header: one row on a wide screen — brand and nav at the inline-start, the actions a Customer
   needs at the inline-end, on one baseline. */

.handcraft-header__row {
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

/* Centred, not baseline: the hoopoe mark before the title is an empty box, and a baseline row
   would line the menu up with the bottom of the bird. */
.handcraft-header__brand {
	align-items: center;
	min-inline-size: 0;
}

.handcraft-header__actions {
	align-items: center;
	margin-inline-start: auto;
}

.handcraft-header .wp-block-site-title {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.handcraft-header__nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--small);
}

/* The category submenu drops onto the page, so it is a light panel on the dark band, finished
   with the same ochre guard line as the band itself. */

.handcraft-header .wp-block-navigation .wp-block-navigation__submenu-container {
	min-inline-size: 13rem;
	padding-block: var(--wp--preset--spacing--20);
	border-block-start: 2px solid var(--wp--preset--color--ochre);
	background-color: var(--wp--preset--color--parchment);
	color: var(--wp--preset--color--shiraz);
}

.handcraft-header .wp-block-navigation__submenu-container a {
	color: inherit;
}

.handcraft-header .wp-block-navigation__submenu-container a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--carpet-red);
}

.handcraft-header .wp-block-navigation-submenu__toggle {
	color: inherit;
}

/* The account door and the cart: one weight, one icon size, so they read as a pair. */

.handcraft-header .wc-block-customer-account__link,
.handcraft-header .wc-block-mini-cart__button {
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.handcraft-header .wc-block-customer-account__visual {
	line-height: 0;
}

.handcraft-header .wc-block-mini-cart__product-count {
	background-color: var(--wp--preset--color--ochre);
	color: var(--wp--preset--color--shiraz);
}

/* On a phone the nav folds into core's overlay, but the account and cart affordances stay put:
   they are how a Customer signs in, so they are the last things to go. */
@media (max-width: 600px) {
	.handcraft-header__row {
		gap: var(--wp--preset--spacing--20);
	}

	.handcraft-header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.handcraft-header__actions {
		gap: var(--wp--preset--spacing--20);
	}
}

/* Account page. The page title is a working surface's title, not a poster's, and it sits in the
   same column as the content it names: a title on the wide measure and a panel on the narrow one
   leaves the two edges disagreeing about where the page begins. */

body:has(.handcraft-otp) .wp-block-post-title,
body:has(.woocommerce-MyAccount-navigation) .wp-block-post-title {
	max-inline-size: var(--wp--style--global--content-size);
	font-size: var(--wp--preset--font-size--x-large);
}

/* Signed out: one narrow column, a sand panel ruled in garnet, rather than a floating card. */

.handcraft-otp {
	max-inline-size: 30rem;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--sand);
	border-inline-start: 3px solid var(--wp--preset--color--garnet);
}

.handcraft-otp__heading {
	margin-block: 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--large);
}

.handcraft-otp__intro {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* An informational sentence is a ochre-edged strip; a refusal is edged in carpet red. */
.handcraft-otp__notice {
	margin-block: 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20);
	background-color: color-mix(in srgb, var(--wp--preset--color--ochre) 22%, transparent);
	border-inline-start: 4px solid var(--wp--preset--color--ochre);
}

body.handcraft-notice-refusal .handcraft-otp__notice {
	background-color: color-mix(in srgb, var(--wp--preset--color--carpet-red) 14%, transparent);
	border-inline-start-color: var(--wp--preset--color--carpet-red);
}

.handcraft-otp__field {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.handcraft-otp__field label {
	display: block;
	margin-block-end: 0.35em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.handcraft-otp__field input {
	inline-size: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	border: 1px solid var(--wp--preset--color--umber);
	background-color: var(--wp--preset--color--parchment);
	font: inherit;
}

.handcraft-otp__field input:is(:hover, :focus) {
	border-color: var(--wp--preset--color--garnet);
}

.handcraft-otp__submit,
.handcraft-otp__again .button {
	inline-size: 100%;
	box-sizing: border-box;
	padding: 0.75em 1em;
	border: 0;
	background-color: var(--wp--preset--color--garnet);
	color: var(--wp--preset--color--parchment);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.handcraft-otp__submit:hover {
	background-color: var(--wp--preset--color--shiraz);
}

.handcraft-otp__again {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Signed in: the account menu is a sidebar with hairline-ruled items and an ochre bar on the
   current one, and the content reads beside it. */

.woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
	align-items: start;
}

/* The account page is a two-column working surface, so it uses the page's full width rather than
   the measure a long read would want. */
body:has(.woocommerce-MyAccount-navigation) .wp-block-post-content {
	--wp--style--global--content-size: 100%;
}

/* WooCommerce's own account layout floats the menu beside the content, which would take both out
   of the grid above and leave the content stranded in one narrow column. */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	inline-size: auto;
}

/* WooCommerce clears its floats with a ::before and ::after on this wrapper. As grid items they
   would take cells of their own, so with no floats left to clear they are dropped. */
.woocommerce:has(.woocommerce-MyAccount-navigation)::before,
.woocommerce:has(.woocommerce-MyAccount-navigation)::after {
	display: none;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	border-block-end: 1px solid var(--wp--preset--color--sand);
}

.woocommerce-MyAccount-navigation li:first-child {
	border-block-start: 1px solid var(--wp--preset--color--sand);
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding-block: 0.6em;
	padding-inline: var(--wp--preset--spacing--20);
	border-inline-start: 3px solid transparent;
	color: var(--wp--preset--color--umber);
	text-decoration: none;
	/* A one-line menu item is set on the body measure, which Persian opens up to 1.9 for
	   running text; at that leading the six items read as a loose list rather than a menu. */
	line-height: 1.5;
}

.woocommerce-MyAccount-navigation a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--garnet);
	background-color: color-mix(in srgb, var(--wp--preset--color--sand) 60%, transparent);
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a[aria-current="page"] {
	border-inline-start-color: var(--wp--preset--color--ochre);
	color: var(--wp--preset--color--shiraz);
	font-weight: 600;
}

.woocommerce-MyAccount-content > :first-child {
	margin-block-start: 0;
}

/* The dashboard greets the Customer in a paragraph rather than a heading, and it is the sentence
   that says whose account this is, so it is set like a heading. */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
body.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-family: var(--wp--custom--font--heading);
	font-size: var(--wp--preset--font-size--x-large);
}

@media (max-width: 780px) {
	.woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	/* Stacked, the menu is a row of the sections rather than a column, so it doesn't push the
	   content a whole screen down. */
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
	}

	.woocommerce-MyAccount-navigation li,
	.woocommerce-MyAccount-navigation li:first-child {
		border: 0;
	}

	.woocommerce-MyAccount-navigation a {
		border: 1px solid var(--wp--preset--color--sand);
	}

	/* The greeting is a whole sentence, so on a narrow screen it steps down a size. */
	body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
		font-size: var(--wp--preset--font-size--large);
	}
}