/*
Theme Name: Agency Starter
Description: Child theme of Hello Elementor. Design lives in Elementor; this theme holds small CSS and PHP tweaks.
Author: Media Farm
Template: hello-elementor
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: starter
Update URI: false
*/

/*
 * Colours and fonts come from Elementor → Site Settings (set by `make brand`).
 * Everything here uses Elementor's global variables so it follows the brand:
 *   --e-global-color-primary / secondary (ink) / text / accent / paper / white
 *   --e-global-typography-<id>-font-family
 *
 * st-* classes are added to elements by scripts/elementor-starter.php.
 * Add them yourself in Elementor → Advanced → CSS Classes.
 */

:root {
	--st-ink: var(--e-global-color-secondary, #111);
	--st-primary: var(--e-global-color-primary, #ff4d1c);
	--st-accent: var(--e-global-color-accent, #d4ff3a);
	--st-paper: var(--e-global-color-paper, #f2efe9);
	--st-display: var(--e-global-typography-primary-font-family, sans-serif);
	--st-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--st-gutter: 32px;
}

@media (max-width: 767px) {
	:root {
		--st-gutter: 20px;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	height: auto;
}

::selection {
	background: var(--st-accent);
	color: var(--st-ink);
}

:focus-visible {
	outline: 2px solid var(--st-primary);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Header (Hello Elementor's built-in header — replace with Theme Builder later)
 * ------------------------------------------------------------------------- */

#site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--st-ink);
}

.admin-bar #site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* The admin bar scrolls away on small screens. */
@media (max-width: 600px) {
	.admin-bar #site-header {
		top: 0;
	}
}

@media (max-width: 767px) {
	#site-header .header-inner {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	#site-header .site-title,
	#site-header .site-title a {
		font-size: 18px;
	}
}

#site-header .header-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px var(--st-gutter);
	align-items: center;
}

#site-header .site-title,
#site-header .site-title a {
	margin: 0;
	font-family: var(--st-display);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--st-ink);
}

#site-header .site-navigation ul.menu {
	gap: 4px;
}

#site-header .site-navigation ul.menu li a,
#site-header .site-navigation-dropdown ul.menu li a {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--st-ink);
}

#site-header .site-navigation ul.menu li a {
	padding: 8px 14px;
	border-radius: 999px;
	transition: background-color 0.2s, color 0.2s;
}

#site-header .site-navigation ul.menu li a:hover,
#site-header .site-navigation ul.menu li.current-menu-item a {
	background: var(--st-ink);
	color: #fff;
}

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

#site-footer {
	background: var(--st-ink);
	color: var(--st-paper);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#site-footer .footer-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 32px var(--st-gutter);
}

#site-footer,
#site-footer a,
#site-footer .site-title,
#site-footer .site-description,
#site-footer .copyright p {
	color: var(--st-paper);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

#site-footer .site-title a {
	font-family: var(--st-display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------
 * Marquee
 * ------------------------------------------------------------------------- */

.st-marquee {
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.st-marquee__track {
	display: inline-flex;
	animation: st-marquee 40s linear infinite;
}

.st-marquee:hover .st-marquee__track {
	animation-play-state: paused;
}

.st-marquee__group {
	display: inline-flex;
	align-items: center;
}

.st-marquee__item {
	font-family: var(--st-display);
	font-size: clamp(32px, 5vw, 80px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--st-accent);
	padding: 0 0.35em;
}

.st-marquee__star {
	font-size: clamp(24px, 3vw, 48px);
	color: var(--st-primary);
	padding: 0 0.35em;
}

@keyframes st-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ---------------------------------------------------------------------------
 * Work cards & rows
 * ------------------------------------------------------------------------- */

.st-card {
	overflow: hidden;
	transition: transform 0.5s var(--st-ease), border-radius 0.5s var(--st-ease);
}

@media (hover: hover) {
	.st-card:hover {
		transform: translateY(-6px);
		border-radius: 28px;
	}
}

.st-card__arrow {
	display: inline-block;
	font-size: 28px;
	line-height: 1;
	transition: transform 0.4s var(--st-ease);
}

@media (hover: hover) {
	.st-card:hover .st-card__arrow,
	.st-row:hover .st-card__arrow {
		transform: rotate(45deg);
	}

	.st-row:hover {
		background-color: var(--st-primary);
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

.st-row {
	transition: background-color 0.35s var(--st-ease), padding 0.35s var(--st-ease);
}

/* Stats: left-aligned counters */
.st-stat .elementor-counter {
	align-items: flex-start;
	text-align: left;
}

.st-stat .elementor-counter-number-wrapper,
.st-stat .elementor-counter-title {
	justify-content: flex-start;
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * Links & buttons
 * ------------------------------------------------------------------------- */

body a.st-underline {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s, color 0.2s;
}

body a.st-underline:hover {
	color: var(--st-primary);
}

.st-btn .elementor-button {
	transition: background-color 0.25s, color 0.25s, transform 0.25s var(--st-ease);
}

@media (hover: hover) {
	.st-btn .elementor-button:hover {
		transform: translateY(-2px);
	}
}

/* Buttons that sit on a coloured or dark band: hover to white. */
.st-btn-light .elementor-button:hover,
.st-btn-light .elementor-button:focus {
	background-color: #fff !important;
	color: var(--st-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.st-marquee__track {
		animation: none;
	}

	.st-card,
	.st-card:hover,
	.st-btn .elementor-button:hover {
		transform: none;
	}
}