/* OKCA page content converted from Divi (M2): what the converted pages need in the Classic 1.4 look.
   Reference: Work/13 OKCA 1.4 2026-10-06/styles.css (links, rules, buttons, secondary text). Colours: only the seven
   theme.json palette colours. Loaded on the front end and in the editor (functions.php). */

/* Embedded frames (Wild Apricot calendar and join form) never wider than the page. The selector outranks the
   content-width rule WordPress puts on every block in the page column. */
:is(.wp-block-post-content, .editor-styles-wrapper) iframe { max-width: 100%; }

/* Byline under an article title ("By ...") */
.okca-byline {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--slate);
  letter-spacing: .02em;
}

/* Image captions: smaller secondary text under the picture */
.wp-block-image .wp-element-caption {
  margin: 10px auto 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.45;
  color: var(--wp--preset--color--slate);
  text-align: center;
}
/* A centred picture keeps its own size, and its caption may be wider than a narrow picture */
figure.wp-block-image.aligncenter { display: block; text-align: center; }
figure.wp-block-image.aligncenter > img,
figure.wp-block-image.aligncenter > a { display: inline-block; }
figure.wp-block-image.aligncenter > .wp-element-caption { display: block; }

/* "On black" image style: white artwork on a transparent background, shown on a black tile */
.wp-block-image.is-style-okca-on-black img {
  box-sizing: border-box;
  background: var(--wp--preset--color--black);
  padding: 24px 28px;
  border-radius: 4px;
}
.wp-block-image.is-style-okca-on-green img {
  box-sizing: border-box;
  background: var(--wp--preset--color--green);
  padding: 24px 28px;
  border-radius: 4px;
}

/* Website help screenshots: a thin frame, so a white admin screen stands apart from the white page */
.wp-block-image.okca-help-shot img { border: 1px solid var(--wp--preset--color--ash); }

/* Galleries: even spacing (core sizes the pictures from this gap); pictures keep their shape (cropping is off) */
.wp-block-gallery.has-nested-images { --wp--style--unstable-gallery-gap: 16px; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 2px; }

/* Questions and answers (details blocks, the old accordions): a run of them reads as one list between rules */
.wp-block-details { border-top: 1px solid var(--wp--preset--color--ash); }
.wp-block-details + .wp-block-details { margin-block-start: 0; }
.wp-block-details:not(:has(+ .wp-block-details)) { border-bottom: 1px solid var(--wp--preset--color--ash); }
.wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "+";
  flex: none;
  width: 1em;
  text-align: center;
  font: 500 28px/1 var(--wp--preset--font-family--text);
  color: var(--wp--preset--color--green);
}
.wp-block-details[open] > summary::after { content: "\2212"; }
.wp-block-details > summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.wp-block-details > summary + * { margin-block-start: .25em; }
.wp-block-details > :last-child:not(summary) { margin-block-end: 1.2em; }

/* Buttons in page content, as the design's .btn: at least 48px tall, text centred */
.wp-block-buttons .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-decoration: none;
}
.wp-block-buttons .wp-block-button__link:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Tables: rules instead of boxes, figures line up, wide tables scroll inside the page on phones */
figure.wp-block-table { overflow-x: auto; }
figure.wp-block-table table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
figure.wp-block-table :is(td, th) {
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--ash);
  padding: 10px 12px;
  vertical-align: top;
}
figure.wp-block-table tr:first-child > :is(td, th) { border-top: 1px solid var(--wp--preset--color--black); }
figure.wp-block-table :is(thead, tfoot) { border: 0; }
figure.wp-block-table th { font-weight: 600; text-align: left; }

/* Columns: on phones they stack (WordPress does this below 782px); empty columns kept for the desktop layout
   take no room when stacked */
@media (max-width: 781px) {
  .wp-block-columns > .wp-block-column:empty { display: none; }
}