/*
 * UM5 footer (WoodMart) - see um5-woodmart-footer.php.
 *
 * The footer is the one dark block on a light site: the page is #f8f9fb with
 * white cards on it, so a navy band is what actually ends the page. The colour
 * is the theme option 'footer-bar-bg' (rgb(9,33,67)), repeated here as a
 * variable so the footer still paints correctly if WoodMart's generated
 * option CSS has not been rebuilt yet.
 *
 * Accents are the site primary #1e77fb lightened to #4e97ff - the raw primary
 * sits at roughly 3:1 against this navy, which is under the 4.5:1 body-text
 * threshold; #4e97ff clears it.
 *
 * Specificity note: WoodMart enqueues css/parts/footer-base.css from the body,
 * i.e. after this stylesheet, so the handful of rules that override it
 * (.footer-sidebar padding, .wd-copyrights border) carry the extra .wd-footer
 * class to win on specificity rather than on source order.
 */

.wd-footer {
	--um5-f-bg: #092143;
	--um5-f-bar: #061933;
	--um5-f-head: #fff;
	--um5-f-text: #a3b2c9;
	--um5-f-link: #c4d0e2;
	--um5-f-accent: #4e97ff;
	--um5-f-line: rgba(255, 255, 255, .1);

	background-color: var(--um5-f-bg);
	color: var(--um5-f-text);

	/*
	 * The page and the footer meet as two flat blocks of colour, which reads
	 * as a seam rather than as an ending. The footer casts upward onto the
	 * page instead, so the band lifts off the content above it.
	 *
	 * Blue-grey rather than black: the shadow falls on #f8f9fb, which is
	 * itself a cool white, and a neutral black on it goes muddy. This is the
	 * footer navy opened up towards the page - same hue family, so it reads
	 * as the footer's own shadow rather than as a grey rule.
	 */
	box-shadow: 0 -8px 14px -5px rgba(63, 88, 130, .32);
}

.wd-footer .footer-sidebar {
	padding-block: 55px 45px;
}

.wd-footer .footer-column {
	font-size: 14px;
	line-height: 1.75;
}

.wd-footer .um5-footer-widget .widget-title {
	margin-bottom: 22px;
	color: var(--um5-f-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- *
 * Column 1 - logo, trust badge, company details
 * ---------------------------------------------------------------- */

.um5-footer-marks {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}

.um5-footer-marks img {
	display: block;
	height: auto;
}

.um5-footer-logo img {
	width: 118px;
}

.um5-footer-badge img {
	width: 86px;
	opacity: .82;
	transition: opacity .2s ease;
}

.um5-footer-badge:hover img {
	opacity: 1;
}

.um5-footer-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.um5-footer-contact li {
	margin: 0;
	color: var(--um5-f-text);
}

.um5-footer-contact li span {
	color: rgba(255, 255, 255, .45);
}

.um5-footer-company {
	margin-bottom: 2px !important;
	color: var(--um5-f-head) !important;
	font-weight: 700;
}

.um5-footer-phone a {
	color: var(--um5-f-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
}

.um5-footer-phone a:hover {
	color: var(--um5-f-accent);
}

.um5-footer-chat {
	margin-top: 6px;
}

/*
 * A class selector, not the bare `button` WoodMart's base.css resets
 * (uppercase, 600 weight, 42px min-height, centered text) - see
 * feedback_woodmart_button_reset in project memory. A class beats an
 * element selector on specificity regardless of source order, so no
 * !important is needed here to win against it.
 */
.um5-footer-chat-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	min-height: 0;
	background: none;
	color: var(--um5-f-accent);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.um5-footer-chat-btn:hover {
	color: var(--um5-f-head);
	text-decoration: underline;
}

.um5-footer-chat-btn svg {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------- *
 * Columns 2 and 3 - link lists
 * ---------------------------------------------------------------- */

.um5-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.um5-footer-menu li {
	margin: 0;
}

.um5-footer-menu a {
	display: inline-block;
	padding-block: 5px;
	color: var(--um5-f-link);
	line-height: 1.4;
	transition: color .18s ease;
}

.um5-footer-menu a:hover,
.um5-footer-menu a:focus-visible {
	color: var(--um5-f-head);
}

/* ---------------------------------------------------------------- *
 * Column 4 - newsletter signup
 *
 * One bordered panel holding the perk line, the email row and the gender
 * pills, so the column reads as a single call to action rather than as a
 * heading with three loose things under it (2026-09-17 review).
 *
 * The Mailchimp form's own markup is three <p> wrappers inside
 * .mc4wp-form-fields - email, gender pills, submit (form post 13475) - so the
 * layout is built from those paragraphs rather than from classes the form
 * does not have. They are laid out as a wrapping flex row and re-ordered:
 * email + submit share the first line, the pills get the line below. Source
 * order stays email -> pills -> submit so tabbing still follows the reading
 * order of the rendered rows.
 * ---------------------------------------------------------------- */

.um5-footer-signup {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	background-color: rgba(255, 255, 255, .045);
}

.um5-footer-perk {
	margin: 0 0 14px;
	line-height: 1.5;
}

.um5-footer-perk strong {
	display: block;
	margin-bottom: 1px;
	color: var(--um5-f-head);
	font-size: 15px;
	font-weight: 700;
}

.um5-footer-perk span {
	color: rgba(255, 255, 255, .5);
	font-size: 13px;
}

.um5-footer-form .mc4wp-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.um5-footer-form .mc4wp-form-fields > p {
	margin: 0;
}

/* Email field - first on its line, takes whatever the button leaves. */
.um5-footer-form .mc4wp-form-fields > p:not(.um5-mc-gender):first-child {
	order: 1;
	flex: 1 1 160px;
	min-width: 0;
}

/* Submit - same line, natural width. */
.um5-footer-form .mc4wp-form-fields > p:not(.um5-mc-gender):last-child {
	order: 2;
	flex: 0 0 auto;
}

.um5-footer-form label,
.um5-footer-form i {
	display: block;
	font-style: normal;
}

.um5-footer-form input[type="email"] {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 15px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 8px;
	/* Darker than the panel it sits in, so the field still reads as a hole
	   to type into rather than as another raised surface. */
	background-color: rgba(0, 0, 0, .22);
	box-shadow: none;
	color: #fff;
	font-size: 14px;
}

.um5-footer-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .42);
}

.um5-footer-form input[type="email"]:focus {
	border-color: var(--um5-f-accent);
	background-color: rgba(0, 0, 0, .3);
	outline: none;
}

.um5-footer-form input[type="submit"] {
	height: 46px;
	padding: 0 24px;
	border: none;
	border-radius: 8px;
	background-color: #1e77fb;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: background-color .18s ease;
}

.um5-footer-form input[type="submit"]:hover {
	background-color: #4e97ff;
}

.um5-footer-form .mc4wp-response {
	margin-top: 10px;
	color: var(--um5-f-text);
	font-size: 13px;
}

/*
 * Gender opt-in - added by scripts/staging/mc4wp-gender-field.php.
 * Exclusive choice, so radios rather than independent checkboxes, styled as
 * two pill toggles (the "NAINE/MEES" reference on the Weekend site's mobile
 * footer). The <input> itself stays in the DOM for MC4WP/Mailchimp to read,
 * just visually hidden behind its own <span> label.
 *
 * Its own row under the email field: it used to be a flex sibling *between*
 * the input and the button, which squeezed the email field down to a stub and
 * strung four unrelated controls across one line.
 */
.um5-mc-gender {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
	margin: 2px 0 0 !important;
}

.um5-mc-gender-label {
	color: rgba(255, 255, 255, .5);
	font-size: 13px;
}

.um5-mc-gender-option {
	position: relative;
	margin: 0 !important;
	cursor: pointer;
}

.um5-mc-gender-option input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.um5-mc-gender-option span {
	display: block;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	color: var(--um5-f-link);
	font-size: 13px;
	line-height: 1.4;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.um5-mc-gender-option:hover span {
	border-color: rgba(255, 255, 255, .35);
	color: var(--um5-f-head);
}

.um5-mc-gender-option input:checked ~ span {
	border-color: var(--um5-f-accent);
	background-color: var(--um5-f-accent);
	color: #061933;
	font-weight: 600;
}

.um5-mc-gender-option input:focus-visible ~ span {
	outline: 2px solid var(--um5-f-accent);
	outline-offset: 2px;
}

/*
 * Mobile: the newsletter column is exempt from WoodMart's footer accordion
 * (wd-opened-initially, see um5-woodmart-footer.php), so it is always
 * expanded and would otherwise push the two collapsed link rows far down the
 * page. It was tried directly under the logo first and sent back on
 * 2026-09-17 - it now goes last instead, after Üldteave/Minu konto, i.e. the
 * always-open block sits at the end where its height costs nothing.
 *
 * The breakpoint matches the one WoodMart's own footer-widget collapse JS
 * uses (widgetCollapse.js: innerWidth() <= 575), so the reorder and the
 * accordion exemption apply at exactly the width where either matters.
 * .footer-sidebar is CSS grid with auto-placed items (no explicit
 * grid-area), so `order` alone is enough to move it without re-numbering the
 * other columns.
 */
@media (max-width: 575px) {
	.footer-column-4 {
		order: 1;
	}

	/*
	 * It is last now, so the hairline that separates the collapsed rows from
	 * each other would leave a rule hanging above a panel that has a border
	 * of its own. Four classes deep on purpose: the rule it has to beat,
	 * `.wd-footer .footer-column:not(:first-child) .um5-footer-widget` at the
	 * bottom of this file, is (0,4,0) and comes later in source order.
	 */
	.wd-footer .footer-column.footer-column-4 .um5-footer-widget.um5-footer-newsletter {
		margin-top: 10px;
		border-top: 0;
	}

	/*
	 * The collapsed link rows want a title that is a 14px-tall tap target,
	 * and WoodMart turns every one of them into a toggle. This one is a
	 * plain heading over a panel that is always open (wd-opened-initially),
	 * so it loses the tap padding, the room reserved for the chevron and the
	 * chevron itself - an arrow that expands nothing is a lie.
	 *
	 * The :after rule has to be four classes deep: the chevron comes from
	 * `.wd-widget-collapse .widget-title:after` in the theme's
	 * css/parts/opt-widget-collapse.css, which is (0,2,1) and - like every
	 * WoodMart part stylesheet - is enqueued from the body, i.e. after this
	 * file, so a matching-specificity rule here loses on source order.
	 * Spacing below the title is left to the theme's own
	 * `.wd-widget-collapse .widget-title~*{margin-top:20px}`.
	 */
	.wd-footer .um5-footer-widget.um5-footer-newsletter .widget-title {
		margin-bottom: 0;
		padding-block: 0;
		padding-inline-end: 0;
		pointer-events: none;
		cursor: default;
	}

	.wd-footer .um5-footer-widget.um5-footer-newsletter .widget-title:after {
		display: none;
	}
}

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

/*
 * No rule above it any more: it used to need one to separate itself from the
 * loose newsletter text, but the signup is a bordered panel now and two
 * horizontal lines that close ranks would just look like a mistake.
 */
.um5-footer-social {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

.um5-footer-social-label {
	margin-inline-end: 4px;
	color: rgba(255, 255, 255, .5);
	font-size: 13px;
}

.um5-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .08);
	color: #fff;
	transition: background-color .18s ease, transform .18s ease;
}

.um5-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.um5-social:hover {
	color: #fff;
	transform: translateY(-2px);
}

.um5-social-fb:hover {
	background-color: #1877f2;
}

.um5-social-ig:hover {
	background-color: #db277e;
}

/* ---------------------------------------------------------------- *
 * Copyright bar
 * ---------------------------------------------------------------- */

.wd-footer .wd-copyrights {
	padding-block: 18px;
	border-top: 1px solid var(--um5-f-line);
	background-color: var(--um5-f-bar);
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
}

.wd-footer .wd-copyrights p {
	margin: 0;
}

.wd-footer .wd-copyrights a {
	color: rgba(255, 255, 255, .78);
}

.wd-footer .wd-copyrights a:hover {
	color: var(--um5-f-accent);
}

/*
 * Inline-flex rather than plain inline text: the separators are elements with
 * no whitespace around them, so as one text run the three links have nothing
 * to break on and the last one is clipped off the screen edge on a phone.
 */
.um5-legal {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 9px;
	row-gap: 2px;
}

.um5-legal i {
	color: rgba(255, 255, 255, .28);
	font-style: normal;
}

/*
 * Cookie settings, rendered as the last item of that list by
 * shortcode_legal(). A button rather than a link because that is what
 * complianz.js listens for, so it has to be reset back to looking like its
 * three neighbours - browsers give a <button> its own font, and the theme
 * gives every button a background, a border and a 35px radius.
 *
 * The pair of rules below it hides Complianz's own floating tab. Both are
 * needed: the container is what our stylesheet can reach, and .cmplz-show is
 * added to the button by their script after consent is given, i.e. after this
 * page rendered.
 */
.um5-legal .um5-cookie-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, .78);
	text-transform: none;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

.um5-legal .um5-cookie-btn svg {
	opacity: .75;
}

.um5-legal .um5-cookie-btn:hover {
	background: none;
	color: var(--um5-f-accent);
}

.um5-legal .um5-cookie-btn:hover svg {
	opacity: 1;
}

#cmplz-manage-consent,
#cmplz-manage-consent .cmplz-manage-consent.cmplz-show {
	display: none;
}

/* ---------------------------------------------------------------- *
 * Tablet and phone
 *
 * Below 576px WoodMart turns the footer widgets into accordions
 * (collapse_footer_widgets), which is why the two link lists get their
 * titles back to a tappable size and the brand column - which has no
 * title, so it never collapses - keeps its normal spacing.
 * ---------------------------------------------------------------- */

@media (max-width: 1024px) {
	.wd-footer .footer-sidebar {
		padding-block: 40px 32px;
	}
}

@media (max-width: 575px) {
	/* Collapsed widgets read as one list of rows, so each needs a rule to sit
	   on and a title big enough to be a tap target. */
	.wd-footer .footer-column:not(:first-child) .um5-footer-widget {
		border-top: 1px solid var(--um5-f-line);
	}

	.wd-footer .um5-footer-widget .widget-title {
		margin-bottom: 0;
		padding-block: 14px;
	}

	/* The theme sets --wd-gap-sm inline on this element, so the gap has to be
	   overridden directly - a custom property in a stylesheet cannot win
	   against an inline one. */
	.wd-footer .footer-sidebar {
		gap: 0;
	}

	/*
	 * The brand column is the one widget with no title, so it never collapses
	 * and sits directly on top of the "ÜLDTEAVE" row - phone number, then the
	 * hairline, with nothing between them. Three classes because the theme's
	 * own .widget:last-child{padding-bottom:0} is (0,2,0) and enqueued from
	 * the body, so a bare .um5-footer-brand loses twice over; this was written
	 * as 8px before and never applied at all.
	 */
	.wd-footer .footer-column .um5-footer-brand {
		padding-bottom: 24px;
	}

	.wd-footer .wd-copyrights {
		text-align: center;
	}

	.wd-footer .wd-copyrights .wd-col-end {
		margin-top: 8px;
	}

	/* The links wrap here, and a separator that ends up last on a line is a
	   dot hanging in space - drop them and let the gap do the separating. */
	.um5-legal {
		justify-content: center;
		column-gap: 18px;
	}

	.um5-legal i {
		display: none;
	}
}