/**
 * Elcogen Utility Classes
 *
 * Reusable component classes that can be used across all Elcogen widgets.
 * These utilities leverage the design tokens for consistent styling.
 */

/* ============================================
   SKIP TO MAIN CONTENT LINK - WCAG ACCESSIBILITY
   ============================================ */

/**
 * Skip Link - WCAG 2.1 Level A Requirement
 *
 * Provides keyboard users the ability to bypass repetitive navigation.
 * Hidden by default, becomes visible when focused with Tab key.
 */
.elcogen-skip-link,
.screen-reader-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.elcogen-skip-link:focus,
.screen-reader-text:focus {
	position: fixed;
	top: 0.625rem;
	left: 0.625rem;
	width: auto;
	height: auto;
	padding: 0.9375rem 1.25rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background-color: var(--color-dark-neutral);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	z-index: 999999;
	border-radius: 4px;
	box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
	outline: 0.1875rem solid var(--color-brand-primary);
	outline-offset: 0.125rem;
}

/* ============================================
   BUTTON SYSTEM
   ============================================ */

.elcogen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-baseline-08);
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-bold);
	border-radius: var(--radius-pill);
	border: var(--button-border-width) solid;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-all);
	white-space: nowrap;
}

/* Button Variants */
.elcogen-btn--primary {
	background-color: var(--color-dark-neutral);
	color: var(--color-white);
	border-color: var(--color-dark-neutral);
}

.elcogen-btn--primary:hover {
	background-color: var(--color-dark-neutral-hover);
	border-color: var(--color-dark-neutral-hover);
}

.elcogen-btn--secondary {
	background-color: transparent;
	color: var(--color-dark-neutral);
	border-color: var(--color-dark-neutral);
}

.elcogen-btn--secondary:hover {
	background-color: var(--color-dark-neutral);
	color: var(--color-white);
}

.elcogen-btn--tertiary {
	background-color: var(--color-cobalt-blue-400);
	color: var(--color-white);
	border-color: var(--color-cobalt-blue-400);
}

.elcogen-btn--tertiary:hover {
	background-color: var(--color-cobalt-blue-500);
	border-color: var(--color-cobalt-blue-500);
}

/* Button Sizes */
.elcogen-btn--small {
	padding: var(--button-padding-small);
	font-size: var(--font-size-body-base);
	line-height: var(--line-height-body-base);
}

.elcogen-btn--medium {
	padding: var(--button-padding-medium);
	font-size: var(--font-size-body-medium);
	line-height: var(--line-height-body-medium);
}

.elcogen-btn--large {
	padding: var(--button-padding-large);
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
}

/* ============================================
   LINK SYSTEM
   ============================================ */

.elcogen-link {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-primary);
	text-decoration: underline;
	text-underline-offset: var(--link-underline-offset);
	text-decoration-thickness: var(--link-underline-thickness);
	transition: var(--transition-color);
	cursor: pointer;
}

.elcogen-link:hover {
	color: var(--color-cobalt-blue-400);
}

.elcogen-link--no-underline {
	text-decoration: none;
}

.elcogen-link--small {
	font-size: var(--font-size-body-small);
	line-height: var(--line-height-body-small);
}

.elcogen-link--medium {
	font-size: var(--font-size-body-base);
	line-height: var(--line-height-body-base);
}

.elcogen-link--large {
	font-size: var(--font-size-body-medium);
	line-height: var(--line-height-body-medium);
}

/* Link Icon */
.elcogen-link__icon svg {
	width: 0.75rem;
	height: 0.75rem;
	transition: var(--transition-transform);
}

.elcogen-link:hover .elcogen-link__icon svg {
	transform: translateX(0.25rem);
}

/* ============================================
   CONTAINER SYSTEM
   ============================================ */

.elcogen-container {
	max-width: var(--container-default);
	margin: 0 auto;
	padding: 0 var(--spacing-baseline-24);
}

.elcogen-container--narrow {
	max-width: var(--container-narrow);
}

.elcogen-container--wide {
	max-width: var(--container-wide);
}

.elcogen-container--full {
	max-width: 100%;
}

/* ============================================
   CARD SYSTEM
   ============================================ */

.elcogen-card {
	background-color: var(--color-background-primary);
	border-radius: var(--radius-large);
	transition: var(--transition-background);
}

.elcogen-card--hoverable:hover {
	background-color: var(--card-hover-background);
}

.elcogen-card--padded {
	padding: var(--spacing-card-padding);
}

.elcogen-card--shadow {
	box-shadow: var(--shadow-medium);
}

/* ============================================
   ACCENT BAR
   ============================================ */

.elcogen-accent-bar {
	/* Styling now controlled by universal .elcogen-accent-bar class in global CSS */
	/* Figma spec: Simple blue rectangle, no gradient, no border-radius */
}

.elcogen-accent-bar--small {
	width: 5rem;
	height: 0.125rem;
}

.elcogen-accent-bar--medium {
	width: 7.5rem;
	height: 0.25rem;
}

.elcogen-accent-bar--large {
	width: 100%;
	height: 0.375rem;
}

/* ============================================
   FOCUS MANAGEMENT
   ============================================ */

.elcogen-focusable:focus {
	outline: var(--focus-outline-width) solid var(--focus-outline-color);
	outline-offset: var(--focus-outline-offset);
}

.elcogen-focusable:focus:not(:focus-visible) {
	outline: none;
}

.elcogen-focusable:focus-visible {
	outline: var(--focus-outline-width) solid var(--focus-outline-color);
	outline-offset: var(--focus-outline-offset);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

.elcogen-heading {
	font-family: var(--font-family-headings);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
	margin: 0;
}

.elcogen-heading--display {
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
}

.elcogen-heading--h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
}

.elcogen-heading--h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
}

.elcogen-heading--h3 {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
}

.elcogen-heading--h4 {
	font-size: var(--font-size-h4);
	line-height: var(--line-height-h4);
}

.elcogen-body-text {
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-secondary);
	margin: 0;
}

.elcogen-body-text--large {
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
}

.elcogen-body-text--medium {
	font-size: var(--font-size-body-medium);
	line-height: var(--line-height-body-medium);
}

.elcogen-body-text--base {
	font-size: var(--font-size-body-base);
	line-height: var(--line-height-body-base);
}

.elcogen-body-text--small {
	font-size: var(--font-size-body-small);
	line-height: var(--line-height-body-small);
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

.elcogen-flex {
	display: flex;
}

.elcogen-flex--center {
	align-items: center;
	justify-content: center;
}

.elcogen-flex--between {
	justify-content: space-between;
}

.elcogen-flex--column {
	flex-direction: column;
}

.elcogen-flex--wrap {
	flex-wrap: wrap;
}

/* Gap utilities */
.elcogen-gap-08 {
	gap: var(--spacing-baseline-08);
}

.elcogen-gap-12 {
	gap: var(--spacing-baseline-12);
}

.elcogen-gap-16 {
	gap: var(--spacing-baseline-16);
}

.elcogen-gap-24 {
	gap: var(--spacing-baseline-24);
}

.elcogen-gap-32 {
	gap: var(--spacing-baseline-32);
}

/* ============================================
   SECTION UTILITIES
   ============================================ */

.elcogen-section {
	width: 100%;
	padding: var(--spacing-section-vertical) var(--spacing-baseline-12);
}

.elcogen-section--light {
	background-color: var(--color-background-light);
}

.elcogen-section--blue {
	background-color: var(--color-background-secondary);
}

/* Mobile responsive section padding */
@media (max-width: 48rem) {
	.elcogen-section {
		padding: var(--spacing-section-vertical-mobile) var(--spacing-baseline-12);
	}
}

/* ============================================
   ICON UTILITIES
   ============================================ */

.elcogen-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.elcogen-icon--small {
	width: 1rem;
	height: 1rem;
}

.elcogen-icon--medium {
	width: 1.5rem;
	height: 1.5rem;
}

.elcogen-icon--large {
	width: 3rem;
	height: 3rem;
}

.elcogen-icon svg {
	width: 100%;
	height: 100%;
}