/*
Theme Name: Riva Theme
Theme URI: https://www.rivaladiva.com
Author: Riva la Diva
Author URI: https://www.rivaladiva.com
Description: A minimal, dependency-free WordPress block theme for Riva la Diva. Reproduces the live magazine layout as a clean baseline — the "RIVA la DIVA." wordmark shipped as the site's own PNG lockup, bordered uppercase nav, a 3-column mosaic of post cards with a right sidebar, all framed as a centered white column on a light-grey page. Open Sans typography (light 300 headings, matching the live site), WCAG-AA colour tokens, and a pink-heart SVG favicon. Web fonts are bundled locally (no CDN). No page builder, no build step, no Pixelgrade code. Runs cleanly on PHP 8.x.
Requires at least: 6.2
Tested up to: 6.4
Requires PHP: 8.0
Version: 1.6.5
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: riva-theme
Tags: blog, block-theme, full-site-editing, two-columns, custom-colors, custom-menu, featured-images, threaded-comments
*/

/* ==========================================================================
   Presentation that theme.json cannot express lives here: the wordmark,
   bordered nav, the CSS-columns mosaic, card meta, and the sidebar.
   ========================================================================== */

/* ---- Page frame ---------------------------------------------------------
   The live site centers a white content column on a light-grey page (body
   #eeeeee, container #ffffff). We reproduce that natively: theme.json sets the
   page background token to grey, and .wp-site-blocks (WordPress' wrapper around
   all top-level template content) becomes the centered white column. Because
   the theme uses useRootPaddingAwareAlignments, alignfull sections (header nav,
   footer) bleed only to this column's edge -- never the viewport -- so the grey
   frame shows on every side without touching a single template. */
.wp-site-blocks {
	background-color: var(--wp--preset--color--surface);
	max-width: 1040px;
	margin: 2rem auto 3rem;
	box-shadow: 0 1px 3px rgba(50, 50, 50, 0.08);
}
@media (max-width: 1080px) {
	.wp-site-blocks { margin: 0 auto; box-shadow: none; }
}

/* Screen-reader-only text: present for assistive tech / SEO, visually hidden. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus: a visible ring for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-search__button:focus-visible,
.wp-social-link a:focus-visible,
.wp-block-navigation a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	border-radius: 1px;
}

/* ---- Header ------------------------------------------------------------- */
.riva-header {
	background-color: #ffffff;
	padding-top: 2.2rem;
	padding-bottom: 0;
}

.riva-header-top {
	position: relative;
	text-align: center;
}

/* Wordmark: the original ships the "RIVA la DIVA." lockup as a single PNG
   (uploads/2015/05/new.png). We bundle it in the theme and render it as the
   brand link's background image, with visually-hidden text for a11y/SEO. The
   aspect-ratio matches the source asset (1000x261) so it never distorts. */
.riva-wordmark a.riva-logo {
	display: block;
	width: min(340px, 74%);
	aspect-ratio: 1000 / 261;
	margin: 0 auto;
	background: url("assets/images/riva-logo.png") center / contain no-repeat;
}

/* Tagline (site description) */
.riva-tagline,
.wp-block-site-tagline.riva-tagline {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}

/* Search icon, parked top-right */
.riva-search {
	position: absolute;
	right: 0;
	top: 0.4rem;
}
.riva-search .wp-block-search__inside-wrapper {
	border: none;
}
/* The magnifier is a native "button only" search: core's Interactivity API
   toggles .wp-block-search__searchfield-hidden to expand the field inline on
   click (and on Enter). Style the expanded input; do NOT display:none it, or
   the native expand can never reveal it. */
.riva-search .wp-block-search__input {
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--foreground);
	padding: 0.35rem 0.5rem;
}
.riva-search .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--heading);
	padding: 0;
	min-width: 0;
}
.riva-search .wp-block-search__button svg {
	fill: var(--wp--preset--color--heading);
}

/* Bordered, centered, uppercase nav */
.riva-nav-wrap {
	margin-top: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}
.riva-nav-wrap .wp-block-navigation {
	justify-content: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--heading);
}
.riva-nav-wrap .wp-block-navigation a {
	color: var(--wp--preset--color--heading);
}
.riva-nav-wrap .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---- Main / sidebar shell ----------------------------------------------- */
.riva-body {
	padding-top: 3rem;
	padding-bottom: 4rem;
}

/* ---- Mosaic of post cards (CSS columns = masonry feel) ------------------ */
.riva-mosaic .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3;
	column-gap: 1.8rem;
}
@media (max-width: 900px) {
	.riva-mosaic .wp-block-post-template { columns: 2; }
}
@media (max-width: 600px) {
	.riva-mosaic .wp-block-post-template { columns: 1; }
}
.riva-mosaic .wp-block-post-template > li {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: block;
	margin: 0 0 2.6rem;
}

.riva-card .wp-block-post-featured-image {
	margin: 0 0 0.9rem;
}
.riva-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}
.riva-card .wp-block-post-terms,
.riva-cat {
	display: block;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.riva-card .wp-block-post-title {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}
.riva-card .wp-block-post-title a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
}
.riva-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}
.riva-card .wp-block-post-excerpt {
	margin: 0 0 0.7rem;
}
.riva-card .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.55;
}
.riva-card .wp-block-post-excerpt__more-text a {
	color: var(--wp--preset--color--accent-2);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Card meta row (post date). */
.riva-meta {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	color: var(--wp--preset--color--muted-light);
	font-size: 12px;
}
.riva-meta .wp-block-post-date,
.riva-meta .wp-block-post-date a {
	color: var(--wp--preset--color--muted-light);
	font-size: 12px;
	text-decoration: none;
}

/* Numbered pagination */
.riva-pagination {
	margin-top: 2rem;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.riva-pagination .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}
.riva-pagination .page-numbers {
	display: inline-block;
	min-width: 2.4rem;
	padding: 0.55rem 0.7rem;
	text-align: center;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border: 1px solid #d9d9d9;
}
.riva-pagination a.page-numbers:hover {
	background: var(--wp--preset--color--ink);
	color: #ffffff;
	border-color: var(--wp--preset--color--ink);
}
.riva-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	border-color: var(--wp--preset--color--accent);
}
.riva-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 0;
	padding: 0.55rem 0.2rem;
}
.riva-pagination .wp-block-query-pagination-previous,
.riva-pagination .wp-block-query-pagination-next {
	display: inline-block;
	min-width: 2.4rem;
	padding: 0.55rem 0.7rem;
	text-align: center;
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border: 1px solid #d9d9d9;
}
.riva-pagination .wp-block-query-pagination-previous:hover,
.riva-pagination .wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--ink);
	color: #ffffff;
	border-color: var(--wp--preset--color--ink);
}

/* ---- Sidebar ------------------------------------------------------------ */
.riva-sidebar { font-size: 13px; }
.riva-sidebar .riva-widget { margin-bottom: 2.6rem; }
.riva-sidebar h2,
.riva-widget-title {
	font-family: 'Open Sans', sans-serif !important;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 0.6rem;
	margin: 0 0 1rem;
}
.riva-social-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.riva-social-list li { margin: 0 0 0.7rem; }
.riva-social-list a {
	color: var(--wp--preset--color--heading);
	text-decoration: none;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.riva-social-list a:hover { color: var(--wp--preset--color--accent); }

/* Social row: one tidy, centered row of consistent brand marks. */
.riva-social-widget { text-align: center; }
.riva-social-widget .riva-social {
	justify-content: center;
	gap: 0.4rem 0.5rem;
	margin-top: 0.2rem;
}
.riva-social-widget .riva-social .wp-social-link {
	background: transparent;
	color: var(--wp--preset--color--heading);
	transition: transform 0.15s ease, color 0.15s ease;
}
.riva-social-widget .riva-social .wp-social-link a { padding: 4px; }
.riva-social-widget .riva-social .wp-social-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.riva-social-widget .riva-social .wp-social-link:hover {
	color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
	background: transparent;
}

.riva-video-widget .wp-block-embed { margin: 0; }
.riva-video-widget .wp-block-embed__wrapper { line-height: 0; }
.riva-pinterest { display: flex; justify-content: center; }

/* Popular posts list */
.riva-popular .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 1;
}
.riva-popular .wp-block-post-template > li {
	display: flex;
	gap: 0.8rem;
	margin: 0 0 1.1rem;
	align-items: flex-start;
}
.riva-popular .wp-block-post-featured-image {
	flex: 0 0 56px;
	width: 56px;
	margin: 0;
}
.riva-popular .wp-block-post-title {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
}
.riva-popular .wp-block-post-title a { color: var(--wp--preset--color--heading); text-decoration: none; }

/* ---- Single post -------------------------------------------------------- */
/* In-content links: underlined and colour-distinct from body text so they are
   discernible without relying on colour alone (WCAG 1.4.1). */
.riva-article .wp-block-post-content a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.riva-article .wp-block-post-content a:hover {
	color: var(--wp--preset--color--accent);
}
.riva-article .wp-block-post-title {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 40px;
	line-height: 1.2;
	margin: 1.2rem 0 0.4rem;
}
.riva-byline {
	color: var(--wp--preset--color--muted-light);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 1.6rem;
}
.riva-byline .riva-byauthor { color: var(--wp--preset--color--muted); }
.riva-article .wp-block-post-featured-image { margin: 0 0 1.4rem; }
.riva-article .wp-block-post-featured-image img { width: 100%; height: auto; }
.riva-catline .wp-block-post-terms {
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.riva-authorbox {
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 1.2rem 0;
	margin: 1.6rem 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

/* ---- Footer ------------------------------------------------------------- */
.riva-footer {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 2rem;
	padding-bottom: 2rem;
	text-align: center;
}
.riva-footer, .riva-footer p {
	color: var(--wp--preset--color--muted-light);
	font-size: 12px;
	letter-spacing: 0.04em;
}

/* ---- Responsive hardening ------------------------------------------------
   Guarantee nothing in imported post content can force horizontal overflow,
   regardless of browser. Media is capped to its column; long unbroken strings
   wrap; wide tables scroll inside the column instead of stretching the page. */
html,
body {
	overflow-x: hidden;
}
.riva-article img,
.riva-article iframe,
.riva-article video,
.riva-article embed,
.riva-article object,
.riva-card img,
.wp-block-image img,
.wp-block-embed iframe {
	max-width: 100%;
	height: auto;
}
.riva-article,
.riva-card,
.riva-sidebar {
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.riva-article table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Nav: relax tracking on mid/small widths so items stay on-screen and wrap
   cleanly rather than pushing the row wide. */
@media (max-width: 1100px) {
	.riva-nav-wrap .wp-block-navigation {
		letter-spacing: 0.1em;
		gap: 0.4rem 1rem;
	}
}

/* ---- Comments ----------------------------------------------------------
   Reproduces the live site's numbered-thread look with native comment blocks:
   a sequential number box on the left (white/bordered for top-level, filled
   grey for replies), bold dark author name + muted date, muted-grey body text,
   teal reply links, and naturally indented replies. Like the live site, ONE
   continuous vertical rail runs down the top-level box-centre column, anchored
   to the comment list only (never the whole post), with a short horizontal
   connector tying each reply back to it. Mirrors the live rule
   `.comments-area::before { left:20px; top:0; height:100%; border-left:1px }`. */
.riva-article .wp-block-comments {
	counter-reset: riva-comment;
	margin-top: 3.2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.wp-block-comments-title {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 20px;
	font-weight: 300;
	color: var(--wp--preset--color--heading);
	margin: 0 0 1.4rem;
}
.wp-block-comment-template,
.wp-block-comment-template ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Position the top-level comment list so the vertical rail is anchored to the
   list (not a distant ancestor). This is the fix for the rail previously
   stretching the full post height: the rail's absolute ::before now resolves
   against this element, so it spans exactly the comment list. */
.wp-block-comment-template {
	position: relative;
}
/* Single continuous rail down the top-level box-centre column (left:20px ~=
   the 42px box's centre), mirroring the live site's `.comments-area::before`
   (top:0; height:100%; border-left:1px var(--wp--preset--color--rule)). Boxes have their own white/grey
   fill and paint over the rail, so it visually connects box to box. */
.wp-block-comment-template::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--wp--preset--color--rule);
}
.wp-block-comment-template li.comment {
	position: relative;
	counter-increment: riva-comment;
	/* 60px left gutter = 42px number box + ~18px gap (matches the live site). */
	padding: 1.3rem 0 1.3rem 60px;
}
/* Threaded replies indent naturally: the nested <ol> sits inside its parent
   li's 60px content inset, so a reply's box column lands under the parent's
   content column, exactly like the live site. No extra margin needed. */
.wp-block-comment-template ol {
	position: relative;
}
/* Horizontal connector tying each reply back to the top-level rail column
   (matches the live site). The reply box sits 60px in from the rail; its box
   centre is at 20px, so the tick runs 40px left from the reply box to the rail. */
.wp-block-comment-template ol li.comment::after {
	content: "";
	position: absolute;
	left: -40px;
	top: calc(1.3rem + 21px);   /* reply box vertical centre */
	width: 40px;
	height: 1px;
	background: var(--wp--preset--color--rule);
}
.wp-block-comment-template li.comment::before { /* sequential number box */
	content: counter(riva-comment);
	position: absolute;
	left: 0;
	top: 1.3rem;
	width: 42px;
	height: 42px;
	line-height: 40px;          /* 42px - 1px border top/bottom */
	text-align: center;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted-light);
	font-size: 14px;
}
/* Reply number boxes: filled grey with a darker number, like the live site. */
.wp-block-comment-template ol li.comment::before {
	background: #eeeeee;
	border-color: #eeeeee;
	color: var(--wp--preset--color--foreground);
}
.wp-block-comment-author-name,
.wp-block-comment-author-name a {
	display: inline;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.wp-block-comment-date,
.wp-block-comment-date a {
	display: inline;
	font-size: 12px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.wp-block-comment-date::before {
	content: " on ";
	color: var(--wp--preset--color--muted);
}
.wp-block-comment-content {
	margin: 0.5rem 0 0.4rem;
}
.wp-block-comment-content p {
	color: var(--wp--preset--color--muted);
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 0.6rem;
}
.wp-block-comment-reply-link a {
	font-size: 12px;
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}
.wp-block-comment-reply-link a:hover {
	text-decoration: underline;
}
.wp-block-comments-pagination {
	margin-top: 1.4rem;
	font-size: 13px;
}
.wp-block-comments-pagination a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

/* Comment form */
.comment-respond .comment-reply-title,
.wp-block-post-comments-form .comment-reply-title {
	font-family: 'Open Sans', sans-serif !important;
	font-size: 20px;
	font-weight: 300;
	color: var(--wp--preset--color--heading);
	margin: 2rem 0 1rem;
}
.wp-block-post-comments-form .comment-form input[type="text"],
.wp-block-post-comments-form .comment-form input[type="email"],
.wp-block-post-comments-form .comment-form input[type="url"],
.wp-block-post-comments-form .comment-form textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--wp--preset--color--rule);
	background: #ffffff;
	padding: 0.7rem 0.9rem;
	font-size: 14px;
	color: var(--wp--preset--color--foreground);
	box-sizing: border-box;
}
.wp-block-post-comments-form .form-submit .submit,
.wp-block-post-comments-form input[type="submit"] {
	background: var(--wp--preset--color--heading);
	color: #ffffff;
	border: 0;
	padding: 0.8rem 1.8rem;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
}
.wp-block-post-comments-form .form-submit .submit:hover,
.wp-block-post-comments-form input[type="submit"]:hover {
	background: var(--wp--preset--color--accent-2);
}