/**
 * Ataa — Base Reset & Global Styles
 *
 * @package Ataa
 */

/* ── Reset ── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 100%;
}

/* ── Body ── */
body {
	font-family:    var(--ataa-font-body);
	font-size:      var(--ataa-text-base);
	line-height:    var(--ataa-lh-normal);
	background:     var(--ataa-bg);
	color:          var(--ataa-text);
	overflow-x:     hidden;
	transition:     background-color var(--ataa-transition-slow),
	                color            var(--ataa-transition-slow);
}

/* RTL is the primary direction — set at body level.
   LTR is applied per-language by WPML's html[lang="en"] etc. */
body {
	direction: rtl;
	text-align: right;
}

html[lang="en"],
html[lang="fr"],
html[lang="es"] {
	direction: ltr;
}

html[lang="en"] body,
html[lang="fr"] body,
html[lang="es"] body {
	direction: ltr;
	text-align: left;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
	font-family:  var(--ataa-font-display);
	font-weight:  900;
	line-height:  var(--ataa-lh-tight);
	color:        var(--ataa-text);
}

h1 { font-size: var(--ataa-text-6xl); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.9rem); }
h3 { font-size: var(--ataa-text-xl); }
h4 { font-size: var(--ataa-text-lg); }
h5 { font-size: var(--ataa-text-base); }
h6 { font-size: var(--ataa-text-sm); }

p {
	line-height: var(--ataa-lh-normal);
	color: var(--ataa-text);
}

a {
	color: var(--ataa-primary);
	text-decoration: none;
	transition: color var(--ataa-transition);
}

a:hover {
	color: var(--ataa-primary-h);
}

img, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
}

ul, ol {
	list-style: none;
}

/* ── Container ── */
.ataa-container {
	max-width:  var(--ataa-container-max);
	margin:     0 auto;
	padding-inline: var(--ataa-container-px);
}

/* ── Section ── */
.ataa-section {
	padding-block: var(--ataa-section-py);
}

/* ── Screen reader only ── */
.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;
}

/* ── Skip link ── */
.skip-link {
	position:   absolute;
	top:        -100%;
	left:       var(--ataa-space-4);
	background: var(--ataa-primary);
	color:      var(--ataa-inv);
	padding:    var(--ataa-space-2) var(--ataa-space-4);
	z-index:    var(--ataa-z-toast);
	border-radius: var(--ataa-rb);
}

.skip-link:focus {
	top: var(--ataa-space-4);
}

/* ── Utility — geometric pattern overlay ── */
.ataa-pat-overlay {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(135deg, var(--ataa-pat) 25%, transparent 25%),
		linear-gradient(225deg, var(--ataa-pat) 25%, transparent 25%),
		linear-gradient(315deg, var(--ataa-pat) 25%, transparent 25%),
		linear-gradient( 45deg, var(--ataa-pat) 25%, transparent 25%);
	background-size: 36px 36px;
	pointer-events: none;
}

/* ── Responsive images ── */
.wp-post-image,
.attachment-post-thumbnail {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ── WordPress alignment classes ── */
.alignleft  { float: inline-start; margin-inline-end: var(--ataa-space-4); }
.alignright { float: inline-end;   margin-inline-start: var(--ataa-space-4); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide  { width: 100%; }
.alignfull  { width: 100%; max-width: none; }