/* PcRichTextEditor global styles - needed because JS-created elements
   are outside Blazor CSS isolation scope */

/* Jules Big (#2225) — the article quote block is set in the site's display face, but AdminWebApp's
   index.html only loads Fira Sans from Google Fonts and Jules Big is bundled solely in HomePage
   (src/assets/jules, declared in base.css). Without this @font-face the editor preview silently
   falls back to a system serif and the "preview == published" requirement fails with nothing to
   see in the console. Only the Book (400) face exists — Figma's "Medium" label has no shipped
   file, and asking for 500 would synthesize a fake bold, so every Jules Big rule in the repo
   writes font-weight: 400. A @font-face only downloads when something actually uses the family,
   so this costs the WebApp nothing. */
@font-face {
    font-family: 'Jules Big';
    src: url('../fonts/JulesBig-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Ms Madi (#2227) — same reason as Jules Big above: it is one of the three families the marketing
   strip's font picker offers, and it is bundled only in HomePage. Both subsets are shipped with the
   same unicode-ranges HomePage's fonts.css declares (US-307 self-hosting), so Hungarian accents in the
   latin-ext range resolve instead of silently dropping to the next family in the stack. */
@font-face {
    font-family: 'Ms Madi';
    src: url('../fonts/msmadi-400-normal-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Ms Madi';
    src: url('../fonts/msmadi-400-normal-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pc-variable-dropdown-container {
    position: relative;
    float: right;
}

/* US-232: brand-yellow toolbar pill (was muddy gold #d4a843). */
.pc-variable-btn {
    background-color: var(--mud-palette-secondary, #FCC231) !important;
    color: #01211b !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 600;
    white-space: nowrap;
    height: 28px;
    width: auto !important;
}

.pc-variable-btn:hover {
    filter: brightness(0.95);
}

/* US-232: the Figma "Változó értékek" reference card (replaces the old insert dropdown). */
.pc-variable-card {
    position: fixed;
    z-index: 10000;
    width: 340px;
    max-height: 360px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #CCCCCC;
    border-radius: 16px;
    box-shadow: 0 2px 20px 5px rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    box-sizing: border-box;
}

.pc-variable-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pc-variable-card-title {
    color: #1C8578;
    font-size: 18px;
    font-weight: 500;
}

.pc-variable-card-close {
    border: none;
    background: transparent;
    color: #9F9F9F;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
}

.pc-variable-card-close:hover {
    color: #6f6f6f;
}

.pc-variable-card-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pc-variable-card-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14px;
    font-weight: 300;
}

.pc-variable-card-label {
    color: #333333;
    flex: 0 0 auto;
    white-space: nowrap;
}

.pc-variable-card-copy {
    margin-left: auto;
    border: none;
    background: transparent;
    color: #9F9F9F;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
}

.pc-variable-card-copy:hover {
    color: #1C8578;
}

.pc-variable-card-copy--copied {
    color: #1C8578;
}

/* Ensure Quill editor formatting renders correctly (MudBlazor CSS can reset these) */
.ql-editor strong,
.ql-editor b {
    font-weight: 700 !important;
}

.ql-editor em,
.ql-editor i {
    font-style: italic !important;
}

.ql-editor u {
    text-decoration: underline !important;
}

/* Quill's snow.css uses ::before counters and sets list-style-type: none on every
   .ql-editor ol > li / ul > li (specificity 0,1,2). We restore native markers by
   re-asserting list-style-type on the li directly with !important — same selector
   target as snow.css so we win on cascade order without needing ::before content. */
.ql-editor ol,
.ql-editor ol > li {
    list-style-type: decimal !important;
}

.ql-editor ul,
.ql-editor ul > li {
    list-style-type: disc !important;
}

.ql-editor ol,
.ql-editor ul {
    padding-left: 24px !important;
}

.ql-editor li {
    display: list-item !important;
}

/* Suppress snow.css's ::before bullet/counter so we don't end up with double
   markers (one native + one pseudo-element). */
.ql-editor ol > li::before,
.ql-editor ul > li::before {
    content: none !important;
}

/* Image toolbar - floating controls for inline images. Two stacked rows: size+align, then caption. */
.pc-image-toolbar {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 6px 10px;
}

.pc-image-toolbar-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pc-image-toolbar-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Caption row spans the full toolbar width; the input grows to fill it. */
.pc-image-toolbar-group--caption {
    border-top: 1px solid #ececec;
    padding-top: 6px;
}

.pc-image-toolbar-caption {
    flex: 1 1 auto;
    min-width: 220px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: #333;
    line-height: 1.3;
}

.pc-image-toolbar-caption:focus {
    outline: none;
    border-color: #c49a3a;
}

.pc-image-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-right: 2px;
}

.pc-image-toolbar-btn {
    border: 1px solid #d0d0d0;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    color: #333;
    line-height: 1.2;
}

.pc-image-toolbar-btn:hover {
    background: #e8e8e8;
    border-color: #bbb;
}

.pc-image-toolbar-btn.active {
    background: #d4a843;
    color: #ffffff;
    border-color: #c49a3a;
}

/* ---- Custom tool popovers ---- */
.pc-custom-popover {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 280px;
    /* #2227: the marketing strip's popover is ~620px tall (nine fields) while the toolbar sits ~440px
       down the page, so its Save/Delete row landed below the fold. `overflow-y` is what lets it scroll;
       the actual cap AND the top offset are computed in `positionCustomPopover` (pc-rich-text-editor.js),
       because a viewport-relative max-height cannot help when the overflow comes from the element's top
       offset rather than its height. This value is only a fallback for the (impossible) case of the
       popover being shown without the positioner. */
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

.pc-custom-popover-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.pc-custom-popover-label {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    margin-bottom: 3px;
}

.pc-custom-popover-input,
.pc-custom-popover-select,
.pc-custom-popover-textarea {
    font-size: 13px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 5px 8px;
    outline: none;
    font-family: inherit;
    resize: vertical;
}

.pc-custom-popover-input:focus,
.pc-custom-popover-select:focus,
.pc-custom-popover-textarea:focus {
    border-color: #158ebe;
}

.pc-custom-popover-hint {
    font-size: 11px;
    color: #888;
    margin-bottom: 6px;
}

.pc-custom-popover-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pc-custom-popover-save {
    background: #d4a843;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pc-custom-popover-save:hover {
    background: #c49a3a;
}

.pc-custom-popover-delete {
    background: #f8c8c8;
    color: #e6575a;
    border: 1px solid #e6575a;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.pc-custom-popover-delete:hover {
    background: #f0b0b0;
}

/* ---- Editor preview: InfoCard ---- */
.ql-editor .pc-info-card {
    border-radius: 4px;
    padding: 10px 14px;
    margin: 8px 0;
    display: block;
    cursor: pointer;
}

.ql-editor .pc-info-card--information {
    background-color: #cceef3;
    color: #158ebe;
    border: 1px solid #158ebe;
}

.ql-editor .pc-info-card--warning {
    background-color: #ffefbf;
    color: #bb8838;
    border: 1px solid #bb8838;
}

.ql-editor .pc-info-card--danger {
    background-color: #f8c8c8;
    color: #e6575a;
    border: 1px solid #e6575a;
}

.ql-editor .pc-info-card--success {
    background-color: #dbf1d7;
    color: #1e9b6e;
    border: 1px solid #1e9b6e;
}

.ql-editor .pc-info-card__title {
    display: block;
    font-weight: 700;
    margin-bottom: 4px;
}

.ql-editor .pc-info-card__body {
    font-size: 14px;
}

/* ---- Editor preview: CTA Button ---- */
/* The article CTA is the HomePage SITE button, NOT the dashboard PcButton (#2226). Blog and KNOW are
   website surfaces, so the button matches HomePage's HeroSection.module.css -> .ctaButton and Figma
   3271:2628 "Frame 9": 42px high, 6px 30px padding, 5px radius, Fira Sans 500 / 15px, #FCC231 fill,
   #01211b text, hover #FFE6A7 (= HomePage --pc-secondary-hover, hardcoded here because the Blazor
   side does not define that variable). line-height: normal — the Figma "Button link text" token's
   lineHeight: 100 means AUTO, not 100px.
   This deliberately REPLACES the #959 MudButton reproduction (14px / 2px 16px / 7px radius /
   #FBB80E hover, ~26px tall); do not restore those values from that bug's reasoning.
   vertical-align: middle because the blot is an inline embed: on the default baseline a 42px button
   sits on the text baseline and leaves the descender gap visible under it inside the paragraph.
   Kept identical to the public display rule in HomePage's article-body.css so the editor is
   WYSIWYG (the editor adds only user-select: none, so the embed is not text-selectable). */
.pc-rich-text-editor--article .ql-editor a.pc-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-width: 64px;
    height: 42px;
    padding: 6px 30px;
    background-color: var(--pc-secondary, #FCC231);
    color: #01211b;
    border: 0;
    border-radius: 5px;
    box-shadow: none;
    font-family: 'Fira Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .25s cubic-bezier(.4, 0, .2, 1);
}

.pc-rich-text-editor--article .ql-editor a.pc-cta-button:hover {
    background-color: #FFE6A7;
}

/* Inline prose links (Quill link tool) = PcButton Color.Secondary + Variant.Text: secondary-colored
   text, no fill, no underline; secondary-hover tint on hover (matches MudButton text variant).
   Scoped to the article editors (Blog/Know) via the --article modifier so other PcRichTextEditor
   hosts (e.g. email templates) keep Quill's default link styling in their preview. */
.pc-rich-text-editor--article .ql-editor a:not(.pc-cta-button) {
    color: var(--pc-secondary, #FCC231);
    background-color: transparent;
    font-weight: 500;
    text-decoration: none;
}

.pc-rich-text-editor--article .ql-editor a:not(.pc-cta-button):hover {
    background-color: rgba(252, 194, 49, .06);
    text-decoration: none;
}

/* ---- Editor preview: YouTube embed ---- */
.ql-editor .pc-youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 8px 0;
    cursor: pointer;
    background: #000;
}

.ql-editor .pc-youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

/* ---- Editor preview: image caption figure (bug #1297) ---- */
/* The figure carries the size/align inline style; the image fills it. Must mirror the public
   display rules in HomePage's article-body.css so the editor is WYSIWYG. */
.ql-editor .pc-article-figure {
    max-width: 100%;
}

.ql-editor .pc-article-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.ql-editor .pc-article-figure__caption {
    margin-top: 8px;
    color: #9F9F9F;
    font-family: 'Fira Sans', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: normal;
}

/* ---- Editor preview: quote block (#2225) ---- */
/* A pull-quote / highlighted passage (typically the interviewee's words) — no attribution, one
   text field. Figma 3271:2624. The decorative mark is a ::before background rather than markup, so
   the author can neither move nor delete it and the sanitizer needs no img/svg surface for it.
   Every distance is a fixed padding on an auto-height box, which is what #2225's "the spacing must
   not change however much text I type" actually asks for — the box grows, the offsets do not. The
   51/29 top/bottom asymmetry is the measured design, not a defect to symmetrize.
   Kept identical to the public display rule in HomePage's article-body.css so the editor is
   WYSIWYG (the editor adds only cursor/user-select, so the embed is not text-selectable). */
/* z-index: 0 makes the block its own stacking context, so the text's z-index: 1 below is scoped to it
   and cannot compete with anything on the page around the editor. */
.pc-rich-text-editor--article .ql-editor .pc-quote {
    position: relative;
    z-index: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0;
    padding: 51px 0 29px 75px;
    background-color: #FFFFFF;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
}

/* The mark bleeds left of the text column (25→113 vs. text from 75) and must paint BEHIND the
   text, so it stays unpositioned in the stacking order while the text is lifted above it. */
.pc-rich-text-editor--article .ql-editor .pc-quote::before {
    content: '';
    position: absolute;
    left: 25px;
    top: 17px;
    width: 88px;
    height: 75px;
    background-image: url('../img/quote-mark.png');
    background-repeat: no-repeat;
    background-size: 88px 75px;
    pointer-events: none;
}

/* Every typographic property is written out: the published body inherits font/size/colour from the
   page's .articleBody module rule, so anything left unset would differ between the two surfaces. */
.pc-rich-text-editor--article .ql-editor .pc-quote__text {
    position: relative;
    z-index: 1;
    max-width: 574px;
    margin: 0;
    font-family: 'Jules Big', 'Georgia', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: normal;
    color: #01211B;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Editor preview: marketing strip (#2227) ---- */
/* Figma 3271:2631. Title / body / button centred on a colour-configurable band; the colours arrive as an
   inline style on the root, the fonts as a pc-font-* class from the closed three-family set.
   Kept identical to the public display rule in HomePage's article-body.css (the editor adds only
   cursor/user-select) so the author sees what the reader gets. */
.pc-rich-text-editor--article .ql-editor .pc-marketing-strip {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0;
    padding: 30px 40px;
    border-radius: 0;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

/* The vertical rhythm is 30 / title / 16 / body / 30 / button / 30 — NOT uniform, so a single flex `gap`
   cannot express it. Each element instead carries the gap ABOVE it as a top margin, and :first-child
   resets it. That is what makes the AC's "any field may be omitted and the rest stays correct" hold for
   every combination: drop the body and the button keeps its own 30px; drop the title and the body sits
   straight on the 30px padding. Bottom spacing is the container's padding, so no element needs a bottom
   margin at all. */
.pc-rich-text-editor--article .ql-editor .pc-marketing-strip > * {
    margin: 0 auto;
    max-width: 644px;
}

.pc-rich-text-editor--article .ql-editor .pc-marketing-strip__title {
    font-size: 30px;
    /* Tighter than the font size on purpose (Figma): 24px leading under a 30px face. Not a mistake. */
    line-height: 24px;
    margin-top: 0;
}

.pc-rich-text-editor--article .ql-editor .pc-marketing-strip__body {
    font-size: 18px;
    line-height: normal;
    margin-top: 16px;
}

/* The shared .pc-cta-button is `inline-flex` because in prose it sits inside a paragraph. Here it is the
   only thing on its line, and an inline-level box would inherit the parent's strut, adding a few px of
   leading on top of the 30px the design specifies. Going block-level (`flex` + `width: fit-content` +
   `margin: auto`) removes the line box entirely, so the gap is exactly 30px and the button stays
   content-width and centred. Everything else about its look comes from the shared rule. */
.pc-rich-text-editor--article .ql-editor .pc-marketing-strip a.pc-cta-button {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 30px auto 0;
}

/* The second selector is not redundant: the button rule above is `a.pc-cta-button` (0,4,1), which
   OUTWEIGHS a bare `> :first-child` (0,4,0) — so a strip whose only element is the button kept its 30px
   top margin and sat 60px from the top edge instead of 30. Measured, not guessed. */
.pc-rich-text-editor--article .ql-editor .pc-marketing-strip > :first-child,
.pc-rich-text-editor--article .ql-editor .pc-marketing-strip > a.pc-cta-button:first-child {
    margin-top: 0;
}

/* Font choice is a class, not an inline font-family — the picker offers exactly the families the product
   ships, so there is no way to land on a system fallback. Each family carries its own shipped weight:
   Jules Big has only the Book (400) cut, and the design asks for Fira Sans *Light* (300) in the body. */
.pc-rich-text-editor--article .ql-editor .pc-font-jules {
    font-family: 'Jules Big', 'Georgia', serif;
    font-weight: 400;
}

.pc-rich-text-editor--article .ql-editor .pc-font-fira {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 300;
}

.pc-rich-text-editor--article .ql-editor .pc-font-msmadi {
    font-family: 'Ms Madi', cursive;
    font-weight: 400;
}

/* US-232: a variable is now an editable `{token}` magic string that self-highlights green while it
   matches a known token. The same `.pc-variable-token` look is shared by the in-body highlight, the
   reference chip in the card, and the generated preview. Replaces the retired amber `.pc-variable-chip`.
   !important beats MudBlazor's global resets, consistent with the rest of this file. */
.pc-variable-token {
    background-color: #DBF1D7 !important;
    color: #1C8578 !important;
    border-radius: 4px !important;
    padding: 0 3px !important;
    font-weight: 500 !important;
}

/* Bug #1213: Quill's snow.css bakes the link-tooltip texts as English `::before` /
   `::after` pseudo-content. Override the pseudo-content with CSS variables so each
   editor instance can localize the tooltip without touching Quill itself. The fallback
   values keep the editor working in English when the host doesn't pass labels (e.g.
   AdminWebApp Blog / Know editors, which don't use the translation system — see memory
   feedback_adminwebapp_no_translations.md). The wrapper class lifts specificity above
   Quill's `.ql-snow .ql-tooltip[...]::before` rules. */
.pc-rich-text-editor .ql-snow .ql-tooltip::before {
    content: var(--pc-rte-link-visit, "Visit URL:");
}

.pc-rich-text-editor .ql-snow .ql-tooltip[data-mode=link]::before {
    content: var(--pc-rte-link-prompt, "Enter link:");
}

.pc-rich-text-editor .ql-snow .ql-tooltip a.ql-action::after {
    content: var(--pc-rte-link-edit, "Edit");
}

.pc-rich-text-editor .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: var(--pc-rte-link-save, "Save");
}

.pc-rich-text-editor .ql-snow .ql-tooltip a.ql-remove::before {
    content: var(--pc-rte-link-remove, "Remove");
}