/*
Theme Name: Aisle Tally
Description: Aisle Tally's own theme, a child of Twenty Twenty-Five. Weddings with the numbers done.
Author: Aisle Tally
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Tested up to: 6.8
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: aisletally
*/


/* Built from Dashboard sites/aisletally/theme/ by sites/aisletally/apply.mjs: an edit made on the server is
   overwritten. The colours and fonts are theme.json's (sites/aisletally/brand.mjs); this file holds what theme.json
   cannot say. Text colours stay on the pairs the accessibility test measures (4.5 to 1 or more): never the muted
   grey on blush. Light only: the theme has no dark scheme. */

:root {
	--at-paper: var(--wp--preset--color--base);
	--at-ink: var(--wp--preset--color--contrast);
	--at-wine: var(--wp--preset--color--accent-1);
	--at-blush: var(--wp--preset--color--accent-2);
	--at-white: var(--wp--preset--color--accent-3);
	--at-muted: var(--wp--preset--color--accent-4);
	--at-line: var(--wp--preset--color--accent-6);
	--at-mono: var(--wp--preset--font-family--spline-sans-mono);
	--at-serif: var(--wp--preset--font-family--gloock);
	--at-lift: 0 1.6rem 3rem -1.8rem rgba(43, 34, 48, 0.55);
}

/* Tables are where the numbers live: tabular figures, hairlines, a heavy rule under the head. */
.wp-block-table table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wp-block-table th,
.wp-block-table td { border: 1px solid var(--at-line); padding: 0.5em 0.75em; vertical-align: top; }
.wp-block-table thead { border-bottom: 2px solid var(--at-ink); }
.wp-block-table th { font-weight: 600; text-align: left; }
.wp-block-table figcaption { text-align: left; }

/* Photo credits sit small and quiet under each photo. */
.wp-block-image figcaption { color: var(--at-muted); font-size: 0.8rem; text-align: left; }
.wp-block-image figcaption a { color: inherit; }

/* The kicker: the category above a title, set like the Pins' kicker. */
.at-kicker { color: var(--at-wine); font-family: var(--at-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.at-kicker a { text-decoration: none; }

.at-byline { color: var(--at-muted); font-size: 0.9rem; }
.at-byline p { margin: 0; }

/* The header: the word mark and three links, on one line down to a 360px phone. */
.at-header { background: var(--at-paper); }
.at-nav a { text-decoration: none; }
.at-nav a:hover,
.at-nav a:focus-visible { color: var(--at-wine); }
@media (max-width: 480px) {
	.at-header .wp-block-site-title { font-size: 1.35rem; }
	.at-header .at-nav,
	.at-header .at-nav .wp-block-navigation__container { font-size: 0.72rem; gap: 0.85rem; }
}

/* The home's first screen and a page's title band sit right under the header's hairline, and a grid's cells line up
   at the top (WordPress's flow spacing would push every cell but the first down). */
.at-home,
.at-page { margin-block-start: 0; }
.at-hero-grid.at-hero-grid > *,
.at-method-grid.at-method-grid > *,
.at-footer-grid.at-footer-grid > *,
.at-paige-row.at-paige-row > * { margin-block: 0; }

/* The home page's first screen: the promise on paper, the photo on a blush field, the tally card over its corner. */
.at-hero { background: linear-gradient(90deg, var(--at-paper) 0 60%, var(--at-blush) 60% 100%); padding-top: clamp(2.5rem, 6vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.at-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.at-hero-text > * { margin-block: 0; }
.at-hero-title { font-size: clamp(2.55rem, 1.55rem + 3.9vw, 4.6rem); line-height: 1.02; letter-spacing: -0.015em; margin-top: 0.9rem !important; }
.at-lede { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); line-height: 1.55; margin-top: 1.4rem !important; max-width: 33em; }
.at-hero-buttons { gap: 0.75rem; margin-top: 2rem !important; }
.at-hero-buttons .wp-block-button__link { padding: 0.95em 1.35em; }
.at-hero .is-style-outline > .wp-block-button__link { border: 1.5px solid var(--at-ink); color: var(--at-ink); }
.at-hero .is-style-outline > .wp-block-button__link:hover { background: var(--at-ink); color: var(--at-paper); }
.at-hero-photo { position: relative; }
.at-hero-img { aspect-ratio: 3 / 4; box-shadow: var(--at-lift); display: block; height: auto; object-fit: cover; width: 100%; }

/* The tally card: a receipt for the site's own promises, the last line ruled like a total. */
.at-tally { background: var(--at-white); border-top: 4px solid var(--at-wine); bottom: 2.25rem; box-shadow: var(--at-lift); left: -3rem; padding: 1.05rem 1.25rem 0.75rem; position: absolute; width: min(17.5rem, 82%); }
.at-tally-head { color: var(--at-wine); font-family: var(--at-mono); font-size: 0.72rem; letter-spacing: 0.16em; margin: 0 0 0.45rem; text-transform: uppercase; }
.at-tally ul { font-size: 0.9rem; list-style: none; margin: 0; padding: 0; }
.at-tally li { border-bottom: 1px dashed var(--at-line); display: flex; gap: 1rem; justify-content: space-between; padding: 0.42rem 0; }
.at-tally li:last-child { border-bottom: 0; border-top: 2px solid var(--at-ink); margin-top: 0.2rem; }
.at-tally b { color: var(--at-wine); font-family: var(--at-mono); font-weight: 600; }

/* The three steps behind every number, on the dark band. */
.at-method { padding-top: clamp(2.75rem, 6vw, 4.25rem); padding-bottom: clamp(2.75rem, 6vw, 4.25rem); }
.at-method-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-method-step > * { margin-block: 0; }
.at-method-num { border-top: 1px solid var(--at-blush); color: var(--at-blush); font-family: var(--at-mono); font-size: 0.8rem; letter-spacing: 0.14em; padding-top: 0.9rem; }
.at-method h3 { color: var(--at-paper); font-size: 1.55rem; margin-top: 0.7rem !important; }
.at-method-step p:not(.at-method-num) { color: var(--at-line); margin-top: 0.5rem !important; }

/* A home section: a kicker, a heading, then its cards. */
.at-home > .at-section { padding-top: clamp(3.25rem, 7vw, 5.5rem); }
.at-section > .at-kicker { margin: 0; }
.at-section > h2 { margin: 0.4rem 0 clamp(1.4rem, 3vw, 2.2rem); }

/* The topics: five cards, each with a real photo from its posts. */
.at-topic-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.at-topic-grid li { display: flex; }
.at-topic-card { background: var(--at-white); border: 1px solid var(--at-line); color: var(--at-ink); display: flex; flex-direction: column; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; width: 100%; }
a.at-topic-card:hover,
a.at-topic-card:focus-visible { box-shadow: var(--at-lift); transform: translateY(-3px); }
.at-topic-card img { aspect-ratio: 3 / 4; display: block; height: auto; object-fit: cover; width: 100%; }
.at-topic-name { font-family: var(--at-serif); font-size: 1.4rem; line-height: 1.15; padding: 0.95rem 1rem 0; }
.at-topic-line { color: var(--at-muted); font-size: 0.9rem; line-height: 1.45; padding: 0.35rem 1rem 1rem; }
.at-topic-soon { align-self: flex-start; background: var(--at-blush); color: var(--at-wine); font-family: var(--at-mono); font-size: 0.66rem; letter-spacing: 0.1em; margin: auto 1rem 1rem; padding: 0.3rem 0.55rem; text-transform: uppercase; }

/* Cards on the home, archive and search pages: the photo, then the words on white. */
.at-card { background: var(--at-white); border: 1px solid var(--at-line); display: flex; flex-direction: column; height: 100%; }
.at-card .wp-block-post-featured-image { margin: 0; }
.at-card-body { padding: 1rem 1.15rem 1.3rem; }
.at-card-body > * { margin-block: 0; }
.at-card .wp-block-post-title { font-size: 1.35rem; line-height: 1.2; margin-top: 0.45rem; }
.at-card .wp-block-post-title a { color: var(--at-ink); text-decoration: none; }
.at-card .wp-block-post-title a:hover { color: var(--at-wine); }
.at-card .wp-block-post-excerpt { color: var(--at-muted); font-size: 0.95rem; margin-top: 0.5rem; }
.at-card .wp-block-post-excerpt__excerpt { margin: 0; }

/* Before the first post: what comes and when, never an empty block. */
.at-empty { background: var(--at-white); border: 1px solid var(--at-line); border-left: 4px solid var(--at-wine); max-width: 48rem; padding: 1.5rem 1.75rem; }
.at-empty > * { margin-block: 0; }
.at-empty-head { font-family: var(--at-serif); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); line-height: 1.2; }
.at-empty p:not(.at-empty-head) { margin-top: 0.6rem; }

/* Paige in one line, on blush (ink and wine only: both pass on it). */
.at-paige { margin-top: clamp(3.5rem, 8vw, 6rem) !important; padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.at-paige-row { align-items: center; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: auto minmax(0, 1fr); }
.at-monogram { background: var(--at-wine); border-radius: 50%; color: var(--at-paper); display: grid; font-family: var(--at-serif); font-size: 1.9rem; height: 5.5rem; margin: 0; place-items: center; width: 5.5rem; }
.at-paige-text > * { margin-block: 0; }
.at-paige h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); }
.at-paige p { margin-top: 0.5rem; max-width: 46rem; }
.at-paige a { color: var(--at-wine); font-weight: 600; white-space: nowrap; }

/* About, Contact and the other pages: a blush band with the title, then a readable column. */
.at-page-head { margin-bottom: clamp(2rem, 5vw, 3.25rem); padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 5vw, 3.25rem); }
.at-page-head > * { margin-block: 0; }
.at-page-head .wp-block-post-title { margin-top: 0.5rem; }
.at-page-body h2 { font-size: clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem); margin-top: 2.2em; }
.at-page-about .at-page-body > p:first-child { font-family: var(--at-serif); font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.15rem); line-height: 1.2; }
.at-page-contact .at-page-body > p:first-child { background: var(--at-white); border: 1px solid var(--at-line); border-left: 4px solid var(--at-wine); font-size: 1.05rem; padding: 1.35rem 1.6rem; }
.at-page-contact .at-page-body > p:first-child a[href^="mailto:"] { background: var(--at-ink); border-radius: 999px; color: var(--at-paper); display: inline-block; font-family: var(--at-mono); font-size: 0.95rem; margin: 0.15rem 0.1rem; padding: 0.5rem 1rem; text-decoration: none; }
.at-page-contact .at-page-body > p:first-child a[href^="mailto:"]:hover { background: var(--at-wine); }

/* The footer: the word mark and its promise, two short columns of links, the © line under a hairline. */
.at-footer a { color: var(--at-blush); text-decoration: none; }
.at-footer a:hover,
.at-footer a:focus-visible { text-decoration: underline; }
.at-footer-grid { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.at-footer-grid > * > * { margin-block: 0; }
.at-footer-mark { font-family: var(--at-serif); font-size: 1.7rem; }
.at-footer-mark a { color: var(--at-paper); }
.at-footer-brand p:not(.at-footer-mark) { color: var(--at-line); margin-top: 0.6rem; max-width: 26rem; }
.at-footer-head { color: var(--at-paper); font-family: var(--at-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.at-footer-links { display: grid; gap: 0.5rem; list-style: none; margin: 0.8rem 0 0; padding: 0; }
.at-footer-base { border-top: 1px solid var(--at-muted); gap: 0.5rem 2rem; margin-top: clamp(2rem, 5vw, 3rem) !important; padding-top: 1.25rem; }
.at-footer-base > * { margin: 0; }
.at-copyright { color: var(--at-line); font-size: 0.85rem; }

/* Tablets: two topic rows; phones: one column everywhere, the topics as rows with a small photo. */
@media (max-width: 1080px) {
	.at-topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.at-hero { background: linear-gradient(180deg, var(--at-paper) 0 64%, var(--at-blush) 64% 100%); }
	.at-hero-grid,
	.at-method-grid { grid-template-columns: minmax(0, 1fr); }
	.at-hero-img { aspect-ratio: 4 / 3; object-position: 50% 70%; }
	.at-tally { bottom: auto; left: auto; margin: -2.5rem 0 0 auto; position: relative; width: min(17.5rem, 88%); }
	.at-topic-grid { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
	.at-topic-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
	.at-topic-card img { grid-row: 1 / span 3; height: 100%; }
	.at-topic-name { font-size: 1.2rem; padding: 0.7rem 0.9rem 0; }
	.at-topic-line { font-size: 0.85rem; padding: 0.2rem 0.9rem 0.7rem; }
	.at-topic-soon { justify-self: start; margin: 0 0.9rem 0.75rem; }
	.at-empty { padding: 1.2rem 1.25rem; }
	.at-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.at-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	.at-paige-row { grid-template-columns: minmax(0, 1fr); }
	.at-monogram { font-size: 1.4rem; height: 4rem; width: 4rem; }
	.at-paige a { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.at-topic-card { transition: none; }
	a.at-topic-card:hover { transform: none; }
}