/*
Theme Name:     EU Funding School — Astra Child
Theme URI:      https://eufundingschool.com/
Description:    Child theme de Astra para eufundingschool.com. Consume los brand tokens compartidos del monorepo (web/brand/tokens.css). Desplegado desde Coolify.
Author:         Oscar Argumosa
Author URI:     https://eufundingschool.com/
Template:       astra
Version:        0.2.0
Text Domain:    astra-eufunding
*/

/* ======================================================================
   Brand tokens — fuente de verdad compartida con el tool E+
   Si falta algún token aquí, añadirlo en web/brand/tokens.css.
   Los valores de :root debajo son un fallback; el brand/tokens.css real
   se sirve vía functions.php (wp_enqueue_style) y pisa estos.
   ====================================================================== */
:root {
	--efs-color-bg:                #ffffff;
	--efs-color-surface:           #f8f8f8;
	--efs-color-text:              #191c1e;
	--efs-color-muted:             #474551;
	--efs-color-primary:           #1b1464;
	--efs-color-primary-2:         #1b1464;
	--efs-color-accent:            #fbff12;
	--efs-color-accent-warm:       #c7afdf;
	--efs-color-line:              #cccccc;

	--efs-font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--efs-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	--efs-radius:       0.25rem;
	--efs-shadow-soft:  0px 24px 48px rgba(27, 20, 100, 0.06);
	--efs-max-w:        720px;
	--efs-max-w-wide:   1100px;
}

/* ======================================================================
   Base typography for blog templates
   ====================================================================== */
.efs-single,
.efs-archive,
.efs-landing {
	color: var(--efs-color-text);
	font-family: var(--efs-font-body);
	font-weight: 500; /* Poppins medium = body default per DESIGN.md */
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.efs-single h1, .efs-archive h1, .efs-landing h1 {
	font-family: var(--efs-font-display);
	font-weight: 800; /* extrabold */
	letter-spacing: -0.02em;
	color: var(--efs-color-primary);
	line-height: 1.15;
}

.efs-single h2, .efs-archive h2, .efs-landing h2 {
	font-family: var(--efs-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--efs-color-primary);
	margin-top: 2em;
}

/* ======================================================================
   Blog archive / home (listado de posts)
   ====================================================================== */
.efs-archive-header {
	max-width: var(--efs-max-w-wide);
	margin: 2.5rem auto 2rem;
	padding: 0 1.25rem;
}

.efs-archive-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 .5em; }
.efs-archive-header p  { color: var(--efs-color-muted); font-size: 1.1rem; margin: 0; max-width: 640px; }

.efs-post-grid {
	max-width: var(--efs-max-w-wide);
	margin: 0 auto 3rem;
	padding: 0 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.75rem;
}

.efs-post-card {
	background: var(--efs-color-bg);
	border: 1px solid var(--efs-color-line);
	border-radius: var(--efs-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.efs-post-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--efs-shadow-soft);
}

.efs-post-card__thumb {
	aspect-ratio: 16 / 9;
	background: var(--efs-color-surface);
	background-size: cover;
	background-position: center;
}

.efs-post-card__body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.efs-post-card__cats { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--efs-color-primary-2); font-weight: 700; }
.efs-post-card__cats a { color: inherit; text-decoration: none; }
.efs-post-card__title { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 0; }
.efs-post-card__title a { color: var(--efs-color-primary); text-decoration: none; }
.efs-post-card__title a:hover { text-decoration: underline; }
.efs-post-card__excerpt { color: var(--efs-color-muted); margin: 0; flex: 1; }
.efs-post-card__meta { font-size: .8rem; color: var(--efs-color-muted); border-top: 1px solid var(--efs-color-line); padding-top: .75rem; margin-top: .5rem; }

/* ======================================================================
   Single post
   ====================================================================== */
.efs-single-wrap {
	max-width: var(--efs-max-w);
	margin: 2.5rem auto 3rem;
	padding: 0 1.25rem;
}

.efs-single__cats { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--efs-color-primary-2); font-weight: 700; margin-bottom: .5rem; }
.efs-single__cats a { color: inherit; text-decoration: none; }

.efs-single-wrap h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 .5em; }
.efs-single__excerpt { color: var(--efs-color-muted); font-size: 1.15rem; line-height: 1.5; margin-bottom: 1.5rem; }

.efs-single__meta { font-size: .85rem; color: var(--efs-color-muted); display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--efs-color-line); }
.efs-single__meta strong { color: var(--efs-color-text); }

.efs-single__hero { aspect-ratio: 16/9; background: var(--efs-color-surface); background-size: cover; background-position: center; border-radius: var(--efs-radius); margin-bottom: 2rem; }

.efs-single__content { font-size: 1.05rem; }
.efs-single__content p, .efs-single__content ul, .efs-single__content ol, .efs-single__content blockquote { margin-bottom: 1.25em; }
.efs-single__content img { border-radius: var(--efs-radius); }
.efs-single__content blockquote { border-left: 3px solid var(--efs-color-accent); padding: .5rem 1.25rem; background: var(--efs-color-surface); font-style: normal; color: var(--efs-color-primary); }
.efs-single__content hr { border: none; border-top: 1px solid var(--efs-color-line); margin: 2rem 0; }

.efs-single__toc { background: var(--efs-color-surface); border-radius: var(--efs-radius); padding: 1rem 1.25rem; font-size: .92rem; margin-bottom: 2rem; }
.efs-single__toc strong { display: block; margin-bottom: .25rem; color: var(--efs-color-primary); }

/* ======================================================================
   CTA boxes (newsletter, sandbox) — reutilizables
   ====================================================================== */
.efs-cta {
	background: var(--efs-color-primary);
	color: #fff;
	border-radius: var(--efs-radius);
	padding: 2rem 1.75rem;
	margin: 2.5rem 0;
}
.efs-cta h3 { color: #fff; margin: 0 0 .5em; font-size: 1.35rem; font-weight: 700; }
.efs-cta p { color: rgba(255,255,255,0.82); margin: 0 0 1.25rem; }
.efs-cta__btn {
	display: inline-block;
	background: var(--efs-color-accent);
	color: var(--efs-color-primary-2);
	padding: .7rem 1.2rem;
	border-radius: var(--efs-radius);
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
	transition: transform .1s ease;
	box-shadow: var(--efs-shadow-soft);
}
.efs-cta__btn:hover { transform: translateY(-1px); color: var(--efs-color-primary-2); }
.efs-cta--light { background: var(--efs-color-surface); color: var(--efs-color-text); border: 1px solid var(--efs-color-line); }
.efs-cta--light h3 { color: var(--efs-color-primary); }
.efs-cta--light p  { color: var(--efs-color-muted); }

/* ======================================================================
   Menu: CTA-style item (class "menu-cta" added when creating menu item)
   ====================================================================== */
.main-header-menu li.menu-cta > a,
.main-navigation li.menu-cta > a {
	background: var(--efs-color-accent);
	color: var(--efs-color-primary-2) !important;
	padding: .45rem 1rem !important;
	border-radius: var(--efs-radius);
	font-weight: 700;
}

/* ======================================================================
   Landing pages (sin menú; body class controlled via page template)
   ====================================================================== */
.efs-landing {
	max-width: var(--efs-max-w-wide);
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}
.efs-landing__hero {
	padding: 4rem 0 3rem;
	text-align: left;
}
.efs-landing__hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin: 0 0 .35em; }
.efs-landing__hero .efs-landing__sub { font-size: 1.25rem; color: var(--efs-color-muted); max-width: 640px; }

.efs-landing__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0; }
.efs-landing__fact  { background: var(--efs-color-surface); border-radius: var(--efs-radius); padding: 1rem 1.25rem; }
.efs-landing__fact strong { display: block; font-size: 1.5rem; color: var(--efs-color-primary); margin-bottom: .15rem; font-weight: 700; }
.efs-landing__fact span   { font-size: .85rem; color: var(--efs-color-muted); }

/* ======================================================================
   Utilities
   ====================================================================== */
.efs-hidden-on-landing { display: none !important; }
body.efs-landing-page .site-header,
body.efs-landing-page .site-footer,
body.efs-landing-page .ast-header-break-point,
body.efs-landing-page #masthead { display: none !important; }

/* ======================================================================
   TOP BAR común (sincronizado con el tool E+ en public/index.html).
   Si tocas estilos aquí, replícalos en public/index.html sección "TOP BAR".
   ====================================================================== */
/* Ocultar el header de Astra en TODAS las páginas (excepto landing,
   ya excluida arriba). Ahora el header es nuestro top bar custom. */
body:not(.efs-landing-page) .site-header,
body:not(.efs-landing-page) #masthead,
body:not(.efs-landing-page) .ast-header-break-point { display: none !important; }

/* Empuja el contenido 64px hacia abajo para no quedar tapado por el top bar fixed */
body:not(.efs-landing-page) .site { padding-top: 64px; }

.efs-topbar {
	position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 999;
	background: #1b1464; color: #fff;
	font-family: var(--efs-font-body, 'Poppins', sans-serif);
	font-size: 14px; font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.efs-topbar__inner {
	max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 1.25rem;
	display: flex; align-items: center; gap: 2rem;
}
.efs-topbar__brand {
	display: inline-flex; align-items: center; gap: .5rem;
	color: #fff; text-decoration: none; font-weight: 800;
	letter-spacing: -0.01em; white-space: nowrap;
}
.efs-topbar__brand:hover { color: #fbff12; }
.efs-topbar__logo {
	height: 44px; width: auto; flex: 0 0 auto; display: block;
}
.efs-topbar__nav { flex: 1; display: flex; }
.efs-topbar__menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 1.5rem;
}
.efs-topbar__menu li { margin: 0; }
.efs-topbar__menu a {
	color: rgba(255, 255, 255, 0.78); text-decoration: none;
	padding: .25rem 0; border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s; font-size: 14px;
}
.efs-topbar__menu a:hover { color: #fff; }
.efs-topbar__menu .is-current > a,
.efs-topbar__menu .current-menu-item > a {
	color: #fff; border-bottom-color: #fbff12;
}
.efs-topbar__cta { margin-left: auto; }
.efs-topbar__login {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .35rem .85rem; background: #fbff12; color: #1b1464;
	border-radius: 6px; text-decoration: none;
	font-weight: 700; font-size: 13px; transition: transform .15s;
}
.efs-topbar__login:hover { transform: translateY(-1px); color: #1b1464; }
.efs-topbar__toggle {
	display: none; background: none; border: 0; cursor: pointer;
	padding: .35rem; width: 38px; height: 38px; align-items: center; justify-content: center;
}
.efs-topbar__bars, .efs-topbar__bars::before, .efs-topbar__bars::after {
	content: ''; display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.efs-topbar__bars { position: relative; }
.efs-topbar__bars::before { position: absolute; top: -7px; }
.efs-topbar__bars::after  { position: absolute; top: 7px; }
.efs-topbar__toggle[aria-expanded="true"] .efs-topbar__bars { background: transparent; }
.efs-topbar__toggle[aria-expanded="true"] .efs-topbar__bars::before { top: 0; transform: rotate(45deg); }
.efs-topbar__toggle[aria-expanded="true"] .efs-topbar__bars::after  { top: 0; transform: rotate(-45deg); }
@media (max-width: 720px) {
	.efs-topbar__inner { gap: .5rem; padding: 0 .75rem; }
	.efs-topbar__brand .efs-topbar__name { display: none; }
	.efs-topbar__toggle { display: inline-flex; }
	.efs-topbar__nav { position: absolute; top: 64px; left: 0; right: 0; flex: none; display: none;
		background: #1b1464; border-bottom: 1px solid rgba(255,255,255,0.08);
		box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
	.efs-topbar__nav.is-open { display: block; }
	.efs-topbar__menu { flex-direction: column; gap: 0; padding: .25rem 0; }
	.efs-topbar__menu li { padding: 0 1.25rem; }
	.efs-topbar__menu a { display: block; padding: .7rem 0; border-bottom: none; }
	.efs-topbar__menu .is-current > a,
	.efs-topbar__menu .current-menu-item > a { border-bottom: none; color: #fbff12; }
}

/* ======================================================================
   RECURSOS — carcasa con barra lateral (sidebar)
   Portado del prototipo recursos-preview/recursos.css del encargo VPS.
   Todo va scoped bajo body.efs-recursos para no afectar al blog general.
   Variables locales = brand tokens (navy #1b1464, amarillo #fbff12).
   ====================================================================== */
body.efs-recursos {
	--rec-navy: #1b1464; --rec-navy-deep: #06003E;
	--rec-yellow: #fbff12; --rec-muted: #5b5b6b;
}
.efs-recursos .material-symbols-outlined {
	font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
	line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
	white-space: nowrap; direction: ltr; font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}
/* La carcasa Recursos oculta el footer de Astra: es un app-shell de altura completa */
body.efs-recursos .site-footer,
body.efs-recursos #colophon,
body.efs-recursos .ast-small-footer { display: none !important; }
/* Empuja el contenido a la derecha del sidebar (240px). El padding-top:64px ya
   lo aplica la regla global del top bar. */
body.efs-recursos .site { padding-left: 240px; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.efs-sidebar {
	position: fixed; left: 0; top: 64px; bottom: 0; width: 240px; z-index: 40;
	background: var(--rec-navy); display: flex; flex-direction: column;
	padding: 12px 12px 16px; overflow-y: auto;
	font-family: var(--efs-font-body, 'Poppins', sans-serif);
}
.efs-sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.efs-sidebar__section {
	font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(255,255,255,.30); padding: 8px 12px 4px;
}
.efs-sidebar__link {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
	color: rgba(255,255,255,.70); text-decoration: none; font-size: 14px; font-weight: 500;
}
.efs-sidebar__link:hover { background: rgba(255,255,255,.10); color: #fff; }
.efs-sidebar__link.is-active { background: var(--rec-yellow); color: var(--rec-navy); font-weight: 700; }
.efs-sidebar__link.is-active .material-symbols-outlined { color: var(--rec-navy); }
.efs-sidebar__link .material-symbols-outlined { font-size: 20px; }
.efs-sidebar__bottom { border-top: 1px solid rgba(255,255,255,.10); padding-top: 8px; margin-top: 8px; }

/* ── Main de Recursos ────────────────────────────────────────────────── */
.efs-recursos-main { max-width: 1100px; margin: 0 auto; padding: 32px 32px 64px; }
.efs-recursos-main .page-head { margin-bottom: 28px; }
.efs-recursos-main .page-head h1 {
	font-size: 32px; font-weight: 800; color: var(--rec-navy-deep); letter-spacing: -.02em; margin: 0 0 6px;
}
.efs-recursos-main .page-head p { margin: 0; color: var(--rec-muted); font-size: 15px; max-width: 680px; }
.efs-recursos-main .section-title {
	font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--rec-navy); margin: 8px 0 16px; display: flex; align-items: center; gap: 8px;
}

/* ── Tarjetas de artículo ────────────────────────────────────────────── */
.efs-recursos-main .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.efs-recursos-main .card {
	background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 22px rgba(6,0,62,.07);
	display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; border: 1px solid #eceef5;
}
.efs-recursos-main .card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6,0,62,.13); }
.efs-recursos-main .card__media { height: 140px; display: flex; align-items: flex-end; padding: 14px; position: relative; }
.efs-recursos-main .card__media .material-symbols-outlined {
	font-size: 44px; color: rgba(255,255,255,.92); position: absolute; top: 14px; right: 16px;
}
.efs-recursos-main .ka1 .card__media { background: linear-gradient(135deg, #1b1464, #3a2fa8); }
.efs-recursos-main .ka2 .card__media { background: linear-gradient(135deg, #06003E, #1b6fae); }
.efs-recursos-main .ka3 .card__media { background: linear-gradient(135deg, #2a1b6e, #b03a8a); }
.efs-recursos-main .tag {
	background: var(--rec-yellow); color: var(--rec-navy); font-weight: 700; font-size: 11px;
	letter-spacing: .05em; padding: 3px 9px; border-radius: 999px;
}
.efs-recursos-main .card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.efs-recursos-main .card__cat {
	font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: var(--rec-muted); margin-bottom: 6px;
}
.efs-recursos-main .card__title { font-size: 17px; font-weight: 700; color: var(--rec-navy-deep); line-height: 1.3; margin: 0 0 8px; }
.efs-recursos-main .card__title a { color: inherit; text-decoration: none; }
.efs-recursos-main .card__title a:hover { color: var(--rec-navy); }
.efs-recursos-main .card__excerpt { font-size: 14px; color: #444; line-height: 1.55; margin: 0 0 14px; flex: 1; }
.efs-recursos-main .card__meta { font-size: 12px; color: var(--rec-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.efs-recursos-main .card__more {
	align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--rec-navy);
	text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.efs-recursos-main .card__more:hover { gap: 8px; }

/* ── Artículo (detalle) ──────────────────────────────────────────────── */
.efs-recursos-main .article {
	background: #fff; border-radius: 16px; box-shadow: 0 6px 22px rgba(6,0,62,.07);
	overflow: hidden; border: 1px solid #eceef5; max-width: 760px; margin: 0 auto;
}
.efs-recursos-main .article__hero { height: 200px; display: flex; align-items: flex-end; padding: 22px; }
.efs-recursos-main .article.ka1 .article__hero { background: linear-gradient(135deg, #1b1464, #3a2fa8); }
.efs-recursos-main .article.ka2 .article__hero { background: linear-gradient(135deg, #06003E, #1b6fae); }
.efs-recursos-main .article.ka3 .article__hero { background: linear-gradient(135deg, #2a1b6e, #b03a8a); }
.efs-recursos-main .article__body { padding: 26px 32px 36px; }
.efs-recursos-main .article__body h1 { font-size: 28px; font-weight: 800; color: var(--rec-navy-deep); line-height: 1.25; margin: 0 0 8px; }
.efs-recursos-main .article__meta { font-size: 13px; color: var(--rec-muted); margin-bottom: 20px; }
.efs-recursos-main .article__body h2 { font-size: 19px; color: var(--rec-navy); margin: 24px 0 8px; }
.efs-recursos-main .article__body p { font-size: 15.5px; line-height: 1.7; color: #2b2b33; margin: 0 0 14px; }
.efs-recursos-main .article__body ul, .efs-recursos-main .article__body ol { font-size: 15.5px; line-height: 1.7; color: #2b2b33; }
.efs-recursos-main .back {
	display: inline-flex; align-items: center; gap: 6px; color: var(--rec-navy); font-weight: 600;
	text-decoration: none; font-size: 14px; margin-bottom: 18px;
}

/* ── Estado vacío (pestañas placeholder) ─────────────────────────────── */
.efs-recursos-main .placeholder {
	background: #fff; border: 1px dashed #c7cbe0; border-radius: 16px;
	padding: 60px 24px; text-align: center; color: var(--rec-muted);
}
.efs-recursos-main .placeholder .material-symbols-outlined { font-size: 54px; color: #b9bed8; }
.efs-recursos-main .placeholder h2 { color: var(--rec-navy-deep); margin: 14px 0 6px; }

@media (max-width: 980px) { .efs-recursos-main .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
	body.efs-recursos .site { padding-left: 0; }
	.efs-sidebar { display: none; }
	.efs-recursos-main .cards { grid-template-columns: 1fr; }
}