/*
Theme Name: Parimaanam 2026
Theme URI: https://parimaanam.net/
Author: Parimaanam
Description: A native WordPress block theme for the Parimaanam Tamil-language publication.
Version: 0.36.4
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: parimaanam-2026
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
 * BREAKPOINTS — canonical scale for the whole theme
 *
 * CSS custom properties are invalid inside media query conditions, so these
 * cannot be variables. They are literals, repeated deliberately, and this is
 * the one place they are defined. Changing the look at a given size means
 * changing every file that uses that value; there are only three.
 *
 *   40rem   640px   tablet   single column becomes multi-column
 *   64rem  1024px   desktop  navigation leaves the overlay; widest grids
 *   72rem  1152px   wide     the article gains its sidebar
 *
 * Tablet sits at 640px rather than the more common 768px because most tablets
 * in portrait are narrower than 768px — an iPad mini is 744px and small
 * Android tablets are around 600px. At 768px every one of them received the
 * phone layout, so 744px of screen rendered a single column. Below 640px is
 * genuinely phone territory; the widest common phone is 430px.
 *
 * 63.99rem appears as the deliberate complement of 64rem, for the half of a
 * pair that must not overlap. min-width/max-width is used rather than the
 * newer range syntax because the mobile navigation overlay lives inside one of
 * these queries: a browser that does not understand the condition drops the
 * whole block, and losing the overlay is a worse outcome than a tidier rule.
 *
 * Prefer intrinsic sizing to a fourth breakpoint. The homepage sections and
 * the footer carry no width queries at all — they use grid minimum column
 * widths and flex wrapping, so they respond to the space they actually have
 * rather than to the viewport.
 *
 * Files using this scale: style.css, assets/css/header.css,
 * assets/css/homepage.css.
 * ========================================================================== */

/*
 * Image captions in article content.
 *
 * Three caption shapes exist across the imported archive: modern `figcaption`,
 * the legacy `[caption]` shortcode's `.wp-caption-text` (201 posts), and a few
 * figures whose caption still carries `blocks-gallery-item__caption`, a class
 * Core's gallery stylesheet positions absolutely so it overlays the image. On
 * a standalone figure that simply covered the photograph.
 *
 * These rules live here rather than in theme.json because that file's `css`
 * property silently dropped one half of a comma-separated `&` selector, and
 * what it did emit was wrapped in `:where()` with too little specificity to
 * override the overlay.
 *
 * All three now read the same: below the image, quiet, with a crimson rule
 * marking them as commentary rather than body text.
 */
.wp-block-post-content figcaption,
.wp-block-post-content .wp-caption-text {
	background: none;
	border-left: 2px solid var(--wp--preset--color--crimson);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	inset: auto;
	line-height: 1.5;
	margin: 0.75rem 0 0;
	padding: 0 0 0 0.75rem;
	position: static;
	text-align: left;
	width: auto;
}

/*
 * The overlay rule for `blocks-gallery-item__caption` resolves at three
 * classes, measured against the live page, so the rule above cannot reach it.
 * The repeated class buys one more class of specificity without `!important`,
 * and only these three declarations need it — the rest are inherited from the
 * general caption rule.
 */
.wp-block-post-content.wp-block-post-content figcaption.blocks-gallery-item__caption {
	color: var(--wp--preset--color--muted);
	position: static;
	text-align: left;
}

/*
 * The same legacy rules make the figure a flex row, which was harmless while
 * the caption was taken out of flow. Once it became a flow child, the image
 * and the caption stretched to a shared height — a 1024x512 photograph was
 * rendering 1400px tall. The figure has no class of its own, so it is matched
 * through the caption it contains.
 */
.wp-block-post-content.wp-block-post-content figure:has(> .blocks-gallery-item__caption) {
	display: block;
}

/*
 * The gallery rules also give the image `height: 100%` with `!important`,
 * which no specificity can reach, and against a block figure that resolves
 * circularly — the photograph rendered 374px tall instead of 172px. This is
 * the one place the theme answers `!important` with `!important`, scoped to
 * the handful of figures carrying the legacy class so real galleries and every
 * other image are untouched.
 */
.wp-block-post-content figure:has(> .blocks-gallery-item__caption) img {
	height: auto !important;
	object-fit: initial !important;
}

/*
 * Article header: category, title, date.
 *
 * The date icon is a CSS mask rather than markup, because it is decorative —
 * the date text already carries the meaning — and a mask inherits the
 * surrounding colour instead of hard-coding a fill. No icon library is
 * introduced for one glyph.
 */
.article-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: var(--wp--preset--spacing--50);
}

.article-header__category {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.article-header__category::before {
	background: var(--wp--preset--color--crimson);
	content: "";
	flex: 0 0 1.5rem;
	height: 2px;
}

.article-header__category a {
	color: var(--wp--preset--color--crimson);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.article-header__category a:hover {
	color: var(--wp--preset--color--crimson-hover);
	text-decoration: underline;
}

.article-header__meta {
	align-items: center;
	color: var(--wp--preset--color--muted);
}

.article-header__meta .wp-block-post-date {
	align-items: center;
	display: flex;
	gap: 0.4rem;
}

.article-header__meta .wp-block-post-date::before {
	background: currentColor;
	content: "";
	flex: 0 0 1rem;
	height: 1rem;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-1.5v2h-9V2H6v2H5C3.9 4 3 4.9 3 6v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 15c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V9h15v10zm0-11.5h-15V6c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v1.5z'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: contain;
}

.article-header__meta .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

.article-header__meta .wp-block-post-date a:hover {
	color: var(--wp--preset--color--crimson-hover);
}

/*
 * Adjacent post navigation. Two panels sharing a hairline, each carrying a
 * quiet label above the destination title, with the arrow supplied in CSS so
 * it stays out of the link's accessible name.
 *
 * Breakpoint: 40rem (tablet). See the canonical scale above.
 */
.post-navigation {
	border-top: 1px solid var(--wp--preset--color--line);
	display: grid;
	gap: 1px;
	grid-template-columns: minmax(0, 1fr);
}

.post-navigation__item {
	background: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--50) 0;
	position: relative;
	transition: background-color 200ms ease;
}

.post-navigation__item + .post-navigation__item {
	border-top: 1px solid var(--wp--preset--color--line);
}

.post-navigation__label {
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.post-navigation .wp-block-post-navigation-link {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.35;
}

.post-navigation .wp-block-post-navigation-link a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/*
 * Stretching the anchor over the panel makes the whole area clickable without
 * wrapping non-link content in the link.
 */
.post-navigation .wp-block-post-navigation-link a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.post-navigation__item:hover {
	background: var(--wp--preset--color--surface);
}

.post-navigation__item:hover .wp-block-post-navigation-link a {
	color: var(--wp--preset--color--crimson-hover);
}

.post-navigation__label::before {
	color: var(--wp--preset--color--crimson);
	display: inline-block;
	transition: transform 200ms ease;
}

.post-navigation__item--previous .post-navigation__label::before {
	content: "\2190\00a0";
}

.post-navigation__item--next .post-navigation__label::before {
	content: "\2192\00a0";
	order: 2;
}

.post-navigation__item--previous:hover .post-navigation__label::before {
	transform: translateX(-0.25rem);
}

.post-navigation__item--next:hover .post-navigation__label::before {
	transform: translateX(0.25rem);
}

@media (min-width: 40rem) {
	.post-navigation {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.post-navigation__item {
		padding: var(--wp--preset--spacing--50);
	}

	.post-navigation__item + .post-navigation__item {
		border-left: 1px solid var(--wp--preset--color--line);
		border-top: 0;
	}

	/*
	 * When only a next post exists it must still sit on the right, or a first
	 * post would show its one panel in the previous slot.
	 */
	.post-navigation__item--next {
		grid-column: 2;
		text-align: right;
	}
}

@media (prefers-reduced-motion: reduce) {
	.post-navigation__item,
	.post-navigation__label::before {
		transition: none;
	}

	.post-navigation__item:hover .post-navigation__label::before {
		transform: none;
	}
}

/*
 * The single-post sidebar needs a responsive two-region layout and scoped
 * styling that cannot be represented by block attributes or theme.json.
 *
 * Breakpoint: 72rem (wide). See the canonical scale above.
 */
.single-article-layout {
	column-gap: var(--wp--preset--spacing--70);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/*
 * The article, the adjacent-post navigation and the comments are all content;
 * only the sidebar is aside. Source order runs article, navigation, comments,
 * sidebar so a screen reader reaches the supplementary column last, but in the
 * single-column layout the sidebar is pulled up behind the article rather than
 * left trailing a long comment thread.
 *
 * Each of these carries its own vertical margins, so the grid contributes no
 * row gap.
 */
.single-article-layout__content {
	order: 1;
}

.single-article-layout > .article-sidebar {
	order: 2;
}

.single-article-layout > .post-navigation {
	order: 3;
}

.single-article-layout > .wp-block-comments {
	order: 4;
}

.single-article-layout__content,
.article-sidebar {
	min-width: 0;
}

.article-sidebar__widget + .article-sidebar__widget {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--60);
}

.article-sidebar__heading {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

.article-sidebar__heading::before {
	background: var(--wp--preset--color--crimson);
	content: "";
	flex: 0 0 1.5rem;
	height: 2px;
}

.article-sidebar__categories,
.article-sidebar__latest {
	list-style: none;
	margin: 0;
	padding: 0;
}

.article-sidebar__categories li,
.article-sidebar__latest li {
	border-bottom: 1px solid var(--wp--preset--color--line);
	margin: 0;
	padding: 0.7rem 0;
}

.article-sidebar__categories li {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Core's Archives dropdown renders its own label, which sat directly beneath
 * this widget's heading and named the same thing twice. It stays in the
 * accessibility tree as the select's label; only the duplicate is hidden.
 */
.article-sidebar__archives label {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Recent posts are a media object: thumbnail left, title and date stacked
 * beside it. The first track is `auto` so a post without a featured image
 * collapses it rather than leaving a gap where the image would have been.
 */
.article-sidebar__latest li {
	align-items: start;
	column-gap: 0.75rem;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	row-gap: 0.15rem;
}

.article-sidebar__latest .wp-block-latest-posts__featured-image {
	grid-row: 1 / span 2;
	margin: 0;
	width: 4rem;
}

.article-sidebar__latest .wp-block-latest-posts__featured-image img {
	aspect-ratio: 1;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.article-sidebar__latest .wp-block-latest-posts__post-title,
.article-sidebar__latest .wp-block-latest-posts__post-date {
	grid-column: 2;
}

.article-sidebar__categories li:first-child,
.article-sidebar__latest li:first-child {
	padding-top: 0;
}

.article-sidebar__categories a,
.article-sidebar__latest a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}

.article-sidebar__categories a:hover,
.article-sidebar__latest a:hover {
	color: var(--wp--preset--color--crimson-hover);
}

.article-sidebar__archives select {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font: inherit;
	max-width: 100%;
	padding: 0.7rem;
	width: 100%;
}

.article-sidebar__latest .wp-block-latest-posts__post-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0;
}

@media (min-width: 72rem) {
	.single-article-layout {
		align-items: start;
		grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
	}

	/*
	 * Rows are placed explicitly rather than left to auto-placement, because
	 * the navigation pattern renders nothing on a first or last post and an
	 * auto-placed sidebar would then reflow. Its empty row simply collapses.
	 */
	.single-article-layout__content {
		grid-column: 1;
		grid-row: 1;
	}

	.single-article-layout > .post-navigation {
		grid-column: 1;
		grid-row: 2;
	}

	.single-article-layout > .wp-block-comments {
		grid-column: 1;
		grid-row: 3;
	}

	.single-article-layout > .article-sidebar {
		grid-column: 2;
		grid-row: 1 / 4;
	}

	.single-article-layout__content.single-article-layout__content > :where(header, .wp-block-post-content, .wp-block-post-terms),
	.single-article-layout__content > header > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
	.single-article-layout__content > .wp-block-post-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: none;
		width: 100%;
	}
}