/*
Theme Name: Ollie TS
Template: ollie
Description: Ollie child theme with a Tailscale-style look for Orchestra Solutions.
Version: 0.1.0
Requires at least: 6.6
Text Domain: ollie-ts
License: GNU General Public License v2 or later
*/

/*
 * Design tokens, element and block styles live in theme.json and styles/.
 * This file only holds what theme.json cannot express: pseudo elements,
 * child selectors, transitions and plugin (Menu Designer) markup.
 */

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

/* Anchor links land below the sticky header, and scroll smoothly */
html {
	scroll-padding-top: calc(var(--ts-header-h, 81px) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

a {
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

a:where(:not(.wp-element-button)):hover {
	opacity: 0.8;
}

.wp-element-button,
.wp-block-button__link {
	transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1), opacity .2s;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-alt);
	outline-offset: 2px;
}

::selection {
	background: var(--wp--preset--color--blue-pale);
}

/* Block styles (see styles/blocks/*.json for the token part)
---------------------------------------------------------------------------- */

/* Button: Text Link */
.is-style-ts-button-text .wp-block-button__link {
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.is-style-ts-button-text .wp-block-button__link:hover {
	opacity: 0.8;
}

/* Paragraph/Heading: Eyebrow With Rule - a hairline fills the rest of the row */
.is-style-ts-eyebrow-rule {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.is-style-ts-eyebrow-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--border-light);
}

/* List: Menu Links - full-width link rows with a grey hover fill */
.wp-block-list.is-style-ts-menu-list {
	list-style: none;
	margin-left: -0.75rem;
	margin-right: -0.75rem;
}

.is-style-ts-menu-list li {
	margin: 0;
}

/* Dropdown panels sit inside the Navigation block, where core resets every
   list's margins (.wp-block-navigation ul). Restore the gap between a column
   label and its links; it matches the columns' 1.25rem block spacing. */
.wp-block-ollie-mega-menu__menu-container .wp-block-column > .is-style-ts-menu-list:not(:first-child) {
	margin-top: 1.25rem;
}

/* Wide dropdowns span the content width, but the visible panel is narrower
   (patterns/menu-*.php center it). Only the panel takes the mouse, so moving
   off it to the side counts as leaving the menu. */
.wp-block-ollie-mega-menu__menu-container.menu-width-wide {
	pointer-events: none;
}

.wp-block-ollie-mega-menu__menu-container.menu-width-wide .is-style-ts-menu-panel {
	pointer-events: auto;
}

/* Until Menu Designer's script centers them, the hidden wide dropdowns sit
   off to the right and flash a horizontal scrollbar while the page loads.
   Once placed they fit the bar, so clipping it sideways loses nothing. */
.site-header .is-position-sticky {
	overflow-x: clip;
}

.is-style-ts-menu-list a {
	display: block;
	padding: 0.75rem;
	border-radius: var(--wp--preset--border-radius--sm);
	color: inherit;
	text-decoration: none;
	transition: background-color .2s;
}

.is-style-ts-menu-list a:hover {
	opacity: 1;
	background: var(--wp--preset--color--primary-accent);
}

/* Group: Menu Panel - clip the footer strip to the rounded corners */
.is-style-ts-menu-panel {
	overflow: hidden;
}

/* Post Terms: Tag - pastel pills */
.wp-block-post-terms.is-style-ts-tag {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.is-style-ts-tag .wp-block-post-terms__separator {
	display: none;
}

.is-style-ts-tag a {
	display: inline-block;
	padding: 0.375rem 0.5rem;
	line-height: 1;
	border-radius: var(--wp--preset--border-radius--xs);
	background: var(--wp--preset--color--green-pale);
	color: var(--wp--preset--color--forest);
	text-decoration: none;
}

.is-style-ts-tag a:hover {
	opacity: 1;
	background: var(--wp--preset--color--green-pale);
	filter: brightness(0.96);
}

/* Core blocks
---------------------------------------------------------------------------- */

/* Details: FAQ row with a round dark chevron */
.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8.5l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
	transition: transform .2s;
}

.wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

.wp-block-details > :not(summary) {
	color: var(--wp--preset--color--secondary);
}

/* Search input */
.wp-block-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--border-medium);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: 0.625rem 1rem;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--base);
}

.wp-block-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--secondary);
	outline: none;
}

/* Table: hairline rows, tinted header */
.wp-block-table table {
	border-collapse: collapse;
}

/* Table text one step under body text. Ollie's core-table.css sets x-small on
   the table, which beats the "small" size in theme.json. */
.wp-block-table > table {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding: 0.75rem;
}

.wp-block-table th {
	text-align: left;
	font-weight: 500;
	background: var(--wp--preset--color--tertiary);
}

/* Header navigation (Menu Designer)
---------------------------------------------------------------------------- */

/* Nav items: 14px/500, 10px 12px padding, radius 8, grey fill on hover and when open */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	padding: 0.625rem 0.75rem;
	border-radius: var(--wp--preset--border-radius--sm);
	transition: background-color .2s;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--primary-accent);
	opacity: 1;
}

/* Dropdown toggle icon. theme.json settings.custom.menuToggle picks it per style
   variation: plus/minus glyph (default look) or the plugin's chevron (Orchestra),
   which turns 180 degrees when the menu opens. */
.wp-block-navigation .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon {
	width: auto;
	height: auto;
	margin-left: 0.25rem;
	line-height: 1;
	font-weight: 400;
	font-size: 1.1em;
}

.wp-block-navigation .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon svg {
	display: var(--wp--custom--menu-toggle--chevron, none);
	width: 10px;
	height: 10px;
	margin-top: 0;
	vertical-align: middle;
}

.wp-block-ollie-mega-menu__toggle-icon::before {
	content: "+";
	display: var(--wp--custom--menu-toggle--plus, inline);
}

.wp-block-ollie-mega-menu__toggle[aria-expanded="true"] .wp-block-ollie-mega-menu__toggle-icon::before {
	content: "\2212";
}

/* Announcement bar text. Size comes from settings.custom.announcement.fontSize:
   12px mono in the default look, the Small size in the Orchestra variation. */
.ts-announcement {
	font-size: var(--wp--custom--announcement--font-size, var(--wp--preset--font-size--x-small));
}

/* Header items that only show when the full nav shows. 1280px matches the
   navigation's mobileMenuBreakpoint in patterns/header.php. */
@media (max-width: 1279px) {
	.ts-desktop-only {
		display: none !important;
	}
}

/* Desktop/mobile image pairs (core block visibility): when the first block of
   a flow or constrained container is hidden, the next one takes its place without the gap.
   Breakpoints match core's viewport sizes (480px, 782px). */
@media (width <= 480px) {
	:is(.is-layout-flow, .is-layout-constrained) > .wp-block-hidden-mobile:first-child + * {
		margin-block-start: 0;
	}
}
@media (480px < width <= 782px) {
	:is(.is-layout-flow, .is-layout-constrained) > .wp-block-hidden-tablet:first-child + * {
		margin-block-start: 0;
	}
}
@media (width > 782px) {
	:is(.is-layout-flow, .is-layout-constrained) > .wp-block-hidden-desktop:first-child + * {
		margin-block-start: 0;
	}
}

/* Mobile menu: accordion links keep the normal text color */
.wp-block-details .is-style-ts-menu-list {
	color: var(--wp--preset--color--main);
}

/* Prose (blog posts, text pages): add class "ts-prose" to a Post Content block
---------------------------------------------------------------------------- */

.ts-prose {
	line-height: 1.7;
}

.ts-prose > * + * {
	margin-block-start: 1.25em;
}

.ts-prose :where(h2) {
	font-size: var(--wp--preset--font-size--section);
	margin-block-start: 1.75em;
}

.ts-prose :where(h3) {
	font-size: var(--wp--preset--font-size--title);
	margin-block-start: 1.5em;
}

.ts-prose :where(h4) {
	font-size: var(--wp--preset--font-size--medium);
}

/* CTA cards ([cta slug="…"]) inside prose keep their own spacing and type,
   and get room around them. */
.ts-prose > .ts-cta-card {
	margin-block: 2.5rem;
	line-height: var(--wp--custom--line-height--body, 1.6);
}

.ts-prose .ts-cta-card :where(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--small);
}

.ts-prose a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--primary-alt);
	font-weight: 600;
	text-underline-offset: 2px;
}

.ts-prose :where(ul, ol) {
	padding-left: 1.25em;
}

.ts-prose :where(li) {
	margin-block: 0.4em;
}

.ts-prose :where(ul) li::marker {
	color: rgba(24, 23, 23, 0.4);
}

.ts-prose :where(img) {
	border-radius: var(--wp--preset--border-radius--sm);
}

.ts-prose :where(code):not(pre code) {
	font-family: var(--wp--preset--font-family--monospace);
	font-size: 0.85em;
	background: var(--wp--preset--color--tertiary);
	border: 1px solid var(--wp--preset--color--border-medium);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: 0 4px;
}

/* Tabs: Product Cards (Tailscale home product switcher)
   Tab labels use <strong>Title</strong><em>Description</em>.
---------------------------------------------------------------------------- */

.is-style-ts-product-tabs .wp-block-tab-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.is-style-ts-product-tabs .wp-block-tab-list button {
	width: auto;
	padding: 1.5rem;
	border-radius: var(--wp--preset--border-radius--lg);
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--secondary);
	transition: background-color .2s, color .2s;
}

.is-style-ts-product-tabs .wp-block-tab-list button strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--main);
}

.is-style-ts-product-tabs .wp-block-tab-list button em {
	display: block;
	font-style: normal;
}

.is-style-ts-product-tabs .wp-block-tab-list button:hover {
	background: var(--wp--preset--color--primary-accent);
}

.is-style-ts-product-tabs .wp-block-tab-list button[aria-selected="true"] {
	background: var(--wp--preset--color--red);
	color: rgba(255, 255, 255, 0.85);
}

.is-style-ts-product-tabs .wp-block-tab-list button[aria-selected="true"] strong {
	color: #fff;
}

.is-style-ts-product-tabs .wp-block-tab-list button::before {
	display: none;
}

@media (max-width: 781px) {
	.is-style-ts-product-tabs .wp-block-tab-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.375rem;
	}

	.is-style-ts-product-tabs .wp-block-tab-list button {
		padding: 0.5rem 0.75rem;
		border-radius: var(--wp--preset--border-radius--md);
		background: var(--wp--preset--color--base);
	}

	.is-style-ts-product-tabs .wp-block-tab-list button strong {
		margin: 0;
		font-size: var(--wp--preset--font-size--small);
	}

	.is-style-ts-product-tabs .wp-block-tab-list button em {
		display: none;
	}
}

/* Tabs: Pills (centered rounded pills, active = dark) */
.is-style-ts-pill-tabs .wp-block-tab-list {
	justify-content: center;
	gap: 0.375rem;
}

.is-style-ts-pill-tabs .wp-block-tab-list button {
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(31, 30, 30, 0.1);
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
}

.is-style-ts-pill-tabs .wp-block-tab-list button[aria-selected="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.is-style-ts-pill-tabs .wp-block-tab-list button::before {
	display: none;
}

/* List: Accent Squares - small squares in the current accent color */
.wp-block-list.is-style-ts-list-shapes {
	list-style: none;
}

.is-style-ts-list-shapes li {
	position: relative;
	padding-left: 1.25rem;
	margin-block: 0.6rem;
}

.is-style-ts-list-shapes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.55rem;
	height: 0.55rem;
	background: var(--ts-accent, var(--wp--preset--color--red));
}

.is-style-ts-list-shapes li:nth-child(3n+2)::before {
	border-radius: 50%;
}

.is-style-ts-list-shapes li:nth-child(3n)::before {
	border-radius: 0 0.55rem 0 0;
}

/* Group: Logo Tile - small bordered chip (icon + name), centered */
.is-style-ts-logo-tile {
	justify-content: center;
	min-height: 4rem;
	padding: 0.75rem 1rem;
}

.is-style-ts-logo-tile .wp-block-image {
	margin: 0;
	flex: none;
}

/* Group: Icon Tile - square tile holding one logo that fills it */
.is-style-ts-icon-tile {
	aspect-ratio: 1;
	padding: 0.375rem;
}

.is-style-ts-icon-tile .wp-block-image,
.is-style-ts-icon-tile img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* Integrations wall (patterns/integrations-wall.php): on phones the text card
   takes a full row. Spanning 4 of 5 narrow columns, it was wider than the screen. */
@media (max-width: 480px) {
	.wp-block-group.ts-wall-card {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Later logos fill the gap left in the row above the card. */
	.wp-block-group:has(> .ts-wall-card) {
		grid-auto-flow: dense;
	}
}

/* Code: Ollie's "Dark" style as a terminal window */
.wp-block-code.is-style-dark-code {
	background: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--border-light);
	text-align: left;
}

/* Product Cards: one accent per tab (Tailscale uses red, purple, blue, green) */
.is-style-ts-product-tabs .wp-block-tab-list button:nth-child(2)[aria-selected="true"] { background: var(--wp--preset--color--purple); }
.is-style-ts-product-tabs .wp-block-tab-list button:nth-child(3)[aria-selected="true"] { background: var(--wp--preset--color--blue); }
.is-style-ts-product-tabs .wp-block-tab-list button:nth-child(4)[aria-selected="true"] { background: var(--wp--preset--color--forest); }
.is-style-ts-product-tabs .wp-block-tab-list button:nth-child(5)[aria-selected="true"] { background: var(--wp--preset--color--amber); }
.is-style-ts-product-tabs .wp-block-tab-panel:nth-child(2) { --ts-accent: var(--wp--preset--color--purple); }
.is-style-ts-product-tabs .wp-block-tab-panel:nth-child(3) { --ts-accent: var(--wp--preset--color--blue); }
.is-style-ts-product-tabs .wp-block-tab-panel:nth-child(4) { --ts-accent: var(--wp--preset--color--forest); }
.is-style-ts-product-tabs .wp-block-tab-panel:nth-child(5) { --ts-accent: var(--wp--preset--color--amber); }

/* Motion (research/tailscale-motion.md): Tailscale uses very little.
---------------------------------------------------------------------------- */

/* Dim the page behind an open mega menu (fades in over 300ms). Drawn by the
   sticky main bar: Ollie dissolves the header wrapper for a partial sticky header. */
.site-header .is-position-sticky::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(24, 23, 23, 0.25);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}

.site-header .is-position-sticky:has(.wp-block-ollie-mega-menu__toggle[aria-expanded="true"])::after {
	opacity: 1;
}

/* Blog cards: darker border and a shadow on hover */
.wp-block-post .is-style-ts-card {
	transition: border-color .3s, box-shadow .3s;
}

.wp-block-post .is-style-ts-card:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* FAQ rows open with a short height and fade animation */
.wp-block-details {
	interpolate-size: allow-keywords;
}

.wp-block-details::details-content {
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height .2s, opacity .2s, content-visibility .2s allow-discrete;
}

.wp-block-details[open]::details-content {
	height: auto;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-details::details-content,
	.site-header .is-position-sticky::after {
		transition: none;
	}
}

/* Table: Compare - plan comparison rows (first column left, values centered) */
.wp-block-table.is-style-ts-compare {
	margin-block: 0;
}

/* In page and post text (compare pages, blog), keep space around the table. */
.ts-prose > .wp-block-table.is-style-ts-compare {
	margin-block: 1.5em;
}

.is-style-ts-compare th,
.is-style-ts-compare td {
	text-align: center;
	padding: 0.875rem 0.75rem;
	background: none;
}

.is-style-ts-compare th:first-child,
.is-style-ts-compare td:first-child {
	text-align: left;
	width: 32%;
}

.is-style-ts-compare thead th {
	border-top: 0;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--base);
}

.is-style-ts-compare thead th:first-child {
	font-size: var(--wp--preset--font-size--medium);
	padding-top: var(--wp--preset--spacing--large);
}

.is-style-ts-compare td:not(:first-child) {
	color: var(--wp--preset--color--secondary);
}

.wp-block-table.is-style-ts-compare,
.is-style-ts-compare table {
	background: transparent;
	border: 0;
}

/* Forms: Tailscale-style fields. Used by the contact pattern's HTML form; the
   same look applies to embedded forms that use plain inputs.
---------------------------------------------------------------------------- */

.ts-form {
	display: grid;
	gap: 1.25rem;
}

.ts-form label {
	display: grid;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.2;
}

/* .ts-form is doubled to outrank Ollie's input:not(...):not(...) rule */
.ts-form.ts-form label :is(input, select, textarea) {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--charcoal);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.5;
}

.ts-form.ts-form label :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--secondary);
	outline: none;
}

.ts-form.ts-form label select {
	appearance: none;
	height: auto;
	padding-right: 2.5rem;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23706e6d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 1rem center / 16px no-repeat;
}

.ts-form ::placeholder {
	color: var(--wp--preset--color--main-accent);
}

.ts-form button {
	justify-self: start;
	border: 0;
	cursor: pointer;
}

/* Long code lines scroll sideways instead of being cut off */
.wp-block-code {
	overflow-x: auto;
}

.wp-block-code code {
	white-space: pre;
}

/* Group: Mosaic Tile - square colored tile with a centered logo (navy heroes) */
.is-style-ts-mosaic-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
}

.is-style-ts-mosaic-tile .wp-block-image {
	width: 42%;
	margin: 0;
}

.is-style-ts-mosaic-tile img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--md);
}

/* Blog posts: text is inset 32px inside the article column, media stays full width */
@media (min-width: 782px) {
	.single-post .ts-prose > :where(p, h2, h3, h4, h5, h6, ul, ol, blockquote, .wp-block-quote, .wp-block-details) {
		margin-inline: 2rem;
	}
}


/* ==========================================================================
   Content type templates (integrations, use cases, events, FAQ, glossary)
   ========================================================================== */

/* ==========================================================================
   CPT templates (integration, use-case, event, faq, glossary-item)
   Staging file: merge into style.css later.
   ========================================================================== */

/* Card term label: grey text, not a link look (integration + use-case cards) */
.ts-cpt-card-terms a {
	color: inherit;
	text-decoration: none;
}

/* "Find out more ->" label inside a linked card (the whole card is the link) */
.ts-cpt-more {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* Event status tag: "Ended" events get a grey pill instead of the green one */
.is-style-ts-tag.taxonomy-event-status a[href*="/event-status/past/"] {
	background: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--secondary);
}


/* ==========================================================================
   Product landers and the Sticky Section Nav
   ========================================================================== */

/*
 * Lander patterns (patterns/lander-*.php) - rules theme.json cannot express.
 * Staging file: merge into style.css later.
 */

/* Height of the sticky main bar (the announcement bar scrolls away). Sticky
   elements below the header (section nav, sidebars) and anchor jumps use it.
   Measured 2026-09-25: at 1280px and wider it is settings.custom.header.height
   (81px default, 84px Orchestra, whose buttons are larger); 72px below (mobile
   menu). If the header changes, update these numbers. */
:root {
	--ts-header-h: var(--wp--custom--header--height, 81px);
}

@media (max-width: 1279px) {
	:root { --ts-header-h: 72px; }
}

/* Split panel (homepage "Meet every customer"): columns.ts-split-columns has a
   divider on the right of its first column, and group.ts-divided-row puts a
   divider left of each item but the first. When the columns stack on phones,
   the divider moves under the first column, and the row (which wraps) loses its
   dividers so no line starts a row. Block settings cannot vary borders by width.
   Side by side, each column is a vertical stack whose last buttons row is pushed
   to the bottom, so the two buttons line up whatever the content above them. */
@media (min-width: 782px) {
	.ts-split-columns > .wp-block-column {
		display: flex;
		flex-direction: column;
	}

	/* !important: the buttons row has an inline top margin from the editor */
	.ts-split-columns > .wp-block-column > .wp-block-buttons:last-child {
		margin-top: auto !important;
		padding-top: var(--wp--preset--spacing--small);
	}
}

@media (max-width: 781px) {
	.ts-split-columns > .wp-block-column:first-child {
		border-right-width: 0 !important;
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}

	.ts-divided-row > * {
		border-left-width: 0 !important;
		padding-left: 0 !important;
	}
}

/* Sticky Section Nav (patterns/lander-section-nav.php)
   ---------------------------------------------------------------------------
   Markup: group.ts-section-series > [ group.ts-section-nav (Position: Sticky),
   section#routing, section#failover, ... ]. A sticky element only sticks
   inside its parent, so the bar releases when the series group ends, that is
   after the last section has scrolled past. Core writes "top: 0" for sticky
   groups; this moves the bar under the sticky header. Keep the z-index below
   the header's (its mega menus must open over the bar). */
.ts-section-nav.is-position-sticky {
	top: calc(var(--ts-header-h) + var(--wp-admin--admin-bar--position-offset, 0px));
	z-index: 9;
}

/* Anchor jumps land below the header and the bar. (scroll-padding on the
   page, not scroll-margin on the sections: the scroll spy below then marks a
   section active when it reaches the upper half of the screen.) This beats
   the site-wide 150px in style.css, because the bar adds 3.5rem. */
html:has(.ts-section-series) {
	scroll-padding-top: calc(var(--ts-header-h) + 3.5rem);
}

/* Links: one row that scrolls sideways on small screens. */
.ts-section-nav .ts-section-nav__links {
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	/* CSS-only scroll spy (Chrome 140+): the link whose section is in view
	   matches :target-current. Other browsers show no active state. */
	scroll-target-group: auto;
}

.ts-section-nav .ts-section-nav__links::-webkit-scrollbar {
	display: none;
}

.ts-section-nav .ts-section-nav__links .wp-block-button {
	flex: none;
}

.ts-section-nav .ts-section-nav__links .wp-block-button__link:target-current {
	background: var(--wp--preset--color--primary-accent);
}

/* A bar given its own background color (to set it apart from the header when
   it sticks): the active link becomes a white chip so it still stands out. */
.ts-section-nav:not(.has-base-background-color).has-background .ts-section-nav__links .wp-block-button__link:target-current {
	background: var(--wp--preset--color--base);
}

/* Lander details
   --------------------------------------------------------------------------- */

/* Accent for the bullet shapes (is-style-ts-list-shapes) per section */
.ts-accent-red { --ts-accent: var(--wp--preset--color--red); }
.ts-accent-purple { --ts-accent: var(--wp--preset--color--purple); }
.ts-accent-blue { --ts-accent: var(--wp--preset--color--blue); }
.ts-accent-green { --ts-accent: var(--wp--preset--color--emerald); }
.ts-accent-amber { --ts-accent: var(--wp--preset--color--amber); }

/* "Before" list: grey shapes */
.is-style-ts-list-shapes.ts-list-muted {
	--ts-accent: var(--wp--preset--color--main-accent);
}

/* Quote with a hanging opening mark */
.ts-hanging-quote {
	text-indent: -0.4em;
}

/* FAQ: close the last row with a hairline, like Tailscale */
.ts-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

/* FAQ sections embed [faq tags="…"] (FAQ content type): two columns from 782px,
   filled row by row. The last row gets the closing hairline in both columns. */
@media (min-width: 782px) {
	.ts-faq .faq-shortcode {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--x-large);
		align-items: start;
	}

	.ts-faq .faq-shortcode > .wp-block-details:nth-last-child(2):nth-child(odd) {
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}
}

/* Image panel with no padding: the photo fills the rounded panel */
.ts-panel-fill {
	position: relative;
	overflow: hidden;
}

.ts-panel-fill > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ts-panel-fill > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Stacked columns: shorter image panels (overrides the inline min-height).
   .ts-panel = image on a padded color panel, .ts-panel-fill = full-bleed photo. */
@media (max-width: 781px) {
	.ts-panel {
		min-height: 0 !important;
	}

	.ts-panel-fill {
		min-height: 260px !important;
	}
}


/* ==========================================================================
   Extra page types (changelog, careers, press, SDKs, legal, resources)
   ========================================================================== */

/*
 * Extras (extra-* patterns: changelog, careers, press, SDKs, legal, resources).
 * Only rules that theme.json and block attributes cannot express.
 * TEMPORARY staging file: merge into style.css later.
 */

/* Changelog entry: the New / Fixed label hangs in the gutter to the left of
   the content column, so titles, sub-heads and text all share one left edge. */
@media (min-width: 782px) {
	.ts-changelog-item > .ts-changelog-label {
		margin-left: -5.125rem; /* label width 64px + 18px gap */
	}
}

.ts-changelog-item > .ts-changelog-label {
	flex-shrink: 0; /* keep the 64px gutter when the text is long */
}

/* Careers hero photo strip: on phones, crop the wide strip instead of
   shrinking it to a thin band. */
@media (max-width: 781px) {
	.wp-block-image.alignfull.ts-careers-strip img {
		height: 260px;
		object-fit: cover;
		object-position: 35% 50%;
	}
}

/* Split CTA "Try ... for free" panel: on desktop the shapes sit to the right
   of the text (45% right padding). On phones, move the shapes below the text. */
@media (max-width: 781px) {
	.ts-split-cta-try {
		padding-right: var(--wp--preset--spacing--large) !important;
		padding-bottom: 15rem !important;
		background-position: 100% 100% !important;
		background-size: auto 13rem !important;
	}
}

/* Illustrations (Custom HTML blocks with inline SVG, see tools/inline_art.py)
   Colors are CSS variables. theme.json settings.custom.art.tailscale / .orchestra
   (inline | none) choose which shape set shows, so a style variation can swap them.
---------------------------------------------------------------------------- */

.ts-art {
	margin: 0;
}

.ts-art .ts-art-tailscale {
	display: var(--wp--custom--art--tailscale, inline);
}

.ts-art .ts-art-orchestra {
	display: var(--wp--custom--art--orchestra, none);
}

.ts-art.alignright svg {
	margin-left: auto;
}

/* Heading/Paragraph: Highlight - text marked with the Highlight format becomes a
   chip. Its color, padding and tilt come from settings.custom.highlight, so each
   style variation can change them (Orchestra: blue chip tilted -2deg, text straight).
   Keep it to one or two words; the chip does not wrap across lines. It stays
   inline (not inline-block), so punctuation right after it stays on its line. */
.is-style-ts-highlight mark {
	position: relative;
	z-index: 0;
	display: inline;
	white-space: nowrap;
	padding: var(--wp--custom--highlight--padding, 0 0.15em);
	background: transparent !important;
	color: var(--wp--custom--highlight--text);
	line-height: 1.05;
}

/* The chip is drawn behind the text, so only the chip tilts. */
.is-style-ts-highlight mark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--custom--highlight--background);
	transform: rotate(var(--wp--custom--highlight--tilt, 0deg));
}

/* On a blue band the chip turns white, with the band's blue as the text. */
.has-band-blue-gradient-background .is-style-ts-highlight mark,
.has-primary-background-color .is-style-ts-highlight mark {
	--wp--custom--highlight--background: var(--wp--preset--color--base);
	--wp--custom--highlight--text: var(--wp--preset--color--primary);
}

/* Outline buttons: Ollie draws the ring with a CSS outline (no border), set 3.5px
   inside the edge. Put a 1.5px ring right at the edge instead, so an outline button
   looks exactly as big as a filled one (both use the same padding). */
.wp-block-button.is-style-outline .wp-block-button__link {
	outline-width: 1.5px;
	outline-offset: -1.5px;
}

/* ==========================================================================
   Plugin output: Snippet Aggregator and Edible Live Search
   ========================================================================== */

/*
 * These plugins print their own HTML from shortcodes. The rules below dress it
 * in the theme's tokens, so it follows the style variations too.
 */

/* Integration filter pills ([integration_filter_buttons]): the plugin prints core
   Buttons with the "Pill" block style; mark the current filter. */
.integration-filter .wp-block-button.is-active .wp-block-button__link {
	background: var(--wp--preset--color--main);
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

/* Live search ([edible_live_search]): match the core Search input; left-aligned. */
.edible-search-form.edible-search-form {
	max-width: 30rem;
	width: 100%;
	margin: 0;
}

.edible-search-form .edible-search-input {
	border: 1px solid var(--wp--preset--color--border-medium);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: 0.625rem 2.5rem 0.625rem 1rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.edible-search-form .edible-search-input:focus {
	border-color: var(--wp--preset--color--secondary);
}

.edible-search-form .edible-search-input::placeholder {
	color: var(--wp--preset--color--secondary);
}

/* Loupe: a drawn icon instead of the plugin's emoji. */
.edible-search-form::after {
	content: "";
	right: 1rem;
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--secondary);
	-webkit-mask: 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.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%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='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.edible-search-form .edible-loading {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Results dropdown: a card under the input. */
.edible-search-form .edible-search-results-container {
	top: calc(100% + 0.25rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--md);
	box-shadow: var(--wp--preset--shadow--small-dark);
}

.edible-search-form .edible-search-results-container:empty {
	border: 0;
	visibility: hidden;
}

.edible-search-form .edible-search-result-item {
	border-bottom-color: var(--wp--preset--color--border-light);
}

.edible-search-form .edible-search-result-item:hover {
	background: var(--wp--preset--color--tertiary);
}

.edible-search-form .edible-search-result-thumbnail {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--sm);
}

.edible-search-form .edible-search-result-thumbnail img {
	object-fit: contain;
	padding: 0.25rem;
}

.edible-search-form .edible-search-result-title {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.edible-search-form .edible-search-result-excerpt,
.edible-search-form .edible-search-no-results {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Pipedrive scheduler on single events: the "Book a meeting" group shows only
   when [pipedrive_scheduler] printed its iframe. */
.ts-pipedrive:not(:has(iframe)) {
	display: none;
}

.ts-pipedrive iframe {
	display: block;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--md);
}

/* Plain eyebrow labels inside mega menu panels (card and strip labels) match
   the column labels ("Eyebrow with rule"). Values per look: settings.custom.menuLabel. */
.is-style-ts-menu-panel .is-style-ts-eyebrow {
	font-family: var(--wp--custom--menu-label--font-family);
	font-weight: var(--wp--custom--menu-label--font-weight);
	letter-spacing: var(--wp--custom--menu-label--letter-spacing);
	text-transform: var(--wp--custom--menu-label--text-transform);
	color: var(--wp--custom--menu-label--color);
}

/* Tables in page prose keep words whole (break with a hyphen, not mid-word):
   compare tables on phones, and any table inside a Columns block (the compare
   template), where core's word-break: break-word on columns would squeeze a
   column to a few letters per line.
---------------------------------------------------------------------------- */

.ts-prose .wp-block-table :is(th, td) {
	word-break: normal;
	overflow-wrap: normal;
	hyphens: auto;
}

/* Phones: tables and code in page text keep readable columns and lines and
   scroll sideways inside their own box (the page itself never scrolls sideways).
   Compare tables also keep a minimum width. */
@media (max-width: 781px) {
	.ts-prose > .wp-block-table,
	.ts-prose pre {
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.ts-prose > .wp-block-table.is-style-ts-compare > table {
		min-width: 40rem;
	}
}

/* Pattern guide (/pattern-guide/, [ts_pattern_guide] in inc/pattern-guide.php)
   ---------------------------------------------------------------------------
   The shortcode prints a jump bar, one H2 per category (.ts-pg-cat) and one
   section per pattern (.ts-pg-item: a meta header, then the rendered pattern).
   Each item is a full-width constrained box, like the page content, so the
   pattern's own full-width and wide blocks keep their size. */
.wp-block-post-content > .ts-pg-cat {
	margin-block-start: var(--wp--preset--spacing--xx-large);
	padding-block-start: var(--wp--preset--spacing--large);
	border-top: 2px solid var(--wp--preset--color--main);
}

.wp-block-post-content > .ts-pg-item {
	/* Each item is a frame: a pattern that sticks out sideways (the press hero
	   and careers locations art do on phones) must not scroll the guide.
	   "clip", not "hidden", so the sticky section nav still sticks. */
	overflow-x: clip;
	margin-block-start: var(--wp--preset--spacing--x-large);
	padding-block-start: var(--wp--preset--spacing--large);
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.wp-block-post-content > .ts-pg-cat + .ts-pg-item {
	border-top: 0;
	padding-block-start: 0;
}

.ts-pg-meta {
	margin-block-end: var(--wp--preset--spacing--large);
}

.ts-pg-meta > * {
	max-width: 48rem;
	margin-block: 0;
}

.ts-pg-meta > * + * {
	margin-block-start: 0.5rem;
}