/*
Theme Name: Tee Corley Travels
Theme URI: https://www.teecorleytravels.com
Author: Tee Corley
Author URI: https://www.teecorleytravels.com
Description: A block theme for a wildlife photography and van life site. Carries the cream-and-forest palette and Poppins typography of the original Squarespace build, and adds a faceted photograph library that scales to thousands of images.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tee-corley-travels
Tags: blog, photography, portfolio, block-patterns, full-site-editing, one-column, custom-colors, custom-menu, featured-images, editor-style, accessibility-ready
*/

/*
 * Block themes take almost all their styling from theme.json. What lives here
 * is only what theme.json cannot express: layout primitives for the gallery,
 * the filter UI, and a handful of interaction states.
 */

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

html {
	scroll-behavior: smooth;
}

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

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* Never let a wide media element create a horizontal scrollbar. This is the
   single most common cause of "it looks fine in the editor but broken on my
   phone" — the editor canvas is wider than a phone, so overflow never shows. */
img,
video,
iframe,
svg,
figure,
table,
pre {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Long unbroken strings (URLs, scientific names) must wrap rather than push. */
p,
li,
h1,
h2,
h3,
h4,
h5,
h6,
dd,
dt,
figcaption,
blockquote {
	overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--rust );
	outline-offset: 3px;
	border-radius: 1px;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto !important;
	clip-path: none;
	background: var( --wp--preset--color--forest );
	color: var( --wp--preset--color--cream );
	font-size: var( --wp--preset--font-size--small );
	text-decoration: none;
}

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

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

.tct-header {
	position: relative;
	z-index: 20;
}

.tct-header .custom-logo {
	height: var( --wp--custom--header--logo-height );
	width: auto;
	max-width: min( 320px, 60vw );
	object-fit: contain;
}

/* Header sitting over a hero image: invert to cream and add a legibility scrim. */
.tct-header--overlay {
	position: absolute;
	/* Offset by the admin bar when it is present. Without this the overlay
	   header is positioned against the document while the hero below it is
	   pushed down by the bar's margin, so a logged-in author sees the header
	   floating above the image it is supposed to sit on. Logged-out visitors
	   are unaffected, which is exactly why it is easy to ship by accident. */
	inset: var( --wp-admin--admin-bar--height, 0px ) 0 auto;
	background: linear-gradient( 180deg, rgba( 30, 40, 33, 0.45 ) 0%, rgba( 30, 40, 33, 0 ) 100% );
}

.tct-header--overlay,
.tct-header--overlay a,
.tct-header--overlay .wp-block-site-title a {
	color: var( --wp--preset--color--cream );
}

/* The logo is an image, so the colour inversion above cannot reach it. A dark
   logo over a dark hero is invisible — which is why the Squarespace build kept
   a separate white logo file. Rendering it to solid white in CSS achieves the
   same thing without a second asset to keep in sync, and keeps working if the
   logo is ever replaced. */
.tct-header--overlay .custom-logo {
	filter: brightness( 0 ) invert( 1 );
}

/* Give both the logo and the nav a slight shadow so they stay legible over a
   bright patch of sky or grass. */
.tct-header--overlay .custom-logo,
.tct-header--overlay .wp-block-navigation {
	filter: brightness( 0 ) invert( 1 ) drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.45 ) );
}

.tct-header--overlay .wp-block-navigation {
	filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, 0.5 ) );
}

/* ---------------------------------------------------------------------------
   Navigation
   --------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.35rem;
	border-bottom: 1px solid transparent;
	transition: border-color var( --wp--custom--transition );
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: currentColor;
}

/* The mobile overlay menu needs the site's own palette, not core defaults. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--cream ) !important;
	color: var( --wp--preset--color--forest ) !important;
	padding: var( --wp--preset--spacing--50 ) var( --wp--custom--gutter );
}

.wp-block-navigation__responsive-container.is-menu-open a {
	color: var( --wp--preset--color--forest ) !important;
	font-size: var( --wp--preset--font-size--x-large );
}

.wp-block-navigation__responsive-container-content {
	padding-top: var( --wp--preset--spacing--40 );
}

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

.tct-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp( 380px, 62vh, 640px );
	text-align: center;
	isolation: isolate;
}

.tct-hero .wp-block-cover__image-background {
	object-position: center 40%;
}

.tct-hero__inner {
	max-width: 46rem;
}

/* ---------------------------------------------------------------------------
   Photograph gallery
   --------------------------------------------------------------------------- */

.tct-gallery {
	--tct-gap: var( --wp--custom--gallery--gap );

	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --wp--custom--gallery--column-min ), 1fr ) );
	gap: var( --tct-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A photography grid reads better when tall and wide frames keep their shape,
   so cells are square-cropped for rhythm and the full frame shows on the
   single-photo view. */
.tct-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var( --wp--preset--color--cream-warm );
	border-radius: 2px;
}

.tct-gallery__link {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	text-decoration: none;
	overflow: hidden;
}

.tct-gallery__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 420ms cubic-bezier( 0.2, 0.6, 0.35, 1 );
}

@media ( hover: hover ) {
	.tct-gallery__link:hover img,
	.tct-gallery__link:focus-visible img {
		transform: scale( 1.045 );
	}
}

.tct-gallery__caption {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem 0.85rem 0.7rem;
	background: linear-gradient( 180deg, rgba( 30, 40, 33, 0 ) 0%, rgba( 30, 40, 33, 0.82 ) 100% );
	color: var( --wp--preset--color--cream );
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.4;
	opacity: 0;
	transition: opacity var( --wp--custom--transition );
}

.tct-gallery__link:hover .tct-gallery__caption,
.tct-gallery__link:focus-visible .tct-gallery__caption {
	opacity: 1;
}

/* Touch devices have no hover, so the caption must simply be visible. */
@media ( hover: none ) {
	.tct-gallery__caption {
		opacity: 1;
	}
}

/* Masonry variant for the tighter editorial grid on the home page.
   column-fill: balance stops the browser filling column one to full height
   before starting column two, which is what leaves a single photo dangling
   under an otherwise tidy grid. */
.tct-gallery--masonry {
	display: block;
	columns: 3 240px;
	column-gap: var( --tct-gap );
	column-fill: balance;
}

/* Multi-column collapses to a single ragged column on narrow screens, so
   below the tablet breakpoint the masonry grid becomes a real two-up grid. */
@media ( max-width: 600px ) {
	.tct-gallery--masonry {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		columns: auto;
	}

	.tct-gallery--masonry .tct-gallery__item {
		margin-bottom: 0;
	}

	.tct-gallery--masonry .tct-gallery__link {
		aspect-ratio: 1 / 1;
	}

	.tct-gallery--masonry .tct-gallery__link img {
		height: 100%;
		object-fit: cover;
	}
}

.tct-gallery--masonry .tct-gallery__item {
	margin-bottom: var( --tct-gap );
	break-inside: avoid;
}

.tct-gallery--masonry .tct-gallery__link {
	aspect-ratio: auto;
}

.tct-gallery--masonry .tct-gallery__link img {
	height: auto;
}

/* ---------------------------------------------------------------------------
   Faceted filter
   --------------------------------------------------------------------------- */

.tct-filter {
	margin-block: var( --wp--preset--spacing--40 );
	font-size: var( --wp--preset--font-size--small );
}

.tct-filter__bar {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--20 );
	align-items: flex-end;
}

.tct-filter__group {
	flex: 1 1 190px;
	min-width: 0;
}

.tct-filter__label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	opacity: 0.75;
}

.tct-filter__select {
	width: 100%;
	padding: 0.6rem 2rem 0.6rem 0.75rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--forest );
	background-color: transparent;
	background-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path d="M1 1.5 6 6.5l5-5" fill="none" stroke="%232C3A30" stroke-width="1.4" stroke-linecap="round"/></svg>' );
	background-repeat: no-repeat;
	background-position: right 0.7rem center;
	background-size: 12px 8px;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 28%, transparent );
	border-radius: 2px;
	appearance: none;
	cursor: pointer;
}

.tct-filter__select:hover {
	border-color: var( --wp--preset--color--rust );
}

.tct-filter__actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.tct-filter__reset {
	padding: 0.6rem 1rem;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--forest );
	background: none;
	border: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 28%, transparent );
	border-radius: 2px;
	cursor: pointer;
	transition: border-color var( --wp--custom--transition ), color var( --wp--custom--transition );
}

.tct-filter__reset:hover {
	border-color: var( --wp--preset--color--rust );
	color: var( --wp--preset--color--rust );
}

/* Active facet chips */
.tct-filter__active {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var( --wp--preset--spacing--20 );
	padding: 0;
	list-style: none;
}

.tct-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.6rem;
	font-size: var( --wp--preset--font-size--x-small );
	background: var( --wp--preset--color--sand );
	color: var( --wp--preset--color--forest );
	border-radius: 999px;
	text-decoration: none;
}

.tct-chip__remove {
	font-size: 1.05em;
	line-height: 1;
	opacity: 0.65;
}

.tct-chip:hover .tct-chip__remove {
	opacity: 1;
}

.tct-filter__count {
	margin-top: var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Loading state while results are being fetched. */
.tct-gallery[ aria-busy='true' ] {
	opacity: 0.45;
	transition: opacity var( --wp--custom--transition );
}

/* ---------------------------------------------------------------------------
   Single photograph
   --------------------------------------------------------------------------- */

.tct-photo__frame img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 84vh;
	object-fit: contain;
	background: var( --wp--preset--color--forest-deep );
}

.tct-photo__facets {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30 );
	margin-block: var( --wp--preset--spacing--30 );
	padding: 0;
	list-style: none;
}

.tct-photo__facet {
	flex: 0 1 auto;
}

.tct-photo__facet-label {
	display: block;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.tct-photo__facet-terms {
	font-size: var( --wp--preset--font-size--medium );
}

/* Camera settings read as a spec strip. */
.tct-photo__exif {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var( --wp--preset--spacing--30 );
	margin-block: var( --wp--preset--spacing--30 );
	padding-top: var( --wp--preset--spacing--20 );
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 18%, transparent );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.03em;
	opacity: 0.75;
}

.tct-photo__exif dt {
	display: inline;
	font-weight: 500;
}

.tct-photo__exif dt::after {
	content: ' ';
}

.tct-photo__exif dd {
	display: inline;
	margin: 0 0.75rem 0 0;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.tct-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: color-mix( in srgb, var( --wp--preset--color--cream-warm ) 60%, transparent );
	border-radius: 2px;
	overflow: hidden;
	transition: transform var( --wp--custom--transition ), box-shadow var( --wp--custom--transition );
}

@media ( hover: hover ) {
	.tct-card:hover {
		transform: translateY( -3px );
		box-shadow: var( --wp--preset--shadow--soft );
	}
}

.tct-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1 1 auto;
	padding: var( --wp--preset--spacing--30 );
}

.tct-card__eyebrow {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --wp--preset--color--rust );
}

/* ---------------------------------------------------------------------------
   Archive intro / term headers
   --------------------------------------------------------------------------- */

.tct-archive-intro {
	max-width: 52rem;
}

.tct-term-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --wp--preset--font-size--small );
}

.tct-term-nav a {
	text-decoration: none;
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--rust ) 45%, transparent );
}

.tct-term-nav a:hover {
	border-bottom-color: currentColor;
}

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

.tct-footer {
	font-size: var( --wp--preset--font-size--small );
}

.tct-footer a {
	text-decoration: none;
}

.tct-footer a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------------- */

.tct-measure {
	max-width: 40rem;
}

.tct-eyebrow {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var( --wp--preset--color--rust );
}

/* Print: the photographs are the point. */
@media print {
	.tct-header,
	.tct-footer,
	.tct-filter,
	.wp-block-navigation {
		display: none !important;
	}
}

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

/* The footer nav is a list for semantics, not for bullets. */
.tct-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------------------
   Instagram reels
   --------------------------------------------------------------------------- */

/* Measured against the Squarespace original: four 285px columns inside the
   1200px container, 20px apart, 9:16 tiles with square corners. */
.tct-reels__grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 10rem, 1fr ) );
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* An explicit column count is honoured only where there is room for it; on
   narrow screens the auto-fit rule above always wins. */
@media ( min-width: 700px ) {
	.tct-reels__grid--cols-2 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.tct-reels__grid--cols-3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.tct-reels__grid--cols-4 {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.tct-reels__grid--cols-5 {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	}

	.tct-reels__grid--cols-6 {
		grid-template-columns: repeat( 6, minmax( 0, 1fr ) );
	}
}

.tct-reels__item {
	margin: 0;
}

.tct-reels__link {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background: color-mix( in srgb, currentColor 12%, transparent );
	text-decoration: none;
	color: inherit;
}

.tct-reels__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

@media ( hover: hover ) {
	.tct-reels__link:hover .tct-reels__image,
	.tct-reels__link:focus-visible .tct-reels__image {
		transform: scale( 1.04 );
	}
}

/* The play mark is what tells a visitor these are videos rather than more
   photographs, so it stays visible rather than appearing on hover. Centred and
   outlined, as on the Squarespace original. */
.tct-reels__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	pointer-events: none;
}

.tct-reels__play svg {
	width: 2.75rem;
	height: 2.75rem;
	filter: drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.45 ) );
}

.tct-reels__caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem 0.6rem 0.6rem;
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.35;
	color: var( --wp--preset--color--cream );
	background: linear-gradient( to top, rgba( 30, 40, 33, 0.85 ), transparent );
	opacity: 0;
	transition: opacity 0.3s ease;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tct-reels__link:hover .tct-reels__caption,
.tct-reels__link:focus-visible .tct-reels__caption {
	opacity: 1;
}

/* No hover on touch, so the caption would otherwise never be readable. */
@media ( hover: none ) {
	.tct-reels__caption {
		opacity: 1;
	}
}

.tct-reels__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin: 0 0 var( --wp--preset--spacing--50 );
}

/* When the button sits under the grid instead, the margin flips. */
.tct-reels__grid + .tct-reels__cta {
	margin: var( --wp--preset--spacing--50 ) 0 0;
}

.tct-reels__follow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The theme has no global border-box reset, so without this the min-width
	   and padding add up and the button outgrows the Squarespace original. */
	box-sizing: border-box;
	min-width: 18rem;
	min-height: 3.9rem;
	padding: 0.5rem 2rem;
	border-radius: 6px;
	background: var( --wp--preset--color--rust );
	color: var( --wp--preset--color--cream );
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.tct-reels__follow:hover,
.tct-reels__follow:focus-visible {
	background: var( --wp--preset--color--forest );
	color: var( --wp--preset--color--cream );
}

@media ( max-width: 600px ) {
	.tct-reels__follow {
		min-width: 0;
		width: 100%;
	}
}

.tct-reels__followers {
	font-size: var( --wp--preset--font-size--small );
	opacity: 0.75;
}