/**
 * thekelee — theme styles.
 *
 * theme.json carries the design tokens (colour, type scale, spacing). This file
 * covers what theme.json cannot express: the hero/nav overlay, the card grid,
 * the layered philosophy background, the footer and the contact lightbox.
 *
 * Loaded on the front end and, via add_editor_style(), inside the editor.
 */

/* ---------------------------------------------------------------------------
 * Bootstrap grid
 *
 * bootstrap-grid is loaded ahead of this file, so .container / .row / .col-*
 * are available. The grid build is used rather than full Bootstrap because
 * Reboot would restyle every element and fight theme.json. Bootstrap's own
 * container tops out at 1140px (1320 at xxl), so it is pinned to the 1200px
 * this design uses; horizontal breathing room stays with the section's own
 * page-edge padding.
 * ------------------------------------------------------------------------ */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
	max-width: 1200px;
	padding-left: 0;
	padding-right: 0;
}

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

html {
	scroll-behavior: smooth;
}

/* Jump links should not land flush against the top edge. */
:where(.tk-section, [id^="section-"]) {
	scroll-margin-top: 1.5rem;
}

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

.screen-reader-text:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto;
	color: #111;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

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

.tk-header {
	position: relative;
	z-index: 5;
	width: 100%;
}

/* The comp lines the last menu item up with the content margin; the block's
   own end padding would otherwise leave it short. */
.tk-nav .wp-block-navigation__container {
	padding-right: 0;
}

.tk-nav {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.95rem, 1.757vw, 1.49rem);
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 0.095em;
}

.tk-nav a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.tk-nav a:hover,
.tk-nav a:focus-visible {
	opacity: 0.75;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Mobile menu overlay
 *
 * Core leaves the open overlay with no horizontal padding, so the items and the
 * close button sit flush against the right edge. Give it the same page-edge
 * rhythm as the rest of the site, and a comfortable tap size — the compact
 * desktop nav size is inherited here and is too small for touch.
 * ------------------------------------------------------------------------ */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: clamp(4rem, 16vw, 6rem) var(--wp--preset--spacing--edge) var(--wp--preset--spacing--edge);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: clamp(1.25rem, 4vw, 2rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(1.25rem, 5.5vw, 1.75rem);
	padding-block: 0.25em;
}

/* Only the hamburger needs a margin; the close button is positioned, so it
   gets its inset below and would otherwise be pushed in twice. */
.wp-block-navigation__responsive-container-open {
	margin-inline-end: var(--wp--preset--spacing--edge);
}

.wp-block-navigation__responsive-container-close {
	inset-inline-end: var(--wp--preset--spacing--edge) !important;
	inset-block-start: var(--wp--preset--spacing--edge) !important;
}

/* Inner pages (blog, single page, 404) show the nav on the deep water colour. */
.tk-header--solid {
	background-color: var(--wp--preset--color--deep, #0a1f6b);
}

.tk-header--solid .tk-header {
	padding-bottom: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Announcement bar
 * ------------------------------------------------------------------------ */

/* Sits above the hero. Deep navy so it reads as part of the underwater header
   rather than a browser chrome strip pasted on top. */
.tk-announce {
	background: var(--wp--preset--color--deep, #0a1f6b);
	color: #fff;
	padding: clamp(0.5rem, 1.2vw, 0.85rem) var(--wp--preset--spacing--edge);
}

.tk-announce__inner {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 1.4vw, 1rem);
	text-align: center;
}

/* The strip becomes one link when a URL is set, so the layout lives here too. */
.tk-announce__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 1.4vw, 1rem);
	color: inherit;
	text-decoration: none;
}

.tk-announce__link:hover .tk-announce__text,
.tk-announce__link:focus-visible .tk-announce__text {
	text-decoration: underline;
}

.tk-announce__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.tk-announce__image {
	display: block;
	width: auto;
	height: clamp(1.75rem, 3.2vw, 2.75rem);
	border-radius: 3px;
	flex: none;
}

.tk-announce__text {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(0.9rem, 1.35vw, 1.125rem);
	line-height: 1.4;
	text-wrap: balance;
}

.tk-hero {
	min-height: clamp(30rem, 46.4vw, 39.3rem);
	text-align: center;
	/* Core pads cover blocks horizontally, which would narrow the inner
	   container and pull the nav in off the content margin. The header and the
	   hero body apply the page-edge padding themselves. */
	padding-inline: 0;
	/* The tagline sat 38px off the bottom edge, which read as cramped. Pinned
	   here because the stored page content carries the old value inline. */
	padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
}

/* The hero photograph is soft and was reading washed out — the water had lost
   its depth. Saturation and contrast restore the richness; the softness is a
   property of the source file and needs a higher-resolution original. */
.tk-hero .wp-block-cover__image-background {
	filter: saturate(1.28) contrast(1.14) brightness(0.93);
}

/* The homepage sections butt up against each other, as in the design — both
   inside the post content and between the content and the footer part. */
body.home .wp-block-post-content > *,
body.home .wp-site-blocks > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.tk-hero__title {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	letter-spacing: 0.09em;
	line-height: 1.361 !important;
	text-wrap: balance;
}

/* Hero lockup — the whole "THE KELEE®" artwork as one image. */
.tk-hero__lockup {
	margin-block: clamp(0.75rem, 1.97vw, 1.67rem) clamp(1rem, 2.99vw, 2.53rem) !important;
}

.tk-hero__lockup img {
	width: min(430px, 46vw);
	height: auto;
}

.tk-hero__tagline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.348;
	letter-spacing: 0.095em;
	font-size: clamp(1.0625rem, 1.952vw, 1.65rem);
}

/* ---------------------------------------------------------------------------
 * About / video
 * ------------------------------------------------------------------------ */

/* Equal breathing room above and below these two sections.

   Pinned here as well as in the patterns, and with !important, because the
   Home page stores static block markup with the padding written inline. A page
   generated before this release keeps its old values, so the pattern alone
   would only fix a fresh install — not staging, and not production. */
.tk-about,
.tk-journey,
.tk-gift {
	/* Raised from 60px and 75px: the transition between blocks read as abrupt.
	   Top and bottom stay equal, so this does not undo the previous round. */
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--50) !important;
}

/* Philosophy takes the same top padding. Its bottom cannot be set to the bare
   preset: that padding is also what holds the temple clear of the copy, so it
   stays as the artwork height plus the preset. The gap a reader sees between
   the last line and the pediment is therefore still spacing--50 — the rest of
   the value is the artwork itself. */
.tk-philosophy {
	padding-top: var(--wp--preset--spacing--50) !important;
}

.tk-about__title {
	text-wrap: balance;
}

.tk-video {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	border: 2px solid #000;
	aspect-ratio: 662.3 / 388.2;
	background: #2b3237;
}

.tk-video img,
.tk-video iframe,
.tk-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.tk-credit {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(0.9rem, 1.463vw, 1.24rem);
	line-height: 1.347;
}

/* ---------------------------------------------------------------------------
 * Begin Your Journey Within — cards
 * ------------------------------------------------------------------------ */

/* The square proportion comes from the cover block's own aspect-ratio support,
   which WordPress writes as an inline style — CSS here cannot override it. */
.tk-card {
	position: relative;
	border-radius: 7px;
	overflow: hidden;
	border: 2px solid #fff;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tk-card:hover,
.tk-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

/* A card becomes a link when its URL is set in Theme Options → Links. */
.tk-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 7px;
}

.tk-card__link:hover,
.tk-card__link:focus-visible {
	text-decoration: none;
}

.tk-card__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.tk-card .wp-block-cover__image-background {
	object-fit: cover;
}

/* The labels sit on light artwork — the phone screen especially. A top-weighted
   gradient puts contrast only where the text is, rather than greying the whole
   card out the way a flat dimRatio would. */
.tk-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.66),
		rgba(0, 0, 0, 0.5) 38%,
		rgba(0, 0, 0, 0) 64%
	);
}

.wp-block-cover.tk-card > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2 !important;
}

/* The comp drops the label cap-top 15.5% below the card top. */
.tk-card .wp-block-cover__inner-container {
	padding-top: 9.3%;
}

.tk-card__label {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-weight: 700 !important;
	font-size: 36px !important;
	line-height: 1.383 !important;
	color: #fff;
	margin: 0 !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* The two store buttons under the "App" label. They sit on the phone artwork,
   so each glyph gets a dark pill behind it rather than relying on the card
   gradient, which has already faded out by this depth. */
.tk-stores {
	display: flex;
	justify-content: center;
	gap: clamp(0.5rem, 1.6vw, 0.9rem);
	margin: clamp(0.5rem, 1.4vw, 0.85rem) 0 0;
	padding: 0;
	list-style: none;
}

.tk-stores__item {
	margin: 0;
}

/* The buttons sit directly under the App title, in normal flow. */
.tk-card--app .tk-stores {
	margin-top: clamp(0.35rem, 0.9vw, 0.6rem);
}

.tk-stores__link {
	display: grid;
	place-items: center;
	width: clamp(2rem, 3.6vw, 2.75rem);
	height: clamp(2rem, 3.6vw, 2.75rem);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.tk-stores__link:hover,
.tk-stores__link:focus-visible {
	background: rgba(0, 0, 0, 0.82);
	transform: translateY(-2px);
}

.tk-stores__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.tk-stores__link svg {
	width: 58%;
	height: 58%;
	display: block;
}
.tk-stores__link.tk-stores__link--google-play svg {
  width: 21px;
}

/* Book spines fill the card, cropped top and bottom, as in the design. */
.tk-card--books .wp-block-cover__image-background {
	object-position: center 42%;
}

/* Set the play mark and wordmark side by side in the upper part of the card,
   clear of the Kelee lockup baked into the artwork. */
.tk-card--youtube .wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
}

.tk-card--youtube .tk-card__mark {
	display: block;
	width: 45px;
	height: auto;
	margin: 0;
	flex: none;
}

.tk-card--youtube .tk-card__label {
	font-size: 36px !important;
}

/* ---------------------------------------------------------------------------
 * Study a Living Philosophy
 * ------------------------------------------------------------------------ */

/* The temple photograph sits full-bleed along the bottom edge with the tree
   cut-outs layered over it; the sky colour fills the space above, so the
   heading and the two columns always land on plain sky.

   trees.png is 1600x992, so at full width it always stands 62% of the width
   tall. The comp only shows a 333px band of it on a 1200px page — 27.8% of the
   width — with the rest running off below the section edge. Reserving the
   padding separately is what let the two drift apart: at 768px the artwork
   stood 476px tall against 280px reserved, so it climbed 196px into the body
   copy. Both the offset and the reserved space now derive from
   --tk-artwork-height, so they cannot disagree again. */
.tk-philosophy {
	--tk-artwork-height: clamp(8rem, 27.8vw, 23.5rem);
	--tk-artwork-natural: 62vw;
	position: relative;
	/* The comp leaves roughly 74px between the last line and the pediment. */
	padding-bottom: calc(var(--tk-artwork-height) + var(--wp--preset--spacing--50)) !important;
}

/* The sky and temple live on a pseudo-element rather than the section itself so
   a filter can lift them without touching the text sitting on top. The
   photograph had lost its light and depth; saturation and contrast bring it
   back. Sharpness cannot be recovered here — the source is a 2x upscale of an
   800px original and needs a higher-resolution file. */
.tk-philosophy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* The flat colour lives here rather than on the section so it passes through
	   the same filter as the photograph. Left on the section it stayed
	   unfiltered and showed as a seam where the sky image ends. */
	background-color: #b0dcef;
	background-image: url("../images/trees.png"), url("../images/sky.jpg");
	/* Push the temple down by everything that should fall past the bottom edge,
	   leaving exactly --tk-artwork-height of its top visible. */
	background-position:
		center calc(100% + (var(--tk-artwork-natural) - var(--tk-artwork-height))),
		bottom center;
	background-repeat: no-repeat, no-repeat;
	/* The temple keeps its natural proportions so the band stays the height the
	   comp uses. The sky covers instead: sized to 100% it stopped partway up and
	   left a hard line where its cloud edge met the flat colour. It is a soft
	   gradient, so cropping it is invisible where a seam was not. */
	background-size: 100% auto, cover;
	filter: saturate(1.22) contrast(1.1) brightness(1.03);
}

/* Keep the heading and the columns above the artwork layer. */
.tk-philosophy > * {
	position: relative;
	z-index: 1;
}

/* The grey slab behind this heading has been dropped: the title now sits
   directly on the sky in deep navy. The colour needs !important because the
   stored page content still carries the has-white-color class from when the
   heading sat on a dark background. */
.tk-badge {
	display: inline-block;
	background: none;
	color: var(--wp--preset--color--deep, #0a1f6b) !important;
	padding: 0;
	margin: 0;
	text-wrap: balance;
}

/* The offset existed to cancel the slab's left padding so the heading text
   lined up with every other section heading. With the slab gone the text
   starts at the content edge already, so the offset goes too. */
/* Black on the cloud graphic was too low-contrast to read comfortably. Deep
   navy measures about 13:1 against the pale sky, well past the 4.5:1 needed,
   and keeps the sky visible rather than covering it with a card. !important
   because the stored page content carries has-ink-color on every one of these. */
.tk-philosophy .has-ink-color,
.tk-philosophy .wp-block-column p,
.tk-philosophy .wp-block-column h3 {
	color: var(--wp--preset--color--deep, #0a1f6b) !important;
}

/* The offset existed to cancel the slab's left padding so the heading lined up
   with every other section heading. With the slab gone the text starts at the
   content edge already, so the offset goes too. Position stays relative —
   static would drop the heading out of the stacking order and let the artwork
   layer paint straight over it. */
.tk-philosophy .tk-badge {
	position: relative;
	left: auto;
	z-index: 1;
}

.tk-philosophy__col h3 {
	margin-bottom: 1.4rem;
}

/* The comp sets this copy on a narrow measure — roughly 15 words a line —
   with a full blank line between paragraphs. */
.tk-philosophy__col p {
	max-width: 15.3em;
	margin-inline: auto;
	margin-block: 0 1.5em;
}

.tk-philosophy__col p:last-child {
	margin-bottom: 0;
}

/* The comp sets this single line at 29/26.7, far tighter than the body. */
.tk-philosophy__col .tk-note {
	line-height: 1.086;
}

/* ---------------------------------------------------------------------------
 * A Gift to Everyone
 * ------------------------------------------------------------------------ */

.tk-gift__title {
	/* No text-wrap: balance here — the comp breaks this heading over two long
	   lines, and balancing splits it into three short ones. */
	text-wrap: pretty;
}

.tk-gift__mark img {
	display: block;
	width: min(20.5rem, 58vw);
	height: auto;
	margin-inline: auto;
}

.tk-gift__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.095;
	letter-spacing: 0.06em;
	font-size: clamp(1.1rem, 2.538vw, 2.15rem);
}

.tk-gift__quotes p {
	margin-block: 0 1.5em;
}

.tk-gift__quotes p:last-child {
	margin-bottom: 0;
}

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

.tk-footer {
	position: relative;
	min-height: clamp(15rem, 21.2vw, 17.94rem);
	background-color: var(--wp--preset--color--deep, #0a1f6b);
	background-image: url("../images/water.jpg");
	/* The comp's footer averages rgb(9,29,106) — deep water, not the bright
	   surface. Sampling water.jpg top to bottom, 50% lands on rgb(6,23,102);
	   the 30% used before sampled rgb(21,93,155), which read as turquoise. */
	background-position: center 50%;
	background-size: cover;
	background-repeat: no-repeat;
}

.tk-footer__contact {
	margin: 0;
}

/* Tracking adds a trailing space after the full stop, which pulls the optical
   centre left; the indent puts it back. */
.tk-footer__wordmark {
	text-indent: 0.09em;
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 400 !important;
	line-height: 1.045 !important;
	letter-spacing: 0.09em;
}

.tk-contact-link {
	/* The comp sets this one line in Times New Roman MT Condensed. That font is
	   licensed and cannot be bundled, so it is named first for machines that
	   have it and falls back to Times New Roman everywhere else. */
	font-family: "Times New Roman MT Condensed", "Times New Roman", Tinos, "Liberation Serif", Times, serif;
	font-size: clamp(0.9rem, 1.366vw, 1.16rem);
	line-height: 1.39;
	letter-spacing: 0.044em;
	color: var(--wp--preset--color--cream, #f4efe5);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}

.tk-contact-link:hover,
.tk-contact-link:focus-visible {
	text-decoration: underline;
}

.tk-social {
	display: flex;
	align-items: center;
	gap: 1.15rem;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.tk-social__link {
	display: inline-flex;
	color: #fff;
	transition: opacity 0.2s ease;
}

.tk-social__link:hover,
.tk-social__link:focus-visible {
	opacity: 0.7;
}

/* Footer email and handle, from Theme Options → Contact. */
.tk-contact-details {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.9rem, 1.366vw, 1.16rem);
	line-height: 1.39;
	letter-spacing: 0.044em;
	color: var(--wp--preset--color--cream, #f4efe5);
}

.tk-contact-details__link {
	color: inherit;
	text-decoration: none;
}

.tk-contact-details__link:hover,
.tk-contact-details__link:focus-visible {
	text-decoration: underline;
}

.tk-social svg {
	width: 1.65rem;
	height: 1.65rem;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Contact lightbox
 * ------------------------------------------------------------------------ */

body.tk-modal-open {
	overflow: hidden;
}

.tk-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
}

.wpcf7-form p {
  margin-bottom: 10px;
  margin-top: 15px;
}
/* No-JS fallback: the anchor target reveals the dialog. */
.tk-modal[hidden]:not(:target) {
	display: none;
}

.tk-modal:target,
.tk-modal.is-open {
	display: flex;
}

.tk-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 18, 58, 0.78);
	backdrop-filter: blur(3px);
}

.tk-modal__dialog {
	position: relative;
	/* border-box so the width below is the width on screen, padding included. */
	box-sizing: border-box;
	width: min(30rem, 100%);
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	color: var(--wp--preset--color--ink, #111);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	animation: tk-modal-in 0.22s ease-out;
}

@keyframes tk-modal-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

.tk-modal__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--brand, #57a2d8);
}

.tk-modal__close {
	position: absolute;
	top: 0.65rem;
	right: 0.9rem;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.9rem;
	line-height: 1;
	color: #55606b;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.tk-modal__close:hover,
.tk-modal__close:focus-visible {
	background: #eef2f5;
	color: #111;
}

.tk-modal__notice {
	margin: 0;
}

/* Contact Form 7 fields inside the dialog. */
.tk-modal__body .wpcf7-form label {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	font-weight: 700;
}

/* Marks the required fields. Decorative only — Contact Form 7 already sets
   aria-required on the inputs, so the asterisk is hidden from screen readers
   rather than read out as punctuation. */
.tk-required {
	color: #c0392b;
	margin-inline-start: 0.15em;
}

.tk-modal__body input[type="text"],
.tk-modal__body input[type="email"],
.tk-modal__body input[type="tel"],
.tk-modal__body input[type="url"],
.tk-modal__body textarea {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: inherit;
	background: #fff;
	border: 1px solid #c6d0d8;
	border-radius: 8px;
	box-sizing: border-box;
}

.tk-modal__body input:focus,
.tk-modal__body textarea:focus {
	border-color: var(--wp--preset--color--brand, #57a2d8);
	outline: 2px solid rgba(87, 162, 216, 0.35);
	outline-offset: 1px;
}

.tk-modal__body textarea {
	height: 120px;
	resize: vertical;
}

.tk-modal__body input[type="submit"] {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--brand, #57a2d8);
	border: 0;
	border-radius: 999px;
	padding: 0.75rem 2.25rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.tk-modal__body input[type="submit"]:hover {
	background: #3f8dc6;
}


/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

/* WordPress stacks columns below 782px. On tablets that would turn each card
   into a full-width square, so keep the three cards side by side down to 600px. */
@media (min-width: 600px) and (max-width: 781px) {
	.tk-journey .wp-block-columns {
		flex-wrap: nowrap !important;
		gap: clamp(0.75rem, 2vw, 1.5rem);
	}

	.tk-journey .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	/* Three cards across a tablet leaves each about 216px wide; the comp sets the
	   label at 15.1% of the card. */
	.tk-card__label {
		font-size: clamp(1.4rem, 4.26vw, 2.2rem) !important;
	}
}

/* Below 600px the cards stack to full width, but the label kept its old floor
   of 22.4px and read tiny against a 332px card. Same 15.1% proportion as the
   comp, now measured against the stacked card rather than the column. */


@media (max-width: 1500px) {
.tk-philosophy:before {
 	background-size: 100%;
}
}

@media (max-width: 820px) {
	.tk-nav {
		letter-spacing: 0.04em;
		font-size: 0.9rem;
	}

	/* background-size belongs on ::before now — the section itself no longer
	   paints the artwork, so setting it here did nothing. */
	.tk-philosophy {
	    padding-bottom: 15em !important;
	  }

	.tk-philosophy__col p {
		max-width: none;
	}

	.tk-card__label {
		font-size: 22px !important;
	}

	.tk-card--youtube .tk-card__label {
		font-size: 22px !important;
	}
}

@media (max-width: 599px) {
	.tk-card__label {
		font-size: 30px !important;
	}

	.tk-card--youtube .tk-card__label {
		font-size: 30px !important;
	}
	.tk-footer {
	  background-size: 200%;
	}
	.tk-philosophy {
    padding-bottom: 12em !important;
  }
}

@media (min-width: 1520px) {
.tk-philosophy {
 	padding-bottom: 550px !important;
}
.tk-philosophy:before {
 	background-size: 100%;
}
}

@media (min-width: 1920px) {
.tk-philosophy {
 	padding-bottom: 850px !important;
}
.tk-philosophy:before {
 	background-size: 100%;
}
}

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

	.tk-card,
	.tk-modal__dialog,
	.tk-social__link,
	.tk-nav a {
		transition: none;
		animation: none;
	}
}