/*!
Theme Name: SOS – VoteTexas Save the Dates
Theme URI: https://www.votetexas.gov/
Author: Texas Secretary of State
Author URI: https://www.sos.texas.gov/
Description: Save the Dates landing page theme for the Texas Secretary of State — key November 2026 election dates with downloadable calendars in English and Spanish.
Version: 2.0.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sos
Tags: accessibility-ready, custom-menu, one-column, sticky-post, translation-ready

This theme, like WordPress, is licensed under the GPL.
Based on Underscores https://underscores.me/, (C) 2012-2026 Automattic, Inc.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Design tokens
# Base / reset
# Accessibility helpers
# Layout primitives
# Buttons
# Utility strip
# Header + navigation
# Hero
# Key dates
# Media resources
# Toolkit grid
# Voter education facts
# Contact CTA
# Footer
# Inner pages (posts, pages, archives, search, 404)
# Comments & forms
# Widgets, alignments, misc WordPress
# Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
	/* Brand palette — every combination used below meets WCAG 2.1 AA. */
	--tk-navy: #103C61;
	--tk-navy-dark: #0C2E4B;
	--tk-navy-hover: #164A76;
	--tk-red: #D71920;
	--tk-red-dark: #B3141B;
	--tk-red-on-navy: #FF6B61; /* accessible large-display red on navy — ≥3:1 against every hero gradient stop, incl. lightest (#154770 → 3.47:1) */
	--tk-cream: #EEE8D7;
	--tk-cream-light: #F5F1E6;
	--tk-ink: #14202B;
	--tk-slate: #3C4A54;
	--tk-slate-light: #4A5A66;
	--tk-note: #667580; /* 4.7:1 on white */
	--tk-blue-pale: #C9D6E2;
	--tk-blue-soft: #D9E2EC;
	--tk-footer-body: #A9BBCB;
	--tk-footer-legal: #8FA2B4;
	--tk-gold: #FFD34E;
	--tk-red-tint: #FFEDEE; /* 4.59:1 on red */
	--tk-white: #ffffff;

	--tk-font-display: 'Oswald', 'WhitneyCond', 'Arial Narrow', 'Helvetica Neue', sans-serif;
	--tk-font-body: 'Source Serif 4', 'Minion', Georgia, 'Times New Roman', serif;

	--tk-radius-sm: 4px;
	--tk-radius: 10px;
	--tk-radius-lg: 12px;
	--tk-shadow-card: 0 8px 24px rgba(16, 60, 97, .08);
	--tk-shadow-card-lg: 0 10px 30px rgba(16, 60, 97, .09);
	--tk-shadow-float: 0 24px 60px rgba(8, 26, 44, .35);
	--tk-container: 1200px;
	--tk-gutter: 24px;
	--tk-header-offset: 96px;
}

/*--------------------------------------------------------------
# Base / reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* Keep anchor targets and keyboard focus clear of the sticky header
	   (WCAG 2.4.11 Focus Not Obscured). */
	scroll-padding-top: calc(var(--tk-header-offset, 96px) + 12px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--tk-cream);
	color: var(--tk-ink);
	font-family: var(--tk-font-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--tk-font-display);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--tk-navy);
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

ul, ol {
	margin: 0 0 1.5em;
	padding-inline-start: 1.4em;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
	border-collapse: collapse;
}

th, td {
	border: 1px solid rgba(16, 60, 97, .2);
	padding: .5em .75em;
	text-align: start;
}

blockquote {
	margin: 1.5em 0;
	padding: .5em 0 .5em 1.25em;
	border-inline-start: 5px solid var(--tk-red);
	font-style: italic;
	color: var(--tk-slate);
}

pre, code, kbd, samp {
	font-family: 'Courier New', Courier, monospace;
	font-size: .95em;
}

pre {
	background: var(--tk-cream-light);
	padding: 1em 1.25em;
	overflow: auto;
	border-radius: var(--tk-radius-sm);
	max-width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid rgba(16, 60, 97, .2);
	margin: 2em 0;
}

::selection {
	background: var(--tk-red);
	color: var(--tk-white);
}

a {
	color: var(--tk-navy);
	text-decoration-thickness: from-font;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--tk-red-dark);
}

/* Highly visible focus indicator on every interactive element. */
:focus-visible {
	outline: 3px solid var(--tk-navy-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--tk-gold);
	border-radius: 2px;
}

.site-header :focus-visible,
.site-footer :focus-visible,
.tk-on-dark :focus-visible {
	outline-color: var(--tk-gold);
	box-shadow: 0 0 0 6px rgba(12, 46, 75, .9);
}

button {
	font: inherit;
}

input, textarea, select {
	font: inherit;
	max-width: 100%;
}

/*--------------------------------------------------------------
# Accessibility helpers
--------------------------------------------------------------*/
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--tk-cream-light);
	clip-path: none;
	color: var(--tk-navy);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Skip link styled per design */
.tk-skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 200;
	background: var(--tk-red);
	color: var(--tk-white);
	font-family: var(--tk-font-display);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 12px 18px;
	border-radius: var(--tk-radius-sm);
	text-decoration: none;
}

.tk-skip-link:focus,
.tk-skip-link:focus-visible {
	top: 12px;
	color: var(--tk-white);
}

/*--------------------------------------------------------------
# Layout primitives
--------------------------------------------------------------*/
.site {
	position: relative;
	overflow-x: clip;
}

.tk-container {
	max-width: var(--tk-container);
	margin-inline: auto;
	padding-inline: var(--tk-gutter);
}

.tk-texture {
	position: absolute;
	inset: 0;
	background-image: url("assets/images/paper-texture.png");
	background-size: 220px;
	pointer-events: none;
}

.tk-texture--dark {
	mix-blend-mode: soft-light;
	opacity: .8;
}

.tk-texture--light {
	mix-blend-mode: multiply;
	opacity: .5;
}

.tk-section-inner {
	position: relative;
	z-index: 1;
}

/* Lone star bullet */
.tk-star {
	display: inline-block;
	flex-shrink: 0;
	width: 13px;
	height: 13px;
	background: var(--tk-red);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Eyebrow labels */
.tk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--tk-red-dark);
}

.tk-eyebrow .tk-star {
	width: 12px;
	height: 12px;
}

.tk-eyebrow--gold {
	color: var(--tk-gold);
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 15px 28px;
	border: 0;
	border-radius: var(--tk-radius-sm);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tk-btn--red {
	background: var(--tk-red);
	color: var(--tk-white);
}

.tk-btn--red:hover,
.tk-btn--red:focus-visible {
	background: var(--tk-red-dark);
	color: var(--tk-white);
}

.tk-btn--navy {
	background: var(--tk-navy);
	color: var(--tk-white);
	font-size: 15px;
	padding: 13px 22px;
	min-height: 46px;
}

.tk-btn--navy:hover,
.tk-btn--navy:focus-visible {
	background: var(--tk-navy-dark);
	color: var(--tk-white);
}

.tk-btn--ghost {
	background: transparent;
	color: var(--tk-cream);
	border: 2px solid rgba(238, 232, 215, .5);
	padding: 13px 26px;
}

.tk-btn--ghost:hover,
.tk-btn--ghost:focus-visible {
	border-color: var(--tk-cream);
	color: var(--tk-white);
}

.tk-btn--white {
	background: var(--tk-white);
	color: var(--tk-red-dark);
}

.tk-btn--white:hover,
.tk-btn--white:focus-visible {
	background: var(--tk-cream-light);
	color: var(--tk-red-dark);
}

.tk-btn--outline-white {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .6);
	color: var(--tk-white);
	padding: 13px 26px;
}

.tk-btn--outline-white:hover,
.tk-btn--outline-white:focus-visible {
	border-color: var(--tk-white);
	color: var(--tk-white);
}

/* Placeholder buttons whose file isn't uploaded yet (href omitted). */
.tk-btn.is-disabled {
	cursor: not-allowed;
	opacity: .78;
}

/* Placeholder links neutralized by navigation.js until an editor adds a
   real URL (empty or "#" hrefs in block content / footer legal row). */
.tk-link-pending,
a.stk-button.tk-link-pending {
	cursor: not-allowed;
	opacity: .72;
}

/*--------------------------------------------------------------
# Forced colors / Windows High Contrast mode
--------------------------------------------------------------*/
@media (forced-colors: active) {
	/* Hamburger bars are background-painted; map them to a system color
	   so the toggle stays visible when backgrounds are stripped. */
	.tk-menu-toggle__bar {
		background: ButtonText;
	}

	.tk-star,
	.tk-hero__badge .tk-star,
	.tk-eyebrow .tk-star {
		background: CanvasText;
	}

	/* Give every button a real border so its bounds survive
	   background removal. */
	.tk-btn {
		border: 2px solid ButtonText;
	}

	.tk-menu-toggle {
		border: 2px solid ButtonText;
	}

	.tk-section-card,
	.tk-resource,
	.tk-date-card,
	.tk-quickstart-card,
	.tk-hero__qr {
		border: 1px solid CanvasText;
	}

	/* The logo art is white-on-transparent; keep a navy backing behind it
	   so it stays visible on light high-contrast themes. */
	.site-branding img,
	.site-branding .custom-logo,
	.site-footer__about img {
		forced-color-adjust: none;
		background: #103C61;
		padding: 6px 10px;
		border-radius: 4px;
	}
}

/*--------------------------------------------------------------
# Utility strip
--------------------------------------------------------------*/
.tk-utility {
	background: var(--tk-navy-dark);
	color: var(--tk-blue-pale);
}

.tk-utility__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: space-between;
	padding-block: 8px;
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .03em;
}

.tk-utility__label {
	text-transform: uppercase;
	letter-spacing: .09em;
}

.tk-utility a {
	color: var(--tk-white);
	letter-spacing: .05em;
	text-decoration: none;
	display: inline-block;
	padding-block: 5px;
	margin-block: -5px;
}

.tk-utility a:hover {
	text-decoration: underline;
	color: var(--tk-white);
}

/*--------------------------------------------------------------
# Header + navigation
--------------------------------------------------------------*/
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--tk-navy);
	border-bottom: 3px solid var(--tk-red);
}

.site-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 14px;
}

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding img,
.site-branding .custom-logo {
	height: clamp(46px, 7vw, 68px);
	width: auto;
}

.tk-nav-desktop {
	display: none;
	align-items: center;
	gap: 28px;
}

.tk-nav-desktop ul {
	display: flex;
	gap: 26px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-nav-desktop a:not(.tk-btn) {
	color: var(--tk-cream);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	/* Grow the hit area to ≥24px (WCAG 2.5.8) without shifting layout. */
	padding-block: 14px;
	margin-block: -14px;
}

.tk-nav-desktop a:not(.tk-btn):hover {
	color: var(--tk-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tk-nav-desktop .tk-btn {
	font-size: 15px;
	padding: 12px 20px;
	min-height: 44px;
	white-space: nowrap;
}

/* Mobile menu toggle */
.tk-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 6px;
	cursor: pointer;
}

.tk-menu-toggle__bar {
	display: block;
	height: 3px;
	background: var(--tk-cream);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.tk-menu-toggle[aria-expanded="true"] .tk-menu-toggle__bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.tk-menu-toggle[aria-expanded="true"] .tk-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.tk-menu-toggle[aria-expanded="true"] .tk-menu-toggle__bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav panel */
.tk-nav-mobile {
	display: none;
	border-top: 1px solid rgba(255, 255, 255, .15);
	background: var(--tk-navy-dark);
}

.tk-nav-mobile.is-open {
	display: block;
}

/* Without JavaScript the panel is always visible on small screens. */
.no-js .tk-nav-mobile {
	display: block;
}

.no-js .tk-menu-toggle {
	display: none;
}

.tk-nav-mobile ul {
	max-width: var(--tk-container);
	margin-inline: auto;
	padding: 8px 16px 16px;
	list-style: none;
}

.tk-nav-mobile li {
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tk-nav-mobile li:last-child {
	border-bottom: 0;
	padding-top: 14px;
}

.tk-nav-mobile a:not(.tk-btn) {
	display: block;
	padding: 15px 8px;
	color: var(--tk-cream);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
}

.tk-nav-mobile a:not(.tk-btn):hover {
	color: var(--tk-white);
}

.tk-nav-mobile .tk-btn {
	width: 100%;
	font-size: 16px;
}

@media (min-width: 881px) {
	.tk-nav-desktop {
		display: flex;
	}

	.tk-menu-toggle,
	.tk-nav-mobile,
	.no-js .tk-nav-mobile {
		display: none;
	}
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.tk-hero {
	position: relative;
	background: radial-gradient(135% 100% at 50% -20%, #154770 0%, #103C61 48%, #0C2E4B 100%);
	color: var(--tk-cream);
	overflow: hidden;
}

.tk-hero__star,
.tk-hero::after {
	content: '';
	position: absolute;
	right: max(-180px, -14vw);
	top: 50%;
	width: min(72vw, 940px);
	aspect-ratio: 1;
	background: rgba(255, 255, 255, .07);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	transform: translateY(-50%) rotate(-8deg);
	pointer-events: none;
}

.tk-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
	padding-block: clamp(44px, 7vw, 88px);
}

.tk-hero__content {
	flex: 1 1 460px;
	min-width: min(100%, 460px);
}

.tk-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: 1px solid rgba(238, 232, 215, .35);
	border-radius: 100px;
	margin-bottom: 26px;
}

.tk-hero__badge .tk-star {
	width: 14px;
	height: 14px;
}

.tk-hero__badge-text {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--tk-cream);
}

.tk-hero__title {
	font-size: clamp(44px, 7vw, 88px);
	line-height: .97;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--tk-white);
}

.tk-hero__title .tk-accent {
	color: var(--tk-red-on-navy);
}

.tk-hero__intro {
	margin-top: 24px;
	max-width: 52ch;
	font-size: clamp(18px, 2.1vw, 22px);
	line-height: 1.5;
	color: var(--tk-blue-soft);
}

.tk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* QR card */
.tk-hero__qr {
	flex: 0 1 300px;
	background: var(--tk-cream-light);
	color: var(--tk-ink);
	border-radius: var(--tk-radius);
	padding: 26px;
	box-shadow: var(--tk-shadow-float);
	border-top: 5px solid var(--tk-red);
}

.tk-hero__qr-label {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--tk-navy);
	margin: 0;
}

.tk-hero__qr img {
	width: 180px;
	height: 180px;
	margin: 16px auto;
}

.tk-hero__qr-site {
	text-align: center;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tk-navy);
	margin: 0;
}

.tk-hero__qr-alt {
	text-align: center;
	font-size: 15px;
	color: var(--tk-slate-light);
	margin: 4px 0 0;
}

/*--------------------------------------------------------------
# Key dates
--------------------------------------------------------------*/
.tk-dates {
	position: relative;
	background: var(--tk-cream);
}

.tk-dates__inner {
	padding-block: clamp(44px, 6vw, 72px);
}

.tk-dates__heading {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.tk-dates__heading h2 {
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -.01em;
}

.tk-dates__tag {
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--tk-red-dark);
}

.tk-dates__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-date-card {
	background: var(--tk-white);
	border-radius: var(--tk-radius);
	padding: 28px;
	border-inline-start: 6px solid var(--tk-red);
	box-shadow: var(--tk-shadow-card);
}

.tk-date-card__date {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: clamp(30px, 4vw, 42px);
	color: var(--tk-navy);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin: 0;
}

.tk-date-card__title {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tk-red-dark);
	margin: 12px 0 0;
}

.tk-date-card__note {
	font-size: 17px;
	line-height: 1.45;
	color: var(--tk-slate-light);
	margin: 8px 0 0;
}

/*--------------------------------------------------------------
# Tutorial video
--------------------------------------------------------------*/
.tk-video {
	background: var(--tk-cream-light);
}

.tk-video__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
	padding-block: clamp(44px, 6vw, 80px);
}

.tk-video__content {
	flex: 1 1 340px;
	max-width: 52ch;
}

.tk-video__content h2 {
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -.01em;
	margin-top: 12px;
	line-height: 1;
}

.tk-video__content p:not(.tk-eyebrow) {
	font-size: clamp(17px, 2vw, 19px);
	line-height: 1.55;
	color: var(--tk-slate);
	margin: 16px 0 0;
}

.tk-video__frame {
	flex: 1 1 440px;
}

/* Responsive embed / placeholder frame */
.tk-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--tk-radius-lg);
	overflow: hidden;
	background: var(--tk-navy-dark);
	box-shadow: var(--tk-shadow-card-lg);
}

.tk-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tk-embed--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(26, 86, 136, .55) 0%, rgba(12, 46, 75, 0) 60%),
		var(--tk-navy-dark);
	color: var(--tk-cream);
}

.tk-embed__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 2px solid rgba(238, 232, 215, .5);
}

.tk-embed__label {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .08em;
}

/*--------------------------------------------------------------
# Quick start guide
--------------------------------------------------------------*/
.tk-quickstart {
	position: relative;
	background: var(--tk-cream);
	scroll-margin-top: var(--tk-header-offset);
}

.tk-quickstart__inner {
	padding-block: clamp(44px, 6vw, 80px);
}

.tk-quickstart__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.tk-quickstart-card {
	position: relative;
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: 28px;
	box-shadow: var(--tk-shadow-card);
	border-top: 4px solid var(--tk-red);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tk-quickstart-card__num {
	position: absolute;
	top: 22px;
	right: 24px;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .14em;
	color: var(--tk-red-dark);
}

.tk-quickstart-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--tk-cream);
	color: var(--tk-navy);
}

.tk-quickstart-card__text {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--tk-navy);
	text-decoration: none;
}

a.tk-quickstart-card__text:hover {
	color: var(--tk-red-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*--------------------------------------------------------------
# Communications timeline
--------------------------------------------------------------*/
.tk-timeline {
	position: relative;
	background: var(--tk-navy);
	color: var(--tk-cream);
}

.tk-timeline .tk-texture {
	mix-blend-mode: soft-light;
	opacity: .7;
}

.tk-timeline__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 44px;
	align-items: flex-start;
	padding-block: clamp(48px, 6vw, 88px);
}

.tk-timeline__content {
	flex: 1 1 320px;
	max-width: 44ch;
}

.tk-timeline h2 {
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -.01em;
	color: var(--tk-white);
	margin-top: 12px;
	line-height: 1;
}

.tk-timeline__intro {
	font-size: clamp(17px, 2vw, 19px);
	line-height: 1.55;
	color: var(--tk-blue-soft);
	margin: 16px 0 24px;
}

.tk-timeline__tablewrap {
	flex: 1 1 480px;
	overflow-x: auto;
}

/* Tables */
.tk-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--tk-white);
	border-radius: var(--tk-radius);
	overflow: hidden;
	box-shadow: var(--tk-shadow-card);
	margin: 18px 0 0;
}

.tk-table th,
.tk-table td {
	border: 0;
	border-bottom: 1px solid rgba(16, 60, 97, .14);
	padding: 14px 18px;
	text-align: start;
	vertical-align: top;
	font-size: 16px;
	line-height: 1.45;
}

.tk-table thead th {
	background: var(--tk-navy);
	color: var(--tk-white);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em;
	border-bottom: 3px solid var(--tk-red);
}

.tk-table tbody th {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tk-navy);
	white-space: nowrap;
}

.tk-table tbody td {
	color: var(--tk-slate);
}

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

.tk-timeline .tk-table {
	margin-top: 0;
}

/*--------------------------------------------------------------
# Section cards (homepage)
--------------------------------------------------------------*/
.tk-sections {
	position: relative;
	background: var(--tk-cream-light);
	scroll-margin-top: var(--tk-header-offset);
}

.tk-sections__inner {
	padding-block: clamp(48px, 6vw, 88px);
}

.tk-sections__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tk-section-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: 28px;
	box-shadow: var(--tk-shadow-card-lg);
	border-top: 4px solid var(--tk-navy);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}

.tk-section-card:hover,
.tk-section-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(16, 60, 97, .16);
}

.tk-section-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.tk-section-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: var(--tk-navy);
	color: var(--tk-gold);
}

.tk-section-card__num {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .14em;
	color: var(--tk-red-dark);
}

.tk-section-card h3 {
	font-size: 23px;
	letter-spacing: .01em;
	color: var(--tk-navy);
	line-height: 1.05;
}

.tk-section-card__desc {
	font-size: 16px;
	line-height: 1.5;
	color: var(--tk-slate);
	margin: 10px 0 0;
	flex: 1 1 auto;
}

.tk-section-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tk-red-dark);
}

.tk-section-card:hover .tk-section-card__more {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*--------------------------------------------------------------
# Toolkit internal pages
--------------------------------------------------------------*/
.tk-page-hero__back {
	display: inline-block;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tk-blue-pale);
	text-decoration: none;
	margin-bottom: 18px;
	padding-block: 6px;
}

.tk-page-hero__back:hover {
	color: var(--tk-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tk-page-hero__head {
	display: flex;
	align-items: center;
	gap: 18px;
}

.tk-page-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(238, 232, 215, .35);
	color: var(--tk-gold);
}

.tk-page-body {
	position: relative;
	background: var(--tk-cream);
	padding-block: clamp(40px, 5vw, 72px);
}

.tk-resources {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 900px;
}

.tk-resource {
	display: flex;
	gap: 22px;
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: clamp(24px, 3vw, 32px);
	box-shadow: var(--tk-shadow-card);
	border-inline-start: 5px solid var(--tk-red);
}

.tk-resource__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 12px;
	background: var(--tk-cream);
	color: var(--tk-navy);
}

.tk-resource__body {
	flex: 1 1 auto;
	min-width: 0;
}

.tk-resource__title {
	font-size: clamp(21px, 2.6vw, 26px);
	letter-spacing: .01em;
	line-height: 1.1;
}

.tk-resource__desc {
	font-size: 17px;
	line-height: 1.55;
	color: var(--tk-slate);
	margin: 10px 0 0;
}

.tk-resource__aside {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tk-navy);
	background: var(--tk-cream-light);
	border-radius: var(--tk-radius-sm);
	padding: 10px 14px;
	margin: 14px 0 0;
	display: inline-block;
}

.tk-resource__note {
	font-size: 15px;
	line-height: 1.5;
	color: var(--tk-note);
	font-style: italic;
	margin: 12px 0 0;
}

.tk-resource__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.tk-btn--secondary {
	background: transparent;
	color: var(--tk-navy);
	border: 2px solid var(--tk-navy);
}

.tk-btn--secondary:hover,
.tk-btn--secondary:focus-visible {
	background: var(--tk-navy);
	color: var(--tk-white);
}

.tk-resource .tk-embed {
	margin-top: 16px;
}

.tk-resource__thumbnail {
	margin-top: 16px;
	border-radius: var(--tk-radius);
	box-shadow: var(--tk-shadow-card);
}

/* Placeholder preview thumbnails */
.tk-thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 14px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.tk-thumb {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: repeating-linear-gradient(135deg, #EEE8D7, #EEE8D7 9px, #E2DBC6 9px, #E2DBC6 18px);
	border-radius: 8px;
	padding: 12px;
	text-align: center;
	max-height: 300px;
}

.tk-thumb__label {
	font-family: 'Courier New', monospace;
	font-size: 12px;
	line-height: 1.4;
	color: #554E3A;
	white-space: pre-line;
}

.tk-thumb__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(16, 60, 97, .85);
	color: var(--tk-cream);
}

.tk-page-extra {
	max-width: 900px;
	margin-top: 28px;
}

@media (max-width: 560px) {
	.tk-resource {
		flex-direction: column;
		gap: 14px;
	}

	.tk-page-hero__icon {
		width: 52px;
		height: 52px;
	}
}

/*--------------------------------------------------------------
# Contact CTA
--------------------------------------------------------------*/
.tk-cta {
	background: var(--tk-red);
	color: var(--tk-white);
}

.tk-cta__inner {
	max-width: 1000px;
	margin-inline: auto;
	padding: clamp(44px, 6vw, 72px) var(--tk-gutter);
	text-align: center;
}

.tk-cta h2 {
	font-size: clamp(28px, 4vw, 46px);
	letter-spacing: -.01em;
	color: var(--tk-white);
	line-height: 1;
}

.tk-cta__text {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.5;
	color: var(--tk-red-tint);
	margin: 16px auto 0;
	max-width: 52ch;
}

.tk-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 30px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
	position: relative;
	background: var(--tk-navy-dark);
	color: var(--tk-footer-body);
}

.site-footer__inner {
	padding: clamp(44px, 6vw, 72px) var(--tk-gutter) 32px;
}

.site-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
}

.site-footer__about {
	flex: 1 1 300px;
	max-width: 420px;
}

.site-footer__about img {
	height: 52px;
	width: auto;
}

.site-footer__logo {
	display: inline-block;
}

.site-footer__about p {
	font-size: 16px;
	line-height: 1.55;
	margin: 18px 0 0;
}

.site-footer__phone {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tk-white);
	text-decoration: none;
}

.site-footer__phone:hover {
	color: var(--tk-white);
	text-decoration: underline;
}

.site-footer__cta {
	display: inline-block;
	margin-top: 14px;
	font-size: 16px;
	color: var(--tk-footer-body);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__cta:hover,
.site-footer__cta:focus {
	color: var(--tk-white);
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 44px clamp(44px, 9vw, 120px);
}

.site-footer__col h2 {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--tk-gold);
	font-family: var(--tk-font-display);
	font-weight: 600;
}

.site-footer__col ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.site-footer__col a {
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 16px;
	color: var(--tk-blue-pale);
	text-decoration: none;
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
}

.site-footer__col a:hover {
	color: var(--tk-white);
	text-decoration: underline;
}

.site-footer__legal {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: center;
	justify-content: space-between;
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: .03em;
	color: var(--tk-footer-legal);
}

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal a {
	color: var(--tk-footer-legal);
	text-decoration: none;
	display: inline-block;
	padding-block: 6px;
	margin-block: -6px;
}

.site-footer__legal a:hover {
	color: var(--tk-white);
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Inner pages (posts, pages, archives, search, 404)
--------------------------------------------------------------*/
.tk-page-hero {
	position: relative;
	background: radial-gradient(135% 100% at 50% -20%, #154770 0%, #103C61 48%, #0C2E4B 100%);
	color: var(--tk-cream);
	overflow: hidden;
}

.tk-page-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(36px, 5vw, 64px);
}

.tk-page-hero .page-title,
.tk-page-hero .entry-title {
	font-size: clamp(32px, 5vw, 56px);
	color: var(--tk-white);
	letter-spacing: -.01em;
	line-height: 1;
}

.tk-page-hero .archive-description {
	margin-top: 14px;
	max-width: 60ch;
	color: var(--tk-blue-soft);
	font-size: clamp(16px, 2vw, 19px);
}

.site-main {
	padding-block: clamp(36px, 5vw, 64px);
}

.site-main--flush {
	padding-block: 0;
}

.tk-content-wrap {
	max-width: 820px;
}

.site-main .entry-header .entry-title,
.site-main .page-title {
	font-size: clamp(28px, 4vw, 42px);
}

.site-main .entry-title a {
	text-decoration: none;
	color: var(--tk-navy);
}

.site-main .entry-title a:hover {
	color: var(--tk-red-dark);
}

.entry-meta,
.entry-footer {
	font-family: var(--tk-font-display);
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tk-slate-light);
	margin-top: 8px;
}

.entry-meta a,
.entry-footer a {
	color: var(--tk-red-dark);
	text-decoration: none;
}

.entry-meta a:hover,
.entry-footer a:hover {
	text-decoration: underline;
}

article.post,
article.page,
.no-results {
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: clamp(24px, 4vw, 44px);
	box-shadow: var(--tk-shadow-card);
	margin-bottom: 28px;
}

.entry-content {
	margin-top: 20px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--tk-ink);
}

.entry-content h2 {
	font-size: clamp(24px, 3vw, 32px);
	margin: 1.4em 0 .5em;
}

.entry-content h3 {
	font-size: clamp(20px, 2.5vw, 26px);
	margin: 1.3em 0 .5em;
}

.entry-content h4 {
	font-size: 19px;
	margin: 1.2em 0 .5em;
}

.entry-content a {
	text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
	margin-bottom: 1.25em;
}

.entry-content li {
	margin-bottom: .4em;
}

.page-links {
	clear: both;
	margin: 1.5em 0;
}

.post-navigation,
.posts-navigation {
	margin-block: 28px;
	font-family: var(--tk-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.post-navigation .nav-links,
.posts-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.post-navigation a,
.posts-navigation a {
	text-decoration: none;
	color: var(--tk-navy);
	background: var(--tk-white);
	border-radius: var(--tk-radius-sm);
	padding: 12px 18px;
	box-shadow: var(--tk-shadow-card);
	display: inline-block;
}

.post-navigation a:hover,
.posts-navigation a:hover {
	color: var(--tk-red-dark);
}

.error-404 .page-title {
	color: var(--tk-navy);
}

.error-404 .search-form,
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.search-form .search-field {
	flex: 1 1 240px;
	min-height: 48px;
	padding: 10px 14px;
	border: 2px solid var(--tk-navy);
	border-radius: var(--tk-radius-sm);
	background: var(--tk-white);
	color: var(--tk-ink);
}

.search-form .search-submit {
	min-height: 48px;
	padding: 10px 24px;
	background: var(--tk-navy);
	color: var(--tk-white);
	border: 0;
	border-radius: var(--tk-radius-sm);
	font-family: var(--tk-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
	background: var(--tk-navy-dark);
}

/* Sticky posts */
.sticky .entry-title::before {
	content: "★ ";
	color: var(--tk-red);
}

/* Widget area */
.widget-area {
	margin-top: 36px;
}

.widget {
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: 24px;
	box-shadow: var(--tk-shadow-card);
	margin-bottom: 20px;
}

.widget .widget-title,
.widget h2 {
	font-size: 18px;
	letter-spacing: .04em;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--tk-cream);
	margin-bottom: 12px;
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	margin-bottom: .5em;
}

/*--------------------------------------------------------------
# Comments & forms
--------------------------------------------------------------*/
.comments-area {
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: clamp(24px, 4vw, 44px);
	box-shadow: var(--tk-shadow-card);
	margin-bottom: 28px;
}

.comments-title,
.comment-reply-title {
	font-size: clamp(20px, 3vw, 28px);
}

.comment-list {
	list-style: none;
	margin: 20px 0;
	padding: 0;
}

.comment-list .comment {
	border-top: 1px solid rgba(16, 60, 97, .15);
	padding: 18px 0;
}

.comment-list .children {
	list-style: none;
	margin: 0;
	padding-inline-start: 24px;
}

.comment-author {
	font-family: var(--tk-font-display);
	font-weight: 600;
}

.comment-metadata {
	font-size: 13px;
	color: var(--tk-slate-light);
}

.comment-metadata a {
	color: inherit;
}

.comment-form label {
	display: block;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 4px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 2px solid var(--tk-navy);
	border-radius: var(--tk-radius-sm);
	margin-bottom: 14px;
	background: var(--tk-white);
	color: var(--tk-ink);
}

.comment-form .submit {
	min-height: 48px;
	padding: 12px 28px;
	background: var(--tk-red);
	color: var(--tk-white);
	border: 0;
	border-radius: var(--tk-radius-sm);
	font-family: var(--tk-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus-visible {
	background: var(--tk-red-dark);
}

/*--------------------------------------------------------------
# Widgets, alignments, misc WordPress
--------------------------------------------------------------*/
.alignleft {
	float: left;
	margin-inline-end: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-inline-start: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-inline: auto;
	margin-bottom: 1.5em;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5em;
}

.wp-caption-text {
	text-align: center;
	font-size: 14px;
	color: var(--tk-slate-light);
	margin-top: .5em;
}

.clear::before,
.clear::after,
.entry-content::before,
.entry-content::after,
.comment-content::before,
.comment-content::after,
.site-footer::before,
.site-footer::after {
	display: table;
	content: "";
}

.clear::after,
.entry-content::after,
.comment-content::after,
.site-footer::after {
	clear: both;
}

/* Make embedded content responsive. */
embed,
iframe,
object {
	max-width: 100%;
}

/* Jetpack infinite scroll */
.infinite-scroll .posts-navigation {
	display: none;
}

/*--------------------------------------------------------------
# Blocks canvas (Gutenberg/Stackable-built pages)
--------------------------------------------------------------*/
/* Let block sections span the full width; inner .tk-container groups
   provide the 1200px measure, same as the templated pages. */
.tk-blocks-canvas > * {
	margin-block: 0;
}

.tk-blocks-canvas .tk-container {
	max-width: var(--tk-container);
	margin-inline: auto;
	padding-inline: var(--tk-gutter);
}

/* Section paddings applied via utility classes on Group blocks. */
.tk-blocks-canvas .tk-pad {
	padding-block: clamp(44px, 6vw, 80px);
}

.tk-blocks-canvas .tk-pad-lg {
	padding-block: clamp(52px, 7vw, 96px);
}

/* Core-block equivalents of the theme components. */
.tk-blocks-canvas .tk-hero :is(h1, h2) {
	font-size: clamp(44px, 7vw, 88px);
	line-height: .97;
	color: var(--tk-white);
	letter-spacing: -.01em;
}

.tk-blocks-canvas .tk-hero .tk-accent {
	color: var(--tk-red-on-navy);
}

.tk-blocks-canvas .wp-block-table.tk-table table {
	border-collapse: collapse;
	margin: 0;
}

.tk-blocks-canvas .wp-block-table.tk-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid rgba(16, 60, 97, .14);
}

.tk-blocks-canvas .wp-block-table.tk-table thead th {
	background: var(--tk-navy);
	color: var(--tk-white);
}

/* Buttons: style core button blocks like tk-btn. */
.tk-blocks-canvas .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 15px 28px;
	border-radius: var(--tk-radius-sm);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	background: var(--tk-red);
	color: var(--tk-white);
}

.tk-blocks-canvas .wp-block-button__link:hover,
.tk-blocks-canvas .wp-block-button__link:focus-visible {
	background: var(--tk-red-dark);
	color: var(--tk-white);
}

.tk-blocks-canvas .tk-btnstyle--navy .wp-block-button__link {
	background: var(--tk-navy);
	font-size: 15px;
	padding: 13px 22px;
	min-height: 46px;
}

.tk-blocks-canvas .tk-btnstyle--navy .wp-block-button__link:hover,
.tk-blocks-canvas .tk-btnstyle--navy .wp-block-button__link:focus-visible {
	background: var(--tk-navy-dark);
}

.tk-blocks-canvas .tk-btnstyle--ghost .wp-block-button__link {
	background: transparent;
	color: var(--tk-cream);
	border: 2px solid rgba(238, 232, 215, .5);
	padding: 13px 26px;
}

.tk-blocks-canvas .tk-btnstyle--ghost .wp-block-button__link:hover,
.tk-blocks-canvas .tk-btnstyle--ghost .wp-block-button__link:focus-visible {
	border-color: var(--tk-cream);
	color: var(--tk-white);
}

/* Resource card built from a Group block. */
.tk-blocks-canvas .tk-resource {
	display: block;
}

.tk-blocks-canvas .tk-resource > * + * {
	margin-top: 12px;
}

.tk-blocks-canvas .tk-resource h2,
.tk-blocks-canvas .tk-resource h3 {
	font-size: clamp(21px, 2.6vw, 26px);
}

/* Cards grid via core columns. */
.tk-blocks-canvas .wp-block-columns.tk-cardgrid {
	gap: 20px;
}

.tk-blocks-canvas .tk-cardgrid .wp-block-column {
	background: var(--tk-white);
	border-radius: var(--tk-radius-lg);
	padding: 28px;
	box-shadow: var(--tk-shadow-card-lg);
	border-top: 4px solid var(--tk-navy);
}

.tk-blocks-canvas .tk-cardgrid.tk-cardgrid--red .wp-block-column {
	border-top-color: var(--tk-red);
}

/* Stackable blocks: brand styling on canvas pages (Stackable's generated
   per-block CSS is high-specificity, hence the !importants — per-block
   overrides set in the editor still win because they also generate
   !important rules later in the cascade). */
.tk-blocks-canvas .stk-button {
	background: var(--tk-navy) !important;
	border-radius: var(--tk-radius-sm) !important;
	min-height: 46px;
}

.tk-blocks-canvas .stk-button:hover,
.tk-blocks-canvas .stk-button:focus-visible {
	background: var(--tk-navy-dark) !important;
}

.tk-blocks-canvas .stk-button .stk-button__inner-text {
	font-family: var(--tk-font-display) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: 15px !important;
	color: var(--tk-white) !important;
}

.tk-blocks-canvas .stk-block-heading__text {
	font-family: var(--tk-font-display) !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--tk-navy);
	line-height: 1.05;
}

.tk-blocks-canvas .stk-block-text__text {
	font-family: var(--tk-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--tk-slate);
}

/* Stackable cards: match the section-card look. */
.tk-blocks-canvas .stk-block-card > .stk-container {
	border-top: 4px solid var(--tk-navy);
	border-radius: var(--tk-radius-lg);
	box-shadow: var(--tk-shadow-card-lg);
	background: var(--tk-white);
}

/* Block tables live inside a <figure>. */
.tk-blocks-canvas figure.tk-table {
	margin: 0;
	border-radius: var(--tk-radius);
	overflow: hidden;
	box-shadow: var(--tk-shadow-card);
	background: var(--tk-white);
}

.tk-blocks-canvas figure.tk-table table {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Embed placeholder built from a Group block. */
.tk-blocks-canvas .tk-embed--placeholder {
	padding: 24px;
}

.tk-blocks-canvas .tk-resource .tk-embed {
	max-width: 720px;
}

.tk-blocks-canvas .tk-embed--placeholder p {
	margin: 0;
	max-width: 40ch;
	text-align: center;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--tk-cream);
}

/* Quick-start card links: underline on hover only. */
.tk-blocks-canvas .tk-quickstart-card__text a {
	text-decoration: none;
	color: var(--tk-navy);
}

.tk-blocks-canvas .tk-quickstart-card__text a:hover,
.tk-blocks-canvas .tk-quickstart-card__text a:focus-visible {
	color: var(--tk-red-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Page-hero back link built as a paragraph. */
.tk-blocks-canvas .tk-page-hero__back a {
	color: var(--tk-blue-pale);
	text-decoration: none;
}

.tk-blocks-canvas .tk-page-hero__back a:hover,
.tk-blocks-canvas .tk-page-hero__back a:focus-visible {
	color: var(--tk-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Resource cards: spacing + crisp red edge. */
.tk-blocks-canvas .tk-resource {
	margin-bottom: 20px;
	border-radius: var(--tk-radius-sm) var(--tk-radius-lg) var(--tk-radius-lg) var(--tk-radius-sm);
}

/* White + outline button variants for the CTA band. */
.tk-blocks-canvas .tk-btnstyle--white .wp-block-button__link {
	background: var(--tk-white);
	color: var(--tk-red-dark);
}

.tk-blocks-canvas .tk-btnstyle--white .wp-block-button__link:hover,
.tk-blocks-canvas .tk-btnstyle--white .wp-block-button__link:focus-visible {
	background: var(--tk-cream-light);
	color: var(--tk-red-dark);
}

.tk-blocks-canvas .tk-btnstyle--outlinewhite .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .6);
	color: var(--tk-white);
	padding: 13px 26px;
}

.tk-blocks-canvas .tk-btnstyle--outlinewhite .wp-block-button__link:hover,
.tk-blocks-canvas .tk-btnstyle--outlinewhite .wp-block-button__link:focus-visible {
	border-color: var(--tk-white);
	color: var(--tk-white);
}

/* --- Spacing pass: breathing room around solid elements in block content.
   Copy-to-copy gaps rely on line-height, but buttons, button groups, and
   tables are solid boxes and need real margins so nothing feels cramped. --- */

/* Any core button row: clear space above, comfortable wrap gaps. */
.tk-blocks-canvas .wp-block-buttons {
	gap: 14px 16px;
	margin-top: 22px;
}

/* Stackable download-button rows inside resource cards. */
.tk-blocks-canvas .tk-resource .stk-block-button-group {
	margin-top: 22px;
}

/* Card title → description → italic note rhythm. */
.tk-blocks-canvas .tk-resource__desc,
.tk-blocks-canvas .tk-resource__note,
.tk-blocks-canvas .tk-resource__aside {
	margin-top: 14px;
}

/* Tables sitting directly under a card heading. */
.tk-blocks-canvas .tk-resource .tk-table {
	margin-top: 20px;
}

/* When Stackable columns stack on small screens, keep the cards apart. */
@media (max-width: 781px) {
	.tk-blocks-canvas .stk-block-column + .stk-block-column {
		margin-top: 20px;
	}
}

/* CTA band: give the block-built button row the same breathing room the
   templated .tk-cta__actions row had (blocks default to a tight gap). */
.tk-blocks-canvas .tk-cta .wp-block-buttons {
	margin-top: 32px;
}

/* Hero QR card built from a Group block. */
.tk-blocks-canvas .tk-hero__qr {
	max-width: 300px;
}

.tk-blocks-canvas .tk-hero__qr p {
	margin: 4px 0 0;
}

.tk-blocks-canvas .tk-hero__qr .wp-block-image {
	margin: 16px auto;
	width: 180px;
}

/* Classic themes inject .wp-block-group__inner-container inside Group
   blocks at render time; flex/grid section layouts must target it. */
.tk-blocks-canvas .tk-hero__inner > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	align-items: center;
	width: 100%;
}

.tk-blocks-canvas .tk-embed--placeholder > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 100%;
	height: 100%;
}

/* Stackable columns rows: consistent gap. */
.tk-blocks-canvas .stk-block-columns + .stk-block-columns {
	margin-top: 20px;
}

/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/
@media print {
	.tk-utility,
	.tk-skip-link,
	.tk-menu-toggle,
	.tk-nav-mobile,
	.tk-nav-desktop,
	.tk-hero__star,
	.tk-hero::after,
	.tk-texture,
	.tk-cta,
	.site-footer__legal-links,
	.comments-area,
	.post-navigation,
	.posts-navigation {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.site-header {
		position: static;
		background: #fff;
		border-bottom: 2pt solid #000;
	}

	.tk-hero,
	.tk-timeline,
	.tk-page-hero,
	.site-footer {
		background: #fff !important;
		color: #000 !important;
	}

	.tk-hero__title,
	.tk-timeline h2,
	.tk-page-hero .entry-title,
	.tk-section-card h3 {
		color: #000 !important;
	}

	.tk-hero__intro,
	.tk-timeline__intro,
	.tk-page-hero .archive-description,
	.tk-section-card__desc,
	.site-footer,
	.site-footer__about p {
		color: #333 !important;
	}

	.tk-section-card,
	.tk-resource {
		background: #fff;
		border: 1pt solid #999;
	}

	.tk-table--dark th,
	.tk-table--dark td {
		color: #000 !important;
		border-color: #999 !important;
	}

	.tk-embed--placeholder,
	.tk-thumbs {
		display: none !important;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}

	.tk-btn {
		border: 1pt solid #000;
		background: #fff !important;
		color: #000 !important;
	}

	/* The white-on-navy logo is invisible on white paper. */
	.site-branding img,
	.site-footer__about img {
		display: none;
	}

	/* Gold / pale-blue accents wash out on white. */
	.tk-eyebrow,
	.tk-eyebrow--gold,
	.tk-section-card__num,
	.tk-quickstart-card__num,
	.tk-dates__tag {
		color: #555 !important;
	}

	.tk-section-card__more {
		display: none;
	}

	.site-footer__col a,
	.site-footer__col h2,
	.site-footer__phone,
	.tk-hero__intro,
	.tk-hero__badge-text {
		color: #333 !important;
	}
}

/*--------------------------------------------------------------
# Save the Dates: language toggle + bilingual panels + date cards
--------------------------------------------------------------*/

/* EN | Español pill, lives inside the hero banner. */
.tk-langswitch {
	display: inline-flex;
	gap: 4px;
	border: 1px solid rgba(238, 232, 215, .45);
	border-radius: 999px;
	padding: 4px;
	margin-bottom: 30px;
}

.tk-langswitch__btn {
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 8px 20px;
	min-height: 40px;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--tk-cream);
	cursor: pointer;
}

.tk-langswitch__btn[aria-pressed="true"] {
	background: var(--tk-cream-light);
	color: var(--tk-navy);
}

.tk-langswitch__btn:hover {
	color: var(--tk-white);
}

.tk-langswitch__btn[aria-pressed="true"]:hover {
	color: var(--tk-navy);
}

.tk-langswitch__btn:focus-visible {
	outline: 3px solid var(--tk-gold);
	outline-offset: 2px;
}

/* One language visible at a time. With JavaScript off, no data-lang is
   set and both languages simply stack — a readable fallback. */
html[data-lang="en"] .tk-lang--es { display: none !important; }
html[data-lang="es"] .tk-lang--en { display: none !important; }

/* Key-dates band */
.tk-blocks-canvas .tk-dates-band__inner {
	max-width: 860px;
	margin-inline: auto;
	padding: clamp(44px, 6vw, 72px) var(--tk-gutter);
}

.tk-blocks-canvas .tk-dates-band h2 {
	font-family: var(--tk-font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--tk-navy);
	font-size: clamp(26px, 3.4vw, 38px);
	margin: 0 0 6px;
}

.tk-blocks-canvas .tk-dates-band .tk-dates-band__sub {
	color: var(--tk-slate);
	margin: 0 0 10px;
}

/* A single date card: calendar leaf + text. Classic themes inject
   .wp-block-group__inner-container inside Groups — flex goes there. */
.tk-blocks-canvas .tk-datecard {
	background: var(--tk-white);
	border-radius: var(--tk-radius);
	border-inline-start: 4px solid var(--tk-red);
	box-shadow: var(--tk-shadow-card);
	padding: 20px 22px;
	margin-top: 16px;
}

.tk-blocks-canvas .tk-datecard > .wp-block-group__inner-container {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.tk-blocks-canvas .tk-datecard__leaf {
	flex: 0 0 84px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--tk-cream);
}

.tk-blocks-canvas .tk-datecard__leaf p {
	margin: 0;
	text-align: center;
}

.tk-blocks-canvas .tk-datecard__mo {
	background: var(--tk-red);
	color: var(--tk-white);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 4px 0;
}

.tk-blocks-canvas .tk-datecard__day {
	background: var(--tk-cream-light);
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 32px;
	line-height: 1.1;
	color: var(--tk-navy);
	padding: 6px 0 0;
}

.tk-blocks-canvas .tk-datecard__dow {
	background: var(--tk-cream-light);
	font-size: 12px;
	color: var(--tk-slate-light); /* 6.3:1 on cream-light; --tk-note was 4.2:1, under AA for 12px text */
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 0 0 8px;
}

.tk-blocks-canvas .tk-datecard__body h3 {
	font-family: var(--tk-font-display);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--tk-navy);
	font-size: 19px;
	margin: 2px 0 6px;
}

.tk-blocks-canvas .tk-datecard__body p {
	margin: 0;
	color: var(--tk-slate);
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.tk-blocks-canvas .tk-datecard > .wp-block-group__inner-container {
		gap: 14px;
	}

	.tk-blocks-canvas .tk-datecard__leaf {
		flex-basis: 72px;
	}
}

@media (forced-colors: active) {
	.tk-langswitch__btn[aria-pressed="true"] {
		border: 2px solid ButtonText;
	}

	.tk-blocks-canvas .tk-datecard {
		border: 1px solid CanvasText;
	}
}

@media print {
	.tk-langswitch { display: none !important; }
}

/*--------------------------------------------------------------
# Save the Dates: centered header & footer
--------------------------------------------------------------*/
.site-header__inner {
	justify-content: center;
}

.tk-utility__inner {
	justify-content: center;
}

.site-footer__about {
	margin-inline: auto;
	text-align: center;
}

.site-footer__legal {
	justify-content: center;
	text-align: center;
}

/* Looser leading on the landing headline — .97 was too tight for a
   three-line uppercase title. */
.tk-hero__title,
.tk-blocks-canvas .tk-hero :is(h1, h2) {
	line-height: 1.12;
}

/* Centered hero — matches the centered header/footer for a symmetric,
   poster-style landing page. */
.tk-hero__content {
	text-align: center;
	margin-inline: auto;
}

.tk-hero__content .tk-hero__intro {
	margin-inline: auto;
}

.tk-blocks-canvas .tk-hero .wp-block-buttons {
	justify-content: center;
}

/* Bilingual caption above the language toggle. */
.tk-langswitch-label {
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tk-cream);
	margin: 0 0 10px;
}

/*--------------------------------------------------------------
# Mobile: compact hero so both calendar buttons appear above the fold
--------------------------------------------------------------*/
@media (max-width: 600px) {
	.tk-utility__inner {
		padding-block: 5px;
	}

	.tk-utility__label {
		font-size: 11px;
	}

	.site-header__inner {
		padding-block: 10px;
	}

	.site-branding img,
	.site-branding .custom-logo {
		height: 48px;
	}

	.tk-hero__inner {
		padding-block: 24px 36px;
	}

	.tk-langswitch-label {
		font-size: 11px;
		margin-bottom: 8px;
	}

	.tk-langswitch {
		padding: 3px;
		margin-bottom: 16px;
	}

	.tk-langswitch__btn {
		padding: 6px 16px;
		min-height: 36px;
		font-size: 13px;
	}

	.tk-hero__title,
	.tk-blocks-canvas .tk-hero :is(h1, h2) {
		font-size: 31px;
		line-height: 1.14;
	}

	.tk-hero__intro {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.45;
	}

	.tk-blocks-canvas .tk-hero .wp-block-buttons {
		margin-top: 18px;
		gap: 10px;
	}

	.tk-blocks-canvas .tk-hero .wp-block-button__link {
		padding: 13px 22px;
		font-size: 15px;
	}
}