/* ==========================================================================
   ITV STORE — FOOTER (loaded on every template; footer is a global part)
   ========================================================================== */

/* 0.1.36: white footer, replacing the black/dark theme — see CHANGELOG.md
   0.1.36. Structure/columns/content are unchanged except: the newsletter
   column is removed (inc/shortcodes.php's [itv_footer_bottom] no longer has
   a placeholder-provider caveat to hide, and parts/footer.html no longer
   emits a newsletter form at all — see instruction 10), so footer-top drops
   from 6 grid columns to 5. */
.itv-footer { background: #FFFFFF; color: #555555; border-top: 1px solid #E7E7E7; }
.itv-footer .itv-footer-inner { max-width: 1320px; margin-inline: auto; padding-inline: var(--pad-inline); }
.footer-top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 28px; padding-block: var(--section-pad); }
.footer-brand .itv-logo img { height: 60px; width: auto; margin-bottom: 14px; }
.footer-brand p { font-size: 13.5px; line-height: 1.7; max-width: 30ch; margin-bottom: 16px; color: #555555; }
.footer-social { display: flex; gap: 16px; }
.footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #E7E7E7; display: flex; align-items: center; justify-content: center; color: #0B0B0B; }
.footer-social a:hover { border-color: #FEDC23; background: #FEDC23; color: #0B0B0B; }
.footer-col h2 { font-family: var(--font-head); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #0B0B0B; margin-bottom: 16px; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 13.5px; }
.footer-col a { color: #333333; text-decoration: none; }
/* Dark yellow (#B89B00), not the brand yellow (#FEDC23) — solid #FEDC23
   text on white fails WCAG contrast (~1.6:1); #B89B00 plus an underline
   keeps the accent legible. Same reasoning as the nav/utility bar hover
   states below. */
.footer-col a:hover { color: #B89B00; text-decoration: underline; }

.footer-bottom { border-top: 1px solid #E5E5E5; padding-block: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #555555; }

@media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 26px 16px; } }

/* ==========================================================================
   0.1.39 — DESKTOP DENSITY (>=1024px only)
   Approved "NEW 55-60%" tier — replaces 0.1.38's "COMPACT 75-80%" values
   below (same block, new content). See previews/store-55-density-preview.html
   (approved) and the equivalent note in base-v3.css for the full
   rationale. .footer-top's padding gets its own explicit value here (33px)
   rather than inheriting --section-pad (32px at this same breakpoint, via
   base-v3.css) — the approved spec calls out the footer as its own target,
   distinct from general section padding, same pattern as 0.1.38. */
@media (min-width: 1024px) {
	.footer-top { padding-block: 33px; gap: 18px; }
	/* ~115px visual width at this logo's 2.74:1 ratio, matching the header
	   logo target for the same density tier. */
	.footer-brand .itv-logo img { height: 42px; }
	.footer-col h2 { font-size: 11.5px; margin-bottom: 10px; }
	.footer-col li { font-size: 11px; margin-bottom: 7px; }
	.footer-bottom { font-size: 10px; padding-block: 12px; }
}