/**
 * Shared Styles for SAD ACF Blocks
 *
 * This file contains common patterns used across multiple blocks:
 * - CSS custom properties (design tokens)
 * - Container width system
 * - Text alignment utilities
 * - Accessibility features
 * - Responsive utilities
 *
 * @package SAD_ACF_Blocks
 * @version 1.0.0
 */

/* ============================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Container Widths - sync with theme.json if available */
	--sad-content-width: 1200px;
	--sad-wide-width: 1400px;
	--sad-full-width: 100%;

	/* Spacing Scale - consistent vertical rhythm */
	--sad-spacing-xs: 20px;
	--sad-spacing-sm: 40px;
	--sad-spacing-md: 80px;
	--sad-spacing-lg: 120px;
	--sad-spacing-xl: 160px;

	/* Typography Scale */
	--sad-text-xs: 0.75rem;    /* 12px */
	--sad-text-sm: 0.875rem;   /* 14px */
	--sad-text-base: 1rem;     /* 16px */
	--sad-text-lg: 1.125rem;   /* 18px */
	--sad-text-xl: 1.25rem;    /* 20px */
	--sad-text-2xl: 1.5rem;    /* 24px */
	--sad-text-3xl: 2rem;      /* 32px */
	--sad-text-4xl: 2.5rem;    /* 40px */
	--sad-text-5xl: 3rem;      /* 48px */

	/* Line Heights */
	--sad-leading-tight: 1.25;
	--sad-leading-normal: 1.5;
	--sad-leading-relaxed: 1.75;

	/* Responsive Breakpoints */
	--sad-bp-mobile: 480px;
	--sad-bp-tablet: 768px;
	--sad-bp-desktop: 1024px;
	--sad-bp-wide: 1280px;

	/* Container Padding */
	--sad-container-padding: clamp(1rem, 5vw, 1.5rem);
}

/* ============================================================================
   Container Width System
   Applied via PHP modifier classes: --width-contained, --width-wide, --width-full
   ========================================================================== */

/* Contained width (default content width) */
[class*="--width-contained"] [class*="__container"] {
	max-width: var(--sad-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sad-container-padding);
	padding-right: var(--sad-container-padding);
}

/* Wide width (for emphasis sections) */
[class*="--width-wide"] [class*="__container"] {
	max-width: var(--sad-wide-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--sad-container-padding);
	padding-right: var(--sad-container-padding);
}

/* Full width (edge-to-edge) */
[class*="--width-full"] [class*="__container"] {
	max-width: var(--sad-full-width);
	padding-left: 2rem;
	padding-right: 2rem;
}

/* Mobile optimization for full width */
@media (max-width: 768px) {
	[class*="--width-full"] [class*="__container"] {
		padding-left: var(--sad-container-padding);
		padding-right: var(--sad-container-padding);
	}
}

/* ============================================================================
   Text Alignment Utilities
   Applied via PHP modifier classes: --align-left, --align-center, --align-right
   ========================================================================== */

/* Left alignment */
[class*="--align-left"] [class*="__header"],
[class*="--align-left"] [class*="__content"] {
	text-align: left;
	align-items: flex-start;
}

/* Center alignment */
[class*="--align-center"] [class*="__header"],
[class*="--align-center"] [class*="__content"] {
	text-align: center;
	align-items: center;
}

/* Right alignment */
[class*="--align-right"] [class*="__header"],
[class*="--align-right"] [class*="__content"] {
	text-align: right;
	align-items: flex-end;
}

/* ============================================================================
   Accessibility Features
   Focus states, keyboard navigation, screen reader support
   ========================================================================== */

/* Focus visible styles for keyboard navigation */
[class*="sad-"] a:focus-visible,
[class*="sad-"] button:focus-visible,
[class*="sad-"] [tabindex]:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Remove outline for mouse/touch interactions (use :focus-visible) */
[class*="sad-"] a:focus:not(:focus-visible),
[class*="sad-"] button:focus:not(:focus-visible) {
	outline: none;
}

/* Skip link for screen readers (if needed in blocks) */
.sad-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #000;
	color: #fff;
	padding: 8px;
	text-decoration: none;
	z-index: 100;
}

.sad-skip-link:focus {
	top: 0;
}

/* Screen reader only text */
.sad-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================================================
   Reduced Motion Support
   Respects user's prefers-reduced-motion setting
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	[class*="sad-"] *,
	[class*="sad-"] *::before,
	[class*="sad-"] *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================================
   Responsive Utilities
   Common responsive patterns
   ========================================================================== */

/* Hide elements on mobile */
@media (max-width: 767px) {
	.sad-hidden-mobile {
		display: none !important;
	}
}

/* Hide elements on tablet and up */
@media (min-width: 768px) {
	.sad-hidden-tablet-up {
		display: none !important;
	}
}

/* Hide elements on desktop and up */
@media (min-width: 1024px) {
	.sad-hidden-desktop-up {
		display: none !important;
	}
}

/* ============================================================================
   Editor-Specific Styles
   Styles that only apply in the WordPress block editor
   ========================================================================== */

.editor-styles-wrapper [class*="sad-"] {
	/* Ensure blocks are visible in editor */
	min-height: 20px;
}

/* Preview placeholder styling (when no content) */
.sad-block-preview-placeholder {
	padding: 2rem;
	background: #f0f0f0;
	border: 2px dashed #ccc;
	text-align: center;
	border-radius: 4px;
}

.sad-block-preview-placeholder p {
	margin: 0;
	color: #666;
	font-size: 0.875rem;
}

/* ============================================================================
   Print Styles
   Optimize blocks for printing
   ========================================================================== */

@media print {
	/* Remove unnecessary padding for print */
	[class*="sad-"] {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	/* Ensure text is readable */
	[class*="sad-"] {
		color: #000 !important;
		background: #fff !important;
	}

	/* Avoid page breaks inside blocks */
	[class*="sad-"] {
		page-break-inside: avoid;
	}
}