/*
 * typography.css — Base typography
 *
 * Sets the body, heading, paragraph, and link defaults that the rest
 * of the site inherits from. Also includes the paper-grain overlay and
 * the reading width constraint for article content.
 *
 * Only targets selectors that won't conflict with Kadence's own
 * baseline styles. Kadence's Customizer (Typography section) handles
 * most font-family / weight choices; this file overrides the few
 * places where we need editorial-specific styling.
 *
 * @package Kadence_Kojiki_Trail
 */

/* ============ BASE ============ */
body {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--reading-line);
}

/* Paper-grain overlay — recreates the washi texture from the mockups. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
	opacity: 0.4;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

/* ============ HEADINGS ============ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--ink);
	letter-spacing: var(--letter-display);
	line-height: 1.15;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
	font-style: italic;
	color: var(--vermillion);
	font-weight: 400;
}

/* ============ PARAGRAPHS ============ */
p {
	margin-bottom: 28px;
	font-size: var(--fs-body);
	line-height: var(--reading-line);
	color: var(--ink);
}

p em { font-style: italic; }

strong { font-weight: 500; }

/* ============ LINKS ============ */
a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s, border-color 0.3s;
}

/* Article body links — vermillion underline that darkens on hover. */
.entry-content a:not(.kt-pcta-btn):not(.kt-vp-link):not(.kt-news-btn):not(.kt-region-link):not(.kt-card-link) {
	color: var(--vermillion);
	border-bottom: 1px solid rgba(168, 57, 46, 0.3);
}

.entry-content a:not(.kt-pcta-btn):not(.kt-vp-link):not(.kt-news-btn):not(.kt-region-link):not(.kt-card-link):hover {
	border-bottom-color: var(--vermillion);
}

/* ============ READING WIDTH ============ */
/* Constrains article body to 760px regardless of Kadence's page width. */
.entry-content {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
}

/* Make full-width blocks (group/columns marked alignwide/alignfull)
   actually break out of the reading column. */
.entry-content > .alignwide {
	max-width: var(--container-max);
}

.entry-content > .alignfull {
	max-width: 100%;
}

/* ============ UTILITY: CINZEL LABEL ============ */
.cinzel-label {
	font-family: var(--font-label);
	font-size: var(--fs-label);
	letter-spacing: var(--letter-cinzel);
	text-transform: uppercase;
	color: var(--vermillion);
	font-weight: 500;
}

/* ============ READING PROGRESS BAR ============ */
/* The bar element is rendered by single-myth.php (Phase 8b). The CSS
   is included here so it's available site-wide if reused. */
.kt-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	background: var(--vermillion);
	z-index: 51;
	width: 0;
	transition: width 0.1s;
}

/* ============ KADENCE FOOTER COLOR OVERRIDE ============ */
/* Kadence applies an ink-dark background to the footer (set via the
   Customizer in Phase 1+2). Without an explicit color rule for footer
   text, the body's --ink color cascades down and renders black on
   black. This block forces a paper-tone text color across all common
   Kadence footer wrapper classes so copy stays readable.
   These selectors are defensive — Customizer settings still take
   precedence for any property the Customizer explicitly sets. */
.site-footer,
.site-footer-wrap,
.site-footer-row-container,
.site-footer-row,
.site-footer-section-html,
.site-footer .site-info,
footer.site-footer p,
footer.site-footer span {
	color: rgba(242, 237, 224, 0.75);
}

.site-footer a {
	color: rgba(242, 237, 224, 0.75);
	border-bottom-color: transparent;
}

.site-footer a:hover {
	color: var(--gold);
}