/*
 * Arcanis visual system.
 * Presentation only: Astra and Elementor content remain untouched.
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--arc-night: #090a14;
	--arc-night-raised: #121326;
	--arc-violet: #6e53aa;
	--arc-violet-light: #a58ade;
	--arc-blue: #79c8e9;
	--arc-gold: #d5ad68;
	--arc-gold-light: #f5d99b;
	--arc-ink: #eee8dc;
	--arc-muted: #bcb4a6;
	--arc-line: rgba(213, 173, 104, .25);
	--arc-glass: rgba(20, 18, 40, .76);
	--arc-shadow: 0 18px 48px rgba(0, 0, 0, .38);
	--arc-serif: 'Cinzel', Georgia, serif;
	--arc-sans: 'Inter', system-ui, sans-serif;
}

body {
	color: var(--arc-ink);
	background:
		radial-gradient(circle at 82% -10%, rgba(87, 66, 154, .24), transparent 31rem),
		linear-gradient(145deg, #090a14, #111222 58%, #0b1019);
	font-family: var(--arc-sans);
}

body::before {
	position: fixed;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	content: '';
	opacity: .25;
	background-image:
		radial-gradient(rgba(255, 255, 255, .15) .55px, transparent .8px),
		radial-gradient(rgba(121, 200, 233, .15) .6px, transparent .9px);
	background-position: 0 0, 19px 31px;
	background-size: 43px 43px, 67px 67px;
}

/* Premium sticky Astra header */
/* Astra's transparent-header option ships `.ast-theme-transparent-header #masthead { position: absolute }`,
   which outranks a bare #masthead, hence the second selector. */
#masthead,
.ast-theme-transparent-header #masthead {
	position: sticky;
	z-index: 9999;
	top: 0;
	width: 100%;
	border-bottom: 1px solid var(--arc-line);
	background: rgba(12, 10, 27, .72);
	box-shadow: 0 10px 35px rgba(0, 0, 0, .25), 0 1px 20px rgba(121, 200, 233, .08);
	backdrop-filter: blur(18px) saturate(130%);
}

.admin-bar #masthead {
	top: 32px;
}

#masthead .ast-primary-header-bar,
#masthead .site-primary-header-wrap,
#masthead .ast-builder-grid-row-container {
	width: 100%;
	max-width: none;
	background: transparent !important;
}

#masthead .ast-builder-grid-row {
	width: min(1440px, 100%);
	min-height: 74px;
	margin: 0 auto;
	padding: 0 clamp(22px, 4vw, 72px);
}

#masthead .site-header-primary-section-left,
#masthead .site-header-primary-section-right {
	flex: 1 1 0;
}

#masthead .site-header-primary-section-middle,
#masthead .site-header-primary-section-center {
	display: flex;
	justify-content: center;
}

#masthead .site-logo-img img {
	display: none !important;
}

#masthead .site-logo-img,
#masthead .site-logo-img > a {
	display: flex;
	align-items: center;
	min-width: 160px;
	height: 74px;
}

#masthead .site-logo-img::before {
	content: 'ARCANIS';
	color: var(--arc-gold-light);
	font: 700 1.25rem/1 var(--arc-serif);
	letter-spacing: .19em;
	text-shadow: 0 0 18px rgba(213, 173, 104, .34);
}

#masthead nav,
#masthead .site-navigation {
	position: static !important;
	border: 0;
	background: transparent !important;
	box-shadow: none;
	backdrop-filter: none;
}

#masthead .main-header-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(8px, 1.4vw, 25px);
}

#masthead .main-header-menu > .menu-item > .menu-link {
	position: relative;
	padding: 28px 2px;
	color: #d8d0c4 !important;
	background: transparent !important;
	font: 600 .88rem/1 var(--arc-serif);
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .2s ease, text-shadow .2s ease;
}

#masthead .main-header-menu > .menu-item > .menu-link::after {
	position: absolute;
	right: 0;
	bottom: 18px;
	left: 0;
	height: 1px;
	content: '';
	background: linear-gradient(90deg, transparent, var(--arc-blue), var(--arc-gold), transparent);
	box-shadow: 0 0 10px rgba(121, 200, 233, .7);
	transform: scaleX(0);
	transition: transform .22s ease;
}

#masthead .main-header-menu > .menu-item:hover > .menu-link,
#masthead .main-header-menu > .current-menu-item > .menu-link,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link {
	color: var(--arc-gold-light) !important;
	text-shadow: 0 0 14px rgba(121, 200, 233, .34);
}

#masthead .main-header-menu > .menu-item:hover > .menu-link::after,
#masthead .main-header-menu > .current-menu-item > .menu-link::after,
#masthead .main-header-menu > .current-menu-ancestor > .menu-link::after {
	transform: scaleX(1);
}

#masthead .main-header-menu .sub-menu {
	display: block !important;
	width: 270px;
	margin: 0;
	padding: 8px;
	border: 1px solid rgba(121, 200, 233, .22) !important;
	border-radius: 10px;
	background: rgba(18, 15, 35, .96) !important;
	box-shadow: 0 18px 42px rgba(0, 0, 0, .46), 0 0 24px rgba(110, 83, 170, .16);
	backdrop-filter: blur(18px);
}

#masthead .main-header-menu .sub-menu li {
	display: block !important;
	width: 100% !important;
}

#masthead .main-header-menu .sub-menu .menu-link {
	display: block;
	padding: 12px 14px !important;
	border-radius: 6px;
	color: #ddd5c9 !important;
	background: transparent !important;
	font: 500 .78rem/1.35 var(--arc-sans);
	text-transform: none;
	transition: color .18s ease, background .18s ease, transform .18s ease;
}

#masthead .main-header-menu .sub-menu .menu-link:hover {
	color: #fff4cf !important;
	background: linear-gradient(90deg, rgba(110, 83, 170, .35), rgba(121, 200, 233, .1)) !important;
	transform: translateX(3px);
}

#masthead .ast-builder-button-wrap {
	display: flex;
	justify-content: flex-end;
}

/* The link is only a wrapper; Astra puts the visible box in the inner .ast-custom-button. */
#masthead .ast-custom-button-link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

#masthead .ast-custom-button-link .ast-custom-button {
	padding: 12px 22px;
	border: 1px solid rgba(213, 173, 104, .5);
	border-radius: 6px;
	color: var(--arc-gold-light);
	background: rgba(213, 173, 104, .07);
	box-shadow: none;
	font: 600 .8rem/1 var(--arc-serif);
	letter-spacing: .13em;
	text-transform: uppercase;
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}

#masthead .ast-custom-button-link:hover .ast-custom-button {
	border-color: var(--arc-gold);
	color: #fff4cf;
	background: rgba(213, 173, 104, .18);
}

#masthead .ast-builder-button-wrap > .menu-link {
	display: none;
}

/* Footer glued to the bottom on short pages */
#page {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

#page #content {
	flex: 1 0 auto;
}

/* Footer tuned to the Arcanis palette */
#colophon {
	border-top: 1px solid var(--arc-line);
	background: linear-gradient(180deg, #0d0c1c, var(--arc-night));
}

#colophon .site-primary-footer-wrap,
#colophon .site-below-footer-wrap {
	background: transparent;
}

#colophon .site-below-footer-wrap {
	border-top: 1px solid rgba(213, 173, 104, .14);
}

#colophon .widget-title,
#colophon .widget-title a {
	color: var(--arc-gold-light);
	font: 600 1.05rem/1.4 var(--arc-serif);
	letter-spacing: .07em;
}

#colophon,
#colophon p {
	color: var(--arc-muted);
}

/* Footer wordmark: same lettering as the navbar brand. */
#colophon .arcanis-footer-brand {
	margin-bottom: .8em;
	color: var(--arc-gold-light);
	font: 700 1.25rem/1 var(--arc-serif);
	letter-spacing: .19em;
	text-shadow: 0 0 18px rgba(213, 173, 104, .34);
}

#colophon a:not(.widget-title a) {
	color: var(--arc-muted);
	transition: color .2s ease;
}

#colophon a:not(.widget-title a):hover {
	color: var(--arc-gold-light);
}

/* Astra zeroes the title margin on page-builder pages whose header has no meta
   (.ast-header-without-markup), so Lore/Magia titles sit flush under the navbar.
   Restore the 4em Astra uses everywhere else, matching Bestiariusz/Alchemia. */
.ast-page-builder-template .entry-header.ast-header-without-markup:not(.ast-no-title) {
	margin-top: 4em;
}

/* Astra page title + breadcrumbs in the Arcanis dress: serif caps, gold rule,
   muted uppercase trail. Kept a step below the hub H1 so hierarchy still reads. */
.entry-header .entry-title {
	margin-bottom: .55em;
	color: var(--arc-ink);
	font: 700 clamp(2rem, 4.4vw, 3.2rem)/1.15 var(--arc-serif);
	letter-spacing: .045em;
	text-shadow: 0 0 26px rgba(121, 200, 233, .18);
}

.entry-header .entry-title::after {
	display: block;
	width: min(190px, 60%);
	height: 1px;
	margin: 18px auto 0;
	content: '';
	background: linear-gradient(90deg, transparent, var(--arc-gold), transparent);
	box-shadow: 0 0 12px rgba(213, 173, 104, .45);
}

.ast-breadcrumbs .trail-items {
	color: var(--arc-muted);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
}

/* Astra colors the inner span, not the anchor, so it has to be targeted too. */
.ast-breadcrumbs .trail-items a,
.ast-breadcrumbs .trail-items a span {
	color: var(--arc-muted);
	text-decoration: none;
	transition: color .2s ease;
}

.ast-breadcrumbs .trail-items a:hover,
.ast-breadcrumbs .trail-items a:hover span {
	color: var(--arc-gold-light);
}

.ast-breadcrumbs .trail-end span {
	color: var(--arc-gold-light);
}

/* Existing Lore and Magic indexes */
.wiki-page {
	min-height: calc(100vh - 74px);
	padding: clamp(56px, 8vw, 108px) 20px;
}

/* The hub gradient lives on the page, not the section, so the Astra page title
   sits on the same background instead of cutting a hard edge above it. */
body:has(.wiki-page) {
	background:
		radial-gradient(circle at 85% 0, rgba(121, 200, 233, .13), transparent 28rem),
		linear-gradient(135deg, #0c0d17, #171326 65%, #0d1016);
}

.wiki-shell {
	width: min(1120px, 100%);
	margin: auto;
}

.wiki-intro {
	margin: 0 0 38px;
	padding: clamp(28px, 4vw, 48px);
	border: 1px solid var(--arc-line);
	border-radius: 12px;
	background: var(--arc-glass);
	box-shadow: var(--arc-shadow);
	backdrop-filter: blur(12px);
}

.eyebrow {
	margin: 0 0 12px;
	color: var(--arc-blue);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
}

.wiki-intro h1 {
	margin: 0 0 14px;
	color: var(--arc-gold-light);
	font: 700 clamp(2.2rem, 5vw, 4.1rem)/1.12 var(--arc-serif);
}

.wiki-intro p:last-child {
	margin: 0;
	color: var(--arc-muted);
	font-size: 1.06rem;
}

.wiki-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

/* Fixed card counts per hub: magic three per row, lore four. */
.wiki-page-magia .wiki-grid {
	grid-template-columns: repeat(3, 1fr);
}

.wiki-page-lore .wiki-grid {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
	.wiki-page-magia .wiki-grid,
	.wiki-page-lore .wiki-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.wiki-page-magia .wiki-grid,
	.wiki-page-lore .wiki-grid { grid-template-columns: 1fr; }
}

.wiki-card {
	display: flex;
	min-height: 225px;
	flex-direction: column;
	padding: 27px;
	border: 1px solid rgba(213, 173, 104, .22);
	border-radius: 10px;
	background: linear-gradient(145deg, rgba(42, 33, 66, .88), rgba(18, 17, 31, .96));
	box-shadow: var(--arc-shadow);
	color: var(--arc-ink);
	text-decoration: none;
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.wiki-card:hover {
	border-color: var(--arc-gold);
	background: linear-gradient(145deg, #392954, #20182f);
	color: #fff;
	transform: translateY(-5px);
}

.wiki-card-mark { color: var(--arc-gold); font-size: 1.2rem; }
.wiki-card h2 { margin: 18px 0 10px; color: var(--arc-gold-light); font: 600 1.12rem/1.3 var(--arc-serif); }
.wiki-card p { margin: 0; color: #c9bfaf; font-size: .92rem; }
.wiki-card-link { margin-top: auto; padding-top: 21px; color: var(--arc-blue); font-size: .73rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
 * Site-wide defaults: every page, Elementor or not, inherits the Arcanis type
 * and palette. Presentation only, the builder content stays as authored.
 * --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	color: var(--arc-gold-light);
	font-family: var(--arc-serif);
	letter-spacing: .04em;
	text-shadow: 0 0 26px rgba(121, 200, 233, .18);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	color: var(--arc-muted);
}

/* Elementor's per-page CSS matches this specificity and loads later, so the
   background overrides need !important; everything else wins on its own. */
.elementor .e-con {
	background-color: transparent !important;
}

/* Hero: photo backgrounds run much brighter than the site, so retint the
   overlay to the night palette and blur it slightly to lift the text off it. */
.elementor > .e-con:first-child::before {
	background-color: rgba(9, 10, 20, .62) !important;
	opacity: 1 !important;
	backdrop-filter: blur(4px);
}

/* Buttons echo the header CTA. Elementor styles buttons from a deeper
   per-element selector, so the paint has to be forced here. */
.elementor-button,
.ast-button,
.wp-block-button__link,
input[type='submit'] {
	border: 1px solid rgba(213, 173, 104, .5) !important;
	border-radius: 6px;
	color: var(--arc-gold-light) !important;
	background: rgba(213, 173, 104, .07) !important;
	font: 600 .8rem/1 var(--arc-serif);
	letter-spacing: .13em;
	text-transform: uppercase;
	transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.elementor-button:hover,
.elementor-button:focus,
.ast-button:hover,
.wp-block-button__link:hover,
input[type='submit']:hover {
	border-color: var(--arc-gold) !important;
	color: #fff4cf !important;
	background: rgba(213, 173, 104, .18) !important;
}

/* Info-card columns carry the same card look as the codex cards. */
.e-con:has(> .elementor-widget-hfe-infocard) {
	border: 1px solid rgba(213, 173, 104, .22);
	border-radius: 10px;
	background: linear-gradient(145deg, rgba(42, 33, 66, .88), rgba(18, 17, 31, .96)) !important;
	box-shadow: var(--arc-shadow);
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.e-con:has(> .elementor-widget-hfe-infocard):hover {
	border-color: var(--arc-gold);
	background: linear-gradient(145deg, #392954, #20182f) !important;
	transform: translateY(-5px);
}

.hfe-infocard-title {
	color: var(--arc-gold-light);
	font: 600 1.12rem/1.3 var(--arc-serif);
}

.hfe-infocard-text {
	color: #c9bfaf;
}

.hfe-icon i,
.hfe-icon svg {
	color: var(--arc-gold);
	fill: var(--arc-gold);
}

/* Spell listings (Elementor loop grid) as compact codex cards. The loop item
   template carries its own sizes, hence the forced type scale. */
.elementor-loop-container .e-loop-item {
	border: 1px solid rgba(213, 173, 104, .22);
	border-radius: 10px;
	background: linear-gradient(145deg, rgba(42, 33, 66, .88), rgba(18, 17, 31, .96));
	box-shadow: var(--arc-shadow);
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.elementor-loop-container .e-loop-item:hover {
	border-color: var(--arc-gold);
	background: linear-gradient(145deg, #392954, #20182f);
	transform: translateY(-4px);
}

.e-loop-item > .e-con {
	gap: 9px !important;
	padding: 20px 22px !important;
}

.e-loop-item .elementor-heading-title {
	font-size: 1.16rem !important;
	line-height: 1.3 !important;
	text-shadow: none;
}

.e-loop-item .elementor-heading-title a {
	color: var(--arc-gold-light);
	transition: color .2s ease;
}

.e-loop-item:hover .elementor-heading-title a {
	color: #fff4cf;
}

.e-loop-item .elementor-post-info {
	font-size: .74rem !important;
}

.e-loop-item .elementor-post-info,
.e-loop-item .elementor-post-info a,
.e-loop-item .elementor-post-info .elementor-icon-list-text {
	color: var(--arc-muted) !important;
}

.e-loop-item .elementor-post-info .elementor-icon-list-icon i,
.e-loop-item .elementor-post-info .elementor-icon-list-icon svg {
	color: var(--arc-gold);
	fill: var(--arc-gold);
}

/* The ACF pillar line doubles as the card's category label. */
.e-loop-item .elementor-widget-text-editor,
.e-loop-item .elementor-widget-text-editor p {
	color: var(--arc-blue);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

@media (max-width: 920px) {
	.admin-bar #masthead { top: 46px; }
	#masthead .ast-builder-grid-row { min-height: 62px; padding: 0 18px; }
	#masthead .site-logo-img, #masthead .site-logo-img > a { height: 62px; min-width: 140px; }
	#masthead .site-logo-img::before { font-size: 1.05rem; }
	#masthead .ast-mobile-menu-trigger-minimal { color: var(--arc-gold-light) !important; }
	#masthead .ast-mobile-header-content { background: rgba(18, 15, 35, .98) !important; }
	#masthead .ast-mobile-header-content .main-header-menu { display: block; padding: 12px 0; }
	#masthead .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link { padding: 15px 20px; color: #eee6d8 !important; }
	#masthead .ast-mobile-header-content .main-header-menu .sub-menu { width: auto; margin: 0 16px; }
}

@media (max-width: 780px) {
	.wiki-page { padding: 42px 14px; }
	.wiki-intro { margin-bottom: 22px; }
	.wiki-card { min-height: 190px; }
}

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