/* =====================================================================
   ATLANTA CANCER CARE — FOOTER
   File:   salient-child/css/acc/acc-footer.css
   Needs:  acc-tokens.css
   Loads:  on every page when acc-config.php features → footer is true.

   Restyles Salient's footer (#footer-outer) and the widget menus inside it
   (Locations, Menu, Patient Resources) plus the copyright row. It does not
   change footer.php, the widgets or the menus. The legacy custom.css sets
   the footer in Muli; the rules below override that with the brand fonts.
   The office list above the footer is the pre-footer component
   (acc-components.css, section 20).
   ===================================================================== */

body #footer-outer {
	font-weight: var(--acc-fw-regular);
	background: var(--acc-dark-green) !important;
	color: var(--acc-on-dark) !important;
	font-family: var(--acc-font-body) !important;
	border-top: 4px solid var(--acc-gold);
}
body #footer-outer #footer-widgets { padding: var(--acc-space-8) 0 var(--acc-space-6) !important; }
body #footer-outer #footer-widgets .container { max-width: var(--acc-container) !important; }

/* Widget headings */
body #footer-outer #footer-widgets .widget h4,
body #footer-outer #footer-widgets .widget .widget-title {
	margin: 0 0 var(--acc-space-4) !important;
	padding-bottom: var(--acc-space-2);
	border-bottom: 1px solid rgba(250, 246, 238, 0.2);
	font-family: var(--acc-font-body) !important;
	font-size: 13px !important;
	font-weight: var(--acc-fw-bold) !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--acc-cream) !important;
}

/* Widget menus */
body #footer-outer .widget ul.menu { margin: 0 !important; padding: 0 !important; list-style: none; }
body #footer-outer .widget ul.menu li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-family: var(--acc-font-body) !important;
}
body #footer-outer .widget ul.menu li a {
	display: inline-block;
	font-weight: var(--acc-fw-regular) !important;
	padding: 6px 0 !important;
	font-family: var(--acc-font-body) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--acc-cream) !important;
	text-decoration: none !important;
	opacity: 1 !important;
}
body #footer-outer .widget ul.menu li a:hover,
body #footer-outer .widget ul.menu li a:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}
/* Location names read as the most important list: set in the heading face */
body #footer-outer #menu-locations li a {
	font-family: var(--acc-font-head) !important;
	font-size: 18px !important;
}
body #footer-outer p,
body #footer-outer .widget { color: var(--acc-on-dark) !important; }

/* Copyright row */
body #footer-outer #copyright {
	background: transparent !important;
	border-top: 1px solid rgba(250, 246, 238, 0.15) !important;
	padding: var(--acc-space-5) 0 !important;
}
body #footer-outer #copyright p,
body #footer-outer #copyright li a {
	font-family: var(--acc-font-body) !important;
	font-weight: var(--acc-fw-regular) !important;
	font-size: 14px !important;
	color: var(--acc-on-dark) !important;
}
body #footer-outer #copyright li a:hover { color: var(--acc-cream) !important; text-decoration: underline !important; }
body #footer-outer #footer-copyright-menu { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: var(--acc-space-2) !important; }
body #footer-outer #footer-copyright-menu li { margin: 0 !important; float: none !important; }
body #footer-outer #copyright .social li a { color: var(--acc-cream) !important; }

/* Focus on dark */
body #footer-outer a:focus-visible {
	outline: 3px solid var(--acc-focus-on-dark) !important;
	outline-offset: 2px !important;
}

/* Phones: three widget columns stack with room between them */
@media (max-width: 690px) {
	body #footer-outer #footer-widgets .col { margin-bottom: var(--acc-space-6) !important; }
	body #footer-outer #footer-widgets { padding-top: var(--acc-space-7) !important; }
	/* Two columns for the short location list */
	body #footer-outer #menu-locations { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--acc-space-4); }
}