/* ========== BINDEX STYLESHEET ========== */
/* 
 * Main stylesheet that imports all CSS modules
 * Organization:
 * 1. Variables & Configuration
 * 2. Base & Reset
 * 3. Components (Header, Buttons, etc.)
 * 4. Sections & Layout
 * 5. Animations
 * 6. Responsive Design
 */

/* Variables & Configuration */
@import 'variables.css';
@import 'vendor/font-awesome-subset.css';

/* Base Styles */
@import 'base.css';

/* Components */
@import 'header.css';
@import 'buttons.css';
@import 'hero.css';
@import 'cards.css';
@import 'sections.css';
@import 'why-bindex.css';
@import 'gallery.css';
@import 'forms.css';
@import 'cta.css';
@import 'footer.css';
@import 'icons.css';

/* Page-specific */
@import 'contact.css';

/* Animations */
@import 'animations.css';

/* Responsive Design */
@import 'responsive.css';


/* ========== Accessibility helpers ==========
   Ensure keyboard focus is visible across interactive elements
   without changing existing visual design. 
*/
:is(a,button,input,textarea,select,[role="button"],[tabindex]):focus-visible {
	outline: 3px solid -webkit-focus-ring-color;
	outline-offset: 3px;
}

/* fallback for browsers without -webkit-focus-ring-color */
@supports not (outline: 3px solid -webkit-focus-ring-color) {
	:is(a,button,input,textarea,select,[role="button"],[tabindex]):focus-visible {
		outline: 3px solid var(--color-primary);
		outline-offset: 3px;
	}
}

/* Skip link: visually hidden but visible on keyboard focus */
.skip-link {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus,
.skip-link:active {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.5rem 0.75rem;
	z-index: 9999;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}