/*
Theme Name: TARC — Tel Aviv Rowing Club
Theme URI: https://example.org/tarc-theme
Author: Tel Aviv Rowing Club
Description: Bilingual English/Hebrew theme for a rowing club on the Yarkon. Built to pair with the TARC Club plugin, which supplies the fleet, bookings, results archive, gallery, events and history. The club's own blue from the boathouse sign, full RTL support, light and dark.
Version: 1.5.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tarc-theme
Tags: one-column, custom-menu, translation-ready, rtl-language-support, full-width-template
*/

/* ==========================================================================
   Tokens
   Palette: the club's own blue, sampled from the boathouse sign (#0b399d),
   on a cool white with a blue bias. One colour, as the sign has one colour.
   The --tarc-color-* aliases are what the TARC Club plugin's components read.
   ========================================================================== */

:root {
	--ground: #f1f3f7;
	--surface: #ffffff;
	--surface-2: #e5e9f1;
	--ink: #101828;
	--ink-soft: #49536b;
	--ink-faint: #676f82;
	--line: #d2d8e4;
	--line-soft: #e3e7ef;
	--band: #0b399d;
	--band-2: #082e80;
	--on-band: #e7edfa;
	--on-band-soft: #afc2e9;
	--accent: #0b399d;
	--accent-ink: #0a3187;
	--accent-wash: #dee6f8;
	--accent-on: #ffffff;
	--good: #1f7a4d;
	--good-wash: #dcefe4;
	--warn: #8a6417;
	--warn-wash: #f4e8cc;
	--crit: #a32f22;
	--crit-wash: #f6dcd8;

	/* Heebo is the sign's lettering — a bold grotesque that carries Hebrew and
	   Latin at the same weight. Assistant is the quieter face for running text.
	   The label role was a monospace with no Hebrew at all, so every uppercase
	   label fell back on the Hebrew side; it is Heebo now. */
	--display: "Heebo", "Helvetica Neue", Arial, sans-serif;
	--body: "Assistant", "Segoe UI", Helvetica, Arial, sans-serif;
	--mono: "Heebo", "Helvetica Neue", Arial, sans-serif;

	--maxw: 1120px;
	--radius: 3px;

	/* Consumed by the plugin stylesheet. */
	--tarc-color-ink: var(--ink);
	--tarc-color-soft: var(--ink-soft);
	--tarc-color-faint: var(--ink-faint);
	--tarc-color-line: var(--line);
	--tarc-color-line-soft: var(--line-soft);
	--tarc-color-surface: var(--surface);
	--tarc-color-ground: var(--ground);
	--tarc-color-band: var(--band);
	--tarc-color-on-band: var(--on-band);
	--tarc-color-accent: var(--accent);
	--tarc-color-accent-ink: var(--accent-ink);
	--tarc-color-accent-wash: var(--accent-wash);
	--tarc-color-good: var(--good);
	--tarc-color-good-wash: var(--good-wash);
	--tarc-color-warn: var(--warn);
	--tarc-color-warn-wash: var(--warn-wash);
	--tarc-color-crit: var(--crit);
	--tarc-color-crit-wash: var(--crit-wash);
	--tarc-font-mono: var(--mono);
	--tarc-font-display: var(--display);
	--tarc-radius-base: var(--radius);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ground: #0a0e18;
		--surface: #121826;
		--surface-2: #1a2132;
		--ink: #e6e9f1;
		--ink-soft: #a2aabc;
		--ink-faint: #7b8399;
		--line: #232b3d;
		--line-soft: #1b2231;
		/* The band keeps the club blue unchanged — it is the one colour the
		   club actually owns, and inventing a dark variant of it would make
		   the site and the boathouse disagree. */
		--band: #0b399d;
		--band-2: #082e80;
		--on-band: #e7edfa;
		--on-band-soft: #a9bce6;
		--accent: #7fa6f2;
		--accent-ink: #94b5f6;
		--accent-wash: #13224a;
		--accent-on: #07142e;
		--good: #5fc08d;
		--good-wash: #11291e;
		--warn: #d6a945;
		--warn-wash: #2c2412;
		--crit: #e08774;
		--crit-wash: #2e1815;
	}
}

:root[data-theme="dark"] {
	--ground: #0a0e18;
	--surface: #121826;
	--surface-2: #1a2132;
	--ink: #e6e9f1;
	--ink-soft: #a2aabc;
	--ink-faint: #7b8399;
	--line: #232b3d;
	--line-soft: #1b2231;
	--band: #0b399d;
	--band-2: #082e80;
	--on-band: #e7edfa;
	--on-band-soft: #a9bce6;
	--accent: #7fa6f2;
	--accent-ink: #94b5f6;
	--accent-wash: #13224a;
	--accent-on: #07142e;
	--good: #5fc08d;
	--good-wash: #11291e;
	--warn: #d6a945;
	--warn-wash: #2c2412;
	--crit: #e08774;
	--crit-wash: #2e1815;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 999;
	background: var(--band);
	color: var(--on-band);
	padding: 10px 16px;
	border-radius: var(--radius);
	width: auto; height: auto; clip: auto;
}

.wrap {
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: 28px;
}

.section { padding-block: 92px; }
.section--tight { padding-block: 56px; }
.section[id] { scroll-margin-top: 78px; }

.section-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 44px;
	max-width: 62ch;
}
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }
.section-head p { color: var(--ink-soft); }

.eyebrow {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-ink);
}
[dir="rtl"] .eyebrow { letter-spacing: normal; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: color-mix(in srgb, var(--ground) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line-soft);
}
/* Keep the sticky header clear of the WordPress admin bar. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}

.site-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 62px;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	white-space: nowrap;
}
.site-brand svg { flex: none; color: var(--accent); }

.site-nav { margin-inline-start: auto; }
.site-nav ul {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.site-nav a {
	font-size: 14.5px;
	color: var(--ink-soft);
	text-decoration: none;
	padding-block: 4px;
	border-bottom: 1.5px solid transparent;
	transition: color .18s, border-color .18s;
}
.site-nav a:hover,
.site-nav .current-menu-item > a { color: var(--ink); border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* ==========================================================================
   Hero
   ========================================================================== */

/* The hero keeps one look in both themes: a photograph of the boathouse
   under a scrim in the club's own blue. Deliberately not theme-switched —
   the headline sits on the scrim, not on the page background. */
.hero {
	position: relative;
	background-color: var(--band);
	background-position: center 58%;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--on-band);
	overflow: hidden;
	isolation: isolate;
}

/* Default header image, shipped with the theme. Replaced by an inline style
   when the club sets its own under Appearance → Header. */
.hero--photo {
	background-image: image-set(
		url("assets/img/boathouse-1352.webp") type("image/webp"),
		url("assets/img/boathouse-1352.jpg") type("image/jpeg")
	);
}
@media (max-width: 820px) {
	.hero--photo {
		background-image: image-set(
			url("assets/img/boathouse-700.webp") type("image/webp"),
			url("assets/img/boathouse-700.jpg") type("image/jpeg")
		);
	}
}

/* Shown only when there is no header image. */
.hero canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: .55;
}

/* Scrim: darkest behind the text, clearing towards the far edge so the
   boathouse stays visible. Fixed colours, because it has to hold contrast
   over a photograph rather than over the page background. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to bottom, rgba(4, 14, 46, .30), rgba(4, 14, 46, .60)),
		linear-gradient(to right, rgba(6, 25, 74, .94) 0%, rgba(6, 25, 74, .80) 42%, rgba(6, 25, 74, .30) 100%);
}
[dir="rtl"] .hero::after {
	background:
		linear-gradient(to bottom, rgba(4, 14, 46, .30), rgba(4, 14, 46, .60)),
		linear-gradient(to left, rgba(6, 25, 74, .94) 0%, rgba(6, 25, 74, .80) 42%, rgba(6, 25, 74, .30) 100%);
}
/* Narrow screens have no room for a clear edge — even scrim instead. */
@media (max-width: 820px) {
	.hero::after,
	[dir="rtl"] .hero::after {
		background: linear-gradient(to bottom, rgba(5, 18, 58, .74), rgba(4, 14, 46, .88));
	}
}
/* The hero is dark in both themes, so everything inside it takes the light
   half of the palette rather than the page's. With the club's blue as the
   accent this matters: an accent-coloured button on the blue scrim would be
   blue on blue. White on blue is the sign's own relationship anyway. */
.hero .rule-oar::before { background: var(--on-band); }
.hero .btn--brass { background: var(--on-band); color: var(--band); }
.hero .btn--brass:hover { background: #fff; filter: none; }

.hero-inner {
	padding-block: 108px 84px;
	display: grid;
	gap: 30px;
	max-width: 46ch;
}
.hero .eyebrow { color: var(--on-band-soft); }
.hero h1 {
	font-size: clamp(42px, 7.4vw, 82px);
	font-weight: 900;
	letter-spacing: -.015em;
	line-height: 1.02;
}
.hero .lede { font-size: clamp(17px, 2.1vw, 20px); color: var(--on-band-soft); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.rule-oar { height: 1px; background: color-mix(in srgb, var(--on-band) 25%, transparent); position: relative; }
.rule-oar::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: -3px;
	width: 74px;
	height: 7px;
	background: var(--accent);
	clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%);
}

/* Buttons used outside plugin components. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--body);
	font-size: 15px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s, border-color .18s, color .18s;
}
.btn--brass { background: var(--accent); color: var(--accent-on); }
.btn--brass:hover { filter: brightness(1.07); }
.btn--onband { border-color: color-mix(in srgb, var(--on-band) 40%, transparent); color: var(--on-band); }
.btn--onband:hover { background: color-mix(in srgb, var(--on-band) 12%, transparent); }

/* ==========================================================================
   Sections
   ========================================================================== */

.band-dark { background: var(--band); color: var(--on-band); }
.band-dark .section-head p { color: var(--on-band-soft); }
.band-dark .eyebrow { color: var(--on-band-soft); }
.band-soft { background: var(--surface); border-block: 1px solid var(--line-soft); }

.stats-band { background: var(--band-2); color: var(--on-band); }
.stats-band .tarc-stats { background: color-mix(in srgb, var(--on-band) 14%, transparent); border: 0; }
.stats-band .tarc-stat { background: var(--band-2); }
.stats-band .tarc-stat b { color: var(--on-band); }
.stats-band .tarc-stat span { color: var(--on-band-soft); }

.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
.about-body { display: grid; gap: 20px; max-width: 66ch; }
.about-body p { font-size: 18px; }
.about-body blockquote {
	margin: 0;
	font-family: var(--display);
	font-size: 23px;
	line-height: 1.4;
	border-inline-start: 3px solid var(--accent);
	padding-inline-start: 20px;
}
.facts { display: grid; border-top: 1px solid var(--line); margin: 0; }
.facts > div {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	padding-block: 14px;
	border-bottom: 1px solid var(--line-soft);
	align-items: baseline;
}
.facts dt {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
[dir="rtl"] .facts dt { letter-spacing: normal; }
.facts dd { margin: 0; font-size: 15.5px; }

/* The gallery sits on the dark band, so its frames need band colours. */
.band-dark .tarc-shot {
	border-color: color-mix(in srgb, var(--on-band) 22%, transparent);
	background:
		repeating-linear-gradient(135deg,
			color-mix(in srgb, var(--on-band) 4%, transparent) 0 10px,
			transparent 10px 20px),
		var(--band-2);
}
.band-dark .tarc-shot-slot {
	color: var(--on-band-soft);
	border-color: color-mix(in srgb, var(--on-band) 22%, transparent);
}

/* Album cards on the dark gallery band take the band's colours rather than
   the plugin's light default. */
.band-dark .tarc-album {
	background: var(--band-2);
	border-color: color-mix(in srgb, var(--on-band) 22%, transparent);
	color: var(--on-band);
}
.band-dark .tarc-album:hover { border-color: var(--accent); }
.band-dark .tarc-album-meta { color: var(--on-band-soft); }
.band-dark .tarc-album-cover { background: color-mix(in srgb, var(--on-band) 8%, var(--band-2)); }
.band-dark .tarc-album-title,
.band-dark .tarc-loose-head { color: var(--on-band); }
.band-dark .tarc-album-sub { color: var(--on-band-soft); }
.band-dark .tarc-album-desc { color: var(--on-band-soft); }
.band-dark .tarc-back { color: var(--accent); }
.band-dark .tarc-forward { color: var(--accent); }

/* In dark mode the club green is darker than the page, so a "solid" button
   filled with it has no visible edge — the label reads but the control does
   not. Brass on dark carries the same weight the green does in light. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tarc-btn--solid {
		background: var(--accent);
		color: var(--accent-on);
	}
	:root:not([data-theme="light"]) .tarc-btn--solid:hover {
		filter: brightness(1.08);
		color: var(--accent-on);
	}
}
:root[data-theme="dark"] .tarc-btn--solid {
	background: var(--accent);
	color: var(--accent-on);
}
:root[data-theme="dark"] .tarc-btn--solid:hover {
	filter: brightness(1.08);
	color: var(--accent-on);
}

.band-dark .tarc-meeting {
	background: var(--band-2);
	border-color: color-mix(in srgb, var(--on-band) 22%, transparent);
	color: var(--on-band);
}
.band-dark .tarc-meeting:hover { border-color: var(--accent); background: var(--band-2); }
.band-dark .tarc-meeting-meta { color: var(--on-band-soft); }
.band-dark .tarc-meeting-thumb { background: color-mix(in srgb, var(--on-band) 8%, var(--band-2)); }
.band-dark .tarc-meeting-thumb.is-blank { border-color: color-mix(in srgb, var(--on-band) 18%, transparent); }
.band-dark .tarc-year-head {
	color: var(--on-band-soft);
	border-bottom-color: color-mix(in srgb, var(--on-band) 18%, transparent);
}

/* ==========================================================================
   Section cards on the front page
   ========================================================================== */

.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.card-link {
	position: relative;
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 24px 24px 48px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	background: var(--ground);
	color: inherit;
	text-decoration: none;
	transition: background-color .18s, border-color .18s, transform .18s;
}
.card-link:hover {
	background: var(--surface);
	border-color: var(--accent);
	transform: translateY(-2px);
}
.card-link h3 { font-size: 22px; }
.card-link p { color: var(--ink-soft); font-size: 15.5px; }

/* The arrow follows the reading direction. */
.card-link::after {
	content: "→";
	position: absolute;
	inset-block-end: 16px;
	inset-inline-end: 20px;
	font-size: 20px;
	line-height: 1;
	color: var(--accent-ink);
	transition: transform .18s;
}
[dir="rtl"] .card-link::after { content: "←"; }
.card-link:hover::after { transform: translateX(3px); }
[dir="rtl"] .card-link:hover::after { transform: translateX(-3px); }

.card-link--accent {
	background: var(--band);
	border-color: var(--band);
	color: var(--on-band);
}
.card-link--accent p { color: var(--on-band-soft); }
.card-link--accent:hover { background: var(--band-2); border-color: var(--accent); }
.card-link--accent::after { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
	.card-link, .card-link::after { transition: none; }
	.card-link:hover { transform: none; }
}

/* ==========================================================================
   Section pages
   ========================================================================== */

.page-head {
	padding-block: 60px 44px;
	border-bottom: 1px solid var(--line-soft);
}
.page-head .wrap { display: grid; gap: 12px; }
.page-head-title {
	font-size: clamp(32px, 5.2vw, 52px);
	font-weight: 900;
	letter-spacing: -.01em;
}
.page-head-intro {
	color: var(--ink-soft);
	font-size: 18px;
	max-width: 62ch;
}
.page-head.band-dark { border-bottom-color: transparent; }
.page-head.band-dark .page-head-intro { color: var(--on-band-soft); }

/* The gallery grid and the results table need the full column, not the narrow
   reading measure. Both classes are on the same element, so this has to out-
   specify the plain .entry-content rule further down the file. */
.entry-content.entry-content--wide { max-width: var(--maxw); }

/* .entry-content is a grid, and grid items refuse to shrink below their
   content by default — which let the 700px results table push the whole page
   sideways on a phone. This lets the scroll container do its job. */
.entry-content > * { min-width: 0; }

/* The section page's own section sits directly under the heading band. */
.tarc-section-page .section { padding-block: 56px 88px; }

/* On the gallery the heading band and the content share one dark ground, so
   the doubled padding between them reads as a gap rather than breathing room. */
.tarc-section-page .page-head.band-dark + .section { padding-block: 20px 88px; }

/* ==========================================================================
   Page and post content
   ========================================================================== */

.entry { padding-block: 72px; }
.entry-header { margin-bottom: 28px; }
.entry-title { font-size: clamp(30px, 5vw, 46px); }
.entry-content { max-width: 68ch; display: grid; gap: 20px; }
.entry-content h2 { font-size: 28px; margin-top: 12px; }
.entry-content h3 { font-size: 22px; }
.entry-content ul, .entry-content ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.entry-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--band-2); color: var(--on-band); padding-block: 56px 34px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-band-soft);
	font-weight: 500;
	margin: 0 0 12px;
}
[dir="rtl"] .site-footer h4 { letter-spacing: normal; }
.site-footer p, .site-footer a { font-size: 15px; }
.site-footer .col > div { display: grid; gap: 7px; }
.foot-brand { font-family: var(--display); font-size: 24px; font-weight: 900; margin-bottom: 10px; }
.foot-mark { margin-top: 18px; color: var(--on-band-soft); opacity: .7; }
.foot-mark svg { display: block; }
.foot-note {
	margin-top: 40px;
	padding-top: 18px;
	border-top: 1px solid color-mix(in srgb, var(--on-band) 16%, transparent);
	font-size: 13px;
	color: var(--on-band-soft);
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; gap: 34px; }
	.cards { grid-template-columns: repeat(2, 1fr); }
	.foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.cards { grid-template-columns: 1fr; }
	.page-head { padding-block: 40px 32px; }
	.wrap { padding-inline: 20px; }
	.section { padding-block: 62px; }
	.site-header-inner { flex-wrap: wrap; padding-block: 10px; gap: 10px 16px; }
	.site-nav { order: 3; width: 100%; margin-inline-start: 0; }
	.site-nav ul { flex-wrap: nowrap; overflow-x: auto; gap: 18px; padding-bottom: 4px; scrollbar-width: none; }
	.site-nav ul::-webkit-scrollbar { display: none; }
	.site-nav a { white-space: nowrap; }
	.header-actions { margin-inline-start: auto; }
	.section[id] { scroll-margin-top: 108px; }
	.hero-inner { padding-block: 74px 58px; }
	.foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}