/*
 * Archaive — Global styles & utilities
 * Loaded via wp_enqueue_scripts (see functions.php).
 */

/* -----------------------------------------------------------------------
 * 1. Design tokens (mirrors theme.json for use outside block context)
 * --------------------------------------------------------------------- */
:root {
	--archaive-black:     #000000;
	--archaive-white:     #ffffff;
	--archaive-blue:      #0000ff;
	--archaive-blue-dark: #0000cc;
	--archaive-font-mono: ui-monospace, 'Courier New', monospace;
	--archaive-font-sans: system-ui, -apple-system, sans-serif;
}

/* -----------------------------------------------------------------------
 * 2. Base resets / global overrides
 * --------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--archaive-white);
	color: var(--archaive-black);
	font-family: var(--archaive-font-sans);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--archaive-blue);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--archaive-black);
	text-decoration: underline;
}

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

/* -----------------------------------------------------------------------
 * 3. Typographic texture background
 *
 * Usage:  add class  .archaive-texture  to any Cover or Group block
 *         via Additional CSS class in the block editor.
 *
 * The texture is a repeating text string rendered via a CSS background-image
 * using an inline SVG. This avoids any extra DOM elements and works on all
 * background colours.
 *
 * Two variants are provided:
 *   .archaive-texture            — black text on current background
 *   .archaive-texture--blue      — white text on blue background
 *   .archaive-texture--on-blue   — white text, for use inside blue sections
 * --------------------------------------------------------------------- */

/* Shared texture base */
.archaive-texture,
.archaive-texture--blue,
.archaive-texture--on-blue {
	position: relative;
}

.archaive-texture::before,
.archaive-texture--blue::before,
.archaive-texture--on-blue::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-repeat: repeat;
	background-size: 420px auto;
	opacity: 0.08;
}

/* Children sit above the texture */
.archaive-texture > *,
.archaive-texture--blue > *,
.archaive-texture--on-blue > * {
	position: relative;
	z-index: 1;
}

/* Black texture (on white/light backgrounds) */
.archaive-texture::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Ctext font-family='ui-monospace%2C monospace' font-size='11' font-weight='700' fill='%23000000' letter-spacing='1'%3E%3Ctspan x='0' y='16'%3EACCESS AND RE-CREATION OF CULTURAL%3C/tspan%3E%3Ctspan x='0' y='30'%3EHERITAGE ARCHIVES CHALLENGING%3C/tspan%3E%3Ctspan x='0' y='44'%3EARTIFICIAL INTELLIGENCE FOR VALUED%3C/tspan%3E%3Ctspan x='0' y='58'%3EENGAGEMENT ACCESS AND RE-CREATION%3C/tspan%3E%3Ctspan x='0' y='72'%3EOF CULTURAL HERITAGE ARCHIVES%3C/tspan%3E%3Ctspan x='0' y='86'%3ECHALLENGING ARTIFICIAL INTELLIGENCE%3C/tspan%3E%3Ctspan x='0' y='100'%3EFOR VALUED ENGAGEMENT ACCESS AND%3C/tspan%3E%3Ctspan x='0' y='114'%3ERE-CREATION OF CULTURAL HERITAGE%3C/tspan%3E%3Ctspan x='0' y='128'%3EARCHIVES CHALLENGING ARTIFICIAL%3C/tspan%3E%3Ctspan x='0' y='142'%3EINTELLIGENCE FOR VALUED ENGAGEMENT%3C/tspan%3E%3Ctspan x='0' y='156'%3EACCESS AND RE-CREATION OF CULTURAL%3C/tspan%3E%3Ctspan x='0' y='170'%3EHERITAGE ARCHIVES CHALLENGING%3C/tspan%3E%3Ctspan x='0' y='184'%3EARTIFICIAL INTELLIGENCE FOR VALUED%3C/tspan%3E%3Ctspan x='0' y='198'%3EENGAGEMENT ACCESS AND RE-CREATION%3C/tspan%3E%3Ctspan x='0' y='212'%3EOF CULTURAL HERITAGE ARCHIVES%3C/tspan%3E%3Ctspan x='0' y='226'%3ECHALLENGING ARTIFICIAL INTELLIGENCE%3C/tspan%3E%3Ctspan x='0' y='240'%3EFOR VALUED ENGAGEMENT ACCESS AND%3C/tspan%3E%3Ctspan x='0' y='254'%3ERE-CREATION OF CULTURAL HERITAGE%3C/tspan%3E%3Ctspan x='0' y='268'%3EARCHIVES CHALLENGING ARTIFICIAL%3C/tspan%3E%3Ctspan x='0' y='282'%3EINTELLIGENCE FOR VALUED ENGAGEMENT%3C/tspan%3E%3Ctspan x='0' y='296'%3EACCESS AND RE-CREATION OF CULTURAL%3C/tspan%3E%3Ctspan x='0' y='310'%3EHERITAGE ARCHIVES CHALLENGING%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

/* Blue background with white texture */
.archaive-texture--blue {
	background-color: var(--archaive-blue);
	color: var(--archaive-white);
}

.archaive-texture--blue::before,
.archaive-texture--on-blue::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320'%3E%3Ctext font-family='ui-monospace%2C monospace' font-size='11' font-weight='700' fill='%23ffffff' letter-spacing='1'%3E%3Ctspan x='0' y='16'%3EACCESS AND RE-CREATION OF CULTURAL%3C/tspan%3E%3Ctspan x='0' y='30'%3EHERITAGE ARCHIVES CHALLENGING%3C/tspan%3E%3Ctspan x='0' y='44'%3EARTIFICIAL INTELLIGENCE FOR VALUED%3C/tspan%3E%3Ctspan x='0' y='58'%3EENGAGEMENT ACCESS AND RE-CREATION%3C/tspan%3E%3Ctspan x='0' y='72'%3EOF CULTURAL HERITAGE ARCHIVES%3C/tspan%3E%3Ctspan x='0' y='86'%3ECHALLENGING ARTIFICIAL INTELLIGENCE%3C/tspan%3E%3Ctspan x='0' y='100'%3EFOR VALUED ENGAGEMENT ACCESS AND%3C/tspan%3E%3Ctspan x='0' y='114'%3ERE-CREATION OF CULTURAL HERITAGE%3C/tspan%3E%3Ctspan x='0' y='128'%3EARCHIVES CHALLENGING ARTIFICIAL%3C/tspan%3E%3Ctspan x='0' y='142'%3EINTELLIGENCE FOR VALUED ENGAGEMENT%3C/tspan%3E%3Ctspan x='0' y='156'%3EACCESS AND RE-CREATION OF CULTURAL%3C/tspan%3E%3Ctspan x='0' y='170'%3EHERITAGE ARCHIVES CHALLENGING%3C/tspan%3E%3Ctspan x='0' y='184'%3EARTIFICIAL INTELLIGENCE FOR VALUED%3C/tspan%3E%3Ctspan x='0' y='198'%3EENGAGEMENT ACCESS AND RE-CREATION%3C/tspan%3E%3Ctspan x='0' y='212'%3EOF CULTURAL HERITAGE ARCHIVES%3C/tspan%3E%3Ctspan x='0' y='226'%3ECHALLENGING ARTIFICIAL INTELLIGENCE%3C/tspan%3E%3Ctspan x='0' y='240'%3EFOR VALUED ENGAGEMENT ACCESS AND%3C/tspan%3E%3Ctspan x='0' y='254'%3ERE-CREATION OF CULTURAL HERITAGE%3C/tspan%3E%3Ctspan x='0' y='268'%3EARCHIVES CHALLENGING ARTIFICIAL%3C/tspan%3E%3Ctspan x='0' y='282'%3EINTELLIGENCE FOR VALUED ENGAGEMENT%3C/tspan%3E%3Ctspan x='0' y='296'%3EACCESS AND RE-CREATION OF CULTURAL%3C/tspan%3E%3Ctspan x='0' y='310'%3EHERITAGE ARCHIVES CHALLENGING%3C/tspan%3E%3C/text%3E%3C/svg%3E");
	opacity: 0.15;
}

/* -----------------------------------------------------------------------
 * 4. Blue duotone image utility class
 *
 * Usage: add class  .archaive-duotone  to any Image block's wrapper
 *        via Additional CSS class. Works as a CSS-only fallback alongside
 *        the native WP duotone filter.
 * --------------------------------------------------------------------- */
.archaive-duotone img,
.archaive-duotone figure img {
	filter:
		grayscale(100%)
		sepia(100%)
		hue-rotate(190deg)
		saturate(800%)
		brightness(0.7);
}

/* -----------------------------------------------------------------------
 * 5. Event & Media Asset card styles
 *    For use with Query Loop blocks on archive pages.
 * --------------------------------------------------------------------- */
.archaive-card {
	border-top: 2px solid var(--archaive-black);
	padding-top: 1rem;
}

.archaive-card__meta {
	font-family: var(--archaive-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--archaive-blue);
	margin-bottom: 0.25rem;
}

.archaive-card__title {
	font-family: var(--archaive-font-mono);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0 0 0.5rem;
}

.archaive-card__title a {
	color: var(--archaive-black);
	text-decoration: none;
}

.archaive-card__title a:hover {
	color: var(--archaive-blue);
}

/* -----------------------------------------------------------------------
 * 6. Full-bleed blue section utility
 *
 * Usage: add class  .archaive-section-blue  to a Group block set to
 *        full-width alignment.
 * --------------------------------------------------------------------- */
.archaive-section-blue {
	background-color: var(--archaive-blue);
	color: var(--archaive-white);
}

.archaive-section-blue a {
	color: var(--archaive-white);
}

.archaive-section-blue a:hover {
	opacity: 0.75;
}

/* -----------------------------------------------------------------------
 * 7. Accessibility: focus styles
 * --------------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--archaive-blue);
	outline-offset: 3px;
}

.archaive-section-blue :focus-visible {
	outline-color: var(--archaive-white);
}