/* Copyright (C) 2026 ceASAP LTD. All Rights Reserved. Proprietary.
 *
 * ce-brand.css — the shared design system for the redesigned pages.
 *
 * ⚠ WHY THIS FILE EXISTS. Scott, 28 Oct 2026, on keeping the CE packages storefront in step with
 * the calendar: *"Let's use this style sheet for all pages that we are going to redesign."* The
 * NRED-Approved pill had already been written TWICE before this file — once in
 * assets/product/cohort-product.css as `.ce-cohort__pill--badge` (solid white, 14px/700, a green
 * ring pulse on #22c55e) and once in assets/calendar/calendar.css as `.ce-calendar__hero-badge`
 * (translucent white, 13px/600 uppercase, an opacity pulse on #4ade80). Same badge, same words,
 * two looks, neither aware of the other. A third copy on the storefront would have made it three.
 *
 * ⚠ THE CALENDAR'S IS THE CANONICAL ONE, because that is the one Scott chose. The product hero
 * keeps its own until that page is redesigned in its turn — restyling a live sales page nobody has
 * reviewed is not a side effect this change is allowed to have. When it is redesigned, it adopts
 * `.ce-brand-badge` and its copy is deleted, not kept in step.
 *
 * ⚠ WHAT BELONGS IN HERE. Only objects that genuinely appear on more than one page: the brand
 * tokens, the hero band, the approval badge, the status dot and the two motion patterns. Anything
 * that exists on exactly one page belongs in that page's own stylesheet. A design system that
 * absorbs single-use rules stops being a system and becomes a second place to look.
 */

:root {
	/* The brand, as the gradient and the two blues it is built from. */
	--ce-brand:        #046bd2;
	--ce-brand-deep:   #02356f;
	--ce-brand-dark:   #0357a8;
	--ce-brand-ink:    #0e2747;
	--ce-brand-muted:  #54637a;
	--ce-brand-line:   #e6ebf2;
	--ce-brand-tint:   #e7eef8;
	/* ⚠ TWO BLUES, BECAUSE ONE DOT CANNOT SERVE BOTH GROUNDS. Scott, 28 Oct 2026: *"the pulsating
	   should be blue not green."* The brand blue reads cleanly on a white card and all but vanishes
	   on the hero's dark gradient, so the badge gets a lighter one. Same object, same animation,
	   one override. */
	--ce-brand-dot:         #046bd2;
	--ce-brand-dot-on-dark: #7cc4ff;
	--ce-brand-gradient: linear-gradient( 135deg, #046bd2 0%, #02356f 100% );
	--ce-brand-radius-pill: 999px;
}

/* ── the hero band ───────────────────────────────────────────────────────────────────────────
   ⚠ FULL BLEED, NOT A CARD. It breaks out of whatever container it is placed in, so a page that
   sits inside the theme's 1,100px wrapper still gets a banner that reaches both edges. The two
   radial washes are what stop the gradient reading as flat colour. */
.ce-brand-hero {
	position: relative;
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	overflow: hidden;
	min-height: 360px;
	background: var(--ce-brand-gradient);
	color: #fff;
}
/* ⚠ AND THE PAGE MUST NOT GAIN A SIDEWAYS SCROLLBAR FROM IT. `width: 100vw` counts the scrollbar
   that `100%` does not, so a full-bleed band overflows the document by the scrollbar's width —
   measured on the live calendar, 28 Oct 2026: document 1200px against a 1100px viewport, a 100px
   overhang masked by `body { overflow-x: hidden }` in the theme. `hidden` is a cover rather than a
   fix: it makes body a scroll container, which breaks `position: sticky` on any ancestor and is
   unreliable on iOS. `clip` stops the overflow extending the scrollable area without creating a
   scroll container. This file is enqueued only on the pages that adopt the system, so the rule
   reaches exactly those pages and nothing else. */
body { overflow-x: clip; }

.ce-brand-hero::before {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60%;
	height: 120%;
	background: radial-gradient( circle, rgba( 214, 230, 249, .18 ) 0%, rgba( 214, 230, 249, 0 ) 60% );
	pointer-events: none;
}
.ce-brand-hero::after {
	content: "";
	position: absolute;
	bottom: -25%;
	left: -10%;
	width: 50%;
	height: 100%;
	background: radial-gradient( circle, rgba( 10, 133, 240, .15 ) 0%, rgba( 10, 133, 240, 0 ) 65% );
	pointer-events: none;
}
.ce-brand-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: 4rem 1.5rem 5.5rem;
}
.ce-brand-hero__title {
	margin: 0 0 1rem;
	font-size: clamp( 2rem, 4vw, 3.25rem );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #fff;
}
.ce-brand-hero__sub {
	margin: 0;
	max-width: 92ch;
	font-size: clamp( 1rem, 1.5vw, 1.15rem );
	line-height: 1.55;
	color: rgba( 255, 255, 255, .88 );
}

/* ── the shell: the first block of the page, lifted out of the band ─────────────────────────
   ⚠ IT OVERLAPS THE HERO ON PURPOSE. Scott, 28 Oct 2026: *"the section below the hero area needs
   to be overlapping into it ... Match the shadow effect behind the calendar also to bring it out."*
   Measured off the live calendar's `.ce-calendar__shell`: a 64px negative top margin against the
   band's 88px bottom padding, so 24px of blue still shows beneath the content above it; a 12px
   radius; and the shadow that makes it read as lifted rather than merely placed.

   ⚠ z-index, OR THE BAND'S WASHES SIT ON TOP OF IT. .ce-brand-hero paints two radial gradients in
   ::before/::after; a shell pulled up into that area without its own stacking order is painted
   under them and picks up a blue cast along its top edge. */
/* ⚠ A PAGE STYLESHEET MUST NOT USE THE `margin` SHORTHAND ON AN ELEMENT CARRYING THIS CLASS. It
   loads after this file, so `margin: 0 0 26px` resets the negative top margin below and the overlap
   quietly does not happen — which cost two debugging rounds on 28 Oct 2026, once on the hero and
   once on the panel. Name the side: `margin-bottom`. */
.ce-brand-shell {
	position: relative;
	z-index: 1;
	margin-top: -64px;
	padding: 24px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 24px 56px rgba( 2, 53, 111, .18 );
}

/* ── the approval badge ──────────────────────────────────────────────────────────────────── */
.ce-brand-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 1rem;
	margin-bottom: 1.25rem;
	background: rgba( 255, 255, 255, .18 );
	-webkit-backdrop-filter: blur( 8px );
	backdrop-filter: blur( 8px );
	border: 1px solid rgba( 255, 255, 255, .35 );
	border-radius: var(--ce-brand-radius-pill);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── the status dot, and the two motion patterns ─────────────────────────────────────────────
   ⚠ THEY MEAN DIFFERENT THINGS, AND THAT IS WHY THERE ARE TWO. The opacity pulse is a steady
   "this is live" on a small dot. The ring pulse draws the eye outward from an object and is for
   the one element on a page that should attract attention — a price, a seat count. Using the
   opacity pulse on a price makes the price look like it is failing to render. */
.ce-brand-dot {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ce-brand-dot);
	box-shadow: 0 0 8px rgba( 4, 107, 210, .75 );
	animation: ce-brand-pulse 2s ease-in-out infinite;
}
/* On the hero band the dot sits on #02356f–#046bd2, where the brand blue disappears. */
.ce-brand-badge .ce-brand-dot {
	background: var(--ce-brand-dot-on-dark);
	box-shadow: 0 0 8px rgba( 124, 196, 255, .85 );
}
@keyframes ce-brand-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .5; }
}
/* The attention pattern: a ring that grows out of the element and fades. */
@keyframes ce-brand-ring {
	0%   { box-shadow: 0 0 0 0 rgba( 4, 107, 210, .55 ); }
	70%  { box-shadow: 0 0 0 10px rgba( 4, 107, 210, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 4, 107, 210, 0 ); }
}
.ce-brand-ring { animation: ce-brand-ring 2.4s ease-out infinite; }

/* ⚠ MOTION IS A PREFERENCE, NOT A DECORATION. Both patterns stop for anyone who has asked their
   system for reduced motion — which on a page selling a legal requirement to a 65-plus audience is
   not a niche setting. */
@media ( prefers-reduced-motion: reduce ) {
	.ce-brand-dot,
	.ce-brand-ring { animation: none; }
}


/* ── the slim site header ────────────────────────────────────────────────────────────────────
   ⚠ A REDESIGNED PAGE GETS A THINNER HEADER, AND ONLY A REDESIGNED PAGE. Scott, 28 Oct 2026: the
   white band above the hero *"should be much thinner. It should be only an accent line"*, applied
   to the storefront and the calendar but not to the rest of the site. The band is part of the
   Elementor header template every page shares, so it cannot be changed in Elementor without
   changing all of them; `body.ce-brand-page` is added by the two pages that have adopted this
   system, which keeps the rule to exactly those and makes the next adopter one line of PHP.

   ⚠ TARGETED BY POSITION, NOT BY ELEMENTOR ID. The band is the header's first container child and
   the blue navigation is its second. An id like `.elementor-element-5ebed15` is generated, differs
   between staging and production, and changes the day somebody re-saves the template. */
body.ce-brand-page .elementor-location-header > .e-con > .e-con:first-child {
	padding-top: 2px;
	padding-bottom: 4px;
	/* The accent line Scott asked for: the band stops being a field of white and becomes a rule. */
	border-bottom: 2px solid var(--ce-brand);
}
/* ⚠ AND THE THEME'S OWN GAP BELOW THE HEADER GOES TOO. Scott, 28 Oct 2026: *"the white band is
   still way too large"* — with a screenshot showing white between the navigation and the hero,
   which measured as zero at 1100px and SIXTY pixels at 1600px. Astra puts `margin-top: 60px` on
   `.content-area` above one of its breakpoints, so the band he was looking at was not the header at
   all but the theme's spacing under it, and it only exists on a wide screen. A page whose first
   element is a full-bleed band wants that band against the header, at every width. */
/* ⚠ AND IT HAS TO OUT-SPECIFY AN ID. Astra sets this from inline CSS as
   `.ast-plain-container.ast-no-sidebar #primary { margin-top: 60px }` — (1,2,0), and an id beats any
   number of classes, so `body.ce-brand-page .ast-container > .content-area` at (0,3,1) lost without
   a word. Borrowing the body classes Astra itself puts there takes this to (1,3,0), which wins on
   the same terms rather than by `!important`. */
body.ce-brand-page.ast-plain-container.ast-no-sidebar #primary,
body.ce-brand-page .ast-container > .content-area { margin-top: 0; }

/* The 68px logo is what actually sets the band's height; the padding alone cannot shrink it. */
body.ce-brand-page .elementor-location-header > .e-con > .e-con:first-child img {
	max-height: 34px;
	width: auto;
}