/* ==========================================================================
   STARTUDS COMPONENTS
   Shared building blocks that are not part of the core stylesheet: the
   built-in fallback footer columns, the theme credit line, the payment badge
   row and the newsletter subscribe form.

   Loaded after style.css (handle startuds-components, dependency
   startuds-style), so every design token declared there is available here.

   Rules:
   - No hardcoded colours. Every colour resolves to a theme token.
   - Mobile first. Wider layouts are additive, inside min-width queries.
   - Logical properties throughout, so RTL needs no overrides.
   - Visible :focus-visible rings, and motion respects the OS setting.

   CONTENTS
   1.  Local token fallbacks
   2.  Fallback footer columns
   3.  Footer address block
   4.  Theme credit line
   5.  Payment badge row
   6.  Newsletter form
   7.  Reduced motion
   ========================================================================== */

/* ==========================================================================
   1. LOCAL TOKEN FALLBACKS
   Declared only for tokens style.css does not define yet. Each one derives
   from an existing token, so a teammate adding a real definition upstream
   simply overrides these. No literal colour values are introduced.
   ========================================================================== */

:root {
	/* Hairlines and tints drawn over the dark footer surface. */
	--st-footer-border: rgba(255, 255, 255, .12);
	--st-footer-hairline: rgba(255, 255, 255, .18);
	--st-footer-overlay: rgba(255, 255, 255, .06);

	/* Form feedback states, aliased to the existing commerce tokens. */
	--st-success: var(--st-instock);
	--st-error: var(--st-outofstock);

	/* Focus ring appearance, shared by every interactive element here. */
	--st-focus-ring: var(--st-primary);
	--st-focus-width: 2px;
	--st-focus-offset: 2px;
}

/* ==========================================================================
   2. FALLBACK FOOTER COLUMNS
   The grid itself (1 -> 2 -> 4 columns) comes from .st-footer__cols in
   style.css. Everything below is the content inside a column.
   ========================================================================== */

.st-footer__fallback .st-fcol {
	min-width: 0;
}

/* --- Column headings ------------------------------------------------------
   Reuse .st-widget-title so the dash and underline title variants selected
   in the Customizer apply to the fallback columns unchanged. Only the
   spacing of the secondary heading needs adjusting.
   ------------------------------------------------------------------------ */

.st-footer__fallback .st-fcol__title {
	margin-block: 0 18px;
}

.st-footer__fallback .st-fcol__title--sub {
	margin-block-start: 28px;
}

/* The dash variant reads better tight to the text on a narrow column. */
.st-footer--titles-dash .st-fcol__title::after {
	margin-inline-start: 12px;
}

.st-footer--titles-underline .st-fcol__title {
	padding-block-end: 10px;
	border-block-end: 1px solid var(--st-footer-hairline);
}

/* --- Brand block ---------------------------------------------------------- */

.st-fcol__brand {
	margin-block-end: 18px;
}

.st-fcol__brand .custom-logo-link {
	display: inline-block;
	max-width: 220px;
}

.st-fcol__brand img {
	height: auto;
	max-width: 100%;
}

.st-fcol__site {
	color: var(--st-footer-heading);
	font-family: var(--st-font-heading);
	font-size: var(--st-size-h4);
	font-weight: var(--st-weight-heading);
	letter-spacing: var(--st-ls-heading);
	line-height: var(--st-lh-heading);
	text-decoration: none;
}

.st-fcol__site:hover,
.st-fcol__site:focus-visible {
	color: var(--st-primary);
}

.st-fcol__text {
	margin-block: 0 20px;
	max-width: 38ch;
	color: var(--st-footer-text);
	font-family: var(--st-font-body);
	font-size: var(--st-size-small);
	line-height: var(--st-lh-body);
}

/* --- Link lists ----------------------------------------------------------- */

.st-fcol__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.st-fcol__item {
	padding-block: 6px;
	font-size: var(--st-size-small);
	line-height: var(--st-lh-body);
}

.st-fcol__item a {
	display: inline-block;
	position: relative;
	color: var(--st-footer-text);
	text-decoration: none;
	transition: color var(--st-transition), transform var(--st-transition);
}

.st-fcol__item a::after {
	content: '';
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: -2px;
	width: 0;
	height: 1px;
	background: var(--st-primary);
	transition: width var(--st-transition);
}

.st-fcol__item a:hover,
.st-fcol__item a:focus-visible {
	color: var(--st-primary);
}

.st-fcol__item a:hover::after,
.st-fcol__item a:focus-visible::after {
	width: 100%;
}

.st-footer__fallback a:focus-visible,
.st-footer__fallback button:focus-visible {
	outline: var(--st-focus-width) solid var(--st-focus-ring);
	outline-offset: var(--st-focus-offset);
}

/* ==========================================================================
   3. FOOTER ADDRESS BLOCK
   ========================================================================== */

.st-fcol__address {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	color: var(--st-footer-text);
	font-family: var(--st-font-body);
	font-size: var(--st-size-small);
	font-style: normal;
	line-height: var(--st-lh-body);
}

.st-fcol__address-line {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.st-fcol__address-line .st-icon {
	flex: 0 0 auto;
	margin-block-start: 3px;
	color: var(--st-primary);
}

.st-fcol__address-line a {
	color: var(--st-footer-text);
	text-decoration: none;
	word-break: break-word;
	transition: color var(--st-transition);
}

.st-fcol__address-line a:hover,
.st-fcol__address-line a:focus-visible {
	color: var(--st-primary);
}

/* ==========================================================================
   4. THEME CREDIT LINE
   ========================================================================== */

.st-footer__credit {
	color: var(--st-footer-text);
	font-family: var(--st-font-body);
	font-size: var(--st-size-small);
	line-height: var(--st-lh-body);
	opacity: .85;
}

.st-footer__credit-link {
	color: var(--st-footer-heading);
	font-weight: 600;
	text-decoration: none;
	border-block-end: 1px solid var(--st-footer-hairline);
	transition: color var(--st-transition), border-color var(--st-transition);
}

.st-footer__credit-link:hover,
.st-footer__credit-link:focus-visible {
	color: var(--st-primary);
	border-block-end-color: var(--st-primary);
}

.st-footer__credit-link:focus-visible {
	outline: var(--st-focus-width) solid var(--st-focus-ring);
	outline-offset: var(--st-focus-offset);
}

/* ==========================================================================
   5. PAYMENT BADGE ROW
   Kept visually aligned with the credit and copyright lines in the bottom
   bar, which stacks on mobile and spreads on desktop.
   ========================================================================== */

.st-footer__bottom .st-payments {
	row-gap: 8px;
}

.st-footer__bottom .st-payments__item {
	border-radius: var(--st-radius);
	background: var(--st-footer-overlay);
	border-color: var(--st-footer-hairline);
	color: var(--st-footer-text);
}

@media (min-width: 992px) {

	.st-footer__bottom .st-payments {
		justify-content: flex-end;
	}
}

/* ==========================================================================
   6. NEWSLETTER FORM
   Stacked below 600px, inline input plus button above it.
   ========================================================================== */

.st-newsletter__form {
	width: 100%;
}

.st-nl {
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
	font-family: var(--st-font-body);
}

.st-nl__row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.st-nl__input {
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-input);
	background: var(--st-bg);
	color: var(--st-heading);
	font-family: var(--st-font-body);
	font-size: var(--st-size-body);
	line-height: var(--st-lh-body);
	transition: border-color var(--st-transition), box-shadow var(--st-transition);
}

.st-nl__input::placeholder {
	color: var(--st-muted);
	opacity: 1;
}

.st-nl__input:hover {
	border-color: var(--st-primary);
}

.st-nl__input:focus-visible {
	border-color: var(--st-primary);
	outline: var(--st-focus-width) solid var(--st-focus-ring);
	outline-offset: var(--st-focus-offset);
}

.st-nl__input:invalid:not(:placeholder-shown) {
	border-color: var(--st-error);
}

.st-nl__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: var(--st-btn-pad-y) var(--st-btn-pad-x);
	border: 1px solid var(--st-primary);
	border-radius: var(--st-radius);
	background: var(--st-primary);
	color: var(--st-on-primary);
	cursor: pointer;
	font-family: var(--st-font-button);
	font-size: var(--st-size-button);
	font-weight: var(--st-weight-button);
	letter-spacing: var(--st-ls-button);
	line-height: 1;
	text-transform: var(--st-tt-button);
	white-space: nowrap;
	transition: background var(--st-transition), border-color var(--st-transition), color var(--st-transition);
}

.st-nl__button:hover {
	background: var(--st-primary-hover);
	border-color: var(--st-primary-hover);
}

.st-nl__button:focus-visible {
	outline: var(--st-focus-width) solid var(--st-focus-ring);
	outline-offset: var(--st-focus-offset);
}

.st-nl__button[disabled],
.st-nl.is-busy .st-nl__button {
	cursor: progress;
	opacity: .65;
}

/* --- Honeypot: hidden from people, reachable by bots. --------------------- */

.st-nl__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Consent and feedback ------------------------------------------------- */

.st-nl__consent {
	margin-block: 12px 0;
	color: var(--st-muted);
	font-size: var(--st-size-small);
	line-height: var(--st-lh-body);
}

.st-nl__message {
	margin-block: 10px 0;
	font-size: var(--st-size-small);
	line-height: var(--st-lh-body);
}

.st-nl__message:empty {
	display: none;
}

.st-nl__message.is-success {
	color: var(--st-success);
	font-weight: 600;
}

.st-nl__message.is-error {
	color: var(--st-error);
	font-weight: 600;
}

/* --- On the dark footer surface ------------------------------------------- */

.st-footer .st-nl__consent {
	color: var(--st-footer-text);
}

.st-footer .st-nl__input {
	border-color: var(--st-footer-hairline);
	background: var(--st-footer-overlay);
	color: var(--st-footer-heading);
}

.st-footer .st-nl__input::placeholder {
	color: var(--st-footer-text);
}

/* --- Inline layout from the small-tablet breakpoint up -------------------- */

@media (min-width: 600px) {

	.st-nl__row {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
	}

	.st-nl__input {
		flex: 1 1 auto;
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}

	.st-nl__button {
		flex: 0 0 auto;
		border-start-start-radius: 0;
		border-end-start-radius: 0;
		margin-inline-start: -1px;
	}
}

@media (min-width: 992px) {

	.st-newsletter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
	}

	.st-newsletter__text {
		flex: 1 1 auto;
	}

	.st-newsletter__form {
		flex: 0 1 520px;
	}

	.st-nl {
		margin-inline: 0;
	}
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.st-fcol__item a,
	.st-fcol__item a::after,
	.st-fcol__address-line a,
	.st-footer__credit-link,
	.st-nl__input,
	.st-nl__button {
		transition: none;
	}
}