/**
 * Pelagia Book Store — Footer Styles (Premium Editorial Redesign)
 *
 * Design language: Apple-style minimalism × independent bookstore editorial.
 * Background:      Terracotta (#B3492F) — overridden via --color-footer-bg CSS var.
 * Pattern:         Layered CSS organic gradients + diagonal line textures (5–10% opacity).
 *
 * Layout — 3 columns (desktop) → 3 cols (tablet) → 1 col (mobile):
 *   Col 1 (brand):   Logo · Description · Address · Email · Phone · Social icons
 *   Col 2 (nav):     Quick Links
 *   Col 3 (nav):     Customer Service
 * Bottom bar:        Copyright · Privacy Policy · Terms & Conditions
 *
 * NOTE: All selectors are scoped to .site-footer to win against
 *       base.css global rules (p colour, heading colour, link colour, etc.).
 *
 * Typography:
 *   All text — NB Akademie Std (self-hosted, var(--font-family))
 *              Regular 400 · Italic 400 · Medium 500 · Bold 700
 *
 * @package Pelagia
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ROOT — site-footer wrapper
   ═══════════════════════════════════════════════════════════════════════════ */
.site-footer {
	position:         relative;
	background-color: #B3492F;
	color:            #ffffff;
	overflow:         hidden;
	font-family:      var(--font-family);
	-webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL BASE OVERRIDES — scoped to footer
   Fixes: base.css sets p, h*, a, img to dark colours that bleed into footer.
   ───────────────────────────────────────────────────────────────────────── */

/* Paragraphs */
.site-footer p {
	color:         rgba(255, 255, 255, 0.80);
	margin-bottom: 0;
	font-size:     inherit;
	line-height:   inherit;
}

/* Headings — base.css sets color: var(--color-secondary) navy */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
	color: #ffffff;
}

/* Links — base.css sets color: var(--color-primary-text) dark terracotta */
.site-footer a {
	color:           rgba(255, 255, 255, 0.80);
	text-decoration: none;
	transition:      color 200ms ease;
}

.site-footer a:hover {
	color: #ffffff;
}

.site-footer a:focus-visible {
	outline:        2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
	border-radius:  2px;
}

/* Images — base.css sets height: auto which fights our fixed logo height */
.site-footer img {
	height: auto; /* we override per-element below */
}

/* SVG inline icons — base.css sets display:block which breaks inline icon alignment */
.site-footer svg {
	display: inline-block;
	vertical-align: middle;
}

/* UL/OL — base.css strips list-style, which is fine; ensure no ghost margins */
.site-footer ul,
.site-footer ol {
	list-style: none;
	margin:     0;
	padding:    0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABSTRACT BACKGROUND PATTERN (pure CSS)
   Seven layered gradients — organic blobs + line textures, 5–10% opacity.
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-bg-pattern {
	position:       absolute;
	inset:          0;
	pointer-events: none;
	z-index:        0;
	background:
		/* 1 — large warm organic blob, top-left */
		radial-gradient(
			ellipse 75% 60% at 5% 8%,
			rgba(255, 210, 170, 0.08) 0%,
			transparent 60%
		),
		/* 2 — warm glow arc, top-right */
		radial-gradient(
			ellipse 55% 45% at 95% 12%,
			rgba(255, 190, 140, 0.07) 0%,
			transparent 55%
		),
		/* 3 — deep shadow depth orb, bottom-right */
		radial-gradient(
			ellipse 60% 50% at 92% 92%,
			rgba(0, 0, 0, 0.12) 0%,
			transparent 60%
		),
		/* 4 — mid depth shadow, bottom-left */
		radial-gradient(
			ellipse 50% 40% at 8% 88%,
			rgba(0, 0, 0, 0.09) 0%,
			transparent 55%
		),
		/* 5 — soft circular accent, centre */
		radial-gradient(
			circle 35% at 50% 50%,
			rgba(255, 160, 100, 0.04) 0%,
			transparent 65%
		),
		/* 6 — diagonal fine lines (primary) */
		repeating-linear-gradient(
			-52deg,
			rgba(255, 255, 255, 0.028) 0px,
			rgba(255, 255, 255, 0.028) 1px,
			transparent 1px,
			transparent 30px
		),
		/* 7 — counter-diagonal lines (depth) */
		repeating-linear-gradient(
			40deg,
			rgba(0, 0, 0, 0.018) 0px,
			rgba(0, 0, 0, 0.018) 1px,
			transparent 1px,
			transparent 48px
		);
}


/* All direct children of .site-footer stack above the pattern */
.site-footer > * {
	position: relative;
	z-index:  1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER — scoped to footer (avoids relying on global .container)
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-container {
	width:      100%;
	max-width:  var(--container-max, 1280px);
	margin:     0 auto;
	padding:    0 clamp(1.5rem, 5vw, 5rem);
	box-sizing: border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN SECTION — Row 1
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-main {
	padding-top:    clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4-ROW STACKED
   ───────────────────────────────────────────────────────────────────────── */
.footer-stack {
	display:               flex;
	flex-direction:        column;
	align-items:           center;
	text-align:            center;
	gap:                   1.5rem; /* tight stacked layout */
}

/* ─────────────────────────────────────────────────────────────────────────────
   COLUMN BASE
   ───────────────────────────────────────────────────────────────────────── */
.footer-col {
	display:        flex;
	flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLUMN 1 — Brand & Contact
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-col--brand {
	gap: 0;
	align-items: center;
}

/* ── Centered Logo ──────────────────────────────────────────────────────── */
.footer-centered-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 0;
}

.footer-centered-logo .footer-logo,
.footer-centered-logo .custom-logo {
	display: block;
	height: 120px !important; /* Made significantly larger */
	width: auto !important;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.footer-logo-text {
	font-family: var(--font-family);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 600;
	color: #ffffff;
	line-height: 1;
	text-align: center;
}

/* ── Brand Layout ──────────────────────────────────────────────────────── */
.footer-brand__header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.footer-brand__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.15rem;
	min-width: 0; /* allows text truncation if needed */
}

.footer-brand__site-name {
	display: block;
	font-family: var(--font-family);
	font-size: clamp(1.2rem, 2.5vw, 1.45rem);
	font-weight: 800; /* Extra bold */
	color: #ffffff;
	letter-spacing: 0.05em;
	line-height: 1.1;
	text-transform: uppercase;
}

/* ── Brand description ─────────────────────────────────────────────────── */
.site-footer .footer-brand__desc {
	font-size: 0.95rem;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* ── Contact block ─────────────────────────────────────────────────────── */
.footer-contact {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.65rem;
	font-style:     normal;
	margin-bottom:  1.75rem;
}

/* Contact rows (span + <a>) — share the same appearance */
.site-footer .footer-contact__row {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0.6rem;
	font-size:       0.875rem;        /* 14px */
	line-height:     1.6;
	color:           rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition:      color 200ms ease;
}

.site-footer a.footer-contact__row:hover {
	color: #ffffff;
}

.footer-contact__icon {
	flex-shrink:   0;
	margin-top:    0.15rem;
	opacity:       0.65;
	color:         inherit;
	width:         14px;
	height:        14px;
	display:       inline-block !important; /* override base.css display:block */
}

/* ── Social icons ──────────────────────────────────────────────────────── */
.footer-social {
	display:   flex;
	gap:       0.625rem;
	flex-wrap: wrap;
	justify-content: center;
}

.site-footer .footer-social__link {
	display:          inline-flex !important;
	align-items:      center;
	justify-content:  center;
	width:            40px;
	height:           40px;
	border-radius:    50%;
	border:           1.5px solid rgba(255, 255, 255, 0.28);
	color:            rgba(255, 255, 255, 0.85);
	text-decoration:  none;
	transition:
		color            200ms ease,
		border-color     200ms ease,
		background-color 200ms ease,
		transform        200ms ease;
}

.site-footer .footer-social__link svg {
	width:   16px;
	height:  16px;
	display: block !important;
	flex-shrink: 0;
}

.site-footer .footer-social__link:hover {
	color:            #ffffff;
	border-color:     rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 0.12);
	transform:        translateY(-3px);
}

.site-footer .footer-social__link:focus-visible {
	outline:        2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLUMNS 2 & 3 — Navigation
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-col--nav {
	padding-top: 0.125rem; /* optical alignment */
}

/* ── Nav heading ──────────────────────────────────────────────────────── */
.site-footer .footer-nav__heading {
	font-family:     var(--font-family);
	font-size:       1.0625rem;       /* 17px */
	font-weight:     600;
	letter-spacing:  0.01em;
	color:           #ffffff;
	line-height:     1.3;
	margin:          0 0 0.5rem;
	padding-bottom:  0;
	border-bottom:   none;
}

/* ── Nav list ─────────────────────────────────────────────────────────── */
.site-footer .footer-nav {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem; /* much tighter horizontal spacing */
}

.site-footer .footer-nav > li {
	/* border removed for horizontal layout */
}

.site-footer .footer-nav > li:last-child {
	/* no-op */
}

.site-footer .footer-nav > li > a {
	display:         inline-flex;
	align-items:     center;
	min-height:      32px;
	font-size:       0.9375rem;       /* 15px */
	font-weight:     400;
	color:           rgba(255, 255, 255, 0.75);
	text-decoration: none;
	padding:         0.45rem 0;
	letter-spacing:  0.005em;
	position:        relative;
	transition:      color 200ms ease;
}

/* Underline slide-in effect (matches legal links) */
.site-footer .footer-nav > li > a::after {
	content:          '';
	position:         absolute;
	bottom:           2px;
	left:             0;
	width:            0;
	height:           1px;
	background-color: rgba(255, 255, 255, 0.50);
	transition:       width 200ms ease;
}

.site-footer .footer-nav > li > a:hover {
	color: #ffffff;
}

.site-footer .footer-nav > li > a:hover::after {
	width: 100%;
}

.site-footer .footer-nav > li > a:focus-visible {
	outline:        2px solid rgba(255, 255, 255, 0.85);
	outline-offset: 2px;
	border-radius:  2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding:    1.25rem 0;
}

.footer-bottom__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             0.75rem;
}

/* ── Copyright ─────────────────────────────────────────────────────────── */
.site-footer .footer-copyright {
	font-size:   0.8125rem;           /* 13px */
	color:       rgba(255, 255, 255, 0.55);
	margin:      0;
	line-height: 1.5;
}

.site-footer .footer-copyright a {
	color:      rgba(255, 255, 255, 0.70);
	transition: color 200ms ease;
}

.site-footer .footer-copyright a:hover {
	color: #ffffff;
}

/* ── Legal nav ─────────────────────────────────────────────────────────── */
.footer-legal {
	display:     flex;
	align-items: center;
	gap:         1.25rem;
	flex-wrap:   wrap;
}

.site-footer .footer-legal__link {
	font-size:       0.8125rem;       /* 13px */
	color:           rgba(255, 255, 255, 0.55);
	text-decoration: none;
	letter-spacing:  0.01em;
	position:        relative;
	transition:      color 200ms ease;
}

/* Underline slide-in */
.site-footer .footer-legal__link::after {
	content:          '';
	position:         absolute;
	bottom:           -2px;
	left:             0;
	width:            0;
	height:           1px;
	background-color: rgba(255, 255, 255, 0.50);
	transition:       width 200ms ease;
}

.site-footer .footer-legal__link:hover {
	color: rgba(255, 255, 255, 0.90);
}

.site-footer .footer-legal__link:hover::after {
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile (Simplified for stacked layout)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	.footer-brand__logo .footer-logo,
	.footer-brand__logo .custom-logo {
		height: 44px !important;
	}

	.site-footer .footer-brand__desc {
		max-width: 100%;
	}
}

@media (max-width: 860px) {
	.site-footer .footer-brand__desc {
		max-width: 60ch;
	}
}

@media (max-width: 600px) {
	.footer-main {
		padding-top:    2.75rem;
		padding-bottom: 2rem;
	}

	.site-footer .footer-brand__desc {
		max-width: 100%;
	}

	.footer-bottom__inner {
		flex-direction:  column;
		align-items:     center;
		justify-content: center;
		text-align:      center;
		gap:             0.5rem;
	}

	.footer-legal {
		justify-content: center;
	}
}