/*
Theme Name: Galaton
Author: AsiaGulf Wire
Description: Block theme for a dated news desk: dispatch rows, deal cards, serif body, sans headings.
Version: 0.9.17
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: galaton
Update URI: false
*/

:focus-visible {
	outline: 3px solid var(--wp--preset--color--buoy);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

.wp-block-post-date,
.wp-block-post-terms a {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

main {
	padding-block: var(--wp--preset--spacing--passage);
}

/* Labels of the dateline: core/post-date has no prefix attribute, so the words come from the class. */
.date-published::before {
	content: "Published ";
}

.date-updated::before {
	content: "Updated ";
}

/* Page footer line "Updated <date>": the label is a real paragraph; core hides the modified date when it is empty, so the whole line goes with it. */
.wp-block-group.page-updated {
	gap: 0.35em;
	align-items: baseline;
}

.page-updated > p {
	margin: 0;
	color: var(--wp--preset--color--waybill);
	font-family: var(--wp--preset--font-family--telex);
	font-size: var(--wp--custom--label--size);
	font-weight: 600;
	letter-spacing: var(--wp--custom--label--tracking);
	text-transform: uppercase;
}

.page-updated:not(:has(time)) {
	display: none;
}

/* Read next: other dispatches under an article. One column on phones, two from 782px; every link is a 44px tap target. */
.read-next {
	border-top: 1px solid var(--wp--preset--color--plimsoll);
	margin-top: var(--wp--preset--spacing--haul);
	padding-top: var(--wp--preset--spacing--leg);
}

.read-next__list .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--stride);
	grid-template-columns: minmax(0, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.read-next__item {
	min-width: 0;
	overflow-wrap: anywhere;
}

.read-next__item .wp-block-post-title {
	margin: 0;
}

.read-next__item .wp-block-post-title a {
	box-sizing: border-box;
	display: inline-block;
	min-height: 44px;
	padding-block: 0.5rem;
	padding-block: calc((44px - 1lh) / 2);
}

/* A title can wrap: a table cell is 44px at least, centres one line and grows only by its own lines (padding would add 16-20px to each). */
.read-next__item .wp-block-post-title a {
	block-size: 44px;
	display: table-cell;
	padding-block: 0;
	vertical-align: middle;
}

.read-next__item .wp-block-post-date {
	margin: 0;
}

@media (min-width: 782px) {
	.read-next__list .wp-block-post-template {
		column-gap: var(--wp--preset--spacing--haul);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Category pages: the archive column sits on the same 74rem frame as the header and the footer; the intro text keeps a readable line. */
.wp-block-term-description {
	max-width: 38rem;
}

/* No sideways page scroll on phones. */
html {
	overflow-x: clip;
}

/* Tables in articles scroll sideways inside their own box instead of being cut off; the edge shadow hints at more. */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(to right, var(--wp--preset--color--tideline) 30%, transparent) left / 1.5rem 100% no-repeat local,
		linear-gradient(to left, var(--wp--preset--color--tideline) 30%, transparent) right / 1.5rem 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgb(0 26 20 / 0.38), transparent) left / 0.75rem 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgb(0 26 20 / 0.38), transparent) right / 0.75rem 100% no-repeat scroll;
}

.wp-block-table table {
	min-width: 32rem;
}

@media (max-width: 39.99rem) {
	.wp-block-table table {
		min-width: 26rem;
	}

	.wp-block-table :is(th, td) {
		padding-inline: 0.5rem;
	}
}

/* One row layout, a quiet page title, a tidy bottom band, no bare "Updated" label. */
.date-updated:not(:has(time))::before {
	content: none;
}

.wp-block-group.dateline-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.25rem;
}

.wp-block-group.dateline-row > * {
	flex: none;
}

/* From tablet width: the date column is fixed, the headline fills, so every row starts at the same edge. */
@media (min-width: 782px) {
	.wp-block-group.dateline-row {
		grid-template-columns: 8.5rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--haul);
		align-items: start;
	}
}

.wp-block-post-featured-image .wire-ai-note {
	color: var(--wp--preset--color--waybill);
	font-family: var(--wp--preset--font-family--telex);
	font-size: var(--wp--custom--label--size);
	letter-spacing: normal;
	margin-block: 0.25rem 0;
}

.front-kicker {
	font-size: 0.875rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.band-funds .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.band-funds .wp-block-post-template > li {
	border-bottom: 1px solid var(--wp--preset--color--plimsoll);
	padding-block: 0.5rem;
}

.band-funds .wp-block-post-title {
	font-size: 1rem;
	margin: 0;
}

.band-funds .wp-block-post-date {
	margin: 0;
}

main > p.has-text-align-right:last-child {
	text-align: left;
}

.desk-nav .desk-nav {
	border: 0;
	margin: 0;
	padding: 0;
}

main > p.has-text-align-right:last-child {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	width: 100%;
}

/*
 * Phone header: one row, 64px at 390. Below 600px (where core turns the desk menu into a button) the dark top band, the brand and
 * the desk menu stop being three stacked bands: the groups step aside (display: contents) and brand, Menu button and search
 * button share one flex row on the header itself, with a single rule under it. The two small links of the top band are
 * hidden here (they stay in the footer). Controls are 40px boxes with a 44px touch area, 12px or more from the rule.
 */
@media (max-width: 37.4375rem) {
	header.wp-block-template-part {
		align-items: center;
		border-bottom: 1px solid var(--wp--preset--color--manifest);
		column-gap: var(--wp--preset--spacing--beat);
		display: flex;
		padding: 0.6875rem var(--wp--style--root--padding-right) 0.75rem var(--wp--style--root--padding-left);
	}

	header.wp-block-template-part > div,
	header.wp-block-template-part > div > .alignwide {
		display: contents;
	}

	header.wp-block-template-part .bar-links {
		display: none;
	}

	header.wp-block-template-part .galaton-brand {
		flex: 1 1 auto;
		margin: 0 !important;
		min-width: 0;
		order: 1;
	}

	header.wp-block-template-part .wp-block-site-title {
		font-size: clamp(1.125rem, 10vw - 1rem, 1.4375rem) !important;
		line-height: 1;
		margin: 0;
		overflow-wrap: anywhere;
	}

	header.wp-block-template-part .desk-nav {
		border: 0;
		margin: 0 !important;
		order: 2;
		padding: 0;
	}

	header.wp-block-template-part form.wp-block-search {
		display: flex;
		margin: 0;
		order: 3;
	}

	header.wp-block-template-part .wp-block-search__inside-wrapper {
		align-items: center;
		display: flex;
		margin: 0;
	}

	header.wp-block-template-part .wp-block-search__searchfield-hidden .wp-block-search__input {
		min-height: 0;
		padding-block: 0;
	}

	header.wp-block-template-part .wp-block-navigation__responsive-container-open,
	header.wp-block-template-part .wp-block-search__button {
		min-height: 2.5rem;
		position: relative;
	}

	header.wp-block-template-part .wp-block-search__button {
		height: 2.5rem;
		margin: 0;
		min-width: 2.5rem;
		padding: 0;
		width: 2.5rem;
	}

	/* Search field open (core removes the "-hidden" class): the form moves to its own row under brand and menu, so the brand keeps its width and the name stays on one line. */
	header.wp-block-template-part:has(form.wp-block-search:not(.wp-block-search__searchfield-hidden)) {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	header.wp-block-template-part form.wp-block-search:not(.wp-block-search__searchfield-hidden) {
		flex: 1 1 100%;
	}

	header.wp-block-template-part form.wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 100%;
	}

	header.wp-block-template-part form.wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		flex: 1 1 auto;
		min-width: 0;
	}

	header.wp-block-template-part .wp-block-navigation__responsive-container-open::before,
	header.wp-block-template-part .wp-block-search__button::before {
		content: "";
		inset: -2px;
		position: absolute;
	}
}

/* Very narrow phones: the word next to the menu icon makes way for the brand name. */
@media (max-width: 22.4375rem) {
	header.wp-block-template-part .wp-block-navigation__responsive-container-open::after {
		display: none;
	}
}

/* Touch targets: footer links, the brand and the desk menu reach 44px on phones, tablets and coarse pointers (the desk link box is 54px, as it always was: 44px content, the 4px padding and the 2px rule of core.navigation.css; the label is centred in the 52px above the rule by the padding). The brand grows by an invisible hit area so the masthead keeps its height. */
@media (max-width: 47.9375rem), (pointer: coarse) {
	.wp-block-list.footer-links a {
		box-sizing: border-box;
		display: inline-block;
		min-height: 44px;
		padding-block: 0.5rem;
		padding-block: calc((44px - 1lh) / 2);
	}

	.desk-nav .wp-block-navigation-item__content {
		box-sizing: border-box;
		display: inline-block;
		min-height: 54px;
		padding-block: 0.5rem;
		padding-block: calc((52px - 1lh) / 2);
	}

	.wp-block-site-title a {
		position: relative;
	}

	.wp-block-site-title a::before {
		content: "";
		inset: -0.5rem -0.25rem;
		position: absolute;
	}
}