/*
Theme Name: Assembly Theme
Theme URI: https://assembly.hu
Description: Assembly fejlesztői alap-sablon WordPress-hez.
Author: Assembly
Author URI: https://assembly.hu
Version: 2026.01
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: assembly
*/

/* ==========================================================================
   CSS változók – színek, méretek központilag
   ========================================================================== */
:root {
	--color-primary: #5dc7ef;
	--color-accent:  #8aba14;
	--color-danger:  #de716e;
	--color-text:    #333;
	--color-muted:   #888;
	--color-bg:      #fff;
	--color-dark:    #000;

	--radius-sm: 5px;
	--radius-md: 14px;
	--radius-lg: 20px;

	--wrapper-max: 1800px;

	--transition-fast: 150ms ease;
	--transition-mid:  300ms ease;
	--transition-slow: 600ms ease;

	--shadow-soft: 0 0 50px rgba(0, 0, 0, 0.2);
	--shadow-deep: 0 0 100px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Alapok / reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

/* Az input elemek alapból nem öröklik a font-family-t – ezt pótoljuk. */
input, select, textarea, button {
	font-family: inherit;
	font-size: inherit;
}

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

/* Akadálymentes skip-link */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	border: 0; clip: rect(1px, 1px, 1px, 1px);
	overflow: hidden;
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed;
	top: 10px; left: 10px;
	width: auto; height: auto; clip: auto;
	padding: 10px 16px;
	background: #000; color: #fff;
	z-index: 1000;
}

/* Átmenetek */
a, .fast { transition: all var(--transition-fast); }
.anim    { transition: all var(--transition-mid); }
.slow    { transition: all var(--transition-slow); }

.hide { opacity: 0 !important; }

/* ==========================================================================
   Tipográfia
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
}
h1 { font-size: clamp(2rem, 4vw, 2.625rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0;
	max-width: var(--wrapper-max);
}

.padding {
	position: relative;
	margin: 0 3%;
}

.layout {
	padding: 5% 0;
	position: relative;
	overflow: hidden;
}

.entry {
	position: relative;
	z-index: 100;
	line-height: 1.5;
}

.narrow {
	max-width: 800px;
	margin: -80px auto 0;
	padding: 5%;
	background-color: #fff;
	box-shadow: var(--shadow-deep);
	position: relative;
}

.layoutimage {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
}

.parallax {
	text-align: center;
	background-color: var(--color-dark);
	color: #fff;
}
.parallax .entry { max-width: 640px; margin: 0 auto 2em; }
.parallax .layoutimage img {
	width: 100%; height: 100%;
	object-fit: cover;
	position: fixed;
	top: 0; left: 0;
	opacity: .5;
}

.clear { clear: both; }

/* Pozicionáló segédek (transform alapú centrálás) */
.center, .hcenter, .vcenter { position: absolute; }
.center  { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hcenter { left: 50%; transform: translateX(-50%); }
.vcenter { top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   Morzsa-navigáció
   ========================================================================== */
.breadcrumb {
	font-size: 11px;
	margin: 0 0 70px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 4px;
	line-height: 1.4;
	padding: 0;
}
.breadcrumb ul { list-style: none; padding: 0; margin: 0; }
.breadcrumb .padding { padding: 0; }
.breadcrumb li  { display: inline-block; color: rgba(255, 255, 255, .7); }
.breadcrumb a   { text-decoration: none; color: rgba(255, 255, 255, .9); }
.breadcrumb li::after {
	content: "\f054";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	display: inline-block;
	margin: 0 13px;
	color: rgba(255, 255, 255, .5);
}
.breadcrumb li:last-child::after { content: none; }

/* ==========================================================================
   Gombok
   ========================================================================== */
.button {
	display: inline-block;
	padding: 18px 28px;
	background-color: var(--color-primary);
	color: #fff !important;
	border: 2px solid #fff;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	transition: all var(--transition-mid);
}
.button:hover  { background-color: #111; }
.button.cancel { background-color: var(--color-danger); }

/* ==========================================================================
   Űrlap elemek
   ========================================================================== */
.formline { margin-bottom: 10px; }

label {
	display: block;
	width: 100px;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 2px;
	vertical-align: top;
}

.field,
#contactform textarea {
	width: 100%;
	padding: 7px 10px;
	font-size: 16px;
	border: 1px solid #bbb;
	border-radius: 4px;
}
#contactform textarea { min-height: 150px; }

#fieldboxes { font-size: 0; }
.fieldbox {
	display: inline-block;
	width: 33%;
	margin-bottom: 20px;
	padding-right: 10px;
	vertical-align: top;
	font-size: 16px;
}

.dropdown {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #bbb;
	border-radius: 4px;
}

#feltoltes-form input[type="file"] { display: none; }

.infotext {
	font-size: 12px;
	text-align: right;
	opacity: .7;
}

.message {
	padding: 10px 14px;
	margin-bottom: 12px;
	border-radius: 4px;
	background-color: #e6f4ea;
	color: #1e4620;
}
.message.error {
	background-color: #fdecea;
	color: #611a15;
}

/* ==========================================================================
   Status bar / fejléc top
   ========================================================================== */
#statusbar {
	position: relative;
	padding: 7px 0 0;
	color: rgba(255, 255, 255, .8);
	font-size: 12px;
	overflow: hidden;
	min-height: 28px; /* 21px content + 7px top padding */
	background: linear-gradient(45deg, #222 40%, #888 40%);
}
.headon #statusbar { padding: 0; min-height: 0; height: 0; }
#statusbar .padding { padding-bottom: 7px; }

#slogan { padding-right: 90px; }

#icons {
	position: absolute;
	right: 0;
	top: 0;
}
#icons a {
	display: inline-block;
	color: #fff;
	border-left: 1px solid rgba(255, 255, 255, .5);
	padding: 0 10px;
	text-align: center;
	font-size: 13px;
	vertical-align: middle;
}

#language { display: inline-block; }
#lang {
	display: inline-block;
	color: #fff;
	padding: 0 10px;
	font-size: 13px;
	vertical-align: middle;
}

/* ==========================================================================
   Fejléc
   ========================================================================== */
header {
	position: relative;
	width: 100%;
	background-color: #fff;
	box-shadow: var(--shadow-soft);
	z-index: 300;
}
header a, h3 a { text-decoration: none; }

.headon           { background-color: rgba(0, 0, 0, .5); }
.headon #logo     { padding: 10px 0; }
.headon #logo img { height: 40px; }

#logo {
	position: relative;
	display: inline-block;
	padding: 20px 0;
	line-height: 0;
}
#logo img { height: 50px; width: auto; }

#topmenu {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

/* Hamburger gomb (button elem) */
#hamburger {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
#hambi { display: block; width: 30px; }
#hambi span {
	display: block;
	background-color: #141611;
	height: 2px;
	margin: 4px auto;
	border-radius: 1px;
	transition: all var(--transition-mid);
}

.hambitox #x1 { transform: rotateZ(45deg)  translate(4px, 4px); }
.hambitox #x2 { transform: rotateY(90deg); }
.hambitox #x3 { transform: rotateZ(-45deg) translate(4.5px, -4.5px); }

/* ==========================================================================
   Menü
   ========================================================================== */
.nav {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0;
}
.nav li {
	display: inline-block;
	position: relative;
	transition: all var(--transition-mid);
}
.nav li a {
	display: block;
	padding: 15px;
	color: #000;
	text-decoration: none;
	font-size: 17px;
	font-weight: bold;
	text-transform: uppercase;
}

.nav ul {
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #fff;
	padding: 0;
	z-index: 99999;
	box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .5);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear .3s, opacity .3s linear;
}
.nav li:hover > ul {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
.nav ul ul { top: 30%; left: 100%; background: #343434; }
.nav ul li { width: 100%; border-top: 1px solid #fff; }
.nav ul a {
	height: auto;
	line-height: 1em;
	padding: 15px 20px;
	white-space: nowrap;
}

.nav li:active, .nav li:focus, .clicked {
	box-shadow: 0 0 0 50px rgba(0, 0, 0, .01) inset;
}

.menu-item-has-children > a::after {
	content: "\f107";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	display: inline-block;
	margin-left: 10px;
}

.current-menu-item { background-color: rgba(0, 0, 0, .05); }

/* ==========================================================================
   Slider vezérlők (Owl alapú fallback-hoz)
   ========================================================================== */
.owl-buttons {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	overflow: hidden;
	font-weight: 300;
}
.owl-prev, .owl-next {
	position: absolute;
	top: 0;
	color: #fff;
	font-size: 140px;
	line-height: 350px;
	width: 45%; height: 100%;
	opacity: 0;
	transition: all var(--transition-mid);
}
.owl-prev { left: 0;  padding-left: 5%; }
.owl-next { right: 0; text-align: right; padding-right: 5%; }
.owl-prev:hover, .owl-next:hover { opacity: .5; }

#slider .slide {
	height: 400px;
	background-size: cover;
	background-position: center;
}

/* ==========================================================================
   Article / post
   ========================================================================== */
article {
	float: left;
	width: calc(97% - 320px);
	position: relative;
}

#tophead {
	position: relative;
	padding: 5px 0 0;
	background-color: var(--color-accent);
	overflow: hidden;
	background-size: cover;
}
#tophead img {
	position: absolute;
	top: 50%; left: 50%;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto;
	transform: translate(-50%, -50%);
	opacity: .05;
	filter: grayscale(1) contrast(5);
}
#tophead h1 {
	margin: 70px 0 20px;
	font-size: clamp(2rem, 5vw, 3.375rem);
	font-weight: bold;
	color: #fdfdfd;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.editpostlink {
	position: absolute;
	right: 0; top: 5px;
}

/* Csempék */
ul.boxes {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 0;
	line-height: 0;
	list-style: none;
}

.box {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(20% - 40px);
	margin: 20px;
	aspect-ratio: 9 / 7;
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: #eee;
}
.box img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 1;
}
.box h3 {
	position: absolute;
	right: 0; bottom: 0;
	margin: 0;
	padding: 10px;
	text-align: right;
	color: #fff;
	font-size: 20px;
	z-index: 15;
}

.textback {
	position: absolute;
	inset: 0;
	background: linear-gradient(-8deg, rgba(0, 0, 0, .8) -20%, transparent 38%);
	z-index: 5;
}

.subpages {
	padding-left: 1.25em;
	font-size: 28px;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color-accent);
	list-style: square;
	font-weight: bold;
}
.subpages a {
	color: #1c1408 !important;
	text-decoration: none;
}

.post {
	padding: 0;
	margin: 60px 0 80px;
	position: relative;
}

.entry a        { color: #444; }
.entry a:hover  { color: #000; }

.alignleft, .alignright {
	width: 40%;
	font-size: 0;
	line-height: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.alignright { float: right; margin: 0 0 2% 3%; }
.alignleft  { float: left;  margin: 0 3% 2% 0; }
.alignleft img, .alignright img { width: 100%; height: 100%; object-fit: cover; }

.wp-caption-text {
	margin: 0;
	padding: 6px 10px;
	background-color: #fff;
	font-size: 15px;
	line-height: 1.4;
}

/* ==========================================================================
   Képfeltöltés (admin)
   ========================================================================== */
.ui-sortable-handle {
	float: left;
	position: relative;
	width: auto;
	height: 80px;
	margin: 0 10px 10px 0;
	border: 1px solid #ccc;
}
.ui-sortable-handle:first-child::after {
	content: "kiemelt kép";
	position: absolute;
	left: 50%; bottom: -5px;
	padding: 0 3px;
	background-color: #fff;
	font-size: 13px;
	border-radius: 4px;
	box-shadow: 1px 1px 15px rgba(0, 0, 0, .5);
	opacity: .9;
	transform: translateX(-50%);
	white-space: nowrap;
}
.ui-sortable-handle label { width: auto; padding: 0; }
.ui-sortable-handle img   { width: auto; height: 80px; }

.torles {
	position: absolute;
	right: -5px; top: -5px;
	width: 15px;
	background-color: #fff;
	border: 3px solid #d64642;
	color: #d64642;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
	border-radius: 50%;
}
.plus { cursor: pointer; }

/* ==========================================================================
   Aside / sidebar
   ========================================================================== */
aside {
	float: right;
	width: 280px;
	margin: 60px 0;
	padding: 10px 30px 30px;
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, .8);
	text-align: center;
	border-radius: var(--radius-lg);
	line-height: 1.5;
	font-size: 16px;
	list-style: none;
}
aside a { color: #fff; }

#facebook { overflow: hidden; }

/* ==========================================================================
   Lábléc
   ========================================================================== */
footer {
	position: relative;
	clear: both;
	padding: 30px;
	background-color: #000;
	color: rgba(255, 255, 255, .5);
	text-align: center;
	font-size: 14px;
	z-index: 10;
}
footer a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}
footer nav li a  { color: #fff !important; }
footer a:hover   { color: #fff; }
footer span      { display: inline-block; }

#footlogo img {
	width: 60%;
	max-width: 240px;
	margin-bottom: 30px;
	filter: grayscale(1) brightness(1.6) contrast(0.4) invert(1);
	opacity: .9;
}

/* ==========================================================================
   Reszponzív
   ========================================================================== */
@media (max-width: 1600px) {
	.box { width: calc(25% - 40px); font-size: 19px; }
	.nav li a { padding: 15px 10px; font-size: 16px; }
}

@media (max-width: 1350px) {
	.box      { width: calc(33% - 40px); font-size: 16px; }
	article   { width: 100%; float: none; }
	aside     { float: none; width: auto; margin: 30px 0; }

	#slider .slide { height: 300px; }
	.owl-prev, .owl-next { line-height: 270px; }

	#hamburger {
		display: inline-block;
		position: absolute;
		right: 3%;
		top: 50%;
		width: 40px;
		cursor: pointer;
		transform: translateY(-50%);
	}

	#fullmenu { position: absolute; }

	header nav {
		position: absolute;
		top: 100% !important;
		right: 0 !important;
		width: 100%;
		background-color: #fff;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10%);
		transition: all var(--transition-mid);
		z-index: 30;
	}
	header .nav ul     { width: 100%; position: static; visibility: visible; opacity: 1; box-shadow: none; }
	header .nav ul li  { text-align: center; background-color: #fff; width: 100%; border-top: 1px solid rgba(0, 0, 0, .08); }
	header .nav li     { display: block; text-align: center; width: 100%; }
	header .nav li a   { border: 0; font-size: 14px; }
	header .menuon {
		transform: translateY(0%) !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

@media (max-width: 1000px) {
	.box          { width: calc(50% - 40px); font-size: 16px; }
}

@media (max-width: 800px) {
	.box          { width: calc(50% - 40px); font-size: 15px; }
}

@media (max-width: 560px) {
	.box          { width: calc(100% - 40px); font-size: 15px; }
	.fieldbox     { width: 100%; display: block; padding-right: 0; }
	#logo img     { height: 40px; }
}

@media (max-width: 400px) {
	.alignleft, .alignright { float: none; margin: 0 0 1em; width: 100%; }
	.alignleft img, .alignright img { width: 100%; height: auto; }
	label { width: auto; }
}

/* Csökkentett animáció – akadálymentesség */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}