/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   All colours, the field height and the footer's own width come from
   tokens.css (--tds-footer-*). No raw hex below except the payment brand
   marks, which ARE the brands' colours and cannot be re-themed.

   Everything is scoped to .tds-footer, or to .site-footer on a body that
   carries .tds-theme, so none of it can reach cart / checkout / my-account
   markup this theme does not own.
   ========================================================================== */

/* --- Breaking out of Storefront's shell ----------------------------------
   Storefront prints do_action('storefront_footer') inside
   <footer id="colophon"><div class="col-full">, and base.css gives every
   .col-full the page width plus a gutter. The design needs the navy band to
   run edge to edge, so the wrapper is flattened HERE rather than with a
   100vw negative-margin trick: 100vw includes the scrollbar, which is exactly
   how footers end up causing a few pixels of sideways scroll.

   Each band then re-applies the width itself via .tds-footer__inner, so the
   text still lines up with the rest of the page while the background does not.
   ------------------------------------------------------------------------ */

body.tds-theme .site-footer {
	padding: 0;
	background: var(--tds-white);
	border-top: 1px solid var(--tds-footer-line);
}

body.tds-theme .site-footer > .col-full {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

.tds-footer {
	width: 100%;
	background: var(--tds-white);
	color: var(--tds-ink);
	font-family: var(--tds-font);
	font-size: 15px;
	line-height: 1.5;
}

/* The one width shared by every band. Deliberately NOT --tds-shell: that
   token widens on catalogue pages, and a footer that changes width as you
   browse reads as a rendering bug. */
.tds-footer__inner {
	box-sizing: border-box;
	max-width: var(--tds-footer-shell);
	margin-inline: auto;
	padding-inline: var(--tds-footer-pad);
}

.tds-footer__band {
	border-bottom: 1px solid var(--tds-footer-line);
}

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

.tds-footer__signup {
	background: var(--tds-footer-navy);
	color: var(--tds-white);
}

.tds-footer__signup-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 36px;
}

.tds-footer__signup-copy {
	flex: 1 1 320px;
	min-width: 260px;
}

.tds-footer__signup-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.tds-footer__signup-note {
	margin-top: 4px;
	font-size: 14px;
	color: var(--tds-footer-navy-soft);
}

.tds-footer__signup-form {
	flex: 1 1 380px;
	max-width: 520px;
}

/*
 * The subscription plugin's own markup, dressed to match the comp.
 *
 * Written for the two plugins this site could use — MailPoet
 * (.mailpoet_form > .mailpoet_paragraph) and Mailchimp for WordPress
 * (.mc4wp-form-fields > p) — because both ship the same shape: field blocks
 * stacked vertically with their own margins and a full-width button.
 *
 * These rules lay the blocks out as one row and give the field and the button
 * the same height from ONE token, so they cannot drift apart when the plugin
 * updates its stylesheet. Every selector stays inside .tds-footer, so the same
 * form placed anywhere else on the site keeps its normal appearance.
 */

.tds-footer__signup-form .mailpoet_form,
.tds-footer__signup-form .mc4wp-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
	background: none;
}

.tds-footer__signup-form .mc4wp-form {
	margin: 0;
}

/* MC4WP wraps its field in a <label>; the text inside it is the "Email
   address" caption, which the headline above already says. */
.tds-footer__signup-form .mc4wp-form-fields label {
	display: block;
	font-size: 0;
}

.tds-footer__signup-form .mailpoet_paragraph,
.tds-footer__signup-form .mc4wp-form-fields > p {
	margin: 0;
	flex: 1 1 220px;
	min-width: 0;
}

.tds-footer__signup-form .mailpoet_paragraph.last,
.tds-footer__signup-form .mailpoet_paragraph:has(.mailpoet_submit),
.tds-footer__signup-form .mc4wp-form-fields > p:has(input[type="submit"]) {
	flex: 0 0 auto;
}

.tds-footer__signup-form .mailpoet_text,
.tds-footer__signup-form input[type="email"],
.tds-footer__signup-form input[type="text"] {
	box-sizing: border-box;
	width: 100%;
	height: var(--tds-footer-field-h);
	padding: 0 16px;
	border: 1px solid var(--tds-footer-field);
	border-radius: var(--tds-radius-sm);
	background: var(--tds-white);
	color: var(--tds-ink);
	font-size: 15px;
	font-family: inherit;
}

.tds-footer__signup-form input::placeholder {
	color: var(--tds-footer-muted);
}

.tds-footer__signup-form .mailpoet_submit,
.tds-footer__signup-form input[type="submit"],
.tds-footer__signup-form button[type="submit"] {
	box-sizing: border-box;
	width: auto;
	height: var(--tds-footer-field-h);
	padding: 0 28px;
	border: none;
	border-radius: var(--tds-radius-sm);
	background: var(--tds-footer-cta);
	color: var(--tds-white);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	line-height: var(--tds-footer-field-h);
	cursor: pointer;
}

.tds-footer__signup-form .mailpoet_submit:hover,
.tds-footer__signup-form input[type="submit"]:hover,
.tds-footer__signup-form button[type="submit"]:hover {
	background: var(--tds-footer-cta-ink);
}

/* MailPoet's own success / error notices, kept legible on navy. */
.tds-footer__signup-form .mailpoet_validate_success,
.tds-footer__signup-form .mailpoet_validate_error {
	flex: 1 0 100%;
	margin: 0;
	font-size: 14px;
	color: var(--tds-white);
}

/* --- Link columns -------------------------------------------------------- */

.tds-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 36px 32px;
	padding-block: 48px 40px;
}

.tds-footer__heading {
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tds-footer-navy);
}

/*
 * NOTE THE DOUBLED CLASS. Storefront styles lists inside the footer with
 * `.site-footer ul { margin: 0 0 1.41575em 3.706325903em; list-style: disc; }`
 * — two class-level selectors' worth of weight. A single .tds-footer__list
 * loses to it, and the columns rendered indented by ~56px with bullets, which
 * is easy to miss because it still looks like a deliberate list.
 *
 * .tds-footer .tds-footer__list matches that weight and wins on order.
 */
.tds-footer .tds-footer__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}

/* Same reason: the parent also gives footer list items their own spacing. */
.tds-footer .tds-footer__list li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* --- Why these link selectors are so long --------------------------------
   Storefront's Customizer writes this into the page head, inline, on every
   site that has ever opened the theme options:

       .site-footer a:not(.button):not(.components-button) { color: #333; }

   Three classes and an element. It beat every shorter rule we had, so on
   staging the columns came out #333 and the blue "View all" was grey too --
   the layout measured perfect and the colours were silently wrong.

   Adding one more class we already have in the markup puts these ahead of it
   without !important, which would only move the same fight one level up.
   Do not shorten them back.
   ------------------------------------------------------------------------ */

.site-footer .tds-footer .tds-footer__list a.tds-footer__link {
	color: var(--tds-footer-link);
	text-decoration: none;
}

.site-footer .tds-footer .tds-footer__list a.tds-footer__link:hover,
.site-footer .tds-footer .tds-footer__list a.tds-footer__link:focus-visible {
	color: var(--tds-footer-cta);
	text-decoration: underline;
}

.site-footer .tds-footer .tds-footer__list a.tds-footer__link--accent {
	color: var(--tds-footer-cta);
	font-weight: 600;
}

.tds-footer .tds-footer__about {
	margin: 0 0 18px;
	font-size: 15px;
	color: var(--tds-footer-link);
}

/* --- Social -------------------------------------------------------------- */

.tds-footer__social {
	display: flex;
	gap: 12px;
}

.site-footer .tds-footer .tds-footer__social a.tds-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #d8dde8;
	border-radius: var(--tds-radius-sm);
	color: var(--tds-footer-navy);
}

.site-footer .tds-footer .tds-footer__social a.tds-footer__social-link:hover,
.site-footer .tds-footer .tds-footer__social a.tds-footer__social-link:focus-visible {
	border-color: var(--tds-footer-cta);
	color: var(--tds-footer-cta);
}

/* --- Descriptive paragraph ----------------------------------------------- */

.tds-footer .tds-footer__blurb {
	max-width: 960px;
	margin: 0;
	padding-block: 28px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--tds-footer-muted);
}

/* --- Payment marks ------------------------------------------------------- */

.tds-footer__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding-block: 20px;
}

.tds-footer__payments-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tds-footer-muted);
}

.tds-footer__marks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tds-footer__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 32px;
	border: 1px solid #e0e4ec;
	border-radius: var(--tds-radius-sm);
	background: var(--tds-white);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.tds-footer__mark--visa {
	font-style: italic;
	color: #1a1f71;
}

.tds-footer__mark--amex {
	background: #2e77bc;
	color: var(--tds-white);
	font-size: 10px;
	letter-spacing: 0.03em;
}

.tds-footer__mark--paypal {
	font-style: italic;
	font-size: 11px;
	color: #003087;
}

.tds-footer__mark-pal {
	color: #009cde;
}

.tds-footer__mark--jcb {
	gap: 2px;
}

.tds-footer__jcb {
	width: 7px;
	height: 16px;
	border-radius: 2px;
}

.tds-footer__jcb--b { background: #0f6cb6; }
.tds-footer__jcb--r { background: #c0272d; }
.tds-footer__jcb--g { background: #159b4a; }

/* --- Bottom legal line --------------------------------------------------- */

.tds-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 18px;
	font-size: 13px;
	color: var(--tds-footer-muted);
}

.tds-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.site-footer .tds-footer .tds-footer__legal .tds-footer__legal-links a {
	color: var(--tds-footer-muted);
	text-decoration: none;
}

.site-footer .tds-footer .tds-footer__legal .tds-footer__legal-links a:hover,
.site-footer .tds-footer .tds-footer__legal .tds-footer__legal-links a:focus-visible {
	color: var(--tds-footer-cta);
}

/* --- Phones --------------------------------------------------------------
   The grid already reflows to one column below ~500px on its own. What it
   does NOT fix is the newsletter row: at 375px the button sat beside a 220px
   field and both were squeezed. Below 600px the field and the button each
   take a full line, which also keeps the 46px tap target intact.
   ------------------------------------------------------------------------ */

/* Room for Storefront's fixed handheld bar, but only on the widths where that
   bar is actually shown AND only when it is really in the page -- :has() means
   a site that has turned the bar off does not gain 77px of blank white. */
@media (max-width: 767px) {
	body.tds-theme:has(.storefront-handheld-footer-bar) .tds-footer {
		padding-bottom: calc(var(--tds-footer-handheld-bar) + 8px);
	}
}

@media (max-width: 600px) {
	.tds-footer__signup-inner {
		padding-block: 28px;
	}

	.tds-footer__signup-form .mailpoet_paragraph,
	.tds-footer__signup-form .mailpoet_paragraph:has(.mailpoet_submit),
	.tds-footer__signup-form .mc4wp-form-fields > p,
	.tds-footer__signup-form .mc4wp-form-fields > p:has(input[type="submit"]) {
		flex: 1 0 100%;
	}

	.tds-footer__signup-form .mailpoet_submit,
	.tds-footer__signup-form input[type="submit"],
	.tds-footer__signup-form button[type="submit"] {
		width: 100%;
	}

	.tds-footer__grid {
		padding-block: 32px 28px;
	}

	.tds-footer__blurb {
		padding-block: 20px;
	}
}