/* =============================================================================
   DIGITAL TIENDA — FOOTER WIDGET AUTO-STYLING
   Append to: assets/css/custom.css
   =============================================================================

   PURPOSE
   Style plain widget markup so the footer columns can be built with ordinary
   blocks — an Image with a link, a Paragraph, a List — and still look exactly
   like the hardcoded original. No custom classes needed in the widget.

   WHAT YOU ADD IN Appearance → Widgets

     Footer 1 — Brand
       1. Image block   → your logo, linked to the home page
       2. Paragraph     → the tagline
       3. List block    → Secure checkout / Order tracking / Customer support
       (leave the widget Title empty)

     Footer 2 and 3
       1. List block or Navigation Menu widget
       (put the heading in the widget Title field, not in the HTML)

     Footer 4 — About
       1. Paragraph     → the blurb
       2. Paragraph     → email link
       3. Paragraph     → "Get support →" link

   WHY THE BRAND COLUMN IS SCOPED SEPARATELY
   A <ul> in the brand column has to render as inline pill badges, while a <ul>
   in columns 2 and 3 has to render as a stacked link list. Same element, two
   different treatments, so the brand rules are scoped to .dt-ft__brand and the
   list rules to .dt-ft__col. Without that scoping the trust badges would
   inherit the link-list styling and stack vertically.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────
   FOOTER 1 — BRAND COLUMN
   ───────────────────────────────────────────────────────────── */

/* Logo — an Image block wraps its img in <figure>, so both are reset.
   Core adds .wp-block-image margins that would push the logo off-baseline. */
.dt-ft__brand .dt-ft__widget figure,
.dt-ft__brand .dt-ft__widget .wp-block-image {
	margin: 0 !important;
	padding: 0 !important;
}

.dt-ft__brand .dt-ft__widget img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 240px !important;
	max-height: 58px !important;
}

/* Tagline — the first paragraph in the column */
.dt-ft__brand .dt-ft__widget p {
	max-width: 360px;
	margin: 18px 0 20px;
	color: var(--dt-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* Trust badges — a plain List block rendered as inline pills */
.dt-ft__brand .dt-ft__widget ul {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.dt-ft__brand .dt-ft__widget ul li {
	margin: 0 !important;
	padding: 7px 10px !important;
	border: 1px solid var(--dt-line);
	border-radius: 999px;
	background: #fff;
	color: var(--dt-navy);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

/* If a badge is linked, it should not look like a link */
.dt-ft__brand .dt-ft__widget ul li a {
	color: var(--dt-navy) !important;
	text-decoration: none !important;
	font-size: inherit;
	font-weight: inherit;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER 2, 3 AND 4 — LINK COLUMNS
   ───────────────────────────────────────────────────────────── */

.dt-ft__col .dt-ft__widget ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.dt-ft__col .dt-ft__widget ul li {
	margin: 0 0 10px !important;
	padding: 0 !important;
}

.dt-ft__col .dt-ft__widget ul li:last-child {
	margin-bottom: 0 !important;
}

/* Nested submenu items, if a Navigation Menu widget has children */
.dt-ft__col .dt-ft__widget ul ul {
	margin: 10px 0 0 14px !important;
}

.dt-ft__col .dt-ft__widget p {
	margin: 0 0 14px;
	color: var(--dt-muted);
	font-size: 14px;
	line-height: 1.7;
}

.dt-ft__col .dt-ft__widget p:last-child {
	margin-bottom: 0;
}

/* Any link in a footer column, whatever block produced it */
.dt-ft__col .dt-ft__widget a {
	color: var(--dt-muted) !important;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none !important;
	transition: color .2s ease;
}

.dt-ft__col .dt-ft__widget a:hover {
	color: var(--dt-blue) !important;
}

/* A paragraph containing ONLY a link — used for the email and the
   "Get support →" line — renders as a block rather than inline. */
.dt-ft__col .dt-ft__widget p > a:only-child {
	display: block;
	word-break: break-word;
}

/* Bold a link to make it the emphasised call to action, e.g. Get support → */
.dt-ft__col .dt-ft__widget p > strong > a,
.dt-ft__col .dt-ft__widget p > a > strong {
	color: var(--dt-blue) !important;
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   SHARED
   ───────────────────────────────────────────────────────────── */

/* Spacing between stacked widgets in the same column */
.dt-ft__widget + .dt-ft__widget {
	margin-top: 20px;
}

/* Brand column widgets sit flush — the margins above handle their rhythm */
.dt-ft__brand .dt-ft__widget + .dt-ft__widget {
	margin-top: 0;
}

/* Core block wrappers add margins that break column rhythm */
.dt-ft__widget .wp-block-group,
.dt-ft__widget .wp-block-list,
.dt-ft__widget .wp-block-paragraph {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 430px) {
	.dt-ft__brand .dt-ft__widget img {
		max-width: 210px !important;
	}
}


/* Text widget strips <ul>/<li> and emits <br>-separated text instead.
   This styles that fallback output as pills using the legacy .dt-ft__trust
   wrapper, which the Text widget does preserve. */
.dt-ft__brand .dt-ft__widget .dt-ft__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.dt-ft__brand .dt-ft__widget .dt-ft__trust br {
	display: none;
}




/* ─── FOOTER BOTTOM BAR WIDGETS ─────────────────────────────── */
.dt-ft__bottom-widget p {
	margin: 0;
	color: #cbd5e1;
	font-size: 12px;
}

.dt-ft__bottom-widget a {
	color: #cbd5e1 !important;
	font-size: 12px;
	text-decoration: none !important;
}

.dt-ft__bottom-widget a:hover {
	color: #fff !important;
}

/* Right-hand widget: links inline, aligned right */
.dt-ft__bottom-widget--right ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.dt-ft__bottom-widget--right ul li {
	margin: 0 !important;
}

.dt-ft__bottom-widget--right p {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 16px;
}

@media (max-width: 680px) {
	.dt-ft__bottom-widget--right ul,
	.dt-ft__bottom-widget--right p {
		justify-content: flex-start;
	}
}