/* =========================================================================
   CCAPP Conferences — design system
   =========================================================================
   Layer 1: brand tokens (source of truth, mirrored as Divi 5 variables)
   Layer 2: per-conference skin (--conf-*) — printed by conference-skin.php
   Layer 3: components (heroes, marquee, badges, cards, countdown, store)

   Motion honors prefers-reduced-motion throughout.
   ========================================================================= */

/* ---- Layer 1: brand tokens ------------------------------------------- */

:root {
	/* CCAPP brand sheet */
	--ccapp-education:     #2AD2C9; /* bright turquoise */
	--ccapp-membership:    #008C95; /* deep teal */
	--ccapp-credentialing: #5F249F; /* purple */
	--ccapp-charcoal:      #2D2926; /* near-black */

	/* Complementary support colors (approved direction) */
	--ccapp-coral:         #D85A30; /* urgency only: deadlines, low stock */
	--ccapp-sand:          #F4F1EA; /* warm section background */
	--ccapp-ink-soft:      #5F5E5A;
	--ccapp-paper:         #FFFFFF;

	/* Tints for badges/labels (text pairs in comments) */
	--ccapp-teal-tint:     #E1F5EE; /* text #085041 */
	--ccapp-purple-tint:   #EEEDFE; /* text #3C3489 */
	--ccapp-amber-tint:    #FAEEDA; /* text #854F0B */
	--ccapp-coral-tint:    #FAECE7; /* text #712B13 */

	/* Type */
	--ccapp-font-display: 'Fraunces', Georgia, serif;
	--ccapp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Fluid type scale — clamp(min, preferred, max) */
	--ccapp-fs-hero:    clamp(2.4rem, 5.5vw + 1rem, 4.5rem);
	--ccapp-fs-h2:      clamp(1.8rem, 3vw + 0.8rem, 2.8rem);
	--ccapp-fs-h3:      clamp(1.3rem, 1.6vw + 0.7rem, 1.75rem);
	--ccapp-fs-body:    clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
	--ccapp-fs-small:   0.875rem;
	--ccapp-fs-label:   0.75rem;

	/* Fluid spacing */
	--ccapp-space-section: clamp(3.5rem, 8vw, 7rem);
	--ccapp-space-lg:      clamp(2rem, 4vw, 3.5rem);
	--ccapp-space-md:      1.5rem;
	--ccapp-space-sm:      0.75rem;

	--ccapp-radius:      12px;
	--ccapp-radius-pill: 999px;
	--ccapp-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Layer 2: skin fallback ------------------------------------------
   conference-skin.php prints the real values per page; this is only the
   safety net if that inline style is ever missing. */

:root {
	--conf-accent:   var(--ccapp-membership);
	--conf-accent-2: var(--ccapp-credentialing);
	--conf-bright:   var(--ccapp-education);
}

/* ---- Base ------------------------------------------------------------ */

.ccapp-display,
.ccapp-hero__title {
	font-family: var(--ccapp-font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* ---- Hero (dark base for all three variants) ------------------------- */

.ccapp-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--ccapp-charcoal);
	color: #fff;
}

.ccapp-hero__title { font-size: var(--ccapp-fs-hero); color: #fff; }
.ccapp-hero__title--accent { color: var(--conf-bright); }

.ccapp-hero__meta {
	color: #D3D1C7;
	font-size: var(--ccapp-fs-body);
}

/* Drifting brand orbs. Add 2–3 divs with these classes inside the hero
   (or an SVG module) — pure decoration, aria-hidden them in the builder. */
.ccapp-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}
.ccapp-orb--teal {
	width: clamp(180px, 26vw, 380px);
	height: clamp(180px, 26vw, 380px);
	background: var(--conf-accent);
	opacity: 0.26;
	top: -8%;
	left: -6%;
	animation: ccapp-drift-a 10s var(--ccapp-ease) infinite;
}
.ccapp-orb--purple {
	width: clamp(150px, 22vw, 320px);
	height: clamp(150px, 22vw, 320px);
	background: var(--conf-accent-2);
	opacity: 0.3;
	bottom: -10%;
	right: -5%;
	animation: ccapp-drift-b 12s var(--ccapp-ease) infinite;
}
.ccapp-orb--ring {
	width: clamp(50px, 7vw, 90px);
	height: clamp(50px, 7vw, 90px);
	background: transparent;
	border: 2px solid var(--conf-bright);
	opacity: 0.35;
	top: 12%;
	right: 16%;
	animation: ccapp-drift-b 8s var(--ccapp-ease) infinite;
}

@keyframes ccapp-drift-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(3rem, -2rem) scale(1.12); }
}
@keyframes ccapp-drift-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-2.5rem, 1.5rem) scale(0.92); }
}

/* Staggered entrance — pure CSS so content is NEVER dependent on JS to
   become visible (the Divi Visual Builder loads theme CSS but not theme
   JS). Plays once on load. Delay steps via .ccapp-rise--2 … --5.
   For scroll-triggered reveals below the fold, use .ccapp-rise-scroll
   instead (theme.js adds .is-inview). */
.ccapp-rise {
	opacity: 0;
	transform: translateY(18px);
	animation: ccapp-rise-in 0.7s var(--ccapp-ease) forwards;
}
.ccapp-rise--2 { animation-delay: 0.15s; }
.ccapp-rise--3 { animation-delay: 0.3s; }
.ccapp-rise--4 { animation-delay: 0.45s; }
.ccapp-rise--5 { animation-delay: 0.6s; }

@keyframes ccapp-rise-in {
	to { opacity: 1; transform: translateY(0); }
}

.ccapp-rise-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ccapp-ease), transform 0.7s var(--ccapp-ease);
}
.ccapp-rise-scroll.is-inview { opacity: 1; transform: translateY(0); }

/* ---- Marquee strip ---------------------------------------------------- */

.ccapp-marquee {
	overflow: hidden;
	background: var(--conf-accent);
	padding: 0.55rem 0;
}
.ccapp-marquee__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: ccapp-marquee 22s linear infinite;
}
.ccapp-marquee__item {
	font-family: var(--ccapp-font-body);
	font-size: var(--ccapp-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.92);
	padding-right: 2.5rem;
}
.ccapp-marquee:hover .ccapp-marquee__track { animation-play-state: paused; }

@keyframes ccapp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Buttons ----------------------------------------------------------
   Use as Divi element classes, or mirror these values into Button
   presets. Both routes stay in sync because both read --conf-*. */

.ccapp-btn {
	display: inline-block;
	font-family: var(--ccapp-font-body);
	font-weight: 600;
	font-size: var(--ccapp-fs-small);
	line-height: 1;
	padding: 0.9em 1.7em;
	border-radius: var(--ccapp-radius-pill);
	text-decoration: none;
	transition: transform 0.2s var(--ccapp-ease), background-color 0.2s, color 0.2s, border-color 0.2s;
	cursor: pointer;
}
.ccapp-btn:hover { transform: scale(1.05); }
.ccapp-btn:focus-visible {
	outline: 3px solid var(--conf-bright);
	outline-offset: 2px;
}

.ccapp-btn--primary { background: var(--conf-bright); color: var(--ccapp-charcoal); border: 0; }
.ccapp-btn--dark    { background: var(--ccapp-charcoal); color: #fff; border: 0; }
.ccapp-btn--ghost   {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.ccapp-btn--ghost:hover { border-color: var(--conf-bright); color: var(--conf-bright); }
.ccapp-btn--ghost-dark {
	background: transparent;
	color: var(--conf-accent);
	border: 1.5px solid var(--conf-accent);
}

/* ---- Badges ------------------------------------------------------------ */

.ccapp-badge {
	display: inline-block;
	font-size: var(--ccapp-fs-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.3em 0.9em;
	border-radius: var(--ccapp-radius-pill);
	line-height: 1.4;
}
.ccapp-badge--open      { background: var(--ccapp-teal-tint);   color: #085041; }
.ccapp-badge--early     { background: var(--ccapp-amber-tint);  color: #854F0B; }
.ccapp-badge--soon      { background: var(--ccapp-purple-tint); color: #3C3489; }
.ccapp-badge--save      { background: #F1EFE8;                  color: #5F5E5A; }
.ccapp-badge--urgent    { background: var(--ccapp-coral-tint);  color: #712B13; }
.ccapp-badge--keynote   { background: var(--conf-accent-2);     color: #fff; }
.ccapp-badge--live {
	background: var(--conf-accent-2);
	color: #fff;
}
.ccapp-badge--live::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--conf-bright);
	margin-right: 0.45em;
	animation: ccapp-pulse 1.6s ease-in-out infinite;
}
@keyframes ccapp-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* ---- Countdown --------------------------------------------------------- */

.ccapp-countdown { display: inline-flex; gap: 0.5rem; }
.ccapp-countdown__cell {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
	min-width: 3.6rem;
	text-align: center;
}
.ccapp-countdown__num {
	display: block;
	font-family: var(--ccapp-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 500;
	color: var(--conf-bright);
	font-variant-numeric: tabular-nums;
}
.ccapp-countdown__label {
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.65);
	text-transform: uppercase;
}
/* Light-background variant (e.g., pricing sections) */
.ccapp-countdown--light .ccapp-countdown__cell { background: #fff; border-color: #D3D1C7; }
.ccapp-countdown--light .ccapp-countdown__num { color: var(--conf-accent); }
.ccapp-countdown--light .ccapp-countdown__label { color: var(--ccapp-ink-soft); }

/* ---- Cards: speakers, agenda, conferences, products -------------------- */

.ccapp-card {
	background: var(--ccapp-paper);
	border: 1.5px solid #E5E2D9;
	border-radius: var(--ccapp-radius);
	transition: transform 0.25s var(--ccapp-ease), border-color 0.25s, box-shadow 0.25s;
}
.ccapp-card:hover {
	transform: translateY(-5px);
	border-color: var(--conf-accent);
}
.ccapp-card--speaker:hover { border-color: var(--conf-accent-2); }

.ccapp-agenda-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 0.9rem;
	border-radius: 8px;
	transition: background-color 0.2s;
}
.ccapp-agenda-row:hover { background: var(--ccapp-teal-tint); }
.ccapp-agenda-row__time {
	font-weight: 600;
	color: var(--conf-accent-2);
	font-size: var(--ccapp-fs-small);
	min-width: 5.2em;
	font-variant-numeric: tabular-nums;
}

/* ---- Sticky register bar -----------------------------------------------
   Markup: <div class="ccapp-sticky-register"> … </div> placed once in the
   Theme Builder body template. theme.js toggles .is-visible after the
   visitor scrolls past [data-ccapp-hero]. */

.ccapp-sticky-register {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.7rem 1rem;
	background: var(--ccapp-charcoal);
	color: #fff;
	transform: translateY(110%);
	transition: transform 0.35s var(--ccapp-ease);
}
.ccapp-sticky-register.is-visible { transform: translateY(0); }
.ccapp-sticky-register__text { font-size: var(--ccapp-fs-small); color: #D3D1C7; }

/* ---- Store -------------------------------------------------------------- */

.ccapp-price { color: var(--conf-accent); font-weight: 600; }

/* Distraction-free checkout: hide global chrome, keep a quiet page. */
body.ccapp-focused-checkout #main-header,
body.ccapp-focused-checkout #top-header,
body.ccapp-focused-checkout #main-footer,
body.ccapp-focused-checkout .ccapp-sticky-register {
	display: none !important;
}
body.ccapp-focused-checkout { background: var(--ccapp-sand); }

/* ---- Accessibility & motion --------------------------------------------- */

:focus-visible { outline-color: var(--conf-bright); }

@media (prefers-reduced-motion: reduce) {
	.ccapp-orb,
	.ccapp-marquee__track,
	.ccapp-badge--live::before {
		animation: none !important;
	}
	.ccapp-rise,
	.ccapp-rise-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	.ccapp-btn,
	.ccapp-card,
	.ccapp-sticky-register {
		transition: none !important;
	}
	.ccapp-btn:hover,
	.ccapp-card:hover { transform: none; }
}

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 767px) {
	.ccapp-countdown { flex-wrap: wrap; justify-content: center; }
	.ccapp-sticky-register__text { display: none; } /* keep just the button */
}

/* ---- Sponsor wall (tiered) ---------------------------------------------
   Rendered by [ccapp_sponsors]. Hosts largest, Sponsors large,
   Exhibitors small. All tiles uniform within their tier. */

.ccapp-sponsor-wall { display: flex; flex-direction: column; gap: 2.6rem; }

.ccapp-sponsor-tier__label {
	font-family: var(--ccapp-font-body);
	font-size: var(--ccapp-fs-label);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--conf-accent);
	text-align: center;
	margin-bottom: 1.1rem;
}

.ccapp-sponsor-tier__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: stretch;
}

.ccapp-sponsor-tile {
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	transition: transform 0.25s var(--ccapp-ease), border-color 0.25s;
	text-decoration: none;
}
a.ccapp-sponsor-tile:hover { transform: translateY(-4px); border-color: var(--conf-accent); }

.ccapp-sponsor-tile__logo { width: auto; height: auto; object-fit: contain; display: block; }
.ccapp-sponsor-tile__name {
	font-family: var(--ccapp-font-body);
	font-weight: 600;
	color: var(--ccapp-charcoal);
	text-align: center;
	font-size: 0.95rem;
}

/* Tier sizing: host > sponsor > exhibitor */
.ccapp-sponsor-tier--host .ccapp-sponsor-tile { width: 300px; height: 150px; }
.ccapp-sponsor-tier--host .ccapp-sponsor-tile__logo { max-height: 90px; max-width: 230px; }

.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile { width: 230px; height: 115px; }
.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile__logo { max-height: 62px; max-width: 175px; }

.ccapp-sponsor-tier--exhibitor .ccapp-sponsor-tile { width: 160px; height: 82px; padding: 12px; }
.ccapp-sponsor-tier--exhibitor .ccapp-sponsor-tile__logo { max-height: 44px; max-width: 125px; }

@media (max-width: 767px) {
	.ccapp-sponsor-tier--host .ccapp-sponsor-tile { width: 46%; height: 110px; }
	.ccapp-sponsor-tier--host .ccapp-sponsor-tile__logo { max-height: 64px; max-width: 80%; }
	.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile { width: 46%; height: 96px; }
	.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile__logo { max-height: 52px; max-width: 80%; }
	.ccapp-sponsor-tier--exhibitor .ccapp-sponsor-tile { width: 30%; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
	a.ccapp-sponsor-tile:hover { transform: none; }
}

/* ---- Pinned site header (fixed-on-scroll) --------------------------------
   position:sticky breaks inside Divi's layout wrappers, so theme.js pins
   the menu bar with position:fixed once it reaches the top of the
   viewport, and inserts a spacer so content doesn't jump. */

.ccapp-menu-bar.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9995;
}
body.admin-bar .ccapp-menu-bar.is-fixed { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ccapp-menu-bar.is-fixed { top: 46px; }
}

.ccapp-footer-link,
.ccapp-footer-link:visited {
	color: #D3D1C7;
	text-decoration: none;
	transition: color 0.2s;
}
.ccapp-footer-link:hover { color: var(--conf-bright); }

/* ---- Register button states & sizes ------------------------------------- */

.ccapp-btn--sm { font-size: 0.8rem; padding: 0.65em 1.4em; }

.ccapp-btn--disabled {
	background: rgba(255, 255, 255, 0.1);
	color: #B4B2A9;
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	cursor: default;
}
.ccapp-btn--disabled:hover { transform: none; }

/* Light-background variant of the disabled state */
.ccapp-btn--disabled.ccapp-on-light {
	background: #F1EFE8;
	color: #5F5E5A;
	border-color: #D3D1C7;
}

/* Menu bar separation: thin teal rule between header and page content. */
.ccapp-menu-bar { border-bottom: 2px solid rgba(42, 210, 201, 0.45); }
.ccapp-menu-bar .et_pb_menu, .ccapp-menu-bar .et_pb_module { margin-bottom: 0; }

/* ---- Condensing menu bar ------------------------------------------------ */

.ccapp-menu-bar {
	transition: padding 0.25s var(--ccapp-ease);
}
.ccapp-menu-bar img {
	transition: max-width 0.25s var(--ccapp-ease);
}
.ccapp-menu-bar.is-condensed {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
.ccapp-menu-bar.is-condensed img {
	max-width: 100px !important;
}
@media (prefers-reduced-motion: reduce) {
	.ccapp-menu-bar, .ccapp-menu-bar img { transition: none; }
}

/* ---- Site footer distinction --------------------------------------------
   Darker shade + teal top rule: bookends the header's bottom rule. */
.ccapp-site-footer { border-top: 2px solid rgba(42, 210, 201, 0.45); }