/*
Theme Name: Elf Advertising
Theme URI: https://elfadvertising.ro/
Author: Elf Advertising
Author URI: https://elfadvertising.ro/
Description: A custom WordPress theme for Elf Advertising, a Romania-based advertising, print production, signage, retouching, digital banner, editing, and photography company.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
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: elf-advertising
Tags: custom-logo, custom-menu, featured-images, full-site, business, portfolio
*/

:root {
	--elf-ink: #070707;
	--elf-paper: #f4f0e8;
	--elf-panel: #ffffff;
	--elf-muted: #756f67;
	--elf-line: rgba(7, 7, 7, 0.14);
	--elf-orange: #ff5a1f;
	--elf-cyan: #23b7d0;
	--elf-green: #63b34d;
	--elf-max: 1360px;
	--elf-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--elf-paper);
	color: var(--elf-ink);
	font-family: var(--elf-font);
	margin: 0;
	text-rendering: optimizeLegibility;
}

img {
	height: auto;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--elf-orange);
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
}

.elf-wrap {
	margin: 0 auto;
	max-width: var(--elf-max);
	padding: 0 clamp(22px, 5vw, 72px);
	width: 100%;
}

.site-header {
	background: rgba(244, 240, 232, 0.94);
	border-bottom: 1px solid var(--elf-line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: 32px;
	justify-content: space-between;
	min-height: 82px;
}

.brand {
	align-items: center;
	display: inline-flex;
	gap: 14px;
	min-width: 180px;
}

.brand a {
	display: inline-flex;
}

.brand img {
	display: block;
	height: 52px;
	width: auto;
}

.brand__text {
	display: none;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.menu-toggle {
	background: transparent;
	border: 1px solid var(--elf-line);
	display: none;
	font-size: 13px;
	font-weight: 850;
	letter-spacing: 0.08em;
	padding: 12px 14px;
	text-transform: uppercase;
}

.primary-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	font-size: 13px;
	font-weight: 850;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.primary-menu .cta-link a,
.header-cta {
	background: var(--elf-ink);
	color: var(--elf-panel);
	padding: 13px 16px;
}

.primary-menu .cta-link a:hover,
.header-cta:hover {
	background: var(--elf-orange);
	color: var(--elf-panel);
}

.elf-section {
	padding: clamp(72px, 9vw, 136px) 0;
}

.elf-eyebrow {
	color: var(--elf-orange);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.16em;
	margin: 0 0 22px;
	text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
	color: var(--elf-ink);
	font-family: var(--elf-font);
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
}

h1 {
	color: var(--elf-panel);
	font-size: clamp(52px, 8.5vw, 132px);
	max-width: 1120px;
}

h2 {
	font-size: clamp(38px, 5.8vw, 92px);
	margin-bottom: 28px;
}

h3 {
	font-size: clamp(24px, 2.5vw, 40px);
	margin-bottom: 16px;
}

p,
li {
	font-size: 17px;
	line-height: 1.66;
}

p {
	margin: 0 0 18px;
}

.hero {
	background:
		linear-gradient(90deg, rgba(7, 7, 7, 0.96) 0%, rgba(7, 7, 7, 0.82) 42%, rgba(7, 7, 7, 0.26) 100%),
		var(--hero-image) center right / cover no-repeat,
		var(--elf-ink);
	color: var(--elf-panel);
	min-height: min(860px, 94vh);
	padding: clamp(112px, 14vw, 190px) 0 clamp(80px, 10vw, 140px);
	position: relative;
}

.hero:after {
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 44px 44px;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.hero .elf-wrap {
	position: relative;
	z-index: 1;
}

.hero .elf-eyebrow {
	color: var(--elf-cyan);
}

.hero__lead {
	color: rgba(255, 255, 255, 0.78);
	font-size: clamp(18px, 2vw, 25px);
	line-height: 1.48;
	margin-top: 32px;
	max-width: 860px;
}

.elf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 40px;
}

.elf-button {
	align-items: center;
	background: var(--elf-orange);
	border: 1px solid var(--elf-orange);
	color: var(--elf-panel);
	display: inline-flex;
	font-size: 13px;
	font-weight: 900;
	justify-content: center;
	letter-spacing: 0.07em;
	min-height: 54px;
	padding: 0 24px;
	text-transform: uppercase;
}

.elf-button:hover,
.elf-button:focus {
	background: var(--elf-panel);
	border-color: var(--elf-panel);
	color: var(--elf-ink);
}

.elf-button--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--elf-panel);
}

.split,
.media-grid,
.cta-grid,
.contact-grid {
	display: grid;
	gap: clamp(34px, 6vw, 90px);
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.intro {
	background: var(--elf-panel);
	border-bottom: 1px solid var(--elf-line);
}

.media-grid {
	align-items: center;
}

.media-grid img,
.portfolio-image {
	aspect-ratio: 4 / 3;
	display: block;
	object-fit: cover;
	width: 100%;
}

.cards {
	background: var(--elf-line);
	border: 1px solid var(--elf-line);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(42px, 6vw, 76px);
}

.card {
	background: var(--elf-panel);
	min-height: 290px;
	padding: clamp(24px, 3vw, 38px);
}

.card span,
.steps span,
.service-detail span {
	color: var(--elf-orange);
	display: block;
	font-size: 13px;
	font-weight: 900;
	margin-bottom: 44px;
}

.dark {
	background: var(--elf-ink);
	color: var(--elf-panel);
}

.dark h2,
.dark h3,
.dark p {
	color: var(--elf-panel);
}

.dark .elf-eyebrow {
	color: var(--elf-cyan);
}

.dark p {
	color: rgba(255, 255, 255, 0.74);
}

.steps {
	border-top: 1px solid var(--elf-line);
}

.steps article {
	align-items: start;
	border-bottom: 1px solid var(--elf-line);
	display: grid;
	gap: 28px;
	grid-template-columns: 90px minmax(220px, 0.65fr) minmax(0, 1fr);
	padding: clamp(24px, 4vw, 48px) 0;
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0;
}

.tags span {
	background: var(--elf-panel);
	border: 1px solid var(--elf-line);
	display: inline-flex;
	font-size: 13px;
	font-weight: 850;
	letter-spacing: 0.04em;
	padding: 12px 14px;
	text-transform: uppercase;
}

.service-detail {
	border-bottom: 1px solid var(--elf-line);
	display: grid;
	gap: clamp(28px, 5vw, 76px);
	grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
	padding: clamp(34px, 5vw, 68px) 0;
}

.service-detail:first-child {
	border-top: 1px solid var(--elf-line);
}

.service-detail ul {
	columns: 2;
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-detail li {
	border-bottom: 1px solid var(--elf-line);
	break-inside: avoid;
	font-size: 15px;
	font-weight: 760;
	padding: 11px 0;
}

.cta {
	background:
		linear-gradient(135deg, rgba(255, 90, 31, 0.95), rgba(35, 183, 208, 0.86)),
		var(--elf-orange);
	color: var(--elf-ink);
}

.cta h2,
.cta p {
	color: var(--elf-ink);
}

.cta-grid {
	align-items: end;
}

.cta .elf-button {
	background: var(--elf-ink);
	border-color: var(--elf-ink);
	justify-self: end;
}

.cta .elf-button:hover {
	background: var(--elf-panel);
	border-color: var(--elf-panel);
	color: var(--elf-ink);
}

.contact-form {
	background: var(--elf-panel);
	border: 1px solid var(--elf-line);
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: clamp(24px, 4vw, 44px);
}

.contact-form label {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
	background: #fbfaf7;
	border: 1px solid var(--elf-line);
	border-radius: 0;
	display: block;
	font-size: 16px;
	margin-top: 8px;
	padding: 14px;
	width: 100%;
}

.contact-form__full,
.contact-form .elf-button {
	grid-column: 1 / -1;
}

.faq-list {
	background: var(--elf-line);
	border: 1px solid var(--elf-line);
	display: grid;
	gap: 1px;
}

.faq-list article {
	background: var(--elf-panel);
	padding: clamp(24px, 3vw, 38px);
}

.faq-list h2 {
	font-size: clamp(24px, 3vw, 38px);
	margin-bottom: 16px;
}

.site-footer {
	background: var(--elf-ink);
	color: var(--elf-panel);
	padding: clamp(58px, 8vw, 100px) 0 28px;
}

.footer-grid {
	display: grid;
	gap: clamp(32px, 6vw, 82px);
	grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.45fr) minmax(200px, 0.55fr);
}

.site-footer h2,
.site-footer h3,
.site-footer p,
.site-footer a {
	color: var(--elf-panel);
}

.site-footer h2 {
	font-size: clamp(36px, 5vw, 76px);
	margin-bottom: 24px;
}

.site-footer h3 {
	font-size: 14px;
	letter-spacing: 0.1em;
	margin-bottom: 18px;
	text-transform: uppercase;
}

.site-footer p,
.site-footer nav a {
	color: rgba(255, 255, 255, 0.72);
}

.site-footer nav a {
	display: block;
	font-size: 15px;
	font-weight: 650;
	margin-bottom: 10px;
}

.footer-bottom {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin-top: clamp(44px, 7vw, 80px);
	padding-top: 24px;
}

.footer-bottom p {
	font-size: 14px;
	margin: 0;
}

.entry-content {
	padding: clamp(60px, 8vw, 110px) 0;
}

@media (max-width: 1080px) {
	.split,
	.media-grid,
	.cta-grid,
	.contact-grid,
	.service-detail {
		grid-template-columns: 1fr;
	}

	.cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cta .elf-button {
		justify-self: start;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-grid > div {
		grid-column: 1 / -1;
	}
}

@media (max-width: 760px) {
	.site-header__inner {
		align-items: flex-start;
		flex-direction: column;
		padding: 18px 0;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.primary-menu {
		align-items: flex-start;
		display: none;
		flex-direction: column;
		width: 100%;
	}

	.nav-open .primary-menu {
		display: flex;
	}

	h1 {
		font-size: clamp(42px, 13vw, 72px);
	}

	h2 {
		font-size: clamp(32px, 10vw, 56px);
	}

	.hero {
		background:
			linear-gradient(180deg, rgba(7, 7, 7, 0.96), rgba(7, 7, 7, 0.76)),
			var(--hero-image) center / cover no-repeat,
			var(--elf-ink);
		min-height: auto;
	}

	.elf-actions,
	.contact-form {
		grid-template-columns: 1fr;
	}

	.elf-actions {
		flex-direction: column;
	}

	.elf-button {
		width: 100%;
	}

	.cards,
	.steps article {
		grid-template-columns: 1fr;
	}

	.service-detail ul {
		columns: 1;
	}

	.footer-grid,
	.footer-bottom {
		display: block;
	}

	.site-footer nav {
		margin-top: 28px;
	}
}