/*
 * Footer — matched to src/footer.jsx. Native Blocksy footer builder + widget
 * areas (col1 = logo + tagline + socials via Custom HTML; cols 2-4 = nav menus),
 * styled dark to the design tokens.
 *   bg emphasis · titles mono 11 uppercase white · links #A8A6A0 13 · copyright bar
 */

#footer.ct-footer {
	background: var(--sisa-emphasis);
	color: var(--sisa-on-emphasis-muted);
	font-family: var(--sisa-body);
}
/* Rhythm: the old blanket `> div` rule padded BOTH footer rows 60px (logo sat
   130px deep; ~220px dead gap above the copyright, whose hairline never showed). */
#footer.ct-footer > div { padding-block: 0; }
#footer [data-row="middle"] { padding-block: 60px 0; }
#footer [data-row="bottom"] > .ct-container {
	margin-top: 48px; padding-block: 20px 40px;
	border-top: 1px solid var(--sisa-emphasis-line);
}
/* Alignment: Blocksy's container gutter already matches the header grid; our
   extra --sisa-pad pushed footer content +32px right of the header logo. */
#footer .ct-container { max-width: var(--sisa-container); margin-inline: auto; }

/* Blocksy renders each footer widget in its own flex row. Make the .ct-container
   a 4-col grid so those rows line up as the design's columns. The copyright bar
   lives in a separate row/container, handled below. */
#footer .ct-container:has(.ct-widget) {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
	gap: 0 60px !important;
	align-items: start;
}
#footer .ct-container:has(.ct-widget) > div { display: block !important; min-width: 0; }

/* Column (widget) */
#footer .ct-widget { margin: 0; color: var(--sisa-on-emphasis-muted); }
#footer .widget-title,
#footer .ct-widget h3 {
	font-family: var(--sisa-mono);
	font-size: 11px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--sisa-on-emphasis); margin: 0 0 16px;
}
#footer .widget-menu,
#footer .ct-widget ul { list-style: none; margin: 0; padding: 0; }
#footer .widget-menu li,
#footer .ct-widget li { margin-bottom: 8px; }
#footer .ct-widget a { color: var(--sisa-on-emphasis-muted); text-decoration: none; font-size: 13px; }
#footer .ct-widget a:hover { color: var(--sisa-on-emphasis); }

/* ---------- Col 1: brand (logo + tagline + socials) ---------- */
.sisa-fbrand { color: var(--sisa-on-emphasis-muted); }
.sisa-fbrand__logo { display: block; width: 72px; height: auto; margin-bottom: 16px; }
.sisa-fbrand p { font-size: 13px; line-height: 1.6; max-width: 320px; margin: 0 0 20px; color: var(--sisa-on-emphasis-muted); }
.sisa-fbrand a { color: var(--sisa-on-emphasis-muted); }
.sisa-fsocial { display: flex; gap: 8px; }
.sisa-fsocial a {
	width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--sisa-emphasis-line); color: var(--sisa-on-emphasis-muted);
	font-family: var(--sisa-mono); font-size: 12px; text-decoration: none; transition: border-color .15s, color .15s;
}
.sisa-fsocial a:hover { border-color: var(--sisa-on-emphasis-muted); color: var(--sisa-on-emphasis); }

/* ---------- Copyright bar ---------- */
#footer .ct-footer-bottom {
	margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--sisa-emphasis-line);
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
	font-family: var(--sisa-mono); font-size: 11px; letter-spacing: .4px; color: var(--sisa-on-emphasis-dim);
}
#footer .ct-footer-bottom a { color: var(--sisa-on-emphasis-dim); text-decoration: none; text-transform: uppercase; }
#footer .ct-footer-bottom a:hover { color: var(--sisa-on-emphasis-muted); }
/* The copyright element carries both halves (functions/setup/footer.php): "© SICHERSATT
   AG {year}" left + IMPRESSUM·DATENSCHUTZ·AGB right. Spread them within the bottom bar. */
#footer .ct-footer-copyright { flex: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
#footer .ct-footer-copyright .sisa-foot-legal { display: inline-flex; gap: 24px; flex-wrap: wrap; }

/* Blocksy renders the copyright as [data-column="copyright"] (not .ct-footer-bottom),
   so the mono rule above never landed and it inherited the body font. Target the real
   element directly — design bottom bar = JetBrains Mono 11 / #676562 (dim). */
#footer [data-column="copyright"],
#footer .sisa-foot-copy,
#footer .sisa-foot-legal,
#footer .sisa-foot-legal a {
	font-family: var(--sisa-mono);
	font-size: 11px;
	letter-spacing: .4px;
	color: var(--sisa-on-emphasis-dim);
}
#footer [data-column="copyright"] a { text-decoration: none; text-transform: uppercase; }
#footer [data-column="copyright"] a:hover { color: var(--sisa-on-emphasis-muted); }

@media (max-width: 880px) {
	/* target the actual grid element (the :has container), and beat the !important
	   desktop rule. Design tablet = 3-col with the brand spanning full width. */
	#footer .ct-container:has(.ct-widget) { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 0 40px !important; }
	#footer .sisa-fbrand { grid-column: 1 / -1; margin-bottom: 32px; }
}
@media (max-width: 560px) {
	#footer .ct-container:has(.ct-widget) { grid-template-columns: 1fr !important; gap: 32px !important; }
	#footer.ct-footer > div { padding-block: 44px 28px; }
	#footer .ct-footer-bottom { margin-top: 32px; flex-direction: column; gap: 12px; }
}