/*
Theme Name: Experience Helpdesk
Theme URI: https://experiencehelpdesk.com
Description: Custom Ollie child theme for ExperienceHelpdesk.com — a Johns & Taylor product. League Spartan display + Inter body, distinct sub-brand palette, comprehensive marketing site with reusable section patterns, alternate landing pages, and FAQ. Deep-link friendly for paid campaigns.
Author: Johns & Taylor
Author URI: https://johnsandtaylor.com
Template: ollie
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: full-site-editing, block-patterns, block-styles, custom-logo, custom-menu, editor-style, full-width-template, one-column, two-columns, three-columns, grid-layout, theme-options, wide-blocks
Text Domain: experience-helpdesk
*/

/* ============================================================
   Experience Helpdesk — Child Theme Stylesheet
   Most styling is driven by theme.json (FSE).
   This file holds enhancements that the editor can't express:
   smooth typography polish, focus states, and motion.
   ============================================================ */

/* --- Type rendering polish ------------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
	font-variant-ligatures: common-ligatures contextual;
}

/* League Spartan headlines — tighten tracking at large sizes */
h1, h2, h3, .wp-block-heading {
	letter-spacing: -0.015em;
	font-feature-settings: "ss01";
}

h1 { letter-spacing: -0.025em; }

/* Eyebrow / kicker — small caps League Spartan above H1s */
.is-style-eyebrow {
	font-family: "League Spartan", system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal);
	margin-bottom: 0.75rem;
}

/* --- Buttons -------------------------------------------------
   WP core (wp-includes/blocks/button/style.css) sets
   `word-break: break-word` on .wp-block-button__link. In a
   tight flex row, that lets the button's flex basis collapse
   to one character, so labels like "Join" render as "Joi / n"
   on narrow viewports. flex-shrink: 0 doesn't help — it
   protects the basis, not what the basis resolves to.

   Belt-and-braces: !important on the wrap properties to win
   the cascade regardless of load order, and min-width:
   max-content on the link to guarantee the box is never
   narrower than its rendered text. */
.wp-block-button .wp-block-button__link {
	font-family: "Inter", system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap !important;
	word-break: keep-all !important;
	overflow-wrap: normal !important;
	min-width: max-content;
	transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

/* Header button group resists shrinking so labels stay
   on a single line next to the brand + hamburger. */
header .wp-block-buttons {
	flex-shrink: 0;
}
header .wp-block-buttons .wp-block-button {
	flex-shrink: 0;
	min-width: max-content;
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px -8px rgba(11, 31, 58, 0.25);
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--signal);
	outline-offset: 3px;
}

/* Outline button — secondary action with shape parity to the
   primary CTA. Transparent against the page; on hover, fills
   with ink and inverts the text so feedback is unmistakable.
   !important needed because background-color and text color
   are both set inline on the WP button markup. */
.wp-block-button.ehd-btn-outline .wp-block-button__link {
	transition: background-color 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.wp-block-button.ehd-btn-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--bone) !important;
}

/* --- Links --------------------------------------------------- */
a {
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

p a, li a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* --- Section banding ----------------------------------------- */
.is-style-banded {
	background-color: var(--wp--preset--color--dawn);
}

/* --- Cards --------------------------------------------------- */
.is-style-card {
	background-color: var(--wp--preset--color--bone);
	border: 1px solid var(--wp--preset--color--fog);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.is-style-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -12px rgba(11, 31, 58, 0.15);
}

/* --- Numbered step badges ------------------------------------ */
.step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--ember);
	color: var(--wp--preset--color--signal);
	font-family: "League Spartan", sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

/* --- Urgency banner ------------------------------------------
   Informational, not clickable. Deep ink/midnight gradient so
   it reads as a banner rather than a CTA button (which uses
   the warm signal color elsewhere on the page). */
.urgency-banner {
	background: linear-gradient(135deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--midnight) 100%);
	color: var(--wp--preset--color--bone);
	padding: 1.75rem 2rem;
	border-radius: 12px;
	text-align: center;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	letter-spacing: 0.005em;
	box-shadow: 0 12px 32px -12px rgba(11, 31, 58, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.06);
}


/* --- FAQ accordion ------------------------------------------- */
details.faq-item {
	border-bottom: 1px solid var(--wp--preset--color--fog);
	padding: 1.25rem 0;
}

details.faq-item summary {
	font-family: "League Spartan", sans-serif;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--graphite);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

details.faq-item summary::-webkit-details-marker { display: none; }

details.faq-item summary::after {
	content: "+";
	font-family: "League Spartan", sans-serif;
	font-weight: 300;
	font-size: 1.75rem;
	color: var(--wp--preset--color--signal);
	transition: transform 200ms ease;
	line-height: 1;
}

details.faq-item[open] summary::after {
	content: "−";
	transform: none;
}

details.faq-item > *:not(summary) {
	margin-top: 1rem;
	color: var(--wp--preset--color--graphite);
	line-height: 1.6;
}

/* --- Pricing comparison table -------------------------------- */
.compare-table {
	width: 100%;
	border-collapse: collapse;
	font-family: "Inter", sans-serif;
}

.compare-table th,
.compare-table td {
	padding: 1rem 1.25rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--fog);
}

.compare-table th {
	font-family: "League Spartan", sans-serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--mist);
}

.compare-table tr.highlight {
	background: var(--wp--preset--color--ember);
}

.compare-table tr.highlight td {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

/* --- Lists: tucked-in bullets that nest under the prose above ---
   Default WP block lists sit flush left; we want them visibly
   indented inside the section so bullets read as nested under
   the paragraph above them.

   Exclusions:
   - .wp-block-navigation__container — header nav UL
   - .wp-block-navigation        — outer nav wrapper (defensive)
   - .wp-block-page-list         — auto-generated page list
   - .ehd-footer-notices         — horizontal flex row in footer
   These all manage their own layout and would visibly break
   under the rules below (margin-top in particular causes
   cross-axis offset in flex-row navigation, producing a
   jagged baseline across menu items). */
.wp-site-blocks ul:not(.wp-block-navigation):not(.wp-block-navigation__container):not(.wp-block-page-list):not(.ehd-footer-notices),
.wp-site-blocks ol:not(.wp-block-page-list) {
	padding-inline-start: 1.75em;
	margin-inline-start: 0.5em;
}

.wp-site-blocks ul:not(.wp-block-navigation):not(.wp-block-navigation__container):not(.wp-block-page-list):not(.ehd-footer-notices) {
	list-style: disc;
}
.wp-site-blocks ol:not(.wp-block-page-list) {
	list-style: decimal;
}

/* Vertical-rhythm spacer for stacked lists only. Excluded from
   any horizontal flex list (nav, footer notices) where
   margin-top would shift items off the cross-axis baseline. */
.wp-site-blocks ul:not(.wp-block-navigation):not(.wp-block-navigation__container):not(.ehd-footer-notices) li + li,
.wp-site-blocks ol li + li {
	margin-top: 0.4em;
}

.wp-site-blocks ul:not(.wp-block-navigation):not(.wp-block-navigation__container):not(.ehd-footer-notices) li::marker,
.wp-site-blocks ol li::marker {
	color: var(--wp--preset--color--signal);
}

/* Defensive: keep navigation items vertically centered in the
   header bar regardless of font size or spacing changes. */
.wp-block-navigation .wp-block-navigation__container {
	align-items: center;
}

/* --- Navigation responsive breakpoint -----------------------
   WordPress block navigation flips to its mobile overlay at
   600px by default. EHD's header (4 nav items + 2 buttons +
   brand) starts to crowd well before that — anything narrower
   than ~1280px squishes. Push the breakpoint up to 1280px so
   the hamburger appears earlier and we keep generous spacing
   on the desktop nav. */
@media (max-width: 1279.98px) {
	/* Show the hamburger trigger button. */
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	/* Hide the inline nav container when the menu is closed.
	   WP's open state (.is-menu-open) is left alone — it
	   handles the full-screen overlay correctly. */
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* --- Header button label swap on narrow viewports ----------
   Long labels ("Member Login", "Become a Member") wrap onto
   multiple lines on phones. Swap to short labels at <= 640px:
   "Log In" and "Join". */
.ehd-label-short { display: none; }

@media (max-width: 640px) {
	.ehd-label-full { display: none; }
	.ehd-label-short { display: inline; }
}

/* On the smallest screens, ease the button group so it doesn't
   overflow next to the brand + hamburger. */
@media (max-width: 540px) {
	.wp-block-buttons.is-layout-flex {
		gap: 0.5rem;
	}
	.wp-block-button .wp-block-button__link {
		padding-left: 0.875rem !important;
		padding-right: 0.875rem !important;
		font-size: 0.875rem;
	}
}

/* Phone-sized viewports: the inline padding is set inline on the
   button markup (`padding-left:1.125rem; padding-right:1.125rem`),
   which beats anything but !important. Below 430px the brand
   wraps to two lines unless the buttons get tighter still. */
@media (max-width: 430px) {
	header .wp-block-buttons {
		gap: 0.375rem !important;
	}
	header .wp-block-button .wp-block-button__link {
		padding-left: 0.625rem !important;
		padding-right: 0.625rem !important;
		font-size: 0.8125rem;
	}
}

/* --- Urgency banner: stack price points on mobile ----------
   "$495/month or $2,970/year (save 50%)" wraps awkwardly at
   narrow widths. Below 540px, drop the "or" connector and
   stack each price on its own line. */
@media (max-width: 540px) {
	.urgency-banner .ehd-or { display: none; }
	.urgency-banner .ehd-price-line {
		display: block;
		margin: 0.25rem 0;
	}
}

/* --- Comparison table: stacked-card layout on mobile -------
   Default 3-column table overflows on narrow viewports. Below
   720px each row becomes a labeled card via td[data-label]
   pseudo-headings. */
@media (max-width: 720px) {
	.compare-table {
		display: block;
	}
	.compare-table thead {
		display: none;
	}
	.compare-table tbody {
		display: block;
	}
	.compare-table tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid var(--wp--preset--color--fog);
		border-radius: 12px;
		padding: 1.25rem 1.5rem;
		background: var(--wp--preset--color--bone);
	}
	.compare-table tr.highlight {
		background: var(--wp--preset--color--ember);
		border-color: var(--wp--preset--color--signal);
	}
	.compare-table td {
		display: block;
		padding: 0.375rem 0;
		border: none;
	}
	.compare-table td::before {
		content: attr(data-label);
		display: block;
		font-family: "League Spartan", sans-serif;
		font-weight: 600;
		text-transform: uppercase;
		font-size: 0.6875rem;
		letter-spacing: 0.12em;
		color: var(--wp--preset--color--mist);
		margin-bottom: 0.125rem;
	}
}

/* Card lists need a slightly tighter indent so they don't
   crowd the right edge on narrower cards. */
.is-style-card ul:not(.wp-block-navigation):not(.wp-block-page-list),
.is-style-card ol:not(.wp-block-page-list) {
	padding-inline-start: 1.5em;
	margin-inline-start: 0.25em;
}

/* --- Wistia welcome video frame ------------------------------
   Lifts the player into the hero a touch (-3rem) and rounds it
   into the page surface so the hand-off from the hero is soft. */
.ehd-video-frame {
	position: relative;
	max-width: 720px;
	margin: -3rem auto 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 48px -16px rgba(11, 31, 58, 0.28),
	            0 4px 12px -4px rgba(11, 31, 58, 0.12);
	background: var(--wp--preset--color--ink);
}

@media (max-width: 720px) {
	.ehd-video-frame {
		margin-top: -1.5rem;
		border-radius: 12px;
	}
}

/* --- Pricing cards: button-aligned to bottom -----------------
   Both columns naturally stretch to the same height (WP default
   align-items:stretch). Making the inner content a flex column
   and pushing .wp-block-buttons to margin-top:auto anchors the
   CTAs at the bottom edge of each card so they line up
   regardless of how much copy sits above them. */
.wp-block-column.ehd-price-card {
	display: flex;
	flex-direction: column;
}

.wp-block-column.ehd-price-card > .wp-block-buttons {
	margin-top: auto;
}

/* --- Footer notices sub-row ----------------------------------- */
.ehd-footer-notices {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.ehd-footer-notices li {
	margin: 0;
	padding: 0;
}

.ehd-footer-notices a {
	color: #8A92A0;
	text-decoration: none;
	transition: color 150ms ease;
}

.ehd-footer-notices a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}