/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* === AG Buttons  3 color variants, single gap that slides smoothly on hover (top->left, bottom->right) === */

@property --ag-gap-top {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 50%;
}
@property --ag-gap-bottom {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 50%;
}

.ag-btn-gradient .elementor-button,
.ag-btn-white .elementor-button,
.ag-btn-brown .elementor-button {
	--ag-c1: #554937;
	--ag-c2: #554937;
	--ag-gap-top: 50%;
	--ag-gap-bottom: 50%;
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 46px;
	width: max-content !important;
	max-width: 100% !important;
	box-sizing: border-box;
	background: transparent !important;
	background-image: none !important;
	border-style: solid !important;
	border-top-width: 0 !important;
	border-bottom-width: 0 !important;
	border-left-width: 1px !important;
	border-right-width: 1px !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	letter-spacing: .14em;
	text-decoration: none !important;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity .3s ease, --ag-gap-top .45s cubic-bezier(.4,0,.2,1), --ag-gap-bottom .45s cubic-bezier(.4,0,.2,1);
}

.ag-btn-gradient .elementor-button::before, .ag-btn-gradient .elementor-button::after,
.ag-btn-white .elementor-button::before, .ag-btn-white .elementor-button::after,
.ag-btn-brown .elementor-button::before, .ag-btn-brown .elementor-button::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	pointer-events: none;
}

.ag-btn-white .elementor-button::before,
.ag-btn-brown .elementor-button::before {
	top: 0;
	background-image: linear-gradient(
	to right,
	var(--ag-c1) 0%,
	var(--ag-c1) calc(var(--ag-gap-top) - 2%),
		transparent calc(var(--ag-gap-top) - 2%),
		transparent calc(var(--ag-gap-top) + 2%),
		var(--ag-c2) calc(var(--ag-gap-top) + 2%),
		var(--ag-c2) 100%
		);
}

.ag-btn-white .elementor-button::after,
.ag-btn-brown .elementor-button::after {
	bottom: 0;
	background-image: linear-gradient(
	to right,
	var(--ag-c1) 0%,
	var(--ag-c1) calc(var(--ag-gap-bottom) - 2%),
		transparent calc(var(--ag-gap-bottom) - 2%),
		transparent calc(var(--ag-gap-bottom) + 2%),
		var(--ag-c2) calc(var(--ag-gap-bottom) + 2%),
		var(--ag-c2) 100%
		);
}

.ag-btn-gradient .elementor-button::before,
.ag-btn-gradient .elementor-button::after {
	background-image: linear-gradient(90deg, #F2E7BE 0%, #D8C289 32%, #B19F5E 64%, #D8C289 85%, #B19F5E 100%);
}
.ag-btn-gradient .elementor-button::before {
	top: 0;
	-webkit-mask-image: linear-gradient(
	to right,
	#000 0%, #000 calc(var(--ag-gap-top) - 2%),
		transparent calc(var(--ag-gap-top) - 2%), transparent calc(var(--ag-gap-top) + 2%),
		#000 calc(var(--ag-gap-top) + 2%), #000 100%
		);
	mask-image: linear-gradient(
	to right,
	#000 0%, #000 calc(var(--ag-gap-top) - 2%),
		transparent calc(var(--ag-gap-top) - 2%), transparent calc(var(--ag-gap-top) + 2%),
		#000 calc(var(--ag-gap-top) + 2%), #000 100%
		);
}
.ag-btn-gradient .elementor-button::after {
	bottom: 0;
	-webkit-mask-image: linear-gradient(
	to right,
	#000 0%, #000 calc(var(--ag-gap-bottom) - 2%),
		transparent calc(var(--ag-gap-bottom) - 2%), transparent calc(var(--ag-gap-bottom) + 2%),
		#000 calc(var(--ag-gap-bottom) + 2%), #000 100%
		);
	mask-image: linear-gradient(
	to right,
	#000 0%, #000 calc(var(--ag-gap-bottom) - 2%),
		transparent calc(var(--ag-gap-bottom) - 2%), transparent calc(var(--ag-gap-bottom) + 2%),
		#000 calc(var(--ag-gap-bottom) + 2%), #000 100%
		);
}

.ag-btn-gradient:hover .elementor-button,
.ag-btn-white:hover .elementor-button,
.ag-btn-brown:hover .elementor-button {
	--ag-gap-top: 8%;
	--ag-gap-bottom: 92%;
}

.ag-btn-white .elementor-button,
.ag-btn-white .elementor-button-text {
	color: #F6F5F0 !important;
}
.ag-btn-brown .elementor-button,
.ag-btn-brown .elementor-button-text {
	color: #554937 !important;
}

.ag-btn-white .elementor-button {
	--ag-c1: #F6F5F0;
	--ag-c2: #F6F5F0;
	padding: 8px 40px !important;
	border-color: #F6F5F0 !important;
}

.ag-btn-brown .elementor-button {
	--ag-c1: #554937;
	--ag-c2: #554937;
	padding: 8px 40px !important;
	border-color: #554937 !important;
}

.ag-btn-gradient .elementor-button {
	--ag-c1: #F2E7BE;
	--ag-c2: #B19F5E;
	padding: 8px 40px !important;
	border-image-source: linear-gradient(90deg, #F2E7BE 0%, #D8C289 32%, #B19F5E 64%, #D8C289 85%, #B19F5E 100%);
	border-image-slice: 1;
	border-color: #D8C289 !important;
}
.ag-btn-gradient .elementor-button,
.ag-btn-gradient .elementor-button-text {
	background: linear-gradient(90deg, #F2E7BE 0%, #D8C289 32%, #B19F5E 64%, #D8C289 85%, #B19F5E 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

/* Button variant: underline only, no border, animated underline on hover */
.ag-btn-underline .elementor-button,
.ag-btn-underline .elementor-button-text {
	color: #F6F5F0 !important;
}
.ag-btn-underline .elementor-button {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: max-content !important;
	max-width: 100% !important;
	height: 46px;
	box-sizing: border-box;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 8px 2px !important;
	letter-spacing: .14em;
	text-decoration: none !important;
	line-height: 1.2;
	cursor: pointer;
}
.ag-btn-underline .elementor-button::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 1px;
	background-color: #F6F5F0;
	transform: scaleX(0);
	transform-origin: center center;
	transition: transform 0.35s;
	pointer-events: none;
}
.ag-btn-underline .elementor-button:hover::after {
	transform: scaleX(1);
}

/* === Tipografie unificată pentru butoanele de brand =======================
   Blocurile .ag-btn-* de mai sus defineau DOAR geometria (înălțime, padding,
   borduri, notch-ul animat). Fontul, corpul de literă, greutatea și
   text-transform veneau din setările de tipografie ale FIECĂRUI widget
   Elementor în parte, care generează CSS per-pagină în post-<id>.css cu
   specificitate (0,3,0) — mai mare decât (0,2,0) al selectorilor noștri.

   Rezultatul măsurat live (2026-08-05): 6 variante diferite de buton —
   16/600 uppercase pe home și distilerii, 15/400 fără uppercase în campanii,
   cariere, joburi și prezența globală, Roboto 500 pe echipa-noastră și
   fondatorul-nostru, letter-spacing 2px (nu .14em) pe age-gate.

   `!important` e necesar tocmai ca să batem determinist acel (0,3,0), fără
   să depindem de ordinea reală de încărcare a foilor de stil.

   Înălțimile rămân intenționat neatinse: „CAUTĂ" din bara de căutare joburi
   se întinde la 56px ca să se alinieze cu inputurile de lângă el, iar „Nu"
   din age-gate e buton secundar mic. Ambele își păstrează geometria proprie
   și primesc doar tipografia comună.
   ========================================================================= */
.ag-btn-gradient .elementor-button,
.ag-btn-white .elementor-button,
.ag-btn-brown .elementor-button,
.ag-btn-underline .elementor-button,
.ag-btn-gradient .elementor-button-text,
.ag-btn-white .elementor-button-text,
.ag-btn-brown .elementor-button-text,
.ag-btn-underline .elementor-button-text {
	font-family: "AauxNext", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}

/* Pe ecrane mici, 16px + padding-ul de 40px fac butoanele cu text lung să
   atingă marginea ecranului: „DESCOPERĂ TOATE DOMENIILE" măsura 363px într-un
   viewport de 375px (lipit de marginea dreaptă). Coborâm o treaptă — unitar
   pentru toate variantele, ca butoanele să rămână identice între ele și la
   mobil. Măsurat: 15px + padding 24px → 314px, cu ~31px margine de fiecare
   parte. `.ag-btn-underline` e exclus din regula de padding (are 8px 2px,
   fiind buton fără cadru). */
@media (max-width: 767px) {
	.ag-btn-gradient .elementor-button,
	.ag-btn-white .elementor-button,
	.ag-btn-brown .elementor-button,
	.ag-btn-underline .elementor-button,
	.ag-btn-gradient .elementor-button-text,
	.ag-btn-white .elementor-button-text,
	.ag-btn-brown .elementor-button-text,
	.ag-btn-underline .elementor-button-text {
		font-size: 15px !important;
	}

	.ag-btn-gradient .elementor-button,
	.ag-btn-white .elementor-button,
	.ag-btn-brown .elementor-button {
		padding: 8px 24px !important;
	}
}

/* Butonul de newsletter din footer NU primește cadrul de 46px: e un submit
   inline, în același rând cu inputul de email (subliniere comună sub ambele),
   iar cadrul cu borduri laterale ar rupe acel rând. Îl aliniem doar
   tipografic, ca să se citească din aceeași familie ca restul butoanelor. */
.elementor-location-footer .elementor-widget-form .elementor-button,
.elementor-location-footer .elementor-widget-form .elementor-button-text {
	font-family: "AauxNext", sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}

/* === Săgeți: corecție de centrare optică pe text ===
   AauxNext are ascendentul declarat (11px la 16px) mai mic decât cap-height
   (11.17px), deci centrul cutiei de linie cade sub centrul optic al literelor.
   Săgețile sunt centrate pe cutia de linie, deci apar cu ~2px prea jos. */

/* caret submeniu — meniul principal și footer (ex. "Office") */
.elementor-nav-menu .sub-arrow {
	transform: translateY(-2px);
}

/* săgeata diagonală din listele de iconițe (ex. tag-ul de categorie din articol) */
.elementor-widget-icon-list .elementor-icon-list-icon {
	--icon-vertical-offset: -2px;
}

/* indicatorul de dropdown al meniului nested (varianta mobil) */
.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
	top: -2px;
}

/* săgeata diagonală de lângă "e-shop": glifa e deja ~1px peste centrul
   cutiei sale de 18px, deci ajunge o corecție de 1px */
.elementor-widget-n-menu .e-n-menu-title .e-n-menu-icon {
	transform: translateY(-1px);
}

/* săgeata de hover din submeniul header-ului (::after din Custom CSS-ul
   header-ului); `top`, nu `transform`, ca să nu strice animația translateX */
.elementor-widget-n-menu .e-n-menu-content .e-n-menu-title .e-n-menu-title-container::after {
	position: relative;
	top: -2px;
}

/* === Neutralizare roz din reset.css al temei părinte (hello-elementor) ===
   hello-elementor/assets/css/reset.css conține a{color:#c36} (adică #CC3366,
   scris shorthand pe 3 cifre — nu apare la grep după "cc3366"). Fără acest
   bloc, orice link needitat explicit din Elementor iese roz în loc de auriu. */
a {
	color: #85754E;
}
a:hover,
a:active {
	color: #554937;
}
[type=button],
[type=submit],
button {
	border-color: #85754E;
	color: #85754E;
}
button:hover,
button:focus {
	background-color: #85754E;
	color: #fff;
}