:is(.td-post-content.tagdiv-type, body.mce-content-body) {
  --ahaycg-yellow: #FDE33D;
  --ahaycg-pink: #FC5DB8;
  --ahaycg-blue: #389FFD;
  --ahaycg-standard: #F2EAE5;
}

/* AHAYCG editorial components — approved 23 October 2026.
   Shared frontend/editor rules; deliberately formatted content only. */

/* Shared heading box — left aligned by default */
:is(.td-post-content.tagdiv-type, body.mce-content-body)
:is(h1,h2,h3,h4,h5,h6).ahaycg-editorial-heading:is(
  .ahaycg-heading-straight,
  .ahaycg-heading-slanted,
  .ahaycg-heading-sidebar
) {
  display: table;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding: 4px 11px 3px !important;
  border: 0 !important;
  background: var(--ahaycg-heading-colour, #FDE33D) !important;
  color: #111111 !important;
  text-align: left !important;
  transform: none !important;
  transform-origin: left center;
}

/* Slanted heading and sidebar replica */
:is(.td-post-content.tagdiv-type, body.mce-content-body)
:is(h1,h2,h3,h4,h5,h6).ahaycg-editorial-heading:is(
  .ahaycg-heading-slanted,
  .ahaycg-heading-sidebar
) {
  transform: rotate(-1.2deg) !important;
}

/* Sidebar replica typography */
:is(.td-post-content.tagdiv-type, body.mce-content-body)
:is(h1,h2,h3,h4,h5,h6).ahaycg-editorial-heading.ahaycg-heading-sidebar {
  font: 700 36px/1 "dharma-gothic-e", Impact, sans-serif !important;
  text-transform: uppercase !important;
}

/* Alignment: centre */
:is(.td-post-content.tagdiv-type, body.mce-content-body)
:is(h1,h2,h3,h4,h5,h6).ahaycg-editorial-heading.ahaycg-heading-center {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  transform-origin: center center;
}

/* Alignment: right */
:is(.td-post-content.tagdiv-type, body.mce-content-body)
:is(h1,h2,h3,h4,h5,h6).ahaycg-editorial-heading.ahaycg-heading-right {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  transform-origin: right center;
}

/* Colour options */
:is(.td-post-content.tagdiv-type, body.mce-content-body) .ahaycg-heading-yellow {
  --ahaycg-heading-colour: var(--ahaycg-yellow);
}

:is(.td-post-content.tagdiv-type, body.mce-content-body) .ahaycg-heading-pink {
  --ahaycg-heading-colour: var(--ahaycg-pink);
}

:is(.td-post-content.tagdiv-type, body.mce-content-body) .ahaycg-heading-blue {
  --ahaycg-heading-colour: var(--ahaycg-blue);
}


/* Blockquotes and independent paragraph attribution */

/* Include the reusable Cloud content classes to outrank ordinary quote rules,
   including their !important declarations, without a template ID dependency. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> blockquote.ahaycg-editorial-quote:not(.instagram-media) {
  display: block;
  float: none !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin: 18px 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ahaycg-quote-colour, #F2EAE5) !important;
}

/* Floating quote layouts override only shared geometry. The extra modifier
   class outranks the full-width rule while retaining the same article/editor scope. */
@media (min-width: 740px) {
  :is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
  > blockquote.ahaycg-editorial-quote.ahaycg-quote-right:not(.instagram-media) {
    float: right !important;
    width: 260px !important;
    max-width: 100% !important;
    margin: 0 0 18px 12px !important;
  }

  :is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
  > blockquote.ahaycg-editorial-quote.ahaycg-quote-left:not(.instagram-media) {
    float: left !important;
    width: 260px !important;
    max-width: 100% !important;
    margin: 0 12px 18px 0 !important;
  }
}

@media (max-width: 739px) {
  :is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
  > blockquote.ahaycg-editorial-quote:is(.ahaycg-quote-right, .ahaycg-quote-left):not(.instagram-media) {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 !important;
  }
}

/* Set both the box and its paragraphs: quotation text may be a direct text node.
   These class-scoped rules leave ordinary quotation typography unchanged. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> blockquote.ahaycg-editorial-quote:not(.instagram-media),
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> blockquote.ahaycg-editorial-quote:not(.instagram-media) > p {
  font-family: "Libre Franklin", sans-serif !important;
  font-size: var(--ahaycg-quote-size, 18px) !important;
  font-weight: var(--ahaycg-quote-weight, 600) !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  text-align: left !important;
}

/* Shared typography across all colours. Unclassified boxes default to Bold Bigger. */
.ahaycg-editorial-quote {
  --ahaycg-quote-size: 18px;
  --ahaycg-quote-weight: 600;
}

.ahaycg-editorial-quote.ahaycg-quote-bold-bigger {
  --ahaycg-quote-size: 18px;
  --ahaycg-quote-weight: 600;
}

.ahaycg-editorial-quote.ahaycg-quote-bold-regular {
  --ahaycg-quote-size: 17px;
  --ahaycg-quote-weight: 600;
}

.ahaycg-editorial-quote.ahaycg-quote-low-emph-regular {
  --ahaycg-quote-size: 17px;
  --ahaycg-quote-weight: 400;
}

/* Colour choices */
.ahaycg-editorial-quote.ahaycg-quote-standard {
  --ahaycg-quote-colour: var(--ahaycg-standard);
}

.ahaycg-editorial-quote.ahaycg-quote-yellow {
  --ahaycg-quote-colour: var(--ahaycg-yellow);
}

.ahaycg-editorial-quote.ahaycg-quote-pink {
  --ahaycg-quote-colour: var(--ahaycg-pink);
}

.ahaycg-editorial-quote.ahaycg-quote-blue {
  --ahaycg-quote-colour: var(--ahaycg-blue);
}

/* Optional attribution — works on ALL article blockquotes */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> blockquote:not(.instagram-media) > p.ahaycg-quote-credit {
  font-size: 0.85em !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-align: right !important;
  margin: 5px 0 0 !important;
}

/* Keep the credit's 5px gap with either paragraph-wrapped or direct quote text;
   a preceding paragraph's bottom margin must not enlarge that gap. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> blockquote:not(.instagram-media) > p:has(+ p.ahaycg-quote-credit) {
  margin-bottom: 0 !important;
}

/* Separation when another quotation follows a credit */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> blockquote:not(.instagram-media) > p.ahaycg-quote-credit + p {
  margin-top: 16px !important;
}

/* Editorial dividers only; same reusable article scope and editor preview. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
> hr.ahaycg-divider {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  height: 5px !important;
  min-height: 0;
  margin: 19px 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  background: var(--ahaycg-divider-colour, #FDE33D) !important;
}

.ahaycg-divider-tricolour {
  --ahaycg-divider-colour: linear-gradient(
    to right,
    #FDE33D 0%,
    #FDE33D 33.333%,
    #FC5DB8 33.333%,
    #FC5DB8 66.667%,
    #389FFD 66.667%,
    #389FFD 100%
  );
}

.ahaycg-divider-yellow {
  --ahaycg-divider-colour: var(--ahaycg-yellow);
}

.ahaycg-divider-pink {
  --ahaycg-divider-colour: var(--ahaycg-pink);
}

.ahaycg-divider-blue {
  --ahaycg-divider-colour: var(--ahaycg-blue);
}

/* Extended images: normal content width unless the compatible metadata grid
   below is present. Classic Editor has no metadata column, so never offsets. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body) {
  --ahaycg-extended-width: 100%;
  --ahaycg-extended-offset: 0px;
  --ahaycg-extended-caption-position: static;
  --ahaycg-extended-caption-width: auto;
}

@media (min-width: 1140px) and (max-width: 1299px) {
  body .base-layout .base-grid:has(.base-meta) .base-main
  .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner {
    --ahaycg-extended-width: 780px;
    --ahaycg-extended-offset: -160px;
    --ahaycg-extended-caption-position: absolute;
    --ahaycg-extended-caption-width: 140px;
  }
}

@media (min-width: 1300px) {
  body .base-layout .base-grid:has(.base-meta) .base-main
  .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner {
    --ahaycg-extended-width: 860px;
    --ahaycg-extended-offset: -240px;
    --ahaycg-extended-caption-position: absolute;
    --ahaycg-extended-caption-width: 220px;
  }
}

:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
img.ahaycg-image-extended {
  display: block;
  box-sizing: border-box;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  margin: 0 !important;
}

/* Links, picture elements and Classic Editor's caption image holder fill their
   enclosing image unit. No HTML attributes or stored dimensions are rewritten. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
:is(a, picture, .wp-caption-dt):has(img.ahaycg-image-extended) {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Exactly one outer unit takes the offset: a caption container, an uncaptioned
   link/picture, or a bare image. Exclusions prevent doubling a wrapper's offset.
   Explicit widths also constrain full-size images with very large intrinsic sizes. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
:is(
  .wp-caption:has(img.ahaycg-image-extended),
  a:has(img.ahaycg-image-extended):not(.wp-caption a),
  picture:has(img.ahaycg-image-extended):not(.wp-caption picture):not(a picture),
  img.ahaycg-image-extended:not(.wp-caption img):not(a img):not(picture img)
) {
  display: block;
  position: relative;
  box-sizing: border-box;
  float: none !important;
  width: var(--ahaycg-extended-width) !important;
  max-width: var(--ahaycg-extended-width) !important;
  margin: 12px 0 12px var(--ahaycg-extended-offset) !important;
}

/* Covers HTML5 figcaption, legacy frontend p.wp-caption-text, and editor dd. */
:is(body .tdb_single_content.td-post-content.tagdiv-type > .tdb-block-inner, body.mce-content-body)
.wp-caption:has(img.ahaycg-image-extended) > :is(figcaption, .wp-caption-text, .wp-caption-dd) {
  position: var(--ahaycg-extended-caption-position) !important;
  top: 100%;
  left: 0;
  width: var(--ahaycg-extended-caption-width) !important;
  margin: 0 !important;
  padding-top: 6px !important;
  color: #555555 !important;
  font-family: "Libre Franklin", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

/* AHAYCG — Image Cutouts. Shared layout boundary and component specificity;
   the same declaration blocks also preview inside the Classic Editor iframe. */
:is(body .base-layout .tdb_single_content.td-post-content .tdb-block-inner, body.mce-content-body)
img.ahaycg-cutout {
  display: block;
  float: left !important;
  width: var(--ahaycg-cutout-width, 40%) !important;
  height: auto !important;
  margin: 0 18px 18px 0 !important;
  padding: 0 !important;
  shape-image-threshold: 0.8;
  shape-margin: var(--ahaycg-cutout-shape-margin, 14px);
}

:is(body .base-layout .tdb_single_content.td-post-content .tdb-block-inner, body.mce-content-body)
img.ahaycg-cutout.ahaycg-cutout-right {
  float: right !important;
  margin: 0 0 18px 18px !important;
}

/* Regular offsets affect only the outer margin at large article widths. */
@media (min-width: 1140px) {
  :is(body .base-layout .tdb_single_content.td-post-content .tdb-block-inner, body.mce-content-body)
  img.ahaycg-cutout.ahaycg-cutout-left:not(.ahaycg-cutout-rail-full):not(.ahaycg-cutout-rail-mid) {
    margin-left: var(--ahaycg-cutout-offset, 0px) !important;
  }

  :is(body .base-layout .tdb_single_content.td-post-content .tdb-block-inner, body.mce-content-body)
  img.ahaycg-cutout.ahaycg-cutout-right:not(.ahaycg-cutout-rail-full):not(.ahaycg-cutout-rail-mid) {
    margin-right: var(--ahaycg-cutout-offset, 0px) !important;
  }
}

/* Rail variants override only the horizontal offset of ordinary cutouts. */
@media (min-width: 1300px) {
  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout.ahaycg-cutout-left.ahaycg-cutout-rail-full {
    margin-left: -240px !important;
  }

  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout.ahaycg-cutout-left.ahaycg-cutout-rail-mid {
    margin-left: -120px !important;
  }

  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout.ahaycg-cutout-right.ahaycg-cutout-rail-mid {
    margin-right: -50px !important;
  }
}

@media (min-width: 1140px) and (max-width: 1299px) {
  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout.ahaycg-cutout-left.ahaycg-cutout-rail-full {
    margin-left: -160px !important;
  }

  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout.ahaycg-cutout-left.ahaycg-cutout-rail-mid {
    margin-left: -80px !important;
  }

  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout.ahaycg-cutout-right.ahaycg-cutout-rail-mid {
    margin-right: -10px !important;
  }
}

@media (max-width: 1139px) {
  body .base-layout .tdb_single_content .tdb-block-inner
  img.ahaycg-cutout:is(.ahaycg-cutout-left, .ahaycg-cutout-right).ahaycg-cutout-rail-large-only {
    display: none !important;
  }
}

@media (max-width: 739px) {
  :is(body .base-layout .tdb_single_content.td-post-content .tdb-block-inner, body.mce-content-body)
  img.ahaycg-cutout {
    width: var(--ahaycg-cutout-mobile, 45%) !important;
  }
}

/* Inline carousels keep native wp-caption styling. Extended slides carry the
   existing ahaycg-image-extended marker: all geometry/caption rules above apply
   to this one outer figure, with no second responsive layout system. */
:is(.td-post-content.tagdiv-type, body.mce-content-body) figure.ahaycg-carousel {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

:is(.td-post-content.tagdiv-type, body.mce-content-body)
figure.ahaycg-carousel:not(:has(img.ahaycg-image-extended)):not(:has(> figcaption)) {
  margin-bottom: 13px;
}

:is(.td-post-content.tagdiv-type, body.mce-content-body) .ahaycg-carousel-photo {
  position: relative;
  width: 100%;
  touch-action: pan-y pinch-zoom;
}

:is(.td-post-content.tagdiv-type, body.mce-content-body) .ahaycg-carousel-photo > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Exact visible dimensions also provide the full 38 x 44px pointer target. */
body .td-post-content.tagdiv-type .ahaycg-carousel-photo > button.ahaycg-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(15, 15, 15, 0.50);
  color: #fff;
  opacity: 1;
  cursor: pointer;
  z-index: 1;
  transition: none;
}

body .td-post-content.tagdiv-type .ahaycg-carousel-previous { left: 6px; }
body .td-post-content.tagdiv-type .ahaycg-carousel-next { right: 6px; }

body .td-post-content.tagdiv-type .ahaycg-carousel-control > span::before {
  font-family: 'Font Awesome 6 Free';
  font-size: 15px;
  font-weight: 900;
  font-style: normal;
  line-height: 1;
}

.ahaycg-carousel-previous > span::before { content: '\f053'; }
.ahaycg-carousel-next > span::before { content: '\f054'; }

body .td-post-content.tagdiv-type .ahaycg-carousel-control:focus-visible,
body .td-post-content.tagdiv-type .ahaycg-carousel:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 2px #111;
}

.ahaycg-carousel-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}