/*
 * Static equivalents of the Tailwind utility classes actually used across
 * the theme's patterns/header/footer. The Tailwind runtime (tailwind.min.js)
 * only compiles classes in the browser DOM it can see — it never reaches
 * the Gutenberg editor's iframe (main canvas, or any secondary preview
 * panel), so anything that relied purely on a Tailwind class rendered
 * differently in the editor than on the front end. These rules make that
 * same set of classes work everywhere, with no JS involved.
 */

/* Tailwind Preflight resets our patterns rely on (list markers, spacing) —
   replicated here so the same reset applies inside the editor, matching
   what Tailwind's own base styles already do on the front end. */
.wp-block-list,
.wp-block-list ul,
.wp-block-list ol,
.av-header-nav ul,
.av-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Display / position */
.flex { display: flex; }
.hidden { display: none; }
.absolute { position: absolute; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.shrink-0 { flex-shrink: 0; }

/* Flex layout */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Gap (Tailwind scale: 1 unit = 4px) */
.gap-1 { gap: 4px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-16 { gap: 64px; }
.gap-24 { gap: 96px; }

/* Margin */
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-6 { margin-bottom: 24px; }
.mb-10 { margin-bottom: 40px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-10 { margin-top: 40px; }
.mt-16 { margin-top: 64px; }
.my-20 { margin-top: 120px; margin-bottom: 120px; }

/* Padding */
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.pt-4 { padding-top: 16px; }
.pb-6 { padding-bottom: 24px; }
.pb-10 { padding-bottom: 40px; }

/* Sizing */
.w-9 { width: 36px; }
.w-12 { width: 48px; }
.w-full { width: 100%; }
.w-max { width: max-content; }
.h-9 { height: 36px; }
.h-10 { height: 40px; }
.h-12 { height: 48px; }
.h-\[68px\] { height: 68px; }
.max-w-\[257px\] { max-width: 257px; }

/* Typography */
.text-3xl { font-size: 30px; line-height: 36px; }
.text-xl { font-size: 20px; line-height: 28px; }
.text-sm { font-size: 16px; line-height: 20px; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Borders */
.rounded-full { border-radius: 9999px; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-black\/5 { border-color: var(--alpha-black-05); }

/* Colors (arbitrary values used in the theme) */
.bg-white { background-color: var(--bg-white); }
.bg-\[var\(--bg-blue\)\] { background-color: var(--bg-blue); }
.bg-\[var\(--bg-gray-light\)\] { background-color: var(--bg-gray-light); }
.text-white { color: var(--text-white); }
.text-white\/70 { color: var(--alpha-white-70); }
.hover\:text-white:hover { color: var(--text-white); }
.text-\[var\(--text-blue\)\] { color: var(--text-blue); }

/* Important-prefixed (mobile nav list) */
.\!flex { display: flex !important; }
.\!flex-col { flex-direction: column !important; }
.\!gap-2 { gap: 8px !important; }

/* Responsive: sm (>=640px) */
@media (min-width: 640px) {
	.sm\:flex-row { flex-direction: row; }
	.sm\:gap-6 { gap: 24px; }
	.sm\:gap-16 { gap: 64px; }
	.sm\:items-center { align-items: center; }
	.sm\:justify-between { justify-content: space-between; }
}

/* Responsive: lg (>=1024px) */
@media (min-width: 1024px) {
	.lg\:flex { display: flex; }
	.lg\:hidden { display: none; }
	.lg\:flex-row { flex-direction: row; }
	.lg\:gap-24 { gap: 96px; }
	.lg\:items-center { align-items: center; }
	.lg\:items-start { align-items: flex-start; }
	.lg\:justify-between { justify-content: space-between; }
}
.align-top {
	align-items: flex-start;
}