/*
 * Controls: one field, one solid pill, one quiet pill, for the whole site.
 *
 * WHY THIS FILE EXISTS. The same eight declarations - height, padding, family, size, ink, surface,
 * hairline, radius - were written out again in the shop forms, the catalogue search, the sort
 * select, the contact form, the access code box and the product page. Six copies of one decision:
 * change the radius and you change it six times, miss one and the site has two kinds of input.
 * The decision is made here once; a component only says WHICH elements play a role, and at most
 * how tall they are.
 *
 * HOW A COMPONENT CHANGES A SIZE. Not by redeclaring the look - by handing this file a value:
 *
 *   .akem-sort__select { --akem-control-h: 36px; }
 *
 * The role reads that variable and falls back to the site's 48px when nobody set it. Anything a
 * component still declares after that is a real exception, and it should say why in a comment.
 *
 * WHY SELECTOR LISTS RATHER THAN A CLASS ON EVERY ELEMENT. Half of these controls are printed by
 * WooCommerce and Blocksy, whose markup is not ours to put a class on. The list is the join: one
 * definition, many names for the same role.
 */

/* THE FIELD -----------------------------------------------------------------
   Anything a visitor types into or picks from. The number input inside a quantity stepper is left
   out on purpose: it is one part of a control, not a control. */

.akem-field,
.akem-search__field,
.akem-catalog-search__field,
.akem-sort__select,
.akem-contact input[type="text"],
.akem-contact input[type="email"],
.akem-contact select,
.akem-contact textarea,
.akem-code-form__field,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.woocommerce div.product table.variations select {
	min-height: var(--akem-control-h, var(--akem-control-height));
	padding-inline: var(--akem-space-3);
	font-family: var(--akem-font-text);
	font-size: var(--akem-size-body);
	color: var(--akem-ink);
	background: var(--akem-surface);
	border: 1px solid var(--akem-line);
	border-radius: var(--akem-radius);
}

.akem-contact textarea,
.woocommerce textarea {
	padding-block: var(--akem-space-2);
	line-height: var(--akem-leading-body);
	resize: vertical;
}

.akem-field:focus-visible,
.akem-search__field:focus-visible,
.akem-catalog-search__field:focus-visible,
.akem-sort__select:focus-visible,
.akem-contact input:focus-visible,
.akem-contact select:focus-visible,
.akem-contact textarea:focus-visible,
.akem-code-form__field:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible {
	outline: 3px solid var(--akem-blue-focus);
	outline-offset: 2px;
}

.akem-field::placeholder,
.akem-search__field::placeholder,
.akem-catalog-search__field::placeholder,
.akem-contact ::placeholder,
.woocommerce ::placeholder {
	color: var(--akem-grey);
}

/* THE SOLID PILL ------------------------------------------------------------
   The action the page is for: buy, send, sign in, choose a plan. Sentence case, never capitals.

   Every member is named. A blanket button[type="submit"] was tried here and it swallowed controls
   that are not pills at all - the magnifier in the header search came out as a black capsule with
   the word Search in it - and the chain of :not() needed to rescue them is the very thing this file
   exists to avoid. A button joins a role by being listed, not by being a button. */

.akem-pill,
.akem-catalog-search__submit,
.akem-sort__submit,
.akem-tile__add,
.akem-sticky__button,
.akem-contact__submit,
.akem-manual-payment__button,
.agen-plan__buy,
.agen-preorder__reserve,
.akem-code-form__submit,
.akem-gate__enter,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce .woocommerce-form-login__submit,
.woocommerce div.product form.cart .button,
.woocommerce a.checkout-button,
.ct-cart-content a.button.wc-backward,
.ct-cart-content .buttons a.button.checkout,
.wp-element-button,
.ct-button,
.woocommerce input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-height: var(--akem-control-h, var(--akem-control-height));
	padding-inline: var(--akem-space-5);
	font-family: var(--akem-font-text);
	font-size: var(--akem-size-small);
	font-weight: var(--akem-weight-label);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--akem-surface);
	background: var(--akem-action);
	border: 1px solid var(--akem-action);
	border-radius: var(--akem-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, opacity 0.25s ease;
}

.akem-pill:hover,
.akem-catalog-search__submit:hover,
.akem-sort__submit:hover,
.akem-sticky__button:hover,
.akem-contact__submit:hover,
.akem-manual-payment__button:hover,
.agen-plan__buy:hover,
.agen-preorder__reserve:hover,
.akem-code-form__submit:hover,
.akem-gate__enter:not([disabled]):hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .woocommerce-form-login__submit:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce a.checkout-button:hover,
.ct-cart-content a.button.wc-backward:hover,
.ct-cart-content .buttons a.button.checkout:hover,
.wp-element-button:hover,
.ct-button:hover,
.woocommerce input[type="submit"]:hover {
	color: var(--akem-surface);
	background: var(--akem-action-hover);
	border-color: var(--akem-action-hover);
}

/* THE QUIET PILL ------------------------------------------------------------
   Same shape, no weight: the second way out of a page. Apply coupon, update cart, view cart, the
   strength a buyer has not chosen yet. */

.akem-pill--quiet,
.akem-gate__leave,
.akem-tile__details,
.akem-strength__option,
.woocommerce div.product table.variations .akem-strength__option,
.akem-sticky__strength-option,
.ct-load-more,
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):not(.woocommerce-form-login__submit),
.ct-cart-content .buttons a.button:not(.checkout) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	min-height: var(--akem-control-h, var(--akem-control-height));
	padding-inline: var(--akem-space-4);
	font-family: var(--akem-font-text);
	font-size: var(--akem-size-small);
	font-weight: var(--akem-weight-label);
	letter-spacing: 0;
	text-transform: none;
	color: var(--akem-ink);
	background: var(--akem-surface);
	border: 1px solid var(--akem-line);
	border-radius: var(--akem-radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.25s ease;
}

.akem-pill--quiet:hover,
.akem-gate__leave:hover,
.akem-tile__details:hover,
.akem-strength__option:hover,
.woocommerce div.product table.variations .akem-strength__option:hover,
.akem-sticky__strength-option:hover,
.ct-load-more:hover,
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.checkout-button):not(.woocommerce-form-login__submit):hover,
.ct-cart-content .buttons a.button:not(.checkout):hover {
	color: var(--akem-ink);
	background: var(--akem-surface);
	border-color: var(--akem-ink);
}

/* A control the page is waiting on, whatever kind it is. */
.akem-pill[disabled],
.akem-pill--quiet[disabled],
.akem-gate__enter[disabled],
.akem-sticky__button.is-waiting,
.woocommerce .button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* THE CHECKBOX --------------------------------------------------------------
   A box a visitor ticks to agree. Drawn by the browser, tinted to the site's ink rather than the
   browser's blue, and sized so it sits on the first line of the text beside it. */

.akem-gate__confirm {
	width: 18px;
	height: 18px;
	margin: 0.15em 0 0;
	flex: 0 0 auto;
	accent-color: var(--akem-ink-strong);
	cursor: pointer;
}