/**
 * Achol Core — Custom Footer
 *
 * Loaded site-wide only when the Footer is enabled in Achol
 * Settings (see modules/footer/register-footer.php). Reuses the
 * same --achol-* CSS variables already defined in achol-blocks.css
 * and --achol-container-max-width from achol-header.css.
 */

.achol-footer {
	--achol-footer-bg: var(--achol-bg);
	--achol-footer-text: var(--achol-text-primary);
	--achol-footer-text-secondary: var(--achol-text-secondary);
	--achol-footer-border: var(--achol-border);
	--achol-footer-input-bg: var(--achol-surface);
}

.achol-footer--dark {
	--achol-footer-bg: #0D0D0D;
	--achol-footer-text: #F2F2F2;
	--achol-footer-text-secondary: #A3A3A3;
	--achol-footer-border: rgba(255, 255, 255, 0.08);
	--achol-footer-input-bg: rgba(255, 255, 255, 0.06);
}

.achol-footer {
	background-color: var(--achol-footer-bg);
	color: var(--achol-footer-text);
	position: relative;
	z-index: 1;
}

.achol-footer *,
.achol-footer *::before,
.achol-footer *::after {
	box-sizing: border-box;
}

.achol-footer a {
	color: inherit;
}

.achol-footer__inner {
	max-width: var(--achol-container-max-width, 1280px);
	margin: 0 auto;
	padding: 48px 20px 24px;
}

/* -----------------------------------------------------------------
 * Top grid: Brand column + nav/contact columns
 * ----------------------------------------------------------------- */

.achol-footer__top {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (min-width: 768px) {

	.achol-footer__top {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 24px;
	}
}

@media (min-width: 1024px) {

	.achol-footer__top {
		grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
		gap: 40px;
	}
}

/* -----------------------------------------------------------------
 * Brand area
 * ----------------------------------------------------------------- */

.achol-footer__brand-col {
	padding: 20px 0;
	border-bottom: 1px solid var(--achol-footer-border);
}

@media (min-width: 768px) {

	.achol-footer__brand-col {
		grid-column: 1 / -1;
		padding: 0 0 24px;
	}
}

@media (min-width: 1024px) {

	.achol-footer__brand-col {
		grid-column: auto;
		padding: 0;
		border-bottom: none;
	}
}

.achol-footer__logo .achol-header__logo-link {
	max-width: 140px;
}

.achol-footer--dark .achol-footer__logo .achol-header__logo-text {
	color: #FFFFFF;
}

.achol-footer__statement {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--achol-footer-text-secondary);
	max-width: 320px;
}

.achol-footer__social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.achol-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--achol-footer-border);
	color: var(--achol-footer-text);
	text-decoration: none;
}

.achol-footer__social-icon:hover,
.achol-footer__social-icon:focus-visible {
	background-color: var(--achol-primary);
	border-color: var(--achol-primary);
	color: var(--achol-secondary);
}

.achol-footer__social-icon:focus-visible {
	outline: 2px solid var(--achol-primary);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
 * Accordion columns (Shop / Customer Service / Important Links / Contact)
 *
 * Server-rendered with the `open` attribute on every column by
 * default — a safe, always-correct baseline with zero JavaScript
 * (every column simply stays expanded). achol-footer.js then
 * progressively enhances this on narrow screens only: it removes
 * `open` from each column on page load (and on resize across the
 * breakpoint), after which the browser's own native <details>
 * click-to-toggle takes over completely — no custom show/hide
 * logic is written for that interaction, only the initial state is
 * adjusted.
 * ----------------------------------------------------------------- */

.achol-footer__col {
	border-bottom: 1px solid var(--achol-footer-border);
}

.achol-footer__col-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
	min-height: 44px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--achol-footer-text);
	cursor: pointer;
	list-style: none;
}

.achol-footer__col-heading::-webkit-details-marker {
	display: none;
}

.achol-footer__col-heading::after {
	content: '+';
	font-size: 18px;
	font-weight: 400;
	color: var(--achol-footer-text-secondary);
	transition: transform 0.2s ease;
}

.achol-footer__col[open] > .achol-footer__col-heading::after {
	transform: rotate(45deg);
}

.achol-footer__col-heading:focus-visible {
	outline: 2px solid var(--achol-primary);
	outline-offset: 2px;
}

.achol-footer__col-body,
.achol-footer__contact-list {
	padding-bottom: 18px;
}

.achol-footer__col-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.achol-footer__col-list a {
	font-size: 14px;
	color: var(--achol-footer-text-secondary);
	text-decoration: none;
	display: inline-block;
	min-height: 24px;
}

.achol-footer__col-list a:hover,
.achol-footer__col-list a:focus-visible {
	color: var(--achol-primary);
}

@media (min-width: 1024px) {

	.achol-footer__col {
		border-bottom: none;
	}

	.achol-footer__col-heading {
		padding: 0 0 16px;
	}

	.achol-footer__col-body,
	.achol-footer__contact-list {
		padding-bottom: 0;
	}
}

/* -----------------------------------------------------------------
 * Contact rows
 * ----------------------------------------------------------------- */

.achol-footer__contact-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.achol-footer__contact-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--achol-footer-text-secondary);
	text-decoration: none;
	line-height: 1.5;
}

.achol-footer__contact-row:hover,
.achol-footer__contact-row:focus-visible {
	color: var(--achol-primary);
}

.achol-footer__contact-row svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--achol-primary);
}

/* -----------------------------------------------------------------
 * Newsletter
 * ----------------------------------------------------------------- */

.achol-footer__newsletter {
	margin-top: 24px;
}

.achol-footer__newsletter-heading {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--achol-footer-text);
}

.achol-footer__newsletter-subtext {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--achol-footer-text-secondary);
}

.achol-footer__newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 360px;
}

.achol-footer__newsletter-form input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px 12px;
	min-height: 44px;
	background-color: var(--achol-footer-input-bg);
	border: 1px solid var(--achol-footer-border);
	border-radius: 4px;
	color: var(--achol-footer-text);
	font-size: 14px;
}

.achol-footer__newsletter-form input[type="email"]::placeholder {
	color: var(--achol-footer-text-secondary);
}

.achol-footer__newsletter-form button {
	padding: 10px 18px;
	min-height: 44px;
	background-color: var(--achol-primary);
	color: var(--achol-secondary);
	border: none;
	border-radius: 4px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.achol-footer__newsletter-form button:hover,
.achol-footer__newsletter-form button:focus-visible {
	background-color: var(--achol-primary-hover);
}

.achol-footer__newsletter-form button:disabled {
	opacity: 0.6;
	cursor: default;
}

.achol-footer__newsletter-message {
	width: 100%;
	margin: 4px 0 0;
	font-size: 13px;
}

.achol-footer__newsletter-message.is-success {
	color: var(--achol-success);
}

.achol-footer__newsletter-message.is-error {
	color: var(--achol-danger);
}

/* -----------------------------------------------------------------
 * Trust / Payment badges
 * ----------------------------------------------------------------- */

.achol-footer__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 0;
	margin-top: 8px;
	border-top: 1px solid var(--achol-footer-border);
}

.achol-footer__trust-badge {
	padding: 6px 14px;
	border: 1px solid var(--achol-footer-border);
	border-radius: 999px;
	font-size: 12px;
	color: var(--achol-footer-text-secondary);
}

/* -----------------------------------------------------------------
 * Bottom bar: copyright + language switcher
 * ----------------------------------------------------------------- */

.achol-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding-top: 20px;
	margin-top: 8px;
	border-top: 1px solid var(--achol-footer-border);
}

@media (min-width: 768px) {

	.achol-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.achol-footer__copyright {
	margin: 0;
	font-size: 13px;
	color: var(--achol-footer-text-secondary);
}

/* Language switcher readability override for the dark theme — the
 * shared .achol-language-switcher component (achol-blocks.css) uses
 * text-color tokens tuned for a light background by default. */
.achol-footer--dark .achol-language-switcher__btn {
	color: var(--achol-footer-text-secondary);
}

.achol-footer--dark .achol-language-switcher__btn:hover,
.achol-footer--dark .achol-language-switcher__btn:focus,
.achol-footer--dark .achol-language-switcher__btn.is-active {
	color: #FFFFFF;
}

.achol-footer--dark .achol-language-switcher__divider {
	color: var(--achol-footer-border);
}