/*!
 * unec-legal v1.1.1 — legal / policy page styling for Enfold
 *
 * Styles the long-form rich text on the Privacy Policy, Cookie Policy and any
 * other policy or terms page so it reads in the house voice: Pretendard,
 * 17/26 body, 28/34 section headings, the 1408 gutter ladder and the site's
 * 100px section rhythm.
 *
 * Every selector is scoped under #top (Enfold's body id) so module CSS wins
 * on specificity without !important. There is no !important in this file.
 *
 * Breakpoints 1400 / 1180 / 1024 / 768 / 480 change custom properties only —
 * no rule is duplicated. Token names, the gutter ladder and the padding
 * scale are the same ones unec-service/ uses, so the two agree by
 * construction rather than by coincidence.
 *
 *  1. Tokens
 *  2. Section shell — container re-point, Avia floats
 *  3. Rich-text body
 *  4. Responsive ladder
 *  5. Print
 */

/* =========================================================================
 * 1. Tokens
 * ====================================================================== */
#top .unec_lg {
	/* Palette */
	--unec_lg_dark: #231f20;
	--unec_lg_yellow: #ffc20e;
	/* The house 12% darken, as used on the share fills in unec-single/. */
	--unec_lg_yellow_dark: #e0ab0c;
	--unec_lg_white: #ffffff;
	/* Grid — 1920→256, 1728→160, 1608→100, 1508→50, then 50 / 40 / 24.
	   Same max() ladder as unec-service/; no 100vw anywhere, so a scrollbar
	   cannot shift it. */
	--unec_lg_max: 1408px;
	--unec_lg_gutter: 50px;
	/* Reading measure. 860px at 17px is ~95 characters — long enough to look
	   like the rest of the site's left-aligned grid, short enough to read.
	   The body is left-aligned to the grid, not centred. */
	--unec_lg_measure: 860px;
	/* Type scale, the same steps as the site's h5 / h6 / body styles */
	--unec_lg_h2_fs: 28px;
	--unec_lg_h2_lh: 34px;
	--unec_lg_h3_fs: 20px;
	--unec_lg_h3_lh: 30px;
	--unec_lg_body_fs: 17px;
	--unec_lg_body_lh: 26px;
	--unec_lg_track_h2: -0.02em;
	--unec_lg_track_h3: -0.01em;
	--unec_lg_font: "Pretendard", "Pretendard Variable", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--unec_lg_weight_semibold: 600;
	--unec_lg_weight_medium: 500;
	--unec_lg_weight_regular: 400;
	/* Rules and muted copy — the house values */
	--unec_lg_rule_opacity: 0.2;
	--unec_lg_muted: 0.64;
	/* Vertical rhythm */
	--unec_lg_space_h2: 64px;
	--unec_lg_space_h2_after: 24px;
	--unec_lg_space_h3: 40px;
	--unec_lg_space_h3_after: 16px;
	--unec_lg_space_p: 20px;
	--unec_lg_space_li: 10px;
	--unec_lg_indent: 25.5px;
	--unec_lg_meta_gap: 48px;
	/* Section rhythm. Figma draws 160; this site runs 100 — see
	   claude/section-padding.md. The breakpoints move --unec_lg_pad_scale, a
	   multiplier, so the ladder is monotonic by construction. */
	--unec_lg_pad_v: 100px;
	/* Motion */
	--unec_lg_ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--unec_lg_speed: 0.25s;
}

/* =========================================================================
 * 2. Section shell
 * ====================================================================== */
#top .unec_lg {
	position: relative;
	box-sizing: border-box;
	display: block;
	float: none;
	clear: both;
	width: 100%;
	margin: 0;
	padding-top: calc(var(--unec_lg_pad_v, 100px) * var(--unec_lg_pad_scale, 1));
	padding-bottom: calc(var(--unec_lg_pad_v, 100px) * var(--unec_lg_pad_scale, 1));
	/* The gutter ladder lives on the section itself rather than on a wrapper,
	   so it holds in both shapes the module supports: the Color Section a
	   client pasted, and the div the PHP renderer wraps the content in.
	   max() gives 256 at 1920, 160 at 1728, 100 at 1608 and 50 from 1508
	   down — no 100vw anywhere, so a scrollbar cannot shift it. */
	padding-left: max(var(--unec_lg_gutter), calc((100% - var(--unec_lg_max)) / 2));
	padding-right: max(var(--unec_lg_gutter), calc((100% - var(--unec_lg_max)) / 2));
	background-color: var(--unec_lg_white);
	font-family: var(--unec_lg_font);
	color: var(--unec_lg_dark);
}
/* font-family is restated on every descendant because Enfold styles the bare
   element (#top div, 1-0-1) and that beats inheritance from .unec_lg — the
   trap recorded in claude/main-navigation.md. */
#top .unec_lg * {
	box-sizing: border-box;
	font-family: var(--unec_lg_font);
}

/* Enfold's .container is capped at 1310px by `.responsive .container` (0-2-0)
   with a 50px inset, and it turns up in a different place in each of the two
   shapes. Both rules below are 1-2-0 and beat the theme outright, so nothing
   here needs !important.

   Shape A — the client pasted the ALB block: .unec_lg is the Color Section
   and .container is its child. The section already carries the ladder, so the
   inner container must not add a second gutter. */
#top .unec_lg > .container {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
/* Shape B — the PHP renderer wrapped the page: .container is an ANCESTOR of
   our markup, and a class on a descendant can never select upward, so :has()
   is the only route. Same mechanism as the details band in
   claude/contact-pages.md. */
#top .container:has(.unec_lg_page) {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}
/* …and the Enfold section, main column and content wrapper around it all
   carry padding, floats and bottom margins of their own. */
#top .container_wrap:has(.unec_lg_page),
#top .container_wrap:has(.unec_lg_page) .content {
	padding-top: 0;
	padding-bottom: 0;
}
/* Enfold draws a 1px hairline on top of every container_wrap. Left in, the
   subhero starts one pixel down the page and no longer meets the header. */
#top .container_wrap:has(.unec_lg_page) {
	border-top-width: 0;
}
#top .unec_lg_page,
#top .container_wrap:has(.unec_lg_page) .content,
#top .container_wrap:has(.unec_lg_page) .post-entry,
#top .container_wrap:has(.unec_lg_page) .entry-content-wrapper {
	float: none;
	width: 100%;
	margin: 0;
}

/* Avia floats the column, the content wrapper and its text sections. A
   floated sibling drops a following block out of flow and silently eats the
   design's gaps — see claude/subhero.md. */
#top .unec_lg .content,
#top .unec_lg .flex_column,
#top .unec_lg .entry-content-wrapper,
#top .unec_lg .av_textblock_section {
	float: none;
}
#top .unec_lg .flex_column,
#top .unec_lg .av_textblock_section,
#top .unec_lg .entry-content-wrapper {
	margin-bottom: 0;
}
#top .unec_lg .content {
	padding-top: 0;
	padding-bottom: 0;
}

/* =========================================================================
 * 3. Rich-text body
 *
 * The body is author-entered editor content, so every rule here has to hold
 * for markup nobody vets. Each selector carries the section class as well as
 * the body class, because Enfold's content rules are (1,1,1) —
 * `#top .content ul { margin: 0 0 1.4em 3em }` and `#top .content li` both
 * beat a (1,1,0) reset, which is the bug recorded in
 * claude/single-news-page.md.
 * ====================================================================== */
#top .unec_lg .unec_lg_body {
	max-width: var(--unec_lg_measure);
	margin: 0;
	font-size: var(--unec_lg_body_fs);
	line-height: var(--unec_lg_body_lh);
	font-weight: var(--unec_lg_weight_regular);
	letter-spacing: 0;
	color: var(--unec_lg_dark);
}

/* Rhythm. The blanket `* + *` rule sets the paragraph gap; the heading rules
   below are (1,2,1) and override it rather than fighting it. */
#top .unec_lg .unec_lg_body > * {
	margin: 0;
}
#top .unec_lg .unec_lg_body > * + * {
	margin-top: var(--unec_lg_space_p);
}
#top .unec_lg .unec_lg_body > :first-child {
	margin-top: 0;
}
#top .unec_lg .unec_lg_body > :last-child {
	margin-bottom: 0;
}

#top .unec_lg .unec_lg_body p {
	font-size: var(--unec_lg_body_fs);
	line-height: var(--unec_lg_body_lh);
	font-weight: var(--unec_lg_weight_regular);
	color: var(--unec_lg_dark);
}

/* --- Headings ---------------------------------------------------------- */
#top .unec_lg .unec_lg_body h2 {
	margin-top: var(--unec_lg_space_h2);
	margin-bottom: 0;
	padding: 0;
	font-size: var(--unec_lg_h2_fs);
	line-height: var(--unec_lg_h2_lh);
	font-weight: var(--unec_lg_weight_medium);
	letter-spacing: var(--unec_lg_track_h2);
	color: var(--unec_lg_dark);
	text-transform: none;
}
/* The hairline above each section heading is a pseudo-element inside the
   heading, not a border — a border would sit outside the margin box and
   collapse differently against the paragraph above it. To drop the rules:
   #top .unec_lg .unec_lg_body h2::before { display: none; } */
#top .unec_lg .unec_lg_body h2::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	margin-bottom: var(--unec_lg_space_h2_after);
	background-color: currentColor;
	opacity: var(--unec_lg_rule_opacity);
}
#top .unec_lg .unec_lg_body > h2:first-child {
	margin-top: 0;
}
#top .unec_lg .unec_lg_body h2 + * {
	margin-top: var(--unec_lg_space_h2_after);
}

#top .unec_lg .unec_lg_body h3 {
	margin-top: var(--unec_lg_space_h3);
	margin-bottom: 0;
	padding: 0;
	font-size: var(--unec_lg_h3_fs);
	line-height: var(--unec_lg_h3_lh);
	font-weight: var(--unec_lg_weight_medium);
	letter-spacing: var(--unec_lg_track_h3);
	color: var(--unec_lg_dark);
	text-transform: none;
}
#top .unec_lg .unec_lg_body h3 + * {
	margin-top: var(--unec_lg_space_h3_after);
}
#top .unec_lg .unec_lg_body h4,
#top .unec_lg .unec_lg_body h5,
#top .unec_lg .unec_lg_body h6 {
	margin-top: var(--unec_lg_space_h3);
	margin-bottom: 0;
	font-size: var(--unec_lg_body_fs);
	line-height: var(--unec_lg_body_lh);
	font-weight: var(--unec_lg_weight_semibold);
	letter-spacing: 0;
	color: var(--unec_lg_dark);
	text-transform: none;
}

/* --- Lists ------------------------------------------------------------- */
#top .unec_lg .unec_lg_body ul,
#top .unec_lg .unec_lg_body ol {
	margin: var(--unec_lg_space_p) 0 0 var(--unec_lg_indent);
	padding: 0;
	font-size: var(--unec_lg_body_fs);
	line-height: var(--unec_lg_body_lh);
}
#top .unec_lg .unec_lg_body ul {
	list-style: disc outside;
}
#top .unec_lg .unec_lg_body ol {
	list-style: decimal outside;
}
#top .unec_lg .unec_lg_body ul ul,
#top .unec_lg .unec_lg_body ol ol,
#top .unec_lg .unec_lg_body ul ol,
#top .unec_lg .unec_lg_body ol ul {
	margin-top: var(--unec_lg_space_li);
}
#top .unec_lg .unec_lg_body li {
	margin: 0;
	padding: 0;
	font-size: var(--unec_lg_body_fs);
	line-height: var(--unec_lg_body_lh);
	color: var(--unec_lg_dark);
}
#top .unec_lg .unec_lg_body li + li {
	margin-top: var(--unec_lg_space_li);
}
#top .unec_lg .unec_lg_body li::marker {
	color: var(--unec_lg_dark);
}

/* --- Inline ------------------------------------------------------------ */
#top .unec_lg .unec_lg_body strong,
#top .unec_lg .unec_lg_body b {
	font-weight: var(--unec_lg_weight_semibold);
}
#top .unec_lg .unec_lg_body em,
#top .unec_lg .unec_lg_body i {
	font-style: italic;
}
/* Policy pages carry long third-party URLs. overflow-wrap keeps one from
   pushing the column past its measure on a phone; word-break: break-all is
   deliberately NOT used, because it would break ordinary words too. */
/* Brand yellow, no underline — the same treatment as a link anywhere else on
   the site (`#top a { color: #ffc20e; text-decoration: none }`). Hover is the
   house 12% darken, so there is still a state change without a rule appearing
   under the text. */
#top .unec_lg .unec_lg_body a {
	color: var(--unec_lg_yellow);
	overflow-wrap: anywhere;
	text-decoration: none;
	transition: color var(--unec_lg_speed) var(--unec_lg_ease);
}
#top .unec_lg .unec_lg_body a:hover,
#top .unec_lg .unec_lg_body a:focus {
	color: var(--unec_lg_yellow_dark);
	text-decoration: none;
}
/* Keyboard focus still needs to be visible without relying on the colour. */
#top .unec_lg .unec_lg_body a:focus-visible {
	outline: 2px solid var(--unec_lg_dark);
	outline-offset: 2px;
}

/* --- Meta line and lede ------------------------------------------------ */
/* Effective / last-updated dates. Sits above the first section heading with
   its own hairline, so the heading rules above it stay untouched. */
#top .unec_lg .unec_lg_body .unec_lg_meta {
	margin-bottom: var(--unec_lg_meta_gap);
	padding-bottom: var(--unec_lg_space_h2_after);
	border-bottom: 1px solid rgba(35, 31, 32, var(--unec_lg_rule_opacity));
	font-weight: var(--unec_lg_weight_medium);
	letter-spacing: var(--unec_lg_track_h3);
	color: var(--unec_lg_dark);
}
#top .unec_lg .unec_lg_body .unec_lg_meta + * {
	margin-top: 0;
}
#top .unec_lg .unec_lg_body .unec_lg_lede {
	font-size: var(--unec_lg_h3_fs);
	line-height: var(--unec_lg_h3_lh);
	font-weight: var(--unec_lg_weight_medium);
	letter-spacing: var(--unec_lg_track_h3);
}
#top .unec_lg .unec_lg_body .unec_lg_muted {
	opacity: var(--unec_lg_muted);
}

/* --- Tables ------------------------------------------------------------ */
/* Not used by either policy today, but a cookie table is the usual next
   request and an unstyled Enfold table on this page would look nothing like
   the site. */
#top .unec_lg .unec_lg_body table {
	width: 100%;
	margin-top: var(--unec_lg_space_p);
	border: 0;
	border-collapse: collapse;
	font-size: var(--unec_lg_body_fs);
	line-height: var(--unec_lg_body_lh);
}
#top .unec_lg .unec_lg_body th,
#top .unec_lg .unec_lg_body td {
	padding: 14px 16px 14px 0;
	border: 0;
	border-bottom: 1px solid rgba(35, 31, 32, var(--unec_lg_rule_opacity));
	text-align: left;
	vertical-align: top;
	background: transparent;
}
#top .unec_lg .unec_lg_body th {
	font-weight: var(--unec_lg_weight_semibold);
}

/* =========================================================================
 * 4. Responsive ladder — custom properties only
 * ====================================================================== */
@media only screen and (max-width: 1400px) {
	#top .unec_lg {
		--unec_lg_h2_fs: 24px;
		--unec_lg_h2_lh: 30px;
		--unec_lg_pad_scale: 0.8;
	}
}
@media only screen and (max-width: 1180px) {
	#top .unec_lg {
		--unec_lg_pad_scale: 0.7;
		--unec_lg_space_h2: 56px;
	}
}
@media only screen and (max-width: 1024px) {
	#top .unec_lg {
		--unec_lg_gutter: 40px;
		--unec_lg_h2_fs: 22px;
		--unec_lg_h2_lh: 30px;
		--unec_lg_pad_scale: 0.6;
	}
}
@media only screen and (max-width: 768px) {
	#top .unec_lg {
		--unec_lg_gutter: 24px;
		--unec_lg_h2_fs: 20px;
		--unec_lg_h2_lh: 28px;
		--unec_lg_h3_fs: 18px;
		--unec_lg_h3_lh: 27px;
		--unec_lg_body_fs: 16px;
		--unec_lg_body_lh: 25px;
		--unec_lg_pad_scale: 0.45;
		--unec_lg_space_h2: 48px;
		--unec_lg_space_h3: 32px;
		--unec_lg_meta_gap: 36px;
		--unec_lg_measure: 100%;
	}
}
@media only screen and (max-width: 480px) {
	#top .unec_lg {
		--unec_lg_pad_scale: 0.35;
		--unec_lg_space_h2: 40px;
	}
}

/* =========================================================================
 * 5. Print — a policy page is a document people print and file
 * ====================================================================== */
@media print {
	#top .unec_lg {
		--unec_lg_pad_scale: 0;
		--unec_lg_measure: 100%;
		--unec_lg_body_fs: 11pt;
		--unec_lg_body_lh: 16pt;
		--unec_lg_h2_fs: 15pt;
		--unec_lg_h2_lh: 19pt;
		--unec_lg_h3_fs: 12pt;
		--unec_lg_h3_lh: 16pt;
	}
	#top .unec_lg .unec_lg_body h2,
	#top .unec_lg .unec_lg_body h3 {
		break-after: avoid;
		page-break-after: avoid;
	}
	#top .unec_lg .unec_lg_body li,
	#top .unec_lg .unec_lg_body p {
		break-inside: avoid;
		page-break-inside: avoid;
	}
	#top .unec_lg .unec_lg_body a {
		text-decoration-color: currentColor;
		text-decoration-thickness: 1px;
	}
}