/*
 Theme Name:   Fil-Nation Sites
 Theme URI:    https://filnationselect.com
 Description:  Content-driven multi-site system for Fil-Nation Select sport and region subdomains. GeneratePress child theme: semantic design tokens, light/dark base plus color/type preset variations, a single branding options page, and the Fil-Nation pattern library. Application workflow and custom blocks live in the companion plugin filnation-site-kit.
 Author:       Fil-Nation Select
 Template:     generatepress
 Version:      0.2.14
 Requires at least: 6.5
 Requires PHP: 7.4
 Text Domain:  filnation-sites
*/

/*
 * Design is driven by theme.json tokens and the /styles variations.
 * Keep this file for small runtime rules only; never hardcode brand
 * colors or fonts here — they belong in theme.json / the branding page.
 */

/* ---------------------------------------------------------------------------
 * Header — match filnationselect.com: logo mark + uppercase nav, accent hover.
 * Colors come from the branding accent token, never hardcoded here.
 * ------------------------------------------------------------------------- */

/* Placeholder logo carries the wordmark, so hide the separate text title. */
.fns-placeholder-logo .site-title,
.fns-placeholder-logo .main-title { display: none; }

.site-header .header-image.is-logo-image { height: 40px; width: auto; }

/* Uppercase, spaced nav like the main site. */
.main-navigation .main-nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--heading, inherit);
}

/* Accent on hover and the current page. */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a {
	color: var(--wp--preset--color--accent, #c8102e);
}

/* Optional header CTA button (set on the Branding page), sits at end of nav. */
.fns-header-cta { display: flex; align-items: center; margin-left: 1.25rem; }
.fns-header-cta .wp-element-button { padding: 0.5em 1.1em; line-height: 1.2; }

/* --- Header layouts (chosen on the Branding page) --------------------------
 * "inline" is GeneratePress' default (logo left, menu right) — no rules needed.
 */

/* Center: logo centered on top, menu centered below. */
.fns-header-center .site-header .inside-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.fns-header-center .main-navigation { width: 100%; }
.fns-header-center .main-navigation .inside-navigation,
.fns-header-center .main-navigation .main-nav > ul { justify-content: center; }

/* Stack: logo left, menu on its own row below (still left-aligned). */
.fns-header-stack .site-header .inside-header { flex-wrap: wrap; }
.fns-header-stack .main-navigation.sub-menu-right { flex-basis: 100%; }
.fns-header-stack .main-navigation .inside-navigation,
.fns-header-stack .main-navigation .main-nav > ul { justify-content: flex-start; }

/* Sticky header — keeps whatever background the header already has. */
.fns-header-sticky .site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Trimmer header by default, and collapse the vertical padding entirely once the
 * page is scrolled (sticky headers only) so the bar takes minimal height. The
 * `fns-scrolled` body class is toggled by a small scroll listener (inc/header.php). */
.site-header .inside-header {
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	transition: padding 0.2s ease;
}
body.fns-header-sticky.fns-scrolled .site-header .inside-header {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- Header background (chosen on the Branding page) -----------------------
 * Dark is the default; light is opt-in. Colors come from the branding tokens.
 */
.fns-header-dark .site-header {
	background: var(--wp--preset--color--text, #14181f);
}
/* GeneratePress gives the nav its own (light) background — clear it on dark. */
.fns-header-dark .main-navigation,
.fns-header-dark .main-navigation .inside-navigation,
.fns-header-dark .main-navigation ul ul {
	background: transparent;
}
/* Dropdown submenus still need a solid panel to be readable. */
.fns-header-dark .main-navigation .main-nav ul ul {
	background: var(--wp--preset--color--text, #14181f);
}
.fns-header-dark .main-navigation .main-nav ul li a,
.fns-header-dark .menu-toggle {
	color: var(--wp--preset--color--bg, #fff);
}
.fns-header-dark .main-navigation .main-nav ul li a:hover,
.fns-header-dark .main-navigation .main-nav ul li.current-menu-item > a,
.fns-header-dark .main-navigation .main-nav ul li[class*="current-menu"] > a {
	color: var(--wp--preset--color--accent, #c8102e);
}

/* On an already-dark scheme (e.g. "night") the text token is LIGHT, so the rules
 * above would paint a "dark" header white. Re-point the dark-header tokens to the
 * scheme's own dark ground / light text, and give a "light" header the light text
 * token as its ground. */
.fns-scheme-dark.fns-header-dark .site-header,
.fns-scheme-dark.fns-header-dark .main-navigation .main-nav ul ul {
	background: var(--wp--preset--color--bg, #0d1117);
}
.fns-scheme-dark.fns-header-dark .main-navigation .main-nav ul li a,
.fns-scheme-dark.fns-header-dark .menu-toggle {
	color: var(--wp--preset--color--text, #f0f3f6);
}
.fns-scheme-dark.fns-header-light .site-header {
	background: var(--wp--preset--color--text, #f0f3f6);
}

.fns-header-light .site-header {
	background: var(--wp--preset--color--bg, #fff);
}

/* --- Transparent header (Branding → Transparent header) -------------------
 * Overlays the top of the page so the hero image shows through. The header is
 * treated as dark (fns_header_is_dark), so the logo + nav text are already
 * light. It sits above content without taking layout space; the hero's own top
 * padding keeps content clear of the bar. */
.fns-header-transparent .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
}
/* When also sticky, keep it pinned and fade in a solid ground once scrolled so
 * the menu stays readable over page content (reuses the fns-scrolled flag). */
.fns-header-transparent.fns-header-sticky .site-header {
	position: fixed;
}
body.fns-header-transparent.fns-header-sticky.fns-scrolled .site-header {
	background: var(--wp--preset--color--text, #14181f);
}
.fns-scheme-dark.fns-header-transparent.fns-header-sticky.fns-scrolled .site-header {
	background: var(--wp--preset--color--bg, #0d1117);
}

/* --- Header width (Branding → Header width) --------------------------------
 * Contained keeps GeneratePress' container max-width; Full width spans edge to
 * edge with a comfortable gutter. */
.fns-header-w-wide .site-header .inside-header {
	max-width: none;
	padding-left: max(1.5rem, 4vw);
	padding-right: max(1.5rem, 4vw);
}

/* -------------------------------------------------------------------------
 * Block-built pages (body.fns-blocks): full-bleed, gapless.
 * GeneratePress wraps content in .site-content > .content-area > .site-main >
 * .inside-article > .entry-content, each carrying padding + a block gap. On a
 * page made of full-bleed Fil-Nation sections those show as white bands between
 * sections and a gap under the header. Strip that container chrome so the
 * sections meet flush and run edge-to-edge; each section owns its own padding
 * (Style → Dimensions). Ordinary pages (no fns-blocks class) are untouched.
 * ---------------------------------------------------------------------- */
.fns-blocks .site-content,
.fns-blocks .content-area,
.fns-blocks .site-main,
.fns-blocks .inside-article,
.fns-blocks .entry-content {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
	border: 0;
	/* GeneratePress paints the body #f7f8f9 and each container #fff — that is the
	 * "two backgrounds" seam. Strip container chrome so there is ONE background
	 * (the scheme's bg token on the body below), which every section sits on. */
	background: transparent !important;
	box-shadow: none !important;
}
/* One consistent page background = the active colour scheme's bg token, and the
 * base text colour follows the scheme too (so a dark scheme like "night" doesn't
 * fall back to the theme's default dark text and read dark-on-dark). */
body.fns-blocks {
	background: var(--wp--preset--color--bg, #ffffff) !important;
	color: var(--wp--preset--color--text, #14181f);
}
/* Remove the inter-block gap so sections butt together. */
.fns-blocks .entry-content > * {
	margin-block: 0;
}

/* Global DARK base theme (Branding → Base theme). Default sections render dark
 * (their color mode resolves to dark in the plugin); the page ground matches so
 * any gap is dark too. A block set to Light mode still overrides locally. */
body.fns-blocks.fns-base-dark { background: var(--wp--preset--color--text, #14181f) !important; }

/* Global "Fil-Nation" base theme (Branding → Base theme → Fil-Nation). The page
 * ground is the brand charcoal (matches the gradient images' dark edge, so any
 * seam is invisible); each default section alternates the brand BLUE and RED
 * gradient images, mirroring filnationselect.com. Sections that carry their own
 * background (.fnkit-has-bg) are left untouched. The base counts as dark (see
 * header.php), so section text resolves light over these dark gradients. */
body.fns-blocks.fns-base-filnation { background: #1c1c1c !important; }
body.fns-base-filnation .entry-content > *:not( .fnkit-has-bg ) {
	background-image: url( "assets/backgrounds/blue-gradient-bg.webp" );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
body.fns-base-filnation .entry-content > *:not( .fnkit-has-bg ):nth-child( even ) {
	background-image: url( "assets/backgrounds/red-gradient-bg.webp" );
}

/* -------------------------------------------------------------------------
 * Mobile navigation — the burger + the toggled menu panel.
 * GeneratePress shows .menu-toggle below its nav breakpoint (default 768px) and
 * reveals .main-navigation .main-nav on .toggled. We give the burger a branded
 * pill and turn the panel into a full-width, big-tap-target, uppercase menu that
 * matches the site's sporty type.
 * ---------------------------------------------------------------------- */
.menu-toggle {
	display: none;
	font-family: var(--wp--preset--font-family--heading, inherit);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}
@media (max-width: 768px) {
	.menu-toggle { display: flex; align-items: center; }

	/* The burger — a clean, minimal icon button. No filled box: just the
	 * accent-coloured glyph with a generous tap target. Accent red keeps it
	 * visible on the light header; white on the dark header. */
	.main-navigation .menu-toggle,
	.fns-header-light .main-navigation .menu-toggle,
	.fns-header-dark .main-navigation .menu-toggle {
		margin-left: auto;
		padding: 0;
		border: 0;
		background: transparent;
		/* Accent red reads on both the light header bar and a dark one, so pin
		 * it here and win any specificity fight with GP / the dark-header rule. */
		color: var(--wp--preset--color--accent, #c8102e) !important;
	}
	.main-navigation .menu-toggle .gp-icon { width: 1.6em; height: 1.6em; }
	/* Force the glyph to take the button colour (GP's svg doesn't inherit it). */
	.main-navigation .menu-toggle .gp-icon svg,
	.main-navigation .menu-toggle .gp-icon svg path {
		fill: currentColor !important;
		color: currentColor;
	}

	/* Swap the burger for a close (×) icon while the overlay is open. GP keeps
	 * the bars glyph by default, so hide it and draw an X inside the icon's SAME
	 * fixed box (two rotated bars) — keeps the button the same size and position
	 * so it doesn't jump when toggled. */
	.main-navigation.toggled .menu-toggle .gp-icon svg { display: none; }
	.main-navigation.toggled .menu-toggle .gp-icon {
		position: relative;
		display: inline-block;
	}
	.main-navigation.toggled .menu-toggle .gp-icon::before,
	.main-navigation.toggled .menu-toggle .gp-icon::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 8%;
		right: 8%;
		height: 2px;
		background: currentColor;
	}
	.main-navigation.toggled .menu-toggle .gp-icon::before { transform: translateY(-50%) rotate(45deg); }
	.main-navigation.toggled .menu-toggle .gp-icon::after { transform: translateY(-50%) rotate(-45deg); }

	/* The open menu is an overlay: it drops over the page content instead of
	 * pushing it down. Anchored to the header so it sits right below the bar,
	 * and scrolls internally if the menu is taller than the viewport. GP swaps
	 * the burger glyph to a close (×) icon while .toggled. */
	.site-header { position: relative; }
	/* GeneratePress renders two navs: the burger lives in
	 * .mobile-menu-control-wrapper, and the actual menu is the other nav (with
	 * flex-basis:100%). In the wrapping header flexbox that full-width menu adds
	 * a row and grows the header when shown, so lift the whole menu nav out of
	 * flow — it then floats as an overlay anchored to the header bottom and
	 * neither pushes the page down nor grows the bar. */
	.main-navigation.toggled:not(.mobile-menu-control-wrapper) {
		position: absolute !important;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0 !important;
		z-index: 100;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		background: var(--wp--preset--color--surface, #14181f) !important;
		border-top: 3px solid var(--wp--preset--color--accent, #c8102e);
		box-shadow: 0 24px 44px rgba(0, 0, 0, 0.4);
	}

	/* The revealed list fills the overlay panel (bg + accent border live on the
	 * panel wrapper above so it's opaque edge to edge). */
	.main-navigation .main-nav > ul {
		background: transparent;
		padding: 0 0 0.5rem;
	}
	.main-navigation .main-nav ul li {
		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	}
	.main-navigation .main-nav ul li:last-child { border-bottom: 0; }

	/* Big, thumb-friendly, uppercase items. The panel is always the scheme
	 * surface (dark on night), so pin item text to the scheme text token for
	 * contrast regardless of the header's own light/dark setting. */
	.main-navigation .main-nav ul li a,
	.fns-header-light .main-navigation .main-nav ul li a,
	.fns-header-dark .main-navigation .main-nav ul li a {
		display: block;
		padding: 1rem 1.5rem;
		font-size: 1.15rem;
		letter-spacing: 0.06em;
		color: var(--wp--preset--color--text, #14181f);
	}
	.main-navigation .main-nav ul li a:hover,
	.main-navigation .main-nav ul li.current-menu-item > a {
		background: color-mix(in srgb, var(--wp--preset--color--accent, #c8102e) 14%, transparent);
		color: var(--wp--preset--color--accent, #c8102e);
	}

	/* Sub-menus indent instead of floating. */
	.main-navigation .main-nav ul ul { position: static; box-shadow: none; }
	.main-navigation .main-nav ul ul li a { padding-left: 2.75rem; font-size: 1rem; opacity: 0.9; }

	/* Header CTA button: full width inside the open menu. */
	.fns-header-cta { padding: 0.9rem 1.5rem; }
	.fns-header-cta .wp-element-button { display: block; text-align: center; }

	/* Shorter header: trim the vertical padding and logo on small screens. */
	.site-header .inside-header {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		align-items: center;
	}
	.site-header .site-logo img,
	.site-branding img { max-height: 34px; }
}

/* -------------------------------------------------------------------------
 * Footer — match filnationselect.com: the dark brand bar with a "© <year>
 * <NAME>" line on the left and social icons on the right. Text uses the light
 * (bg) token on the dark (text) token ground, mirroring the dark header, so it
 * stays legible on every colour scheme.
 * ---------------------------------------------------------------------- */
.site-info {
	background: var(--wp--preset--color--text, #14181f);
	color: var(--wp--preset--color--bg, #fff);
}
.fns-scheme-dark .site-info {
	background: var(--wp--preset--color--bg, #0d1117);
	color: var(--wp--preset--color--text, #fff);
}
.site-info .inside-site-info { text-align: left; }
.site-info .copyright-bar {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.site-info .copyright {
	color: inherit;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.fns-footer-social {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
.fns-footer-social__link {
	display: inline-flex;
	color: inherit;
	opacity: 0.85;
	transition: opacity 0.15s ease, color 0.15s ease;
}
.fns-footer-social__link:hover,
.fns-footer-social__link:focus-visible {
	opacity: 1;
	color: var(--wp--preset--color--accent, #c8102e);
}

@media (max-width: 480px) {
	.site-info .copyright-bar { justify-content: center; text-align: center; }
}

/* --- Footer top band (logo + tagline + nav, above the copyright bar) --------
 * Shares the dark footer ground. Renders only when the site sets a footer logo,
 * tagline, or footer menu (see inc/footer.php). */
.fns-footer-top {
	background: var(--wp--preset--color--text, #14181f);
	color: var(--wp--preset--color--bg, #fff);
}
.fns-scheme-dark .fns-footer-top {
	background: var(--wp--preset--color--bg, #0d1117);
	color: var(--wp--preset--color--text, #fff);
}
.fns-footer-top__inner {
	max-width: var(--wp--style--global--content-size, 1240px);
	margin-inline: auto;
	padding: 2.5rem max(1.5rem, 4vw);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	flex-wrap: wrap;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fns-footer-top__brand { display: flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; }
.fns-footer-top__logo img { height: 44px; width: auto; display: block; }
.fns-footer-top__tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.85;
}
.fns-footer-nav__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}
.fns-footer-nav__menu a {
	color: inherit;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
	transition: color 0.15s ease, opacity 0.15s ease;
}
.fns-footer-nav__menu a:hover,
.fns-footer-nav__menu a:focus-visible { opacity: 1; color: var(--wp--preset--color--accent, #c8102e); }

@media (max-width: 680px) {
	.fns-footer-top__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Header / footer ↔ body width alignment --------------------------------
 * The block-built body (.fnkit-block) centres its content to --fnkit-content
 * (default 1240px) with a min 1.5rem side gutter, via a full-bleed section with
 * padding-inline: max(1.5rem, (100vw - content)/2). Left on their own, the theme
 * chrome uses THREE different widths that don't line up with that: GeneratePress'
 * 1200px container (header + copyright bar) and the 900px theme.json contentSize
 * (footer top band). Re-base all of them on the SAME formula so their left/right
 * edges land exactly under the body sections. The header only aligns when it is
 * "Contained"; "Full width" (fns-header-w-wide) keeps its own edge-to-edge gutter.
 * These bars are full width (background spans the viewport); only the inner
 * container is re-based, so backgrounds still bleed edge to edge. */
body.fns-header-w-contained .site-header .inside-header,
.site-info .inside-site-info,
.fns-footer-top__inner {
	max-width: none;
	width: auto;
	/* Mirror .fnkit-block exactly: break out to the full viewport (50% - 50vw)
	 * and use the same gutter formula, so the content column is measured against
	 * 100vw just like the body. Without the breakout these bars are width:100%
	 * (which excludes the scrollbar), leaving a ~scrollbar-width offset from the
	 * body sections. The bar backgrounds live on the parent, so they're unaffected. */
	margin-inline: calc(50% - 50vw);
	padding-inline: max(1.5rem, calc((100vw - var(--fnkit-content, 1240px)) / 2));
}