/* ============================================================
   WMC House — block editor output
   Replaces wp-block-library, which is roughly 30KB gzipped and
   mostly styles blocks these sites never use. This is the dozen
   layout blocks that actually appear, written from tokens so
   editor content stays on the house grid.
   ============================================================ */

/* === Palette utilities === */
/* WP writes these classes when an editor picks a palette colour.
   Normally they come from global-styles, which we do not ship. */
.has-ground-color { color: var(--ground); }
.has-ground-alt-color { color: var(--ground-alt); }
.has-ink-color { color: var(--ink); }
.has-ink-soft-color { color: var(--ink-soft); }
.has-accent-color { color: var(--accent); }
.has-dark-color { color: var(--dark); }
.has-on-dark-color { color: var(--on-dark); }
.has-ground-background-color { background-color: var(--ground); }
.has-ground-alt-background-color { background-color: var(--ground-alt); }
.has-ink-background-color { background-color: var(--ink); }
.has-accent-background-color { background-color: var(--accent); }
.has-dark-background-color { background-color: var(--dark); }
.has-on-dark-background-color { background-color: var(--on-dark); }

/* === Size utilities === */
.has-eyebrow-font-size { font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; }
.has-small-font-size { font-size: var(--small-size); }
.has-body-font-size { font-size: var(--body-size); }
.has-h4-font-size { font-size: var(--h4-size); }
.has-h3-font-size { font-size: var(--h3-size); }
.has-h2-font-size { font-size: var(--h2-size); }
.has-h1-font-size { font-size: var(--h1-size); }

/* === Flow === */
/* One rhythm rule instead of per-block margins. Anything the editor
   stacks inherits the same vertical spacing as the rest of the site. */
.entry__body > * + * { margin-top: var(--s-3); }
.entry__body > h2 { margin-top: var(--s-5); }
.entry__body > h3 { margin-top: var(--s-4); }

/* === Alignment === */
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.alignwide { width: min(100%, 1100px); max-width: none; margin-inline: auto; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--s-3) var(--s-2) 0; }
.alignright { float: right; margin: 0 0 var(--s-2) var(--s-3); }

/* === Columns === */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 780px) { .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-direction: column; } }

/*
 * Above the stacking breakpoint the row must not wrap.
 *
 * With flex-wrap left on, a 55% + 45% pair plus the column gap adds up to more
 * than 100%, so the second column drops onto its own line and both render full
 * width — which looked like the columns had been ignored entirely. This is the
 * rule WordPress core ships and the theme was missing.
 */
@media (min-width: 781px) { .wp-block-columns { flex-wrap: nowrap; } }

/* min-width:0 lets a column shrink below its content's intrinsic width;
   without it a long unbroken string or a form input can push a column wider
   than its declared basis. */
.wp-block-column { min-width: 0; flex-grow: 1; }
.wp-block-column[style*="flex-basis"] { flex-grow: 0; }

/* === Group === */
.wp-block-group { box-sizing: border-box; }
.wp-block-group.has-background { padding: clamp(1.5rem, 4vw, 3rem); }

/* === Buttons === */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .9rem; }
.wp-block-button__link { display: inline-block; padding: 1rem 1.9rem; background: var(--accent); color: var(--accent-ink); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; text-decoration: none; transition: transform .4s var(--ease), filter .3s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--rule); }

/* === Media and text === */
.wp-block-media-text { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.wp-block-media-text.has-media-on-the-right { grid-template-areas: "content media"; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { grid-area: media; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { grid-area: content; }
@media (max-width: 780px) { .wp-block-media-text { grid-template-columns: 1fr; } }

/* === Cover === */
.wp-block-cover { position: relative; display: grid; place-items: center; min-height: 420px; padding: clamp(2rem, 6vw, 5rem); overflow: hidden; color: var(--on-dark); }
.wp-block-cover img.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wp-block-cover__background { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.wp-block-cover__inner-container { position: relative; z-index: 1; text-align: center; }

/* === Figures === */
.wp-block-image figcaption, .wp-block-embed figcaption { margin-top: .75rem; font-size: var(--small-size); color: var(--ink-soft); }
.wp-block-embed__wrapper { position: relative; }

/* === Gallery === */
.wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(.5rem, 1vw, 1rem); }
.wp-block-gallery figure { margin: 0; overflow: hidden; }
.wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* === Table === */
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table th, .wp-block-table td { padding: .7rem 0; text-align: left; border-bottom: 1px solid var(--rule); }
.wp-block-table th { font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--ink-soft); font-weight: var(--eyebrow-weight); }

/* === Quote === */
.wp-block-quote { font-family: var(--font-display); font-style: italic; font-size: var(--h3-size); line-height: 1.28; padding-left: var(--s-3); border-left: 1px solid var(--accent); }
.wp-block-quote cite { display: block; margin-top: var(--s-2); font-family: var(--font-text); font-style: normal; font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--ink-soft); }

/* === Separator === */
/* The house hairline, so an editor reaching for a divider gets the
   same 1px rule every designed section uses. */
.wp-block-separator { height: 1px; margin-block: var(--s-5); border: 0; background: var(--rule); }
.wp-block-separator.is-style-wide { width: 100%; }

/* === Spacer === */
.wp-block-spacer { flex-shrink: 0; }

/* === List === */
.wp-block-list { list-style: disc; padding-left: 1.2em; }
.wp-block-list li + li { margin-top: .4rem; }

/* ============================================================
   Page content: measure for prose, full width for layout
   ============================================================

   The body used to carry .measure itself, which capped EVERY child at 66
   characters — so a two-column block holding a form and its terms was squeezed
   into half a page with the other half empty, and a three-image gallery came
   out at thumbnail size.

   Reading width belongs to the things being read. Blocks whose job is layout
   set their own width. */
/*
 * The page grid is the SITE grid.
 *
 * Capping the body at the wide width made an inner page visibly narrower than
 * the nav above it and than every homepage section — two different page widths
 * on one site, which reads as a mistake before anyone can say why. So the body
 * runs to the wrap, exactly like the homepage, and only the prose keeps a
 * reading measure.
 */
/*
 * Page text fills the content column.
 *
 * A reading measure kept paragraphs at 825px against 1249px imagery, and on a
 * page that is mostly short paragraphs between pictures that read as text cut
 * off half way rather than as a considered column. Franck's call, made three
 * times; the tradeoff is ~136 characters a line at 1440px, which is past the
 * comfortable 45-90 range.
 *
 * To put it back: give `.entry__body > *` a max-width of var(--measure).
 * The token and its Customizer control are untouched, and `.measure` still
 * works anywhere it is applied by hand.
 */
.entry__body { max-width: none; }

/*
 * Layout blocks go WIDE, not edge to edge.
 *
 * Unconstrained, a gallery ran to 1249px beside a 680px paragraph, and the jump
 * was big enough to read as a mistake rather than as a deliberate step. The
 * theme already declares a wide width of 1100px in theme.json and uses it for
 * .alignwide; these blocks now honour the same number, so a page has one
 * rhythm: prose at the measure, layout at wide, and only alignfull breaks out.
 */
.entry__body > .wp-block-columns,
.entry__body > .wp-block-gallery,
.entry__body > .wp-block-image,
.entry__body > .wp-block-embed,
.entry__body > .wp-block-video,
.entry__body > .wp-block-table,
.entry__body > .wp-block-cover,
.entry__body > .wp-block-group,
.entry__body > .alignwide { max-width: var(--wide, 1100px); }
.entry__body > .wp-block-columns,
.entry__body > .wp-block-gallery,
.entry__body > .wp-block-image,
.entry__body > .wp-block-group { max-width: none; }

.entry__body > .alignfull { max-width: none; }

/* Inside a column the column IS the constraint. A second cap on top of it left
   the booking terms at 429px in a 535px column, which looked clipped. */

/* ============================================================
   Terms and conditions
   ============================================================

   Legal copy is reference material, not reading matter: nobody works through
   it top to bottom, they scan for the clause that applies to them. Setting it
   a step down from body size says that plainly and stops a deposit clause
   carrying the same visual weight as the invitation to book.

   Add "terms" as an Additional CSS class on the column or group that holds it. */
.terms { font-size: var(--small-size); line-height: 1.5; color: var(--ink-soft); }
.terms h2 { font-size: var(--h4-size); font-family: var(--h4-family); font-weight: var(--h4-weight); font-stretch: var(--h4-wdth); letter-spacing: 0; color: var(--ink); }
.terms h3 { font-size: var(--small-size); font-family: var(--font-text); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-top: var(--s-2); }
.terms ul, .terms ol { margin-block: .4rem; }
.terms li { margin-bottom: .3rem; }
.terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   FAQ (Details blocks)
   ============================================================

   The native Details block, styled as a quiet stack of hairlines rather than a
   set of boxes. It carries two jobs at once: the guest gets an answer without
   leaving the page, and the theme reads the same blocks back out to build the
   FAQPage structured data. One paste, both outcomes, nothing to keep in step.

   The marker is drawn rather than left to the browser, because the default
   triangle sits at a different size and colour in every engine and there is no
   way to style it consistently. */
.wp-block-details { border-top: 1px solid var(--rule); padding-block: var(--s-2); }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--rule); }

.wp-block-details > summary { display: flex; align-items: baseline; gap: .75rem; cursor: pointer; list-style: none; font-family: var(--font-text); font-size: var(--body-size); font-weight: 600; color: var(--ink); padding-right: 1.5rem; position: relative; transition: color .2s var(--ease); }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary:hover { color: var(--accent); }
.wp-block-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* A plus that becomes a minus. Two spans would need markup we do not control,
   so it is one pseudo-element with a rotating bar drawn behind it. */
.wp-block-details > summary::after { content: ""; position: absolute; right: 0; top: .35em; width: 11px; height: 11px; background: linear-gradient(var(--ink-soft), var(--ink-soft)) center/100% 1px no-repeat, linear-gradient(var(--ink-soft), var(--ink-soft)) center/1px 100% no-repeat; transition: transform .25s var(--ease); }
.wp-block-details[open] > summary::after { transform: rotate(90deg); background: linear-gradient(var(--ink-soft), var(--ink-soft)) center/100% 1px no-repeat; }

.wp-block-details > :not(summary) { color: var(--ink-soft); max-width: var(--measure); }
.wp-block-details > summary + * { margin-top: var(--s-2); }
.wp-block-details p:last-child { margin-bottom: 0; }

/* The FAQ under a menu is a footnote to it, not a second act. */
.entry__faq { margin-top: var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  .wp-block-details > summary,
  .wp-block-details > summary::after { transition: none; }
}