/* ==========================================================================
   ARSpneu — ARSpneu Global Styles
   1. Fázis: Globális beállítások
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
	/* --- Színrendszer --- */
	--dt-color-primary:       #FFD508;   /* Sárga — AKH plugin primary */
	--dt-color-primary-hover: #E6B800;   /* Elsődleges hover állapot */
	--dt-color-primary-light: #FFF9D6;   /* Elsődleges világos háttér */

	--dt-color-secondary:     #2D2D2D;   /* Sötétszürke — háttér, szöveg */
	--dt-color-secondary-light: #3A3A3A; /* Sötétszürke világosabb */

	--dt-color-accent:        #FFFFFF;   /* Fehér — kontraszt szöveg */

	--dt-color-bg:            #F5F5F5;   /* Világosszürke háttér */
	--dt-color-bg-white:      #FFFFFF;   /* Fehér háttér */
	--dt-color-bg-dark:       #1A1A1A;   /* Sötét háttér (footer, hero) */

	--dt-color-text:          #333333;   /* Alapszöveg */
	--dt-color-text-light:    #666666;   /* Halvány szöveg */
	--dt-color-text-muted:    #999999;   /* Muted szöveg */
	--dt-color-text-on-dark:  #FFFFFF;   /* Szöveg sötét háttéren */
	--dt-color-text-heading:  #2D2D2D;   /* Heading szín */

	--dt-color-border:        #E0E0E0;   /* Szegély */
	--dt-color-border-light:  #EEEEEE;   /* Halvány szegély */

	/* --- Tipográfia --- */
	--dt-font-heading: 'Montserrat', sans-serif;
	--dt-font-body:    'Inter', sans-serif;

	--dt-font-size-xs:   0.75rem;   /* 12px */
	--dt-font-size-sm:   0.875rem;  /* 14px */
	--dt-font-size-base: 1rem;      /* 16px */
	--dt-font-size-md:   1.125rem;  /* 18px */
	--dt-font-size-lg:   1.25rem;   /* 20px */
	--dt-font-size-xl:   1.5rem;    /* 24px */
	--dt-font-size-2xl:  2rem;      /* 32px */
	--dt-font-size-3xl:  2.5rem;    /* 40px */
	--dt-font-size-4xl:  3rem;      /* 48px */
	--dt-font-size-5xl:  3.75rem;   /* 60px */

	--dt-line-height-tight:  1.2;
	--dt-line-height-normal: 1.5;
	--dt-line-height-relaxed: 1.75;

	--dt-letter-spacing-tight:  -0.025em;
	--dt-letter-spacing-normal: 0;
	--dt-letter-spacing-wide:   0.05em;

	/* --- Spacing --- */
	--dt-space-xs:  0.25rem;  /* 4px */
	--dt-space-sm:  0.5rem;   /* 8px */
	--dt-space-md:  1rem;     /* 16px */
	--dt-space-lg:  1.5rem;   /* 24px */
	--dt-space-xl:  2rem;     /* 32px */
	--dt-space-2xl: 3rem;     /* 48px */
	--dt-space-3xl: 4rem;     /* 64px */

	/* --- Border Radius --- */
	--dt-radius-sm: 4px;
	--dt-radius-md: 8px;
	--dt-radius-lg: 12px;
	--dt-radius-xl: 16px;
	--dt-radius-full: 9999px;

	/* --- Shadows --- */
	--dt-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
	--dt-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
	--dt-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
	--dt-shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.15);

	/* --- Transitions --- */
	--dt-transition-fast: 0.15s ease;
	--dt-transition-base: 0.3s ease;
	--dt-transition-slow: 0.5s ease;

	/* --- Container --- */
	--dt-container-max: 1200px;
}

/* --------------------------------------------------------------------------
   Base Typography
   -------------------------------------------------------------------------- */
body {
	font-family: var(--dt-font-body);
	font-size: var(--dt-font-size-base);
	line-height: var(--dt-line-height-normal);
	color: var(--dt-color-text);
	background-color: var(--dt-color-bg-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dt-font-heading);
	color: var(--dt-color-text-heading);
	line-height: var(--dt-line-height-tight);
	letter-spacing: var(--dt-letter-spacing-tight);
	font-weight: 700;
}

h1 {
	font-size: var(--dt-font-size-4xl);
	font-weight: 800;
}

h2 {
	font-size: var(--dt-font-size-3xl);
}

h3 {
	font-size: var(--dt-font-size-2xl);
}

h4 {
	font-size: var(--dt-font-size-xl);
}

h5 {
	font-size: var(--dt-font-size-lg);
}

h6 {
	font-size: var(--dt-font-size-md);
}

p {
	margin-bottom: var(--dt-space-md);
	line-height: var(--dt-line-height-normal);
}

a {
	color: var(--dt-color-primary);
	text-decoration: none;
	transition: color var(--dt-transition-fast);
}

a:hover {
	color: var(--dt-color-primary-hover);
}

/* --------------------------------------------------------------------------
   Global Button Styles
   -------------------------------------------------------------------------- */
.dt-btn,
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75em 1.75em;
	font-family: var(--dt-font-heading);
	font-size: var(--dt-font-size-base);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--dt-letter-spacing-wide);
	border: none;
	border-radius: var(--dt-radius-md);
	cursor: pointer;
	transition: all var(--dt-transition-base);
	text-decoration: none;
}

/* Primary button — sárga, fekete szöveggel */
.dt-btn-primary,
.elementor-button.elementor-button {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-text-heading) !important;
}

.dt-btn-primary:hover,
.elementor-button.elementor-button:hover {
	background-color: var(--dt-color-primary-hover);
	color: var(--dt-color-text-heading) !important;
	transform: translateY(-2px);
	box-shadow: var(--dt-shadow-md);
}

/* Secondary button — sötét */
.dt-btn-secondary {
	background-color: var(--dt-color-secondary);
	color: var(--dt-color-accent);
}

.dt-btn-secondary:hover {
	background-color: var(--dt-color-secondary-light);
	color: var(--dt-color-accent);
	transform: translateY(-2px);
	box-shadow: var(--dt-shadow-md);
}

/* Outline button */
.dt-btn-outline {
	background-color: transparent;
	color: var(--dt-color-primary);
	border: 2px solid var(--dt-color-primary);
}

.dt-btn-outline:hover {
	background-color: var(--dt-color-primary);
	color: var(--dt-color-text-heading);
}

/* --------------------------------------------------------------------------
   Elementor Overrides — Globális Elementor integráció
   -------------------------------------------------------------------------- */

/* Elementor Global Color Variables — téma színekre felülírás */
:root {
	--e-global-color-primary:   #FFD508;
	--e-global-color-secondary: #2D2D2D;
	--e-global-color-text:      #333333;
	--e-global-color-accent:    #FFFFFF;

	--e-a-color-primary:        #FFD508;
	--e-a-color-primary-hover:  #E6B800;

	/* Elementor Global Typography — téma betűtípusok */
	--e-global-typography-primary-font-family:   'Montserrat', sans-serif;
	--e-global-typography-primary-font-weight:    700;
	--e-global-typography-secondary-font-family:  'Montserrat', sans-serif;
	--e-global-typography-secondary-font-weight:  600;
	--e-global-typography-text-font-family:       'Inter', sans-serif;
	--e-global-typography-text-font-weight:       400;
	--e-global-typography-accent-font-family:     'Inter', sans-serif;
	--e-global-typography-accent-font-weight:     500;
}

/* Elementor section padding defaults */
.elementor-section {
	--e-column-gap: var(--dt-space-lg);
}


/* Elementor heading widget */
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--dt-font-heading);
	letter-spacing: var(--dt-letter-spacing-tight);
}

/* Elementor text editor widget */
.elementor-widget-text-editor {
	font-family: var(--dt-font-body);
}

/* Elementor icon box — service card stílus */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	transition: all var(--dt-transition-base);
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	transform: translateY(-4px);
}

/* Elementor divider */
.elementor-widget-divider .elementor-divider-separator {
	border-color: var(--dt-color-border-light);
}

/* --------------------------------------------------------------------------
   Page Spacing — navbar alatti és footer feletti térköz
   -------------------------------------------------------------------------- */

/* Standard WP pages (non-Elementor) */
body:not([class*="elementor-page-"]) .site-main {
	padding-top: var(--dt-space-md);
	padding-bottom: var(--dt-space-3xl);
}

/* Elementor pages — top spacing after header */
body[class*="elementor-page-"] .elementor {
	padding-top: var(--dt-space-sm);
}

/* Footer top spacing — only when no CTA section precedes it */
body:not([class*="elementor-page-"]) .dt-footer {
	margin-top: var(--dt-space-3xl);
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.dt-text-primary    { color: var(--dt-color-primary); }
.dt-text-secondary  { color: var(--dt-color-secondary); }
.dt-text-white      { color: var(--dt-color-accent); }
.dt-text-muted      { color: var(--dt-color-text-muted); }

.dt-bg-primary      { background-color: var(--dt-color-primary); }
.dt-bg-secondary    { background-color: var(--dt-color-secondary); }
.dt-bg-light        { background-color: var(--dt-color-bg); }
.dt-bg-dark         { background-color: var(--dt-color-bg-dark); }
.dt-bg-white        { background-color: var(--dt-color-bg-white); }

.dt-rounded-sm      { border-radius: var(--dt-radius-sm); }
.dt-rounded-md      { border-radius: var(--dt-radius-md); }
.dt-rounded-lg      { border-radius: var(--dt-radius-lg); }

.dt-shadow-sm       { box-shadow: var(--dt-shadow-sm); }
.dt-shadow-md       { box-shadow: var(--dt-shadow-md); }
.dt-shadow-lg       { box-shadow: var(--dt-shadow-lg); }

/* --------------------------------------------------------------------------
   Responsive Typography
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--dt-font-size-4xl: 2.5rem;
		--dt-font-size-3xl: 2rem;
		--dt-font-size-2xl: 1.75rem;
	}
}

@media (max-width: 767px) {
	:root {
		--dt-font-size-5xl: 2.5rem;
		--dt-font-size-4xl: 2rem;
		--dt-font-size-3xl: 1.75rem;
		--dt-font-size-2xl: 1.5rem;
		--dt-font-size-xl:  1.25rem;
	}
}