/*
 * Belépő oldal (resources/views/auth/login.blade.php) feature-CSS — ALAPRÉTEG (klasszikus Inspinia).
 * Dark felülírás: dark-mode.css „Login oldal: blog-blokkok + tagline" szakasz.
 * Light felülírás: docai-light.css „Auth-képernyő: login blog-blokkok + tagline" szakasz.
 *
 * Szerkezet: .auth-page (flex oszlop, min. teljes magasság) → .auth-main (nő) + .auth-footer
 * (STATIKUS, nem fixed — a blog-blokkokkal az oldal hosszabb a képernyőnél, a rögzített lábléc
 * takarná a tartalmat; magas képernyőn a flex tolja az aljára).
 * Reszponzív: 360 px — egy oszlop, kisebb logó; 768 px — két blog-kártya egymás mellett.
 * Bootstrap 4.1: nincs gap-* → a rács margóval tagol.
 */
.auth-page {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.auth-main {
	flex: 1 0 auto;
	padding-bottom: 32px;
}

/* Logó + tagline + cím a kártyában (az inline style="font-size:100px" helyett).
 * nowrap + kisebb méret: a Furore wordmark 100 px-en a 352 px-es kártyabelsőben két sorba tört
 * („Doc" / „AI"); 84 px-en (~235 px széles) egy sorban elfér, 360 px-es telefonon (280 px belső) 64 px-en.
 * Szelektor: a style.css `.middle-box h1 {font-size:170px}` (0,1,1) erősebb egy sima osztálynál,
 * ezért az elem+két osztály alak kell (0,2,1) — különben a 170 px-es Inspinia-méret nyer. */
.auth-login .middle-box h1.auth-logo {
	font-size: 84px;
	line-height: 1.1;
	white-space: nowrap;
	margin: 10px 0 0;
}
.auth-tagline {
	color: #676a6c;
	font-size: 14px;
	line-height: 1.4;
	margin: 6px 0 18px;
}
.auth-heading {
	font-size: 20px;
	font-weight: 600;
	margin: 0 0 6px;
}

/* Passkey-gomb: ujjlenyomat-ikon a felirat jobb oldalán (inline SVG, a gomb szövegszínét követi) */
.passkey-fingerprint {
	width: 1.25em;
	height: 1.25em;
	margin-left: .4em;
	vertical-align: -.3em;
}

/* ---------- Blog-blokkok (auth/_blog_links.blade.php) ---------- */
.auth-blog {
	max-width: 880px;
	margin: 28px auto 0;
	padding: 0 16px;
}
.auth-blog__title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	color: #676a6c;
	margin: 0 0 14px;
}
.auth-blog__grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}
.auth-blog__card {
	flex: 1 1 320px;
	margin: 0 8px 16px;
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid #e7eaec;
	border-radius: 6px;
	text-align: left;
}
.auth-blog__heading {
	font-size: 18px;
	line-height: 1.2;
	margin: 0 0 4px;
}
.auth-blog__heading a {
	color: inherit;
	text-decoration: none;
}
.auth-blog__heading a:hover .auth-blog__word,
.auth-blog__heading a:focus .auth-blog__word {
	text-decoration: underline;
}
.auth-blog__brand {
	font-family: 'Furore', sans-serif;
	letter-spacing: .02em;
}
.auth-blog__brand small {
	font-size: 70%;
}
.auth-blog__brand--docit {
	color: #1ab394;
}
.auth-blog__brand--docai {
	color: #0B0F19;
}
.auth-blog__brand--docai .docai-accent {
	color: #E63946;
}
.auth-blog__word {
	font-weight: 600;
}
.auth-blog__ext {
	font-size: 12px;
	margin-left: 4px;
	color: #a7b1c2;
}
.auth-blog__tagline {
	color: #676a6c;
	font-size: 13px;
	margin: 0 0 10px;
}
.auth-blog__list {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}
.auth-blog__list li {
	padding: 7px 0;
	border-top: 1px solid #f1f1f1;
}
.auth-blog__list li:first-child {
	border-top: 0;
}
.auth-blog__list a {
	font-weight: 500;
}
.auth-blog__date {
	display: block;
	font-size: 12px;
	color: #a7b1c2;
	margin-top: 2px;
}
.auth-blog__more {
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Lábléc — statikus, a tartalom alatt (nem fixed) ---------- */
.auth-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	padding: 12px 20px;
	background: #f8f8f9;
	border-top: 1px solid #e7eaec;
}
.auth-footer__actions {
	margin-left: auto;
}

@media (max-width: 575.98px) {
	.auth-login .middle-box h1.auth-logo {
		font-size: 64px;
	}
	.auth-page .middle-box.loginscreen {
		padding-top: 24px;
	}
	.auth-blog__card {
		flex-basis: 100%;
	}
	.auth-footer {
		justify-content: center;
		text-align: center;
	}
	.auth-footer__actions {
		width: 100%;
		margin: 8px 0 0;
	}
}

/* ==========================================================================
 * Klasszikus mód (DOCAI_DESIGN=false, nincs data-theme) — Inspinia-arculat.
 * A body háttere itt az Inspinia navy (#2f4050), a linkek alapból a Bootstrap
 * kékjét (#007bff) kapnák: a cikkcím sötét navy, hover/„Minden bejegyzés" az
 * Inspinia teal (#1ab394 / hover #18a689), a sötét háttéren lévő szövegek világosak.
 * A `html:not([data-theme])` előtag miatt a dark/light módra NEM szivárog.
 * ========================================================================== */
/* Az Inspinia 768 px alatt a body-t világosszürkére (#f3f3f4) váltja (style.css `body:not(.mini-navbar)`,
 * a bal oldalsáv elrejtése miatt) — a belépő oldalon ettől a világos szekciócím és a copyright eltűnne,
 * ezért itt minden szélességen marad a navy háttér. (0,2,2) > (0,1,1). */
html:not([data-theme]) body.auth-login {
	background-color: #2f4050;
}
html:not([data-theme]) .auth-login .loginscreen > p small,
html:not([data-theme]) .auth-blog__title {
	color: rgba(255, 255, 255, .62);
}
html:not([data-theme]) .auth-blog__card {
	border: 0;
	border-top: 3px solid #1ab394;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
html:not([data-theme]) .auth-blog__card--docai {
	border-top-color: #E63946;
}
html:not([data-theme]) .auth-blog__heading a,
html:not([data-theme]) .auth-blog__word {
	color: #2f4050;
}
html:not([data-theme]) .auth-blog__list a {
	color: #2f4050;
	font-weight: 600;
}
html:not([data-theme]) .auth-blog__list a:hover,
html:not([data-theme]) .auth-blog__list a:focus {
	color: #1ab394;
	text-decoration: none;
}
html:not([data-theme]) .auth-blog__date {
	color: #999c9e;
}
html:not([data-theme]) .auth-blog__list li {
	border-top-color: #e7eaec;
}
html:not([data-theme]) .auth-blog__more {
	color: #1ab394;
}
html:not([data-theme]) .auth-blog__more:hover,
html:not([data-theme]) .auth-blog__more:focus {
	color: #18a689;
}
html:not([data-theme]) .auth-blog a:focus-visible {
	outline: 2px solid #1ab394;
	outline-offset: 2px;
}

/* ==========================================================================
 * DocAI wordmark — egyszer lefutó nyitó-animáció (auth/_docai_wordmark.blade.php).
 * Csak DocAI-módban renderelődik. Ív (~2,65 mp, utána megáll; 0,25 s-mal a kártya animate.css
 * fadeInDown-ja után indul, különben a beúszó kártya elnyelné a körvonal-rajzolás elejét):
 *   0,25–1,20 s  a betűk belső körvonala kirajzolódik (betűnként 60 ms eltolással)
 *   0,60–1,90 s  a fényfolt (a docai.hu lábléc-wordmarkjának maszkja) balról jobbra végigfut,
 *                és az „AI" közepén (86%) áll meg
 *   0,82–2,65 s  ahogy a folt odaér, a betű 12%-ról teljesre telik, piros derengéssel
 * Az alapszabályok a VÉGÁLLAPOTOT írják le, a kezdőállapot a keyframe-ek `from`-jában van
 * (animation-fill-mode: both) — így animáció nélkül (reduced-motion, régi böngésző) a tömör logó látszik.
 * A betűnkénti késleltetés a folt (lineáris, -20% → 86%) érkezéséhez igazodik:
 * betűközép a viewBox szélességében D 14% · o 36% · c 57% · A 78% · I 94%.
 * Színek: --awm-doc / --awm-ai / --awm-glow (alap: DocAI logó; light/dark felülírás a mód-fájlokban).
 * ========================================================================== */
@property --awm-x {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 86%;
}

.auth-login .middle-box h1.auth-wordmark {
	font-size: 1rem;
	line-height: 1;
	margin: 8px 0 6px;
}
.auth-wordmark-art {
	--awm-doc: #0B0F19;
	--awm-ai: #E63946;
	--awm-glow: #E63946;
	position: relative;
	display: block;
	width: 280px;
	max-width: 100%;
	margin: 0 auto;
}
.auth-wordmark-art svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.auth-wordmark-art__strokes {
	--awm-x: 86%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(18% 75% at var(--awm-x) 50%, #000 0%, rgba(0, 0, 0, .3) 100%);
	mask-image: radial-gradient(18% 75% at var(--awm-x) 50%, #000 0%, rgba(0, 0, 0, .3) 100%);
	animation: awmSpot 1.3s linear .6s both;
}

/* Kitöltés (végállapot: tömör) + derengés (végállapot: nincs) */
.auth-wordmark-art .awm-fill .awm-doc { fill: var(--awm-doc); }
.auth-wordmark-art .awm-fill .awm-ai { fill: var(--awm-ai); }
.auth-wordmark-art .awm-glow use {
	fill: var(--awm-glow);
	opacity: 0;
}
.auth-wordmark-art .awm-fill use {
	animation: awmFill .6s cubic-bezier(.22, .61, .36, 1) both;
}
.auth-wordmark-art .awm-glow use {
	animation: awmGlow .9s ease-out both;
}

/* Belső körvonal (a maszk a betűk saját alakja, így a vonalnak csak a belső fele látszik) */
.auth-wordmark-art .awm-strokes use {
	stroke-dasharray: 1.01 1;
	stroke-dashoffset: 0;
	animation: awmDraw .7s cubic-bezier(.65, 0, .35, 1) both;
}
.auth-wordmark-art .awm-strokes .awm-doc { stroke: var(--awm-doc); }
.auth-wordmark-art .awm-strokes .awm-ai { stroke: var(--awm-ai); }

/* Betűnkénti időzítés: körvonal (60 ms lépcső) · kitöltés + derengés (a folt érkezése előtt ~0,2 s) */
.auth-wordmark-art .awm-strokes .awm-d { animation-delay: .25s; }
.auth-wordmark-art .awm-strokes .awm-o { animation-delay: .31s; }
.auth-wordmark-art .awm-strokes .awm-c { animation-delay: .37s; }
.auth-wordmark-art .awm-strokes .awm-a { animation-delay: .43s; }
.auth-wordmark-art .awm-strokes .awm-i { animation-delay: .49s; }
.auth-wordmark-art .awm-fill .awm-d,
.auth-wordmark-art .awm-glow .awm-d { animation-delay: .82s; }
.auth-wordmark-art .awm-fill .awm-o,
.auth-wordmark-art .awm-glow .awm-o { animation-delay: 1.08s; }
.auth-wordmark-art .awm-fill .awm-c,
.auth-wordmark-art .awm-glow .awm-c { animation-delay: 1.34s; }
.auth-wordmark-art .awm-fill .awm-a,
.auth-wordmark-art .awm-glow .awm-a { animation-delay: 1.61s; }
.auth-wordmark-art .awm-fill .awm-i,
.auth-wordmark-art .awm-glow .awm-i { animation-delay: 1.75s; }

@keyframes awmSpot {
	from { --awm-x: -20%; }
	to { --awm-x: 86%; }
}
@keyframes awmDraw {
	from { stroke-dashoffset: 1.01; }
	to { stroke-dashoffset: 0; }
}
@keyframes awmFill {
	from { opacity: .12; }
	to { opacity: 1; }
}
@keyframes awmGlow {
	0% { opacity: 0; }
	35% { opacity: .75; }
	100% { opacity: 0; }
}

@media (max-width: 575.98px) {
	.auth-wordmark-art {
		width: 240px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-wordmark-art__strokes,
	.auth-wordmark-art use {
		animation: none !important;
	}
}