/* =========================================
   GUTENBERG
========================================= */

/* =========================================
   THAI — Gutenberg-only optical sizing
   The spec pairs each Latin size with a Thai size ; size-adjust is that
   ratio, so TH lands on its number exactly. Scoped to .entry-content —
   the site-wide faces in font.css are untouched.

     step        EN        TH        size-adjust
     H1          30 / 22   36 / 28   120%    / 127.273%
     H2          20 / 18   24 / 22   120%    / 122.222%
     H3          16 / 16   20 / 20   125%   (= DBHelvethaicaX-h6)
     Body        13        18        138.5% (= DBHelvethaicaX-body)
     Overline    11        16        145.5% (= DBHelvethaicaX-overline)
========================================= */

/* 120% — H1 and H2 on desktop */
@font-face {
  font-family: 'DBHelvethaicaX-gt-120';
  src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff2') format('woff2'),
    url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 120%;
}

@font-face {
  font-family: 'DBHelvethaicaX-gt-120';
  src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff2') format('woff2'),
    url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 120%;
}

/* 127.273% — H1 on mobile (22 → 28) */
@font-face {
  font-family: 'DBHelvethaicaX-gt-127';
  src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff2') format('woff2'),
    url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 127.273%;
}

@font-face {
  font-family: 'DBHelvethaicaX-gt-127';
  src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff2') format('woff2'),
    url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 127.273%;
}

/* 122.222% — H2 on mobile (18 → 22) */
@font-face {
  font-family: 'DBHelvethaicaX-gt-122';
  src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff2') format('woff2'),
    url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 122.222%;
}

@font-face {
  font-family: 'DBHelvethaicaX-gt-122';
  src: url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff2') format('woff2'),
    url('../fonts/DBHelvethaicaX/DBHelvethaicaX-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 122.222%;
}

/* =========================================
   SETTINGS
========================================= */
.entry-content {
  /* -- Colours -- */
  --entry-text: var(--color-black);
  --entry-heading: var(--color-black);
  --entry-heading-hover: var(--color-black);
  --entry-soft: var(--color-black);
  --entry-line: rgb(var(--color-black-rgb) / 0.1);
  --entry-separator: var(--color-light-blue);
  --entry-link: var(--color-teal);
  --entry-link-hover: var(--color-cyan);

  /* -- Page block -- */
  --entry-measure: 78.3rem;
  --entry-pad-top: 10rem;
  --entry-pad-bottom: 7.2rem;

  /* -- Type scale (Gutenberg only) --
     Latin size / line-height, straight from the typography spec ; mobile
     here, desktop in the 1024 block below. Each step also names the Thai
     face that puts TH on its own spec size (see the table above). */
  --entry-h1-size: 2.2rem;
  --entry-h1-line: 1.1;
  --entry-h1-font: 'CenturyGothic', 'DBHelvethaicaX-gt-127', sans-serif;

  --entry-h2-size: 1.8rem;
  --entry-h2-line: 1.1;
  --entry-h2-font: 'CenturyGothic', 'DBHelvethaicaX-gt-122', sans-serif;

  /* h4–h6 have no step of their own in the spec ; they reuse h3 */
  --entry-h3-size: 1.6rem;
  --entry-h3-line: 1.1;
  --entry-h3-font: var(--font-h6);

  --entry-body-size: 1.3rem;
  --entry-body-line: 1.4;

  --entry-overline-size: 1.1rem;
  --entry-overline-line: 1.5;

  /* -- Vertical rhythm -- */
  --entry-stack: 5.4rem;
  --entry-stack-sm: var(--spacing-md);
  --entry-stack-xs: var(--spacing-xs);
  --entry-heading-gap: 2.8rem;
  --entry-page-title-gap: 9rem;
  --entry-section-gap: var(--section-gap);
  --entry-media-gap: 2.4rem;

  --border-radius: 0;
}

@media (min-width: 1024px) {
  .entry-content {
    --entry-media-gap: 4.8rem;
    --entry-pad-bottom: 0;

    /* H1 30/120% · H2 20/110% · H3 16/100% — TH 36 / 24 / 20 */
    --entry-h1-size: 3rem;
    --entry-h1-line: 1.2;
    --entry-h1-font: 'CenturyGothic', 'DBHelvethaicaX-gt-120', sans-serif;

    --entry-h2-size: 2rem;
    --entry-h2-font: 'CenturyGothic', 'DBHelvethaicaX-gt-120', sans-serif;

    --entry-h3-line: 1;
  }
}

@media (min-width: 1450px) {
  .entry-content {
    --entry-measure: 80rem;
  }
}

/* =========================================
   WP presets, mapped onto this project's scale
========================================= */
.entry-content {
  --wp--preset--font-size--small: var(--entry-overline-size);
  --wp--preset--font-size--normal: var(--entry-body-size);
  --wp--preset--font-size--medium: var(--entry-h3-size);
  --wp--preset--font-size--large: var(--entry-h2-size);
  /* the spec's prose scale tops out at H1 ; the three largest presets all
     land there rather than jumping to the site-wide display sizes */
  --wp--preset--font-size--x-large: var(--entry-h1-size);
  --wp--preset--font-size--xx-large: var(--entry-h1-size);
  --wp--preset--font-size--huge: var(--entry-h1-size);

  --wp--style--unstable-gallery-gap: var(--spacing-md);
  --wp--style--root--padding-left: var(--container-gutter);
  --wp--style--root--padding-right: var(--container-gutter);
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: var(--container-max-width);
}

/* =========================================
   LAYOUT
========================================= */
/* one prose column ; the gutters sit outside the measure */
.entry-content {
  width: 100%;
  max-width: calc(var(--entry-measure) + var(--container-gutter) * 2);
  margin-inline: auto;
  padding: var(--entry-pad-top) var(--container-gutter) var(--entry-pad-bottom);

  font-family: var(--font-body);
  font-size: var(--entry-body-size);
  line-height: var(--entry-body-line);
  color: var(--entry-text);
}

.entry-content .is-layout-flex {
  display: flex;
  flex-wrap: wrap;
}

/* =========================================
   TYPE
========================================= */
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  /* 600, matching typography.css — not the 700 of --font-heading-weight */
  font-weight: 600;
  letter-spacing: var(--font-heading-letter-spacing);
  text-transform: var(--font-heading-text-transform);
  color: var(--entry-heading);
  text-wrap: pretty;
}

.entry-content h1 {
  font-family: var(--entry-h1-font);
  font-size: var(--entry-h1-size);
  line-height: var(--entry-h1-line);
}

.entry-content h2 {
  font-family: var(--entry-h2-font);
  font-size: var(--entry-h2-size);
  line-height: var(--entry-h2-line);
}

.entry-content :is(h3, h4, h5, h6) {
  font-family: var(--entry-h3-font);
  font-size: var(--entry-h3-size);
  line-height: var(--entry-h3-line);
}

/* a centred h1 opens the page, so it gets a page title's breathing room */
.entry-content>h1:first-child {
  text-align: center;
  text-wrap: balance;
  margin-bottom: var(--entry-page-title-gap);
}

.entry-content :is(p, li, address, th, td, dt, dd) {
  font-size: var(--entry-body-size);
  line-height: var(--entry-body-line);
}

.entry-content :is(strong, b) {
  font-weight: 600;
  color: var(--entry-heading);
}

.entry-content .text-sub {
  font-family: var(--font-overline);
  font-size: var(--entry-overline-size);
  line-height: var(--entry-overline-line);
}

.entry-content a:not(.wp-block-button__link) {
  color: var(--entry-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
  transition: color var(--duration) var(--easing),
    text-decoration-color var(--duration) var(--easing);
}

.entry-content a:not(.wp-block-button__link):hover {
  color: var(--entry-link-hover);
  text-decoration-color: currentColor;
}

/* -- WP font-size presets -- */
.entry-content .has-small-font-size {
  font-family: var(--font-overline);
  font-size: var(--wp--preset--font-size--small) !important;
}

.entry-content :is(.has-normal-font-size, .has-regular-font-size) {
  font-family: var(--font-body);
  font-size: var(--wp--preset--font-size--normal) !important;
}

.entry-content .has-medium-font-size {
  font-family: var(--entry-h3-font);
  font-size: var(--wp--preset--font-size--medium) !important;
}

.entry-content :is(.has-large-font-size, .has-larger-font-size) {
  font-family: var(--entry-h2-font);
  font-size: var(--wp--preset--font-size--large) !important;
}

.entry-content .has-x-large-font-size {
  font-family: var(--entry-h1-font);
  font-size: var(--wp--preset--font-size--x-large) !important;
}

.entry-content :is(.has-xx-large-font-size, .has-huge-font-size) {
  font-family: var(--entry-h1-font);
  font-size: var(--wp--preset--font-size--xx-large) !important;
}

/* =========================================
   LISTS & QUOTE
========================================= */
.entry-content :is(ul, ul.wp-block-list) {
  list-style-type: disc;
  padding-left: 1.2em;
}

.entry-content :is(ul, ul.wp-block-list)>li {
  padding-left: 0.2em;
}

.entry-content :is(ul, ul.wp-block-list)>li::marker {
  font-size: small;
  color: var(--entry-heading);
}

.entry-content :is(ol, ol.wp-block-list) {
  list-style-type: decimal;
  list-style-position: inside;
}

.entry-content :is(blockquote, .wp-block-quote) {
  padding-left: var(--spacing-md);
  border-left: 0.2rem solid var(--entry-heading-hover);
  color: var(--entry-heading);
}

/* =========================================
   MEDIA
========================================= */
.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-media-text__media) {
  overflow: hidden;
}

.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-media-text__media) :is(img, video) {
  height: auto;
  max-height: none;
  max-width: 100%;
  vertical-align: top;
  border-radius: var(--border-radius);
  object-fit: contain;
  object-position: center;
}

.entry-content :is(.wp-block-image, .wp-block-video):is(.size-full, .size-large) {
  width: 100%;
}

.entry-content :is(.wp-block-image, .wp-block-video).size-medium {
  width: clamp(30rem, 50%, 100%);
}

.entry-content :is(.wp-block-image, .wp-block-video):is(.size-full, .size-large, .size-medium) :is(img, video) {
  width: 100%;
}

.entry-content [class*='wp-block'] figcaption {
  font-style: normal;
  font-family: var(--font-overline);
  font-size: var(--entry-overline-size);
  line-height: var(--entry-overline-line);
  color: var(--entry-text);
}

/* -- Embeds, forced to 16:9 -- */
.entry-content .wp-block-embed__wrapper {
  position: relative;
}

.entry-content .wp-block-embed__wrapper::before {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.entry-content .wp-block-embed__wrapper>* {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  object-fit: contain;
}

.entry-content .wp-block-separator {
  border: 0;
  opacity: 1;
  width: 100%;
  height: var(--border-width);
  background-color: var(--entry-separator);
}

/* =========================================
   TABLE
========================================= */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
}

.entry-content table :is(thead, tfoot, tbody, th, td) {
  border: 0;
}

.entry-content table :is(thead, tfoot) {
  background-color: var(--entry-soft);
  color: var(--entry-heading);
}

.entry-content table tr> :is(th, td) {
  border-top: var(--border-width) solid var(--entry-line);
  border-bottom: var(--border-width) solid var(--entry-line);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
}

.entry-content table tr>th {
  font-weight: 600;
}

/* =========================================
   COLUMNS, GALLERY, MEDIA & TEXT
========================================= */
.entry-content .wp-block-columns {
  grid-gap: var(--wp--style--unstable-gallery-gap);
}

.entry-content .wp-block-gallery {
  --wp--style--unstable-gallery-gap: var(--spacing-sm);
  gap: 0 !important;
  grid-gap: var(--wp--style--unstable-gallery-gap) !important;
}

.entry-content .wp-block-gallery+.wp-block-gallery {
  margin-top: var(--wp--style--unstable-gallery-gap) !important;
}

.entry-content .wp-block-gallery.is-slider {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.entry-content .wp-block-gallery.is-slider :is(.wp-block-image, .wp-block-video) {
  width: 100% !important;
}

.entry-content .wp-block-media-text {
  grid-row-gap: var(--entry-stack-sm);
}

.entry-content .wp-block-media-text__content {
  padding: 0;
}

/* =========================================
   BUTTONS — the .btn skin from global.css
========================================= */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  grid-gap: var(--spacing-sm) var(--spacing-md);
}

.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-width: 14rem;
  padding: var(--button-padding-y, 1.3rem) var(--button-padding-x, 3.2rem);

  border: var(--border-width) solid var(--entry-heading);
  border-radius: var(--border-radius);
  background-color: var(--entry-heading);
  color: var(--color-white);

  font-family: var(--font-button);
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  font-weight: var(--font-button-weight);
  text-decoration: none;
  white-space: nowrap;

  transition: background-color var(--duration) var(--easing),
    border-color var(--duration) var(--easing);
}

.entry-content .wp-block-button__link:hover {
  background-color: var(--entry-heading-hover);
  border-color: var(--entry-heading-hover);
}

.entry-content .is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--entry-heading);
}

.entry-content .is-style-outline .wp-block-button__link:hover {
  background-color: var(--entry-soft);
  border-color: var(--entry-soft);
}

/* =========================================
   VERTICAL RHYTHM
   One rule sets the default gap ; the rest are the exceptions to it.
========================================= */
.entry-content :is([class*='wp-block-'], figcaption, ul, ol, p, h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

/* default : one gap between every block, at any nesting level */
.entry-content>*+*,
.entry-content :is(.wp-block-group, .wp-block-column, .wp-block-quote, .wp-block-media-text__content)>*+* {
  margin-top: var(--entry-stack);
}

/* a group closes a section */
.entry-content>.wp-block-group+* {
  margin-top: var(--entry-section-gap);
}

/* a heading sits close to the copy it introduces */
.entry-content :is(h1, h2, h3, h4, h5, h6):not(:empty)+ :is(p, ul, ol, address):not(:empty) {
  margin-top: var(--entry-heading-gap);
}

/* running prose is flush — the author spaces it with empty paragraphs */
.entry-content :is(p, ul, ol):not(:empty)+ :is(p, ul, ol):not(:empty) {
  margin-top: 0;
}

.entry-content p:empty {
  margin-top: var(--entry-stack-sm) !important;
}

/* media breathes on both sides — the gap below comes from the next block */
.entry-content *+ :is(.wp-block-image, .wp-block-video, .wp-block-gallery, .wp-block-embed, .wp-block-separator),
.entry-content :is(.wp-block-image, .wp-block-video, .wp-block-gallery, .wp-block-embed, .wp-block-separator)+* {
  margin-top: var(--entry-media-gap);
}

/* tight pairs */
.entry-content li+li,
.entry-content li> :is(ul, ol),
.entry-content figcaption {
  margin-top: var(--entry-stack-xs);
}

/* the media & text block lays itself out on a grid */
.entry-content .wp-block-media-text>* {
  margin-top: 0;
}

/* a spacer already is the gap */
.entry-content .wp-block-spacer {
  height: var(--entry-section-gap) !important;
}

.entry-content .wp-block-spacer,
.entry-content .wp-block-spacer+* {
  margin-top: 0 !important;
}

/* =========================================
   ALIGNMENT
========================================= */
.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.entry-content :where(.is-layout-constrained)>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

.entry-content .alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.entry-content .alignwide {
  width: var(--container-max-width) !important;
  max-width: 100vw !important;
  margin-left: calc(50% - (min(var(--container-max-width), 100vw) / 2)) !important;
  margin-right: calc(50% - (min(var(--container-max-width), 100vw) / 2)) !important;
}

.entry-content .is-layout-constrained:not(.has-global-padding)> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
}