/**
 * Blue Frame Films: footer.css
 *
 * Purpose:  Site footer: logo, email, phone with Call/Text buttons, social links, copyright.
 *           Since 2.4.0 it is the matching film strip (sprocket bands drawn in header.css).
 * Used by:  template-parts/footer/site-footer.php (every page).
 * To edit:  .fphone keeps the number and both buttons on one line on phones.
 */

/* ==========================================================================
   Footer
   ========================================================================== */
footer.wp-block-template-part,
footer.bf-footer {
	position: relative;
	padding: calc(30px + var(--film-band)) 0;
	background: rgba(5,7,13,.82);
	box-shadow: 0 0 22px rgba(30,123,255,.14);
	color: var(--muted);
	font-size: .85rem;
}

footer .wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.foot-logo img {
	width: 120px;
	height: auto;
	display: block;
}

/* ==========================================================================
   Contact links
   ========================================================================== */
.fcontact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	justify-content: flex-end;
}

.fcontact a.mailto:hover {
	color: #fff;
}

.fphone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.fbtn {
	display: inline-flex;
	align-items: center;
	padding: .35rem .8rem;
	border: 1px solid rgba(0,194,255,.5);
	border-radius: 8px;
	color: var(--text);
	font-weight: 700;
	font-size: .8rem;
}

.fbtn:hover {
	background: rgba(0,194,255,.12);
}

/* Social links: smaller pills to match the Call/Text buttons (base styles in components.css) */
.bf-social-foot a {
	min-height: 32px;
	box-sizing: border-box;
	padding: .3rem .75rem .3rem .6rem;
	border-radius: 8px;
	font-size: .78rem;
	border-color: rgba(0,194,255,.35);
}

.bf-social-foot .bf-social-icon {
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:760px) {
	.fcontact {
		justify-content: flex-start;
	}

	/* Tap targets on phones */
	.fbtn,
	.bf-social-foot a {
		min-height: 44px;
	}

	.fcontact a.mailto {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* v2.6.0: link to Webonomics (the business-to-business side, /webonomics/). */
footer .fwbn { color: var(--muted, #aab3c5); text-decoration: underline; text-underline-offset: 3px; }
footer .fwbn:hover, footer .fwbn:focus-visible { color: var(--text, #fff); }