/*
Theme Name: SkimbaDrive — Hello Elementor Child
Description: Child theme of Hello Elementor for skimba.ro. Carries the SkimbaDrive design system (anthracite + amber from the logo, navy as the second dark family from the group banner; Lora headings, Inter body). Page layout lives in Elementor controls; this file keeps the tokens, base typography and the few behaviours Elementor cannot express. Sizing in rem/em so it scales with user zoom.
Author: internal
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-skimba
*/

/* ============================================================
   Design tokens — measured from the SkimbaDrive artwork, not guessed.
   Logo plate #19191e, logo amber #f5bc04; the group banner supplies
   the navy pair #01152a / #0e3c8d.
   ============================================================ */
:root {
	--skimba-ink:        #141418;   /* text */
	--skimba-ink-soft:   #4a4a55;   /* secondary text */
	--skimba-ink-faint:  #556880;   /* fine print — AA at small sizes */
	--skimba-paper:      #faf9f7;   /* warm off-white page */
	--skimba-paper-2:    #f1efea;   /* alternate light band */
	--skimba-paper-3:    #ffffff;   /* cards */

	--skimba-carbon:     #19191e;   /* dark bands + header; the logo's own plate */
	--skimba-carbon-deep:#0e0e12;   /* footer, one step down */
	--skimba-amber:      #f5bc04;   /* the single warm accent */
	--skimba-amber-deep: #d9a503;   /* hover */
	--skimba-amber-mist: #fdf3d8;

	--skimba-navy:       #01152a;   /* second dark family */
	--skimba-navy-blue:  #0e3c8d;   /* links, focus */
	--skimba-sky:        #64a5e3;

	--skimba-line:       rgba(20, 20, 24, .12);
	--skimba-radius:     1.25rem;
	--skimba-radius-sm:  .75rem;
	--skimba-pill:       62.5rem;
	--skimba-ease:       cubic-bezier(.22, .61, .36, 1);

	--skimba-font-head:  "Lora", Georgia, "Times New Roman", serif;
	--skimba-font-body:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
body {
	background: var(--skimba-paper);
	color: var(--skimba-ink);
	font-family: var(--skimba-font-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--skimba-font-head);
	font-weight: 500;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/*
 * Leading scales against size, not with it. A 3.4rem h1 on one line wants
 * 1.18; the same 1.18 on a 1.15rem card title that wraps to two lines glues
 * the lines together — which is what made the phone layout look cramped.
 * Display sizes stay tight, the small headings breathe.
 */
h1, h2 { line-height: 1.18; }
h3, h4 { line-height: 1.3; }

h1 em, h2 em { font-style: italic; }

p { max-width: 36em; }

a { color: var(--skimba-navy-blue); text-underline-offset: .2em; }
a:hover { color: var(--skimba-navy); }

:focus-visible {
	outline: .1875rem solid var(--skimba-navy-blue);
	outline-offset: .1875rem;
	border-radius: .25rem;
}

/* ============================================================
   The amber marker behind an accented headline.
   This is the brush stroke from the SkimbaDrive artwork. It must be a
   FULL fill on dark bands — a partial gradient would leave the tops of
   the letters dark-on-dark.
   ============================================================ */
.skimba-mark {
	background-image: linear-gradient(var(--skimba-amber), var(--skimba-amber));
	color: var(--skimba-carbon);
	padding-inline: .18em;
	border-radius: .08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* On a light band the marker reads better as a highlighter than a block. */
.skimba-band-light .skimba-mark {
	background-image: linear-gradient(transparent 56%, var(--skimba-amber) 56%,
	                                  var(--skimba-amber) 93%, transparent 93%);
}

/* ============================================================
   Eyebrow — a small amber rule before an uppercase label.
   Used above most section headings.
   ============================================================ */
/* The class sits on the widget WRAPPER, while Elementor styles the inner
   .elementor-heading-title from the kit — a bare class loses to it, so the
   type rules have to be qualified down to that element. */
body .skimba-eyebrow .elementor-heading-title,
.skimba-eyebrow {
	font-family: var(--skimba-font-body);
	font-size: .8125rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1.4;
}
.skimba-eyebrow::before {
	content: "";
	display: inline-block;
	width: 1.5rem;
	height: .1875rem;
	margin-right: .7rem;
	border-radius: 2px;
	background: var(--skimba-amber);
	vertical-align: .22em;
}

/* ============================================================
   Breathing exercise (4-4-6). The markup comes from an HTML widget;
   the timing lives in the child theme's script.
   ============================================================ */
.skimba-breathe { display: grid; place-items: center; gap: 1rem; }

.skimba-breathe__circle {
	width: clamp(11rem, 26vw, 15rem);
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 1.5rem;
	background: radial-gradient(circle at 50% 40%, rgba(100, 165, 227, .35), rgba(1, 21, 42, .25));
	border: .0625rem solid rgba(255, 255, 255, .28);
	box-shadow: inset 0 0 2.5rem rgba(100, 165, 227, .2);
	transform: scale(.82);
	transition: transform 4s var(--skimba-ease), box-shadow 4s var(--skimba-ease);
	color: #fff;
	font-family: var(--skimba-font-head);
}
.skimba-breathe__circle.is-in   { transform: scale(1); box-shadow: inset 0 0 3.5rem rgba(245, 188, 4, .22); }
.skimba-breathe__circle.is-hold { transform: scale(1); }
.skimba-breathe__circle.is-out  { transform: scale(.82); transition-duration: 6s; }

.skimba-breathe__meta { font-size: .875rem; opacity: .6; margin: 0; }

.skimba-breathe__start {
	font: inherit;
	font-weight: 500;
	color: var(--skimba-amber);
	background: transparent;
	border: .0625rem solid rgba(255, 255, 255, .32);
	border-radius: var(--skimba-pill);
	padding: .8em 1.6em;
	cursor: pointer;
	transition: border-color .18s var(--skimba-ease), color .18s var(--skimba-ease);
}
.skimba-breathe__start:hover { border-color: var(--skimba-amber); }

/* ============================================================
   Self-check list ("Te recunoști?"). Elementor has no control for the
   checked state of a native checkbox, so it lives here.
   ============================================================ */
.skimba-checks {
	display: grid;
	gap: .75rem;
	margin-top: 1.5rem;
	max-width: 44rem;
}
.skimba-check {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	/* reset.css sets `label { line-height: 1 }`, which the span inherits — at
	   375px four of these five statements wrap and the lines then touch. */
	line-height: 1.5;
	background: rgba(255, 255, 255, .07);
	border: .0625rem solid rgba(255, 255, 255, .16);
	border-radius: var(--skimba-radius-sm);
	padding: 1rem 1.15rem;
	cursor: pointer;
	transition: border-color .18s var(--skimba-ease), background-color .18s var(--skimba-ease);
}
.skimba-check:hover { border-color: rgba(255, 255, 255, .35); }
.skimba-check:has(input:checked) {
	background: rgba(245, 188, 4, .12);
	border-color: var(--skimba-amber);
}
.skimba-check input {
	flex: none;
	width: 1.375rem;
	height: 1.375rem;
	margin: .1rem 0 0;
	accent-color: var(--skimba-amber);
	cursor: pointer;
}

.skimba-check-result {
	min-height: 1.6em;
	font-family: var(--skimba-font-head);
	font-size: 1.1875rem;
	color: var(--skimba-amber);
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity .3s var(--skimba-ease), transform .3s var(--skimba-ease);
}
.skimba-check-result.is-shown { opacity: 1; transform: none; }

/* ============================================================
   Nothing on this site moves on hover. The subject is anxiety; a page
   that twitches under the cursor works against it. Feedback is carried
   by colour, border and shadow only.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.skimba-breathe__circle { transform: scale(.92); }
}

/* ============================================================
   Card grids.

   The cards are Elementor containers: a heading widget and a text-editor
   widget inside a container that carries the class. Their layout — row,
   wrap, centred, 1rem gap, 2.5rem above — is set in Elementor, where it
   belongs and where it can be edited. What is left here is the part
   Elementor has no control for: a two-layer shadow, the counter badge on
   the steps, and the type sizes.

   The cards are flex items, so they are sized by `flex-basis`, and their
   containers deliberately carry no Elementor `width` — otherwise
   `--width: 100%` lands on them and fights this rule.
   ============================================================ */
/* `.e-con.e-flex` sets `flex` from these three variables at (0,2,0), so a
   bare `flex:` shorthand here never lands. Setting the variables it reads is
   both more specific and closer to how Elementor means it to work. */
.e-con.e-flex.skimba-step, .e-con.e-flex.skimba-card {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: 18rem;
}
.skimba-step, .skimba-card {
	max-width: 23rem;
	background: var(--skimba-paper-3);
	border: .0625rem solid var(--skimba-line);
	border-radius: var(--skimba-radius);
	padding: 1.5rem;
	box-shadow: 0 .0625rem .125rem rgba(20, 20, 24, .06), 0 .5rem 1.25rem rgba(20, 20, 24, .05);
	transition: box-shadow .2s var(--skimba-ease), border-color .2s var(--skimba-ease);
}
.skimba-step:hover, .skimba-card:hover {
	box-shadow: 0 .75rem 2.5rem rgba(20, 20, 24, .09);
	border-color: rgba(20, 20, 24, .22);
}
.skimba-step { padding-top: 2.25rem; position: relative; }
.skimba-step::before {
	counter-increment: skimba-step;
	content: counter(skimba-step);
	position: absolute;
	top: -.9rem; left: 1.5rem;
	width: 2.25rem; height: 2.25rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--skimba-amber);
	color: var(--skimba-carbon);
	font-family: var(--skimba-font-head);
	font-size: 1.0625rem;
}
.skimba-steps { counter-reset: skimba-step; }
body .skimba-step .elementor-heading-title,
body .skimba-card .elementor-heading-title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0;
	color: var(--skimba-ink);
}
.skimba-step p, .skimba-card p {
	margin: 0;
	font-size: .9375rem;
	color: var(--skimba-ink-soft);
}

/* The resources panel: one contained navy moment inside a light band. */
.skimba-panel {
	margin-top: 2rem;
	background: var(--skimba-navy);
	color: #fff;
	border-radius: var(--skimba-radius);
	padding: clamp(1.4rem, 3vw, 2rem);
}
body .skimba-panel .elementor-heading-title { color: #fff; margin: 0; font-size: 1.25rem; }
/* The list is an icon-list widget now — it brings its own amber ticks, its
   own spacing and its own colour, so the hand-rolled bullet is gone. */
.skimba-panel .elementor-icon-list-item { font-size: .9375rem; }
.skimba-panel .skimba-note p { font-size: .9375rem; color: rgba(255,255,255,.6); margin: 0; }

/* ============================================================
   Header overflow guard — DESKTOP ONLY.

   Measured, not guessed: inside a 1265px bar BOTH child columns computed
   to 1201px — each wanted the full content box — and the CTA was pushed
   19px past the viewport, so the whole document scrolled sideways.
   Elementor containers are width:100% by default; as flex items on a wide
   screen they have to be content-sized instead.

   These rules must NOT reach the phone: content-sized columns plus nowrap
   stopped the bar shrinking and forced the document to 585px at 375px wide.
   Below the menu breakpoint Elementor's own stacking is correct, so leave
   it alone.
   ============================================================ */
@media (min-width: 48rem) {
	.elementor-element-8d7bcb3 {
		flex-wrap: nowrap;
		--padding-left: 1.25rem;
		--padding-right: 1.25rem;
	}

	/* the brand column: exactly as wide as the logo + strapline */
	.elementor-element-04ee5a7 {
		width: auto !important;
		flex: 0 0 auto !important;
	}

	/* the nav column: takes what is left and gives way first */
	.elementor-element-6caf709 {
		width: auto !important;
		flex: 1 1 auto !important;
		min-width: 0;
		justify-content: flex-end;
	}
	.elementor-element-6caf709 .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: wrap !important;
	}
}

/* Below a roomy desktop the strapline goes first: the logo already carries
   "confidence · control · libertate". */
@media (max-width: 68rem) {
	.elementor-element-5928e1f { display: none; }
}

/* ============================================================
   Contrast on the dark bands.

   An Elementor HTML widget inherits the page colour, which is the dark
   ink. On an anthracite or navy band that renders near-invisible — the
   whole self-check list and the breathing caption were unreadable on the
   live site. These blocks only ever sit on a dark band, so they carry
   their own light colour.
   ============================================================ */
.skimba-check,
.skimba-check span { color: #fff; }

.skimba-breathe { color: #fff; }
.skimba-breathe__meta {
	color: rgba(255, 255, 255, .62);
	opacity: 1;
}

/* ============================================================
   The instructor portrait.
   Elementor's width control is a max-width on the <img>, so inside a flex
   row the picture collapsed to ~80x155 and border-radius:50% turned it
   into an oval instead of a circle. Pin both axes.
   ============================================================ */
.elementor-element-c10e72d {
	flex: 0 0 auto !important;
	width: auto !important;
}
.elementor-element-c10e72d img {
	width: 10rem !important;
	height: 10rem !important;
	max-width: none;
	object-fit: cover;
	object-position: 50% 26%;
}

/* the quote beside it should read as a column, not a full-width banner */
.skimba-quote .elementor-blockquote { max-width: 30em; }
.skimba-quote .elementor-blockquote__content {
	font-family: var(--skimba-font-head);
	font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
	line-height: 1.45;
	color: #fff;
	margin: 0;
}
.skimba-quote .elementor-blockquote__author {
	font-size: .9375rem;
	font-style: italic;
	font-weight: 400;
}

/* ============================================================
   Source links in "Resurse" — a stacked list, not a card grid.
   ============================================================ */
/* Each resource is a container with a linked heading and a description.
   The link sits on the title, not on the whole card: an <a> wrapped round a
   block has no accessible name of its own, and the title is the name. */
.e-con.e-flex.skimba-link {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: 100%;
}
.skimba-link {
	background: var(--skimba-paper-3);
	border: .0625rem solid var(--skimba-line);
	border-radius: var(--skimba-radius-sm);
	padding: 1.1rem 1.25rem;
	transition: border-color .18s var(--skimba-ease), box-shadow .18s var(--skimba-ease);
}
.skimba-link:hover {
	border-color: var(--skimba-navy-blue);
	box-shadow: 0 .0625rem .125rem rgba(20, 20, 24, .06), 0 .5rem 1.25rem rgba(20, 20, 24, .05);
}
/* A heading widget would take the Lora display face; these read as labels,
   so they keep the body face at body size. */
body .skimba-link .elementor-heading-title {
	font-family: var(--skimba-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	margin: 0;
	color: var(--skimba-ink);
}
body .skimba-link .elementor-heading-title a { text-decoration: none; }
.skimba-link p { margin: 0; color: var(--skimba-ink-soft); font-size: .9375rem; }

/* ============================================================
   "În corp / În gânduri / În comportament" — three short cards.
   ============================================================ */
.e-con.e-flex.skimba-sign {
	--flex-grow: 1;
	--flex-shrink: 1;
	--flex-basis: 13rem;
}
.skimba-sign {
	background: var(--skimba-paper-3);
	border: .0625rem solid var(--skimba-line);
	border-radius: var(--skimba-radius-sm);
	padding: 1.1rem 1.2rem;
}
/* Same reasoning as the resource titles: a small caps label, not display
   type, so it does not take the heading face. */
body .skimba-sign .elementor-heading-title {
	font-family: var(--skimba-font-body);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--skimba-navy-blue);
	margin: 0;
}
.skimba-sign p { color: var(--skimba-ink-soft); font-size: .9375rem; margin: 0; }

/* ============================================================
   Floating contact buttons.

   A container pinned with Elementor's own position and offset controls,
   holding two icon widgets — the same recipe as the other sites. Where it
   is, how big the circles are and what colour they take are all settings
   now. Two things stay here:

   - the drop shadow, because the icon widget has no control for one;
   - the width and pointer-events guard. Elementor forces `--width: 100%`
     on containers below 768px, which turns a fixed overlay into a
     full-width invisible panel: measured elsewhere at 375x254, and every
     tap in that band landed on the panel instead of the page. Its own
     `width: auto` setting does not prevent it.
   ============================================================ */
.e-con.skimba-float {
	width: fit-content !important;
	pointer-events: none;
}
.skimba-float__btn { pointer-events: auto; }
.skimba-float__btn .elementor-icon {
	box-shadow: 0 .75rem 2.5rem rgba(20, 20, 24, .28);
}

.skimba-panel { width: 100%; max-width: 46rem; }

/* ============================================================
   The instructor's name and his ARR attestation, beside the portrait.
   Reads as a credential, not as display type, so it keeps the body face.
   ============================================================ */
body .skimba-credential .elementor-heading-title {
	font-family: var(--skimba-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .01em;
	margin: 0;
	color: #fff;
}
/* Elementor gives a container without explicit padding 10px on every side,
   which indented the name 10px past the quote above it. */
.e-con.skimba-credential {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}
.skimba-credential p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}
/* The link to atestate.arr.ro. Underlined on purpose: it leaves the site and
   its whole point is that someone follows it. */
.skimba-verify {
	color: var(--skimba-amber);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: .0625rem;
	white-space: nowrap;
}
.skimba-verify:hover { color: #fff; }

/* ============================================================
   Contact details under the closing heading. The phone number and the
   address are heading widgets with a link, each over a line of context —
   so the numbers are fields in the editor, not text buried in a blob.
   ============================================================ */
body .skimba-contact__row .elementor-heading-title {
	font-family: var(--skimba-font-body);
	font-size: 1rem;
	font-weight: 500;
	margin: 0;
	color: #fff;
}
body .skimba-contact__row .elementor-heading-title a { text-decoration: none; }
body .skimba-contact__row .elementor-heading-title a:hover { color: var(--skimba-amber); }
.skimba-contact__row p {
	margin: 0;
	color: rgba(255, 255, 255, .6);
	font-size: .875rem;
}

/* ============================================================
   The logo must keep its proportions.

   Elementor writes the file's pixel width onto the <img> (width:343px)
   and my height control fought it: measured on the live page the header
   logo rendered 343x40, a ratio of 8.57 against the file's own 2.24 —
   squashed to under half its height, and on a phone it smeared across
   the whole bar. Height drives it, width follows.
   ============================================================ */
.elementor-element-897042b img,
.elementor-element-474c453 img {
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
}
.elementor-element-897042b img { height: 3rem !important; }
.elementor-element-474c453 img { height: 3.25rem !important; }

/* Below the menu breakpoint the bar carries the logo and the burger only.
   The same call to action sits in the hero, a few hundred pixels down, so
   a second one here just pushed the bar onto a third row. */
/*
 * Wherever the burger is shown, the header is logo + burger and nothing
 * else. Elementor's nav-menu drops to the toggle at 1024px, so the header
 * CTA goes away on the same line — otherwise the bar carries two ways into
 * the site at once, with the duplicate of this very button sitting in the
 * hero a few hundred pixels below.
 */
@media (max-width: 64rem) {
	.elementor-element-97f91df { display: none; }
}

/* ============================================================
   Type scale on a phone.
   The headings carry desktop sizes set per widget (3.4rem / 2.4rem). At
   390px the h1 ran to three lines and the marker block broke across two,
   which reads as shouting on a page about panic. Elementor sets those
   sizes without !important, so a scoped override is enough.
   ============================================================ */
@media (max-width: 47.99rem) {
	.elementor-widget-heading h1.elementor-heading-title {
		font-size: 2.25rem !important;
		line-height: 1.2 !important;
	}
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: 1.75rem !important;
		line-height: 1.22 !important;
	}
}

/* ============================================================
   The burger.
   Elementor's default toggle colour is #33373D. On the #19191E bar that is
   a 1.3:1 contrast ratio — measurably invisible, and it is the only way
   into the menu on a phone. Amber matches the logo and the hero marker.
   ============================================================ */
.elementor-element-eb9600e .elementor-menu-toggle {
	color: var(--skimba-amber);
	background-color: transparent;
}
.elementor-element-eb9600e .elementor-menu-toggle svg {
	fill: var(--skimba-amber);
	width: 1.75rem;
	height: 1.75rem;
}

/* ============================================================
   Hero call-to-action pair on a phone.
   Elementor stacks them (flex_direction_mobile) and stretches them, so the
   two buttons end up the same width. What was left was the tracking: at
   .14em the longer label wrapped to two lines inside the pill. Tracking is
   a display device — it belongs on a 1.5rem heading, not on a 1.125rem
   button that has to fit 31 characters across 312px.
   ============================================================ */
@media (max-width: 47.99rem) {
	.elementor-widget-button .elementor-button {
		letter-spacing: .04em;
		font-size: 1rem;
	}
	.elementor-element-a85bf32 .elementor-widget-button,
	.elementor-element-a85bf32 .elementor-button {
		width: 100%;
	}
}

/* ============================================================
   Icon-list items that wrap.
   Elementor centres the icon against the whole item, so on the third hero
   item — the only one that runs to two lines — the tick floated into the
   gap between them. Align to the first line instead.
   ============================================================ */
.elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start;
}
.elementor-widget-icon-list .elementor-icon-list-icon {
	padding-top: .2em;
}

/* ============================================================
   The bar on a phone: logo left, burger right, one row.
   This is the same content-sizing as the desktop rules, but with wrap
   left ON. When the logo was still forced to 343px, content-sizing plus
   nowrap pushed the document to 585px at 375px wide; with the logo at its
   true ~108px it fits, and wrap is the safety net if it ever stops.
   ============================================================ */
@media (max-width: 47.99rem) {
	.elementor-element-8d7bcb3 {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.elementor-element-04ee5a7 {
		width: auto !important;
		flex: 0 0 auto !important;
	}
	.elementor-element-6caf709 {
		width: auto !important;
		flex: 1 1 auto !important;
		justify-content: flex-end;
	}
}