/*
Theme Name: Famedia
Author: Famedia
Description: A minimal, editorial block theme for Famedia Marketing Agency. Near-black canvas, oversized Inter type hierarchy, and a single gold accent reserved for calls to action.
Version: 1.2.4
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: famedia
*/

/* Skip link: off-screen until keyboard-focused, then jumps above the
   sticky header (z-index 100) so it's actually visible when focused. */
.famedia-skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--accent);
	color: #0F0E0C;
	font-weight: 600;
	text-decoration: none;
	border-radius: 6px;
	transition: top 0.15s ease;
}

.famedia-skip-link:focus {
	top: 1rem;
}

/* The sticky position must live on the template-part wrapper itself —
   a sticky group inside it would only stick within the wrapper's own height. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Nav links: no underline (the global link style would underline them),
   gold on hover. */
.wp-block-navigation a {
	text-decoration: none;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Desktop header: 3-zone grid — logo and button size to content, the nav
   stretches across the full middle and distributes its links.
   Selector must out-rank WP's `body .is-layout-flex` (0,1,1), which would
   otherwise keep the row as flexbox — hence the header.wp-block-template-part
   prefix (0,2,1). */
@media (min-width: 600px) {
	header.wp-block-template-part .famedia-header-row {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
	}

	header.wp-block-template-part .famedia-header-row > .wp-block-navigation {
		justify-self: stretch;
		width: 100%;
	}

	header.wp-block-template-part .famedia-header-row .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
		width: 100%;
		justify-content: center;
		gap: 3.5rem;
	}

	header.wp-block-template-part .famedia-header-row > .wp-block-buttons {
		justify-self: end;
	}

	/* The mobile-overlay-only Book a Call nav link (see header.php) has
	   no reason to duplicate the standalone button once the inline
	   desktop nav is showing. */
	header.wp-block-template-part .famedia-nav-book-call {
		display: none;
	}
}

/* Logo never shrinks: the header row is flex/nowrap below the 600px
   grid breakpoint, and without this the logo, nav toggle, and button
   fight over space and the logo gets visually compressed. */
.famedia-logo {
	flex-shrink: 0;
}

/* Mobile/tablet header: smaller logo (48px+ would crowd the bar next
   to the hamburger and button). !important is needed to beat the
   inline height/width. Width stays auto so the aspect ratio can't
   distort under the fixed height. */
@media (max-width: 781px) {
	.famedia-logo img {
		height: 40px !important;
		width: auto !important;
		flex-shrink: 0;
	}
}

/* Header button: never allowed to wrap or shrink into a chip. Below
   600px the row is flex/nowrap (the grid layout above hasn't kicked in
   yet), so this is the only thing standing between the button and a
   mid-word wrap under space pressure. */
header.wp-block-template-part .famedia-header-row .wp-block-buttons,
header.wp-block-template-part .famedia-header-row .wp-block-button__link {
	flex-shrink: 0;
}

header.wp-block-template-part .famedia-header-row .wp-block-button__link {
	white-space: nowrap;
}

/* Below 480px there is no viable width for the button. Fixed budget at
   these sizes: logo ~195px (40px tall at the logo's real ~4.9:1 aspect
   ratio) + 44px menu-toggle tap target already consumes ~239px, against
   ~280px of total available width at a 320px viewport after the theme's
   20px root gutters on each side (280px - 239px = ~41px left, nowhere
   near enough for a legible button at any padding/font-size). Drop it
   rather than compress it into something unreadable — the mobile nav
   overlay carries its own Book a Call link (see header.php) so booking
   is never more than one tap away, even on pages with no CTA section. */
@media (max-width: 479px) {
	header.wp-block-template-part .famedia-header-row .wp-block-buttons {
		display: none;
	}
}

/* 480-599px: the button fits once shown (verified: ~200px available
   against a ~116px reduced button, comfortable margin), but still give
   it a step down in padding/font so the flexible space stays in the
   gaps rather than the button's own footprint. */
@media (min-width: 480px) and (max-width: 599px) {
	header.wp-block-template-part .famedia-header-row .wp-block-button__link {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: 0.875rem;
		padding-right: 0.875rem;
		font-size: 0.875rem;
	}
}

/* Hamburger open/close buttons: 44px minimum tap target, larger icon. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

/* Mobile nav overlay: elevated surface layer (matches the CTA panel,
   not pure black), links anchored to a single consistent left edge
   and to the upper third of the screen rather than vertically
   centered, and a Book a Call button at the bottom of the list (see
   the famedia-nav-book-call link in header.php) since the header's
   own button hides below 480px. !important is used throughout this
   block because WP core's own overlay styles are otherwise more
   specific than a plain class selector. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--gray-light) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: 15vh;
	padding-left: 0;
	padding-right: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: 2.5rem;
	margin: 0;
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Every plain link's text starts at the same 2rem edge, set on the
   content element itself rather than relying on container alignment,
   so it can't drift depending on WP core's exact internal nesting. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.25rem 0 0.25rem 2rem !important;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--geist);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Book a Call: a real button chip (gold fill, dark ink, radius),
   starting at the same 2rem edge as the links above it via padding on
   the list item instead of the content element, which gets its own
   button-shaped padding instead of the full-width link treatment. */
.wp-block-navigation__responsive-container.is-menu-open .famedia-nav-book-call {
	display: flex !important;
	justify-content: flex-start !important;
	width: 100%;
	margin-top: 1rem;
	padding-left: 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .famedia-nav-book-call .wp-block-navigation-item__content {
	display: inline-flex;
	width: auto;
	margin: 0 !important;
	padding: 0.875rem 1.75rem !important;
	background-color: var(--wp--preset--color--accent);
	color: #0F0E0C !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: normal;
	border-radius: 6px;
}

.wp-block-navigation__responsive-container.is-menu-open .famedia-nav-book-call .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .famedia-nav-book-call .wp-block-navigation-item__content:focus {
	color: #0F0E0C !important;
}

/* Header hairline: a subtle line on a near-black bar, not the old light-theme gray. */
header.wp-block-template-part {
	border-bottom: 1px solid #1D1D1F;
}

/* Focus states: every interactive element gets a visible gold ring. Buttons
   already invert on hover/focus so the ring sits outside the fill. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Tactile press: buttons acknowledge the click with a quiet, physical scale
   rather than a color flash. */
.wp-block-button__link {
	transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:active {
	transform: scale(0.98);
}

/* Hero anchor: concentric hairline arcs cropped by the top-right
   corner, so the hero isn't text on a void (Clay-style asymmetry).
   Each circle is centered exactly at the SVG viewBox's top-right
   corner, so only its bottom-left quarter renders (SVG clips to the
   viewBox by default) — the crop is geometric, not a CSS mask.
   Positioned relative to .wp-block-cover, which core cover styles
   already make a positioning context. Pure CSS/SVG, no images. */
.famedia-hero-anchor {
	position: absolute;
	top: 0;
	right: 0;
	width: min(42vw, 560px);
	aspect-ratio: 1;
	pointer-events: none;
	opacity: 0;
}

.famedia-hero-anchor svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.famedia-hero-anchor {
		animation: famedia-hero-anchor-in 2.4s ease-out 0.3s forwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.famedia-hero-anchor {
		opacity: 1;
	}
}

@keyframes famedia-hero-anchor-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media (max-width: 781px) {
	.famedia-hero-anchor {
		display: none;
	}
}

/* Sparse scroll reveal: each top-level section fades and rises slightly as it
   enters the viewport. Pure CSS, no scroll listeners, no parallax — the
   animation just tracks the section's own position via the native scroll
   timeline. Unsupported browsers simply render the static, finished state. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		main > .wp-block-group.alignfull,
		main > .wp-block-group > .wp-block-group.alignfull {
			animation: famedia-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 25%;
		}

		@keyframes famedia-reveal {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
}