/*
Theme Name: The Amarna Mysteries
Theme URI: https://amarnamysteries.com/
Author: A.J. Tilke
Author URI: https://the.wordfish.group/
Description: Block (Full Site Editing) theme for The Amarna Mysteries, the historical fiction series by A.J. Tilke. Typography-first, ornamented literary design — Cinzel + EB Garamond on cosmic-latte. Ported from the hand-authored static site; all design tokens live in theme.json.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amarnamysteries-fse
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, editor-style, threaded-comments, translation-ready, one-column, two-columns, blog
*/

/* ============================================================
   The Amarna Mysteries — supplemental theme stylesheet.
   Design tokens (palette, type, spacing, layout, global styles)
   live in theme.json. This file carries ONLY the bespoke
   ornament that core block supports cannot express. Always
   reference the --wp--preset--* variables, never raw hex.
   ============================================================ */

/* ---- Foundation: subtle gold wash on the cosmic-latte page ---- */
body.wp-site-blocks,
.wp-site-blocks {
	background-image: linear-gradient(
		180deg,
		rgba(197, 164, 78, 0.06) 0%,
		rgba(197, 164, 78, 0.03) 50%,
		rgba(197, 164, 78, 0.06) 100%
	);
}

/* ---- Skip link ---- */
.skip-link {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1000;
	background: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--basalt-deep);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--nav);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.75rem 1.25rem;
	transform: translateY(calc(-100% - 1rem));
	transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	outline: 2px solid var(--wp--preset--color--basalt-deep);
	outline-offset: 2px;
}

/* ---- Global focus ring (matches static site) ---- */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 2px;
}

/* ---- Gold separator rule ---- */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	border: none;
	height: 1px;
	max-width: 120px;
	background: var(--wp--preset--color--gold-base);
	opacity: 0.4;
	margin-block: var(--wp--preset--spacing--section);
}

/* ============================================================
   Scene-break ornament (winged sun)
   Usage: core/image with the class "scene-break"
   ============================================================ */
.scene-break img,
img.scene-break {
	display: block;
	width: 160px;
	height: auto;
	margin: 2.5rem auto;
	opacity: 0.3;
}

/* ============================================================
   Drop cap — chapter / article opening paragraph
   Usage: paragraph with the class "chapter-first-para"
   ============================================================ */
.chapter-first-para::first-letter {
	font-family: var(--wp--preset--font-family--initial);
	float: left;
	font-size: 3.5rem;
	line-height: 1;
	margin-right: 0.2rem;
	margin-top: 0.1rem;
	color: var(--wp--preset--color--gold-base);
}

/* ============================================================
   Basalt texture — heading bands / hero
   Usage: Group block with the class "basalt-texture"
   ============================================================ */
.basalt-texture {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		174deg,
		#3a3a3a 0%,
		#2c2c2c 20%,
		#1e1e1e 45%,
		#2c2c2c 65%,
		#1a1a1a 85%,
		#121212 100%
	);
}
.basalt-texture::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	pointer-events: none;
}
.basalt-texture::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 20%, rgba(68, 68, 68, 0.25) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 80%, rgba(10, 10, 10, 0.2) 0%, transparent 50%);
	pointer-events: none;
}
.basalt-texture > * {
	position: relative;
	z-index: 1;
}
/* Headings inside a basalt band switch to gold leaf */
.basalt-texture :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--gold-light);
}

/* ============================================================
   Pull-quote / epigraph — gold rules above and below
   Usage: core/pullquote (default) or core/quote with .pull-quote
   ============================================================ */
.wp-block-pullquote,
.pull-quote {
	border: none;
	text-align: center;
}
.wp-block-pullquote::before,
.wp-block-pullquote::after,
.pull-quote::before,
.pull-quote::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background: var(--wp--preset--color--gold-base);
	margin: 0 auto 1.5rem;
}
.wp-block-pullquote::after,
.pull-quote::after {
	margin: 1.5rem auto 0;
}

/* ============================================================
   "In brief" aside — carnelian rule + gold wash
   Usage: Group block with the class "in-brief"
   ============================================================ */
.in-brief {
	border-left: 3px solid var(--wp--preset--color--carnelian-base);
	background-color: rgba(197, 164, 78, 0.06);
	padding: 1rem 1.5rem;
}
.in-brief .in-brief__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--nav);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--carnelian-base);
	margin-bottom: 0.5rem;
}
.in-brief .in-brief__text {
	font-style: italic;
	color: var(--wp--preset--color--page-secondary);
	margin-bottom: 0;
}

/* Tint utilities ported from the static theme */
.bg-gold-wash { background-color: rgba(197, 164, 78, 0.06); }
.bg-lapis-wash { background-color: rgba(27, 58, 107, 0.04); }
.bg-malachite-wash { background-color: rgba(45, 107, 74, 0.04); }

/* ============================================================
   Book cover frame
   Usage: core/image with the class "amarna-cover"
   ============================================================ */
.amarna-cover img {
	display: block;
	width: 100%;
	max-width: 16rem;
	height: auto;
	margin-inline: auto;
	border: 1px solid var(--wp--preset--color--gold-base);
}

/* ============================================================
   NAVIGATION (core/navigation styled gold-on-basalt)
   The header part wraps the nav in a .site-header group with
   the basalt-dark background. These rules colour the links,
   submenu dropdown and mobile overlay to match the prior site.
   ============================================================ */
.site-header {
	background-color: var(--wp--preset--color--basalt-dark);
	border-bottom: 4px solid var(--wp--preset--color--carnelian-base);
}

/* Remove the default gap between header and content so the carnelian
   divider sits flush beneath the nav. */
.wp-site-blocks > main {
	margin-block-start: 0;
}
.site-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--nav);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.site-header .wp-block-navigation-item__content,
.site-header .wp-block-navigation .wp-block-navigation-item a {
	color: var(--wp--preset--color--gold-base);
	text-decoration: none;
}
.site-header .wp-block-navigation .wp-block-navigation-item a:hover,
.site-header .wp-block-navigation .wp-block-navigation-item a:focus,
.site-header .wp-block-navigation .current-menu-item a,
.site-header .wp-block-navigation [aria-current="page"] {
	color: var(--wp--preset--color--gold-light);
}

/* Submenu dropdown panel */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--basalt-dark);
	border: 1px solid rgba(197, 164, 78, 0.15);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	min-width: 16rem;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--body);
	letter-spacing: normal;
	text-transform: none;
	font-size: 0.9rem;
	color: rgba(197, 164, 78, 0.7);
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item a:focus {
	color: var(--wp--preset--color--gold-light);
	background-color: rgba(197, 164, 78, 0.08);
}

/* Mobile overlay menu (core navigation responsive behaviour) */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--basalt-dark);
}
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--gold-base);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--gold-base);
}

/* ---- Footer links ---- */
.site-footer a {
	color: var(--wp--preset--color--gold-base);
	text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus {
	color: var(--wp--preset--color--gold-light);
}

/* ============================================================
   RESPONSIVE — mirror the static site's mobile type shrink
   ============================================================ */
@media (max-width: 768px) {
	body { font-size: var(--wp--preset--font-size--small); }
	h1, .wp-block-post-title { font-size: 1.5rem; }
}