/*
 * Sunyung design tokens (from the approved proposal design).
 * Blocksy reads its colours and fonts from these CSS variables; :root:root wins over the
 * values Blocksy prints from the Customizer, so the design lives in code, not in the database.
 */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-600.woff2") format("woff2"); }

:root:root {
	/* Brand palette */
	--sy-navy: #283951;
	--sy-ink: #263653;
	--sy-muted: #59677a;
	--sy-mist: #eef4f5;
	--sy-mist-2: #f7fafb;
	--sy-line: #d9e0e6;
	--sy-input: #c5cfda;
	--sy-danger: #a33125;
	--sy-radius: 8px;
	--sy-radius-lg: 16px;
	--sy-font: "IBM Plex Sans", Arial, Helvetica, sans-serif;

	/* Blocksy palette mapping */
	--theme-palette-color-1: var(--sy-navy);
	--theme-palette-color-2: #3b4f6c;
	--theme-palette-color-3: var(--sy-ink);
	--theme-palette-color-4: var(--sy-ink);
	--theme-palette-color-5: var(--sy-line);
	--theme-palette-color-6: var(--sy-mist);
	--theme-palette-color-7: var(--sy-mist-2);
	--theme-palette-color-8: #ffffff;
	--theme-text-color: var(--sy-ink);
	--theme-headings-color: var(--sy-ink);
	--theme-link-initial-color: var(--sy-navy);
	--theme-link-hover-color: var(--sy-muted);
	--theme-border-color: var(--sy-line);
	--theme-button-background-initial-color: var(--sy-navy);
	--theme-button-background-hover-color: #1b2a3e;
	--theme-button-border-radius: var(--sy-radius);
	--theme-form-field-border-radius: var(--sy-radius);
	--theme-font-family: var(--sy-font);
}

body,
button,
input,
select,
textarea,
.editor-styles-wrapper {
	font-family: var(--sy-font);
}

/* Headings: light, tight tracking (overrides the wide letter-spacing set in the old Customizer). */
h1, h2, h3, h4, h5, h6,
.editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3,
.editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 {
	font-family: var(--sy-font);
	color: var(--sy-ink);
	letter-spacing: -0.02em;
	text-transform: none;
}
h1, .editor-styles-wrapper h1 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
h2, .editor-styles-wrapper h2 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }

/* Eyebrow label used above section titles. */
.is-style-sy-eyebrow,
.editor-styles-wrapper .is-style-sy-eyebrow {
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.15em !important;
	text-transform: uppercase;
	color: var(--sy-muted);
}

/* Buttons: square, quiet. */
.wp-element-button,
.wp-block-button__link,
.button,
button.button {
	border-radius: var(--sy-radius) !important;
	font-weight: 500;
}
.wp-block-button.is-style-outline > .wp-block-button__link { border-width: 1px; }
.wp-block-button.is-style-sy-link > .wp-block-button__link {
	background: transparent !important;
	color: inherit !important;
	padding-left: 0;
	padding-right: 0;
	border-bottom: 1px solid currentColor;
}

/* Full-width cover (hero): keep text aligned with the page content, like the design. */
.wp-block-cover.alignfull > .wp-block-cover__inner-container {
	width: 100%;
	max-width: calc(var(--theme-normal-container-max-width, 1290px) + 2 * var(--theme-content-spacing-x, 5vw));
	margin-inline: auto;
	padding-inline: clamp(16px, 6vw, 85px);
}
.wp-block-cover.alignfull h1 { max-width: 14ch; }

/* Editor: Blocksy's editor styles set heading fonts with higher specificity; keep Plex everywhere
   so what staff edit matches the live site. */
.editor-styles-wrapper :is(h1, h2, h3, h4, h5, h6, p, li, .wp-block-heading) {
	--theme-font-family: var(--sy-font);
	font-family: var(--sy-font) !important;
}