/*
 * WordPress-only adjustments, loaded after the Web 4.0 stylesheet (site/css/main.css).
 * The design's own stylesheet stays exactly as delivered; anything WordPress needs goes here.
 */

/* Logged-in users: keep the fixed nav below WordPress's admin bar. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .nav { top: 46px; }
}

/*
 * Mobile menu (900px and below): the delivered design opens the menu as see-through
 * glass, and a blur nested inside the nav's own blur doesn't render, so the hero text
 * shows through the links. Give the open menu a solid panel in the nav's tone.
 * Same in the original static files; flagged for the design team.
 */
@media (max-width: 900px) {
	.nav-links.open {
		background: #f7f9fb;
		max-height: calc(100vh - 64px);
		max-height: calc(100dvh - 64px);
		overflow-y: auto;
	}
	.nav.nav--dark .nav-links.open {
		background: #14171c;
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}
	.nav-links.open .nav-dropdown-menu {
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: none;
		border: none;
	}
}

/*
 * Pricing calculator on phones: the stacked card's column sized itself to the
 * level table's widest content (about 460px), so the right-hand side was cut off
 * inside a 330px card. Let the column shrink to the card and tighten the padding.
 * Same in the original static files; flagged for the design team.
 */
@media (max-width: 900px) {
	.calc-app { grid-template-columns: minmax(0, 1fr); }
	.pr-calc .calc-in { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
	.lvl-head, .lvl-row { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.calc-in, .calc-out { padding: var(--s3); }
	.lvl-head, .lvl-row { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; }
	.lvl-head { font-size: 0.62rem; letter-spacing: 0.03em; }
	.lvl-row .num, .lvl-row .journeys { white-space: nowrap; }
	.calc-res { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Resources submenu: opens on tap (assets/js/nav.js). On phones it's an accordion inside
 * the menu, closed until tapped; the desktop centring shift no longer pushes it off screen.
 */
.nav-dropdown.is-open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-dropdown > a::after { display: inline-block; transition: transform 180ms ease; }
.nav-dropdown.is-open > a::after { transform: rotate(180deg); }
@media (max-width: 900px) {
	.nav-links.open .nav-dropdown .nav-dropdown-menu { display: none; transform: none; opacity: 1; visibility: visible; min-width: 0; margin: 4px 0 0; }
	.nav-links.open .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
	.nav-links.open .nav-dropdown-menu a { padding: 10px 14px; }
}

/*
 * Nav bar readability: the delivered glass bar was nearly clear, so over photos and
 * mixed sections the logo and menu icon could disappear. A denser frosted bar keeps
 * them readable whatever scrolls underneath, in both its light and dark tones. (The
 * Capabilities script only ever adds nav--dark, so "light" is any bar that isn't dark.)
 */
.nav:not(.nav--dark) {
	background: rgba(247, 249, 251, 0.86);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
	border-bottom-color: rgba(52, 53, 57, 0.08);
}
.nav.nav--dark {
	background: rgba(16, 18, 22, 0.8);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	backdrop-filter: blur(16px) saturate(160%);
}

/*
 * Home hero on phones: the chat card and the person's video bubble used desktop offsets
 * and hung about 100px off the right edge. Keep them inside the screen, with the video
 * bubble below the "real person's Tuesday" label.
 */
@media (max-width: 700px) {
	.hero .tmoment-2 { right: 0; max-width: calc(50% + 10px); }
	.sam { right: 0; top: 96px; }
}

/*
 * Home "You already own" stage on phones: the pills sat inside the monitor's picture area
 * and, wrapping to three or four rows, climbed over the screen. Lay them out beneath the
 * monitor, as on desktop.
 */
@media (max-width: 700px) {
	#reveal .reveal-stage { aspect-ratio: auto; display: flex; flex-direction: column; }
	#reveal .rv-devices { position: relative; inset: auto; width: 100%; aspect-ratio: 1 / 0.92; }
	#reveal .owned { position: relative; inset: auto; margin-top: -8%; gap: 8px; }
	#reveal .owned span,
	#reveal .owned span:nth-child(n) { font-size: 0.8rem; padding: 8px 13px; }
}

/*
 * Insights: articles (single.php), topic pages (archive.php) and the topic row.
 * Built from the design's own pieces (page hero, post cards, closing booking section);
 * the article column follows the site's type: Roboto body, Roboto Condensed headings.
 */
.pg-hero .kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.pg-hero .kicker a:hover { color: #fff; border-bottom-color: #fff; }
.sw-article-hero .pg-h1,
.pg-hero.sw-article-hero .pg-h1 {
	white-space: normal; max-width: 24ch; font-weight: 300; letter-spacing: 0.01em;
	font-size: clamp(32px, 3.6vw, 60px); line-height: 1.05;
}
.sw-archive-hero .pg-h1 { white-space: normal; }
.sw-article-hero .lede { max-width: 56ch; }

.sw-prose { max-width: 70ch; margin: 0 auto; font-size: clamp(17px, 1.15vw, 19px); line-height: 1.7; color: var(--ink-2); }
.sw-prose > * + * { margin-top: 1.1em; }
.sw-prose h2, .sw-prose h3, .sw-prose h4 {
	font-family: var(--font-display); color: var(--ink); line-height: 1.15; letter-spacing: 0.01em; margin-top: 2em;
}
.sw-prose h2 { font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; text-transform: uppercase; }
.sw-prose h3 { font-size: clamp(21px, 1.6vw, 25px); font-weight: 700; }
.sw-prose h4 { font-size: 1.05em; font-weight: 700; }
.sw-prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sw-prose a:hover { color: var(--orange-hover); }
.sw-prose strong { color: var(--ink); }
.sw-prose ul, .sw-prose ol { padding-left: 1.3em; }
.sw-prose li + li { margin-top: 0.45em; }
.sw-prose li::marker { color: var(--orange); }
.sw-prose blockquote { border-left: 3px solid var(--orange); padding: 4px 0 4px 22px; color: var(--ink); font-size: 1.08em; }
.sw-prose img, .sw-prose figure, .sw-prose video, .sw-prose iframe { max-width: 100%; height: auto; border-radius: 14px; }
.sw-prose figure { margin-left: 0; margin-right: 0; }
.sw-prose figcaption { font-size: 0.85rem; color: var(--ink-dim); margin-top: 8px; }
.sw-prose table { width: 100%; border-collapse: collapse; font-size: 0.92em; display: block; overflow-x: auto; }
.sw-prose th, .sw-prose td { border-bottom: 1px solid var(--silver-line); padding: 10px 12px; text-align: left; }
.sw-prose hr { border: 0; border-top: 1px solid var(--silver-line); margin: 2.4em 0; }
.sw-article-back { max-width: 70ch; margin: clamp(40px, 6vh, 64px) auto 0; }
.sw-article-back .btn { border: 1px solid var(--silver-line); color: var(--ink); }
.sw-article-more { padding-top: 0; }

.sw-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(32px, 5vh, 48px); }
.sw-cats a {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--silver-line); color: var(--ink-2); font-size: 0.9rem; text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.sw-cats a:hover { border-color: var(--ink-2); color: var(--ink); }
.sw-cats a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sw-cats + .pg-posts { margin-top: clamp(24px, 4vh, 36px); }
.act .navigation.pagination { margin-top: 40px; }
.sw-byline { margin-top: 18px; color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; letter-spacing: 0.02em; }
.sw-byline a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
.sw-byline a:hover { border-bottom-color: #fff; }

/*
 * Nav: the logo swaps colour instantly, so keep the bar's own fade short; a long fade left a
 * white logo on a still-light bar for a moment.
 */
.nav, html.intro.white .nav { transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }

/*
 * Capabilities on laptop-height screens (pinned layout, 1021px+ wide, up to 920px tall):
 * - Builder: the step panel ran ~10px below the screen at 864px tall (more at 768/720) once the
 *   last step opened. Start it just under the nav and tighten icons and copy.
 * - Companion: the "Show me" copy ran into the coaching picture that pops out on the left. It moves
 *   up a little, and the "Any number of journeys" note moves to the top-right corner (below) so the
 *   two don't share the top-left.
 */
@media (min-width: 1021px) and (max-height: 920px) {
	.bflow:not(.is-static) .bflow-copy { top: 80px; }
	.bflow:not(.is-static) .bflow-copy .lede { font-size: 15px; line-height: 1.45; }
	.bflow:not(.is-static) .bflow-copy .bf-kicker { margin-top: 16px; }
	.bflow:not(.is-static) .bf-icon { width: 48px; height: 48px; }
	.bflow:not(.is-static) .bf-step-body { padding-left: 54px; }
	.bflow:not(.is-static) .bf-step-title { font-size: 18px; }
	.bflow:not(.is-static) .bf-step-body p { font-size: 13.5px; line-height: 1.5; }
	.cflow:not(.is-static) .cf-f1 { top: 12%; }
	.cflow:not(.is-static) .cf-feature h3 { font-size: clamp(36px, 5.4vh, 58px); }
	.cflow:not(.is-static) .cf-feature p { font-size: 14.5px; line-height: 1.5; }
}

/* Footer on phones and tablets: bigger tap targets for the links. */
@media (max-width: 900px) {
	.footer li { margin-bottom: 2px; }
	.footer li a, .footer-legal a { display: inline-block; padding: 8px 0; }
}

/*
 * Companion (Capabilities) between 1021px and 1199px wide: there isn't room beside the phone for
 * the pop-out pictures and the icon legend. Keep the labelled pills (the content), drop the
 * pictures and the legend. Wider screens keep both; the legend is narrowed so it clears the
 * "A coach, not a chatbot" line under the phone.
 */
@media (min-width: 1021px) and (max-width: 1199px) {
	.cflow:not(.is-static) .cf-pop-vis,
	.cflow:not(.is-static) .cf-legend { display: none; }
}
@media (min-width: 1200px) {
	.cflow:not(.is-static) .cf-legend { width: min(400px, calc(50vw - 260px)); }
}

/* Companion's "Any number of journeys" note: top-right on short or narrower pinned layouts, so the
   "Show me" copy can use the top-left (see the laptop-height block above). */
@media (min-width: 1021px) and (max-height: 920px), (min-width: 1021px) and (max-width: 1299px) {
	.cflow:not(.is-static) .jr-note { justify-content: flex-end; padding-left: 0; padding-right: clamp(24px, 4vw, 56px); }
}