/* ============================================================
   Magni · Sacred Czech — base typography & utilities
   Loaded after tokens.css. These are *defaults* applied to bare
   HTML so Elementor widgets that don't get explicit typography
   settings still feel on-brand. Editors can override anywhere.
   ============================================================ */

/* ---- Body ---- */
body.magni-site {
	font-family: var(--magni-font-body);
	color: var(--magni-ink);
	background: var(--magni-paper);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- Headings ---- */
.magni-site h1, .magni-site h2, .magni-site h3, .magni-site h4 {
	font-family: var(--magni-font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.3px;
	color: var(--magni-ink);
	margin: 0;
}

.magni-site h1 { font-size: clamp(40px, 6vw, 64px); }
.magni-site h2 { font-size: clamp(32px, 4.4vw, 44px); }
.magni-site h3 { font-size: clamp(24px, 3vw, 32px); }
.magni-site h4 { font-size: clamp(18px, 2vw, 24px); }
.magni-site h5 { font-size: 18px; font-family: var(--magni-font-display); font-weight: 500; }

/* ---- Paragraphs ---- */
.magni-site p {
	font-family: var(--magni-font-body);
	color: var(--magni-ink-soft);
	line-height: 1.6;
	margin: 0 0 1em;
}

/* ---- Links ---- */
.magni-site a {
	color: var(--magni-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
.magni-site a:hover { color: var(--magni-accent-deep); }

/* ============================================================
   Brand utility classes — used by Elementor's "CSS Classes"
   field on any widget for quick brand styling.
   ============================================================ */

/* Eyebrow — small caps, accent colour, wide tracking */
.magni-eyebrow {
	font-family: var(--magni-font-body) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 2.4px !important;
	text-transform: uppercase !important;
	color: var(--magni-accent) !important;
	line-height: 1.4 !important;
}
.magni-eyebrow--ink   { color: var(--magni-ink-soft) !important; }
.magni-eyebrow--paper { color: var(--magni-accent-light) !important; }

/* Display heading — Cormorant Garamond */
.magni-display {
	font-family: var(--magni-font-display) !important;
	font-weight: 500 !important;
	letter-spacing: -0.5px !important;
	line-height: 0.98 !important;
}

/* Italic accent inside a heading: <em class="magni-accent-italic">sacred</em> */
.magni-accent-italic,
.magni-display em {
	color: oklch(0.78 0.14 58);
	font-style: italic;
	font-weight: 500;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45), 0 0 40px rgba(176, 106, 42, 0.3);
}

/* Welcome band — warm khaki strip used on Home + several pages */
.magni-band-cream {
	background: var(--magni-cream);
	color: oklch(0.18 0.02 60);
	padding: var(--magni-gap-6) var(--magni-page-pad);
}
.magni-band-cream h2,
.magni-band-cream h3 { color: oklch(0.18 0.02 60); }
.magni-band-cream p  { color: oklch(0.25 0.02 60); }

/* Black band — used for Videos / footer-adjacent CTAs */
.magni-band-dark {
	background: var(--magni-black);
	color: var(--magni-paper);
	padding: var(--magni-gap-6) var(--magni-page-pad);
}
.magni-band-dark h1,
.magni-band-dark h2,
.magni-band-dark h3,
.magni-band-dark h4 { color: var(--magni-paper); }
.magni-band-dark p  { color: oklch(0.78 0.01 60); }

/* Brand button — drop on any Elementor button via "CSS Classes" */
.magni-btn {
	font-family: var(--magni-font-body) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	padding: 12px 22px !important;
	border-radius: 0 !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	transition: all 0.2s ease !important;
}
.magni-btn--primary  { background: var(--magni-accent) !important; color: var(--magni-paper) !important; }
.magni-btn--primary:hover { background: var(--magni-accent-deep) !important; }
.magni-btn--dark     { background: var(--magni-black) !important; color: var(--magni-paper) !important; }
.magni-btn--outline  { background: transparent !important; color: var(--magni-ink) !important; border: 1.5px solid var(--magni-ink) !important; }
.magni-btn--outline-light { background: transparent !important; color: var(--magni-paper) !important; border: 1.5px solid var(--magni-paper) !important; }
.magni-btn--lg { font-size: 14px !important; padding: 16px 28px !important; }
.magni-btn--sm { font-size: 12px !important; padding: 8px 16px !important; }

/* Hairline rule */
.magni-rule { height: 1px; background: var(--magni-rule); }
.magni-rule--ink { background: var(--magni-ink); }

/* Photo overlay — dark gradient for hero text legibility */
.magni-photo-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,8,5,0.45) 0%, rgba(10,8,5,0.55) 50%, rgba(10,8,5,0.9) 100%);
	pointer-events: none;
}
.magni-photo-overlay--soft::after {
	background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
}

/* Roman numeral overlay (chapter cards) */
.magni-roman {
	font-family: var(--magni-font-display);
	font-style: italic;
	color: var(--magni-paper);
	font-size: 80px;
	line-height: 1;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Header — utility bar + main nav (Elementor Pro Theme Builder
   will style this fully; these are minimal defaults).
   ============================================================ */
.magni-utilbar {
	background: var(--magni-black);
	color: oklch(0.78 0.01 60);
	font-size: 12px;
	letter-spacing: 0.4px;
	padding: 10px var(--magni-page-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.magni-utilbar b { color: var(--magni-paper); }

/* ---- Diagonal flag (NEW / TIP overlay on cards) ---- */
.magni-flag {
	position: absolute;
	top: 0;
	left: 0;
	width: 92px;
	height: 92px;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}
.magni-flag__inner {
	position: absolute;
	top: 16px;
	left: -28px;
	width: 120px;
	background: var(--magni-flag);
	color: var(--magni-paper);
	text-align: center;
	padding: 5px 0;
	font-family: var(--magni-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* ============================================================
   Responsive — mobile padding adjustments. Keep light: most
   work happens via Elementor's per-device controls.
   ============================================================ */
@media (max-width: 768px) {
	:root { --magni-page-pad: 24px; }
	.magni-band-cream,
	.magni-band-dark { padding: var(--magni-gap-5) var(--magni-page-pad); }
}