/*
Theme Name:   Around Longer
Theme URI:    https://aroundlonger.com
Description:  Brand child theme for Around Longer — health-first longevity. Ink, amber and paper, set in Figtree. Built on Twenty Twenty-Five. Almost everything lives in theme.json; this file only holds what block styles cannot express.
Author:       Jessie Gill
Author URI:   https://aroundlonger.com
Template:     twentytwentyfive
Version:      1.4.3
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  aroundlonger
Tags:         blog, one-column, block-patterns, full-site-editing, wide-blocks
*/

/* ------------------------------------------------------------------
   Only put things here that theme.json cannot do.
   Colours, fonts, spacing and block defaults are all in theme.json.
   ------------------------------------------------------------------ */

/* The horizon rule — the logo's own device, reused as a section divider */
.al-horizon {
	border: 0;
	height: 5px;
	border-radius: 3px;
	background: var(--wp--preset--color--amber);
	margin-block: var(--wp--preset--spacing--50);
}

.al-horizon--full { width: 100%; }
.al-horizon--short { width: 96px; }

/* Eyebrow label — wide-tracked uppercase, used above section headings */
.al-eyebrow {
	font-family: var(--wp--preset--font-family--figtree);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber);
	margin-bottom: 0.6em;
}

/* The Log table — real numbers, tabular figures, no decoration */
.al-log-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	font-family: var(--wp--preset--font-family--figtree);
}

.al-log-table th,
.al-log-table td {
	padding: 0.65rem 0.9rem;
	text-align: left;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}

.al-log-table th {
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent);
	border-bottom-width: 2px;
}

.al-log-table td:not(:first-child) { font-weight: 700; }

/* Directional deltas. Neither is styled as good or bad — that is the point. */
.al-delta-down { color: var(--wp--preset--color--amber); font-weight: 700; }
.al-delta-up   { color: var(--wp--preset--color--ink);   font-weight: 700; }

/* Pillar cards — hover lift, kept subtle */
.al-pillar-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.al-pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}

/* Site title fallback: if no logo image is set, style the text like the wordmark */
.wp-block-site-title a {
	font-weight: 800;
	letter-spacing: -0.028em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Skip link and focus states — visible, brand-coloured, never removed */
:where(a:focus-visible),
:where(button:focus-visible),
:where(.wp-block-button__link:focus-visible) {
	outline: 3px solid var(--wp--preset--color--amber);
	outline-offset: 3px;
}

/* Post content links: underlined by default. Do not remove — it is the
   accessible default and the audience is 44+. */
.wp-block-post-content a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* Pull quote / origin story emphasis */
.al-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	font-weight: 400;
}

/* Reduce motion for anyone who asks for it */
@media (prefers-reduced-motion: reduce) {
	.al-pillar-card { transition: none; }
	.al-pillar-card:hover { transform: none; }
}

/* Headings that are links (cards, post titles inside patterns) carry no
   underline until hover — the heading weight already signals clickability. */
.al-pillar-card :is(h2, h3, h4) a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.al-pillar-card :is(h2, h3, h4) a:hover {
	text-decoration: underline;
	color: var(--wp--preset--color--amber-deep);
}

/* Disclaimer block appended to every post */
.al-disclaimer p { margin: 0; }

/* When a Site Logo is set, the site title becomes redundant next to it — but
   it must stay in the DOM for screen readers and SEO. core/site-logo renders
   nothing at all when no logo is set, so this selector only matches when a
   logo actually exists. Remove the logo and the text title reappears. */
.wp-block-site-logo + .wp-block-site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Sticky header

   The sticky rule goes on the template-part WRAPPER, not on the header
   group inside it. A sticky element can only travel within its parent's
   box — and the wrapper is exactly the header's height, so sticking the
   inner group makes it scroll away instantly. The wrapper's parent
   (.wp-site-blocks) is the full page, which is the box we want.

   The header must also carry its own opaque background. Without one the
   dark hero scrolls underneath and the logo and menu vanish into it.
   ------------------------------------------------------------------ */
.wp-site-blocks > .wp-block-template-part:has(.al-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Logged-in users get the admin bar pushed on top; offset for it. */
.admin-bar .wp-site-blocks > .wp-block-template-part:has(.al-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * NO backdrop-filter HERE. EVER.
 *
 * A backdrop-filter (like filter and transform) makes the element a
 * containing block for every position:fixed descendant. The mobile menu
 * overlay is position:fixed, so with a backdrop-filter on this header the
 * overlay was trapped inside the 57px header box: it opened clipped to 88px,
 * showed one menu item, and the rest was unreachable.
 *
 * The header is opaque Paper anyway, so the blur was doing nothing visible.
 * Measured: with backdrop-filter the open overlay was 88px tall; without it,
 * the full 844px viewport.
 */
.al-header {
	background-color: var(--wp--preset--color--paper);
}

/* The logo and menu always sit on Paper, so they are always Ink. Never let
   a surrounding section's text colour bleed in. */
.al-header,
.al-header .wp-block-site-title a,
.al-header .wp-block-navigation {
	color: var(--wp--preset--color--ink);
}

.al-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.al-header .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--amber-deep);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ------------------------------------------------------------------
   Mobile overlay menu

   Covers the viewport, comes forward over the page, and scrolls inside
   itself if the menu ever outgrows the screen. Nobody should have to
   scroll the PAGE to reach a menu item.
   ------------------------------------------------------------------ */
/*
 * The overlay background needs this exact selector shape. Core ships
 *   .wp-block-navigation:not(.has-background)
 *     .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
 *     { background-color: #fff }
 * which is five classes of specificity. A plain
 * `.wp-block-navigation__responsive-container.is-menu-open` loses to it and
 * the overlay stays white with Paper-coloured text on it — invisible.
 * Mirroring core's shape and adding the .al-header ancestor wins cleanly,
 * without reaching for !important.
 */
.al-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay),
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);

	/* Cover everything, including the sticky header and the admin bar. */
	position: fixed;
	inset: 0;
	z-index: 100001;

	/* Long menus scroll within the overlay, not the document behind it. */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
	padding-top: var(--wp--preset--spacing--50);
}

/* Big, well-spaced tap targets — the audience is 44+ and this is a phone. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: 1.35rem;
	font-weight: 700;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding-block: 0.55rem;
	min-height: 44px;
}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
	color: var(--wp--preset--color--amber-light);
}

/* The close button has to be findable without hunting for it. */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
	width: 44px;
	height: 44px;
}

.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }

/* Core already sets overflow:hidden on <html> while the overlay is open —
   verified — so there is nothing to add here for scroll locking. */

/* Anchor links must not hide under the sticky header. */
:root { scroll-padding-top: 5rem; }

/* ==================================================================
   THE LOG — v1.1
   Stat strip, sparkline, year grid, Year in Review, year archive.

   All of it is driven by the metric registry in inc/log-metrics.php.
   Nothing below names an individual metric, and nothing counts columns —
   that is what makes adding a tile a one-line change.
   ================================================================== */

/* ---- Weekly stat strip -------------------------------------------
   auto-fit, not a fixed column count. Four tiles, five tiles or nine
   tiles all lay out correctly with no change here. */
.al-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-block: var(--wp--preset--spacing--40);
}

.al-tile {
	background-color: var(--wp--preset--color--paper-shade);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 14px 16px;
}

.al-tile-label {
	display: block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.al-tile-value {
	display: block;
	font-size: 1.65rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

.al-tile-value small {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
}

/* A status tile carries words, not a number — drop it to reading size. */
.al-tile-value .al-tile-status {
	font-size: 1.05rem;
	line-height: 1.35;
	display: inline-block;
	padding-top: 4px;
}

.al-tile-delta {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

/* Direction, not judgement. The accent marks the way a metric is heading;
   neither colour means "good". */
.al-delta--accent { color: var(--wp--preset--color--amber-deep); }
.al-delta--plain  { color: var(--wp--preset--color--ink); }
.al-delta--flat   { color: var(--wp--preset--color--ink-muted); font-weight: 400; }

.al-tile-badge {
	display: inline-block;
	margin-top: 7px;
	padding: 3px 9px;
	border-radius: 99px;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Sparkline --------------------------------------------------- */
.al-spark {
	background-color: var(--wp--preset--color--paper-shade);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.al-spark-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}

.al-spark svg { display: block; }

/* ---- Year grid ---------------------------------------------------
   Four rows of thirteen — one row per quarter, so the labels down the
   side actually mean something. */
.al-year { margin-block: var(--wp--preset--spacing--50); }

.al-year-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.al-year-label { margin: 0; font-size: 1.5rem; }

.al-year-stat {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

.al-grid {
	display: grid;
	grid-template-columns: 5.2rem 1fr;
	gap: 6px 12px;
	align-items: center;
}

.al-qlabel {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	text-align: right;
}

.al-qrow {
	display: grid;
	grid-template-columns: repeat(13, 1fr);
	gap: 6px;
}

.al-cell {
	display: block;
	aspect-ratio: 1;
	border-radius: 3px;
}

.al-cell--hit  { background-color: var(--wp--preset--color--amber); }
.al-cell--miss { background-color: var(--wp--preset--color--amber); opacity: 0.42; }
.al-cell--none { background-color: transparent; border: 1.5px solid var(--wp--preset--color--hairline); }
.al-cell--fut  { background-color: color-mix(in srgb, var(--wp--preset--color--hairline) 55%, var(--wp--preset--color--paper)); }
/* Spacer that keeps a 53-week year rectangular. Not a week — never styled. */
.al-cell--pad  { background: none; border: 0; }

.al-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	margin-top: 14px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--ink-muted);
}

.al-legend span { display: flex; align-items: center; gap: 7px; }
.al-legend .al-cell { width: 12px; height: 12px; aspect-ratio: auto; flex: 0 0 12px; }

/* ---- Year in Review card ----------------------------------------- */
.al-yir {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: 12px;
	padding: 28px 30px;
	margin-block: var(--wp--preset--spacing--50);
}

.al-yir .al-eyebrow { color: var(--wp--preset--color--amber-light); margin-top: 0; }
.al-yir h3 { font-size: 1.85rem; margin: 6px 0 20px; color: var(--wp--preset--color--paper); }

.al-yir-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 20px 14px;
}

.al-yir-grid .al-tile-label { color: color-mix(in srgb, var(--wp--preset--color--paper) 62%, transparent); }
.al-yir-grid .al-tile-value { color: var(--wp--preset--color--paper); }
.al-yir-grid .al-tile-value small { color: color-mix(in srgb, var(--wp--preset--color--paper) 55%, transparent); }
.al-yir-grid .al-tile-delta { color: var(--wp--preset--color--amber-light); }

/* ---- Year-grouped archive ---------------------------------------- */
.al-yearnav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--wp--preset--spacing--40);
}

.al-yearnav a {
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 6px 15px;
	border-radius: 99px;
	border: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.al-yearnav a:hover { color: var(--wp--preset--color--amber-deep); }

.al-yearnav a.is-on {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.al-archive-year { font-size: 1.5rem; margin: var(--wp--preset--spacing--60) 0 0; }

.al-ysum {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding: 12px 0 14px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	font-size: 0.82rem;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

.al-ysum b { color: var(--wp--preset--color--ink); font-weight: 800; }
.al-ysum b small { font-weight: 700; color: var(--wp--preset--color--ink-muted); }

.al-entries { list-style: none; margin: 0; padding: 0; }

.al-entry-row {
	display: grid;
	grid-template-columns: 5.2rem 1fr auto;
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.al-entry-week {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber-deep);
}

.al-entry-title {
	display: block;
	font-weight: 700;
	font-size: 1.02rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.al-entry-title:hover { text-decoration: underline; text-underline-offset: 0.18em; }

.al-entry-excerpt {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 2px;
}

.al-entry-number {
	font-size: 0.85rem;
	font-weight: 800;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.al-entry-number small { font-weight: 700; color: var(--wp--preset--color--ink-muted); }

/* ---- Small screens -----------------------------------------------
   Tiles get a smaller minimum so two still fit side by side rather than
   stacking into a column of nine. */
@media (max-width: 640px) {
	.al-strip { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
	.al-tile { padding: 11px 12px; }
	.al-tile-value { font-size: 1.3rem; }
	.al-grid { grid-template-columns: 3.4rem 1fr; gap: 5px 8px; }
	.al-qlabel { font-size: 0.55rem; letter-spacing: 0.05em; }
	.al-qrow { gap: 4px; }
	.al-yir { padding: 22px 20px; }
	.al-entry-row { grid-template-columns: 1fr auto; }
	.al-entry-week { grid-column: 1 / -1; }
}

/* ==================================================================
   THE STANDING RECORD — "Where things stand" (v1.2)

   Everything rendered here comes from ONE option, edited at
   Settings > Around Longer. Nothing about it is typed into a page.
   ================================================================== */
.al-record {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 12px;
	overflow: hidden;
	margin-block: var(--wp--preset--spacing--50);
}

.al-record-head {
	background-color: var(--wp--preset--color--paper-shade);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding: 14px 20px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

.al-record-head h2 { margin: 0; font-size: 1.2rem; }

/* The date stamp is what makes this a record rather than an assertion.
   It is set automatically when the settings change — never by hand. */
.al-record-stamp {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.al-record-table { width: 100%; border-collapse: collapse; }

.al-record-table th {
	width: 10.5rem;
	text-align: left;
	vertical-align: top;
	padding: 13px 20px;
	background-color: color-mix(in srgb, var(--wp--preset--color--paper-shade) 45%, var(--wp--preset--color--paper));
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.al-record-table td {
	padding: 13px 20px;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	font-size: 0.95rem;
}

.al-record-table tr:last-child th,
.al-record-table tr:last-child td { border-bottom: 0; }

.al-status-list { margin: 0; padding-left: 1.1rem; }
.al-status-list li { margin: 3px 0; }

.al-pill {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 9px;
	border-radius: 99px;
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	vertical-align: 0.1em;
}

/* Active is the one worth flagging. Resolved is deliberately quiet — kept as a
   record of what was got past, not as something still demanding attention. */
.al-pill--active   { background-color: var(--wp--preset--color--amber); color: var(--wp--preset--color--ink); }
.al-pill--managed  { background-color: var(--wp--preset--color--hairline); color: var(--wp--preset--color--ink); }
.al-pill--resolved { background-color: transparent; color: var(--wp--preset--color--ink-muted); box-shadow: inset 0 0 0 1px var(--wp--preset--color--hairline); }

.al-record--empty { padding: 18px 20px; }
.al-record--empty p { margin: 0; color: var(--wp--preset--color--ink-muted); }

/* Since-start line on a Log tile. Smaller than the weekly delta on purpose:
   the week is the news, the baseline is the context. */
.al-tile-since {
	display: block;
	margin-top: 1px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* ==================================================================
   THE EXERCISE LIBRARY (v1.2)
   ================================================================== */
.al-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block: var(--wp--preset--spacing--30);
}

.al-chip {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 5px 14px;
	border-radius: 99px;
	border: 1px solid var(--wp--preset--color--hairline);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
}

.al-chip:hover { color: var(--wp--preset--color--amber-deep); }

.al-chip.is-on {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.al-chips--filter { margin-bottom: var(--wp--preset--spacing--50); }

.al-ex-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.al-ex-card {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--wp--preset--color--paper);
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.al-ex-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}

/* 4:5 portrait — the shape a phone shoots in, so the photos need no cropping. */
.al-ex-media {
	display: block;
	text-decoration: none;
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--paper-shade);
	overflow: hidden;
}

.al-ex-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.al-ex-nophoto {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.al-ex-body { padding: 16px 18px 18px; }
.al-ex-title { margin: 0; font-size: 1.05rem; }
.al-ex-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.al-ex-title a:hover { text-decoration: underline; color: var(--wp--preset--color--amber-deep); }

.al-ex-excerpt {
	margin: 6px 0 0;
	font-size: 0.86rem;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
}

.al-ex-tags {
	margin: 10px 0 0;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber-deep);
}

.al-ex-steps {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.al-ex-step {
	background-color: var(--wp--preset--color--paper-shade);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 18px 20px;
}

.al-ex-step-label {
	margin: 0 0 6px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber-deep);
}

.al-ex-step p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.al-ex-card { transition: none; }
	.al-ex-card:hover { transform: none; }
}

@media (max-width: 640px) {
	.al-record-table th {
		width: auto;
		display: block;
		border-bottom: 0;
		padding-bottom: 0;
		background: none;
	}
	.al-record-table td { display: block; padding-top: 4px; }
	.al-ex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.al-ex-body { padding: 12px 13px 14px; }
}

/* ------------------------------------------------------------------
   Training history and the "since" note on the standing record (v1.3)
   ------------------------------------------------------------------ */

/* Superseded phases. Quieter than the current one, but present — the point of
   the row is that the plan changed, not that it used to be wrong. */
.al-status-list--past {
	margin-top: 8px;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-muted);
}

.al-status-list--past li { margin: 2px 0; }

.al-since {
	display: block;
	margin-top: 4px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* Settings screen: a training row reads as a sentence, so it needs inline
   labels between the fields rather than a column header. */
.al-row-label {
	font-size: 12px;
	color: #646970;
	white-space: nowrap;
}

.al-history-label {
	margin: 14px 0 0;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* ==================================================================
   FIX — pillar card text on small screens (v1.4.0)

   The pillar blurbs are ~245 characters. At four cards on a phone that
   is six lines each and a wall of prose, and the card stops reading as
   a card. Clamp to three lines on narrow screens; the full text still
   lives on the pillar's own archive page, which is where someone who
   wants it is going anyway.

   overflow-wrap guards the other failure: one long unbroken token
   (a URL, a hyphen-free compound) pushing the card wider than the screen.
   ================================================================== */
.al-pillar-card p {
	overflow-wrap: anywhere;
	hyphens: auto;
}

@media (max-width: 782px) {
	.al-pillar-card p {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
}

/* One card per row on a phone means the title and the text can sit
   tighter without crowding. */
@media (max-width: 600px) {
	.al-pillar-card {
		padding: var(--wp--preset--spacing--30) !important;
	}
	.al-pillar-card :is(h2, h3, h4) { margin-bottom: 0.35rem; }
}

/* ==================================================================
   RECIPES (v1.4.0)

   Cards and filters reuse the exercise library styles — same shape,
   same grid, so the two collections read as one system. Only the
   recipe-specific parts are below.
   ================================================================== */

/* Serves + macros. Same tiles as The Log, tightened: these are facts to
   glance at, not a dashboard. */
.al-strip--macros {
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	margin-bottom: 0.5rem;
}

.al-strip--macros .al-tile-value { font-size: 1.3rem; }

.al-macro-note {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

/* Macros with no serving count are ambiguous, so say so rather than
   letting the reader assume. */
.al-macro-note--warn { color: var(--wp--preset--color--amber-deep); }

.al-rx-body {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}

.al-rx-block {
	background-color: var(--wp--preset--color--paper-shade);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 10px;
	padding: 20px 22px;
}

.al-rx-heading {
	margin: 0 0 10px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--amber-deep);
}

.al-rx-ingredients { margin: 0; padding-left: 1.15rem; }
.al-rx-ingredients li { margin: 4px 0; }

.al-rx-method { margin: 0; padding-left: 1.35rem; }
.al-rx-method li { margin: 8px 0; padding-left: 0.25rem; }
.al-rx-method li::marker {
	font-weight: 800;
	color: var(--wp--preset--color--amber-deep);
}

@media (max-width: 640px) {
	.al-strip--macros { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
	.al-strip--macros .al-tile-value { font-size: 1.1rem; }
	.al-rx-block { padding: 16px 17px; }
}

/* A quiet caveat under a value in the standing record. Used by the BMI row:
   the number needs context, but the context must not shout over it. */
.al-record-table .al-note {
	display: block;
	margin-top: 6px;
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted);
}