/*
Theme Name:   HighFlight Child
Theme URI:    https://highflight.net
Description:  Tema hijo de Astra para el sitio de HighFlight F1 Air Racing Team.
Author:       bardcrack
Template:     astra
Version:      1.0.1
Text Domain:  highflight-child
*/

:root{
	/* Paleta - extraida de Documentacion/mock-up-website.jpeg */
	--hf-bg: #0A0E15;
	--hf-bg-panel: #12161F;
	--hf-bg-panel-alt: #171C27;
	--hf-bg-light: #FFFFFF;
	--hf-bg-offwhite: #F5F4F1;
	--hf-accent: #F5A623;
	--hf-accent-dark: #C98505;
	--hf-white: #FFFFFF;
	--hf-text-dark: #14171C;
	--hf-text-muted-dark: #5B6370;
	--hf-text-muted: #9AA3AF;
	--hf-border: rgba(255,255,255,0.08);
	--hf-border-dark: rgba(20,23,28,0.1);
	--hf-red: #A32638;

	/* Tipografia */
	--hf-font-display: 'Anton', sans-serif;
	--hf-font-body: 'Inter', sans-serif;
}

body{
	font-family: var(--hf-font-body);
	background-color: var(--hf-bg-light);
	color: var(--hf-text-dark);
}

.hf-heading,
h1.hf-heading, h2.hf-heading, h3.hf-heading{
	font-family: var(--hf-font-display);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
}

.hf-accent{ color: var(--hf-accent); }

.hf-btn{
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--hf-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.85rem;
	padding: 0.9em 1.6em;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.hf-btn--primary{
	background-color: var(--hf-accent);
	color: var(--hf-bg);
	border: 1px solid var(--hf-accent);
}
.hf-btn--primary:hover{
	background-color: var(--hf-accent-dark);
	border-color: var(--hf-accent-dark);
	color: var(--hf-bg);
}

.hf-btn--outline{
	background-color: transparent;
	color: var(--hf-white);
	border: 1px solid rgba(255,255,255,0.35);
}
.hf-btn--outline:hover{
	background-color: var(--hf-white);
	color: var(--hf-bg);
	border-color: var(--hf-white);
}

.hf-btn--outline-dark{
	background-color: transparent;
	color: var(--hf-text-dark);
	border: 1px solid var(--hf-border-dark);
}
.hf-btn--outline-dark:hover{
	background-color: var(--hf-text-dark);
	color: var(--hf-white);
	border-color: var(--hf-text-dark);
}

.hf-eyebrow{
	font-family: var(--hf-font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	color: var(--hf-text-muted-dark);
}

.hf-link{
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
	color: var(--hf-accent);
	text-decoration: none;
}
.hf-link:hover{ color: var(--hf-white); }

/* ==========================================================================
   Header / Footer de Astra - tematizado en oscuro para todo el sitio
   ========================================================================== */

.site-header{
	background-color: var(--hf-bg) !important;
	border-bottom: 1px solid var(--hf-border);
}
.site-header .ast-primary-header-bar,
.site-header .main-header-bar,
.site-header .ast-main-header-wrap{
	background-color: transparent !important;
}

/* La home tiene sus propias secciones full-bleed (hero, etc.) - se elimina el
   padding/max-width que Astra agrega por defecto al contenedor de contenido. */
body.home #content > .ast-container{
	padding: 0 !important;
	max-width: none !important;
}
body.home #primary{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.site-header .site-title a,
.site-header .site-title a:hover{
	font-family: var(--hf-font-display);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--hf-white) !important;
}
.site-header .main-header-menu .menu-link{
	color: var(--hf-white) !important;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
}
.site-header .main-header-menu .menu-link:hover{
	color: var(--hf-accent) !important;
}
.site-header .ast-mobile-svg{ color: var(--hf-white); }
.ast-mobile-header-content{ background-color: var(--hf-bg-panel) !important; }

/* Menu movil (off-canvas/inline): Astra fija fondo claro (--ast-global-color-4)
   y texto muted en .main-header-menu / .menu-link con mas especificidad que
   las reglas de arriba, dejando los items invisibles (texto claro sobre fondo
   claro). Se igualan los selectores exactos que usa Astra para poder pisarlos. */
.ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content{
	background-color: var(--hf-bg-panel) !important;
}
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
.ast-builder-menu-mobile .main-navigation .main-header-menu .sub-menu{
	background-color: var(--hf-bg-panel) !important;
}
.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link{
	color: var(--hf-white) !important;
}
.ast-builder-menu-mobile .main-navigation .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link{
	color: var(--hf-accent) !important;
}

@media (max-width: 544px){
	.site-header .custom-logo{
		max-width: 240px;
		height: auto;
	}
}

.site-footer{
	background-color: var(--hf-bg) !important;
	border-top: 1px solid var(--hf-border);
}
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p,
.site-footer .ast-footer-copyright a{
	color: var(--hf-text-muted) !important;
	font-size: 0.85rem;
}