/**
 * Global site footer — brand, link columns, bottom bar.
 *
 * See project-docs/05-components.md for the full spec.
 */

.ed-site-footer {
	background-color: var(--ed-color-graphite);
	color: var(--ed-color-graphite-muted);
}

/* -------------------------------------------------------------------- */
/* Top section: brand + navigation columns                               */
/* -------------------------------------------------------------------- */

.ed-footer-top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-space-xl);
	padding-block-start: var(--ed-space-2xl);
	padding-block-end: var(--ed-space-xl);
}

/*
 * Core's "flow" layout support adds a `margin-top` blockGap between stacked
 * children (wp-block-group-is-layout-flow > * + *) — vestigial once this
 * group is switched to a flex row; it otherwise misaligns the wrapped
 * mobile layout. Verified via computed styles, not assumed.
 */
.ed-footer-top > * {
	margin-block: 0;
}

.ed-footer-brand {
	flex: 1 1 240px;
	max-width: 340px;
}

.ed-footer-brand .ed-logo__main {
	color: #ffffff;
}

.ed-footer-brand__accent {
	display: block;
	width: 32px;
	height: 2px;
	margin-top: var(--ed-space-sm);
	background-color: var(--ed-color-primary);
	border-radius: var(--ed-radius-full);
}

.ed-footer-brand__text {
	margin: var(--ed-space-sm) 0 0;
	max-width: 30ch;
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-sm);
	line-height: 1.6;
}

.ed-footer-nav {
	flex: 2 1 480px;
}

.ed-footer-nav__columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ed-space-lg);
}

/*
 * .ed-footer-col is a <details> element (native accordion below 768px —
 * see the Mobile section) that ships with the `open` attribute, so a
 * no-JS/failed-JS visitor at any width always sees the full expanded
 * column list — identical to this component's pre-accordion behavior.
 * Only the Mobile section below turns it into an interactive disclosure;
 * at this base/desktop level it renders as a plain static block.
 */
.ed-footer-col__summary {
	display: block;
	cursor: default;
	list-style: none;
}

.ed-footer-col__summary::-webkit-details-marker {
	display: none;
}

/*
 * Explicit font-family + weight: this carries heading semantics (the
 * parent <summary role="heading" aria-level="2">), but is a small
 * UI-style label, not an editorial display heading — pin it to
 * Montserrat rather than inheriting theme.json's serif H2. 600, not 700:
 * only 400/500/600 Montserrat weights are self-hosted (see theme.json);
 * 700 here would trigger synthetic/faux bold. Uppercase + tracking + a
 * subtle divider give each column a defined, editorial-confident header —
 * v2 polish pass, addressing the "feels sparse" note on the single-item
 * Productos column by making every column read as a deliberate section,
 * not accidentally short.
 */
.ed-footer-col__title {
	margin: 0 0 var(--ed-space-sm);
	padding-bottom: var(--ed-space-2xs);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	color: #ffffff;
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ed-footer-col__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-xs);
}

.ed-footer-col__list a {
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-sm);
	line-height: var(--ed-line-height-body);
	text-decoration: none;
	transition: color var(--ed-transition-fast);
}

.ed-footer-col__list a:hover {
	color: var(--ed-color-primary);
}

.ed-footer-col__list a:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: var(--ed-focus-outline-offset);
}

/* -------------------------------------------------------------------- */
/* Bottom bar                                                            */
/* -------------------------------------------------------------------- */

.ed-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ed-footer-bottom__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-sm);
	padding-block-start: var(--ed-space-md);
	/*
	 * Extra reserved bottom clearance: back-to-top is fixed bottom-left,
	 * and .ed-container is only inset from the viewport edge by its own
	 * centering margin — which is 0 below ~1280px (container fills the
	 * viewport). Without this, the fixed button sits directly over this
	 * bar's left-aligned text at true page-bottom scroll. Verified via
	 * bounding-rect overlap checks at 360–1200px, not assumed. Removed
	 * above 1280px, where the centered container margin already clears it.
	 */
	padding-block-end: calc(var(--ed-space-md) + 4.5rem);
}

@media (min-width: 1280px) {
	.ed-footer-bottom__inner {
		padding-block-end: var(--ed-space-md);
	}
}

/*
 * Same vestigial blockGap margin as .ed-footer-top > * above — this group
 * is switched to a flex row via .ed-footer-bottom__inner, but core's flow
 * layout still adds a margin-top between its wp:html children. Verified
 * via computed styles, not assumed.
 */
.ed-footer-bottom__inner > * {
	margin-block: 0;
}

.ed-footer-bottom__legal {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-3xs);
}

.ed-footer-bottom__copy,
.ed-footer-bottom__tag {
	margin: 0;
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-xs);
}

/* -------------------------------------------------------------------- */
/* Payment / trust badges — de-emphasized, text-only, no scraped/          */
/* copyrighted brand artwork. See                                          */
/* project-docs/10-header-footer-competitor-research.md section I.2.       */
/*                                                                          */
/* .ed-footer-trust groups payment methods and the SSL security badge      */
/* visually, but keeps them semantically separate: SSL is a security/      */
/* encryption claim, not a payment method, so it sits outside              */
/* .ed-footer-payment's own list and aria-label ("Métodos de pago          */
/* aceptados") rather than being mislabeled as one.                        */
/* -------------------------------------------------------------------- */

.ed-footer-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ed-space-sm);
}

.ed-footer-trust__label {
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ed-footer-payment {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ed-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-footer-payment__badge {
	/*
	 * 0.35, not a lower alpha: hand-computed against --ed-color-graphite
	 * (#14181A) per WCAG 2.2's non-text-contrast formula — this is the
	 * lowest round alpha that clears the 3:1 floor (~3.2:1; 0.18 measured
	 * ~1.75:1). Purely a decorative pill outline — the badge text itself
	 * is AA-compliant independent of this border.
	 */
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--ed-radius-sm);
	padding: 0.25rem 0.5rem;
	color: var(--ed-color-graphite-muted);
	font-size: var(--ed-font-size-xs);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* Mobile                                                                 */
/* -------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ed-footer-nav__columns {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/*
	 * Native <details>/<summary> accordion, mobile only — replaces the
	 * "endless vertical column" problem flagged in the old EstoresDirecto
	 * footer (and still present on cortinas.es's own mobile footer). Zero
	 * custom accordion JS: <details> provides toggle behavior, keyboard
	 * operability, and expanded/collapsed state natively. See
	 * project-docs/10-header-footer-competitor-research.md section I.1.
	 * Desktop/tablet (≥768px) are untouched — .ed-footer-col__summary's
	 * base rules above already render as a plain static block there.
	 */
	.ed-footer-col {
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ed-footer-col:last-child {
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ed-footer-col__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ed-space-sm);
		padding-block: var(--ed-space-sm);
		min-height: 44px;
		cursor: pointer;
	}

	.ed-footer-col__summary:focus-visible {
		outline: var(--ed-focus-outline);
		outline-offset: var(--ed-focus-outline-offset);
	}

	.ed-footer-col__title {
		margin: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.ed-footer-col__summary::after {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--ed-color-graphite-muted);
		border-bottom: 2px solid var(--ed-color-graphite-muted);
		transform: rotate(45deg);
		transition: transform var(--ed-transition-fast);
	}

	.ed-footer-col[open] > .ed-footer-col__summary::after {
		transform: rotate(-135deg);
	}

	.ed-footer-col__list {
		padding-block-end: var(--ed-space-md);
	}

	.ed-footer-bottom__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-footer-col__summary::after {
		transition: none;
	}
}

@media (max-width: 1023px) and (min-width: 768px) {
	.ed-footer-nav__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}