/*
 Theme Name:   Loli Reiki
 Theme URI:    https://lolireiki.com
 Description:  Hello Elementor Child Theme for Loli Reiki
 Author:       Sterling
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/


/* =========================================================
   NOTES
   ---------------------------------------------------------
   Elementor Pro via Theme Style and Global settings controls
   all typography, colors, buttons, and layout.

   This file contains only what Elementor cannot handle:
   - Skip to content link (accessibility)
   - Focus styles (accessibility)
   - Reduced motion (accessibility)
   - Screen reader utility class
   - Safari text fix
   - Print styles

   All values are hardcoded here so these styles are
   self-contained and never depend on variables being
   defined elsewhere.

   Do not add typography or color rules here — they will
   conflict with Elementor and cause specificity problems.

   PALETTE REFERENCE (for this file only)
   Primary:    #0E4A5A
   Link:       #236E6A  (accessible links on light bg)
   Mist:       #F2F7F7  (replaces white — text on dark bg)
   ========================================================= */


/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}


/* ---------------------------------------------------------
   ACCESSIBILITY — SKIP TO CONTENT
   Visually hidden until focused. Required for WCAG 2.1 AA.
   Ratio: #F2F7F7 on #0E4A5A = 9.05 AAA
   --------------------------------------------------------- */

.skip-to-content {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 9999;
	padding: 12px 24px;
	background-color: #0E4A5A;
	color: #F2F7F7;
	font-family: 'Jost', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: top 0.2s ease;
}

.skip-to-content:focus {
	top: 0;
	outline: 3px solid #236E6A;
	outline-offset: 2px;
}


/* ---------------------------------------------------------
   ACCESSIBILITY — FOCUS STYLES
   Visible focus for keyboard navigation.
   #236E6A passes AA on both Mist and white backgrounds.
   --------------------------------------------------------- */

:focus-visible {
	outline: 3px solid #236E6A;
	outline-offset: 3px;
	border-radius: 4px;
}

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


/* ---------------------------------------------------------
   ACCESSIBILITY — REDUCED MOTION
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   ACCESSIBILITY — SCREEN READER UTILITY
   Add class="sr-only" to any element that should be
   announced by screen readers but not visible on screen.
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   ELEMENTOR FIXES
   --------------------------------------------------------- */

/* Prevent text collapse in Safari. */
.elementor-widget-container {
	word-break: break-word;
}


/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */

@media print {
	.elementor-location-header,
	.elementor-location-footer,
	.skip-to-content {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	a {
		color: #000;
		text-decoration: underline;
	}

	a[href]::after {
		content: ' (' attr(href) ')';
		font-size: 10pt;
	}
}