/*
Theme Name: TCTTA — Tri-Cities Table Tennis
Theme URI: https://www.tricitiestabletennis.com/
Author: BX Systems
Author URI: https://bx-systems.com
Description: Bespoke block theme for the Tri-Cities Table Tennis Association. Warm-neutral palette with a single brand-red accent, Barlow + Inter typography, fluid type, and reduced-motion-safe scroll craft. Pairs with the "TCTTA Events" plugin for client-editable events and the weekly open-play schedule.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tctta
*/

/* ==========================================================================
   Local design tokens (motion + hairlines that don't belong in theme.json)
   ========================================================================== */
:root {
	--tctta-ease: cubic-bezier(.22, 1, .36, 1);
	--tctta-ease-io: cubic-bezier(.16, 1, .3, 1);
	--tctta-line: rgba(20, 18, 16, .10);
	--tctta-line-light: rgba(255, 255, 255, .12);
	--tctta-gold: #C28A30;
	--tctta-gold-soft: rgba(194, 138, 48, .12);
	--tctta-gold-ink: #8F6C1C;
	--tctta-muted: #4a463d;
	--tctta-muted-2: #6b6559;
	--tctta-faint: #6b6559;
	/* Elevation tiers (one warm light source, ink-tinted) */
	--tctta-shadow-sm: 0 1px 2px rgba(20, 18, 16, .04), 0 6px 16px -10px rgba(20, 18, 16, .10);
	--tctta-shadow: 0 1px 2px rgba(20, 18, 16, .04), 0 12px 32px -12px rgba(20, 18, 16, .12);
	--tctta-shadow-md: 0 2px 6px rgba(20, 18, 16, .05), 0 18px 40px -18px rgba(20, 18, 16, .20);
	--tctta-shadow-lg: 0 24px 60px -20px rgba(20, 18, 16, .28);
	/* Unified corner-radius scale (one ladder, no ad-hoc values) */
	--tctta-r-xs: 8px;
	--tctta-r-sm: 12px;
	--tctta-r-md: 16px;
	--tctta-r-lg: 20px;
	--tctta-r-xl: 28px;
}

/* ==========================================================================
   Inline-SVG icon system (CSS masks — keeps block text editable, no emoji)
   ========================================================================== */
.tctta-ico,
.tctta-badge::before,
.tctta-fact::before,
.tctta-step__num::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--tctta-ico) center / contain no-repeat;
	mask: var(--tctta-ico) center / contain no-repeat;
}
.tctta-ico { width: 1.1em; height: 1.1em; }
/* Lucide-style glyphs */
.ico-heart    { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.ico-users    { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.ico-trophy   { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E"); }
.ico-pin      { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ico-clock    { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.ico-dollar   { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.ico-phone    { --tctta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E"); }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	overflow-x: hidden;
}

::selection {
	background: var(--wp--preset--color--red);
	color: #fff;
}

/* Headings get tighter wrapping; paragraphs read cleaner */
h1, h2, h3, .wp-block-heading {
	text-wrap: balance;
}
p {
	text-wrap: pretty;
}

/* Custom scrollbar nod to the brand (progressive enhancement) */
@supports (scrollbar-color: red white) {
	html { scrollbar-color: var(--wp--preset--color--red) var(--wp--preset--color--paper); }
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.tctta-section {
	padding-block: var(--wp--preset--spacing--80);
}

/* Hairline divider between bands */
.tctta-hairline {
	border-top: 1px solid var(--tctta-line);
}
.has-ink-background-color .tctta-hairline,
.has-charcoal-background-color .tctta-hairline {
	border-top-color: var(--tctta-line-light);
}

/* Heritage callout */
.tctta-heritage {
	max-width: 660px;
	margin: 1.4rem auto 0 !important;
	padding-top: 1.1rem;
	border-top: 2px solid var(--tctta-gold);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Official organization logo lockup (About section) */
.tctta-about__logo img {
	max-width: 300px;
	height: auto;
}

/* Real photos (rounded + soft shadow) */
.tctta-shot img {
	border-radius: var(--tctta-r-lg);
	box-shadow: var(--tctta-shadow-lg);
}

/* Keep photos responsive while their intrinsic width/height (added on the front
   end via tctta_image_loading_hints) reserve space — prevents layout shift and
   keeps the displayed aspect ratio identical to the file. */
.tctta-section figure.wp-block-image img { height: auto; }

/* ==========================================================================
   Eyebrow label (tiny caps + red dot)
   ========================================================================== */
.tctta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin-bottom: .9rem !important;
}
.tctta-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	flex: 0 0 auto;
}

/* ==========================================================================
   Pills / badges
   ========================================================================== */
.tctta-badges {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.tctta-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.05rem;
	border: 1px solid var(--tctta-line);
	border-radius: 100px;
	background: var(--wp--preset--color--white);
	font-size: .9rem;
	font-weight: 600;
	color: #443f37;
}
.tctta-badge::before { width: 1.05em; height: 1.05em; background-color: var(--wp--preset--color--red); }
.tctta-badge--map {
	background: rgba(200, 30, 30, .07);
	border-color: rgba(200, 30, 30, .18);
	color: var(--wp--preset--color--red-deep);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .8rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.tctta-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--tctta-line);
	border-radius: var(--tctta-r-lg);
	padding: clamp(1.6rem, 3vw, 2.4rem) !important;
	box-shadow: var(--tctta-shadow);
	transition: transform .4s var(--tctta-ease), box-shadow .4s var(--tctta-ease), border-color .4s var(--tctta-ease);
	height: 100%;
}
.tctta-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tctta-shadow-md);
	border-color: rgba(200, 30, 30, .18);
}
.tctta-card--soft {
	background: var(--wp--preset--color--paper);
	box-shadow: none;
}
.tctta-card--dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-color: var(--tctta-line-light);
}
.tctta-card--dark :is(h1,h2,h3,h4,p,li) { color: inherit; }
.tctta-card--accent {
	border-left: 4px solid var(--wp--preset--color--red);
}

/* Board member cards — circular headshot above name-forward editorial copy */
.tctta-board__avatar {
	width: 104px;
	margin: 0 0 1.1rem !important;
}
.tctta-board__avatar img {
	width: 104px !important;
	height: 104px !important;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--wp--preset--color--paper);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--tctta-gold), var(--tctta-shadow-sm);
}
/* "Photo coming soon" placeholder — premium muted silhouette */
.tctta-board__avatar--ph {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	margin: 0 0 1.1rem;
	background: var(--wp--preset--color--paper);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--tctta-line), var(--tctta-shadow-sm);
	display: flex;
	align-items: center;
	justify-content: center;
}
.tctta-board__avatar--ph::before {
	content: "";
	width: 46%;
	height: 46%;
	background: var(--tctta-muted-2);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M12 14c-4.4 0-8 2.6-8 5.8V21h16v-1.2c0-3.2-3.6-5.8-8-5.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='8' r='4.2'/%3E%3Cpath d='M12 14c-4.4 0-8 2.6-8 5.8V21h16v-1.2c0-3.2-3.6-5.8-8-5.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Board member cards — editorial, name-forward names */
.tctta-board__name {
	font-family: var(--wp--preset--font-family--display-condensed);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2rem);
	line-height: 1;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 .35rem !important;
}
.tctta-board__role {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tctta-gold-ink);
	margin: 0 0 .85rem !important;
}
.tctta-board__rule {
	width: 44px;
	height: 3px;
	border: 0;
	border-radius: 2px;
	background: var(--tctta-gold);
	margin: 0 0 1.1rem;
}
.tctta-tags {
	margin-top: 1.1rem !important;
	padding-top: .85rem;
	border-top: 1px solid var(--tctta-line);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--tctta-muted-2);
}

/* small accent bullet list */
.tctta-checklist {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	gap: 1rem;
}
.tctta-checklist li {
	position: relative;
	padding-left: 1.6rem;
	line-height: 1.5;
}
.tctta-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
}

/* ==========================================================================
   Buttons — arrow nudge + lift (layered on theme.json pill styling)
   ========================================================================== */
.wp-block-button__link {
	transition: transform .35s var(--tctta-ease), background-color .25s var(--tctta-ease), box-shadow .35s var(--tctta-ease) !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(200, 30, 30, .5);
}
/* Outline / ghost variant in brand ink */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: #fff;
	transform: translateY(-2px);
}
/* Tactile press — both variants settle down briefly */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
.wp-block-button.is-style-outline .wp-block-button__link:active {
	transform: translateY(0) scale(.97);
	transition-duration: .08s;
}

/* ==========================================================================
   Animated underline links (.tctta-tlink)
   ========================================================================== */
.tctta-tlink a, a.tctta-tlink {
	background-image: linear-gradient(var(--wp--preset--color--red), var(--wp--preset--color--red));
	background-size: 0% 2px;
	background-position: right bottom;
	background-repeat: no-repeat;
	transition: background-size .4s var(--tctta-ease);
	padding-bottom: 2px;
}
.tctta-tlink a:hover, a.tctta-tlink:hover,
.tctta-tlink a:focus-visible, a.tctta-tlink:focus-visible {
	background-size: 100% 2px;
	background-position: left bottom;
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.wp-block-template-part.site-header,
.tctta-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 250, 246, .9);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--tctta-line);
	transition: box-shadow .3s var(--tctta-ease), background-color .3s var(--tctta-ease);
}
.tctta-header.is-stuck {
	background: rgba(251, 250, 246, .97);
	box-shadow: 0 8px 28px -16px rgba(20, 18, 16, .28);
}
.tctta-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--tctta-r-sm);
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: -.02em;
}
.tctta-wordmark {
	font-family: var(--wp--preset--font-family--display-condensed);
	font-weight: 700;
	font-size: 1.7rem;
	letter-spacing: .015em;
	color: var(--wp--preset--color--ink);
}
.tctta-mark {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: block;
	color: var(--wp--preset--color--red);
}
.tctta-footer .tctta-mark { color: #fff; }
.tctta-footer .tctta-wordmark { color: #fff; }
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
	color: var(--tctta-muted);
}

/* Comfortable tap targets for standalone text links (WCAG 2.2 AA 2.5.8) */
.tctta-tlink a,
.tctta-footer a {
	display: inline-block;
	padding-block: 2px;
}
@media (max-width: 781px) {
	.tctta-tlink a,
	.tctta-footer ul a {
		padding-block: 6px;
	}
}
.wp-block-navigation a:hover .wp-block-navigation-item__label,
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--red);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.tctta-hero {
	position: relative;
	background:
		radial-gradient(55% 45% at 88% 6%, rgba(200, 30, 30, .08), transparent 62%),
		radial-gradient(48% 42% at 66% 104%, var(--tctta-gold-soft), transparent 66%),
		var(--wp--preset--color--paper);
	overflow: clip;
}
.tctta-hero__logocard {
	background: #fff;
	border: 1px solid var(--tctta-line);
	border-radius: var(--tctta-r-xl);
	padding: clamp(2rem, 4vw, 3.25rem) !important;
	box-shadow: var(--tctta-shadow-lg);
}
.tctta-hero__logocard img {
	display: block;
	width: 100%;
	max-width: 440px;
	margin-inline: auto;
}
.tctta-hero__media {
	position: relative;
	isolation: isolate;
}
.tctta-hero__media img {
	position: relative;
	z-index: 1;
	border-radius: var(--tctta-r-lg);
	border: 6px solid #fff;
	box-shadow: 0 1px 3px rgba(20, 18, 16, .07), 0 30px 60px -24px rgba(20, 18, 16, .36);
}
/* offset gold keyline frame for a premium, matted feel (clipped by hero overflow) */
.tctta-hero__media::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 16px -16px -16px 16px;
	border: 2px solid var(--tctta-gold);
	border-radius: var(--tctta-r-xl);
	opacity: .5;
}
.tctta-hero__note {
	background: #fff;
	border: 1px solid var(--tctta-line);
	border-left: 4px solid var(--wp--preset--color--red);
	border-radius: var(--tctta-r-sm);
	padding: 1rem 1.25rem !important;
	box-shadow: var(--tctta-shadow);
}

/* ==========================================================================
   Info bar (dark) + facility reminder
   ========================================================================== */
.tctta-infobar {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-top: 3px solid var(--wp--preset--color--gold);
}
.tctta-infobar :is(p, a) { color: var(--wp--preset--color--paper); }

/* Quick-facts strip */
.tctta-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 2.1rem;
	align-items: center;
}
.tctta-fact {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
	font-size: .98rem;
}
.tctta-fact::before {
	width: 1.2em;
	height: 1.2em;
	background-color: var(--wp--preset--color--gold);
}

/* "New here? Start here" steps */
.tctta-steps {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(3, 1fr);
}
.tctta-step {
	display: flex;
	gap: .85rem;
	align-items: flex-start;
}
.tctta-step__num {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--red);
	color: #fff;
	font-family: var(--wp--preset--font-family--display-condensed);
	font-weight: 700;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tctta-step strong { display: block; }
.tctta-step span { color: #4a463d; font-size: .95rem; }
@media (max-width: 781px) {
	.tctta-steps { grid-template-columns: 1fr; }
}

/* Tablet (782–1099px): WordPress columns don't stack until 782px, so 4-up card
   grids (board, resources) cram. Drop them to a comfortable 2-up here. */
@media (min-width: 782px) and (max-width: 1099px) {
	.wp-block-columns.tctta-stagger {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.tctta-stagger > .wp-block-column {
		flex-basis: calc(50% - 0.75rem) !important;
		flex-grow: 1;
	}
}

/* ==========================================================================
   FAQ (core details)
   ========================================================================== */
.tctta-faq .wp-block-details {
	background: #fff;
	border: 1px solid var(--tctta-line);
	border-radius: var(--tctta-r-md);
	padding: 1.25rem 1.5rem;
	box-shadow: var(--tctta-shadow-sm);
	transition: border-color .3s var(--tctta-ease), box-shadow .3s var(--tctta-ease);
}
.tctta-faq .wp-block-details:hover { box-shadow: var(--tctta-shadow); }
.tctta-faq .wp-block-details[open] {
	border-color: rgba(200, 30, 30, .35);
}
.tctta-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.15rem;
	cursor: pointer;
	list-style: none;
}
.tctta-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.tctta-faq .wp-block-details summary::after {
	content: "+";
	float: right;
	display: inline-block;
	color: var(--wp--preset--color--red);
	font-weight: 700;
	transition: transform .3s var(--tctta-ease);
}
/* "+" rotates into "×" on open (one mark, smooth toggle) */
.tctta-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }

/* ==========================================================================
   Footer
   ========================================================================== */
.tctta-footer {
	background: var(--wp--preset--color--ink);
	color: #b9b3a8;
}
.tctta-footer :is(h1,h2,h3,h4) { color: #fff; }
.tctta-footer a { color: #cfc9bd; }
.tctta-footer a:hover { color: #fff; }

/* ==========================================================================
   Accessibility — visible focus
   ========================================================================== */
:where(a, button, .wp-block-button__link, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Forms (contact)
   ========================================================================== */
.tctta-form input,
.tctta-form textarea {
	width: 100%;
	padding: .85rem 1rem;
	border: 1px solid var(--tctta-line);
	border-radius: var(--tctta-r-sm);
	background: #fff;
	font: inherit;
	color: var(--wp--preset--color--ink);
	transition: border-color .2s var(--tctta-ease), box-shadow .2s var(--tctta-ease);
}
.tctta-form input:focus,
.tctta-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--red);
	box-shadow: 0 0 0 3px rgba(200, 30, 30, .15);
}
.tctta-form label {
	display: block;
	font-weight: 700;
	font-size: .9rem;
	margin-bottom: .4rem;
}
.tctta-form .tctta-hp { position: absolute; left: -9999px; opacity: 0; }