/* ==========================================================================
   Site updates (Oct 2026): footer Work Reel + modal, footer AI links,
   blog post download button. Loaded on every page (site-updates.php).
   ========================================================================== */

/* ---------- Footer: Work Reel link sits above the existing footer link ---------- */
.emo.footer .footer__location .footer__reel--video {
	display: table;
	margin-bottom: 0.5rem;
}

/* ---------- Footer layout (Figma): right column runs the full height, so the socials and
   the AI links sit at the bottom, level with the copyright + Privacy | Terms in the middle column ---------- */
@media screen and (min-width: 950px) {
	.emo.footer .footer__wrap .footer__location {
		grid-column: 3;
		grid-row: 1 / 3;
		justify-content: flex-start;
	}

	.emo.footer .footer__wrap .footer__location .footer__socials { margin-top: auto; }

	.emo.footer .footer__wrap .footer__emo { align-self: end; }

	.emo.footer .footer__wrap .footer__legal {
		display: block;
		grid-column: 2;
		grid-row: 2;
		align-self: end;
	}
}

/* Desktop: Privacy Policy | Terms of Service on one line under the copyright;
   spacing in the right column as in Figma (the column no longer spreads its items out). */
@media screen and (min-width: 950px) {
	.emo.footer .footer__wrap .footer__legal .footer__policy-terms { margin-top: 0.25rem; }

	.emo.footer .footer__wrap .footer__legal .footer__policy-terms ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.emo.footer .footer__wrap .footer__legal .footer__policy-terms li { margin: 0; }

	.emo.footer .footer__wrap .footer__legal .footer__policy-terms li + li::before {
		content: "|";
		margin: 0 0.375rem;
	}

	.emo.footer .footer__wrap .footer__legal .footer__policy-terms a { display: inline; }

	.emo.footer .footer__wrap .footer__location .footer__reel--video { margin-bottom: 0.875rem; }
	.emo.footer .footer__wrap .footer__location address { margin-top: 1.5rem; }
}

/* ---------- Footer: AI Information + Explore AI Summary (hidden until set in Theme Settings) ---------- */
.emo.footer .footer__ai {
	display: flex;
	flex-direction: column;
	margin-top: 1.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #FFFCF5;
}

/* On phones the socials normally have a big gap under them: keep the AI links close to
   them and put that gap under the AI links instead. */
.emo.footer .footer__wrap ul.footer__socials:has(+ .footer__ai) { margin-bottom: 0; }

@media screen and (max-width: 949px) {
	.emo.footer .footer__ai { margin-bottom: 3rem; }
}

.emo.footer .footer__ai a {
	color: inherit;
	text-decoration: none;
}

.emo.footer .footer__ai-link:hover,
.emo.footer .footer__ai-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.emo.footer .footer__ai-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.emo.footer .footer__ai-icons {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.emo.footer .footer__ai-icons li { margin: 0; padding: 0; }
.emo.footer .footer__ai-icons li::before { content: none; }

.emo.footer .footer__ai-icons a {
	display: block;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.emo.footer .footer__ai-icons a:hover,
.emo.footer .footer__ai-icons a:focus-visible { opacity: 1; }

.emo.footer .footer__ai-icons img {
	display: block;
	width: auto;
	height: 1.25rem;
	object-fit: contain;
}

/* ---------- Work Reel modal ---------- */
.reel-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4.5rem 1.5rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.reel-modal[hidden] { display: none; }
.reel-modal.is-open { opacity: 1; }

.reel-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 26, 0.94);
	cursor: pointer;
}

.reel-modal__inner {
	position: relative;
	width: min(100%, 75rem);
}

.reel-modal__video {
	display: block;
	width: 100%;
	max-height: calc(100vh - 9rem);
	background: #000;
	border-radius: 0.5rem;
}

.reel-modal__close {
	position: absolute;
	top: -3rem;
	right: 0;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 252, 245, 0.6);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.reel-modal__close::before,
.reel-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.875rem;
	height: 1px;
	background: #FFFCF5;
	transform: translate(-50%, -50%) rotate(45deg);
}

.reel-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.reel-modal__close:hover,
.reel-modal__close:focus-visible { border-color: #FFFCF5; }

html.reel-modal-open,
html.reel-modal-open body { overflow: hidden; }

/* ---------- Blog post sidebar: download button (replaces the subscribe button when set) ---------- */
.tblog__download {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.625rem;
	border: 0.0625rem solid #1A1A1A;
	border-radius: 1.75rem;
	background-color: #1A1A1A;
	color: #FFFCF5;
	font-family: "Basel Grotesk";
	font-size: 1.125rem;
	line-height: 1.5rem;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tblog__download:hover,
.tblog__download:focus-visible {
	background-color: transparent;
	color: #1A1A1A;
}

.tblog__download-icon,
.tblog__download-icon svg { display: block; }

@media screen and (min-width: 768px) {
	.tblog__download { font-size: 1.25rem; line-height: 1.625rem; }
}

/* The download button sits where the subscribe button was, so keep the same gap to "See our services". */
.thinking-sticky .tblog__download + .btn-services { margin-top: 1rem; }

/* ---------- Insights sidebar icons with WP Rocket LazyLoad ----------
   The small arrow/close icons in the subscribe button and the "View All Field Notes" filter
   have no width/height in the HTML. LazyLoad swaps them for a placeholder that renders at
   300x150 until its script runs, which made the subscribe button ~170px tall and left a big
   gap under the filter. Giving them their real size fixes it with or without LazyLoad. */
img.think__cta--arrow,
img.think__cta--close {
	width: 24px;
	height: 24px;
	max-width: 24px;
	object-fit: contain;
}

/* ---------- About page header (People template) ---------- */

/* Eyebrow sits 14px above the heading. The theme lifts every .eyebrow by 5rem (top: -5rem),
   which left a large gap here; on the About page it stays in place instead. */
.page-template-page-people .emo.split .eyebrow {
	top: 0;
	margin: 0 0 14px;
}

/* Intro text under the heading (Figma: 840px wide, 20px / 30px). */
.emo.split .split__intro {
	max-width: 52.5rem; /* 840px */
	margin-top: 1.5rem;
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-size: 1.25rem; /* 20px (Oct 15: 14px was too small) */
	line-height: 1.5;
	color: var(--text-color, #1A1A1A);
}

/* ---------- Text Page template (AI Information) ----------
   One rule per text component from the Figma "Text Components: AI page" frame (Oct 9), with
   its spacing: 48px between sections, header to text 18px (20px to a large title), large
   title 12px, title 9px, 18px between paragraphs, bullets 9px apart, 120px under the header. */
.emo.text-page {
	padding: calc(4.875rem + 3.5rem) 0 5rem; /* clears the fixed header (4.875rem on phones) */
	background: #FFFCF5;
	color: #1A1A1A;
}
@media screen and (min-width: 768px) {
	.emo.text-page { padding-top: calc(5.375rem + 7.5rem); } /* fixed header (5.375rem) + 120px */
}

.text-page__inner {
	max-width: 40.3125rem; /* 645px column, centred */
	margin: 0 auto;
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-size: 1.125rem; /* Text: Regular 18 / 24 */
	font-weight: 400;
	line-height: 1.3333;
}

.text-page__inner .text-page__eyebrow {
	margin: 0 0 1rem; /* 16px to the title */
	font-family: "Baselgrotesk Book", "Basel Grotesk", Arial, sans-serif; /* Book 16, no tracking */
	font-size: 1rem;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
}

.text-page__inner h1 {
	margin: 0 0 3rem; /* 48px */
	font-family: Tobias, Georgia, serif;
	font-size: clamp(2.25rem, 4vw, 3.5rem); /* Light 56 / 64 */
	font-weight: 300;
	line-height: 1.143;
	letter-spacing: -0.0314em; /* -1.76px at 56px (Figma) */
}

/* Header (serif) */
.text-page__inner h2 {
	margin: 3rem 0 1.125rem; /* 48px between sections, 18px to the text */
	font-family: Tobias, Georgia, serif;
	font-size: 1.625rem; /* Regular 26 / 28 */
	font-weight: 400;
	line-height: 1.077;
}

/* Large title (h3), Title (h4) and the bold lead line: Basel Grotesk Medium */
.text-page__inner h3,
.text-page__inner h4,
.text-page__inner .text-page__lead {
	font-family: "Basel Grotesk", Arial, sans-serif;
	font-weight: 500; /* Medium (600 fell back to Bold) */
	line-height: 1.3;
}
.text-page__inner h3 { margin: 1.75rem 0 0.75rem; font-size: 1.375rem; line-height: 1.09; } /* Medium 22 / 24: 28px after text, 12px to the title */
.text-page__inner h4 { margin: 1.125rem 0 0.5625rem; font-size: 1.25rem; } /* Medium 20 / 26: 9px to its text */
.text-page__inner .text-page__lead { margin: 0 0 0.5625rem; font-size: 1.25rem; } /* Medium 20 / 26 */
.text-page__inner h2 + h3 { margin-top: 1.25rem; } /* 20px */
.text-page__inner h3 + h4 { margin-top: 0.75rem; } /* 12px */

/* The theme sets p { line-height: 1.125 } and ul li { list-style: none } everywhere, so the
   text, list and bullet values are set here directly rather than inherited from the column. */
.text-page__inner p,
.text-page__inner li {
	font-size: 1.125rem; /* Text: Regular 18 / 24 */
	line-height: 1.3333;
}
.text-page__inner p,
.text-page__inner ol { margin: 0 0 1.125rem; } /* 18px between paragraphs */
.text-page__inner p:has(+ ul),
.text-page__inner p:has(+ ol) { margin-bottom: 0.5625rem; } /* 9px to a list */

/* Intro text: Regular 20 / 26 */
.text-page__inner p.is-large { font-size: 1.25rem; line-height: 1.3; }
.text-page__inner strong { font-weight: 500; }
/* About Emotive Brand facts: the regular Text style, 18 / 24, labels in Medium (Figma). */

/* Bullet text: discs, 27px indent, 9px apart, 21px to the text after */
.text-page__inner ul {
	margin: 0 0 1.3125rem;
	padding-left: 1.6875rem;
	list-style: disc;
}
.text-page__inner ol { padding-left: 1.6875rem; }
.text-page__inner li {
	margin: 0 0 0.5625rem;
	padding: 0;
	list-style: disc;
}
.text-page__inner ol > li { list-style: decimal; }
.text-page__inner li:last-child { margin-bottom: 0; }
.text-page__inner li::before { content: none; }

/* Divider line: 48px above and below */
.text-page__inner hr {
	height: 0;
	margin: 3rem 0;
	border: 0;
	border-top: 1px solid #1A1A1A;
}

/* FAQ: question + answer, a line under each item; 36px under the header, 20px between items */
.text-page__faq { margin-top: 2.25rem; }
.text-page__faq-item {
	margin-bottom: 1.25rem;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid #1A1A1A;
}
.text-page__inner .text-page__faq-item h3 { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.3; } /* Medium 20 / 26, 16px to the answer */
.text-page__inner .text-page__faq-item > :last-child { margin-bottom: 0; }

/* Links */
.text-page__inner a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.text-page__inner a:hover,
.text-page__inner a:focus-visible { text-decoration-thickness: 2px; }

@media screen and (max-width: 767px) {
	.text-page__inner h2 { font-size: 1.5rem; }
}

@media screen and (min-width: 950px) {
    .emo.footer .footer__wrap {
        grid-row-gap: 3.5rem;
    }
}

/* ==========================================================================
   Oct 15 client feedback
   ========================================================================== */

/* Basel Grotesk Book (Figma "Book") on every page: AI page eyebrow, Field Note lines, form text. */
@font-face {
	font-family: "Baselgrotesk Book";
	src: url("fonts/BaselGrotesk-Book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Eyebrows: 18px from tablets up (the theme had 20px). */
@media screen and (min-width: 768px) {
	.eyebrow { font-size: 18px; }
}

/* Insights: "View All Field Notes" keeps the lines and arrow the white paper filter had. */
.thinking-filters li:has([rel="field_note"]) {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #1A1A1A;
}

.thinking-filters li:has([rel="field_note"]) button {
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 1;
}

.thinking-filters li:has([rel="field_note"]) button img,
.thinking-filters li:has([rel="field_note"]) button svg {
	display: block;
	flex: none;
	transition: transform 0.2s ease-in;
}

.thinking-filters li:has([rel="field_note"]) button:hover img,
.thinking-filters li:has([rel="field_note"]) button:hover svg { transform: translateX(5px); }