/* =========================================================================
   Main Header — Social Links integration (Official + Custom; see
   inc/header-actions.php + template-parts/header-main.php). Scoped
   strictly to .gzfc-header-social so nothing else in the header
   (branding, search, header actions, menu toggle) is affected.

   Icon Size, Spacing and Position are admin-configurable (Header panel >
   Main Header) and come through as the three CSS custom properties below,
   auto-emitted by the framework's own css-output.php from the css_var keys
   set on those controls — the same mechanism that already drives every
   other live-preview color/size setting in the theme. The px/order
   fallbacks below match the settings' own defaults, so nothing changes
   visually on a site that has not touched those controls yet.
   ========================================================================= */

/* Social Links block (Header only): same underlying URLs/icons as the
   framework's Social Links panel, rendered by gzfc_render_header_social()
   (inc/header-actions.php) so the per-platform "Show in Header"
   Enable/Disable switches, plus the separate Custom Social Links entries,
   can apply — WITHOUT changing the Footer, Sidebar widget or Mobile Menu,
   which still use the framework's own unrestyled .gzf-social-icons markup
   untouched. */
.gzfc-header-social {
	display: flex;
	align-items: center;
	order: var(--gzfc-social-order, 0);
}
.gzfc-header-social .gzf-social-icons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gzfc-social-icon-gap, 10px);
	margin-top: 0; /* Parent stylesheet's default assumes a stacked layout; not needed here. */
}
.gzfc-header-social .gzf-social-icon {
	width: var(--gzfc-social-icon-size, 34px);
	height: var(--gzfc-social-icon-size, 34px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: var(--gzf-color-muted, #98979f);
	transition: color .2s ease, background-color .2s ease;
}
.gzfc-header-social .gzf-social-icon svg {
	width: 52%;
	height: 52%;
}
.gzfc-header-social .gzf-social-icon:hover {
	color: var(--gzf-color-primary, #ff4d1c);
}

/* Custom Social Links: admin-uploaded icon/logo images share the exact
   same sizing box as the Official (SVG) icons above so Icon Size/Spacing
   applies identically to both groups. */
.gzfc-header-social .gzfc-custom-social-icon img {
	width: 62%;
	height: 62%;
	object-fit: contain;
	border-radius: 2px;
}