/*
Theme Name: Academician
Theme URI: https://github.com/alostudios/academician
Author: AloStudios
Author URI: https://alostudios.pro
Description: A block theme for academics — researchers, professors, and fellows of professional bodies. Typographic and content-first, with a profile page built from patterns, a publications archive, a photo gallery, and long-form writing. Everything is editable in the Site Editor; no page builder, no settings panels. Requires the Academician Core plugin for the Publication content type.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: academician
Tags: blog, portfolio, education, accessibility-ready, block-patterns, full-site-editing, block-styles, style-variations, wide-blocks, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, rtl-language-support
*/

/*
 * Direction-neutral by design: every rule below uses logical properties
 * (margin-inline, padding-inline-start, text-align: start) rather than
 * left/right, so right-to-left languages work without a second stylesheet to
 * maintain and drift out of sync.
 *
 * Almost everything lives in theme.json. This file carries only what theme.json
 * cannot express — currently just focus visibility, which is an accessibility
 * requirement rather than a style choice.
 *
 * Resist adding layout or colour here. If a rule belongs in theme.json, it goes
 * in theme.json, or style variations silently stop working.
 */

/*
 * Gallery captions sit below their image, not on top of it.
 *
 * Core overlays them with a gradient scrim, which works when you control the
 * photographs and gambles when you do not. A theme cannot know whether someone
 * will upload a dark field photograph or a white-background slide, and text on
 * an unknown image is an accessibility failure waiting for the wrong upload.
 * Below the image the caption is always legible, and it reads as a caption —
 * which on an academic site is often carrying the actual information.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-width: none;
	padding: 0;
	margin-block: 0.5rem 0;
	margin-inline: 0;
	background: none;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	text-align: start;
	overflow: visible;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	align-self: flex-start;
}

/*
 * Inline term list — used for the publication-type filter. A list of five
 * links reads as a filter row; the same five with bullets read as content.
 */
.wp-block-categories.is-style-inline {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--20);
	padding-inline-start: 0;
	list-style: none;
}

.wp-block-categories.is-style-inline li {
	margin: 0;
}

/*
 * Structural colour.
 *
 * Colour marks structure rather than decorating it: a short accent rule opens
 * every section, the surface tint separates furniture from prose, and the type
 * badge says "this is a category" without a word of explanation. The palette
 * tokens come from the active style variation, so all seven get this for free.
 */

/*
 * Structure is variable, not fixed.
 *
 * Every measurement below is a custom token a style variation can override, so
 * a variation can change the *design* and not merely the palette — the bar
 * thickness, the corner radius, the weight of a rule, whether a section
 * heading is underlined by a stub or a full line.
 */
.wp-site-blocks {
	border-block-start: var(--wp--custom--accent-bar, 4px) solid var(--wp--preset--color--accent);
}

/*
 * Alternating full-width bands on the front page.
 *
 * Sections carry their own bottom margin, which reads as a gap inside a padded
 * band rather than as separation between sections — so the last child gives it
 * up.
 */
.academician-band {
	background: var(--wp--custom--band-tint, var(--wp--preset--color--base-2));
}

.academician-band > :last-child {
	/*
	 * !important is not laziness here. The margin comes from a block attribute,
	 * which WordPress emits as an inline style, and an inline style cannot be
	 * beaten by any selector however specific. The alternative is stripping the
	 * margin from every section pattern, which would change their spacing
	 * everywhere else they are used.
	 */
	margin-block-end: 0 !important;
}

/* A short accent rule above each section heading. */
.wp-block-post-content h2.wp-block-heading::before,
main > h2.wp-block-heading::before,
main > .wp-block-group > h2.wp-block-heading::before {
	content: "";
	display: block;
	inline-size: var(--wp--custom--heading-rule, 2.5rem);
	margin-block-end: 0.7rem;
	border-block-start: var(--wp--custom--heading-rule-weight, 2px) solid var(--wp--preset--color--accent);
}

/*
 * Portraits follow the variation's corner language, and never exceed portrait
 * size.
 *
 * The cap is not belt-and-braces. Side-by-side layouts constrain the portrait
 * with a 220px column, but any variation that STACKS the hero loses that
 * column width — and the image then fills the entire measure, so the reader
 * meets a poster-sized photograph before a word of the statement.
 */
.academician-portrait img {
	max-inline-size: var(--wp--custom--portrait-size, 220px);
	border-radius: var(--wp--custom--portrait-radius, 2px);
}

/* The header is a tinted band with a rule under it, not floating white space. */
.wp-site-blocks > header {
	border-block-end: var(--wp--custom--rule-weight, 1px) solid var(--wp--preset--color--rule);
}

/*
 * Publication status as a pill.
 *
 * "Under review" is a state, not prose — it should look like a label on the
 * record rather than a stray line of coloured text under the citation.
 */
.wp-block-post-template .academician-entry .has-accent-2-color,
.wp-block-post-terms.is-style-badge a,
.academician-pill {
	display: inline-block;
	padding: 0.15em 0.6em;
	border-radius: var(--wp--custom--radius, 2px);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-decoration: none;
}

.wp-block-post-template .academician-entry .has-accent-2-color,
.academician-pill {
	background: var(--wp--preset--color--base-2);
}

/*
 * Surfaces the owner can apply anywhere — a block style on any group.
 *
 * These exist so colour is available in the editor without anyone writing CSS,
 * which is the whole promise of the design system.
 */
.wp-block-group.is-style-panel {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-2);
	border-radius: var(--wp--custom--radius, 2px);
}

.wp-block-group.is-style-accent-panel {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base-2);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius, 2px);
}

/* Quotations get a surface as well as a rule. */
.wp-block-quote {
	padding-block: var(--wp--preset--spacing--30);
	padding-inline-end: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base-2);
}

/* Publication type, as a badge rather than another link in a row of links. */
.wp-block-post-terms.is-style-badge a {
	display: inline-block;
	padding: 0.15em 0.6em;
	background: var(--wp--preset--color--base-2);
	border-radius: 2px;
	color: var(--wp--preset--color--accent-2);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.wp-block-post-terms.is-style-badge a:hover {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}

/* Table headers read as structure, not as another row of data. */
.wp-block-table thead {
	background: var(--wp--preset--color--base-2);
}

.wp-block-table thead th {
	border-block-end: var(--wp--custom--heading-rule-weight, 2px) solid var(--wp--preset--color--accent-2);
}

/* The current page in a pagination run. */
.wp-block-query-pagination-numbers .current {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/*
 * Responsive.
 *
 * Two things break on a phone, and neither shows up as horizontal overflow —
 * which is why the overflow test alone was not enough.
 */

/*
 * The year rail. A fixed 3.5rem or 7rem gutter is what makes a long list
 * scannable on a wide screen and what squeezes the title into four words a
 * line on a narrow one. Below 600px the year moves above its entry and the
 * entry takes the full width.
 *
 * The doubled class beats the specificity of the generated flex-basis rule
 * without resorting to !important.
 */
@media ( max-width: 600px ) {
	.academician-entry.academician-entry {
		flex-wrap: wrap;
		row-gap: 0.2rem;
	}

	.academician-entry.academician-entry > * {
		flex-basis: 100%;
	}

	.academician-entry.academician-entry .academician-entry__when {
		margin-block-end: 0;
	}
}

/*
 * The portrait. At full column width it is the entire first screen on a phone,
 * and a reader meets a photograph before a single word about the work.
 */
@media ( max-width: 781px ) {
	.academician-portrait img {
		max-inline-size: 150px;
	}
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(select):focus-visible,
:where(textarea):focus-visible,
:where([tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}