/* ==========================================================================
   Yazan (Astra Child) — Authentication page (/authentication/)
   Scoped, self-contained luxury styling. Reuses site-wide tokens + utilities
   (.yz-container / .yz-section--* / .yz-btn-*) and .yz-reveal motion.
   Enqueued only on this page (inc/page-authentication.php). Direction-agnostic.
   ========================================================================== */

.yz-auth { overflow-x: clip; }

/* Section rhythm (own padding — .yz-home-section only loads on the front page). */
.yz-auth-sec { padding-block: clamp(56px, 9vw, 116px); }

/* ⚠️ CORRECTIONS THAT THIS PAGE WAS MISSING.
   Two global rules outrank the page's own, and both were silently winning:

   1. Astra colours headings on the ELEMENT (`h1,h2,… { color: var(--ast-global-color-2) }`), and a
      declaration on the element always beats a colour inherited from `.yz-section--ink`. So the
      hero h1 and the dark band's h2 rendered ink-on-ink — invisible. home.css:12-15 makes exactly
      this correction for the homepage bands and says why; this page never got it.
   2. `main.css:60` is `.yazan h1` — one class AND one element, which outranks the single class of
      `.yz-auth-hero__title`, so the hero rendered at 64px/1.12 instead of the 78px/1.02 below.

   Restated one class deeper so the page's own design wins, and so the page looks the same whether
   the theme or Elementor draws it. */
.yz-auth .yz-section--ink h1,
.yz-auth .yz-section--ink h2,
.yz-auth .yz-section--ink h3 { color: var(--yz-ivory); }

/* And the light bands take the ink TOKEN rather than Astra's flat black, so the two renderers agree
   and the Burgundy variant reaches them. */
.yz-auth .yz-section--ivory h1,
.yz-auth .yz-section--ivory h2,
.yz-auth .yz-section--ivory h3 { color: var(--yz-ink); }

.yz-auth .yz-auth-hero__title { font-size: clamp(40px, 6.6vw, 78px); line-height: 1.02; }
.yz-auth .yz-auth-cta__title { font-size: clamp(26px, 4vw, 40px); line-height: 1.08; }

/* Eyebrow colour per band (main.css sets the type; we set the hue for contrast). */
.yz-auth .yz-section--ivory .yz-eyebrow { color: var(--yz-agate); }
.yz-auth .yz-section--ink   .yz-eyebrow { color: var(--yz-gold); }

/* Shared centred header for interior sections.
   The second selector is the Elementor path: Astra ships a compatibility rule
   `.elementor-widget-heading h2.elementor-heading-title` (two classes AND an element) that outranks
   `.yz-auth-head h2`, so under Elementor the section heads were taking Astra's 1.3em line-height.
   Carrying the type on the widget WRAPPER instead — the only place Elementor free lets a class be
   put — is how every other heading on this page is handled, and the bridge block at the end of this
   file hands it down to the element. */
.yz-auth-head { max-width: 680px; margin-inline: auto; margin-block-end: clamp(38px, 6vw, 64px); text-align: center; }
.yz-auth-head h2,
.yz-auth .yz-auth-head__title {
	margin: 0.35em 0 0;
	font-family: var(--yz-font-display, serif);
	font-weight: 500;
	font-size: clamp(27px, 4.4vw, 44px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/* -------------------------------------------------- Hero (dark band) ----- */
.yz-auth-hero__inner { max-width: 840px; margin-inline: auto; text-align: center; }
.yz-auth-hero__title {
	margin: 0.28em 0 0;
	font-family: var(--yz-font-display, serif);
	font-weight: 500;
	font-size: clamp(40px, 6.6vw, 78px);
	line-height: 1.02;
	letter-spacing: -0.015em;
}
.yz-auth-hero__lede {
	max-width: 60ch;
	margin: clamp(18px, 2.4vw, 26px) auto 0;
	font-size: clamp(16px, 2.1vw, 19px);
	line-height: 1.7;
	color: rgba(245, 241, 233, 0.74);
}
.yz-auth-hero__cta,
.yz-auth-cta__row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-block-start: clamp(26px, 3.4vw, 40px);
}

/* Ghost button reads on the dark hero (light hairline → fills ivory on hover). */
.yz-auth-hero__cta .yz-btn-ghost {
	border-color: rgba(245, 241, 233, 0.5);
	color: var(--yz-ivory);
}
.yz-auth-hero__cta .yz-btn-ghost:hover,
.yz-auth-hero__cta .yz-btn-ghost:focus-visible {
	background: var(--yz-ivory);
	color: var(--yz-ink);
	border-color: var(--yz-ivory);
}

/* -------------------------------------------- Pillars (five proofs) ------ */
.yz-auth-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 40px);
}
.yz-auth-pillar {
	padding-block-start: 22px;
	border-block-start: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.12));
	scroll-margin-block-start: 120px; /* so #certificate / #warranty anchors clear the sticky header */
}
.yz-auth-pillar__icon { display: block; color: var(--yz-agate); }
.yz-auth-pillar__icon svg { width: 32px; height: 32px; }
.yz-auth-pillar__title {
	margin: 16px 0 8px;
	font-family: var(--yz-font-display, serif);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
}
.yz-auth-pillar__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--yz-muted, #6e6a63);
}

/* --------------------------------------- How it works (dark, numbered) --- */
.yz-auth-steps__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 56px);
}
.yz-auth-step { position: relative; }
.yz-auth-step__n {
	display: block;
	font-family: var(--yz-font-display, serif);
	font-size: clamp(34px, 4.4vw, 46px);
	line-height: 1;
	color: var(--yz-gold);
	opacity: 0.9;
}
.yz-auth-step__title {
	margin: 16px 0 8px;
	font-family: var(--yz-font-display, serif);
	font-weight: 500;
	font-size: 20px;
	color: var(--yz-ivory);
}
.yz-auth-step__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.64;
	color: rgba(245, 241, 233, 0.7);
}

/* ------------------------------------------------- Closing CTA panel ----- */
.yz-auth-cta {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(34px, 5vw, 66px) clamp(24px, 4vw, 56px);
	text-align: center;
	border: 1px solid var(--yz-hairline, rgba(20, 18, 16, 0.14));
	background: linear-gradient(180deg, rgba(154, 123, 63, 0.05), transparent 70%);
}
.yz-auth-cta__title {
	margin: 0;
	font-family: var(--yz-font-display, serif);
	font-weight: 500;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}
.yz-auth-cta__lede {
	max-width: 52ch;
	margin: 0.6em auto 0;
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.66;
	color: var(--yz-muted, #6e6a63);
}

/* ------------------------------------------------------- Responsive ------ */
@media (max-width: 860px) {
	.yz-auth-steps__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   ELEMENTOR BRIDGE
   --------------------------------------------------------------------------
   Everything above styles the theme's own template part. When Elementor owns this page the SAME
   components render inside Elementor's container wrappers, and a wrapper between a rule and the
   element it was written for is enough to break it.

   These rules add no design of their own. They exist only to hand back declarations that
   Elementor's container defaults take away, and they are inert when the theme draws the page
   because no `.e-con` is present then.

   ON SPECIFICITY — this is the whole trick. `.e-con` is ONE class, and so is `.yz-auth-cta`, so
   every conflict below is a tie decided by whichever stylesheet happens to load second. Writing
   them as `.yz-auth .e-con.X` makes them three classes, which beats Elementor's defaults outright
   while still LOSING to anything an editor sets in the panel (`.elementor-7951
   .elementor-element.elementor-element-XXX`, also three, but emitted later). That ordering is
   deliberate: the theme wins over Elementor's opinions, the operator wins over the theme.
   ========================================================================== */

/* ⚠️ THE SPACING RESET. Elementor gives every widget a bottom margin and every container a flex
   gap. The components above already carry their exact vertical rhythm (`__title { margin: 16px 0
   8px }`, `__desc { margin: 0 }`, `.yz-auth-head { margin-block-end: clamp(...) }`), so Elementor's
   defaults are not a replacement for that rhythm — they are ADDED to it, once per widget and once
   per container. On the homepage the same defaults silently added 2276px of page height. */
.yz-auth.e-con,
.yz-auth .e-con { --gap: 0px; --row-gap: 0px; --column-gap: 0px; }

/* `:not(:last-child)` mirrors Elementor's own selector so this is not decided by load order. */
.yz-auth .elementor-widget,
.yz-auth .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* The inner container KEEPS `yz-container` — that is where its max-width and its horizontal gutter
   come from, and it is what lines the content up with the header and footer. Only the vertical
   padding is handed back, because the band itself already applies it. */
.yz-auth .e-con.yz-container { padding-block: 0; }

/* The three centred blocks. `.e-con` sets `margin-inline: 0` from its own custom properties, which
   ties with `margin-inline: auto` above and would leave each of these hard against the start edge.
   Their widths are restated here rather than moved into Elementor controls so this file stays the
   one place the page's measure is defined. */
.yz-auth .e-con.yz-auth-hero__inner { max-width: 840px; margin-inline: auto; }
.yz-auth .e-con.yz-auth-head { max-width: 680px; margin-inline: auto; margin-block-end: clamp(38px, 6vw, 64px); }
.yz-auth .e-con.yz-auth-cta {
	max-width: 760px;
	margin-inline: auto;
	padding: clamp(34px, 5vw, 66px) clamp(24px, 4vw, 56px);
}

/* The bands are full-bleed; the gutter belongs to `yz-container` inside them, not to the band. */
.yz-auth .e-con.yz-auth-sec,
.yz-auth.e-con.yz-auth-sec { padding-inline: 0; }

/* ⚠️ TYPOGRAPHY HAS TO REACH ONE ELEMENT DEEPER — BUT ONLY WHERE THE WRAPPER DESCRIBES IT.
   Elementor free puts a widget's CSS classes on the OUTER `.elementor-element`, never on the `<h1>`
   inside it — there is no control that does. So `.yz-auth-hero__title` lands on the wrapper, and
   its declarations would reach the heading by inheritance … except that Elementor hard-sets
   `.elementor-heading-title { line-height: 1; margin: 0 }`, which breaks inheritance exactly where
   a display serif needs it. `font: inherit` hands the whole shorthand back to the wrapper.

   SCOPED TO THE THREE CLASSES THAT CARRY TYPE, NOT TO EVERY HEADING. A blanket
   `.yz-auth .elementor-heading-title` is two classes and outranks `.yz-auth-head h2` (one class,
   one element) — so the section heads inherited from a wrapper that describes no type at all and
   collapsed from 44px to body size. Naming the wrappers leaves `.yz-auth-head h2` to do its own
   job, which it does correctly on both renderers. */
.yz-auth .yz-eyebrow .elementor-heading-title,
.yz-auth .yz-auth-hero__title .elementor-heading-title,
.yz-auth .yz-auth-head__title .elementor-heading-title,
.yz-auth .yz-auth-cta__title .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; }

/* The text editor's own paragraph brings Astra's body margin with it; the wrapper carries the
   theme's spacing, so the inner one is duplication. */
.yz-auth .elementor-widget-text-editor p { margin: 0; }