/*
Theme Name:  Rubric
Theme URI:   https://github.com/cfrech/media-literacy-assessment
Author:      Media Literacy Assessment
Author URI:  https://media.cfrech.com
Description: A block theme for the Media Literacy Assessment project — an editorial, research-forward theme built around publications, people, events, and an assessment instrument database. Design tokens live in theme.json; the visual direction can be re-skinned there without touching templates.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version:     0.2.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rubric
Tags:        block-theme, full-site-editing, editorial, academic, one-column, custom-colors, custom-menu
*/

/*
 * Block themes take their styling from theme.json. This file carries the
 * theme header (which WordPress requires) plus the handful of rules that
 * theme.json cannot express.
 *
 * Visual direction: "Civic Bold" — hard rules, flat colour blocks, no
 * radii, Bricolage Grotesque set tight and heavy.
 */

/* --- Meta labels ---------------------------------------------------- */

/* Small uppercase labels above titles and in card headers. */
.rubric-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

/* Same label, in accent — used on section headers. */
.rubric-eyebrow-accent {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* A solid accent chip. Flat, square, no radius — the direction's signature. */
.rubric-chip {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-dark);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.45rem 0.8rem;
}

/* --- Ruled lists ---------------------------------------------------- */

/*
 * Hairline list rows. The first row gets the heavy 2px rule and the rest
 * get hairlines, so a list reads as one bounded block rather than a
 * stack of separate cards.
 */
.rubric-ruled-list > * {
	border-top: 1px solid var(--wp--preset--color--rule);
}

.rubric-ruled-list > *:first-child {
	border-top: 2px solid var(--wp--preset--color--ink);
}

/* On a dark panel the rules have to invert or they vanish. */
.rubric-on-dark .rubric-ruled-list > * {
	border-top-color: #3A342B;
}

.rubric-on-dark .rubric-ruled-list > *:first-child {
	border-top-color: #3A342B;
}

/* --- Navigation ----------------------------------------------------- */

/* Nav links are bold and undecorated; theme.json underlines links generally. */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- Long strings --------------------------------------------------- */

/*
 * Keep long DOIs, citations, and instrument names from blowing out the
 * grid on narrow screens.
 */
.rubric-break-anywhere {
	overflow-wrap: anywhere;
}

/* --- Stacked columns ------------------------------------------------ */

/*
 * The direction leans on vertical 3px rules between columns. Below WordPress's
 * column-stacking breakpoint those columns become full width, but the
 * border-right survives — leaving a rule stranded down the middle of the page
 * with nothing on either side of it.
 *
 * Drop the vertical rule and re-establish the separation horizontally.
 * The borders come from inline block styles, so !important is the only way
 * to win the cascade here.
 */
@media (max-width: 781px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		border-right-width: 0 !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column + .wp-block-column {
		border-top: 3px solid var(--wp--preset--color--ink);
		padding-top: var(--wp--preset--spacing--50);
	}

	/*
	 * Side padding on a stacked column was gutter spacing for the vertical
	 * rule; on a narrow viewport it just eats the line length. Columns with
	 * their own background keep theirs — there it is real interior padding.
	 */
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(.has-background) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* --- Accessibility -------------------------------------------------- */

/*
 * The palette is high-contrast by design, but focus rings still need to
 * be visible against both paper and the ink/accent blocks.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.rubric-on-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--on-dark);
}

/* Respect a reader's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}