/* DECORATIVE MARKS ON A HEADING — one global set, every tenant, by default.
 *
 * Ruled by Vivek, 2026-09-07: "we will have to add multiple different icons
 * that can be placed on the different places on the website that will make our
 * website look interesting and different... these were used like a quote on
 * titles, h2, h2 and more." And on where they live: "if you can do as a global
 * icon that they will go on every tenant account as a default, that will be
 * fine."
 *
 * WHAT THIS REPLACES. The shapes existed as `tittleShape` files hardcoded per
 * theme -- assets/tenant/frontend/themes/img/<theme>/..._title_shape.svg --
 * drawn only where that theme's own template happened to put one. A writer
 * could not place one on a heading, and a tenant on another theme had none.
 *
 * WHY THE SHAPES ARE IN THIS FILE rather than in a folder of SVGs seeded into
 * each account: a global default that is COPIED is not global -- it is a
 * hundred copies that drift, and a shape corrected next year would be
 * corrected in one of them. Drawn here as data URIs, every tenant reads the
 * same definition, a new one appears everywhere at once, and no account has to
 * be seeded with anything.
 *
 * THEY WEAR THE SITE'S OWN COLOUR. A mark is drawn as a MASK, not a picture,
 * so it takes --mark-accent -- the business's brand -- rather than arriving in
 * somebody else's orange. A tenant's palette is data.
 *
 * The one stylesheet is read in three places: the editor (content_css), the
 * preview window, and the site's own head. A writer sees exactly what a reader
 * will.
 */

.yg-mark {
    --mark-accent: var(--main-color-one, #6b7a8f);
    --mark-size: 2.25rem;

    position: relative;
}

/* The mark itself: a shape, masked, in the site's colour. Decoration, so it is
   drawn with a pseudo-element and is invisible to anything reading the page
   aloud -- a heading must read as its words and nothing else. */
.yg-mark::before {
    content: "";
    display: block;
    width: var(--mark-size);
    height: var(--mark-size);
    margin-bottom: .5rem;
    background-color: var(--mark-accent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---- WHERE IT SITS ------------------------------------------------------ */

/* Beside the words rather than above them. */
.yg-mark--inline {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.yg-mark--inline::before { margin-bottom: 0; flex: none; }

/* Centred, for a heading that stands alone between two sections. */
.yg-mark--centre { text-align: center; }
.yg-mark--centre::before { margin-left: auto; margin-right: auto; }
.yg-mark--centre.yg-mark--inline { justify-content: center; }

/* Behind the words, oversized and quiet -- the flourish that fills the space
   above a section heading without competing with it. */
.yg-mark--behind::before {
    position: absolute;
    top: -1.25rem;
    left: -.75rem;
    width: calc(var(--mark-size) * 2.5);
    height: calc(var(--mark-size) * 2.5);
    opacity: .16;
    margin: 0;
    pointer-events: none;
}

.yg-mark--behind { z-index: 0; }

/* ---- THE SHAPES ---------------------------------------------------------
   Each is one mask. To add another to the whole platform, add one rule here
   and one line to the editor's dropdown -- nothing is copied anywhere. */

/* Three brush strokes, rising. */
.yg-mark--strokes::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M8 54c4-6 8-11 12-14'/%3E%3Cpath d='M27 52C31 38 34 24 36 10'/%3E%3Cpath d='M52 44c2-8 3-15 3-21'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M8 54c4-6 8-11 12-14'/%3E%3Cpath d='M27 52C31 38 34 24 36 10'/%3E%3Cpath d='M52 44c2-8 3-15 3-21'/%3E%3C/g%3E%3C/svg%3E");
}

/* The four-point sparkle, drawn as an outline. */
.yg-mark--sparkle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='8' stroke-linejoin='round' d='M32 6c3 14 12 23 26 26-14 3-23 12-26 26-3-14-12-23-26-26 14-3 23-12 26-26z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='none' stroke='%23000' stroke-width='8' stroke-linejoin='round' d='M32 6c3 14 12 23 26 26-14 3-23 12-26 26-3-14-12-23-26-26 14-3 23-12 26-26z'/%3E%3C/svg%3E");
}

/* A hand-drawn underline. Wider than it is tall, so it reads as a rule. */
.yg-mark--underline::before {
    width: calc(var(--mark-size) * 2.5);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 32'%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' d='M6 22c34-10 76-14 148-8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 32'%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' d='M6 22c34-10 76-14 148-8'/%3E%3C/svg%3E");
}

/* An underline that goes back on itself -- the emphatic one. */
.yg-mark--swoosh::before {
    width: calc(var(--mark-size) * 2.5);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M8 26c40-14 92-16 144-6-46-10-96-4-132 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M8 26c40-14 92-16 144-6-46-10-96-4-132 12'/%3E%3C/svg%3E");
}

/* A short run of dots. */
.yg-mark--dots::before {
    width: calc(var(--mark-size) * 1.6);
    height: calc(var(--mark-size) * .5);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cg fill='%2324'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='36' cy='12' r='7'/%3E%3Ccircle cx='60' cy='12' r='7'/%3E%3Ccircle cx='84' cy='12' r='7'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='36' cy='12' r='7'/%3E%3Ccircle cx='60' cy='12' r='7'/%3E%3Ccircle cx='84' cy='12' r='7'/%3E%3C/g%3E%3C/svg%3E");
}

/* A wave. */
.yg-mark--wave::before {
    width: calc(var(--mark-size) * 2);
    height: calc(var(--mark-size) * .7);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' d='M6 20c10-16 20-16 30 0s20 16 30 0 20-16 30 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' d='M6 20c10-16 20-16 30 0s20 16 30 0 20-16 30 0'/%3E%3C/svg%3E");
}

/* A quotation mark, for a heading that IS a quotation. */
.yg-mark--quote::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 40c0-14 8-24 20-28l3 7c-7 3-11 9-11 15h9v20H12z'/%3E%3Cpath d='M38 40c0-14 8-24 20-28l3 7c-7 3-11 9-11 15h9v20H38z'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 40c0-14 8-24 20-28l3 7c-7 3-11 9-11 15h9v20H12z'/%3E%3Cpath d='M38 40c0-14 8-24 20-28l3 7c-7 3-11 9-11 15h9v20H38z'/%3E%3C/g%3E%3C/svg%3E");
}

/* A plain rule, for a heading that wants marking without a picture. */
.yg-mark--rule::before {
    width: calc(var(--mark-size) * 2);
    height: 4px;
    border-radius: 2px;
    -webkit-mask-image: none;
    mask-image: none;
}

/* A browser without mask support would draw a solid block where the shape
   should be, which is worse than no shape at all. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    .yg-mark:not(.yg-mark--rule)::before { display: none; }
}