/*
 * styles/footer.css
 * [lc_footer] shortcode styling — newsletter band, 4-column link
 * grid (accordion on mobile), and bottom bar. Depends on the --lc-*
 * tokens declared in styles/tokens.css.
 */

.lc-footer {
	background: var(--lc-surface);
	color: var(--lc-text);
	border-top: 1px solid var(--lc-border-default);
	margin-top: 3rem;
}

.lc-footer-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 56px 20px 34px;
}

/* ─────────────────────────────
   NEWSLETTER BAND (full-width, above the columns)
   ───────────────────────────── */

.lc-footer-newsletter-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.lc-footer-newsletter-title {
	font-family: var(--lc-font-serif);
	font-size: 26px;
	color: var(--lc-text);
	flex-shrink: 0;
}

.lc-footer-form {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1 1 320px;
	max-width: 480px;
	border-bottom: 1px solid var(--lc-border-default);
	padding-bottom: 10px;
}

.lc-footer-input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--lc-font-serif);
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--lc-text);
}

.lc-footer-input::placeholder {
	color: var(--lc-text);
	opacity: 0.5;
}

.lc-footer-submit {
	border: none;
	background: none;
	cursor: pointer;
	font-family: var(--lc-font-display);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.85;
	color: var(--lc-text);
	transition: opacity 0.2s ease;
}

.lc-footer-submit:hover {
	opacity: 1;
}

/* Spam trap — also used by the newsletter entry popup (newsletter.css).
   !important so no form-reset rule can ever reveal it. */
.lc-footer-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.lc-footer-divider {
	height: 1px;
	background: var(--lc-border-default);
	margin: 40px 0 44px;
}

/* ─────────────────────────────
   LINK GRID — base rules (desktop 4-column default)
   ───────────────────────────── */

.lc-footer-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 54px;
}

.lc-footer-coltitle {
	font-family: var(--lc-font-serif);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 11px;
	opacity: 0.7;
	margin-bottom: 16px;
}

/* .lc-footer-accordion-trigger's `font: inherit;` reset (below) shares
   equal specificity with .lc-footer-coltitle and comes later in the
   file, so it was winning and wiping out the coltitle typography on
   "Shop" / "La Gioielleria" (real <button> triggers) — while "Legal" /
   "Privacy" (plain <div>s, never touched by the button reset) kept the
   correct small-caps look. This combined selector has higher
   specificity than either rule alone, so it wins regardless of order. */
.lc-footer-coltitle.lc-footer-accordion-trigger {
	font-family: var(--lc-font-serif);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.7;
}

.lc-footer-links {
	display: grid;
	gap: 10px;
}

.lc-footer-links a {
	text-decoration: none;
	color: inherit;
	font-family: var(--lc-font-serif);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.82;
	transition: opacity 0.2s ease;
}

.lc-footer-links a:hover {
	opacity: 1;
}

/* --- Accordion trigger button reset --- */

.lc-footer-accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	color: inherit;
	text-align: left;
}

.lc-footer-accordion-icon {
	font-size: 14px;
	opacity: 0.6;
}

/* THE actual "dropdowns don't work" bug: a plain [hidden] boolean
   attribute is only hidden by the browser's own built-in stylesheet
   (`[hidden] { display: none }`), and that built-in stylesheet always
   loses to ANY author rule of equal-or-higher specificity, regardless
   of source order — it doesn't matter that [hidden] "sounds like" it
   should win. .lc-footer-links sets `display: grid` and
   .lc-footer-legalprivacy-cols sets `display: grid` too, both authored
   rules, so a closed panel's `hidden` attribute was being silently
   ignored and the content rendered anyway even while the trigger
   correctly showed its "+" (collapsed) icon. This rule's selector
   (class + attribute) has higher specificity than those two
   class-only rules, so it actually wins and genuinely hides a closed
   panel. Must stay OUTSIDE the desktop media query below, which has
   its own opposite override (forcing panels visible on desktop). */
.lc-footer-accordion-panel[hidden] {
	display: none;
}

/* Base (mobile-first-safe) state for the merged Legal & Privacy
   accordion panel: stacked as one column by default. The desktop
   override below replaces this with `display: contents` so its two
   inner columns become independent items in the parent 4-col grid —
   this rule MUST stay ABOVE that override in source order, since both
   share equal specificity and CSS resolves ties by source order, not
   by which media query is "more specific." Getting this backwards is
   exactly the bug that shipped once already — DO NOT move the desktop
   override block above this rule. */
.lc-footer-legalprivacy-cols {
	display: grid;
	gap: 28px;
	margin-top: 16px;
}

/* ─────────────────────────────
   DESKTOP OVERRIDE — must come AFTER all base rules above, so it
   wins the cascade at ≥901px despite equal selector specificity.
   ───────────────────────────── */

@media (min-width: 901px) { /* System breakpoint: desktop */
	/* The Legal & Privacy wrapper is one accordion item on mobile,
	   but on desktop its two inner columns should sit as independent
	   grid items (giving the 4-equal-columns layout) rather than as
	   a single nested block — display: contents removes the wrapper
	   from layout while keeping its children as direct participants
	   in the parent grid. */
	.lc-footer-legalprivacy {
		display: contents;
	}
	.lc-footer-legalprivacy > .lc-footer-accordion-trigger {
		display: none;
	}
	.lc-footer-legalprivacy-cols {
		display: contents;
	}

	/* On desktop every column is always visible — the trigger becomes
	   a static heading, not an interactive control. */
	.lc-footer-accordion-trigger {
		cursor: default;
		pointer-events: none;
	}
	.lc-footer-accordion-icon {
		display: none;
	}
	.lc-footer-accordion-panel[hidden] {
		display: block !important;
	}

	/* The two exceptions: these elements are ALSO accordion panels (so
	   they match the [hidden] rule above), but they need a different
	   display value on desktop than plain "block" — nav needs its grid
	   layout back, and the legal/privacy wrapper needs to stay
	   `contents` so its two inner columns remain independent grid items.
	   Higher specificity (two classes + attribute) than the generic
	   `.lc-footer-accordion-panel[hidden]` rule above, so these win. */
	.lc-footer-links.lc-footer-accordion-panel[hidden] {
		display: grid !important;
	}
	.lc-footer-legalprivacy-cols.lc-footer-accordion-panel[hidden] {
		display: contents !important;
	}
}

/* ─────────────────────────────
   RESPONSIVE — tablet/mobile
   ───────────────────────────── */

@media (max-width: 1180px) {
	.lc-footer-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: 36px;
	}
}

@media (max-width: 900px) { /* System breakpoint: mobile */
	.lc-footer-container {
		padding: 40px 20px 28px;
	}

	/* ── Newsletter band — stacked, full-width, roomier touch target.
	   The title sits above the form instead of squeezed beside it,
	   and the input/button pair gets a filled surface + real padding
	   instead of the desktop version's bare underline row, so it
	   reads as an actual input field on a small screen. ── */
	.lc-footer-newsletter-band {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
	}

	.lc-footer-newsletter-title {
		font-size: 22px;
	}

	.lc-footer-form {
		/* Reset the desktop "flex: 1 1 320px" — that 320px basis was
		   meant as a minimum WIDTH for a flex ROW. .lc-footer-newsletter-band
		   switches to flex-direction: column right above, which rotates
		   the main axis to vertical, so that same 320px basis (plus
		   flex-grow: 1) was being applied as a minimum HEIGHT instead —
		   the form stretched to fill the column and left a tall blank
		   gap around the input/button. flex: none restores a normal
		   content-sized box. */
		flex: none;
		max-width: 100%;
		width: 100%;
		gap: 0;
		border-bottom: none;
		padding-bottom: 0;
		background: var(--lc-bg);
		border: 1px solid var(--lc-border-default);
	}

	.lc-footer-input {
		padding: 15px 16px;
		/* Must be >= 16px — iOS Safari auto-zooms the whole page on
		   focus for any input with a smaller computed font-size. */
		font-size: 16px;
	}

	.lc-footer-submit {
		flex-shrink: 0;
		padding: 15px 18px;
		border-left: 1px solid var(--lc-border-default);
		opacity: 1;
	}

	.lc-footer-divider {
		margin: 32px 0 8px;
	}

	.lc-footer-grid {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	/* ── Accordion rows — bigger tap target, clearer pressed state.
	   The trigger button gets real vertical padding of its own
	   (rather than relying on the wrapper's padding alone) so the
	   whole row is tappable, not just the text baseline. ── */
	.lc-footer-col,
	.lc-footer-legalprivacy {
		border-bottom: 1px solid var(--lc-border-subtle);
		padding: 0;
	}

	.lc-footer-col .lc-footer-accordion-trigger,
	.lc-footer-legalprivacy .lc-footer-accordion-trigger {
		padding: 18px 2px;
		min-height: 24px;
	}

	.lc-footer-coltitle.lc-footer-accordion-trigger {
		font-size: 13px;
		opacity: 0.9;
	}

	.lc-footer-accordion-icon {
		font-size: 16px;
		line-height: 1;
		width: 18px;
		text-align: center;
	}

	.lc-footer-accordion-panel {
		margin-top: 0;
		padding-bottom: 20px;
	}

	.lc-footer-legalprivacy-cols {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.lc-footer-legalprivacy-cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ─────────────────────────────
   BOTTOM BAR
   ───────────────────────────── */

.lc-footer-bottom {
	margin-top: 42px;
	padding-top: 28px;
	border-top: 1px solid var(--lc-border-default);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.lc-footer-brandmark {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Footer owns the monogram's size on every page. The two-class selector
   is deliberate: WooCommerce's `.woocommerce img, .woocommerce-page img
   { height: auto; max-width: 100% }` (0,1,1) beats a single class, and on
   shop/product/category/cart/account pages it reset this SVG to its
   intrinsic 184×208px. Height drives the size; width follows the artwork's
   own aspect ratio (≈ 26.5px). */
.lc-footer-brandmark .lc-footer-logo-mark {
	display: block;
	flex: 0 0 auto;
	height: 30px;
	width: auto;
	max-width: none;
	opacity: 0.92;
}

.lc-footer-brandname {
	font-family: var(--lc-font-display);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lc-text);
	opacity: 0.85;
}

.lc-footer-copyright {
	font-family: var(--lc-font-serif);
	font-size: 12px;
	letter-spacing: 0.06em;
	opacity: 0.78;
}

.lc-footer-social {
	display: flex;
	align-items: center;
	gap: 14px;
}

.lc-footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.65;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.lc-footer-social-link:hover {
	opacity: 1;
	transform: translateY(-1px);
}

@media (max-width: 800px) {
	.lc-footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* ── Focus states ──
   Same treatment as the header and mobile menu: remove the browser's
   heavy default outline, replace with a subtle branded one that only
   shows on keyboard focus, not on mouse click. */
.lc-footer-links a,
.lc-footer-input,
.lc-footer-submit,
.lc-footer-social-link,
.lc-footer-accordion-trigger {
	outline: none;
	border-radius: 2px;
}

.lc-footer-links a:focus-visible,
.lc-footer-input:focus-visible,
.lc-footer-submit:focus-visible,
.lc-footer-social-link:focus-visible,
.lc-footer-accordion-trigger:focus-visible {
	outline: var(--lc-focus-width) solid var(--lc-focus-color);
	outline-offset: var(--lc-focus-offset);
}