/*
Theme Name: Poetry Archive Child
Template: canard-wpcom
Version: 1.1.0
Description: Child theme of Canard. Adds item-by-item index styling for the poetry archive (poets index and poems index) so each poet/poem is listed as a single alphabetical row, and unifies every accent/link color into one CSS variable.
Author: Poetry Archive
*/

/* =============================================================
   Color variables — change these and the whole site updates
   ============================================================= */
:root {
	--pa-accent: #2d384e;       /* navy: site title, nav links, poem titles, index rows */
	--pa-accent-hover: #d11415; /* red: hover / active state */
	--pa-list-title-size: 24px; /* poem-title size in the front-page/Thơ Thao lists */
	--pa-poet-case: none;       /* none | uppercase | capitalize — author name case */
}

/* ---- Poetry archive index: one item per row ---- */
.pa-index {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pa-index-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1rem 0;
	text-decoration: none;
	border-bottom: 1px solid var(--pa-border, rgba(0, 0, 0, 0.14));
}

.pa-index-row:first-child {
	border-top: 1px solid var(--pa-border, rgba(0, 0, 0, 0.14));
}

.pa-index-title {
	font-weight: 600;
	color: inherit;
}

.pa-index-row:hover .pa-index-title {
	text-decoration: underline;
}

.pa-index-meta {
	white-space: nowrap;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pa-accent);
}

/* Poet archive heading ("Tác giả: Phùng Cung") in theme blue. */
.page-title {
	color: var(--pa-accent);
}

.pa-empty {
	padding: 1rem 0;
}

/* =============================================================
   Accent color wiring — everything reads from --pa-accent
   ============================================================= */

/* Site title (blog header) */
header.site-header .site-title,
header.site-header .site-title a {
	color: var(--pa-accent);
}

/* Poem / post title headings — follow the accent unless a separate
   Heading color is set in Customize (Extra Colors). */
.entry-title {
	color: var(--pa-heading, var(--pa-accent));
}
.entry-title a,
.entry-title a:visited {
	color: var(--pa-heading, var(--pa-accent));
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
	color: var(--pa-accent-hover);
}

/* Nav menu links */
.main-navigation a {
	color: var(--pa-accent);
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
	color: var(--pa-accent-hover);
}

/* Currently-active nav item: also accent (hover only turns red) */
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current_page_parent > a {
	color: var(--pa-accent);
}
.main-navigation .current_page_item > a:hover,
.main-navigation .current-menu-item > a:hover,
.main-navigation .current_page_ancestor > a:hover,
.main-navigation .current_page_parent > a:hover {
	color: var(--pa-accent-hover);
}

/* Index rows (Thơ dịch, Thơ Thao, home lists) */
.pa-index-row,
.pa-index-title {
	color: var(--pa-accent);
}
.pa-index-row:hover .pa-index-title,
.pa-index-row:focus .pa-index-title,
.pa-index-title:hover {
	color: var(--pa-accent-hover);
}

/* Poem titles inside the front-page query list */
.wp-block-post-title a,
.wp-block-post-title a:visited {
	color: var(--pa-heading, var(--pa-accent));
}
.wp-block-post-title a:hover,
.wp-block-post-title a:focus,
.wp-block-post-title a:active {
	color: var(--pa-accent-hover);
}

/* Poem titles in the front-page/Thơ Thao lists: smaller, editable size */
.pa-index-row .wp-block-post-title {
	font-size: var(--pa-list-title-size);
	font-weight: 600;
}

/* Author name shown small on the right of each index row */
.pa-index-row .wp-block-post-terms {
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: var(--pa-accent);
	text-transform: var(--pa-poet-case);
}

/* Author byline shown under the title on a single poem page */
.pa-poet-byline {
	margin: 0 0 1rem;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--pa-accent);
	text-transform: var(--pa-poet-case);
}

/* In the hero (featured image), the byline reads white over the image,
   matching Canard's white hero title. */
.entry-hero .pa-poet-byline,
.entry-hero .pa-poet-byline a {
	color: var(--pa-hero-text, #fff);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Previous / next poem navigation box on poem pages */
.post-navigation a,
.post-navigation a:visited {
	color: var(--pa-accent);
}
.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title,
.post-navigation a:active .post-title {
	color: var(--pa-accent-hover);
}

/* Front page: hide the page's own heading so it's a clean poem list */
body.home .entry-title {
	display: none;
}

/* Remove the header search toggle next to the nav menu.
   Hidden with CSS (not removed from the DOM) so Canard's search.js,
   which reads #search-header, doesn't error. */
.search-header {
	display: none;
}

/* Unified link color: one accent drives every link (replaces the old
   separate "Accent / link color" setting). */
a,
a:visited {
	color: var(--pa-accent, #2d384e);
}
a:hover,
a:focus,
a:active {
	color: var(--pa-accent-hover, #d11415);
}

/* Secondary / muted text (dates, post meta, small labels). Defaults match
   the theme's existing gray; editable via Extra Colors in Customize. */
.entry-meta,
.entry-meta a,
.posted-on,
time.entry-date,
.comment-metadata,
.comment-metadata a {
	color: var(--pa-muted, #777);
}

/* Most-read sidebar widget */
.pa-most-read {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pa-most-read-item {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--pa-border, rgba(0, 0, 0, 0.14));
}

.pa-most-read-item:last-child {
	border-bottom: 0;
}

.pa-most-read-item a {
	text-decoration: none;
}

.pa-most-read-title {
	display: block;
	font-weight: 600;
	color: inherit;
}

.pa-most-read-meta {
	display: block;
	font-size: 0.82em;
	color: var(--pa-muted, #777);
}

.pa-most-read-item a:hover .pa-most-read-title {
	text-decoration: underline;
}