/*
Theme Name: whentick
Theme URI: https://whentick.xyz/
Description: Child theme of Blocksy carrying the whentick brand and the single page skeleton every URL uses.
Author: whentick
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: whentick
*/

:root {
	--wt-ink: #17130F;
	--wt-amber: #D9791A;
	--wt-paper: #FFFFFF;
	--wt-dark: #12100D;

	--wt-ink-70: #55504B;
	--wt-ink-45: #8A8580;
	--wt-rule: #E4E0DC;
	--wt-surface: #FAF8F6;

	--wt-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--wt-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--wt-measure: 68ch;
	--wt-gap: 1.5rem;
}

/* ---- Blocksy palette ----
   The theme still carried its factory blue (#2872fa plus a cool grey scale),
   which is where the blue buttons, focus rings, links and page background all
   came from. Remapping the source variables fixes every surface at once,
   including the header search modal. Qualified with html because Blocksy
   prints its own :root block after this stylesheet. */

html:root {
	--theme-palette-color-1: #D9791A;
	--theme-palette-color-2: #C46B14;
	--theme-palette-color-3: #17130F;
	--theme-palette-color-4: #12100D;
	--theme-palette-color-5: #E4E0DC;
	--theme-palette-color-6: #F1EDE9;
	--theme-palette-color-7: #FAF8F6;

	--wp--preset--color--palette-color-1: #D9791A;
	--wp--preset--color--palette-color-2: #C46B14;
	--wp--preset--color--palette-color-3: #17130F;
	--wp--preset--color--palette-color-4: #12100D;
	--wp--preset--color--palette-color-5: #E4E0DC;
	--wp--preset--color--palette-color-6: #F1EDE9;
	--wp--preset--color--palette-color-7: #FAF8F6;

	--theme-text-color: #17130F;
	--theme-headings-color: #17130F;
	--theme-border-color: #E4E0DC;

	/* Links stay ink: the amber is 3.13:1 on white and cannot carry text. */
	--theme-link-initial-color: #17130F;
	--theme-link-hover-color: #12100D;

	/* Blocksy prints white button text, so the fill has to be ink, not amber. */
	--theme-button-background-initial-color: #17130F;
	--theme-button-background-hover-color: #332C25;

	--theme-form-field-border-initial-color: #E4E0DC;
	--theme-form-field-border-focus-color: #D9791A;
	--theme-form-selection-field-initial-color: #E4E0DC;
	--theme-form-selection-field-active-color: #D9791A;

	--theme-selection-background-color: #17130F;
}

/* ---- Base ---- */

body {
	font-family: var(--wt-body);
	color: var(--wt-ink);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--wt-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wt-ink);
}

h1, .entry-title { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem); margin-top: 2.5rem; }
h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); margin-top: 1.75rem; }

.entry-content p,
.entry-content ul,
.entry-content ol { max-width: var(--wt-measure); }

/* Body links: ink text with an amber underline. The brand amber is 3.13:1 on
   white, which fails the 4.5:1 text minimum, so it never carries text here. */
.entry-content a:not(.wt-btn) {
	color: var(--wt-ink);
	text-decoration: underline;
	text-decoration-color: var(--wt-amber);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.entry-content a:not(.wt-btn):hover {
	text-decoration-thickness: 3px;
}

:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wt-amber);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- The answer, the reason every page exists ---- */

.wt-answer {
	font-family: var(--wt-display);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
	line-height: 1.35;
	font-weight: 700;
	margin: 1.5rem 0 2rem;
	padding: 1rem 0 1rem 1.25rem;
	border-left: 4px solid var(--wt-amber);
	max-width: var(--wt-measure);
}
.wt-answer strong { color: var(--wt-ink); }

/* ---- Facts table ---- */

.wt-facts { margin: 2rem 0; }
.wt-facts table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
}
.wt-facts th,
.entry-content th {
	text-align: left;
	font-weight: 600;
	background: var(--wt-surface);
	border-bottom: 2px solid var(--wt-ink);
	padding: 0.65rem 0.75rem;
	white-space: nowrap;
}
.wt-facts td,
.entry-content td {
	padding: 0.65rem 0.75rem;
	border-bottom: 1px solid var(--wt-rule);
	vertical-align: top;
}
.wt-facts tbody tr:nth-child(even) td { background: var(--wt-surface); }

/* Time-zone tables run wide; scroll the table, never the page. */
.wt-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-inline: calc(var(--wt-gap) * -1);
	padding-inline: var(--wt-gap);
}

/* ---- Live block: countdown or tool ---- */

.wt-live {
	background: var(--wt-dark);
	color: var(--wt-paper);
	border-radius: 10px;
	padding: 1.5rem 1.25rem;
	margin: 2rem 0;
	text-align: center;
}
.wt-live__label {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wt-amber);
	font-weight: 600;
	margin-bottom: 0.75rem;
}
.wt-countdown {
	display: flex;
	justify-content: center;
	gap: clamp(0.75rem, 3vw, 2rem);
	font-variant-numeric: tabular-nums;
}
.wt-countdown__unit { min-width: 3.5rem; }
.wt-countdown__n {
	font-family: var(--wt-display);
	font-weight: 700;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
	line-height: 1;
	display: block;
	/* Reserve the digits' box so the ticking clock never shifts layout. */
	min-height: 1em;
}
/* Swapped in by the script the moment the target passes, so a page served from
   the full-page cache never shows a frozen row of zeros. */
.wt-live__passed {
	display: none;
	margin: 0;
	font-weight: 600;
	color: var(--wt-amber);
}
.wt-live.is-passed .wt-countdown { display: none; }
.wt-live.is-passed .wt-live__passed { display: block; }

.wt-countdown__u {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wt-ink-45);
	margin-top: 0.4rem;
	display: block;
}

/* ---- FAQ ---- */

.wt-faq { margin: 2.5rem 0; max-width: var(--wt-measure); }
.wt-faq details {
	border-bottom: 1px solid var(--wt-rule);
	padding: 0.9rem 0;
}
.wt-faq summary {
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	/* 44px minimum touch target. */
	min-height: 44px;
	align-items: center;
}
.wt-faq summary::-webkit-details-marker { display: none; }
.wt-faq summary::after {
	content: "+";
	font-family: var(--wt-display);
	color: var(--wt-amber);
	font-size: 1.5rem;
	line-height: 1;
	flex: none;
}
.wt-faq details[open] summary::after { content: "\2212"; }

/* ---- Provenance: sources and the checked date ---- */

.wt-sources {
	margin: 2.5rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wt-rule);
	font-size: 0.875rem;
	color: var(--wt-ink-70);
	max-width: var(--wt-measure);
}
.wt-sources h2 {
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	color: var(--wt-ink-70);
}
.wt-checked {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wt-ink-70);
	margin-top: 0.75rem;
}
.wt-checked::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wt-amber);
	flex: none;
}

/* ---- Ad slots ----
   Heights are reserved so Auto ads cannot push content and blow the CLS budget
   (target < 0.05). The rule and spacing keep ads visually separate from the
   article, which AdSense policy requires. */

.wt-ad {
	margin: 2.5rem 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wt-rule);
	min-height: 280px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
@media (min-width: 768px) {
	.wt-ad { min-height: 250px; }
}

/* ---- Buttons ---- */

.wt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.7rem 1.25rem;
	background: var(--wt-amber);
	color: var(--wt-ink);
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none;
	border: none;
}
.wt-btn:hover { background: #C46B14; }

/* ---- Card grid (hubs and the home list) ---- */

.wt-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 600px) { .wt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .wt-grid { grid-template-columns: repeat(3, 1fr); } }

.wt-card {
	border: 1px solid var(--wt-rule);
	border-radius: 8px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.wt-card__meta {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wt-ink-45);
	font-variant-numeric: tabular-nums;
}
.wt-card__title {
	font-family: var(--wt-display);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
	margin: 0;
}
.wt-card__title a { color: var(--wt-ink); text-decoration: none; }
.wt-card__title a:hover { text-decoration: underline; text-decoration-color: var(--wt-amber); text-decoration-thickness: 2px; }
.wt-card:hover { border-color: var(--wt-ink-45); }

/* ---- Header ---- */

/* Blocksy emits an inline customizer rule at specificity 0,3,0:
   [data-header*="type-1"] .ct-header [data-row*="middle"] { background-color: ... }
   `data-header` sits on <body> itself, so the qualifier attaches with no
   descendant space; that lands at 0,3,1 and wins on the cascade, not on
   !important. */
body[data-header*="type-1"] .ct-header [data-row*="middle"] {
	background-color: var(--wt-ink);
}
body[data-header*="type-1"] .ct-header [data-row*="middle"] a,
body[data-header*="type-1"] .ct-header [data-row*="middle"] .ct-icon,
body[data-header*="type-1"] .ct-header [data-row*="middle"] svg {
	color: var(--wt-paper);
	fill: currentColor;
}

/* The wordmark replaces the text title visually; the text stays in the DOM so
   screen readers and the Organization microdata still have a name. */
.site-title a {
	display: block;
	width: 148px;
	height: 27px;
	background: url("logo-reversed.svg") no-repeat left center;
	background-size: contain;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}

/* ---- Post meta ----
   The byline and publish date contradict the "last checked" line the facts
   template carries, which is the date that actually matters on a dated-fact
   page. Hidden visually, left in the DOM so the authorship markup stays true. */
.entry-meta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Layout shell ----
   Blocksy's own container lives in its template parts, so the templates this
   theme replaces carry their own. */

.wt-wrap {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: var(--wt-gap);
}

.wt-section-title {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wt-ink-70);
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wt-rule);
}

/* ---- Find bar ----
   The page title and the field, plain and left-aligned. The header already
   carries the brand, so nothing here restates it. */

.wt-find {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.wt-find__title {
	font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
	margin: 0 0 1rem;
}
.wt-find__form {
	max-width: 560px;
}

/* The home page puts a search field in the content, so the one in the header
   would be the same control twice on the same screen. */
.home .ct-header [data-id="search"] {
	display: none;
}

.wt-home__list {
	padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.wt-search {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}

/* ---- Search field ----
   Blocksy's own markup and AJAX, restyled. Its results panel sits behind the
   input and reserves --theme-form-field-height + 15px of top padding to clear
   it, so that variable has to match the real field height or the first result
   lands on top of the field. */

.wt-find__form .ct-search-form,
.wt-search__form .ct-search-form {
	position: relative;
	--theme-form-field-height: 46px;
	--search-dropdown-extra-spacing: 8px;
	--search-dropdown-background: var(--wt-paper);
	--search-dropdown-box-shadow: 0 6px 20px rgba(18, 16, 13, 0.10);
	--items-padding: 0.7rem 0.9rem;
	--items-divider: 1px solid var(--wt-rule);
	--items-spacing: 0px;
}

.wt-find__form .ct-search-form-inner,
.wt-search__form .ct-search-form-inner {
	display: flex;
	align-items: center;
	background: var(--wt-paper);
	border: 1px solid var(--wt-ink-45);
	border-radius: 8px;
	padding-inline: 0.85rem 0.3rem;
}
/* Blocksy puts a blue outline on the field wrapper; this replaces it with the
   brand's own, which still clears 3:1 against both the field and the page. */
.wt-find__form .ct-search-form-inner:focus-within,
.wt-search__form .ct-search-form-inner:focus-within {
	border-color: var(--wt-ink);
	outline: 2px solid var(--wt-amber);
	outline-offset: 1px;
}

.wt-find__form input[type="search"],
.wt-search__form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--wt-body);
	font-size: 1rem;
	color: var(--wt-ink);
	appearance: none;
}
.wt-find__form input[type="search"]:focus,
.wt-search__form input[type="search"]:focus { outline: none; }
.wt-find__form input[type="search"]::placeholder,
.wt-search__form input[type="search"]::placeholder { color: var(--wt-ink-45); }

.wt-find__form button[type="submit"],
.wt-search__form button[type="submit"] {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--wt-ink-70);
	cursor: pointer;
}
.wt-find__form button[type="submit"]:hover,
.wt-search__form button[type="submit"]:hover {
	background: var(--wt-surface);
	color: var(--wt-ink);
}
.wt-find__form button[type="submit"] svg,
.wt-search__form button[type="submit"] svg { fill: currentColor; }

/* ---- Live results ----
   Position, padding and dividers come from the variables above; only the
   typography and the thumbnail are left to set. A date answer has no image
   worth showing at 45px, so that column goes. */

.ct-search-results a {
	color: var(--wt-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.4;
}
.ct-search-results a:hover,
.ct-search-results a:focus-visible {
	background: var(--wt-surface);
	outline: none;
}
.ct-search-results .ct-media-container { display: none; }

/* The panel is drawn behind the field, so it reads as a card the field sits
   in; Blocksy's own 3px radius leaves it looking unfinished. */
.wt-find__form .ct-search-results,
.wt-search__form .ct-search-results {
	border: 1px solid var(--wt-rule);
	border-radius: 10px;
}

/* ---- Header search modal ----
   It sits on near-black, where the ink button fill would vanish; amber reads
   5.8:1 there and carries ink text at 5.9:1. */

#search-modal button[type="submit"] {
	background: var(--wt-amber);
	color: var(--wt-ink);
}
#search-modal button[type="submit"] svg { fill: currentColor; }
#search-modal input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.55); }
#search-modal .ct-search-results a { color: var(--wt-paper); }

/* ---- Search results page ---- */

.wt-search__title { margin: 0 0 1.25rem; }
.wt-search__form {
	max-width: 560px;
	margin-bottom: 1.75rem;
}
.wt-search__count {
	font-size: 0.9375rem;
	color: var(--wt-ink-70);
	margin: 0 0 1.5rem;
}
.wt-search__count strong { color: var(--wt-ink); }

.wt-empty {
	border-left: 4px solid var(--wt-amber);
	padding: 0.75rem 0 0.75rem 1.25rem;
	margin: 0 0 2.5rem;
	max-width: var(--wt-measure);
}
.wt-empty__lead {
	font-family: var(--wt-display);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
}
.wt-empty__hint {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--wt-ink-70);
}

.wt-card__excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wt-ink-70);
}

/* ---- Archives (the hubs) ---- */

.wt-archive {
	padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.wt-archive__head { margin-bottom: 1.75rem; }
.wt-archive__title { margin: 0 0 0.5rem; }
.wt-archive__intro {
	max-width: var(--wt-measure);
	color: var(--wt-ink-70);
}
.wt-archive__intro p { margin: 0; }

/* ---- Pagination ---- */

.wt-wrap .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 2rem;
}
.wt-wrap .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--wt-rule);
	border-radius: 6px;
	color: var(--wt-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}
.wt-wrap .page-numbers:hover { border-color: var(--wt-ink-45); }
.wt-wrap .page-numbers.current {
	background: var(--wt-ink);
	border-color: var(--wt-ink);
	color: var(--wt-paper);
	font-weight: 600;
}
.wt-wrap .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
	padding: 0 0.25rem;
}

/* ---- Footer ---- */

.ct-footer-copyright {
	font-size: 0.8125rem;
	color: var(--wt-ink-70);
	font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}