/**
 * Equinox Pre-heading Block Frontend & Editor Styles
 */
.wp-block-equinox-pre-heading,
.eyebrowmark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #027CA1;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* The heading under an eyebrow sits 20px below it whatever the heading block: core Heading
   blocks carry the theme's top margin (54px on an H2), Kadence Advanced Headings carry none. */
.eyebrowmark.wp-block-equinox-pre-heading + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
}


.wp-block-equinox-pre-heading .ymrule,
.eyebrowmark .ymrule {
    display: inline-block;
    width: 40px;
    height: 3px;
    background-color: #FFD457;
    flex: none;
    border-radius: 1px;
}

.wp-block-equinox-pre-heading .ytext,
.eyebrowmark .ytext {
    display: inline-block;
    color: inherit;
}

/* Right: the dash follows the text (same markup, order reversed). */
.wp-block-equinox-pre-heading.align-right,
.eyebrowmark.align-right {
    display: flex;
    display: flex !important; /* beats the .eyebrowmark helper's inline-flex !important in style.css */
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
}

/* Center: a half-length dash (20px) on each side. The one saved .ymrule span is
   stretched across the block and masked out behind the text, so pages saved before
   this change need no re-save and the editor reports no invalid blocks. */
.wp-block-equinox-pre-heading.align-center,
.eyebrowmark.align-center {
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    display: flex !important; /* beats the .eyebrowmark helper in style.css */
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.wp-block-equinox-pre-heading.align-center:has(> .ymrule),
.eyebrowmark.align-center:has(> .ymrule) {
    padding-left: 34px;  /* 20px dash + 14px gap */
    padding-right: 34px;
}

.wp-block-equinox-pre-heading.align-center > .ymrule,
.eyebrowmark.align-center > .ymrule {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: auto;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to right, #000 20px, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px));
    mask-image: linear-gradient(to right, #000 20px, transparent 20px, transparent calc(100% - 20px), #000 calc(100% - 20px));
}