/*
Theme Name: Trellis - Blocks
Description: Based on Blockstarter
Version: 1.2.1

Bump Version on every deploy that changes style.css, a pattern, or an
asset. functions.php enqueues style.css and tabs.js with this value, so
it is what busts Cloudflare's year-long cache for visitors; WordPress
also keys its theme-pattern cache on it, so a new pattern file is not
registered until this changes.
*/

/* Alignfull Compatibility */
body {
    overflow-x: hidden;
}
.entry-content .alignfull,
.trellis-archive .alignfull {
    margin-left: calc( -50vw + 50%);
    margin-right: calc( -50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

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

.editor-styles-wrapper .wp-block-navigation__container > .wp-element-button {
	padding: 0;
}

/* Drop nav */
header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: none !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--initial);
	border-radius: 5px;
	min-width: 200px !important;
	padding-top: .75rem;
	box-shadow: 1px 3px 8px rgba(0,0,0,.1);
}

/* Drop nav submenu */
header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-left: -5px;
	margin-top: calc(var(--wp--preset--spacing--xx-small) * -1);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: var(--wp--preset--spacing--xx-small);
}

header .wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
	padding: var(--wp--preset--spacing--xx-small) var(--wp--preset--spacing--x-small) !important;
}

/* Mobile Navigation */

.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

.is-menu-open.has-modal-open .wp-block-navigation__container ul {
	margin-left: 1rem;
}

.is-menu-open.has-modal-open ul.wp-block-navigation__submenu-container {
	border-radius: 0;
	margin: 5px 0;
}

.is-menu-open.has-modal-open .wp-block-navigation__container > li {
	width: 100%;
	padding: 0 0;
	position: relative;
}

.is-menu-open.has-modal-open .wp-block-navigation__container ul li:hover a:hover:before {
	text-decoration: none;
}

/* Adjust the first mobile menu item to prevent conflict with menu close button */
.is-menu-open.has-modal-open .wp-block-navigation__container > li:first-child > a {
	padding-top: 0 !important;
	max-width: 90%;
}

/* Mobile menu sub menu */
.is-menu-open.has-modal-open .wp-block-navigation-item .wp-block-navigation__submenu-container {
	padding: 0 0 0 var(--wp--preset--spacing--large);
	font-size: var(--wp--preset--font-size--base);
	margin-left: 0;
	width: 100% !important;
}

/* Mobile menu links */
.is-menu-open.has-modal-open .wp-block-navigation-item__content {
	width: 100%;
	padding: var(--wp--preset--spacing--xx-small) 0 !important;
}

/* Mobile menu open button */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 4px;
	border-radius: 3px;
}

.is-menu-open .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--tertiary);
	box-shadow: none !important;
	padding-top: var(--wp--preset--spacing--xx-small);
}

/* Button class on mobile */
.is-menu-open.has-modal-open .wp-block-navigation__container .wp-element-button {
	margin-top: var(--wp--preset--spacing--xx-small);
}

.is-menu-open.has-modal-open .wp-block-navigation__container .wp-element-button .wp-block-navigation-item__content {
	width: 100%;
	text-align: center;
	font-size: var(--wp--preset--font-size--base);
	padding: var(--wp--preset--spacing--xx-small) !important;
}

/* Header */
.site-header {
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/*Transparent Header */
.transparent-header {
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	position: absolute;
}
.transparent-header > .has-background {
	background: transparent !important;
}
.logged-in.admin-bar .transparent-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.logged-in.admin-bar .transparent-header {
	  top: 48px;
	}
}

/* Content */
.hentry .wp-block-post-excerpt__excerpt {
	margin-top: revert !important;
	margin-bottom: revert !important;
}

pre {
	overflow: auto;
}

.wp-caption {
	max-width: 100% !important;
}

/* Meta */
.wp-block-post-author {
	align-items: center;
}

.wp-block-post-author__name {
	margin-bottom: 0;
}

.wp-block-post-author__avatar {
	display: inline-flex;
	align-items: center;
	margin-right: .5rem;
}

.wp-block-post-author__avatar img {
	width: 26px;
	height: 26px;
	border-radius: 100px;
}

/* Style Variations */
.variation-dark .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	color: #fff;
}
.variation-dark .wp-block-site-logo svg path:nth-child(1) {
	stroke: #fff;
}
.variation-dark .wp-block-site-logo svg path:nth-child(2) {
	fill: #fff;
}

.variation-dark #comment {
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--white);
}

/* Patterns */
.hero-image.wp-block-cover {
	margin-top: 0;
}

.fullheight {
	min-height: 100vh;
}

.pattern-categories a {
	text-decoration: none;
}

/* Footer */
footer {
	margin-top: 0 !important;
}

@media only screen and (min-width: 600px) {
	header .wp-block-navigation :where(.wp-block-navigation__submenu-container) li:last-child {
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.is-content-justification-space-between .site-meta {
		flex: 0 0 25%;
	}
	footer .wp-block-search__inside-wrapper {
		width: 50%;
	}
	.sidebar .wp-block-search__inside-wrapper {
		width: 80%;
	}
}

/* ==========================================================================
   Trellis
   ========================================================================== */

/* Sticky header (promo bar + header bar) */
.site-header-sticky {
	z-index: 99;
}
.admin-bar .site-header-sticky {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .site-header-sticky {
		top: 46px;
	}
}

/* Promo bar */
.promo-bar a {
	font-weight: 400;
}

/* Contact pill button in the nav */
.wp-block-navigation .nav-contact-button a.wp-block-navigation-item__content {
	background-color: #4F5363;
	color: #fff;
	border-radius: 48px;
	padding: 10px 22px;
}
.wp-block-navigation .nav-contact-button a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--primary);
	color: #fff;
}

/* Footer */
.site-footer .wp-block-social-links .wp-block-social-link a {
	color: #fff;
}
.site-footer .gform_wrapper input[type="text"],
.site-footer .gform_wrapper input[type="email"] {
	background: #FCFCFC;
	border: none;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: var(--wp--preset--font-size--small);
}
.site-footer .gform_wrapper .gform_footer input[type="submit"],
.site-footer .gform_wrapper .gform_button,
.entry-content .gform_wrapper .gform_footer input[type="submit"],
.entry-content .gform_wrapper .gform_button {
	background: #4F5363;
	color: #fff;
	border: 1px solid #6A6C76;
	border-radius: 24px;
	padding: 8px 12px;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}
.entry-content .gform_wrapper .gform_footer input[type="submit"]:hover,
.site-footer .gform_wrapper .gform_footer input[type="submit"]:hover {
	background: #871B1B;
}
.site-footer .gform_wrapper .gfield_label {
	display: none;
}

/* Uppercase post date */
.wp-block-post-date {
	letter-spacing: .02em;
}

/* Hero cover headings/subtitles carry a soft text shadow for readability
   against busy photos (BB relied on this + an overlay we now also apply). */
.hero-image h1, .hero-image h2, .hero-image h3, .hero-image p {
	text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

/* Details blocks (converted BB accordions/tabs) */
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: var(--wp--preset--font-size--large);
	padding: 8px 0;
	cursor: pointer;
}
.wp-block-details h3, .wp-block-details h4 {
	font-size: 24px;
}

/* BB hero rows are content-driven; override core cover default 430px min-height */
.entry-content .wp-block-cover.hero-image,
.trellis-archive .wp-block-cover.hero-image {
	min-height: 0;
}

/* Wisdom Sessions details content headings (was .fl-tabs-panel h3) */
.page-id-1656 .wp-block-details h3,
.page-id-1656 .wp-block-details h4 {
	color: #8d2928;
}

/* No bands between full-bleed sections: BB rows stack flush */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.site-header-sticky > * {
	margin-block-start: 0 !important;
}
.entry-content > .alignfull,
.trellis-archive > .alignfull,
main > .wp-block-post-content {
	margin-block-start: 0;
}

/* BB only equalised column heights when a column asked for vertical centring;
   otherwise columns sized to their own content. */
.entry-content .bb-cols,
.trellis-archive .bb-cols {
	align-items: flex-start;
}
.entry-content .bb-cols > .wp-block-column.col-vcenter,
.trellis-archive .bb-cols > .wp-block-column.col-vcenter {
	align-self: stretch;
}

/* Cards in the "how can I partner" pattern do sit equal-height side by side */
.trellis-cta-cards > .wp-block-column > .wp-block-group {
	height: 100%;
}

/* Imagify serves WebP by wrapping the <img> in a <picture>, copying the img's
   class and inline style onto the wrapper. Core puts the featured image's
   aspectRatio/objectFit sizing in that inline style, and it is inert on an
   inline <picture>, so the crop is silently lost. Re-assert it here. */
.wp-block-post-featured-image picture {
	display: block;
}
.wp-block-post-featured-image picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Equal-height cards in query grids (articles) */
.wp-block-post-template.is-layout-grid > .wp-block-post {
	display: flex;
}
/* Match any direct child, not just a group: the podcast grid's item is a bare
   <figure>, which as a flex item sized to its content and left the artwork at
   roughly half the column width with dead space beside it. */
.wp-block-post-template.is-layout-grid > .wp-block-post > * {
	width: 100%;
	height: auto;
}

/* Post-grid columns collapse before they get cramped: matches BB's own
   post_columns_medium / post_columns_responsive settings (2 cols down to
   ~992px, 1 col below ~768px), so cards never fight for space inside a
   narrow sidebar-style column (e.g. the Podcast page's 67% grid column). */
@media (max-width: 992px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 768px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}
	.entry-content .bb-cols,
	.trellis-archive .bb-cols {
		flex-wrap: wrap;
	}
	.entry-content .bb-cols > .wp-block-column,
	.trellis-archive .bb-cols > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Once the columns stack, an overhanging image has nothing to overhang
	   into: its negative margins would drag the text below up under the
	   photo, and the extra margin a card carries to clear the previous
	   card's overhang would just be dead space. The image goes back inside
	   its band instead, and stacked cards get an ordinary gap. */
	.trellis-overhang-image {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 40px !important;
		padding-bottom: 20px !important;
	}
	.trellis-overhang {
		margin-top: 0 !important;
	}
	.trellis-overhang + .trellis-overhang {
		margin-top: 40px !important;
	}
	/* Modules carry 80px top and bottom on desktop, 40px on a phone. The
	   same-background and breadcrumb rules above are more specific, so they
	   still win where a module drops its top padding. */
	.trellis-module {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
	/* A Section Intro's title can carry wide side padding on desktop (Wisdom
	   Sessions uses 100px a side to keep its line short). On a phone that
	   squeezes the heading into a narrow column, so it gets the full width. */
	.trellis-lead-in > .wp-block-group:first-child {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* A mirrored (flipped) card has its text first in the markup so the photo
	   lands on the right on desktop. Stacked, the photo always leads. */
	.bb-cols > .wp-block-column:has(> .trellis-overhang-image) {
		order: -1;
	}
	/* Equal-height boxes (the white services row) sit flush on desktop; once
	   stacked they need air between them. */
	.entry-content .bb-cols.bb-cols-equal > .wp-block-column + .wp-block-column {
		margin-top: 24px;
	}
}

/* Vertical tabs (Wisdom Sessions) — recreates the BB tabs module:
   transparent label rail on the row colour, white panel area, active
   label white so it reads as one card with the panel. */
.trellis-tabs {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.trellis-tabs__labels {
	flex: 0 0 348px;
	max-width: 348px;
	display: flex;
	flex-direction: column;
}
.trellis-tabs__label {
	background: transparent;
	border: 0;
	color: #494c66;
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 24px;
	line-height: 1.4;
	padding: 12px 18px;
	text-align: left;
	cursor: pointer;
	width: 100%;
}
.trellis-tabs__label:hover {
	color: #861b1a;
}
.trellis-tabs__label.is-active {
	background: #fff;
	color: #861b1a;
}
.trellis-tabs__panels {
	flex: 1 1 auto;
	min-width: 0;
	background: #fff;
}
/* Label rail and panel start level; no inherited block gap between them */
.trellis-tabs > .wp-block-group {
	margin-block-start: 0;
}
/* Only one panel shows at a time, so the block gap WordPress puts above every
   panel after the first would just leave a white strip under the labels. */
.trellis-tabs__panels > * {
	margin-block-start: 0 !important;
}
.trellis-tabs__panel {
	padding: 8px 48px 48px;
}
.trellis-tabs__panel h3 {
	margin: 12px 0 24px;
	font-size: 24px;
	color: #8d2928;
}

@media (max-width: 781px) {
	/* Stacked vertically the labels pushed the panel a full screen away from
	   the tab that opened it. On mobile the labels become one scrolling row
	   directly above the panel; the active label is white, so it still reads
	   as one card with the panel below it. */
	.trellis-tabs {
		display: block;
	}
	.trellis-tabs__labels {
		flex-direction: row;
		flex-basis: auto;
		max-width: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.trellis-tabs__labels::-webkit-scrollbar {
		display: none;
	}
	/* WordPress puts its block gap above every sibling after the first; in a
	   column that is the spacing between labels, in a row it knocks tabs
	   2-5 20px lower than the first. */
	.trellis-tabs__labels > * {
		margin-block-start: 0 !important;
	}
	.trellis-tabs__label {
		flex: 0 0 auto;
		width: auto;
		white-space: nowrap;
		font-size: 20px;
		padding: 12px 16px;
	}
	.trellis-tabs__panel {
		padding: 8px 24px 32px;
	}
}

/* Questions List pattern: plain heading+paragraph Q&A pairs authored directly
   in a column, so vertical rhythm and the question colour come from this
   class rather than from per-block styling. Columns deliberately don't carry
   bb-cols (that class zeroes margin-block-start on its children for BB rows
   whose own padding boxes supplied spacing; here the plain headings/
   paragraphs need their own margin to read as separate Q&A pairs). */
.trellis-questions h3 {
	color: #861b1a;
}
.trellis-questions .wp-block-column {
	padding: 20px 0;
}
.trellis-questions .wp-block-column h3 {
	margin-top: 28px;
	margin-bottom: 8px;
}
.trellis-questions .wp-block-column h3:first-child {
	margin-top: 0;
}
.trellis-questions .wp-block-column p {
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 20px;
}

/* Forms on dark rows: white supporting text, readable inputs */
.entry-content .has-background[style*="#4f5363"] .gform_wrapper,
.entry-content .has-background[style*="#4F5363"] .gform_wrapper,
.entry-content .has-background[style*="rgb(79, 83, 99)"] .gform_wrapper {
	color: #fff;
}
.entry-content .has-background[style*="#4f5363"] .gform_wrapper .gfield_label,
.entry-content .has-background[style*="#4f5363"] .gform_wrapper .gfield_description,
.entry-content .has-background[style*="#4f5363"] .gform_wrapper .gform-field-label,
.entry-content .has-background[style*="#4f5363"] .gform_wrapper legend,
.entry-content .has-background[style*="#4f5363"] .gform_wrapper p {
	color: #fff;
}
.entry-content .has-background[style*="#4f5363"] .gform_wrapper input[type="text"],
.entry-content .has-background[style*="#4f5363"] .gform_wrapper input[type="email"],
.entry-content .has-background[style*="#4f5363"] .gform_wrapper input[type="tel"],
.entry-content .has-background[style*="#4f5363"] .gform_wrapper textarea,
.entry-content .has-background[style*="#4f5363"] .gform_wrapper select {
	background: #fcfcfc;
	color: #444;
	border: none;
	border-radius: 4px;
}

/* BB columns centre their content but still fill the row height, so a quote
   beside a video reads as one contained row and its panel runs full height. */
.wp-block-column.col-vcenter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: stretch;
}
/* Only a lone panel fills the column. With several modules stacked, letting
   each one grow would spread them apart instead of keeping them bunched. */
.wp-block-column.col-vcenter > .wp-block-group:only-child {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Dark slate rows carry white copy (BB set this per module) */
.entry-content .has-background[style*="#4f5363"],
.entry-content .has-background[style*="#4F5363"] {
	color: #fff;
}
.entry-content .has-background[style*="#4f5363"] p,
.entry-content .has-background[style*="#4f5363"] li,
.entry-content .has-background[style*="#4f5363"] h1,
.entry-content .has-background[style*="#4f5363"] h2,
.entry-content .has-background[style*="#4f5363"] h3,
.entry-content .has-background[style*="#4f5363"] h4 {
	color: #fff;
}
.entry-content .has-background[style*="#4f5363"] .gform_wrapper input[type="text"],
.entry-content .has-background[style*="#4f5363"] .gform_wrapper input[type="email"],
.entry-content .has-background[style*="#4f5363"] .gform_wrapper textarea {
	color: #444;
}

/* Tabs sit clear of the intro copy above them. Padding on the tabs themselves
   (not a margin) keeps the gap inside the coloured row instead of escaping it
   as a white band, and beats the row's inline padding. */
.entry-content .trellis-tabs {
	padding-top: 30px;
}

/* Last content row runs straight into the footer */
.wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

/* Text-only column rows get a readable gutter; media rows stay flush
   so a video and its quote read as one block. */
.entry-content .wp-block-columns:not(:has(.wp-block-embed)):not(:has(figure)) {
	column-gap: 24px;
}

/* Rows made of side-by-side cards equalise; a lone card beside body copy does not. */
.entry-content .bb-cols-equal {
	align-items: stretch;
}
.entry-content .bb-cols-equal > .wp-block-column > .wp-block-group {
	height: 100%;
}

/* Inside converted columns the module padding boxes supply all the spacing,
   so no extra block gap between stacked modules. */
.entry-content .bb-cols > .wp-block-column {
	gap: 0;
}
.entry-content .bb-cols > .wp-block-column > * {
	margin-block-start: 0;
}

/* A little more breathing room on mobile: content, header, and footer all
   read off the same --wp--style--root--padding-* variables (that's what
   keeps them flush with each other on desktop), so bumping it here widens
   the gutter everywhere at once instead of touching each pattern. */
@media (max-width: 768px) {
	body {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* Module spacing. Every module (.trellis-module) carries the same 80px of
   padding top and bottom, set inline. Where a module sits directly on another
   with the same background, the two paddings would stack into 160px of
   nothing, so the lower module drops its top padding and the gap stays 80px.
   A change of background keeps the full padding on both sides. CSS cannot
   compare two backgrounds, so each tone is spelled out: white (no background),
   light grey (#e4e5e7) and dark slate (#4f5363). The padding is inline on each
   module, hence !important.

   A Section Intro (.trellis-lead-in) is a title for what follows it. When that
   module has the same background it also drops its bottom padding, so the two
   read as one section. */
.trellis-module:not(.has-background) + .trellis-module:not(.has-background),
:is(.trellis-module.has-secondary-background-color, .trellis-module[style*="e4e5e7" i])
	+ :is(.trellis-module.has-secondary-background-color, .trellis-module[style*="e4e5e7" i]),
.trellis-module[style*="4f5363" i] + .trellis-module[style*="4f5363" i] {
	padding-top: 0 !important;
}
.trellis-lead-in:not(.has-background):has(+ .trellis-module:not(.has-background)),
.trellis-lead-in:is(.has-secondary-background-color, [style*="e4e5e7" i]):has(
		+ :is(.trellis-module.has-secondary-background-color, .trellis-module[style*="e4e5e7" i])
	),
.trellis-lead-in[style*="4f5363" i]:has(+ .trellis-module[style*="4f5363" i]) {
	padding-bottom: 0 !important;
}

/* The breadcrumb already ends with 20px of its own, so the module right under
   it (when it sits on white) starts 20px lower instead of a full 80px. */
.trellis-breadcrumb + .trellis-module:not(.has-background) {
	padding-top: 20px !important;
}

/* The one decorative touch in the Three Columns pattern: a short maroon rule
   above each column's text (a core/separator carrying .trellis-accent). */
.trellis-three-columns hr.wp-block-separator.trellis-accent {
	width: 48px;
	height: 3px;
	margin: 0 0 20px;
	border: 0;
	background-color: #861b1a;
	opacity: 0.8;
}

/* The services-boxes subtitle is capped so it breaks after the comma
   ("…authentic self," / "through thoughtful conversations…") instead of
   running the full 1100px. 600px clears the first clause (~560px at 18px
   Inter) but not the word "through" (~630px). */
.services-boxes-subtitle {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}