/* WAG Page with Header — stylesheet */

/* ─────────────────────────────────────────────────────────────────────────────
   Simple title bar (.ftd-pwh-page-title)
   Injected via presscore_before_main_container, so it sits BEFORE #main.
   No negative-margin breakout needed — it is naturally full-width there.
   ───────────────────────────────────────────────────────────────────────────── */

.ftd-pwh-page-title {
	width: 100%;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem clamp(1.75rem, 4vw, 3rem);
	box-sizing: border-box;
	background-color: var(--color-purple, #673f69);
	text-align: center;
}

.ftd-pwh-page-title-inner {
	max-width: 52rem;
	margin: 0 auto;
}

.ftd-pwh-title {
	margin: 0;
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Content area — stone background, padding, typography
   Applied to #content only (main column) so the sidebar keeps its own styling.
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * Fix 2: background on #content only, not .wf-container-main (which wraps sidebar too).
 * Fix 3: override The7's --the7-title-color variable and base text colour.
 * Fix 4: padding applied here so there is no competing reset rule on #content.
 */
body.ftd-wag-template #content {
	background-color: #f7f0ea;
	padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem) !important;
	margin-top: 0;
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
	border-radius: 0.75rem;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
	/* Override The7's white heading variable so theme heading rules pick up dark colour */
	--the7-title-color: var(--color-purple, #673f69);
	color: var(--color-darkgrey, #111);
}

body.ftd-wag-template .ftd-wag-content .entry-content {
	max-width: 780px;
	margin: 0 auto;
}

/* ── Text colours: target broadly so The7's heading CSS vars are overridden ── */

body.ftd-wag-template .ftd-wag-content h1,
body.ftd-wag-template .ftd-wag-content h2,
body.ftd-wag-template .ftd-wag-content h3,
body.ftd-wag-template .ftd-wag-content h4,
body.ftd-wag-template .ftd-wag-content h5,
body.ftd-wag-template .ftd-wag-content h6,
body.ftd-wag-template .ftd-wag-content .entry-content h1,
body.ftd-wag-template .ftd-wag-content .entry-content h2,
body.ftd-wag-template .ftd-wag-content .entry-content h3,
body.ftd-wag-template .ftd-wag-content .entry-content h4,
body.ftd-wag-template .ftd-wag-content .entry-content h5,
body.ftd-wag-template .ftd-wag-content .entry-content h6 {
	color: var(--color-purple, #673f69) !important;
	margin-top: 1.6em;
	margin-bottom: 0.4em;
	line-height: 1.25;
}

body.ftd-wag-template .ftd-wag-content h2,
body.ftd-wag-template .ftd-wag-content .entry-content h2 {
	font-size: clamp(1.25rem, 3vw, 1.6rem);
}

body.ftd-wag-template .ftd-wag-content h3,
body.ftd-wag-template .ftd-wag-content .entry-content h3 {
	font-size: clamp(1.05rem, 2.5vw, 1.3rem);
}

body.ftd-wag-template .ftd-wag-content p,
body.ftd-wag-template .ftd-wag-content .entry-content p {
	line-height: 1.75;
	margin-bottom: 1em;
	color: var(--color-darkgrey, #111) !important;
}

body.ftd-wag-template .ftd-wag-content blockquote,
body.ftd-wag-template .ftd-wag-content .entry-content blockquote {
	color: var(--color-darkgrey, #111) !important;
}

body.ftd-wag-template .ftd-wag-content ul,
body.ftd-wag-template .ftd-wag-content ol,
body.ftd-wag-template .ftd-wag-content .entry-content ul,
body.ftd-wag-template .ftd-wag-content .entry-content ol {
	margin: 0 0 1em 0;
	padding-left: 1.4em;
}

body.ftd-wag-template .ftd-wag-content li,
body.ftd-wag-template .ftd-wag-content .entry-content li {
	margin-bottom: 0.4em;
	line-height: 1.7;
	color: var(--color-darkgrey, #111) !important;
}

body.ftd-wag-template .ftd-wag-content li::marker,
body.ftd-wag-template .ftd-wag-content .entry-content li::marker {
	color: var(--color-coral, #f26849);
}

body.ftd-wag-template .ftd-wag-content a,
body.ftd-wag-template .ftd-wag-content .entry-content a {
	color: var(--color-coral, #f26849);
	font-weight: 600;
	text-underline-offset: 3px;
}

body.ftd-wag-template .ftd-wag-content a:hover,
body.ftd-wag-template .ftd-wag-content .entry-content a:hover {
	text-decoration: none;
}

body.ftd-wag-template .ftd-wag-content > *:first-child,
body.ftd-wag-template .ftd-wag-content .entry-content > *:first-child {
	margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Suppress The7 chrome that shouldn't show on the WAG template
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide the theme's built-in page title / breadcrumbs — we output our own */
body.ftd-has-page-header .page-title,
body.ftd-has-page-header .fancy-header,
body.ftd-has-page-header .ph-wrap,
body.ftd-has-page-header .breadcrumbs,
body.ftd-wag-template .page-title,
body.ftd-wag-template .fancy-header,
body.ftd-wag-template .ph-wrap,
body.ftd-wag-template .breadcrumbs {
	display: none !important;
}

/* Remove top padding/margin The7 adds above #main and the container */
body.ftd-has-page-header #main,
body.ftd-has-page-header .wf-container-main,
body.ftd-has-page-header .content,
body.ftd-has-page-header #content,
body.ftd-wag-template #main {
	padding-top: 0;
	margin-top: 0;
}

/* Give the whole content row (content column + sidebar) breathing room from
   the title bar so both start at the same vertical position. */
body.ftd-wag-template .wf-container-main {
	padding-top: clamp(1.5rem, 4vw, 3rem) !important;
	margin-top: 0;
}

/* Hide The7's main-gradient strip inside #main */
body.ftd-wag-template .main-gradient {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACF-driven full-width page header (.ftd-sc--page-header)
   Used on the Live Sessions archive (rendered inside .wf-container-main) so it
   still needs the viewport-width breakout to escape the column.
   When used via the WAG template hook (before #main) the calc resolves to 0 —
   no visual difference, still correct.
   ───────────────────────────────────────────────────────────────────────────── */

.ftd-sc--page-header {
	--ftd-ph-bg: var(--color-purple, #673f69);
	--ftd-ph-eyebrow: var(--color-coral, #f26849);
	--ftd-ph-title-accent: var(--color-golden, #f2a341);
	--ftd-ph-subtitle: var(--color-coral, #f26849);

	/* Fix 1: restore breakout so archive header is full viewport width */
	width: 100vw;
	max-width: 100vw;
	margin-top: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(2.75rem, 6vw, 4.75rem);
	box-sizing: border-box;
	background-color: var(--ftd-ph-bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--color-white, #fff);
	text-align: center;
}

.ftd-page-header-inner {
	max-width: 52rem;
	margin: 0 auto;
}

.ftd-page-header-eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ftd-ph-eyebrow);
}

.ftd-page-header-title {
	margin: 0 0 0.65rem;
	font-size: clamp(2.2rem, 6vw, 3.5rem);
	line-height: 1.05;
	font-weight: 700;
}

.ftd-page-header-title-main {
	color: var(--color-white, #fff);
}

.ftd-page-header-title-accent {
	color: var(--ftd-ph-title-accent);
}

.ftd-page-header-subtitle {
	margin: 0 0 1.35rem;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(1rem, 2.4vw, 1.2rem);
	color: var(--ftd-ph-subtitle);
}

.ftd-page-header-description {
	max-width: 42rem;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--color-white, #fff);
}

.ftd-page-header-description p {
	margin: 0 0 1rem;
}

.ftd-page-header-description p:last-child {
	margin-bottom: 0;
}

.ftd-page-header-cta-wrap {
	margin: 1.75rem 0 0;
}

.ftd-page-header-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	background: var(--color-cyan, #00e6e6);
	border: 2px solid var(--color-cyan, #00e6e6);
	color: var(--color-darkgrey, #111);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ftd-page-header-cta:hover {
	background: var(--color-cyan2, #00cccc);
	border-color: var(--color-cyan2, #00cccc);
	color: var(--color-darkgrey, #111);
	transform: translateY(-1px);
}