/*
Theme Name: Table and Type
Theme URI: https://tailthemes.com/wordpress/table-and-type
Author: Tailthemes
Author URI: https://tailthemes.com
Description: A restaurant and café block theme that keeps the menu current and the next guest action obvious.
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: table-and-type
Tags: full-site-editing, block-patterns, block-styles, style-variations, wide-blocks, editor-style, translation-ready, rtl-language-support
*/

/*
 * This theme's own CSS. Design decisions live in theme.json; shared rules live in
 * assets/css/core.css, which comes from reefthemes core. Every value here references a token.
 */

/*
 * Aliases. core.css names the two non-preset tokens generically so one stylesheet serves every
 * product; assets/css/color-scheme.css is where this theme's copies live, and this is the seam
 * between them. A theme that ships core.css owes these three lines.
 */
:root {
	--reef-texture-ink: var(--table-and-type-texture-ink);
	--reef-texture-ink-card: var(--table-and-type-texture-ink-card);
	--reef-shadow-color: var(--table-and-type-shadow-color);
}

/*
 * The theme's only shadow. A slip is a sheet of paper resting on a card: one contact shadow
 * tight under the edge and one soft spread, both in a restrained near-neutral ink, judged after
 * compositing. In dark mode the slip's own lightness step against the card carries the lift, so
 * the ink drops to near-black and the spread does almost nothing.
 */
.reef-slip {
	box-shadow:
		0 1px 1px color-mix(in oklab, var(--reef-shadow-color) 22%, transparent),
		0 10px 18px -8px color-mix(in oklab, var(--reef-shadow-color) 34%, transparent);
}

/* The wordmark is italic; the footer's copy of it is a printed heading and is not. theme.json
   gives every core/site-title the italic display face, which is right for the bar and wrong at
   the bottom of the page. */
.reef-footer__brand,
.reef-footer__brand a {
	font-style: normal;
}

/*
 * A name is a name wherever it stands — a card's title, a service or a form field in the left
 * column of a record — and this theme sets a name in the italic of its display face. It is
 * stated once, on the vocabulary's own classes, so a theme's static card and a module's rendered
 * card are the same object; core.css owns the face, the size, the weight and the tracking, and
 * only the slant is the product's.
 */
.reef-card__title,
.reef-fact-row--service .reef-fact-row__label {
	font-style: italic;
}

/* == sections == */
/* Section patterns add their refinements here. Everything above is the shell. */

/* -- measures and geometry the /menu and /book sections share -- */
/*
 * Three measures the token set has no scale for, in the unit a measure is stated in. core.css
 * declares --reef-measure (62ch) for a disclosure's prose; these are the head's and the record's.
 */
:root {
	--tat-measure-head: 46ch;
	/* The lead paragraph of a band whose head is a column rather than a page's own: four
	   characters wider, which is what keeps "not on a schedule" on the first line. */
	--tat-measure-lead: 50ch;
	--tat-measure-record: 65ch;
	--tat-index-number: 1.5rem;
}

.tat-measure-head {
	max-inline-size: var(--tat-measure-head);
	min-inline-size: 0;
}

.tat-measure-lead {
	max-inline-size: var(--tat-measure-lead);
	min-inline-size: 0;
}

.tat-measure-record {
	max-inline-size: var(--tat-measure-record);
}

/* -- menu-index -- */

/*
 * The numbered contents page. Below sm a row is two lines — the name over its own figures,
 * because one line of four columns at 335px squeezed a service name into two lines and its hours
 * into four. From sm the four parts become columns of one row, with no second markup.
 */
.tat-index {
	border-top: var(--reef-hairline) solid var(--wp--preset--color--border);
}

.tat-index__row {
	border-bottom: var(--reef-hairline) solid var(--wp--preset--color--border);
	column-gap: var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: var(--tat-index-number) minmax(0, 1fr) auto;
	padding-block: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--20);
}

.tat-index__row:last-child {
	border-bottom: 0;
}

.tat-index__row > .tat-index__body {
	grid-column: 2 / -1;
}

.tat-index__row > .tat-index__count {
	grid-column: 2;
}

.tat-index__row > .tat-index__marker {
	grid-column: 3;
	justify-self: end;
}

@media (min-width: 40rem) {
	.tat-index__row {
		align-items: baseline;
		column-gap: var(--wp--preset--spacing--50);
		grid-template-columns: var(--tat-index-number) minmax(0, 1fr) 9rem 8rem;
	}

	.tat-index__row > .tat-index__body,
	.tat-index__row > .tat-index__count,
	.tat-index__row > .tat-index__marker {
		grid-column: auto;
	}

	.tat-index__row > .tat-index__count,
	.tat-index__row > .tat-index__marker {
		justify-self: stretch;
		text-align: right;
	}
}

.tat-index__number,
.tat-index__body > p,
.tat-index__count > p {
	margin: 0;
}

/* The service's name is the row's accessible name; the underline arrives with the pointer. */
.tat-index__name a {
	color: inherit;
	text-decoration-color: transparent;
}

.tat-index__row:hover .tat-index__name a,
.tat-index__name a:hover {
	text-decoration-color: var(--wp--custom--color--link);
}

.tat-index__marker {
	display: flex;
	justify-content: flex-end;
}

.tat-index__marker > p {
	margin: 0;
}

/* -- token-sheet -- */

.tat-swatch > p {
	margin: 0;
}

.tat-swatch__chip {
	border-radius: var(--wp--preset--border-radius--card);
}

.tat-ladder__rung {
	border-bottom: var(--reef-hairline) solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}

.tat-ladder__rung:last-child {
	border-bottom: 0;
}

.tat-ladder__rung > p {
	margin: 0;
	min-inline-size: 0;
}

/* -- on-the-grinder, visit-strip -- */

/*
 * A term-and-definition row: the label column at a stated width, the definition keeping the
 * measure. The rule above it, its padding and its gaps are the block's own; only the baseline
 * and the two widths need saying, because no block control reaches them.
 */
.tat-entry {
	align-items: baseline;
}

.tat-entry__term {
	flex: 0 0 auto;
	min-inline-size: 6rem;
}

.tat-entry__def {
	flex: 1 1 0;
	min-inline-size: 0;
}

/*
 * core/columns breaks its columns at 782px; both of these bands keep the plate beside its list
 * only from lg, as the design source does. Core writes the column widths inline, so the override
 * has to be as loud as they are.
 */
@media (max-width: 63.99rem) {
	.wp-block-columns.tat-split {
		flex-wrap: wrap;
	}

	.wp-block-columns.tat-split > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* The destination, printed beside the press: a link whose target is a mystery is a link nobody
   follows on a phone. It is typed rather than spoken, so it takes the mono face. */
.tat-host {
	color: var(--wp--preset--color--muted-foreground);
	font-family: var(--wp--preset--font-family--mono);
}

/* == end of sections == */