/*
	Theme Name: T+T Klíma
	Version: 1.0.0
	Author: Roland Szabó
	Author URI: https://rolandszabo.design/
	Description: A WordPress theme hand-crafted with ♥ by your friend, Roland.
*/



/* ==================================================
   🧩 CORE SETUP
   ================================================== */

/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }



/* Webfonts */


@font-face {
	font-family: 'Nunito Sans';
	font-display: swap;
	font-style: normal;
	font-weight: 300;
	src: url('webfonts/nunito-sans-v15-latin-ext-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Nunito Sans';
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	src: url('webfonts/nunito-sans-v15-latin-ext-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Nunito Sans';
	font-display: swap;
	font-style: normal;
	font-weight: 700;
	src: url('webfonts/nunito-sans-v15-latin-ext-700.woff2') format('woff2');
}



/* Variables */

:root {
	--sans: 'Google Sans Flex', sans-serif;

	--text: #495057;
	--text-dark: #343a40;
	--text-light: #6c757d;

	--bg: #e9ecef;
	--bg-dark: #ced4da;
	--bg-light: #f8f9fa;

	--color: #00b4d8;
	--color-dark: #0077b6;
	--color-light: #caf0f8;

	--success: #2dc653;
	--success-dark: #17772f;
	--warning: #fca311;
	--warning-dark: #b87609;
	--danger: #c1121f;
	--danger-dark: #62050a;

	--transition-duration: .25s;
	--border-radius: 1rem;
}

@media only screen and (max-width: 767.98px) {
	:root {
		--spacer-text: 1rem;
		--spacer-block: 2rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	:root {
		--spacer-text: 1.5rem;
		--spacer-block: 3rem;
	}
}

@media only screen and (min-width: 992px) {
	:root {
		--spacer-text: 2rem;
		--spacer-block: 4rem;
	}
}



/* Base */

::selection {
	color: #FFF;
	background-color: var(--color);
}

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

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

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--sans);
	font-weight: 300;
	color: var(--text);
}

@media only screen and (max-width: 767.98px) {
	body {
		font-size: 1.6rem;
		letter-spacing: -.15px;
		line-height: 1.6;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	body {
		font-size: 1.8rem;
		letter-spacing: -.2px;
		line-height: 1.7;
	}
}

@media only screen and (min-width: 992px) {
	body {
		font-size: 2rem;
		letter-spacing: -.25px;
		line-height: 1.8;
	}
}

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

.main {
	flex-grow: 1;
}

@media only screen and (max-width: 767.98px) {
	.main {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.main {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media only screen and (max-width: 767.98px) {
	.section {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.section {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.section--grey {
	background-color: var(--bg-light);
}

.container {
	max-width: 120rem;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 767.98px) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media only screen and (min-width: 768px) {
	.container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.container--thin {
	max-width: 80rem;
}



/* ==================================================
   🧩 TYPOGRAPHY
   ================================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	overflow-wrap: break-word;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.2;
}

@media only screen and (max-width: 767.98px) {
	h1, .h1 {
		font-size: 2.8rem;
		letter-spacing: -0.018em;
		margin: 0 0 3rem;
	}

	h2, .h2 {
		font-size: 2.4rem;
		letter-spacing: -0.014em;
		margin: 2.5rem 0 2rem;
	}

	h3, .h3 {
		font-size: 2rem;
		letter-spacing: -0.01em;
		margin: 2rem 0 1.5rem;
	}

	h4, .h4 {
		font-size: 1.6rem;
		letter-spacing: -0.006em;
		margin: 2rem 0 1.5rem;
	}

	h5, .h5,
	h6, .h6 {
		margin: 1rem 0;
	}
}

@media only screen and (min-width: 768px) {
	h1, .h1 {
		font-size: 3.91rem;
		letter-spacing: -0.051em;
		margin: 0 0 4rem;
	}

	h2, .h2 {
		font-size: 3.13rem;
		letter-spacing: -0.039em;
		margin: 3rem 0 2.5rem;
	}

	h3, .h3 {
		font-size: 2.5rem;
		letter-spacing: -0.029em;
		margin: 2.5rem 0 2rem;
	}

	h4, .h4 {
		font-size: 2rem;
		letter-spacing: -0.021em;
		margin: 2.5rem 0 2rem;
	}

	h5, .h5,
	h6, .h6 {
		margin: 1.5rem 0;
	}
}

.section__title {
	margin-top: 0;
	text-align: center;
}

@media only screen and (max-width: 767.98px) {
	.section__title {
		margin-bottom: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.section__title {
		margin-bottom: 5rem;
	}
}

p {
	margin-bottom: var(--spacer-text);
}

ul, ol {
	margin-left: 3rem;
	margin-bottom: var(--spacer-text);
}

li ul,
li ol {
	margin-bottom: 0;
}

ul {
	list-style-type: disc;
}

ol {
	list-style-type: decimal;
}

li {
	margin-bottom: .5rem;
}

li::marker {
	font-weight: 700;
	color: var(--text-dark);
}

.checklist {
	margin-left: 0;
}

.checklist > li {
	list-style: none;
}

.checklist > li:before {
	content: '';
	display: inline-block;
	margin-right: 1rem;
	font-family: "Font Awesome 6 Free";
	font-weight: 700;
	color: var(--success);
}

dt {
	font-weight: 700;
}

a {
	text-decoration: none;
	color: var(--color);
	transition: color var(--transition-duration);
	border-bottom: 1px solid var(--bg);
}

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

hr {
	border: 0;
	border-bottom: 1px solid var(--bg-dark);
}

@media only screen and (max-width: 767.98px) {
	hr {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	hr {
		margin-top: 4rem;
		margin-bottom: 4rem;
	}
}

strong, b {
	font-weight: 700;
}

em {
	font-style: italic;
}

small {
	font-size: 87.5%;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

cite {
	font-style: italic;
}

code, pre, var, kbd {
	font-family: monospace;
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

abbr, acronym {
	text-decoration: none;
	border-bottom: 1px dashed var(--bg-dark);
}

figure {
	padding: 1rem;
	background-color: var(--bg);
}

figcaption {
	font-size: 1.6rem;
	text-align: center;
}

.text-center { text-align: center; }

.icon-left {
	margin-right: .5rem;
}

.huge {
	font-size: 8rem;
	letter-spacing: -4px;
	text-align: center;
}



/* ==================================================
   🧩 HEADER & FOOTER
   ================================================== */

/* Contact Bar */

.contact-bar {
	padding: .4rem 0;
	font-size: 1.4rem;
	color: #FFF;
	background: var(--color-dark);
}

@media only screen and (min-width: 768px) {
	.contact-bar__grid {
		display: grid;
		grid-template-columns: 1fr auto auto;
		grid-gap: 2rem;
	}
}


.contact-bar__group {
	display: flex;
	align-items: center;
}

.contact-bar__key {
	margin-right: .75rem;
	font-weight: 300;
}

.contact-bar__icon {
	margin-right: .25rem;
}

.contact-bar__link {
	color: #FFF;
	border: 0;
}

.contact-bar__link:hover,
.contact-bar__link:focus {
	color: var(--color-light);
}



/* Header */

.header {
	box-shadow: 0 0 2rem -1rem rgba(0,0,0,.25);
}

.header__container {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: space-between;
	align-items: center;
	gap: 0 2rem;
}

.logo {
	margin-left: -1.25rem;
	padding: 1.25rem;
	line-height: 1;
	border-bottom: 0;
}

.logo__image {
	height: 6rem;
}

.menu-toggle {
	width: 5rem;
	height: 5rem;
	padding: 1.5rem;
	font-size: 2rem;
	color: var(--text);
	border: 1px solid var(--bg-dark);
	background-color: transparent;
	box-shadow: none;
}

.menu-toggle:hover,
.menu-toggle:focus {
	color: var(--text-dark);
	background-color: transparent;
}

@media only screen and (min-width: 768px) {
	.menu-toggle {
		display: none;
	}
}

@media only screen and (max-width: 767.98px) {
	.menu--header {
		grid-column: 1 / -1;
		display: none;
	}

	.menu--open {
		display: block;
	}
}

@media only screen and (min-width: 768px) {
	.menu {
		font-size: 1.6rem;
	}
}

.menu__list {
	margin-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

@media only screen and (min-width: 768px) {
	.menu__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
}

.menu__list--dropdown {
	display: none;
}

@media only screen and (max-width: 767.98px) {
	.menu__list--dropdown {
		grid-column: 1 / -1;
		margin: 0 1rem 1rem;
		background-color: #FFF;
		box-shadow: 0 .5rem 1rem 0 var(--bg-dark);
	}

	.menu__item--open .menu__list--dropdown {
		display: block;
	}
}

@media only screen and (min-width: 768px) {
	.menu__item--has-dropdown:hover > .menu__list--dropdown {
		display: block;
	}

	.menu__list--dropdown {
		position: absolute;
		z-index: 99;
		right: 0;
		white-space: nowrap;
		padding: .5rem 0;
		text-align: center;
		background-color: #FFF;
		box-shadow: 0 .5rem 1rem 0 var(--bg-dark);
	}
}

.menu__item {
	position: relative;
	margin-bottom: 0;
	list-style-type: none;
}

@media only screen and (max-width: 767.98px) {
	.menu__item--has-dropdown {
		display: grid;
		grid-template-columns: 1fr auto;
	}
}

.menu__link {
	display: block;
	color: var(--text-dark);
	line-height: 1;
	border-bottom: 0;
}

@media only screen and (max-width: 767.98px) {
	.menu__link {
		padding: 1.5rem;
	}
}

@media only screen and (min-width: 768px) {
	.menu__link {
		padding: 2rem 1.5rem;
	}

	.! .menu__link {
		padding: 1.5rem 3rem;
	}
}

.menu--header .menu__item--current > .menu__link {
	font-weight: 700;
}

.menu__more {
	padding: 1rem 1.75rem;
	color: var(--text);
	background-color: transparent;
}

@media only screen and (min-width: 768px) {
	.menu__more {
		display: none;
	}
}

.menu__more:hover,
.menu__more:focus {
	color: var(--color-dark);
	background-color: transparent;
}



/* Footer */

.footer {
	font-size: 1.6rem;
	text-align: center;
	box-shadow: 0 0 2rem -1rem rgba(0,0,0,.25);
}

.footer__container {
	display: grid;
	grid-gap: 1rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
	.footer__container {
		grid-template-columns: auto 1fr;
		align-items: center;
	}
}

.copyright {
	margin-bottom: 0;
}

.menu--footer {
	font-size: 1.6rem;
}

@media only screen and (min-width: 768px) {
	.menu--footer .menu__list {
		justify-content: end;
	}
}

.menu--footer .menu__link {
	padding: 1rem;
	color: var(--text-light);
}



/* ==================================================
   🧩 COMPONENTS
   ================================================== */

/* Tables */

.table {
	overflow-x: auto;
	margin-bottom: var(--spacer-text);
}

table {
	width: 100%;
}

td, th {
	padding: 1rem;
}

@media only screen and (max-width: 767.98px) {
	td, th {
		padding: .5rem 1rem;
	}
}

@media only screen and (min-width: 768px) {
	td, th {
		padding: 1rem;
	}
}

th {
	font-weight: 700;
	text-align: left;
}

thead th {
	border-bottom: .25rem solid var(--text-light);
}

tbody tr:nth-of-type(2n+1) {
	background-color: var(--bg-light);
}



/* Forms */

.form__group {
	margin-bottom: 2rem;
}

.radbox {
	display: flex;
	align-items: center;
}

.radbox__input {
	margin-right: 1.5rem;
}

input,
select,
textarea {
	box-sizing: border-box;
	font: inherit;
	width: 100%;
	padding: .5rem 1.5rem;
	border: 1px solid var(--bg-dark);
	border-radius: var(--border-radius);
}

input[type="radio"],
input[type="checkbox"] {
	width: initial;
	cursor: pointer;
	transform: scale(1.5);
}

textarea {
	resize: vertical;
	overflow: auto;
	min-width: 100%;
	max-width: 100%;
	min-height: 20rem;
}



/* Buttons */

.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	cursor: pointer;
	display: inline-block;
	width: auto;
	padding: 1.625rem 2.5rem;
	font: inherit;
	font-weight: 700;
	color: #FFF;
	line-height: 1;
	border: 0;
	border-radius: 100rem;
	background-color: var(--color-dark);
	box-shadow: .5rem .5rem 2rem -1rem var(--text-light);
	text-align: center;
	transition: opacity var(--transition-duration);
}

.btn--primary {
	background-color: var(--warning);
	box-shadow: .5rem .5rem 3rem -1rem var(--warning-dark);
}

.btn:hover,
.btn:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	opacity: .75;
	color: #FFF;
}

@media only screen and (min-width: 992px) {
	.btn {
		font-size: 1.8rem;
	}
}

.btn-container {
	margin-top: 4rem;
	text-align: center;
}

.buttons {
	margin: 4rem -.5rem -.5rem;
}

.buttons > .btn {
	margin: .5rem;
}



/* Responsive Embed */

.embed {
	position: relative;
	overflow: hidden;
	display: block;
	width: 100%;
	padding: 0;
}

.embed:before {
	content: '';
	display: block;
	padding-top: 56.25%;
}

.embed iframe,
.embed .youtube-video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.youtube-video {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.youtube-video__image {
	object-fit: cover;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
}

.youtube-video__button {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	transition: none;
}

.youtube-video__icon {
	cursor: pointer;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	border: none;
	font-size: 5rem;
}



/* Blockquote */

blockquote {
	margin-bottom: var(--spacer-text);
	background-color: var(--bg);
}

@media only screen and (max-width: 767.98px) {
	blockquote {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	blockquote {
		padding: 2rem 3rem;
	}
}

blockquote > *:last-child {
	margin-bottom: 0;
}



/* Gallery */

.gallery {
	display: grid;
	grid-gap: 2rem;
	align-items: start;
	margin-bottom: var(--spacer-text);
}

@media only screen and (min-width: 768px) {
	.gallery--col-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery--col-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.gallery--col-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 992px) {
	.gallery--col-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.gallery__item > img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.gallery__caption {
	margin-top: 1rem;
}



/* Page Header */

.page-header--homepage {
	border-bottom: 1px solid var(--bg-dark);
}

@media only screen and (max-width: 767.98px) {
	.page-header--homepage {
		margin-bottom: 3rem;
		padding-bottom: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.page-header--homepage {
		margin-bottom: 5rem;
		padding-bottom: 5rem;
	}
}

@media only screen and (max-width: 575.98px) {
	.page-header__title {
		margin-bottom: 1rem;
	}
}

@media only screen and (min-width: 576px) {
	.page-header__title {
		margin-bottom: 0;
	}
}

.page-header__subtitle {
	margin-bottom: 0;
}



/* Post Meta */

.post-meta {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin-left: 0;
	margin-bottom: 1rem;
	font-size: 1.6rem;
	color: var(--text-light);
}

.post-meta--archive {
}

.post-meta__item {
	list-style-type: none;
	margin-right: 2rem;
	margin-bottom: 0;
}

.post-meta__link {
	color: var(--text-light);
}



/* Cookie Notice */

.cookie-notice {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 99;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	max-width: 100rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem 1rem;
	border-radius: var(--border-radius);
	background-color: #FFF;
	box-shadow: 0 .5rem 1rem 0 var(--bg-dark);
}

.cookie-notice__text {
	margin-bottom: 0;
}



/* WP Admin Bar */

@media screen and (max-width: 782px) {
	body.admin-bar {
		margin-top: 46px;
	}
}

@media screen and (min-width: 783px) {
	html.admin-bar {
		scroll-padding-top: 32px;
	}

	body.admin-bar {
		margin-top: 32px;
	}
}



/* ==================================================
   🧩 PAGE-SPECIFIC STYLES
   ================================================== */

/* Home Page */

.home-services {
	display: grid;
}

@media only screen and (min-width: 768px) {
	.home-services {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 0 6rem;
	}
}

.home-service__icon {
	margin-right: 1rem;
	color: var(--color);
}

.products {
	display: grid;
	margin-top: 5rem;
	text-align: center;
}

@media only screen and (max-width: 767.98px) {
	.products {
		grid-gap: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.products {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 0 4rem;
	}
}

.product__icon {
	color: var(--bg-dark);
}

.inventory {
	display: grid;
	grid-gap: 2rem;
}

@media only screen and (min-width: 768px) {
	.inventory {
		grid-template-columns: 3fr 2fr;
		grid-gap: 8rem;
	}
}

.inventory__image {
	border: 1rem solid #FFF;
	box-shadow: 1rem 1rem 5rem -1rem rgba(0,0,0,.4);
}



/* Rólunk Page */

.about {
	display: grid;
	grid-gap: 2rem;
}

@media only screen and (min-width: 768px) {
	.about {
		grid-template-columns: repeat(2, 1fr);
	}
}

.about__article {
	padding: 2rem;
	border-left: .5rem solid var(--color);
	border-radius: .5rem;
	background-color: #FFF;
	box-shadow: .5rem .5rem 2rem -1rem rgba(0,0,0,.25);
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.about__article {
		padding: 3rem;
	}
}

@media only screen and (min-width: 992px) {
	.about__article {
		padding: 4rem;
	}
}

.about__subtitle {
	margin-top: 0;
}



/* Szolgáltatások Page */

.service__grid {
	display: grid;
	margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
	.service__grid {
		grid-template-columns: 2fr 1fr;
		grid-gap: 4rem;
	}
}


/* Archive Page */

.archive__item {
	margin-bottom: 3rem;
}

.archive__item--has-thumbnail {
	display: grid;
	align-items: center;
}

@media only screen and (max-width: 767.98px) {
	.archive__item--has-thumbnail {
		grid-gap: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.archive__item--has-thumbnail {
		grid-template-columns: auto 1fr;
		grid-gap: 3rem;
	}
}

.archive__image {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	width: 100%;
	max-height: 20rem;
	transition: opacity var(--transition-duration);
}

.archive__image:hover,
.archive__image:focus {
	opacity: .9;
}

.archive__title {
	margin-top: 0;
	margin-bottom: 1rem;
}

.archive__link {
	color: var(--text-dark);
}

.archive__excerpt {
	margin-bottom: 0;
}



/* ==================================================
   🧩 UTILITY CLASSES
   ================================================== */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.mt-block { margin-top: var(--spacer-block); }
.mb-block { margin-bottom: var(--spacer-block); }