/* =============================================================================
   ElecTech Astra Child — theme.css
   Variabile globale, tipografie, butoane, utilities
   Paletă: Premium Tech (Bluemarin + Albastru accent)
   ========================================================================== */

:root {
	/* --- Brand Colors ---------------------------------------------------- */
	--electech-navy:           #0A2540;   /* Bluemarin profund — primary brand */
	--electech-navy-dark:      #061a30;   /* Hover state pentru navy */
	--electech-accent:         #2E7CE4;   /* Albastru accent — CTA, link-uri */
	--electech-accent-dark:    #1E5FBE;   /* Hover pentru accent */
	--electech-text:           #0F172A;   /* Text principal */
	--electech-text-muted:     #475569;   /* Text secundar */
	--electech-surface:        #F8FAFC;   /* Background subtil */
	--electech-surface-2:      #F1F5F9;   /* Background și mai discret */
	--electech-border:         #E2E8F0;   /* Borduri */
	--electech-border-strong:  #CBD5E1;   /* Borduri evidente */
	--electech-white:          #FFFFFF;
	--electech-black:          #000000;

	/* --- Status / Feedback ---------------------------------------------- */
	--electech-success:        #10B981;
	--electech-warning:        #F59E0B;
	--electech-danger:         #DC2626;   /* Roșu pentru sale badge */

	/* --- Spacing system (8px scale) ------------------------------------- */
	--electech-space-1: 4px;
	--electech-space-2: 8px;
	--electech-space-3: 12px;
	--electech-space-4: 16px;
	--electech-space-5: 24px;
	--electech-space-6: 32px;
	--electech-space-7: 48px;
	--electech-space-8: 64px;

	/* --- Border radius -------------------------------------------------- */
	--electech-radius-sm: 4px;
	--electech-radius:    8px;
	--electech-radius-lg: 12px;
	--electech-radius-xl: 16px;

	/* --- Shadows -------------------------------------------------------- */
	--electech-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
	--electech-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
	--electech-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

	/* --- Transitions ---------------------------------------------------- */
	--electech-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Mapare către variabilele Astra (compatibilitate Customizer) -------- */
:root {
	--ast-global-color-0: var(--electech-navy);
	--ast-global-color-1: var(--electech-accent);
	--ast-global-color-2: var(--electech-text);
	--ast-global-color-3: var(--electech-text-muted);
	--ast-global-color-4: var(--electech-surface);
	--ast-global-color-5: var(--electech-border);
}

/* =============================================================================
   TIPOGRAFIE
   ========================================================================== */

body {
	color: var(--electech-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	color: var(--electech-navy);
	letter-spacing: -0.01em;
}

a {
	color: var(--electech-accent);
	transition: color var(--electech-transition);
}

a:hover,
a:focus {
	color: var(--electech-accent-dark);
}

/* =============================================================================
   BUTOANE — sistem unificat
   Se aplică la toate butoanele WooCommerce + Astra
   ========================================================================== */

.ast-button,
.button,
button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	background-color: var(--electech-navy);
	color: var(--electech-white);
	border: 1px solid var(--electech-navy);
	border-radius: var(--electech-radius);
	padding: 10px 22px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	box-shadow: var(--electech-shadow-sm);
	transition:
		background-color var(--electech-transition),
		border-color var(--electech-transition),
		transform var(--electech-transition),
		box-shadow var(--electech-transition);
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--electech-accent);
	border-color: var(--electech-accent);
	color: var(--electech-white);
	transform: translateY(-1px);
	box-shadow: var(--electech-shadow);
}

/* Butoane "alt" — WooCommerce le folosește pentru add-to-cart pe pagina single */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--electech-accent);
	border-color: var(--electech-accent);
	color: var(--electech-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--electech-accent-dark);
	border-color: var(--electech-accent-dark);
}

/* Ghost buttons */
.button.ghost,
.electech-btn-ghost {
	background-color: transparent;
	color: var(--electech-navy);
}

.button.ghost:hover,
.electech-btn-ghost:hover {
	background-color: var(--electech-navy);
	color: var(--electech-white);
}

/* =============================================================================
   FORM ELEMENTS
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
	border: 1px solid var(--electech-border);
	border-radius: var(--electech-radius);
	padding: 10px 14px;
	background: var(--electech-white);
	transition: border-color var(--electech-transition), box-shadow var(--electech-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--electech-accent);
	box-shadow: 0 0 0 3px rgba(46, 124, 228, 0.15);
	outline: none;
}

/* =============================================================================
   SELECTION (highlight la selectarea textului)
   ========================================================================== */

::selection {
	background-color: var(--electech-accent);
	color: var(--electech-white);
}

/* =============================================================================
   UTILITIES — Containere, spacing
   ========================================================================== */

.electech-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--electech-space-4);
}

@media (min-width: 768px) {
	.electech-container {
		padding-inline: var(--electech-space-5);
	}
}

/* =============================================================================
   ACCESSIBILITY — focus vizibil pe taburile keyboard
   ========================================================================== */

*:focus-visible {
	outline: 2px solid var(--electech-accent);
	outline-offset: 2px;
	border-radius: var(--electech-radius-sm);
}