/*
Theme Name:   WTIT Child
Theme URI:    https://whattimeisthe.com/
Description:  Child theme of Kadence for WhatTimeIsThe. Departure-board style for event start times: ink blue, signal yellow, tabular figures.
Author:       WTIT Time Desk
Template:     kadence
Version:      1.0.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  wtit-child
*/

/* ---------- 1. Tokens ---------- */
html:root {
	/* Kadence global palette (html:root beats Kadence's inline :root) */
	--global-palette1: #1d5bd8; /* links, buttons */
	--global-palette2: #12284a; /* hover, ink */
	--global-palette3: #0f1a2c; /* headings */
	--global-palette4: #1b2430; /* body text */
	--global-palette5: #4a5565;
	--global-palette6: #6b7685;
	--global-palette7: #dde3ea; /* borders */
	--global-palette8: #f2f5f9; /* soft surface */
	--global-palette9: #ffffff;

	--wtit-ink: #12284a;
	--wtit-signal: #f5b700;
	--wtit-signal-soft: #fff6d6;
	--wtit-line: #dde3ea;
	--wtit-surface: #f2f5f9;
	--wtit-text: #1b2430;
	--wtit-muted: #5b6675;

	--wtit-font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--wtit-font-body: "Public Sans", "Segoe UI", Roboto, Arial, sans-serif;
	--wtit-radius: 6px;
}

/* ---------- 2. Type ---------- */
body {
	font-family: var(--wtit-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wtit-text);
	font-variant-numeric: lining-nums;
}

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--wtit-font-head);
	font-weight: 700;
	letter-spacing: -0.012em;
	color: var(--global-palette3);
	text-transform: none;
}

h1, .entry-hero h1, .entry-title { font-size: clamp(1.85rem, 1.35rem + 2vw, 2.6rem); line-height: 1.15; }
.entry-content h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem); line-height: 1.25; margin-top: 2.2em; }
.entry-content h3 { font-size: 1.2rem; line-height: 1.3; }

.entry-content p,
.entry-content li { max-width: 72ch; }

a { text-underline-offset: 0.18em; }

/* Times always line up */
table, .wtit-time, time { font-variant-numeric: tabular-nums; }

/* ---------- 3. The answer line (signature) ----------
   First paragraph of every post is the direct answer.
   It sits on a signal-yellow bar, like a departure board row. */
.single-post .entry-content > p:first-child,
.wtit-answer {
	position: relative;
	margin: 0 0 1.6em;
	padding: 1.05em 1.2em 1.05em 1.35em;
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--wtit-ink);
	background: var(--wtit-signal-soft);
	border-left: 6px solid var(--wtit-signal);
	border-radius: 0 var(--wtit-radius) var(--wtit-radius) 0;
	max-width: none;
}
.single-post .entry-content > p:first-child strong,
.wtit-answer strong { color: var(--wtit-ink); font-weight: 700; }

/* Big time tile for future plugin output: <span class="wtit-clock">6:00 PM ET</span> */
.wtit-clock {
	display: inline-block;
	padding: 0.15em 0.45em;
	font-family: var(--wtit-font-head);
	font-weight: 800;
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
	line-height: 1.1;
	color: var(--wtit-signal);
	background: var(--wtit-ink);
	border-radius: var(--wtit-radius);
	font-variant-numeric: tabular-nums;
}

/* ---------- 4. Time zone tables ---------- */
.entry-content .wp-block-table {
	margin: 1.4em 0 2em;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wtit-line);
	font-size: 0.98rem;
}
.entry-content .wp-block-table thead th {
	background: var(--wtit-ink);
	color: #fff;
	font-family: var(--wtit-font-head);
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
	border: 0;
	padding: 0.7em 0.9em;
}
.entry-content .wp-block-table thead { border-bottom: 3px solid var(--wtit-signal); }
.entry-content .wp-block-table td {
	padding: 0.65em 0.9em;
	border: 0;
	border-top: 1px solid var(--wtit-line);
	text-align: left;
}
.entry-content .wp-block-table tbody tr:nth-child(even) td { background: var(--wtit-surface); }
.entry-content .wp-block-table td:first-child { font-weight: 600; color: var(--wtit-ink); }

/* ---------- 5. Buttons ---------- */
.wp-block-button__link,
.button, button, input[type="submit"] {
	border-radius: var(--wtit-radius);
	font-family: var(--wtit-font-head);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- 6. Rank Math FAQ ---------- */
.rank-math-faq-item {
	border: 1px solid var(--wtit-line);
	border-radius: var(--wtit-radius);
	padding: 1em 1.2em;
	margin-bottom: 0.75em;
	background: #fff;
}
.rank-math-faq-item .rank-math-question {
	margin: 0 0 0.35em;
	font-size: 1.08rem;
	color: var(--wtit-ink);
}
.rank-math-faq-item .rank-math-answer { color: var(--wtit-text); }
.rank-math-faq-item .rank-math-answer p:last-child { margin-bottom: 0; }

/* ---------- 7. Small print ---------- */
.entry-content .has-small-font-size { color: var(--wtit-muted); }

/* ---------- 8. Accessibility ---------- */
:focus-visible {
	outline: 3px solid var(--wtit-signal);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 9. Mobile ---------- */
@media (max-width: 600px) {
	body { font-size: 1rem; }
	.single-post .entry-content > p:first-child,
	.wtit-answer { font-size: 1.05rem; padding: 0.9em 1em; }
	.entry-content .wp-block-table td,
	.entry-content .wp-block-table thead th { padding: 0.55em 0.65em; }
}