/**
 * Sitewide header and footer restyling.
 *
 * Reuses the site's real design tokens (--fp-primary-color etc., defined in
 * style.css) rather than inventing a new palette. Loads on every page since
 * the header and footer are shared template parts.
 *
 * @package Blocksy_Child_Freeperie
 * @since   2.2.0
 */

/* ---------- Announcement bar ---------- */

.fp-announcement-bar {
	background: #20241f;
	color: #fff;
	text-align: center;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.fp-announcement-bar .fp-bar-badge {
	background: rgba(56, 180, 73, 0.25);
	color: #72ef85;
	padding: 2px 9px;
	border-radius: 99px;
	font-weight: 700;
	display: inline-block;
	border: 1px solid rgba(114, 239, 133, 0.35);
}

.fp-announcement-bar .fp-bar-sep {
	opacity: 0.6;
	margin: 0 4px;
}

/* ---------- Header ---------- */

#header.ct-header {
	position: sticky;
	top: var( --wp-admin--admin-bar--height, 0px );
	z-index: 999;
	background: rgba(250, 247, 240, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid #e5e2d9;
}

#header .site-logo-container a,
#header .ct-logo {
	font-family: 'Fraunces', Georgia, serif;
}

/* ---------- Footer ---------- */

.ct-footer {
	--footer-bg: #20241f;
	background: #20241f;
	color: #c9cdc4 !important;
}

.ct-footer .ct-container {
	padding-top: 56px;
	padding-bottom: 24px;
}

/* Blocksy resets each footer widget's text back to the site's dark base
   text color (.ct-footer .ct-widget), which is invisible against the
   footer's dark background. Force it back to the light footer text. */
.ct-footer .ct-widget {
	color: #c9cdc4 !important;
}

.ct-footer .widget-title,
.ct-footer h2,
.ct-footer h3,
.ct-footer h4,
.ct-footer h2.wp-block-heading,
.ct-footer h3.wp-block-heading,
.ct-footer h4.wp-block-heading,
.ct-footer .wpforms-title {
	color: #fff !important;
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 600;
	border-bottom-color: rgba( 255, 255, 255, 0.2 ) !important;
}

.ct-footer a {
	color: #c9cdc4 !important;
}

.ct-footer a:hover {
	color: var( --fp-primary-color );
}

.ct-footer .wp-block-social-link {
	background: rgba( 255, 255, 255, 0.12 ) !important;
}

.ct-footer .wp-block-social-link a {
	color: #fff !important;
}

.ct-footer .wpforms-container input[type="email"],
.ct-footer .wpforms-container input[type="text"] {
	background: #fff;
	border-radius: 8px;
	padding: 10px 14px;
	border: 1px solid #3a3f37;
}

.ct-footer .wpforms-submit {
	background: var( --fp-primary-color ) !important;
	border-color: var( --fp-primary-color ) !important;
	border-radius: 999px !important;
}

.ct-footer-copyright {
	color: #9a9d95 !important;
	font-size: 12.5px;
}

.ct-footer-copyright a {
	color: #9a9d95 !important;
}

/* ---------- Footer on mobile/tablet ----------
 * The footer's rows were configured (Blocksy footer builder) to hide on
 * tablet and mobile ("footerRowVisibility"), leaving mobile visitors with
 * no footer at all. Force them back on: the theme's own `.ct-hidden-sm` /
 * `.ct-hidden-md` utility classes hide with `!important` at those exact
 * breakpoints, so we match them here.
 */
@media ( max-width: 689.98px ) {
	.ct-footer .ct-hidden-sm {
		display: block !important;
	}
}

@media ( min-width: 690px ) and ( max-width: 999.98px ) {
	.ct-footer .ct-hidden-md {
		display: block !important;
	}
}