/*
Theme Name:   Hello Elementor Child
Theme URI:    https://www.hypnoinside.com
Description:  Child theme for Hello Elementor - all custom code for hypnoinside.com lives here.
Author:       Hypnoinside
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* =========================================================
   Design tokens - derived from the existing brand palette.
   ========================================================= */
:root {
	--hi-teal-dark: #2C6F65;   /* brand green, section headings */
	--hi-teal: #76A39F;        /* light accent */
	--hi-ink: #242424;         /* body copy */
	--hi-mid: #23574F;         /* darkened brand green */
	--hi-deep: #1B443E;        /* deepest surface tone */
}

/* =========================================================
   NOTE ON SELECTORS
   Everything below targets Elementor's generated element IDs.
   Those IDs are stable as long as the sections are not deleted
   and rebuilt in the Elementor editor. If a section stops
   responding to these rules, its ID changed and the selector
   needs updating.

     .elementor-element-84b56a2 - full-page background wrapper
     .elementor-element-56f305d - hero text block (desktop)
     .elementor-element-44eebf7 - hero text block (mobile)
     .elementor-element-34b29f1 - cloud transition (top)
     .elementor-element-bc95350 - cloud transition (bottom)
     .elementor-element-0816407 - cloud transition (top)
   ========================================================= */

/* =========================================================
   1. Remove the hero photograph
   The portrait was a fixed-attachment background spanning the
   whole upper page (~4700px), not just the hero. It is replaced
   by a calm gradient in the brand greens, which gives white
   type a guaranteed 5.9:1 to 10.8:1 contrast - something a
   photograph can never promise.
   ========================================================= */
.elementor-element-84b56a2 {
	background-image: linear-gradient(
		168deg,
		var(--hi-teal-dark) 0%,
		var(--hi-mid) 46%,
		var(--hi-deep) 100%
	) !important;
	background-color: var(--hi-mid) !important;
	background-attachment: scroll !important;

	/* 400px of top padding existed to make room for the photo. */
	padding-top: clamp(88px, 11vw, 152px) !important;
}

/* The mobile hero block must stay transparent so the wrapper
   gradient shows through instead of stacking a second one. */
.elementor-element-44eebf7 {
	background-image: none !important;
	background-color: transparent !important;
}

/* =========================================================
   2. Remove the cloud transitions
   These only existed to blend the photograph into the grey
   content blocks. Without the photo they have nothing to
   blend, and each one occupied 425px of empty scroll.
   ========================================================= */
.elementor-element-34b29f1,
.elementor-element-bc95350,
.elementor-element-0816407 {
	display: none !important;
}

/* =========================================================
   3. Hero typography
   On a flat surface the text needs no shadow, so it is dropped
   entirely - that was only ever a workaround for the busy
   photo. Weight 300 in a serif face reads too thin, 400 keeps
   the elegance but holds its shape.
   !important is required: Elementor writes per-widget rules
   with higher specificity than a child theme.
   ========================================================= */
.elementor-element-56f305d h1.elementor-heading-title,
.elementor-element-44eebf7 h1.elementor-heading-title {
	font-weight: 400 !important;
	line-height: 1.16 !important;
	letter-spacing: -0.005em !important;
	text-shadow: none !important;
	/* Scales smoothly instead of jumping between breakpoints. */
	font-size: clamp(2.35rem, 4.4vw + 1.05rem, 4.25rem) !important;
	max-width: 20ch;
	margin-inline: auto;
}

.elementor-element-56f305d p,
.elementor-element-44eebf7 p {
	line-height: 1.62 !important;
	font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.3rem) !important;
	text-shadow: none !important;
	max-width: 46ch;
	margin-inline: auto;
	opacity: 0.93;
}

/* =========================================================
   4. Section headings
   ========================================================= */
h2.elementor-heading-title {
	font-size: clamp(1.85rem, 2.2vw + 1.15rem, 3rem) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.005em !important;
}

/* =========================================================
   5. Buttons
   Two different typefaces were in use. One sans-serif for
   every interactive element reads calmer and separates
   interface from editorial text.
   ========================================================= */
.elementor-button {
	font-family: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0.015em !important;
	padding: 14px 30px !important;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.elementor-button:hover,
.elementor-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(27, 68, 62, 0.3);
}

/* Visible keyboard focus - Elementor ships none by default. */
a:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--hi-teal-dark);
	outline-offset: 3px;
}

/* Inside the dark hero the outline needs the light colour. */
.elementor-element-56f305d a:focus-visible,
.elementor-element-44eebf7 a:focus-visible {
	outline-color: #FFFFFF;
}

/* =========================================================
   6. Body copy rhythm
   ========================================================= */
p {
	line-height: 1.65;
}

/* =========================================================
   7. Respect reduced-motion preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.elementor-button {
		transition: none;
	}
	.elementor-button:hover,
	.elementor-button:focus-visible {
		transform: none;
	}
}