/**
 * footer.css — the site footer.
 *
 * WHY THIS IS ITS OWN FILE. The footer was eight rules at the bottom of
 * layout.css, which was the right size for the footer it described: a menu and
 * a copyright. It is four columns, a contact block, a payment strip and a
 * bottom bar now, which is a component, and every component in this theme has a
 * file (header.css, search.css, cart.css, hero.css …). layout.css keeps a note
 * where the old rules were.
 *
 * IT REPRODUCES bedishop.ge, the shop this site replaces: policies, about,
 * customer links, contact — then the accepted-payment strip, then copyright.
 * An earlier pass of this file invented its own column set (brand, categories,
 * information, contact), which was a reasonable shop footer and not the one the
 * client has been reviewing against.
 *
 * WIDTH AND GUTTER COME FROM base.css AND ARE NOT RESTATED. `.bedi-footer__inner`
 * carries `.bedi-container`, so its measure is --bedi-content-width and its
 * inset is --bedi-gutter — the same two the header bar, the hero band and the
 * page content use. Nothing in this file declares a max-width or a
 * padding-inline for the page, deliberately: that is how the old footer ended up
 * a different width from the header above it.
 *
 * IT IS LIGHT, NOT DARK. A dark footer is the obvious choice and it is the wrong
 * one here — the page is white now (base.css), the utility bar at the top is the
 * only dark band on the page, and a second one at the bottom would frame the
 * content in a way nothing in the design asks for. The separation is a hairline
 * and a tinted surface, same as every other raised surface in the theme.
 *
 * Sections
 *   1. The band and the column grid
 *   2. Column contents — lists, icon lists, contact
 *   3. Payment strip
 *   4. Bottom bar, credit and back-to-top
 *   5. Narrow, reduced motion, forced colours, print
 */

/* =========================================================================
 * 1. THE BAND AND THE GRID
 *
 * `margin-block-start: auto` on a flex child of `.bedi-site` (min-height 100svh)
 * is what pins the footer to the bottom of a short page without a fixed
 * position and without `calc(100vh - …)` arithmetic that breaks the moment the
 * header height changes.
 * ====================================================================== */

/*
 * WHITE, AND THE HAIRLINE IS THE ONLY SEPARATION.
 *
 * It was --bedi-surface-2 (#F9F9F9) over a hairline, which is the sensible way
 * to separate a footer from a white page — and it is not what bedishop.ge does.
 * There the PAGE is tinted and the footer is white; here the page is white
 * (base.css), so matching their footer means white on white with the rule doing
 * the work. That is the right trade: the client compares the footer against
 * their own, and a grey slab under a white page was the first thing that read
 * as different.
 */
.bedi-footer {
	background-color: var(--bedi-surface);
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	color: var(--bedi-ink);
	flex: 0 0 auto;
	margin-block-start: auto;
	/* The reference gives the columns a lot of air above and below. */
	padding-block: var(--bedi-space-2xl) var(--bedi-space-md);
}

.bedi-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-lg);
}

/* The registered widget area, kept from the previous footer. auto-fit rather
   than a fixed column count, so the row reflows whether the client drops in one
   widget or four. */
.bedi-footer__widgets {
	display: grid;
	gap: var(--bedi-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

/*
 * FLEX, NOT GRID, AND THE SWITCH IS WHAT LETS THE CONTACT COLUMN BE WIDER.
 *
 * The previous version used `grid-auto-flow: column` with equal implicit
 * tracks, because every column here renders conditionally — columns 1 and 2
 * need a menu assigned, 3 needs WooCommerce, 4 needs a contact — and a fixed
 * `repeat(4, …)` leaves half the row empty when two of them are absent.
 *
 * That solved the counting problem and created another: implicit tracks are all
 * the same width, so the contact column got the same space as a list of
 * one-word links and its two-line blurb wrapped into four narrow ones.
 *
 * Flex solves both. `flex: 1 1 0` gives every column an equal share of whatever
 * is there, with no track count to declare, and the contact column simply asks
 * for more. `min-inline-size` is what makes the row wrap on its own before the
 * breakpoints in section 5 have to.
 *
 * `flex-basis: 0` and not `auto`: with `auto` the basis is the content's own
 * width, so the column holding the longest policy title would come out wider
 * than the others by however long that title happens to be.
 */
.bedi-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-lg) var(--bedi-space-md);
}

.bedi-footer__col {
	flex: 1 1 0;
	min-inline-size: 190px;
}

/* =========================================================================
 * 2. COLUMN CONTENTS
 * ====================================================================== */

/*
 * Section 2 no longer styles a brand column. .bedi-footer__brand,
 * __brand-text and the logo cap that were here are gone with the column
 * itself — the footer leads with the policy links now, and the logo lives in
 * the header where it already was. Nothing is left behind: a retired rule set
 * that matches nothing is one the next reader has to prove is dead.
 */

/*
 * THE CONTACT COLUMN. It carries a sentence, two contact rows and the social
 * discs, against three columns of single-word links, so it is given room by a
 * flex-basis on the item rather than by a grid track — see the note above.
 */
/*
 * 1.6, measured off the reference: its contact column is a little over half
 * again the width of a link column, which is what keeps the blurb on two lines
 * and the phone and the email on one row together.
 */
.bedi-footer__col--contact {
	flex: 1.6 1 0;
	min-inline-size: 240px;
}

/*
 * FOOTER TYPE SITS ONE STEP DOWN THE SCALE.
 *
 * Everything here was --bedi-text-lg (16px), the same size as body copy in the
 * page above it — so a column of secondary links read as loudly as the content
 * they sit beneath. 14px (--bedi-text-base) is the step the rest of the theme
 * already uses for supporting text, and it is what the client asked for.
 *
 * The hover underline they also mentioned is already gone: measured on the
 * live footer, all seventeen links compute `text-decoration: none` and no
 * :hover rule in any stylesheet adds one back.
 */
.bedi-footer__blurb {
	color: var(--bedi-ink);
	font-size: var(--bedi-text-base);
	line-height: 1.55;
	margin-block: 0 var(--bedi-space-md);
	max-inline-size: 38ch;
}

.bedi-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bedi-space-2xs);
	list-style: none;
	margin: var(--bedi-space-md) 0 0;
	padding: 0;
}

/*
 * FILLED ACCENT DISCS, not outlined ones. The reference's Facebook and
 * Instagram marks are solid brand-blue circles with a white glyph, which is why
 * they read as buttons in a column of text links; an outlined disc on a white
 * footer reads as another piece of hairline furniture.
 *
 * The hover inverts to the deeper blue rather than to the accent, because the
 * resting state is already the accent and there was nowhere left to go.
 */
.bedi-footer__social-link {
	align-items: center;
	background-color: var(--bedi-accent);
	border: 0;
	border-radius: var(--bedi-radius-round);
	block-size: 38px;
	color: var(--bedi-on-accent);
	display: flex;
	inline-size: 38px;
	justify-content: center;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-footer__social-link:hover,
.bedi-footer__social-link:focus-visible {
	background-color: var(--bedi-accent-strong);
	transform: translateY(-2px);
}

.bedi-footer__social-link:active {
	transform: translateY(0) scale(0.94);
}

/*
 * THE HEADING SITS WELL CLEAR OF ITS LIST. The reference leaves roughly a line
 * and a half between the heading and the first link; this carried 8px, which
 * made each column read as a five-line block rather than as a titled list.
 */
.bedi-footer__heading {
	color: var(--bedi-ink);
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-bold);
	letter-spacing: 0.02em;
	margin: 0 0 var(--bedi-space-md);
	text-transform: uppercase;
}

/*
 * `.bedi-footer__list` is on the category list, on wp_nav_menu's <ul> and on
 * wp_list_pages' <ul>, so all three get the same treatment from one rule —
 * which is the whole reason the class is passed to both WordPress calls rather
 * than letting them print their defaults.
 */
/*
 * 20px between rows, against the 4px this had. The reference's footer links sit
 * about a line apart — they are a short list with room around them, not a menu
 * — and the tight stack was the second thing that read as different.
 */
.bedi-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--bedi-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-footer__list a {
	/*
	 * The underline grows from the start edge, the same background-size trick
	 * ui.css section 4 uses on the two navigations. It is repeated here rather
	 * than added to that selector list because this is the footer's own
	 * component file and a rule in ui.css reaching into it would be a
	 * cross-component dependency for one declaration.
	 */
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	/*
	 * FULL INK, NOT MUTED. These are the shop's policy and service links and
	 * the reference sets them at body weight in the body colour; --bedi-ink-muted
	 * (#777) made a legally-required column look like small print, which is
	 * precisely the impression it must not give.
	 */
	color: var(--bedi-ink);
	display: inline-block;
	font-size: var(--bedi-text-base);
	text-decoration: none;
	transition:
		background-size var(--bedi-dur) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-footer__list a:hover,
.bedi-footer__list a:focus-visible {
	background-size: 100% 1px;
	color: var(--bedi-accent);
	transform: translateX(2px);
}

/*
 * THE CUSTOMER COLUMN'S ROWS CARRY A LEADING GLYPH, as bedishop.ge's do.
 *
 * The anchor becomes a two-column grid rather than a flex row so a label that
 * wraps hangs its second line under the FIRST line of text instead of under the
 * icon. `start` keeps the glyph on the first line rather than centring it
 * against a two-line block.
 *
 * The background-size underline from the rule above still applies and now
 * spans the icon as well — which is correct: the whole row is one link, and an
 * underline that stopped at the text would make the icon look separate.
 */
.bedi-footer__list--icons a {
	align-items: start;
	column-gap: var(--bedi-space-2xs);
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
}

.bedi-footer__link-icon {
	color: var(--bedi-accent);
	display: inline-flex;
	/* The glyph column is 18px wide in the reference and the gap a touch
	   larger than the theme's 2xs; both are set here rather than on the grid
	   so the icon and its spacing move together. */
	inline-size: 18px;
	/* Optically centred on a 1.5 line box by eye; align-items would drop it
	   two pixels low against the cap height of Georgian text. */
	margin-block-start: 2px;
}

/* wp_list_pages marks the current page; wp_nav_menu uses a different class for
   the same state. Both are named so the fallback and the real menu look alike. */
.bedi-footer__list .current-menu-item > a,
.bedi-footer__list .current_page_item > a {
	color: var(--bedi-accent);
}

/*
 * PHONE AND EMAIL SHARE A ROW, as they do in the reference, and wrap to two
 * only when the column is too narrow for both.
 *
 * `flex-direction: column` put them one above the other, which is the obvious
 * layout and the wrong one here: the contact column is the widest in the row
 * precisely so these two fit side by side, and stacking them left a column of
 * white space beside a two-line list.
 *
 * `row` with `flex-wrap` rather than a media query — the break happens when the
 * two actually stop fitting, which depends on how long the phone number and the
 * address are, not on the viewport.
 */
.bedi-footer__contact {
	column-gap: var(--bedi-space-md);
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bedi-space-2xs);
}

/*
 * The icon and the text are a two-column grid rather than a flex row, so a
 * wrapping address hangs its second line under the FIRST line of text instead
 * of under the icon. `start` on the icon keeps it on the first line rather than
 * centred against a three-line block.
 */
/*
 * The icon and the text are a two-column grid rather than a flex row, so a
 * wrapping value hangs its second line under the FIRST line of text instead of
 * under the icon. `start` keeps the glyph on the first line rather than centred
 * against a two-line block.
 */
.bedi-footer__contact-item {
	align-items: start;
	color: var(--bedi-ink);
	column-gap: var(--bedi-space-2xs);
	display: grid;
	font-size: var(--bedi-text-base);
	grid-template-columns: 16px minmax(0, 1fr);
	line-height: 1.5;
}

.bedi-footer__contact-icon {
	color: var(--bedi-accent);
	display: inline-flex;
	/* The 16px glyph is optically centred on a 1.5 line box by eye, not by
	   align-items: center, which would drop it two pixels low. */
	margin-block-start: 3px;
}

.bedi-footer__contact-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* Colour only — the underline is gone. A footer is a dense block of links and
   an underline appearing under each one as the pointer crosses it makes the
   whole column twitch. */
.bedi-footer__contact-link:hover,
.bedi-footer__contact-link:focus-visible {
	color: var(--bedi-accent);
}

/* =========================================================================
 * 3. PAYMENT ROW
 *
 * The client's own strip: a sentence and the Keepz mark on the inline-start
 * edge, the six accepted card marks on the inline-end. It replaces a row of
 * WooCommerce gateway titles printed as text chips — that was the honest answer
 * while nobody had supplied artwork, and the artwork has now been supplied.
 *
 * THE MARKS ARE ONE 2286x115 IMAGE AND THEY ARE SIZED BY HEIGHT.
 * `inline-size: auto` with a fixed `block-size` is what keeps a 20:1 strip from
 * setting the width of the flex row: give it a width and it will take 2286px
 * and push the label off the page. Height-first also means the marks stay the
 * same optical size as the Keepz mark beside them, which is the only thing that
 * makes the two read as one row rather than two logos of different weights.
 * ====================================================================== */

.bedi-footer__pay {
	align-items: center;
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	column-gap: var(--bedi-space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block-start: var(--bedi-space-md);
	row-gap: var(--bedi-space-sm);
}

.bedi-footer__pay-lead {
	align-items: center;
	column-gap: var(--bedi-space-2xs);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--bedi-space-3xs);
}

.bedi-footer__pay-label {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-base);
}

.bedi-footer__pay-keepz {
	block-size: 26px;
	inline-size: auto;
}

.bedi-footer__pay-marks {
	block-size: 24px;
	inline-size: auto;
	/*
	 * The one place this file allows a raster to shrink below its natural
	 * height. Under about 900px the strip and the label cannot share a line, so
	 * the strip wraps to its own and is allowed to scale down to fit rather
	 * than overflow — `max-inline-size: 100%` with `block-size: auto` beneath
	 * the breakpoint in section 5.
	 */
	max-inline-size: 100%;
}

/* =========================================================================
 * 4. BOTTOM BAR AND BACK-TO-TOP
 * ====================================================================== */

.bedi-footer__bar {
	align-items: center;
	border-block-start: var(--bedi-border-width) solid var(--bedi-rule);
	column-gap: var(--bedi-space-md);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block-start: var(--bedi-space-md);
	row-gap: var(--bedi-space-2xs);
}

/* With nothing above it — no widgets, no columns, no payment row — the rule
   would be a second line directly under the footer's own top border. */
.bedi-footer__bar:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.bedi-footer__copyright {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

/*
 * The studio credit and the back-to-top share the inline-end of the bar, which
 * is why they are wrapped rather than being two more children of a
 * space-between row: with three children the copyright, the credit and the
 * button would be spread evenly across the full width and the credit would
 * float in the middle of nothing.
 */
.bedi-footer__bar-end {
	align-items: center;
	column-gap: var(--bedi-space-sm);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--bedi-space-2xs);
}

.bedi-footer__credit {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin: 0;
}

.bedi-footer__credit-link {
	color: inherit;
	font-weight: var(--bedi-weight-medium);
	text-decoration: none;
	transition: color var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* Colour only — the underline is gone. A footer is a dense block of links and
   an underline appearing under each one as the pointer crosses it makes the
   whole column twitch. */
.bedi-footer__credit-link:hover,
.bedi-footer__credit-link:focus-visible {
	color: var(--bedi-accent);
}

.bedi-footer__top {
	align-items: center;
	appearance: none;
	background-color: var(--bedi-surface);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-ink);
	column-gap: var(--bedi-space-3xs);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--bedi-text-sm);
	padding: 7px 14px 7px 11px;
	transition:
		background-color var(--bedi-dur-micro) var(--bedi-ease-out),
		border-color var(--bedi-dur-micro) var(--bedi-ease-out),
		color var(--bedi-dur-micro) var(--bedi-ease-out);
}

/* ui.js un-hides it; without the script it stays out of the layout entirely. */
.bedi-footer__top[hidden] {
	display: none;
}

.bedi-footer__top:hover,
.bedi-footer__top:focus-visible {
	background-color: var(--bedi-accent);
	border-color: var(--bedi-accent);
	color: var(--bedi-on-accent);
}

/* The chevron leads the button: it lifts further than the button does, which is
   what makes the pair read as "up" rather than as a button that grew. */
.bedi-footer__top-icon {
	display: inline-flex;
	transition: transform var(--bedi-dur) var(--bedi-ease-out);
}

.bedi-footer__top:hover .bedi-footer__top-icon,
.bedi-footer__top:focus-visible .bedi-footer__top-icon {
	transform: translateY(-2px);
}

.bedi-footer__top:active {
	transform: scale(0.97);
}

/* =========================================================================
 * 5. NARROW, REDUCED MOTION, FORCED COLOURS, PRINT
 * ====================================================================== */

/*
 * TWO COLUMNS AT TABLET, ONE ON A PHONE, and the brand spans the full row in
 * both. It is the tallest column and the only one whose content is prose;
 * letting it share a row with a four-item link list leaves a column of white
 * space beside it.
 */
@media (max-width: 63.9375em) {
	/*
	 * `grid-auto-flow: row` has to be restored explicitly. Section 1 sets it to
	 * `column` so the row counts its own children; left on, this two-track
	 * template would be ignored and every column would go on stacking sideways
	 * off the edge of a phone.
	 */
	.bedi-footer__cols {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The contact column is the tallest and the only one holding prose; giving
	   it the full row stops its blurb wrapping every three words beside a
	   four-item link list. */
	.bedi-footer__col--contact {
		grid-column: 1 / -1;
	}
}

/*
 * The payment row stops being a two-ended bar before the columns collapse. The
 * strip is ~480px at its natural height and the label another ~200px; below
 * about 56em they cannot share a line, and `space-between` on a wrapped row
 * pushes them to opposite edges of two different lines, which reads as two
 * unrelated things.
 */
@media (max-width: 55.9375em) {
	.bedi-footer__pay {
		justify-content: flex-start;
	}

	.bedi-footer__pay-marks {
		block-size: auto;
		inline-size: min(100%, 420px);
	}
}

@media (max-width: 35.9375em) {
	.bedi-footer {
		padding-block: var(--bedi-space-lg) var(--bedi-space-md);
	}

	.bedi-footer__cols {
		gap: var(--bedi-space-md);
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
	}

	.bedi-footer__pay {
		justify-content: center;
		text-align: center;
	}

	.bedi-footer__pay-lead {
		justify-content: center;
	}

	/*
	 * The bottom bar centres rather than splitting. space-between on a wrapped
	 * two-item row puts the copyright hard left on one line and the button hard
	 * right on the next, which reads as two unrelated things.
	 */
	.bedi-footer__bar {
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bedi-footer__social-link,
	.bedi-footer__list a,
	.bedi-footer__contact-link,
	.bedi-footer__credit-link,
	.bedi-footer__top,
	.bedi-footer__top-icon {
		transition-duration: 1ms !important;
	}

	.bedi-footer__social-link:hover,
	.bedi-footer__social-link:focus-visible,
	.bedi-footer__social-link:active,
	.bedi-footer__list a:hover,
	.bedi-footer__list a:focus-visible,
	.bedi-footer__top:active,
	.bedi-footer__top:hover .bedi-footer__top-icon,
	.bedi-footer__top:focus-visible .bedi-footer__top-icon {
		transform: none !important;
	}
}

/*
 * Forced colours discards the palette, so the three surfaces that separate this
 * footer's parts — the social disc, the payment chip, the back-to-top pill —
 * lose their fill and their border colour together. A ButtonText border is what
 * keeps each of them a distinct object rather than loose text in a row.
 */
@media (forced-colors: active) {
	.bedi-footer__social-link,
	.bedi-footer__pay-item,
	.bedi-footer__top {
		border: 1px solid ButtonText;
	}
}

/*
 * layout.css's print block already hides `.bedi-footer` outright — a footer is
 * chrome and wastes the page. Nothing here needs a print rule of its own, and
 * this note exists so the next reader does not add one and wonder why it never
 * applies.
 */