/* The Cozy Theme compat
   Makes new pages built in the block editor, and markup printed by other plugins (forms, shops, notices, cookie
   bars, plain shortcode output), look like the rest of the site. Loaded after cozytalk-blocks.css and before
   cozytalk-evening.css.

   Ground rules for this file:
   - Keep specificity low. Almost everything is inside :where(), so a plugin's own stylesheet, colours or spacing set
     on a block, and our own components (.ct-*, .ctc-*, .ctr-* ...) still win.
   - Never target our own components: anything with a class starting with "ct" is skipped, and so are the containers
     cozytalk-blocks.css already handles.
   - Colours only through the theme variables (--ct-*), so the evening palette (html.ct-night) and the style
     variations just work. The few spots that need more have an html.ct-night rule at the end. */

/* Reading rhythm on plain pages (page.html) */
/* Headings typed straight into a page (page.html or page-landing.html) get space above and stay close to their text.
   Direct children of the content only; the site's own patterns wrap everything in sections. */
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h2, h3, h4, h5, h6):not(:first-child) { margin-block-start: clamp(40px, 5vw, 64px); }
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h3, h4, h5, h6):not(:first-child) { margin-block-start: clamp(32px, 4vw, 44px); }
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h2, h3, h4, h5, h6) + * { margin-block-start: 14px; }
:root :where(.ct-main:not(.ct-article, .ct-talk, .ct-archive, .ct-404) > .wp-block-post-content) > :where(h1):not(:first-child) { margin-block-start: clamp(48px, 6vw, 80px); }
/* Lists typed straight into the content (not the ones in our sections): nested lists get a bit of air, and long words
   or links never push the page sideways */
:where(.wp-block-post-content) > :where(ul, ol) :where(li > ul, li > ol) { margin-block: 6px; }
:where(.wp-block-post-content) > :where(ul, ol) :where(li + li) { margin-top: 4px; }
:where(.wp-block-post-content) :where(h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, figcaption, cite) { overflow-wrap: break-word; }

/* Wide and full alignment on pages */
/* In page.html the post content sits inside the constrained <main>, so WordPress caps all of it at 760px and "wide"
   and "full" blocks look like normal ones. Here the content spans <main> again (its children are still held at 760px
   by its own constrained layout), "wide" reaches the wide size and "full" the screen edges.
   Pages only (page.html and page-landing.html); articles and talks keep their reading layout. */
:root .ct-page > .wp-block-post-content { max-width: none; }
:root .ct-main:not(.ct-article):not(.ct-talk):not(.ct-archive):not(.ct-404) > .wp-block-post-content > .alignfull {
  max-width: none; width: auto; margin-left: calc(var(--wp--style--root--padding-left, var(--ct-gutter)) * -1); margin-right: calc(var(--wp--style--root--padding-right, var(--ct-gutter)) * -1); }
/* page-landing.html lets its sections run 1248px wide. Plain text typed straight into such a page keeps the reading
   width instead of 1150px lines (our patterns wrap everything in sections, so they're not affected). */
:root .ct-main:not(.ct-page):not(.ct-article):not(.ct-talk):not(.ct-archive):not(.ct-404) > .wp-block-post-content > :where(p, ul, ol, dl, h1, h2, h3, h4, h5, h6, pre, form, .wp-block-quote, .wp-block-table, .wp-block-details, .wp-block-file, .wp-block-audio, .wp-block-video, .wp-block-embed, .wp-block-search, .wp-block-buttons, .wp-block-footnotes, .wp-block-latest-posts, .wp-block-categories-list, .wp-block-archives-list, .wp-block-pullquote, .wp-block-image, .wp-block-gallery, .wp-block-media-text, .wp-block-query, .wp-block-calendar, .wp-block-tag-cloud, .wp-block-social-links):not(.alignwide):not(.alignfull) {
  max-width: var(--wp--style--global--content-size, 760px); }
:root .ct-main:not(.ct-page):not(.ct-article):not(.ct-talk):not(.ct-archive):not(.ct-404) > .wp-block-post-content { --wp--style--global--content-size: 760px; }

/* Media with a fixed width (iframes, video, tables) never overflows */
/* WordPress only caps the children of a constrained layout at the content width, so <iframe width="800"> is 800px
   wide on a phone. Cap it at the column too. */
:root :where(.is-layout-constrained) > :is(iframe, video, embed, object, img, table) { max-width: min(100%, var(--wp--style--global--content-size, 760px)); }
:where(.wp-block-post-content, .entry-content, .ct-prose) :where(iframe, embed, object, video, audio) { max-width: 100%; }
/* Classic-editor content (old posts, imported sites): captions carry an inline width ([caption width="1200"]),
   full-size images their own width, and plain tables have no wrapper. None of that may push a phone page sideways. */
:where(.wp-block-post-content, .entry-content, .ct-prose) img { max-width: 100%; height: auto; }
:where(.wp-block-post-content, .entry-content, .ct-prose) :is(.wp-caption, .wp-caption-dt, .wp-caption-text, .gallery-item) { max-width: 100%; box-sizing: border-box; }
:where(.wp-block-post-content, .entry-content, .ct-prose) :where(.wp-caption) img { display: block; }
:where(.wp-block-post-content, .entry-content, .ct-prose) :where(table):not(.wp-block-table table) { display: block; max-width: 100%; overflow-x: auto; }
/* <audio> keeps the browser's ~300px minimum on narrow phones unless told otherwise */
:where(.wp-block-post-content, .entry-content, .ct-prose, .wp-block-audio) audio { min-width: 0; max-width: 100%; }
.wp-block-audio audio { width: 100%; min-width: 0; }   /* WordPress gives it min-width: 300px, which is wider than a 320px phone's column */
:where(.wp-block-post-content) :where(iframe:not([class]), embed, object) { border: 0; border-radius: 22px; }

/* Embeds: responsive wrappers keep their ratio. A link WordPress couldn't turn into an embed shows as a small card
   instead of an empty 16:9 box with the URL at the bottom. */
:where(.wp-block-embed) iframe { display: block; max-width: 100%; }
:where(.wp-block-embed__wrapper):not(:has(iframe, video, object, embed, blockquote, img, div, a)) {
  padding: 18px 22px; border-radius: 22px; background: var(--ct-cream); border: 1px dashed color-mix(in srgb, var(--ct-line) 55%, var(--ct-muted));
  color: var(--ct-muted); font-size: 15px; overflow-wrap: anywhere; box-shadow: none !important; }
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:not(:has(iframe, video, object, embed, blockquote, img, div, a))::before { display: none; }
/* Classic oEmbeds (a <blockquote> a script turns into a card) and Instagram/Twitter fallbacks */
:where(.wp-block-embed) blockquote:where(.twitter-tweet, .instagram-media, .tiktok-embed, .wp-embedded-content) { max-width: 100% !important; margin-inline: auto; }

/* Tables everywhere: never wider than a phone */
/* Table blocks already scroll sideways (cozytalk-blocks.css) with headings on one line.
   Other tables (shortcodes, plugins) keep their layout and let long words break instead. */
@media (max-width: 600px) {
  :where(.wp-block-table) th { white-space: nowrap; }
  :where(.wp-block-post-content, .entry-content) table:where(:not(.wp-block-table table):not([class^="ct"]):not([class*=" ct"])) :where(td, th) { overflow-wrap: anywhere; }
  :where(.wp-block-post-content, .entry-content) table :where(input, select, textarea) { max-width: 100%; }
}
:where(.wp-block-post-content, .entry-content) :where(table caption) { caption-side: top; padding: 0 12px 10px; font-size: 14px; color: var(--ct-muted); text-align: center; }

/* Core blocks the theme otherwise leaves at WordPress defaults */
/* A group or column with a background colour gets some padding, like a card (unless padding was set in the editor) */
:where(.wp-block-post-content) .wp-block-group.has-background:where(:not([style*="padding"]):not([class^="ct"]):not([class*=" ct"]):not([class*="is-style-"])),
:where(.wp-block-post-content) .wp-block-column.has-background:where(:not([style*="padding"]):not([class^="ct"]):not([class*=" ct"])) { padding: clamp(22px, 3.4vw, 40px); }
:where(.wp-block-post-content) p.has-background:where(:not([style*="padding"])) { padding: 18px 24px; border-radius: 18px; }
/* Links on a cover follow the cover's text colour, so no ember links on an ember cover */
.wp-block-cover__inner-container a:where(:not(.wp-element-button):not(.wp-block-button__link)) { color: inherit; }
/* Media & text: the image fills its half and keeps the card corners on phones */
:where(.wp-block-media-text) .wp-block-media-text__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.wp-block-media-text.alignfull) { border-inline: 0; }
/* Audio with a caption: a soft card instead of a stretched pill */
:where(.wp-block-audio):has(figcaption) { border-radius: 26px; padding: 14px 14px 4px; }
:where(.wp-block-audio) figcaption { margin-bottom: 8px; }
/* Buttons block: long labels wrap inside the pill on phones instead of overflowing */
:where(.wp-block-button__link) { overflow-wrap: break-word; }
/* Separators: the "wide" style keeps the warm line colour; dots get their size back in narrow columns */
:where(.wp-block-separator.is-style-wide) { width: 100%; max-width: none; }
/* Wide and full images and galleries: full ones lose the rounded corners at the screen edge */
.wp-block-image.alignfull img, .wp-block-gallery.alignfull .wp-block-image img, .wp-block-cover.alignfull, .wp-block-media-text.alignfull { border-radius: 0; }
:where(.wp-block-image) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.wp-block-image.aligncenter, .wp-block-image .aligncenter) { text-align: center; }
/* Latest Posts as a grid: a real grid with even cards, and the column count from the editor on wide screens */
:where(.wp-block-latest-posts).is-grid.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 20px; padding: 0; }
:where(.wp-block-latest-posts).is-grid.is-grid > li { width: auto; margin: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 782px) {
  :where(.wp-block-latest-posts).is-grid.is-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.wp-block-latest-posts).is-grid.is-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(.wp-block-latest-posts).is-grid.is-grid.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(.wp-block-latest-posts).is-grid.is-grid:is(.columns-5, .columns-6) { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
}
:where(.wp-block-latest-posts__featured-image) { margin: 0 0 6px; }
:where(.wp-block-latest-posts__featured-image) img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
:where(.wp-block-latest-posts__post-excerpt) { margin: 6px 0 0; font-size: 15px; color: color-mix(in srgb, var(--ct-ink) 72%, var(--ct-muted)); }
/* A Query Loop added to a page by hand (our own grids have a ct- class and are left alone): titles at card size,
   ink colour, a thin line between posts */
:where(.wp-block-post-content) .wp-block-query:where(:not([class^="ct"]):not([class*=" ct"])) .wp-block-post-title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 6px; }
:where(.wp-block-post-content) .wp-block-query:where(:not([class^="ct"]):not([class*=" ct"])) .wp-block-post-title a { color: var(--ct-ink); text-decoration: none; background-image: none; }
:where(.wp-block-post-content) .wp-block-query:where(:not([class^="ct"]):not([class*=" ct"])) .wp-block-post-title a:hover { color: var(--ct-ember-text); }
:where(.wp-block-post-content .wp-block-query) .wp-block-post-template:where(:not(.is-layout-grid)) > li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ct-line); }
/* (our own talk and article grids draw their own cards, so no second card around them) */
:where(.wp-block-post-content .wp-block-query:not(.ct-talk-grid):not(.ct-post-grid)) .wp-block-post-template.is-layout-grid > li { padding: 22px; border-radius: 24px; background: var(--ct-paper, #fff); border: 1px solid var(--ct-line); }
:where(.wp-block-post-content .wp-block-query) :where(.wp-block-post-excerpt__excerpt) { margin: 6px 0 0; }
/* Archives and categories as dropdowns, the calendar on phones */
:where(.wp-block-archives-dropdown, .wp-block-categories-dropdown) label { display: block; margin-bottom: 8px; font-weight: 600; }
:where(.wp-block-calendar) { overflow-x: auto; }
:where(.wp-block-calendar) caption { padding-bottom: 8px; font-weight: 600; color: var(--ct-ink); }
:where(.wp-block-calendar) .wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 10px; font-size: 15px; }
:where(.wp-block-calendar) #today, :where(.wp-block-calendar) td.is-today { background: color-mix(in srgb, var(--ct-amber) 30%, transparent); border-radius: 10px; font-weight: 600; }
/* Navigation block inside a page: pills like the site menu */
:where(.wp-block-post-content) :where(.wp-block-navigation) .wp-block-navigation-item__content { color: var(--ct-ink); }
:where(.wp-block-post-content) :where(.wp-block-navigation__container) { gap: 6px 22px; }
/* Footnotes: the numbers in the text are a bit easier to tap */
:where(sup.fn) a { padding: 0 2px; font-weight: 600; }
:where(.wp-block-footnotes) li { margin-bottom: 6px; }
/* Classic galleries and captions from older content */
:where(.wp-caption) .wp-caption-text { margin-top: 8px; }
:where(.gallery-caption) { font-size: 13.5px; color: var(--ct-muted); }

/* Forms from plugins (Contact Form 7, WPForms, Gravity Forms, Formidable, Ninja Forms, Mailchimp, shops...) */
/* Fields fill the form column, labels go above, choices line up, focus glows amber like the site's focus ring */
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form, .woocommerce form)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="range"]):not([type="color"]):not(.qty), select, textarea) {
  width: 100%; max-width: 100%; min-height: 48px; box-sizing: border-box; }
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form, .woocommerce form)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  border-color: color-mix(in srgb, var(--ct-amber) 70%, var(--ct-ember)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-amber) 40%, transparent); outline: none; }
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form) :is(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 3px solid var(--ct-amber); outline-offset: 2px; }
:where(.wpcf7-form) > p, :where(.wpcf7-form) > div:not(.wpcf7-response-output):not([hidden]) { margin: 0 0 20px; }
:where(.wpcf7-form) > p > label, :where(.wpforms-field-label, .gfield_label, .frm_primary_label, .nf-field-label label, .forminator-label) {
  display: block; margin-bottom: 8px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ct-ink); }
:where(.wpcf7-form) > p > label > .wpcf7-form-control-wrap { display: block; margin-top: 8px; font-weight: 400; }
:where(.wpforms-field-label-inline, .gchoice label, .wpcf7-list-item-label) { font-weight: 400; font-size: 16px; }
:where(.wpforms-field, .gfield, .frm_form_field, .nf-field-container) { margin: 0 0 22px; padding: 0; list-style: none; border: 0; }
:where(.gform_fields) { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
:where(.gfield) > legend { padding: 0; }
:where(.wpforms-required-label, .gfield_required, .frm_required) { color: var(--ct-ember-text); font-weight: 600; }
:where(.wpforms-field-description, .gfield_description:not(.validation_message), .frm_description, .nf-field-description) { margin-top: 6px; font-size: 14px; color: var(--ct-muted); }
/* Checkbox and radio lists */
:where(.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance) { display: flex; flex-wrap: wrap; gap: 8px 22px; }
:where(.wpcf7-list-item) { margin: 0; }
:where(.wpcf7-list-item, .gchoice, .frm_checkbox, .frm_radio, .wpforms-field li) > label,
:where(.wpforms-field ul, .gfield_checkbox, .gfield_radio) > :where(li, .gchoice),
:where(.wp-block-post-content, .entry-content) label:where(:has(> input[type="checkbox"], > input[type="radio"])) {
  display: inline-flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer; }
:where(.wpforms-field ul, .gfield_checkbox, .gfield_radio, .frm_opt_container) { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
:where(.wpforms-field ul) > li { margin: 0; }
:where(.wpforms-field ul) > li::marker { content: none; }
/* File fields */
:where(.wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .wp-block-post-content) input[type="file"] { max-width: 100%; font-size: 15px; color: var(--ct-muted); }

/* Validation: the message under the field and the field itself, in the site's warm red */
:is(.wpcf7-not-valid-tip, em.wpforms-error, label.wpforms-error, .gfield_validation_message, .gfield_description.validation_message, .frm_error, .nf-error-msg, .forminator-error-message, .woocommerce-invalid .description) {
  display: block; margin-top: 6px; font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.45; color: var(--ct-ember-text); }
:is(input, select, textarea):is(.wpcf7-not-valid, .wpforms-error, .frm_invalid, [aria-invalid="true"]),
:where(.gfield_error, .frm_blank_field, .nf-error, .woocommerce-invalid) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--ct-ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-ember) 14%, transparent); }

/* Submit and plugin buttons get the sage pill. Plain <button>s with their own class (icons, carousels, close
   buttons) are left alone; only submits and the classes plugins use for real buttons are styled. */
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form)
  :is(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], form button:not([type]), .button, .wpforms-submit, .gform_button, .frm_button_submit, .nf-element[type="button"], .add_to_cart_button, .checkout-button):where(:not([class^="ct"]):not([class*=" ct"]):not(.wp-block-search__button):not(.wp-element-button):not(.wp-block-button__link):not(.ff-btn):not(:is(.ct-sub, .ct-search, .ct-letter, .ct-news, .ctc, .fluentform, .wp-block-search, .ct-filters, .ctr-bar, .ctr-full, .ct-comments) *)) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; min-height: 48px; width: auto; max-width: 100%; padding: 0 26px;
  border: 0; border-radius: 999px; background: var(--ct-sage); color: #fff; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; text-align: center;
  text-decoration: none; background-image: none; text-shadow: none; box-shadow: none; cursor: pointer; transition: background-color .2s, box-shadow .25s, transform .15s; }
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms, .nf-form-cont, .mc4wp-form, .forminator-custom-form)
  :is(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], form button:not([type]), .button, .wpforms-submit, .gform_button, .frm_button_submit, .add_to_cart_button, .checkout-button):where(:not([class^="ct"]):not([class*=" ct"]):not(.wp-block-search__button):not(.wp-element-button):not(.wp-block-button__link):not(.ff-btn):not(:is(.ct-sub, .ct-search, .ct-letter, .ct-news, .ctc, .fluentform, .wp-block-search, .ct-filters, .ctr-bar, .ctr-full, .ct-comments) *)):is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--ct-sage) 84%, #000); color: #fff; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--ct-sage) 80%, transparent); }
/* Secondary actions (reset, "update cart") as a soft outline next to the main button */
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms) :is(input[type="reset"], button[name="update_cart"], .button.wc-backward):where(:not([class^="ct"]):not([class*=" ct"])) {
  background: transparent; color: var(--ct-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ct-line) 60%, var(--ct-muted)); }
:where(.wp-block-post-content, .entry-content, .woocommerce, .wpcf7, .wpforms-container, .gform_wrapper, .frm_forms) :is(input[type="reset"], button[name="update_cart"], .button.wc-backward):where(:not([class^="ct"]):not([class*=" ct"])):hover {
  background: var(--ct-cream); color: var(--ct-ink); }
:is(input[type="submit"], button, .button):is(:disabled, .disabled, [aria-disabled="true"]):where(:not([class^="ct"]):not([class*=" ct"])) { opacity: .55; cursor: not-allowed; transform: none; }
:where(.wpcf7-spinner) { vertical-align: middle; margin-left: 12px; }
:where(.wpforms-submit-container, .gform_footer, .gform_page_footer, .frm_submit) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; padding: 0; }

/* Messages after submit: soft notes with a coloured edge, like the theme's note style */
:where(.wpcf7-response-output, .wpforms-confirmation-container-full, .wpforms-confirmation-container, .gform_confirmation_message, .gform_validation_errors,
  .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice, .frm_message, .frm_error_style, .nf-response-msg, .mc4wp-alert, .forminator-response-message,
  .notice:is(.notice-success, .notice-error, .notice-warning, .notice-info), .alert:is(.alert-success, .alert-danger, .alert-warning, .alert-info)) {
  --ct-note: var(--ct-sage);
  display: block; box-sizing: border-box; margin: 20px 0; padding: 16px 22px; border: 1px solid var(--ct-line); border-left: 4px solid var(--ct-note);
  border-radius: 6px 20px 20px 6px; background: color-mix(in srgb, var(--ct-note) 9%, var(--ct-cream)); color: var(--ct-ink); font-size: 16px; line-height: 1.55; list-style: none; }
:where(.wpcf7-response-output):empty, :where(.wpcf7 form.init) .wpcf7-response-output { display: none; }
/* Errors and warnings in ember, info in amber */
:where(.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output, .gform_validation_errors, .woocommerce-error, .frm_error_style,
  .notice-error, .alert-danger, .mc4wp-error, .forminator-error) { --ct-note: var(--ct-ember); }
:where(.woocommerce-info, .notice-info, .notice-warning, .alert-warning, .alert-info, .mc4wp-notice) { --ct-note: var(--ct-amber); }
:where(.gform_validation_errors) :is(h2, h3, .gform_submission_error) { margin: 0; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: 0; text-transform: none; color: inherit; }
:where(.woocommerce-error, .woocommerce-message, .woocommerce-info) { padding-left: 22px; }
:where(ul.woocommerce-error) > li { margin: 0; padding: 0; }
:where(ul.woocommerce-error) > li::marker { content: none; }
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button { float: right; min-height: 38px; margin: -6px 0 -6px 16px; padding: 0 18px; font-size: 14px; }
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wpcf7-response-output, .gform_confirmation_message, .wpforms-confirmation-container-full, .frm_message) a:where(:not(.button)) {
  color: var(--ct-ember-text); font-weight: 500; }
:where(.wpforms-confirmation-container-full, .gform_confirmation_message, .frm_message) p { margin: 0; }

/* Shops (WooCommerce and look-alikes) that don't bring their own stylesheet */
:where(ul.products) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(clamp(150px, 30vw, 220px), 100%), 1fr)); gap: clamp(12px, 2vw, 20px); margin: 24px 0; padding: 0; list-style: none; }
:where(ul.products) > li { position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 14px 18px; box-sizing: border-box;
  border-radius: 26px; background: var(--ct-paper, #fff); border: 1px solid var(--ct-line); }
:where(ul.products) > li::marker { content: none; }
:where(ul.products) > li > a:first-child { display: flex; flex-direction: column; gap: 8px; color: var(--ct-ink); text-decoration: none; background-image: none; }
:where(ul.products) img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
:where(ul.products) :is(.woocommerce-loop-product__title, h2, h3) { margin: 6px 4px 0; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ct-ink); }
:where(ul.products, .product, .summary) :where(.price) { display: block; margin: 0 4px; color: var(--ct-ember-text); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
:where(.price) del { color: var(--ct-muted); font-weight: 400; opacity: 1; margin-right: 6px; }
:where(.price) ins { background: none; padding: 0; text-decoration: none; }
:where(ul.products) > li > .button { margin: auto 4px 0; align-self: flex-start; }
@media (max-width: 480px) { :where(ul.products) > li { padding: 10px 10px 14px; border-radius: 22px; } :where(ul.products) > li > .button { min-height: 42px; padding: 0 16px; font-size: 14px; } :where(ul.products) :is(.woocommerce-loop-product__title, h2, h3) { font-size: 16px; } }
:where(.onsale) { position: absolute; top: 24px; left: 24px; z-index: 1; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--ct-amber); color: #241C17; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
:where(.quantity) .qty { width: 84px; min-height: 44px; text-align: center; }
:where(.woocommerce) :where(table.shop_table) { width: 100%; }
:where(.woocommerce-cart-form, .woocommerce form) > :is(.button, button) { margin: 14px 10px 0 0; }
:where(.star-rating) { color: var(--ct-amber); }
:where(.woocommerce-breadcrumb) { font-size: 14px; color: var(--ct-muted); }

/* Plain shortcode output: inline forms wrap nicely, definition lists read like the site */
:where(.wp-block-post-content, .entry-content) form:where(:not([class^="ct"]):not([class*=" ct"]):not(.wp-block-search):not(.wpcf7-form):not(.wpforms-form):not(.frm-fluent-form)):where(:not(:has(p, div, fieldset, li, br))) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
:where(.wp-block-post-content, .entry-content) dl:where(:not([class^="ct"]):not([class*=" ct"])) { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); padding: 18px 22px; border-radius: 20px; background: var(--ct-cream); border: 1px solid var(--ct-line); }
:where(.wp-block-post-content, .entry-content) dl:where(:not([class^="ct"]):not([class*=" ct"])) > dd { margin: 0; }
@media (max-width: 520px) { :where(.wp-block-post-content, .entry-content) dl:where(:not([class^="ct"]):not([class*=" ct"])) { grid-template-columns: 1fr; } :where(.wp-block-post-content, .entry-content) dl > dd { margin-bottom: 10px; } }

/* Cookie and consent bars */
/* The plugin keeps its own position; the bar gets the site's dark strip and the buttons its pills */
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, #catapult-cookie-bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) {
  box-sizing: border-box; padding: 14px var(--ct-gutter, 20px); background: #241C17; color: #F4EBDF; font-family: inherit; font-size: 15px; line-height: 1.5;
  box-shadow: 0 -18px 40px -26px rgba(36, 28, 23, .5); }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, #catapult-cookie-bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) :where(.cookie-notice-container, .cc-window) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; padding: 0; background: none; box-shadow: none; }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) a:where(:not([class*="button"]):not([class*="btn"])) {
  color: #F0B27A; background-image: none; text-decoration: underline; text-underline-offset: 3px; }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) :is(.cn-button, .cli-plugin-button, .cky-btn, .cmplz-btn, .cc-btn, button, a[class*="button"]):where(:not([class^="ct"])) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin: 0 4px; padding: 0 20px; border: 0; border-radius: 999px;
  background: #F0B27A; color: #241C17; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; background-image: none; cursor: pointer; }
:where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) :is(.cn-button, .cli-plugin-button, .cky-btn, .cmplz-btn, .cc-btn, button, a[class*="button"]):where([data-cookie-set="refuse"], .cky-btn-reject, .cmplz-deny, .cc-deny, .cli_settings_button, [class*="reject"], [class*="settings"]) {
  background: transparent; color: #F4EBDF; box-shadow: inset 0 0 0 1px rgba(244, 235, 223, .45); }

/* Evening */
/* A block given a light custom background in the editor (inline #d.., #e.. or #f..) stays a light island in the
   evening with the day palette inside, like our own light islands. Otherwise its text would disappear. */
html.ct-night .has-background:is([style*="background-color:#d" i], [style*="background-color:#e" i], [style*="background-color:#f" i], [style*="background-color: #d" i], [style*="background-color: #e" i], [style*="background-color: #f" i], [style*="background-color:white" i]):where(:not(.has-text-color)) {
  color-scheme: light;
  --ct-sand: #F4EBDF; --ct-cream: #FFF8EF; --ct-ink: #241C17; --ct-ink-2: #33271F; --ct-muted: #6B5B4F; --ct-line: #E6D8C6;
  --ct-peach: #F3D9C6; --ct-clay: #E9C9B4; --ct-sage: #3F5E4F; --ct-sage-soft: #DCE5DC; --ct-paper: #fff; --ct-paper-warm: #FFFDF8;
  --ct-ember-text: color-mix(in srgb, #B4532F 78%, #241C17);
  --wp--preset--color--sand: #F4EBDF; --wp--preset--color--cream: #FFF8EF; --wp--preset--color--ink: #241C17; --wp--preset--color--ink-2: #33271F;
  --wp--preset--color--muted: #6B5B4F; --wp--preset--color--line: #E6D8C6;
  color: #241C17; }
html.ct-night .has-background:is([style*="background-color:#d" i], [style*="background-color:#e" i], [style*="background-color:#f" i], [style*="background-color: #d" i], [style*="background-color: #e" i], [style*="background-color: #f" i], [style*="background-color:white" i]) a:where(:not(.wp-element-button)) { color: var(--ct-ember-text); }
/* Unresolved embeds, plugin notes and cards pick up the evening surfaces through the variables; a few fixed colours need help */
html.ct-night :where(.wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output, .gform_validation_errors, .woocommerce-error, .frm_error_style, .notice-error, .alert-danger) {
  background: #3A231C; }
html.ct-night :is(.wpcf7-not-valid-tip, em.wpforms-error, label.wpforms-error, .gfield_validation_message, .gfield_description.validation_message, .frm_error, .nf-error-msg, .forminator-error-message) { color: #F4A896; }
html.ct-night :where(#cookie-notice, #cookie-law-info-bar, .cky-consent-container, .cmplz-cookiebanner, #moove_gdpr_cookie_info_bar, #catapult-cookie-bar, .cookie-notice, .cookie-banner, .cookie-consent, #cookie-banner, #cookie-consent, .cc-window) {
  background: #120E0B; color: #F2E7DA; box-shadow: 0 -1px 0 #2E241D, 0 -18px 40px -20px rgba(0, 0, 0, .6); }
html.ct-night :where(.onsale) { background: #F0B27A; color: #241C17; }
html.ct-night :where(ul.products) img { filter: brightness(.9) saturate(.95); }
/* Plain white plugin boxes (map or form iframes with a white page) get a soft frame so they don't glare */
html.ct-night :where(.wp-block-post-content) iframe:where(:not([class^="ct"]):not([class*=" ct"])) { box-shadow: 0 0 0 1px #3B2F27; }

/* Long words in headings (Greek has plenty: «αντισυνταγματικότατος»).
   On a phone or tablet a big heading can't fit such a word on one line. Browsers that know Greek hyphenation
   (Safari, Firefox, Chrome on Android and macOS) break it at a syllable; only words of 10+ letters, and only here.
   Where hyphenation isn't available, overflow-wrap still keeps the word inside. */
:where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-heading) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; overflow-wrap: break-word; }
/* An h1 inside the text is a section title, not the page title, so one step smaller on phones */
@media (max-width: 782px) {
  :where(.wp-block-post-content) :where(h1) { font-size: clamp(30px, 7.4vw, 46px); }
}