/*
 Theme Name:   We All Count
 Theme URI:    https://weallcount.com
 Description:  A child theme for GeneratePress
 Author:       We All Count
 Author URI:   https://weallcount.com
 Template:     generatepress
 Version:      1.0
*/

:root {
	--contrast: var(--color-charcoal);
	--base: var(--color-ivory);
    --base-3: var(--color-ivory);
    --accent: var(--color-deep-indigo);
	--button-radius: 12px;
  	--staggered-delay: 0.15s;
  	--staggered-opacity-duration: 0.9s;
  	--staggered-translate-y: 30px;
  	--staggered-translate-y-duration: 0.8s;
  	/* Match Apple's easeInOutQuad across both opacity and translate */
  	--staggered-ease: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  	--staggered-opacity-ease: var(--staggered-ease);
  	--stagger-start-fraction: 0.85;
  	/* Minimum ratio of a group's own height that must be visible before revealing */
  	--stagger-min-visible-ratio: 0.6;
  	--strikethrough-thickness: 5px;
  	--strikethrough-color: var(--color-bright-purple);
  	--strikethrough-offset-y: 61%;
  	--strikethrough-extend-left: 8px;
  	--strikethrough-extend-right: 8px;
  	--site-content-margin-top: 280px;
  	/* Stagger fast scroll catch-up threshold (px of scroll delta that forces start) */
  	--stagger-fast-scroll-threshold: 450px;
	/* Courses page hero svg */
	--circle-size: 31px;
	--circle-gap: 16px;
	--gp-slideout-width: 100%;
}

html {
	scrollbar-gutter: stable;
}
html, body {
	box-sizing: border-box;
}
/* Prevent overflow when megamenu opens on Windows */
html:has(.menu-item .gb-overlay--positioned) {
    overflow-x: hidden;
}
ul, ol {
    margin: 0 0 1em 1.5em;
}

/* Screen-reader only (accessible, not visible) */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Home - Hero */
.highlight-o {
  position: relative;
  display: inline-block;
  line-height: 0.8;
}
.yellow-circle {
  position: absolute;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--color-marigold);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
@media (max-width: 1159.98px) {
	.yellow-circle {
		width: 40px;
   		height: 40px;
	}
}

/* Stagger (Apple-style): generic so any group can use it */
[data-stagger-group] [data-stagger-item] {
  /* ACCESSIBILITY NOTE:
     We intentionally do NOT use `visibility: hidden` here.
     These items may start visually hidden (opacity/transform), but they remain
     in the accessibility tree so screen readers can still access the content.
     Reduced motion forces the final state below. */
  opacity: 0;
  transform: translateY(var(--staggered-translate-y)) translateZ(0); 
}
[data-stagger-group].staggered-start [data-stagger-item] {
  will-change: opacity, transform;
  /* Both opacity and translateY are staggered per-item, matching Apple's timing */
  transition: opacity var(--staggered-opacity-duration) var(--staggered-ease)
      var(--item-delay, 0s),
    transform var(--staggered-translate-y-duration) var(--staggered-ease)
      var(--item-delay, 0s);
}
[data-stagger-group].staggered-end [data-stagger-item] {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  /* ACCESSIBILITY NOTE:
     When the user requests reduced motion, we disable transitions and show the
     final state immediately (no fade/slide). */
  [data-stagger-group] [data-stagger-item] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }
}

.chaos-system .animation-wrapper,
.scared-confident .animation-wrapper,
.constrained-empowered .animation-wrapper,
.unfair-fair .animation-wrapper,
.sloppy-robust .animation-wrapper,
.alone-supported .animation-wrapper {
    width: 100%;
}
.chaos-system .animation-wrapper {
    overflow: hidden;
}
.scared-confident .animation-wrapper,
.constrained-empowered .animation-wrapper,
.unfair-fair .animation-wrapper,
.sloppy-robust .animation-wrapper,
.alone-supported .animation-wrapper {
	overflow: visible;
}
.scared-confident .animation-wrapper svg,
.constrained-empowered .animation-wrapper svg,
.unfair-fair .animation-wrapper svg,
.sloppy-robust .animation-wrapper svg,
.alone-supported .animation-wrapper svg {
    overflow: visible;
    shape-rendering: geometricPrecision;
}
.chaos-system .animation-wrapper svg,
.scared-confident .animation-wrapper svg,
.constrained-empowered .animation-wrapper svg,
.unfair-fair .animation-wrapper svg,
.sloppy-robust .animation-wrapper svg,
.alone-supported .animation-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

/* Ensure the pseudo-element positions relative to this span and matches word width */
.text-wrapper .animation-heading .strikethrough-wrapper {
  position: relative;
  display: block;
	/* Ensure z-index ordering inside this wrapper is deterministic even when
     ancestors create new stacking contexts (e.g., transforms from smooth scroll). */
  isolation: isolate;
  z-index: 0;
}

.text-wrapper .animation-heading .heading-strikethrough {
  position: relative;
  display: inline-block;
}
/* Keep <del> semantic for AT, but don't show a native line-through.
   The visible strikethrough is the animated SVG stroke. */
.text-wrapper .animation-heading del.heading-strikethrough {
  text-decoration: none;
}

/* SVG stroke-based strikethrough */
.strike-svg {
  position: absolute;
  /* JS sets precise pixel left based on word span; default is 0 fallback */
  left: 0;
  top: var(--strikethrough-offset-y);
  transform: translateY(-50%);
  /* Width is driven by explicit SVG width attribute from JS measurement */
  width: auto;
  height: var(--strikethrough-thickness);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.strike-svg path {
  stroke: var(--strikethrough-color);
  stroke-width: var(--strikethrough-thickness);
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: var(--strike-length, 0);
  stroke-dashoffset: var(--strike-length, 0);
  transition: stroke-dashoffset var(--strike-draw-duration, 900ms)
    var(--strike-draw-ease, cubic-bezier(0.15, 0.15, 0.85, 1))
    var(--strike-draw-delay, 0ms);
  will-change: stroke-dashoffset;
}

/* Reveal animation after grid completes */
.chaos-system__grid-complete .strike-svg path,
.scared-confident__grid-complete .strike-svg path,
.constrained-empowered__grid-complete .strike-svg path,
.unfair-fair__grid-complete .strike-svg path,
.sloppy-robust__grid-complete .strike-svg path,
.alone-supported__grid-complete .strike-svg path {
  stroke-dashoffset: 0;
}

/** COURSES hero */
/* Apply external bottom mask to circle grid */
#frame[data-use-external-mask="true"] .circle-grid {
  mask: url(#combinedDotMask);
  -webkit-mask: url(#combinedDotMask);
}

@media (prefers-reduced-motion: reduce) {
  /* ACCESSIBILITY NOTE:
     For reduced motion, the strikethrough should not draw/animate.
     We immediately show it in the completed state with no transition. */
  .strike-svg path {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
	/* Resources page.
	The hero background uses JS to animate circle fill colors on touch devices;
	this rule prevents any residual CSS transitions from running.
	*/
  .hero-circle-grid svg circle {
    transition: none !important;
  }
  /* Data Equity Framework page */
  .hero-circle-grid *,
  .hero-circle-grid svg,
  .hero-circle-grid circle {
    animation: none !important;
    transition: none !important;
  }
	/* Courses page */
  .circle-grid,
  .circle-grid * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
	.chaos-system .animation-wrapper,
  .scared-confident .animation-wrapper,
  .constrained-empowered .animation-wrapper,
  .unfair-fair .animation-wrapper,
  .sloppy-robust .animation-wrapper,
  .alone-supported .animation-wrapper {
    justify-self: center;
  }
}

/* Prevent “flash then disappear”: if JS is enabled,
   start the animated shapes hidden so the first paint matches the animation.
   The text inside the SVG remains visible. */
#tde-hero-bright-purple-shape,
#tde-hero-deep-indigo-shapes,
#tde-hero-persimmon-shape,
#tde-hero-crimson-shape,
#tde-hero-sky-blue-shape,#tde-hero-marigold-shape {
  opacity: 0;
  visibility: hidden;
}

/* General Swiper Slider customization */
.swiper .swiper-button-prev:after,
.swiper .swiper-button-next:after {
	content: none;
}
.swiper .swiper-wrapper {
	padding-top: 10px;
	padding-bottom: 50px;
	transition-timing-function: cubic-bezier(0.45, 0.26, 0.18, 0.9);
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	height: 13px;
	width: 13px;
	background: var(--color-cream);
	opacity: 1;
	margin: 0 7px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active {
	background: var(--color-bright-purple);
}
@media (max-width: 768px) {
	.slider-mobile {
		padding-bottom: 10px;
	}
	.slider-mobile .slider-mobile-wrapper {
		display: flex;
		column-gap: 0;
		row-gap: 0;
	}
	.swiper .swiper-wrapper {
		transition-duration: 500ms !important
	}
	.swiper .swiper-button-next,
	.swiper .swiper-button-prev {
		top: 23%;
	}
	.slider-mobile .swiper-button-next,
	.slider-mobile .swiper-button-prev {
		top: 95%;
	}
	.swiper:not(.slider-mobile) .swiper-button-prev,
	.swiper-rtl .swiper-button-next {
		left: 20px;
	}
	.swiper:not(.slider-mobile) .swiper-button-next,
	.swiper-rtl .swiper-button-prev {
		right: 20px;
	}
}

/* General styles */
.is-flex-col {
	display: flex;
	flex-direction: column;
}
.is-scroll-container::-webkit-scrollbar {
  width: 8px;
}
.is-scroll-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}
.is-scroll-container::-webkit-scrollbar-thumb {
  background-color: #2f2f7a;
  border-radius: 10px;
  border: 2px solid #f5f5f5;
}
.is-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-deep-indigo);
}
.is-scroll-container { /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #2f2f7a #f5f5f5;
}

/* JS based scroller */
.scroll-wrapper {
  position: relative;
  height: 360px;
  overflow: hidden;
	padding-bottom: 10px;
}
.scroll-content {
  height: 100%;
  overflow-y: scroll;
  padding-right: 20px; /* space for fake scrollbar */
  box-sizing: content-box;
  /* Hide native scrollbar */
  scrollbar-width: none; /* Firefox */
}
.scroll-content::-webkit-scrollbar {
  display: none; /* Chrome / Safari */
}
.scrollbar {
  position: absolute;
  top: 0;
  right: 4px;
  width: 6px;
  height: 100%;
  background: rgba(236, 234, 242, 1);
	border-radius: 6px;
}
.scroll-thumb {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  background: var(--color-deep-indigo);
  border-radius: 6px;
  cursor: pointer;
}
.no-select {
  user-select: none;
}

/* Accordions */
.gb-accordion__item {
    scroll-margin-top: 100px; /* Adjust for your header */
}

/* Tabs */
@media (max-width: 767px) {
	/* Hide tabs menu since we are converting tabs to accordion */
	.gb-tabs .gb-tabs__menu {
		display: none;
	}
	.gb-tabs .gb-tabs__item.gb-tabs__item-open {
		display: none;
	}
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="url"]
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	border-radius: 12px;
	font-size: 22px;
	padding: 6px 15px;
}

/* Buttons */
.button {
    border-radius: var(--button-radius);
    border: 0;
	color: var(--color-bright-purple);
  	background-color: var(--color-cream);
	background-image: none;
    text-transform: uppercase;
	text-decoration: none;
    font-size: 24px;
    font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	justify-content: center;
    padding: 8px;
	transition: transform 0.06s ease-out, color 0.15s ease-out;
	overflow: hidden;
	position: relative;
	z-index: 0;
  	isolation: isolate;
	touch-action: manipulation;
}
.button:hover,
.button:focus-visible,
.button:active {
  /* Switch to cream once the fill is underway */
  color: var(--color-cream);
  transition-delay: 0s, 0.18s;
}
.button::before {
  /* Base background + border: solid on 3 sides, dotted on the bottom */
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  border: 4px solid var(--color-bright-purple);
  border-bottom-style: solid;
  border-radius: inherit;
  pointer-events: none;
  z-index: -2;
}

.button::after {
  /*
    Hover/focus overlay:
    - Purple background fill
    - Solid border
    - Revealed left → right using translation (reliable across browsers)
  */
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-bright-purple);
  border: 4px solid var(--color-bright-purple);
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;

  /* Reveal left -> right via translation (more consistent than clip-path) */
  transform: translateX(-101%);
  transition: transform 0.4s ease-out;
  will-change: transform;
}

.button--upper {
  /* Utility class: uppercase variant */
  text-transform: uppercase;
}

.button--capitalize {
  /* Utility class: title/capitalized variant */
  text-transform: capitalize;
}

.button--medium {
  /* Demo sizing */
  font-size: 2.5rem;
}

.button:hover::after,
.button:focus-visible::after,
.button:active::after {
  /* Reveal overlay for hover, keyboard focus, and press */
  transform: translateX(0);
}

/*
  Interaction: active / pressed
  - Provides tactile feedback for mouse + touch.
  - Also forces the overlay/text reveal during press (useful on touch devices).
*/
.button:active {
  transform: translateY(1px);
}

/*
  Accessibility: focus styling
  `:focus-visible` shows a clear focus ring for keyboard users.
  We keep a fallback for browsers without :focus-visible.
*/
.button:focus-visible {
  outline: 3px dotted var(--color-bright-purple);
  outline-offset: 8px;
}

/* Fallback for browsers that don't support :focus-visible */
.button:focus {
  outline: 3px dotted var(--color-bright-purple);
  outline-offset: 8px;
}

.button:focus:not(:focus-visible) {
  /* Mouse click focus: don't show the ring */
  outline: none;
}

/*
  Accessibility: disabled state
  Disabled buttons should look non-interactive and should not animate.

  Note: for native <button>, prefer the `disabled` attribute.
  `[aria-disabled="true"]` is included for styling parity if you ever need it.
*/
.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-bright-purple);
  transition-delay: 0s;
}

.button:disabled::after,
.button[aria-disabled="true"]::after {
  display: none;
}

/* Ensure hover/focus/active styles don't reduce contrast when disabled */
.button:disabled:hover,
.button:disabled:focus,
.button:disabled:focus-visible,
.button:disabled:active,
.button[aria-disabled="true"]:hover,
.button[aria-disabled="true"]:focus,
.button[aria-disabled="true"]:focus-visible,
.button[aria-disabled="true"]:active {
  color: var(--color-bright-purple);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /*
    Accessibility: reduced motion
    Disable transitions for users who prefer less motion.
  */
  .button::after,
  .button {
    transition: none;
  }

  .button:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  /*
    Accessibility: forced colors (Windows High Contrast)
    Let the OS pick colors; disable decorative layers.
  */
  .button {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .button::before,
  .button::after {
    display: none;
  }

  .button:focus,
  .button:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 4px;
  }
}

@media (prefers-contrast: more) {
  /* Accessibility: increase focus ring emphasis when user requests more contrast */
  .button:focus,
  .button:focus-visible {
    outline-width: 5px;
  }
}


/* Talking Data Equity */
.wac-upcoming-sessions {
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.wac-upcoming-sessions .session {
    display: flex;
    gap: 25px;
}
.wac-upcoming-sessions .date-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 138px;
	height: 138px;
	padding: 10px;
	border-radius: 27px;
	font-size: 50px;
	font-weight: 500;
	line-height: 0.9;
	text-transform: uppercase;
	position: relative;
}
.wac-upcoming-sessions .session.is-break:not(.is-running) {
	align-items: flex-start;
}
.wac-upcoming-sessions .session.is-running .date-block,
.wac-upcoming-sessions .session.is-break .date-block {
    justify-content: center;
    background: var(--color-cream);
	color: var(--color-deep-indigo);
}
.wac-upcoming-sessions .date-day {
	font-size: 80px;
	color: var(--color-deep-indigo);
}
.wac-upcoming-sessions .session.is-running .date-day {
	color: var(--color-bright-purple);
}
.wac-upcoming-sessions .session.is-running .date-month {
	color: var(--color-crimson);
}
.wac-upcoming-sessions .title-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 12px;
}
.wac-upcoming-sessions .session-title {
	font-size: 35px;
	line-height: 1.114;
	letter-spacing: 0.4px;
    font-family: 'Barlow Condensed';
    font-weight: 400;
    margin-bottom: 0;
}
.wac-upcoming-sessions p {
	margin: 0;
}
.wac-upcoming-sessions a {
	color: var(--color-bright-purple);
	text-transform: uppercase;
	text-decoration-style: dotted;
	text-underline-offset: 5px;
	font-size: 25px;
	font-weight: 600;
	width: fit-content;
}
.wac-upcoming-sessions a:hover {
	color: var(--color-bright-purple);
}
.wac-upcoming-sessions .session.is-cancelled .date-block:before {
    content: "";
    position: absolute;
    top: 0;
    width: 7px;
    height: 100%;
    background: var(--color-crimson);
    border-radius: 5px;
    transform: rotate(-45deg);
}
.wac-previous-sessions .is-flex-col {
	gap: 18px;
	padding-bottom: 5px;
}
.wac-previous-sessions a {
	font-size: 24px;
	line-height: 1.4;
	text-decoration-style: solid !important;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.wac-previous-sessions a:hover {
	color: var(--accent);
}
@media (max-width: 767px) {
	.wac-upcoming-sessions .date-block {
		min-width: 60px;
		height: 90px;
		border-radius: 8px;
		font-size: 30px;
	}
	.wac-upcoming-sessions .date-day {
   	 	font-size: 52px;
	}
	.wac-upcoming-sessions .session.is-break .date-block {
		font-size: 18px;
		width: 54px;
		height: 54px;
	}
	.wac-upcoming-sessions .session.is-break .title-block {
		margin-top: 0;
		padding-top: 0;
	}
	.wac-upcoming-sessions .session-title {
		font-size: 24px;
		line-height: 1.114;
		font-weight: 500;
	}
	.wac-upcoming-sessions .session-desc {
		font-size: 19px;
		line-height: 27px;
		letter-spacing: 0.2px;
	}
	.wac-upcoming-sessions a {
		font-size: 23px;
	}
}

/* Single Post */
.post-content:not(:has(.post-tags)) .post-tags-title { /* Hide "Tags:" title when there are no tags */
    display: none;
}