/* =========================================================
   DYAD COMPLIANCE UI
   ---------------------------------------------------------
   How styling is layered (lowest → highest priority):

   1. Design tokens below, wrapped in :where() so they carry
      zero specificity.
   2. Values from Settings > Dyad Privacy Policy, printed
      inline as `.dyad-compliance-root { --dyad-*: … }`.
   3. Your theme. To restyle the UI for one site, override
      tokens — no !important needed:

        #dyad-compliance-root {
            --dyad-surface-radius: 0;
            --dyad-font-size: 0.9rem;
        }

      For anything not covered by a token, target the element
      with the same `#dyad-compliance-root …` prefix used here;
      the theme stylesheet loads later, so it wins on ties.

   Component rules are scoped by the root ID so global theme
   rules (`button {}`, `.site-footer a {}`) don't leak in.
   ========================================================= */

/* ---------- 1. Tokens ---------- */

:where(.dyad-compliance-root) {
	/* Type */
	--dyad-font-family: freight-sans-pro, sans-serif;
	/* --compliance-button-font-size is the legacy name; still honored. */
	--dyad-font-size: var(--compliance-button-font-size, 14px);
	--dyad-line-height: 1.2;
	--dyad-letter-spacing: normal;
	--dyad-text-transform: none;
	--dyad-text-align: left;
	--dyad-heading-weight: normal;
	--dyad-text-color: #efefef;

	/* Links & text buttons */
	--dyad-link-style: italic;
	--dyad-link-decoration: none;
	--dyad-button-decoration: underline;
	--dyad-decoration-style: dashed;
	--dyad-underline-offset: 0.4em;
	--dyad-policy-link-line-height: 1.7;

	/* Container ("surface") */
	--dyad-surface-bg: rgba(0, 0, 0, 0.34);
	--dyad-surface-blur: blur(11px) saturate(130%);
	--dyad-surface-border: 1px solid rgba(255, 255, 255, 0.32);
	--dyad-surface-radius: 0.6em;
	--dyad-surface-padding: 1.2em 1em;
	--dyad-notice-padding: 1.3em 1.7em;
	--dyad-surface-sheen: rgba(255, 255, 255, 0.3);
	--dyad-surface-sheen-opacity: 0.6;
	--dyad-surface-sheen-shadow:
		7px 4px 6px -9px rgba(255, 255, 255, 1) inset,
		-7px -6px 33px -14px rgba(255, 255, 255, 0.35) inset;

	/* Layout */
	--dyad-offset-x: 0.5rem;
	--dyad-offset-y: 0.5rem;
	--dyad-max-width: 30em;
	--dyad-popup-width: 27em;
	--dyad-z-index: 9999;
	--dyad-actions-gap: 0.4em;
	--dyad-focus-ring: 2px solid rgba(255, 255, 255, 0.55);
}

/* Container style presets (Settings > Container Style). */
:where(.dyad-compliance-root[data-ui-container-style="light_glass"]) {
	--dyad-surface-bg: rgba(255, 255, 255, 0.44);
}

:where(.dyad-compliance-root[data-ui-container-style="custom_color"]) {
	--dyad-surface-bg: var(--dyad-container-custom-color, #1f1f1f);
	--dyad-surface-blur: none;
	--dyad-surface-border: 1px solid rgba(255, 255, 255, 0.2);
	--dyad-surface-radius: 0;
}

/* Serif preset reads better with an italic toggle label. */
:where(.dyad-compliance-root[data-ui-font-family="serif"]) {
	--dyad-toggle-style: italic;
}

/* Inside a site footer, sit beneath theme overlays (menus, modals). */
.site-footer .dyad-compliance-root {
	--dyad-z-index: 9;
}

.site-footer {
	/* Needed as a default so the privacy policy button can be positioned absolute */
	position: relative;
}

/* ---------- 2. Isolation reset ---------- */

#dyad-compliance-root *,
#dyad-compliance-root *::before,
#dyad-compliance-root *::after {
	all: revert;
	box-sizing: border-box;
}

/* ---------- 3. Components ---------- */

#dyad-compliance-root {
	position: fixed;
	left: var(--dyad-offset-x);
	bottom: var(--dyad-offset-y);
	z-index: var(--dyad-z-index);
	max-width: min(92vw, var(--dyad-max-width));
	font-family: var(--dyad-font-family);
	font-size: var(--dyad-font-size);
}

#dyad-compliance-root[data-consent-level="disabled"] {
	display: none;
}

.transition-out #dyad-compliance-root {
	opacity: 0;
	transition: 0.65s ease-in;
}

#dyad-compliance-root,
#dyad-compliance-root :is(div, p, h2, button, a, span) {
	text-align: var(--dyad-text-align);
	text-transform: var(--dyad-text-transform);
	letter-spacing: var(--dyad-letter-spacing);
	font-family: var(--dyad-font-family);
	line-height: var(--dyad-line-height);
	color: var(--dyad-text-color);
}

#dyad-compliance-root :is(div, p, h2, button, a, span) {
	font-size: 1em;
}

#dyad-compliance-root button {
	font: inherit;
	color: inherit;
}

#dyad-compliance-root p {
	display: inline;
	margin: 0 0 0.6em;
	color: inherit;
}

#dyad-compliance-root a,
#dyad-compliance-root a:hover,
#dyad-compliance-root a:visited {
	color: inherit;
	font-style: var(--dyad-link-style);
	text-decoration: var(--dyad-link-decoration);
	text-decoration-color: inherit;
	text-decoration-style: var(--dyad-decoration-style);
	text-underline-offset: var(--dyad-underline-offset);
}

#dyad-compliance-root span.dyad-consent-policy-link {
	line-height: var(--dyad-policy-link-line-height);
	white-space: nowrap;
}

#dyad-compliance-root h2 {
	font-weight: var(--dyad-heading-weight);
	margin: 0 0 0.5em;
}

/* Surface (notice + popup) */

#dyad-compliance-root .dyad-consent {
	position: relative;
	padding: var(--dyad-surface-padding);
	margin-top: 0.5em;
	color: var(--dyad-text-color);
	background: var(--dyad-surface-bg);
	-webkit-backdrop-filter: var(--dyad-surface-blur);
	backdrop-filter: var(--dyad-surface-blur);
	border: var(--dyad-surface-border);
	border-radius: var(--dyad-surface-radius);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

/* Liquid-glass sheen */
#dyad-compliance-root .dyad-consent::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--dyad-surface-sheen);
	border-radius: var(--dyad-surface-radius);
	box-shadow: var(--dyad-surface-sheen-shadow);
	opacity: var(--dyad-surface-sheen-opacity);
	z-index: -1;
	pointer-events: none;
}

#dyad-compliance-root .dyad-consent-actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.8em;
	gap: var(--dyad-actions-gap);
}

/* Collapsible notice */

#dyad-compliance-root .dyad-consent-notice {
	padding: var(--dyad-notice-padding);
	transition:
		transform 0.85s cubic-bezier(0.57, 0.16, 0.39, 0.88),
		background-color 0.35s ease,
		border-color 0.35s ease,
		backdrop-filter 0.35s ease;
}

#dyad-compliance-root .dyad-consent-notice:not(.is-expanded) {
	background: transparent;
	border-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

#dyad-compliance-root .dyad-consent-notice.is-expanded {
	transform: translate3d(0, 0, 0);
	transition:
		transform 0.6s cubic-bezier(0.15, 0.67, 0.6, 0.99),
		background-color 0.6s ease,
		border-color 0.6s ease,
		backdrop-filter 0.6s ease;
}

#dyad-compliance-root .dyad-consent-notice::after {
	opacity: 0;
	transition: opacity 0.6s ease;
}

#dyad-compliance-root .dyad-consent-notice.is-expanded::after {
	opacity: var(--dyad-surface-sheen-opacity);
}

#dyad-compliance-root .dyad-consent-toggle {
	appearance: none;
	border: none;
	background: transparent;
	margin: 0;
	padding: 0 0 0.35em;
	color: var(--dyad-text-color);
	cursor: pointer;
	/* Toggle Button settings; each falls back to the popup's own value. */
	font-family: var(--dyad-toggle-font-family, var(--dyad-font-family));
	font-size: var(--dyad-toggle-font-size, 1em);
	font-style: var(--dyad-toggle-style, normal);
	font-weight: var(--dyad-toggle-font-weight, normal);
	letter-spacing: var(--dyad-toggle-letter-spacing, var(--dyad-letter-spacing));
	text-transform: var(--dyad-toggle-text-transform, var(--dyad-text-transform));
}

/* Collapsed label color: the "Collapsed Text Color" setting
   (--dyad-toggle-collapsed-color) wins, then the footer's own text color
   when docked in the footer, then the regular text color. */
#dyad-compliance-root
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle {
	color: var(
		--dyad-toggle-collapsed-color,
		var(--dyad-toggle-text-color, var(--dyad-text-color))
	);
}

#dyad-compliance-root .dyad-consent-notice.is-expanded .dyad-consent-toggle {
	opacity: 1;
	cursor: text;
}

#dyad-compliance-root .dyad-consent-toggle:focus {
	outline: var(--dyad-focus-ring);
	outline-offset: 4px;
}

#dyad-compliance-root .dyad-consent-details,
#dyad-compliance-root .dyad-consent-notice .ccpa-close {
	opacity: 0;
	transform: translateY(-0.4em) scale(0.985);
	pointer-events: none;
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.6s cubic-bezier(0.22, 0.01, 0, 1),
		opacity 0.6s ease,
		transform 0.6s ease-out;
}

#dyad-compliance-root .dyad-consent-notice.is-expanded .dyad-consent-details,
#dyad-compliance-root .dyad-consent-notice.is-expanded .ccpa-close {
	opacity: 0.999;
	max-height: var(--dyad-detail-max-height, 20em);
	transform: translateY(0) scale(1);
	pointer-events: auto;
	transition:
		max-height 0.6s cubic-bezier(0.22, 0.01, 0, 1),
		opacity 0.8s 0.1s cubic-bezier(0.44, 0.02, 0.52, 0.99),
		transform 0.6s ease-out;
}

#dyad-compliance-root .dyad-consent-notice.is-collapsing,
#dyad-compliance-root .dyad-consent-notice.is-collapsing::after,
#dyad-compliance-root .dyad-consent-notice.is-collapsing .dyad-consent-details,
#dyad-compliance-root .dyad-consent-notice.is-collapsing .ccpa-close {
	transition-duration: 0.35s;
}

/* Close (×) */

#dyad-compliance-root button.ccpa-close {
	position: absolute;
	z-index: 99;
	cursor: pointer;
	top: 0.35em;
	right: 0;
	padding: 0.5em 1em;
	height: 2em;
	width: 3em;
	border: none;
	background: transparent;
}

#dyad-compliance-root button.ccpa-close::before,
#dyad-compliance-root button.ccpa-close::after {
	content: "";
	position: absolute;
	top: 1em;
	right: 1em;
	height: 1px;
	width: 0.85em;
	background: var(--dyad-text-color);
	pointer-events: none;
	transform: rotate(45deg);
}

#dyad-compliance-root button.ccpa-close::after {
	transform: rotate(135deg);
}

/* Text buttons */

#dyad-compliance-root .dyad-btn {
	cursor: pointer;
	border: none;
	border-radius: 0;
	background: transparent;
	color: inherit;
	padding: 0;
	margin: 0 0.25em 0.55em 0;
	text-decoration: var(--dyad-button-decoration);
	text-decoration-color: inherit;
	text-decoration-style: var(--dyad-decoration-style);
	text-underline-offset: var(--dyad-underline-offset);
}

#dyad-compliance-root .dyad-btn-link {
	text-decoration: underline;
}

/* Footer-docked placement */

#dyad-compliance-root.dyad-compliance-root--footer {
	--dyad-toggle-text-color: var(
		--dyad-footer-toggle-color,
		var(--dyad-text-color)
	);
	position: absolute;
	right: auto;
	max-width: min(100%, var(--dyad-max-width));
	pointer-events: none;
	margin: 0;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent,
#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-popup {
	pointer-events: auto;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-toggle {
	display: block;
	margin-left: 0;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-popup {
	position: absolute;
	left: 0;
	right: auto;
	bottom: calc(100% + 0.75rem);
	width: var(--dyad-popup-width);
	max-width: min(92vw, var(--dyad-popup-width));
	margin: 0;
	z-index: 100000;
}

#dyad-compliance-root.dyad-compliance-root--footer
	.dyad-consent-popup
	.dyad-popup-card {
	max-width: 100%;
}

@media (max-width: 640px) {
	#dyad-compliance-root {
		left: 0.75rem;
		right: 0.75rem;
		max-width: none;
	}

	#dyad-compliance-root.dyad-compliance-root--footer {
		left: 0;
		right: auto;
		max-width: 100%;
	}
}

/* Keep `hidden` authoritative over the display rules above. */
#dyad-compliance-root[hidden],
#dyad-compliance-root [hidden] {
	display: none;
}

/* =========================================================
   CENTERED VARIANT (opt-in; paste into the theme to use)
   =========================================================
@media (max-width: 640px) {
	#dyad-compliance-root,
	#dyad-compliance-root.dyad-compliance-root--footer {
		--dyad-text-align: center;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	#dyad-compliance-root .dyad-consent-actions {
		justify-content: center;
	}

	#dyad-compliance-root .dyad-consent-toggle {
		margin-left: auto;
		margin-right: auto;
	}
}
*/

/* CLAUDE */
/* Footer placement: interior pages, mobile homepage, and the desktop homepage once scrolled past the slideshow */
#dyad-compliance-root.dyad-compliance-root--footer {
	--dyad-text-align: center;
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	width: 100%;
	max-width: none;
	height: 2.2em;
	margin: 0.6em 0 0;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-notice {
	position: absolute;
	bottom: 0;
	padding-bottom: 0.6em;
	left: 0;
	right: 0;
	width: min(92vw, var(--dyad-max-width));
	margin: 0 auto;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-toggle {
	margin-left: auto;
	margin-right: auto;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-actions {
	justify-content: center;
}

#dyad-compliance-root.dyad-compliance-root--footer .dyad-consent-popup {
	left: 0;
	right: 0;
	margin: 0 auto;
}

#dyad-compliance-root .dyad-consent-toggle,
#dyad-compliance-root
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle {
	color: #404040;
}

/* home page slideshow hover */
#dyad-compliance-root.dyad-compliance-root--footer
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle,
#dyad-compliance-root.dyad-compliance-root--hero
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle {
	opacity: 0.7;
}

#dyad-compliance-root.dyad-compliance-root--footer
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle:hover,
#dyad-compliance-root.dyad-compliance-root--hero
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle:hover {
	opacity: 1;
}

/* Contact page */
body:has([data-barba-namespace="contact-page"])
	#dyad-compliance-root
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle {
	color: rgba(255, 255, 255, 0.7);
}

/* Homepage (desktop): sits in the bottom-left of the slideshow inside .scroll-to-view, then
   reappears in the footer. */
/* .dyad-compliance-root--hero  : desktop homepage, while the slideshow is on screen */
#dyad-compliance-root.dyad-compliance-root--hero {
	position: absolute;
	text-align: left;
	transition: opacity 0.6s ease-in-out;
}

/*  fades out while scrolling down */
.scrolling-down #dyad-compliance-root.dyad-compliance-root--hero {
	opacity: 0;
}

/* white on slideshow*/
#dyad-compliance-root.dyad-compliance-root--hero
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle {
	color: #fff;
	/* font-family: "ltc-goudy-oldstyle-pro", serif; */
}

#dyad-compliance-root .dyad-consent-toggle {
	transform: translateY(0);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
	will-change: opacity, transform;
}

#dyad-compliance-root
	.dyad-consent-notice:not(.is-expanded)
	.dyad-consent-toggle {
	transform: translate(0em, -0.2em) !important;
}

/* CLAUDE */
/* Always Freight Sans. The plugin's "Theme body font" setting injects
   .dyad-compliance-root { --dyad-font-family: <first paragraph's font> } on
   every page load, which beat the :where() default above. The #id wins. */
#dyad-compliance-root {
	--dyad-font-family: freight-sans-pro, sans-serif;
}

/* CLAUDE */
/* ---------- Website policy page ----------
   Matches the Profile page: italic Goudy page title (like its blockquotes),
   purple Freight Sans section labels (.title-holder h3), gray uppercase
   subtitle (.title-holder h4), and left-aligned Goudy body copy.
   #primary is added to outrank the policy manager's inline #website-policy styles.
   .site-main already clears the masthead (padding-top: 8em). */
#primary #website-policy {
	font-family: "ltc-goudy-oldstyle-pro", serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #404040;
	text-align: left;
	max-width: 40em;
	padding: 0 6% 4em;
}

/* Page title: like the Profile page's italic Goudy quotes */
#primary #website-policy h2 {
	font-family: "ltc-goudy-oldstyle-pro", serif;
	font-style: italic;
	font-size: 1.7em;
	letter-spacing: 0.035em;
	text-transform: none;
	text-align: center;
	margin: 0 auto 0.15em;
}

/* Effective date: like the gray .title-holder h4 subtitle; !important beats its inline style */
#primary #website-policy h2 + p {
	font-family: freight-sans-pro, sans-serif;
	font-size: 0.8em !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase;
	text-align: center;
	color: #5f5852;
	opacity: 1 !important;
	margin: 0 auto 3em !important;
}

/* Section headings: like the purple .title-holder h3 ("— PHILOSOPHY —"); the theme adds the dashes */
#primary #website-policy h3 {
	font-size: 0.95em;
	letter-spacing: 0.2em;
	color: #261b51;
	text-align: center;
	margin: 3em auto 1em;
}

#primary #website-policy p,
#primary #website-policy ul {
	margin: 0 0 1em;
}

#primary #website-policy ul {
	list-style: disc;
	padding-left: 1.2em;
}

#primary #website-policy a {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	opacity: 1;
	overflow-wrap: anywhere;
	transition: color 0.3s ease;
}

#primary #website-policy a:hover {
	color: #000;
	opacity: 1;
}

/* "Return to Contact Page" closes the page, centered */
#primary #website-policy p:last-child {
	text-align: center;
	margin-top: 3em;
}