/*
 * Hair Hungary - modernizalo reteg a jelenlegi arculat folott (Laci, 2026-10-01 10:50:
 * "jelenlegi, de legyen jobb, modernebb es ne legyen ai-s").
 * A marka marad: arany (#c1a764 / #a68d52 / #d2b76f), sotetszurke (#4c4d4f), Montserrat, valodi kepek.
 * Csak kivitel: terkoz, tipografiai hierarchia, gombok, fejlec, racs, mobil. Nincs gradiens, nincs
 * ikonkartya-racs, nincs arnyekos lebego kartya, nincs uj kep.
 * Retegen kivuli szabalyok: a marka-CSS @layer-ben all, ezert ezek !important nelkul is erosebbek.
 */
:root {
	--hh-gold: #c1a764;
	--hh-gold-deep: #a68d52;
	--hh-gold-soft: #f6f1e6;
	--hh-ink: #2e2f31;
	--hh-grey: #4c4d4f;
	--hh-muted: #6d6e71;
	--hh-line: #e6e0d2;
	--hh-max: 1200px;
}

/* ---------- alap tipografia ---------- */
body.albody, body.fobody {
	color: var(--hh-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.albody p, body.fobody p, body.albody li, body.fobody li {
	line-height: 1.7;
}

/* ---------- fejlec ---------- */
.header {
	background: #fff;
	border-bottom: 1px solid var(--hh-line);
	box-shadow: none;
}
.header ul.menu > li > a {
	font-weight: 500;
	letter-spacing: .08em;
	font-size: 12.5px;
	color: var(--hh-ink);
	transition: color .2s ease;
}
.header ul.menu > li > a:hover,
.header ul.menu > li:hover > a {
	color: var(--hh-gold-deep);
}
.header ul.menu > li > ul {
	border-top: 2px solid var(--hh-gold);
}
.header .langs a, .header .langs span {
	letter-spacing: .1em;
	font-weight: 500;
}

/* ---------- hero: elerhetosegi doboz es aranysav ---------- */
.info_cont .info a.segit_link {
	font-weight: 600;
	letter-spacing: .06em;
}
/* Az aranysav feher szovege gyengen olvashato; sotet szoveg, ugyanazon az aranyon. */
.links .desktop-links p a {
	color: var(--hh-ink);
	font-weight: 600;
	letter-spacing: .12em;
	font-size: 13px;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}
.links .desktop-links p a:hover {
	background-color: var(--hh-ink);
	color: #fff;
}

/* ---------- arany blokkok: egyszinu marka-arany, olvashato sotet szoveg ---------- */
.activa {
	background: var(--hh-gold);
}
.activa .cont h2,
.activa .cont p {
	color: var(--hh-ink);
}
.activa .cont h2:after {
	background: var(--hh-ink);
	width: 48px;
}
.header ul.menu > li > i.fa-angle-down {
	font-size: 11px;
	opacity: .5;
}

/* ---------- egysegesitett gombok (a sotetszurke dobozgombok helyett) ---------- */
.activa .cont a,
.elotte .cont a,
.csapatunk .cont a,
.video > a, .video .cont > a,
.blog a.blog_more,
#cikk p a.styled,
a.hh-btn {
	display: inline-block;
	height: auto;
	background: var(--hh-ink);
	color: #fff;
	border: 1px solid var(--hh-ink);
	border-radius: 0;
	padding: 14px 30px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.activa .cont a:hover,
.elotte .cont a:hover,
.csapatunk .cont a:hover,
.video > a:hover, .video .cont > a:hover,
.blog a.blog_more:hover,
#cikk p a.styled:hover,
a.hh-btn:hover {
	background: #fff;
	color: var(--hh-ink);
	border-color: #fff;
}
.elotte .cont a:hover,
.blog a.blog_more:hover,
#cikk p a.styled:hover,
a.hh-btn:hover {
	background: var(--hh-gold);
	border-color: var(--hh-gold);
	color: #fff;
}
/* A blokkgombok a bekezdes vegen allnak: sajat sorban, kozepre. */
.activa .cont p a,
.elotte .cont p a {
	display: table;
	margin: 26px auto 0;
}
a.hh-btn.hh-btn-outline {
	background: transparent;
	color: var(--hh-ink);
	border-color: var(--hh-ink);
}

/* ---------- szekciocimek: tisztabb hierarchia ---------- */
.activa h2, .elotte h2, .csapatunk h2, .video h2, .virtualis h2, .miert h2 {
	font-weight: 400;
	letter-spacing: .06em;
}
.activa .cont h2 {
	font-size: 26px;
	line-height: 1.25;
	margin-bottom: 18px;
}
.elotte .cont h2 {
	font-size: 28px;
	color: var(--hh-ink);
}
.csapatunk .cont h2 {
	font-size: 28px;
}
.video h2 {
	font-size: 34px;
	letter-spacing: .08em;
}

/* ---------- "Talalja meg a kovetkezo lepest" - a racs rendezese ---------- */
section.hh-block, div.hh-block {
	padding-top: 88px;
	padding-bottom: 88px;
}
.hh-wrap {
	max-width: var(--hh-max);
}
.hh-cols article {
	border-top: 1px solid var(--hh-gold);
	padding-top: 26px;
}
.hh-cols article h3 {
	font-weight: 500;
	letter-spacing: .02em;
}
.hh-cols article a {
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--hh-gold-deep);
}

/* ---------- szakertoi blokk ---------- */
.hh-expert {
	gap: 56px;
	align-items: center;
}
.hh-expert-name {
	letter-spacing: .01em;
}

/* ---------- videogaleria ---------- */
.video .yt-shorts-grid {
	gap: 20px;
}
.video .yt-short iframe {
	border-radius: 0;
}

/* ---------- visszahivas-urlap ---------- */
.hivas form input,
.hivas form select,
.hivas form textarea {
	border: 1px solid var(--hh-line);
	border-radius: 0;
	background: #fff;
	min-height: 48px;
	padding: 0 14px;
	font-size: 14px;
	color: var(--hh-ink);
	box-shadow: none;
}
.hivas form input:focus,
.hivas form select:focus,
.hivas form textarea:focus {
	outline: 2px solid var(--hh-gold);
	outline-offset: 0;
	border-color: var(--hh-gold);
}
.hivas form button {
	letter-spacing: .14em;
	font-weight: 600;
	font-size: 13px;
	border-radius: 0;
}

/* ---------- aloldalak (#cikk) olvashatosaga ---------- */
#cikk {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}
#cikk p, #cikk li {
	font-size: 16px;
	color: var(--hh-ink);
}
#cikk h2 {
	margin-top: 56px;
	margin-bottom: 20px;
}
h1.cikk_title span {
	letter-spacing: .06em;
}

/* ---------- lablec ---------- */
.footer .menu a {
	transition: color .2s ease;
}
.footer .menu a:hover {
	color: var(--hh-gold);
}

/* ---------- mobil ---------- */
@media (max-width: 767px) {
	.activa .cont h2, .elotte .cont h2, .csapatunk .cont h2 {
		font-size: 22px;
	}
	.video h2 {
		font-size: 24px;
	}
	section.hh-block, div.hh-block {
		padding-top: 56px;
		padding-bottom: 56px;
	}
	.hh-expert {
		gap: 28px;
	}
	.activa .cont a, .elotte .cont a, .csapatunk .cont a, a.hh-btn, #cikk p a.styled {
		padding: 14px 22px;
	}
	#cikk p, #cikk li {
		font-size: 15.5px;
	}
}

/* ---------- mobilos aranysav: ugyanaz a sotet, olvashato szoveg, mint asztalin ---------- */
@media (max-width: 768px) {
	.links .mobile-link-cards .mobile-link-card p a {
		color: var(--hh-ink);
		font-weight: 600;
		letter-spacing: .1em;
		font-size: 13px;
		text-transform: uppercase;
	}
}