/* ==========================================================================
   CX Skills — home page components
   File:     css/cxskills-home.css   (wp-content/themes/conferpress-child/css/)
   Version:  1.1.0
   CHANGELOG
   v1.1.0  (23 Sep 2026) Ghost button bottom border restored (see note at
           .cxs-hero__btn--ghost).
   Markup:   [cxs_home_hero] in wp-content/mu-plugins/cxskills-home.php
   Loaded:   by that mu-plugin, on the front page only.

   All values from css/cxskills-tokens.css. No hex, no var() fallbacks.

   GOLD IS NOT USED HERE ON PURPOSE. Gold is the one primary action on screen:
   the "Upcoming public courses" button in the header. The hero's own primary
   button is White on Indigo, so the two never compete.
   ========================================================================== */

.cxs-hero{
	/* Full-bleed band from inside the page container. */
	position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	background:var(--cxs-ds-band); color:var(--cxs-ds-text-on-dark);
	font-family:var(--cxs-ds-font); overflow:hidden;
}
.cxs-hero *,.cxs-hero *::before,.cxs-hero *::after{ box-sizing:border-box; }
/* The theme centres headings and copy on small screens with !important; the hero is left-aligned. */
.cxs-hero .cxs-hero__copy,.cxs-hero .cxs-hero__copy *,.cxs-hero .cxs-hero__card,.cxs-hero .cxs-hero__card *{ text-align:left !important; }
.cxs-hero .cxs-hero__date,.cxs-hero .cxs-hero__date *,.cxs-hero a.cxs-hero__btn{ text-align:center !important; }
.cxs-hero::after{
	content:""; position:absolute; right:-180px; top:-180px; width:560px; height:560px; border-radius:50%;
	background:var(--cxs-ds-indigo-600); opacity:.45; pointer-events:none;
}
.cxs-hero__in{
	position:relative; z-index:1;
	max-width:var(--cxs-ds-content-max); margin:0 auto;
	padding:var(--cxs-ds-space-3xl) var(--cxs-ds-space-lg) var(--cxs-ds-space-3xl);
	display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--cxs-ds-space-2xl); align-items:center;
}

/* Copy */
.cxs-hero .cxs-hero__h1{ margin:0 0 var(--cxs-ds-space-md); padding:0; font-family:var(--cxs-ds-font); color:var(--cxs-ds-text-on-dark); text-transform:none; letter-spacing:normal; }
.cxs-hero .cxs-hero__eyebrow{
	display:block; margin-bottom:var(--cxs-ds-space-sm);
	font-size:var(--cxs-ds-text-eyebrow); font-weight:var(--cxs-ds-weight-semibold);
	letter-spacing:var(--cxs-ds-tracking-eyebrow); text-transform:uppercase; line-height:1.4;
	color:var(--cxs-ds-accent-on-dark);
}
.cxs-hero .cxs-hero__title{
	display:block; font-size:var(--cxs-ds-text-display); font-weight:var(--cxs-ds-weight-bold);
	line-height:var(--cxs-ds-leading-tight); letter-spacing:-.01em; color:var(--cxs-ds-text-on-dark);
}
.cxs-hero .cxs-hero__lead{
	margin:0 0 var(--cxs-ds-space-lg); max-width:600px;
	font-size:var(--cxs-ds-text-lead); line-height:1.55; color:var(--cxs-ds-text-muted-on-dark);
}
.cxs-hero .cxs-hero__lead strong{ color:var(--cxs-ds-text-on-dark); font-weight:var(--cxs-ds-weight-semibold); }

.cxs-hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--cxs-ds-space-sm); margin-bottom:var(--cxs-ds-space-md); }
.cxs-hero a.cxs-hero__btn{
	display:inline-flex; align-items:center; justify-content:center;
	font-size:var(--cxs-ds-text-body); font-weight:var(--cxs-ds-weight-semibold); line-height:1.2;
	padding:15px 24px; border-radius:var(--cxs-ds-radius-md); border:2px solid transparent;
	text-decoration:none; text-transform:none; letter-spacing:normal; white-space:nowrap;
	transition:background .15s, color .15s, border-color .15s;
}
.cxs-hero a.cxs-hero__btn--primary{ background:var(--cxs-ds-white); color:var(--cxs-ds-indigo-800); }
.cxs-hero a.cxs-hero__btn--primary:hover{ background:var(--cxs-ds-indigo-50); color:var(--cxs-ds-indigo-900); }
.cxs-hero a.cxs-hero__btn--ghost{ border-color:var(--cxs-ds-border-on-dark); color:var(--cxs-ds-text-on-dark); background:transparent; }
/* main.css (line ~6841) strips border-bottom with !important from every link
   inside .tribe-events-content (the theme wraps the whole page in it) unless
   the link's class is on a short whitelist. That rule is what has been eating
   the bottom border off outlined buttons across the site. Re-assert it here.
   That rule's :not() chain gives it class-level weight 0,4,1, so a plain class
   selector cannot beat it even with !important. :not(#cxs-x) adds id weight
   (1,0,0) without matching anything real. Remove when main.css is fixed. */
.cxs-hero a.cxs-hero__btn:not(#cxs-x){ border-bottom:2px solid transparent !important; }
.cxs-hero a.cxs-hero__btn--ghost:not(#cxs-x){ border-bottom-color:var(--cxs-ds-border-on-dark) !important; }
.cxs-hero a.cxs-hero__btn--ghost:not(#cxs-x):hover{ border-bottom-color:var(--cxs-ds-white) !important; }
.cxs-hero a.cxs-hero__btn--ghost:hover{ border-color:var(--cxs-ds-white); background:color-mix(in srgb, var(--cxs-ds-white) 8%, transparent); }
.cxs-hero a.cxs-hero__link{
	display:inline-block; margin-bottom:var(--cxs-ds-space-xl);
	font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-medium);
	color:var(--cxs-ds-text-on-dark); text-decoration:underline; text-underline-offset:3px;
	text-decoration-color:var(--cxs-ds-indigo-300);
}
.cxs-hero a.cxs-hero__link:hover{ text-decoration-color:var(--cxs-ds-gold); }

.cxs-hero .cxs-hero__proof{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--cxs-ds-space-sm) var(--cxs-ds-space-xl); }
.cxs-hero .cxs-hero__proof li{
	display:flex; align-items:center; gap:var(--cxs-ds-space-xs); margin:0; padding:0;
	font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted-on-dark); line-height:1.4;
}
.cxs-hero .cxs-hero__proof li::before{ content:none; }
.cxs-hero .cxs-hero__proof strong{ color:var(--cxs-ds-text-on-dark); }
.cxs-hero .cxs-hero__proof svg{ width:18px; height:18px; flex:none; fill:var(--cxs-ds-gold); }

/* Upcoming courses card */
.cxs-hero .cxs-hero__card{
	background:var(--cxs-ds-white); color:var(--cxs-ds-text);
	border-radius:var(--cxs-ds-radius-xl); padding:var(--cxs-ds-space-lg);
	box-shadow:0 20px 50px color-mix(in srgb, var(--cxs-ds-indigo-900) 35%, transparent);
}
.cxs-hero .cxs-hero__cardh{ margin:0 0 var(--cxs-ds-space-sm); font-size:var(--cxs-ds-text-h4); font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-text); line-height:1.3; }
.cxs-hero .cxs-hero__courses{ list-style:none; margin:0; padding:0; }
.cxs-hero .cxs-hero__courses li{ margin:0; padding:0; border-top:1px solid var(--cxs-ds-border); }
.cxs-hero .cxs-hero__courses li::before{ content:none; }
.cxs-hero a.cxs-hero__course{
	display:flex; gap:var(--cxs-ds-space-md); align-items:center;
	padding:var(--cxs-ds-space-sm) var(--cxs-ds-space-xs); margin:0 calc(-1 * var(--cxs-ds-space-xs));
	border-radius:var(--cxs-ds-radius-md); text-decoration:none; color:var(--cxs-ds-text);
}
.cxs-hero a.cxs-hero__course:hover{ background:var(--cxs-ds-indigo-50); }
.cxs-hero .cxs-hero__date{
	flex:none; width:56px; text-align:center; padding:6px 0;
	background:var(--cxs-ds-indigo-50); color:var(--cxs-ds-indigo-700); border-radius:var(--cxs-ds-radius-md);
}
.cxs-hero .cxs-hero__date b{ display:block; font-size:var(--cxs-ds-text-h3); font-weight:var(--cxs-ds-weight-bold); line-height:1.1; }
.cxs-hero .cxs-hero__date small{ display:block; font-size:11px; font-weight:var(--cxs-ds-weight-semibold); letter-spacing:.06em; text-transform:uppercase; }
.cxs-hero .cxs-hero__ctext{ min-width:0; }
.cxs-hero .cxs-hero__ctitle{ display:block; font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-semibold); line-height:1.35; color:var(--cxs-ds-text); }
.cxs-hero .cxs-hero__cmeta{ display:block; font-size:var(--cxs-ds-text-caption); color:var(--cxs-ds-text-muted); margin-top:2px; }
.cxs-hero .cxs-hero__empty{ margin:0; padding:var(--cxs-ds-space-sm) 0; font-size:var(--cxs-ds-text-small); color:var(--cxs-ds-text-muted); border-top:1px solid var(--cxs-ds-border); }
.cxs-hero a.cxs-hero__all{
	display:block; margin-top:var(--cxs-ds-space-sm); padding-top:var(--cxs-ds-space-sm); border-top:1px solid var(--cxs-ds-border);
	font-size:var(--cxs-ds-text-small); font-weight:var(--cxs-ds-weight-semibold); color:var(--cxs-ds-link); text-decoration:none;
}
.cxs-hero a.cxs-hero__all:hover{ color:var(--cxs-ds-link-hover); }

.cxs-hero a:focus-visible{ outline:2px solid var(--cxs-ds-focus-on-dark); outline-offset:2px; }
.cxs-hero .cxs-hero__card a:focus-visible{ outline-color:var(--cxs-ds-focus); }

@media (max-width:991px){
	.cxs-hero__in{ grid-template-columns:1fr; padding:var(--cxs-ds-space-2xl) var(--cxs-ds-space-lg); gap:var(--cxs-ds-space-xl); }
	.cxs-hero::after{ width:360px; height:360px; right:-160px; top:-160px; }
}
@media (max-width:600px){
	.cxs-hero__in{ padding:var(--cxs-ds-space-xl) var(--cxs-ds-space-md); }
	.cxs-hero .cxs-hero__title{ font-size:var(--cxs-ds-text-h1); }
	.cxs-hero .cxs-hero__lead{ font-size:var(--cxs-ds-text-body); }
	.cxs-hero a.cxs-hero__btn{ width:100%; }
}