/**
* Theme Name: Los Ninos Child
* Description: This is a child theme of Los Ninos.
* Author: <a href="https://cmsmasters.net/">cmsmasters</a>
* Template: los-ninos
* Version: 1.0.11
* Tested up to: 6.6
* Requires PHP: 7.4
* License:
* License URI:
* Text Domain: los-ninos-child
* Copyright: cmsmasters 2025 / All Rights Reserved
*/

/* ==========================================================================
   Caractera brand — Plein webfont (authoritative definition)
   Full weight range so every weight renders real glyphs (incl. Romanian
   diacritics ă â î ș ț). Avoids synthetic "fake bold" that broke diacritics.
   ========================================================================== */
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-LightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-MediumItalic.woff2') format('woff2');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
/* 600 maps to Bold so existing weight-600 styles stay strong */
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-Bold.woff2') format('woff2');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-BoldItalic.woff2') format('woff2');
	font-weight: 600 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-Black.woff2') format('woff2');
	font-weight: 800 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Plein';
	src: url('fonts/Plein-BlackItalic.woff2') format('woff2');
	font-weight: 800 900;
	font-style: italic;
	font-display: swap;
}

/* ==========================================================================
   Brand tokens
   ========================================================================== */
:root {
	--cr-purple: #3b2c65;
	--cr-purple-dark: #2c2050;
	--cr-coral: #f37053;
	--cr-coral-dark: #e0573a;
	--cr-blue: #47b1e4;
	--cr-yellow: #fdbf62;
	--cr-cream: #f5f1ea;
	--cr-ink: #2f2b2b;
	--cr-font: 'Plein', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Typography — force Plein on text, never synthesize bold/italic.
   (Icon fonts are intentionally not targeted.)
   ========================================================================== */
body,
button,
input,
select,
optgroup,
textarea,
p, a, li, blockquote, label, figcaption,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-button,
.cmsmasters-nav-menu,
.cmsmasters-nav-menu a {
	font-family: var(--cr-font);
}

html body {
	font-synthesis: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Section titles / teacher names / menu — these were the reported spots where
   bold diacritics looked thinner than the rest of the word. With Plein's real
   bold glyphs and no synthesis they render consistently. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-synthesis: none;
}

/* ==========================================================================
   Buttons — brand purple with coral hover
   ========================================================================== */
.elementor-button,
.cmsmasters-button,
button.cmsmasters-button,
.wp-block-button__link,
input[type="submit"],
.forminator-button {
	font-family: var(--cr-font);
	font-weight: 600;
	letter-spacing: .01em;
}

/* ==========================================================================
   Links / accents fallbacks (non-Elementor chrome)
   ========================================================================== */
a {
	color: var(--cr-purple);
}
a:hover,
a:focus {
	color: var(--cr-coral);
}

/* Selection */
::selection {
	background: var(--cr-coral);
	color: #fff;
}

/* ==========================================================================
   Site logo — the brand SVGs ship with only a viewBox (no width/height),
   so constrain them to a sensible height in the header and footer.
   ========================================================================== */
.elementor-widget-cmsmasters-site-logo__img {
	width: auto;
	height: auto;
}
/* Header logo (Header - H9_1/26) */
.elementor-element-3b3310f5 .elementor-widget-cmsmasters-site-logo__img {
	height: 46px;
	max-width: 230px;
}
/* Footer logo (Footer - F9/26) */
.elementor-element-636c5a4c .elementor-widget-cmsmasters-site-logo__img {
	height: 54px;
	max-width: 250px;
}

/* ==========================================================================
   Homepage hero — decorative graphics must never intercept clicks on the
   CTA buttons (the giraffe overlay used to block them).
   ========================================================================== */
.elementor-element-4f55a74,   /* left svg decoration */
.elementor-element-8304d0c {  /* rainbow */
	pointer-events: none;
}

/* ==========================================================================
   "Grupele noastre" — three themed group sections with corner animal
   stickers and a tilted color card behind each photo.
   NOTE: this theme drops custom CSS classes from section/column wrappers,
   so the structural pieces are targeted by their fixed element IDs:
     ocean  : section c5a0010 / media c5a0011 / copy c5a0012
     forest : section c5a0020 / media c5a0021 / copy c5a0022
     sky    : section c5a0030 / media c5a0031 / copy c5a0032
   ========================================================================== */
.elementor-element-c5a0010,
.elementor-element-c5a0020,
.elementor-element-c5a0030 {
	padding-top: 60px;
	padding-bottom: 60px;
}
.elementor-element-c5a0010 > .elementor-container,
.elementor-element-c5a0020 > .elementor-container,
.elementor-element-c5a0030 > .elementor-container {
	align-items: center;
}
/* Per-group background tints */
.elementor-element-c5a0010 { background: #EBF6F6; }
.elementor-element-c5a0020 { background: #F3EFFA; }
.elementor-element-c5a0030 { background: #FFF1EC; }

/* Reversed layout for the middle (forest) group — image on the right */
.elementor-element-c5a0020 > .elementor-container {
	flex-direction: row-reverse;
}

/* Media column + tilted color card behind the photo */
.elementor-element-c5a0011,
.elementor-element-c5a0021,
.elementor-element-c5a0031 {
	position: relative;
}
.elementor-element-c5a0011 > .elementor-widget-wrap::before,
.elementor-element-c5a0021 > .elementor-widget-wrap::before,
.elementor-element-c5a0031 > .elementor-widget-wrap::before {
	content: "";
	position: absolute;
	inset: 24px;
	border-radius: 32px;
	transform: rotate(-3deg);
	z-index: 0;
}
.elementor-element-c5a0011 > .elementor-widget-wrap::before { background: #CFEBF6; }
.elementor-element-c5a0021 > .elementor-widget-wrap::before { background: #E4D9F6; }
.elementor-element-c5a0031 > .elementor-widget-wrap::before { background: #FBD9CC; }

.cr-photo {
	position: relative;
	z-index: 1;
	margin: 0 !important;
}
.cr-photo img {
	border-radius: 24px;
	box-shadow: 0 22px 50px rgba(47, 43, 43, .20);
	display: block;
	width: 100%;
}

/* Corner animal stickers (positioned relative to the media column) */
.cr-sticker {
	position: absolute !important;
	z-index: 3;
	margin: 0 !important;
	pointer-events: none;
	width: auto !important;
}
.cr-sticker img {
	width: 120px;
	height: auto;
	filter: drop-shadow(0 8px 14px rgba(47, 43, 43, .18));
}
.cr-sticker--a { top: -22px; left: -18px; }
.cr-sticker--b { bottom: -26px; right: -6px; }

/* Copy column */
.cr-name .elementor-heading-title {
	color: var(--cr-purple);
	margin-bottom: 14px;
}
.cr-age .elementor-heading-title {
	display: inline-block;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .02em;
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.elementor-element-c5a0010 .cr-age .elementor-heading-title { background: var(--cr-blue); }
.elementor-element-c5a0020 .cr-age .elementor-heading-title { background: var(--cr-purple); }
.elementor-element-c5a0030 .cr-age .elementor-heading-title { background: var(--cr-coral); }

.cr-desc {
	color: var(--cr-ink);
	font-size: 17px;
	line-height: 1.7;
}

@media (max-width: 1024px) {
	.cr-sticker img { width: 84px; }
	.cr-sticker--a { top: -16px; left: -10px; }
	.cr-sticker--b { bottom: -18px; right: -4px; }
	.elementor-element-c5a0010,
	.elementor-element-c5a0020,
	.elementor-element-c5a0030 {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/* ==========================================================================
   Footer (F9/26) — make the column titles (Pagini / Programe / Activități /
   Informații) a touch smaller than the default h4.
   ========================================================================== */
.elementor-element-5a34f2d7 .elementor-heading-title,
.elementor-element-602b0fb5 .elementor-heading-title,
.elementor-element-14baddc9 .elementor-heading-title,
.elementor-element-557741d6 .elementor-heading-title,
.elementor-element-crpfth .elementor-heading-title {
	font-size: 18px;
	line-height: 1.3;
}

/* ==========================================================================
   Teacher detail page — the label/value pairs (e.g. "La Caractera din:" + the
   year) render as inline-block widgets with mismatched font sizes (h6 label
   vs. p value), so the value sat lower than its label. Align them by middle.
   ========================================================================== */
.single-cmsms_teacher .elementor-widget__width-initial.elementor-widget-heading,
.single-cmsms_teacher .elementor-widget__width-initial.elementor-widget-cmsmasters-title {
	vertical-align: middle;
}
.single-cmsms_teacher .elementor-widget__width-initial.elementor-widget-heading .elementor-heading-title {
	margin: 0;
}

/* ==========================================================================
   Contact page — keyless Google Maps embed (replaces the JS map widget that
   needed an API key). Keep the rounded corner treatment and a shorter height
   on mobile.
   ========================================================================== */
.elementor-element-69b3217 iframe {
	display: block;
	width: 100%;
	height: 580px;
	border: 0;
	border-radius: 40px 0 0 40px;
}
@media (max-width: 767px) {
	.elementor-element-69b3217 iframe {
		height: 350px;
		border-radius: 40px;
	}
}

/* ==========================================================================
   Orar page — "Programul zilnic" daily timeline (section #cdp0000).
   Each row is a 2-column inner section: a coloured time badge on the left and
   the activity (title + description) on the right, joined by a soft rail/dot.
   ========================================================================== */
.cr-tl-main-title .elementor-heading-title {
	color: var(--cr-purple);
}
.elementor-element-cdp0000 .cr-tl-intro {
	max-width: 760px;
	margin: 10px auto 40px;
	text-align: center;
	color: var(--cr-ink);
	line-height: 1.7;
}

/* Time badge */
.cr-tl-time .elementor-heading-title {
	display: inline-block;
	background: var(--cr-purple);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .01em;
	padding: 8px 18px;
	border-radius: 999px;
	white-space: nowrap;
}

/* Activity title + body */
.cr-tl-title .elementor-heading-title {
	color: var(--cr-purple);
	margin: 0 0 10px;
}
.elementor-element-cdp0000 .elementor-widget-text-editor {
	color: var(--cr-ink);
	line-height: 1.7;
}

/* Day-variant sub-list under "Activități zilnice specifice" */
.cr-tl-sub {
	margin-top: 12px;
}
.cr-tl-sub .cmsmasters-widget-icon-list-item {
	margin-bottom: 10px;
}

/* Row rhythm */
.elementor-element-cdp0000 .elementor-inner-section {
	margin-bottom: 26px;
}

/* Desktop: timeline rail + dot on the content column */
@media (min-width: 768px) {
	.elementor-element-cdp0000 .elementor-inner-section > .elementor-container {
		align-items: flex-start;
	}
	.elementor-element-cdp0000 .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap {
		position: relative;
		border-left: 2px solid var(--cr-cream);
		padding-left: 30px;
	}
	.elementor-element-cdp0000 .elementor-inner-section .elementor-column:last-child > .elementor-widget-wrap::before {
		content: "";
		position: absolute;
		left: -8px;
		top: 7px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: var(--cr-coral);
		box-shadow: 0 0 0 4px rgba(243, 112, 83, .18);
	}
	.cr-tl-time .elementor-heading-title {
		margin-top: 2px;
	}
}

/* Mobile: badge above content, no rail */
@media (max-width: 767px) {
	.cr-tl-time {
		margin-bottom: 10px;
	}
}

/* Per-slot sticker (cute SVG) above the time badge */
.cr-tl-sticker {
	margin: 0 0 10px;
	line-height: 0;
}
.cr-tl-sticker img {
	width: 58px;
	height: 58px;
	padding: 9px;
	box-sizing: border-box;
	object-fit: contain;
	background: #fff;
	border: 2px solid var(--cr-cream);
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(59, 44, 101, .12);
}
@media (min-width: 768px) {
	.elementor-element-cdp0000 .elementor-inner-section .elementor-column:first-child > .elementor-widget-wrap {
		align-content: flex-start;
	}
	.elementor-element-cdp0000 .cr-tl-sticker,
	.elementor-element-cdp0000 .cr-tl-time {
		text-align: center;
		width: 100%;
	}
}
@media (max-width: 767px) {
	.cr-tl-sticker img {
		width: 46px;
		height: 46px;
		padding: 7px;
	}
}

/* ==========================================================================
   Calendar anual page (.cr-cal) — colour-coded, icon-led month cards.
   ========================================================================== */
.cr-cal {
	--c-edu: var(--cr-purple);
	--c-holiday: var(--cr-coral);
	--c-vacation: var(--cr-blue);
	--c-event: var(--cr-yellow);
	--c-settle: #5fb98e;
	--c-summer: #f59e0b;
	--c-short: #94a3b8;
	color: var(--cr-ink);
}

.cr-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: center;
	margin: 0 auto 34px;
	max-width: 980px;
}
.cr-cal-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cr-purple);
	background: #fff;
	border: 1px solid var(--cr-cream);
	border-left: 6px solid var(--cr-cream);
	padding: 7px 14px;
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(59, 44, 101, .06);
}
.cr-cal-chip .cr-cal-ico {
	font-size: 16px;
}
.cr-cal-chip.cr-cal-edu { border-left-color: var(--c-edu); }
.cr-cal-chip.cr-cal-holiday { border-left-color: var(--c-holiday); }
.cr-cal-chip.cr-cal-vacation { border-left-color: var(--c-vacation); }
.cr-cal-chip.cr-cal-event { border-left-color: var(--c-event); }
.cr-cal-chip.cr-cal-settle { border-left-color: var(--c-settle); }
.cr-cal-chip.cr-cal-summer { border-left-color: var(--c-summer); }
.cr-cal-chip.cr-cal-short { border-left-color: var(--c-short); }

.cr-cal-grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
	.cr-cal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
	.cr-cal-grid { grid-template-columns: 1fr; }
}

.cr-cal-month {
	background: #fff;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--cr-cream);
	box-shadow: 0 14px 30px rgba(59, 44, 101, .08);
	display: flex;
	flex-direction: column;
}
.cr-cal-mhead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	background: var(--cr-purple);
	color: #fff;
	padding: 14px 20px;
}
.cr-cal-mname {
	font-size: 19px;
	font-weight: 700;
}
.cr-cal-myear {
	font-size: 14px;
	opacity: .8;
}

.cr-cal-list {
	list-style: none;
	margin: 0;
	padding: 10px 16px 16px;
}
.cr-cal-row {
	display: grid;
	grid-template-columns: 26px auto;
	grid-template-areas:
		"ico when"
		"ico what";
	column-gap: 10px;
	align-items: start;
	padding: 11px 12px;
	margin-top: 10px;
	background: var(--cr-cream);
	border-radius: 14px;
	border-left: 5px solid var(--cr-cream);
}
.cr-cal-row:first-child {
	margin-top: 4px;
}
.cr-cal-row .cr-cal-ico {
	grid-area: ico;
	font-size: 18px;
	line-height: 1.4;
}
.cr-cal-when {
	grid-area: when;
	font-weight: 700;
	font-size: 13px;
	color: var(--cr-purple);
}
.cr-cal-what {
	grid-area: what;
	font-size: 14px;
	line-height: 1.45;
}
.cr-cal-row.cr-cal-edu { border-left-color: var(--c-edu); }
.cr-cal-row.cr-cal-holiday { border-left-color: var(--c-holiday); }
.cr-cal-row.cr-cal-vacation { border-left-color: var(--c-vacation); }
.cr-cal-row.cr-cal-event { border-left-color: var(--c-event); }
.cr-cal-row.cr-cal-settle { border-left-color: var(--c-settle); }
.cr-cal-row.cr-cal-summer { border-left-color: var(--c-summer); }
.cr-cal-row.cr-cal-short { border-left-color: var(--c-short); }

/* ==========================================================================
   Partner button (Alfred Fronius) — a compact purple pill next to Înscrie-te,
   led by a small German flag (inline SVG drawn in CSS, no asset needed).
   ========================================================================== */
.cr-partner-btn .elementor-widget-cmsmasters-button__button {
	background-color: var(--cr-purple) !important;
	border-color: var(--cr-purple) !important;
	color: #fff !important;
	white-space: nowrap;
	line-height: 1.2;
	font-size: 13px;
}
.cr-partner-btn .elementor-widget-cmsmasters-button__button:hover,
.cr-partner-btn .elementor-widget-cmsmasters-button__button:focus {
	background-color: var(--cr-purple-dark) !important;
	border-color: var(--cr-purple-dark) !important;
	color: #fff !important;
}
.cr-partner-btn .elementor-widget-cmsmasters-button__text {
	white-space: nowrap;
}
/* German flag before the label */
.cr-partner-btn .elementor-widget-cmsmasters-button__content-wrapper::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 12px;
	margin-right: 8px;
	border-radius: 2px;
	vertical-align: middle;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' preserveAspectRatio='none'%3E%3Crect width='5' height='3' fill='%23000'/%3E%3Crect y='1' width='5' height='1' fill='%23D00'/%3E%3Crect y='2' width='5' height='1' fill='%23FFCE00'/%3E%3C/svg%3E") center / cover no-repeat;
}

/* ==========================================================================
   Scroll-to-top button (#cmsmasters-scroll-top trigger, widget 1744d5d4).
   The arrow is a CMSMasters "local icon"; it was rendering same-colour as its
   background (invisible). Force a brand-purple circle with a white arrow, hide
   the leftover "Click here" label, and swap the colours on hover.
   ========================================================================== */
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__button {
	background-color: var(--cr-purple) !important;
	border: 2px solid var(--cr-purple) !important;
	color: #fff !important;
	border-radius: 50%;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__icon i {
	color: #fff;
	transition: color .25s ease;
}
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__text {
	display: none;
}
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__button:hover,
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__button:focus {
	background-color: #fff !important;
	border-color: var(--cr-purple) !important;
}
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__button:hover i,
.elementor-element-1744d5d4 .elementor-widget-cmsmasters-button__button:focus i {
	color: var(--cr-purple) !important;
}

/* ==========================================================================
   Mobile menu (CMSMasters offcanvas 36f17724). The panel used the global
   accent (coral), making content hard to read; the global accent is coral on
   purpose elsewhere, so override only this offcanvas to brand purple and keep
   its menu text / icons white.
   ========================================================================== */
.cmsmasters-offcanvas-content-36f17724.elementor-widget-cmsmasters-offcanvas__content {
	background-color: var(--cr-purple) !important;
}
/* Menu links white at rest. Target __item (the <a>; present on every item) so
   the link colour — and therefore the caret's currentColor — is white. */
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__item,
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__item-text,
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__close-icon {
	color: #fff !important;
}
/* Menu links coral on hover — __item is on every anchor, so this covers ALL
   items (only Comunitate carried the __item-anchor class targeted before). */
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__item:hover,
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__item:hover .elementor-widget-cmsmasters-offcanvas__item-text {
	color: var(--cr-coral) !important;
}

/* Down/up caret on submenu parents (Academie, Comunitate). The theme's own
   __arrow element is disabled in this widget; the offcanvas JS toggles a
   .active class on the parent <a>, so we rotate a CSS caret on a.active.
   currentColor => white at rest, coral on hover. */
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__menu-inner .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	vertical-align: middle;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.2s ease;
}
.cmsmasters-offcanvas-content-36f17724 .elementor-widget-cmsmasters-offcanvas__menu-inner .menu-item-has-children > a.active::after {
	transform: rotate(180deg);
}

/* Footer logo above the Caută / Înscrie-te / Alfred Fronius block (mobile menu
   only). cont-inner is flex-column with auto h-margins, which collapse an empty
   ::before to width:0 — so an explicit width is required for it to paint. */
.cmsmasters-offcanvas-content-36f17724 .elementor-repeater-item-eb5ba16 .elementor-widget-cmsmasters-offcanvas__custom-container-cont-inner::before {
	content: "";
	display: block;
	width: 150px;
	height: 48px;
	margin: 8px auto 24px;
	background: url("/wp-content/uploads/2026/06/caractera-logo-white.svg") center / contain no-repeat;
}

/* Înscrie-te button (#165e6aa9) — coral pill inside the mobile menu only
   (desktop header button unchanged). */
.cmsmasters-offcanvas-content-36f17724 .elementor-element-165e6aa9 .elementor-widget-cmsmasters-button__button {
	background-color: var(--cr-coral) !important;
	border-color: var(--cr-coral) !important;
	color: #fff !important;
}
.cmsmasters-offcanvas-content-36f17724 .elementor-element-165e6aa9 .elementor-widget-cmsmasters-button__button:hover,
.cmsmasters-offcanvas-content-36f17724 .elementor-element-165e6aa9 .elementor-widget-cmsmasters-button__button:focus {
	background-color: var(--cr-coral-dark) !important;
	border-color: var(--cr-coral-dark) !important;
	color: #fff !important;
}

/* Alfred Fronius button — white pill inside the mobile menu only (desktop
   header keeps the purple pill). Keep the existing purple-dark hover. */
.cmsmasters-offcanvas-content-36f17724 .cr-partner-btn .elementor-widget-cmsmasters-button__button {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--cr-purple) !important;
}
.cmsmasters-offcanvas-content-36f17724 .cr-partner-btn .elementor-widget-cmsmasters-button__button:hover,
.cmsmasters-offcanvas-content-36f17724 .cr-partner-btn .elementor-widget-cmsmasters-button__button:focus {
	background-color: var(--cr-purple-dark) !important;
	border-color: var(--cr-purple-dark) !important;
	color: #fff !important;
}

/* ==========================================================================
   Homepage hero — the "lines.svg" decoration is the BACKGROUND image of the
   H1 title heading (#cc20c3c). On mobile the heading is centred at 320px wide
   and the background sits at x=253px, overlapping the wrapped title. Push the
   background image to the right so it clears the text (longhand keeps ypos).
   ========================================================================== */
@media (max-width: 767px) {
	.elementor-element-cc20c3c {
		background-position-x: 300px !important;
	}
}

/* ==========================================================================
   Header search popup — the full-screen overlay defaults to rgba(0,0,0,.8).
   Brand it coral (both search widgets share this class).
   ========================================================================== */
.elementor-widget-cmsmasters-search__popup-container {
	background-color: var(--cr-coral) !important;
}

/* ==========================================================================
   Contact page — hide the eyebrow headings "Pune o intrebare" (#7050445, top)
   and "Cele mai frecvente intrebari" (#14cd1fa, above the kept "Intrebari
   frecvente" #086088c). Hidden visually; the widgets stay in the page data.
   ========================================================================== */
.elementor-element-7050445,
.elementor-element-14cd1fa {
	display: none !important;
}

/* ==========================================================================
   Header breakpoint — below 1380px use the tablet header layout: hide the
   horizontal desktop nav (#315781e4) and reveal the offcanvas hamburger
   trigger (#36f17724). The action buttons (Cauta #264230dc, Inscrie-te
   #59a3d7ba, Alfred #c) are only hidden-mobile, so they already show here.
   The doubled selector outranks Elementor's single-class .elementor-hidden-
   desktop (which hides the trigger across 1025-1600).
   ========================================================================== */
@media (max-width: 1380px) {
	.elementor-element-315781e4 {
		display: none !important;
	}
	.elementor-element-36f17724.elementor-hidden-desktop,
	.elementor-element-36f17724 {
		display: block !important;
	}
}

/* ==========================================================================
   Narrow phones — the offcanvas bottom row keeps Cauta (#7615ca6d),
   Inscrie-te (#165e6aa9) and Alfred Fronius (#c / .cr-partner-btn) on one
   line. On ~360-440px-wide phones the pills (padding 14px 25px) overflow, so
   trim padding/font a touch (scoped to the offcanvas only).
   ========================================================================== */
@media (max-width: 480px) {
	.cmsmasters-offcanvas-content-36f17724 .elementor-element-165e6aa9 .elementor-widget-cmsmasters-button__button,
	.cmsmasters-offcanvas-content-36f17724 .cr-partner-btn .elementor-widget-cmsmasters-button__button {
		padding-left: 14px !important;
		padding-right: 14px !important;
		font-size: 13px !important;
	}
	.cmsmasters-offcanvas-content-36f17724 .elementor-element-7615ca6d {
		font-size: 14px !important;
	}
}