/* ============================================================================
   footer.css — compliance footer styling.
   ============================================================================ */

.dtr-footer { background: var(--dtr-primary); color: var(--dtr-white); padding: 64px 0 24px; margin-top: 96px; }
.dtr-footer a { color: var(--dtr-white); }
.dtr-footer a:hover, .dtr-footer a:focus { color: var(--dtr-gold); }

.dtr-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 768px) {
	/* 4 columns: brand (2fr) + About + Help + Legal. Newsletter column removed
	 * (F-11) until an ESP is wired — see docs/future-features.md. */
	.dtr-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.dtr-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.dtr-footer__lockup { display: flex; align-items: center; gap: 16px; }
.dtr-footer__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.dtr-footer__logo svg { height: 80px; width: auto; display: block; }
/* Brand-name text mirrors the header lockup, in white on the navy footer
 * (~16:1 contrast). Reads from get_bloginfo('name'). */
.dtr-footer__brand-name {
	font-family: var(--dtr-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--dtr-white);
}
.dtr-footer__tagline { font-size: 1.05rem; opacity: 0.9; margin: 0; max-width: 280px; }
@media (max-width: 479px) {
	.dtr-footer__logo svg { height: 64px; }
	.dtr-footer__brand-name { font-size: 1.25rem; }
}

.dtr-footer__col h3 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dtr-gold); margin: 0 0 16px; }
.dtr-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dtr-footer__menu a { font-size: 0.95rem; opacity: 0.85; }

.dtr-footer__socials { display: flex; gap: 16px; justify-content: center; padding: 32px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); margin: 48px 0 24px; }
.dtr-footer__socials a { display: inline-flex; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; align-items: center; justify-content: center; color: var(--dtr-white); transition: background var(--dtr-transition), color var(--dtr-transition); }
.dtr-footer__socials a:hover { background: var(--dtr-gold); color: var(--dtr-primary); border-color: var(--dtr-gold); }

.dtr-footer__compliance { font-size: 0.825rem; opacity: 0.85; line-height: 1.7; text-align: center; }
.dtr-footer__compliance p { margin: 4px 0; }
/* White (not gold) on navy footer — gold-on-navy is ~4.85:1 which Lighthouse
 * flags as borderline; white-on-navy is ~16:1. Underline keeps it link-like. */
.dtr-footer__compliance a { color: var(--dtr-white); text-decoration: underline; }
.dtr-footer__compliance a:hover, .dtr-footer__compliance a:focus { color: var(--dtr-gold); }
.dtr-footer__payments { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.dtr-footer__payments li { font-family: var(--dtr-font-heading); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; background: rgba(255,255,255,0.08); border-radius: var(--dtr-radius-pill); }
.dtr-footer__copyright { margin-top: 16px; opacity: 0.7; }

/* ============================================================================
   Cookie Notice plugin override — a11y contrast (Lighthouse fix)
   The plugin emits inline `style="background-color: #00a99d"` on its three
   buttons (#cn-accept-cookie, #cn-refuse-cookie, #cn-more-info), which fails
   WCAG 4.5:1 with white text. Force brand-primary navy via !important so
   inline styles are overridden — repeats across every page so this lives in
   the always-loaded footer.css.
   ============================================================================ */
#cn-accept-cookie,
#cn-refuse-cookie,
#cn-more-info {
	background-color: var(--dtr-primary) !important;
	color: var(--dtr-white) !important;
	border-color: var(--dtr-primary-dark) !important;
}
#cn-accept-cookie:hover,
#cn-refuse-cookie:hover,
#cn-more-info:hover,
#cn-accept-cookie:focus,
#cn-refuse-cookie:focus,
#cn-more-info:focus {
	background-color: var(--dtr-primary-dark) !important;
	color: var(--dtr-white) !important;
}