/*
Theme Name: Kadence Viking
Theme URI: https://www.vikingsecurity.hu
Description: A Viking Security Team Kft. arculata — a jóváhagyott prototípus design tokenjei (piros #E30613, fekete #0A0A0A, Oswald + Roboto). Kadence child theme.
Author: UP2Digital Kft.
Template: kadence
Version: 1.0.0
Text Domain: kadence-viking
*/

/* =========================================================================
   1. DESIGN TOKENEK — a prototípusból, egy helyen
   ========================================================================= */
:root {
	--vs-red:        #E30613;   /* CTA, kiemelés, aktív állapot */
	--vs-red-dark:   #C20510;   /* hover */
	--vs-black:      #0A0A0A;   /* fejléc-háttér, footer, erős blokkok */
	--vs-white:      #FFFFFF;
	--vs-grey:       #F4F4F4;   /* szekció-elválasztó, kártyák */
	--vs-text:       #2B2B2B;   /* törzsszöveg */
	--vs-text-soft:  #5A5A5A;
	--vs-label:      #7A7A7A;   /* másodlagos, label */
	--vs-border:     #E6E6E6;

	--vs-head:  'Oswald', 'Arial Narrow', Arial, sans-serif;
	--vs-body:  'Roboto', Arial, Helvetica, sans-serif;

	--vs-section-y: 88px;       /* szekció függőleges térköz */
	--vs-max:       1200px;
}

/* =========================================================================
   2. ALAPOK
   ========================================================================= */
body {
	font-family: var(--vs-body);
	color: var(--vs-text);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--vs-red); text-decoration: none; }
a:hover { color: var(--vs-red-dark); }

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
	font-family: var(--vs-head);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--vs-black);
	font-weight: 700;
	line-height: 1.15;
}

h1, .entry-title { font-size: 54px; margin: 0 0 22px; }
h2 { font-size: 34px; margin: 48px 0 18px; }
h3 { font-size: 21px; margin: 32px 0 12px; font-weight: 600; letter-spacing: 0.3px; }

/* A törzsszövegben a H3 kisebb súlyú, hogy a szakmai blokkok ne kiabáljanak. */
.entry-content h3 { text-transform: none; letter-spacing: 0; font-size: 20px; }

/* Eyebrow — szekció fölötti ritkított kisfelirat (prototípus-elem) */
.vs-eyebrow,
p.is-style-vs-eyebrow {
	font-family: var(--vs-head);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 5px;
	color: var(--vs-red);
	text-transform: uppercase;
	margin-bottom: 18px;
	display: block;
}

/* =========================================================================
   3. GOMBOK — a prototípus szögletes, uppercase, ritkított stílusa
   ========================================================================= */
.wp-block-button__link,
.wp-element-button,
.kb-button {
	font-family: var(--vs-head);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 16px 34px;
	border-radius: 0;                 /* a prototípus szögletes gombokat használ */
	background: var(--vs-red);
	color: var(--vs-white);
	transition: background .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover { background: var(--vs-red-dark); color: var(--vs-white); }

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid #6A6A6A;
	color: var(--vs-text);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--vs-black);
	background: transparent;
	color: var(--vs-black);
}

/* Sötét szekcióban a körvonalas gomb világos */
.vs-dark .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-vs-dark .wp-block-button.is-style-outline .wp-block-button__link { color: var(--vs-white); }
.vs-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-vs-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--vs-white); }

/* =========================================================================
   4. SZEKCIÓK
   ========================================================================= */
.vs-dark,
.is-style-vs-dark {
	background: var(--vs-black);
	color: #D6D6D6;
	padding: var(--vs-section-y) 0;
}
.vs-dark h1, .vs-dark h2, .vs-dark h3,
.is-style-vs-dark h1, .is-style-vs-dark h2, .is-style-vs-dark h3 { color: var(--vs-white); }
.vs-dark a,
.is-style-vs-dark a { color: var(--vs-white); }

.vs-grey,
.is-style-vs-grey { background: var(--vs-grey); padding: var(--vs-section-y) 0; }

/* =========================================================================
   5. LISTÁK — a prototípus piros jelölős felsorolása
   ========================================================================= */
.entry-content ul.wp-block-list { list-style: none; padding-left: 0; }
.entry-content ul.wp-block-list > li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 11px;
}
.entry-content ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 2px;
	background: var(--vs-red);
}
/* Beágyazott (pl. lábléc-) listákra ne vonatkozzon */
.entry-content ul.wp-block-list ul > li::before { background: var(--vs-label); }

/* =========================================================================
   6. IDÉZET — anonim mini-eset kártya (Experience blokk)
   ========================================================================= */
.entry-content .wp-block-quote {
	border-left: 3px solid var(--vs-red);
	background: var(--vs-grey);
	margin: 28px 0;
	padding: 24px 28px;
	font-style: normal;
}
.entry-content .wp-block-quote p { margin: 0; font-size: 17px; }
.entry-content .wp-block-quote cite {
	display: block;
	margin-top: 12px;
	font-family: var(--vs-head);
	font-style: normal;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--vs-label);
}

/* =========================================================================
   7. GYIK — nyitható kérdés (core/details)
   ========================================================================= */
.entry-content .wp-block-details {
	border-bottom: 1px solid var(--vs-border);
	padding: 18px 0;
	margin: 0;
}
.entry-content .wp-block-details summary {
	font-family: var(--vs-head);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.3px;
	color: var(--vs-black);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 34px;
}
.entry-content .wp-block-details summary::-webkit-details-marker { display: none; }
.entry-content .wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 400;
	color: var(--vs-red);
	line-height: 1;
}
.entry-content .wp-block-details[open] summary::after { content: "–"; }
.entry-content .wp-block-details p { margin: 14px 0 4px; color: var(--vs-text-soft); }

/* =========================================================================
   8. ELVÁLASZTÓ
   ========================================================================= */
.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--vs-border);
	margin: 56px 0 40px;
	max-width: 100%;
}

/* =========================================================================
   9. RESZPONZÍV — a prototípus töréspontjai
   ========================================================================= */
@media (max-width: 1100px) {
	:root { --vs-section-y: 64px; }
}
@media (max-width: 720px) {
	h1, .entry-title { font-size: 36px; line-height: 1.2; }
	h2 { font-size: 26px; margin-top: 38px; }
	h3 { font-size: 19px; }
	body { font-size: 16px; }
	.wp-block-button__link, .wp-element-button { padding: 14px 26px; font-size: 14px; }
	.entry-content .wp-block-quote { padding: 20px; }
}