/* Cloud9 typography for public WordPress pages and embedded booking forms. */
@font-face {
  font-family: "Nonney Thai";
  src: url("nonney-thai-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nonney Thai";
  src: url("nonney-thai-bold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Nonney Chinese";
  src: url("nonney-chinese-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --c9-font-sans: "Noto Sans Thai", "Nonney Thai", Tahoma, sans-serif;
  --c9-font-zh: "Nonney Chinese", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --c9-font-serif: Georgia, "Times New Roman", serif;
  --c9-font-ui: var(--c9-font-sans);
  --c9-size-display: clamp(2rem, 4vw, 3rem);
  --c9-size-compact-display: clamp(1.3125rem, 6.7vw, 1.875rem);
  --c9-size-title: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --c9-size-subtitle: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  --c9-size-body: 1rem;
  --c9-size-control: .9375rem;
  --c9-size-label: .875rem;
  --c9-size-caption: .8125rem;
  --c9-size-brand-note: .6875rem;
  --c9-leading-title: 1.35;
  --c9-leading-body: 1.7;
  --c9-leading-control: 1.5;
  --c9-weight-strong: 600;
}

[lang] {
  --c9-font-ui: var(--c9-font-sans);
}

[lang]:lang(zh) {
  --c9-font-ui: var(--c9-font-zh);
}

.wp-site-blocks {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-body);
  line-height: var(--c9-leading-body);
}

.wp-site-blocks :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--c9-font-ui);
  font-weight: var(--c9-weight-strong);
  line-height: var(--c9-leading-title);
  letter-spacing: normal;
}

.wp-site-blocks :is(h1, h2):lang(en) {
  font-family: var(--c9-font-serif);
  font-weight: 400;
}

.wp-site-blocks h1 { font-size: var(--c9-size-display); }
.wp-site-blocks h2 { font-size: var(--c9-size-title); }
.wp-site-blocks h3 { font-size: var(--c9-size-subtitle); }
.wp-site-blocks :is(h4, h5, h6) { font-size: var(--c9-size-body); }

/* The package and appointment template sets an inline size on its page title. */
.wp-site-blocks main h1.wp-block-post-title {
  font-size: var(--c9-size-display) !important;
}

.wp-site-blocks .wp-block-site-title {
  font-family: var(--c9-font-ui);
  font-size: clamp(1rem, .925rem + .4vw, 1.125rem);
  font-weight: var(--c9-weight-strong);
  line-height: var(--c9-leading-title);
}

.wp-site-blocks :is(.wp-block-navigation-item__content, .woocommerce-MyAccount-navigation a) {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-control);
  line-height: var(--c9-leading-control);
}

.wp-site-blocks :is(.wp-block-woocommerce-breadcrumbs, .woocommerce-breadcrumb) {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-caption);
  line-height: var(--c9-leading-control);
}

.wp-site-blocks :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea),
.wp-site-blocks :is(.wc-block-components-text-input input, .wc-blocks-components-select__select, .wc-block-components-textarea) {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-body);
}

.wp-site-blocks :is(.wp-element-button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .wc-block-components-button),
.wp-site-blocks :is(input[type="button"], input[type="reset"], input[type="submit"]),
.wc-block-mini-cart__drawer .wc-block-components-button {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-control);
  font-weight: var(--c9-weight-strong);
  line-height: var(--c9-leading-control);
}

.wp-site-blocks :is(.woocommerce-form label, .woocommerce form .form-row label, .wc-block-components-checkbox__label) {
  font-size: var(--c9-size-label);
  line-height: var(--c9-leading-control);
}

/* WooCommerce keeps the payment provider's own controls inside its frame. */
.wp-site-blocks :is(.wc-block-cart, .wc-block-checkout),
.wc-block-mini-cart__drawer {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-body);
  line-height: var(--c9-leading-body);
}

.wp-site-blocks :is(.wc-block-components-checkout-step__title, .wc-block-cart__empty-cart__title),
.wc-block-mini-cart__drawer .wc-block-mini-cart__title {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-subtitle);
  font-weight: var(--c9-weight-strong);
  line-height: var(--c9-leading-title);
}

.wp-site-blocks :is(.wc-block-components-product-name, .wc-block-components-totals-item__label) {
  font-family: var(--c9-font-ui);
  font-weight: var(--c9-weight-strong);
}

.single-product .wp-site-blocks .wc-block-components-product-price.has-large-font-size {
  font-weight: var(--c9-weight-strong);
  line-height: var(--c9-leading-title);
}

/* The shop and account snippets render their own component typography. */
.ncs-shop .wp-site-blocks .ncs-intro h1 {
  font-size: var(--c9-size-display);
  line-height: var(--c9-leading-title);
}

.ncs-shop .wp-site-blocks :is(.ncs-intro p, .ncs-medical-notice p:not(.ncs-medical-booking-note)),
.nca-account .wp-site-blocks .nca-welcome p {
  font-size: var(--c9-size-body);
  line-height: var(--c9-leading-body);
}

.ncs-shop .wp-site-blocks :is(.wp-block-woocommerce-product-collection > .wp-block-heading, .ncs-guide h2),
.nca-account .wp-site-blocks .nca-welcome h1 {
  font-size: var(--c9-size-title);
  line-height: var(--c9-leading-title);
}

.ncs-shop .wp-site-blocks .ncs-medical-notice h3 {
  font-size: var(--c9-size-subtitle);
  line-height: var(--c9-leading-title);
}

.ncs-shop .wp-site-blocks :is(.ncs-primary, .ncs-outline, .ncs-reset-filter) {
  font-family: var(--c9-font-ui);
  font-size: var(--c9-size-control);
  line-height: var(--c9-leading-control);
}

/* Match the shop card snippet's existing important declarations. */
.ncs-shop .wp-site-blocks .wc-block-product > .wp-block-post-title {
  font-size: var(--c9-size-subtitle) !important;
  line-height: var(--c9-leading-title) !important;
}

.ncs-shop .wp-site-blocks .wp-block-woocommerce-product-button .wp-block-button__link {
  font-family: var(--c9-font-ui) !important;
  font-size: var(--c9-size-control) !important;
}

/* Amelia sets these typography variables on its booking container inline. */
.amelia-v2-booking #amelia-container,
.amelia-v2-booking.am-dialog-popup {
  --am-font-family: var(--c9-font-ui) !important;
  --am-fs-inp: var(--c9-size-body) !important;
  --am-fs-label: var(--c9-size-label) !important;
}

.amelia-v2-booking :is(#amelia-container, .el-dialog) :is(.el-input__inner, .el-textarea__inner) {
  --am-fs-input: var(--c9-size-body);
  font-size: var(--c9-size-body);
}

.amelia-v2-booking :is(#amelia-container, .el-dialog) .am-button.am-button--default {
  font-size: var(--c9-size-control);
  font-weight: var(--c9-weight-strong);
}

.amelia-v2-booking #amelia-container .am-asi__header {
  font-size: var(--c9-size-title);
  font-weight: var(--c9-weight-strong);
  line-height: var(--c9-leading-title);
}