/**
 * Tall & Small 2026 — supplemental styles.
 *
 * theme.json handles colors, type, spacing and most block styling. This file
 * covers the few things it can't express: the fade slideshow, the full-width
 * blue nav bar behaviour, the decorative silhouette, brand social icons, and
 * the logo fade-in.
 */

/* ============================================================
   LOGO — inline animated SVG wordmark (GSAP animates the parts)
   ============================================================ */
.ts-logo {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 2rem auto 1.25rem;
	line-height: 0;
}
.ts-logo svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden; /* clip the arrow while it's off-viewBox, so it slides in from the edge */
}

/* ============================================================
   TOP UTILITY BAR — social hearts (left) + Client Area (right)
   ============================================================ */
.ts-social {
	display: flex;
	gap: 0.6rem;
	align-items: center;
}
.ts-social a {
	display: inline-block;
	width: 30px;
	height: 27px;
	line-height: 0;
	transition: filter 0.15s ease-in-out;
}
.ts-social a:hover { filter: contrast(1.4) brightness(0.97); }
.ts-social svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   SEARCH FIELD — pill input, blue border/text (2017 _forms.scss)
   Applies everywhere: header, 404, and search page.
   ============================================================ */
.wp-block-search__inside-wrapper {
	max-width: 220px;
	border: 1px solid var( --wp--preset--color--blue );
	border-radius: 25px;
	overflow: hidden;
	padding-left: 0.75rem;
}
.wp-block-search.aligncenter .wp-block-search__inside-wrapper {
	margin-inline: auto;
}
.wp-block-search__input {
	border: 0;
	background: transparent;
	color: var( --wp--preset--color--blue );
	padding: 0.25em 0.5em 0.25em 0;
}
.wp-block-search__input::placeholder {
	color: var( --wp--preset--color--meta );
	opacity: 1;
}
.wp-block-search__input:focus {
	outline: none;
}
.wp-block-search__button {
	background: transparent;
	color: var( --wp--preset--color--blue );
	border: 0;
	padding: 0 0.6rem;
	min-width: 0;
}
.wp-block-search__button svg { fill: currentColor; }
.wp-block-search__button:hover { color: var( --wp--preset--color--blue-dark ); }

/* ============================================================
   NAVIGATION — full-width blue bar, white uppercase links,
   white underline on hover / current page (faithful to 2017)
   ============================================================ */
.ts-navbar a,
.ts-navbar .wp-block-navigation-item__content {
	color: #fff;
}
/* Vertical padding gives the bar height; with the navbar's own padding at 0,
   the links reach the bar's bottom so the hover line anchors there. */
.ts-navbar .wp-block-navigation-item__content {
	padding-top: 0.9em;
	padding-bottom: 0.9em;
}
.ts-navbar .wp-block-navigation-item__content:hover,
.ts-navbar .wp-block-navigation-item__content:focus,
.ts-navbar .current-menu-item > .wp-block-navigation-item__content,
.ts-navbar .current_page_item > .wp-block-navigation-item__content {
	box-shadow: 0 -5px 0 #fff inset;
	color: #fff;
}
/* Submenu popovers keep readable dark-on-light text */
.ts-navbar .wp-block-navigation__submenu-container a,
.ts-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var( --wp--preset--color--contrast );
}

/* ============================================================
   HERO SLIDESHOW — vanilla-JS cross-fade (replaces Swiper)
   Markup: .ts-slideshow > .ts-slide(.is-active) figure/img
   ============================================================ */
.ts-slideshow {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.ts-slideshow .ts-slides {
	position: relative;
}
.ts-slideshow .ts-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;
	margin: 0;
}
.ts-slideshow .ts-slide:first-child {
	position: relative; /* establishes container height */
}
.ts-slideshow .ts-slide.is-active {
	opacity: 1;
	z-index: 1;
}
.ts-slideshow .ts-slide img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.ts-slideshow .ts-slide-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 2.5rem;
	line-height: 1;
	color: var( --wp--preset--color--blue );
	padding: 0 0.5rem;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}
.ts-slideshow .ts-slide-nav:hover { opacity: 1; }
.ts-slideshow .ts-prev { left: 0.5rem; }
.ts-slideshow .ts-next { right: 0.5rem; }

@media ( prefers-reduced-motion: reduce ) {
	.ts-slideshow .ts-slide { transition: none; }
}

/* ============================================================
   HOME — about photo + signature CTA row
   ============================================================ */
.ts-signature img {
	max-width: 250px;
	height: auto;
}

/* ============================================================
   FOOTER — Virginia map + "as featured in" badges
   ============================================================ */
.ts-virginia {
	width: 100%;
	max-width: 280px;
	aspect-ratio: 280 / 150;
	margin: 0 auto;
	background-image: url( ../images/virginia.svg );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.ts-badges img {
	width: 100%;
	height: auto;
}

/* ============================================================
   DECORATIVE SILHOUETTE — fixed bottom-right on larger screens
   ============================================================ */
.ts-silhouette {
	display: none;
}
@media screen and ( min-width: 40em ) {
	.ts-silhouette {
		display: block;
		position: fixed;
		right: 20px;
		bottom: 0;
		width: 125px;
		height: 180px;
		z-index: -1;
		pointer-events: none;
		background-image: url( ../images/silhouette1.svg );
		background-repeat: no-repeat;
		background-position: bottom right;
		background-size: contain;
	}
}

/* ============================================================
   REVIEWS — star rating + handwriting attribution
   ============================================================ */
.ts-review-stars { color: var( --wp--preset--color--blue ); letter-spacing: 2px; }
.ts-handwrite,
.has-handwriting-font-family {
	font-family: "Nothing You Could Do", cursive;
}

/* ============================================================
   SERVICES GRID — hover caption reveal on thumbnails
   ============================================================ */
.ts-services figure { position: relative; overflow: hidden; margin: 0; line-height: 0; }
.ts-services figure img { display: block; width: 100%; height: auto; transition: filter 0.25s ease; }
.ts-services figure:hover img { filter: brightness(1.08); }
.ts-services figcaption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 0.4em 0.75em;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-family: var( --wp--preset--font-family--geo-sans );
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}
.ts-services figure:hover figcaption { opacity: 1; }

/* ============================================================
   QUERY PAGINATION — 2017 blue-button style (blue text on white,
   solid-blue fill on hover, current page in body-text gray)
   ============================================================ */
.wp-block-query .wp-block-query-pagination {
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 2.5rem;
}
.wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.35rem;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination .page-numbers:not(.dots) {
	padding: 0.55em 0.9em;
	line-height: 1;
	color: var( --wp--preset--color--blue );
	background-color: #fff;
	border: 1px solid var( --wp--preset--color--gray );
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.14s ease, color 0.14s ease;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination a.page-numbers:not(.dots):hover,
.wp-block-query-pagination-previous:focus,
.wp-block-query-pagination-next:focus,
.wp-block-query-pagination a.page-numbers:not(.dots):focus {
	background-color: var( --wp--preset--color--blue );
	color: #fff;
	border-color: var( --wp--preset--color--blue );
}
.wp-block-query-pagination .page-numbers.current {
	color: var( --wp--preset--color--contrast );
	background-color: #fff;
	cursor: default;
}

/* ============================================================
   SEPARATOR — hairline (1px) line, whatever color is chosen
   ============================================================ */
.wp-block-separator:not(.is-style-dots) {
	height: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
}

/* ============================================================
   READING MEASURE
   The default/page width is now wide (contentSize 1250px), so
   images, columns, covers, galleries etc. fill it with no
   per-block work. Long-form TEXT blocks are pulled back to a
   readable measure here — unless the author explicitly marks a
   block Wide/Full (or left/right), which releases the cap.
   Selector covers the front end (.wp-block-post-content) and
   the block editor's root container (.is-root-container).
   ============================================================ */
:where( .wp-block-post-content, .is-root-container ) > :where( p, ul, ol, blockquote ):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: 760px;
	margin-inline: auto;
}

/* ============================================================
   BLOG LISTING — "Read More" styled as the brand blue pill
   (matches the 2017 .blue-btn on the blog index)
   ============================================================ */
.wp-block-read-more {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.4em 1.4em;
	border-radius: 30px;
	background-color: var( --wp--preset--color--blue );
	color: var( --wp--preset--color--base );
	text-decoration: none;
	transition: background-color 0.14s ease-in-out;
}
.wp-block-read-more:hover,
.wp-block-read-more:focus {
	background-color: var( --wp--preset--color--blue-dark );
	color: var( --wp--preset--color--base );
}

/* ============================================================
   SINGLE POST CTA — blue cards (matches 2017 footer-cta)
   ============================================================ */
/* equal-height cards: stretch the card to fill its column */
.ts-cta .wp-block-column {
	display: flex;
}
.ts-cta .wp-block-column > .wp-block-group {
	flex: 1;
}
/* bold heading with a white underline */
.ts-cta h3 {
	font-weight: 700;
	border-bottom: 1px solid #fff;
	padding-bottom: 0.35em;
	margin-bottom: 0.4em;
}
.ts-cta a {
	color: var( --wp--preset--color--base );
}
.ts-cta a:hover,
.ts-cta a:focus {
	color: var( --wp--preset--color--gray );
}
/* large, light-weight service / contact links ("Weddings", "Hit us up!") */
.ts-cta p a {
	display: block;
	text-align: center;
	font-weight: 300;
	line-height: 1.15;
	text-decoration: none;
	font-size: clamp( 1.75rem, 3vw, 2.5rem );
	margin-top: 0.4em;
}
/* white heart share icons with brand-blue glyph knockout */
.ts-share {
	display: flex;
	gap: 0.9rem;
	margin-top: 0.75rem;
}
.ts-share a {
	display: inline-block;
	width: 58px;
	height: 52px;
	line-height: 0;
	transition: transform 0.15s ease;
}
.ts-share a:hover { transform: translateY( -2px ); }
.ts-share .ts-share-icon { display: block; width: 100%; height: 100%; }
.ts-share .heart { fill: #fff; }
.ts-share .glyph { fill: var( --wp--preset--color--blue ); }

/* ============================================================
   COMMENT FORM — rounded blue fields (matches 2017 _forms.scss)
   ============================================================ */
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
	border: 1px solid var( --wp--preset--color--blue );
	border-radius: 25px;
	padding: 0.4em 1em;
	color: var( --wp--preset--color--contrast );
	background-color: #fff;
}
.wp-block-post-comments-form textarea,
.comment-form textarea {
	border: 1px solid var( --wp--preset--color--blue );
	border-radius: 18px;
	padding: 0.6em 1em;
	color: var( --wp--preset--color--contrast );
	background-color: #fff;
}
.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	background-color: var( --wp--preset--color--light-gray );
}