/* ============================================================================================
   GLOBAL — Knowledge-Centre content-block styles.
   Shipped with the FalconTwo.Web.Content RCL (served at _content/FalconTwo.Web.Content/kc-blocks.css), and
   loaded by BOTH the live website (Hotline.Website) and the F2 editor preview (FalconTwo.Portal/Web.Frontend).

   THIS FILE HOLDS ONLY GENERIC / CROSS-CUTTING CSS — rules that are either:
     (a) shared structural conventions used by many/most content blocks (width, spacing, divider, reveal
         animation, the readable-body-text rules shared by Markup + Markup&Image, the F2 preview's CTA-button
         fallback), or
     (b) rules that CANNOT be scoped to a single component because the same class names/markup are genuinely
         duplicated or reused across more than one component/project (each such rule below says exactly where).

   Do NOT add a new block's own visual styling here. Every content block that owns a single, dedicated
   component now has its own `{ComponentName}.razor.css` file (Blazor CSS isolation) sitting next to its
   .razor file in Web/FalconTwo.Web.Content/Components/ContentComponents/ — e.g. HeroContent.razor.css,
   CallToActionContent.razor.css, ImageGridContent.razor.css, StatisticsContent.razor.css, etc. That RCL-level
   scoped-CSS bundle is auto-imported into both host apps' own generated styles.css (confirmed via
   Hotline.Website.styles.css / FalconTwo.Portal.styles.css @import), so it reaches the live site AND the F2
   preview exactly like this file does — there is no extra wiring needed. Use `::deep` for any selector that
   reaches into a child component's own rendered markup (MudText/MudImage/MudIcon/HotLink/MudGrid/MudItem, or
   any other component invoked from that file) — see the existing files for the pattern.

   When adding a NEW content block: give it its own {ComponentName}.razor.css for its visual identity, and
   only touch this file for something that is genuinely shared with other blocks or reused outside this RCL. */

:root {
    --kc-navy: #1b2a4a;
    --kc-panel: #f6f4f0;
    --kc-muted: #6b7280;
    --kc-radius: 14px;
    --kc-accent: var(--hot-orange-d1, #ff8e1d);
}

/* Block width (the common "Width" setting on every building block; Page Default resolves to one of these
   before render). Max-width only — a block can never exceed its parent container; narrower blocks centre.
   The page hosts are full-width, so Wide == the site's normal content width (the header nav's ExtraLarge
   container: 1440px − 2×24px gutters ≈ 1392px), keeping blocks + chrome aligned to the header/logo edges.
   Content is the mid size for richer content; Full Width lets a block span the whole available page.
   Also used to keep page chrome (breadcrumb/H1) at Wide. */
.block-width-narrow { max-width: 860px; margin-left: auto; margin-right: auto; }
.block-width-content { max-width: 1080px; margin-left: auto; margin-right: auto; }
.block-width-wide { max-width: 1392px; margin-left: auto; margin-right: auto; }
.block-width-full { max-width: none; }


/* Divider (the "Divider = Line" block setting): a subtle separator rendered after a block. It sits inside the
   block's width wrapper, so it spans the block's own width. */
.block-divider { border: 0; border-top: 1px solid rgba(27, 42, 74, .12); margin: 2rem 0 0; }

/* Block spacing (the "Spacing" block setting): vertical gap BEFORE each block. Scoped to .web-page (the content
   page body) so shared homepage/other DynamicContent placements are untouched. Applied as padding-top on the
   block's width wrapper — padding doesn't margin-collapse, so the gap is deterministic — and the legacy per-type
   block margins (e.g. .hero-block { margin: 1.75rem 0 }) are zeroed inside the wrapper so they don't stack on top.
   Default = 64px (the baseline the MD asked for). */
.web-page .dynamic-container { padding-top: 0; }
.web-page .dynamic-container.block-spacing-none { padding-top: 0; }
.web-page .dynamic-container.block-spacing-small { padding-top: 32px; }
.web-page .dynamic-container.block-spacing-default { padding-top: 64px; }
.web-page .dynamic-container.block-spacing-large { padding-top: 96px; }
.web-page .dynamic-container > :first-child { margin-top: 0; }
.web-page .dynamic-container > :last-child { margin-bottom: 0; }
/* The FIRST block on a page has nothing above it but the breadcrumb/chrome, so it starts flush (no leading gap) —
   matching the category/product pages where the content sits right under the breadcrumb. Block spacing only ever
   separates one block from the NEXT. Overrides the per-block spacing above via higher specificity. */
.web-page .kc-reveal:first-child .dynamic-container { padding-top: 0; }

/* Content-page block reveal: hidden from first paint (no flash), then fades + zooms IN once as it scrolls into
   view (kc-reveal.js flips [data-kc-revealed]). 0.6s; a small per-block transition-delay staggers the cascade. */
.kc-reveal { opacity: 0; transform: scale(.97); transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.kc-reveal[data-kc-revealed] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kc-reveal { opacity: 1; transform: none; transition: none; } }

/* Default vertical rhythm shared by most "classic" blocks (predates the newer per-block Spacing setting above,
   which now controls the gap ABOVE a block — this is the block's own top+bottom breathing room). Deliberately
   generic/shared across many unrelated block types rather than duplicated into every block's own CSS file. */
.hero-block, .cta-block, .quote-block, .statistics-block,
.markup-image-block, .video-block, .download-block, .image-grid-content,
.image-gallery-block, .accordion-block {
    margin: 1.75rem 0;
}

/* ---- Readable body typography for the two TEXT-content blocks only: the standalone Markup block (its
   .markup-content is a direct child of .dynamic-container) and Markup + Image (its .markup-content is nested under
   .markup-image-block). Both funnel author copy through .markup-content — which is ALSO reused by
   Hero/CTA/Video/Download/Accordion, so those are deliberately NOT matched here and keep their bespoke type.
   Ships in this RCL stylesheet, so it renders identically on the website and both F2 previews (all wrap the block
   in .dynamic-container). Spec: 16px paragraphs; heading line-height 120%; paragraph line-height 150%; 24px below
   a heading (heading -> its paragraph); 48px above a heading (paragraph -> next heading, via margin collapse).
   GENERIC: shared by more than one component, so it stays here rather than in either one's .razor.css. */
.dynamic-container > .markup-content p,
.markup-image-block .markup-content p {
    font-size: 16px;
    line-height: 1.5;
}
.dynamic-container > .markup-content h1, .dynamic-container > .markup-content h2,
.dynamic-container > .markup-content h3, .dynamic-container > .markup-content h4,
.dynamic-container > .markup-content h5, .dynamic-container > .markup-content h6,
.markup-image-block .markup-content h1, .markup-image-block .markup-content h2,
.markup-image-block .markup-content h3, .markup-image-block .markup-content h4,
.markup-image-block .markup-content h5, .markup-image-block .markup-content h6 {
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 24px;
}
/* Heading scale for body content: a clean, monotonic ladder that keeps every level AT OR ABOVE the 16px body
   (the site's default markup headings drop below body at h4-h6, which reads as broken next to 16px copy). h2 keeps
   its existing 24px; only h4-h6 are effectively bumped. Bold weight is inherited from the site's heading styles. */
.dynamic-container > .markup-content h1, .markup-image-block .markup-content h1 { font-size: 32px; }
.dynamic-container > .markup-content h2, .markup-image-block .markup-content h2 { font-size: 24px; }
.dynamic-container > .markup-content h3, .markup-image-block .markup-content h3 { font-size: 20px; }
.dynamic-container > .markup-content h4, .markup-image-block .markup-content h4 { font-size: 18px; }
.dynamic-container > .markup-content h5, .markup-image-block .markup-content h5 { font-size: 16px; }
.dynamic-container > .markup-content h6, .markup-image-block .markup-content h6 { font-size: 16px; }
/* The block's own Spacing setting owns the gap ABOVE the block, so the first element mustn't add a leading gap. */
.dynamic-container > .markup-content > :first-child,
.markup-image-block .markup-content > :first-child {
    margin-top: 0;
}

/* F2 editor preview only: the site's button styles (.lnk/.btn/.primary-btn/.xl-btn, from the website's own
   compiled.css) aren't loaded inside F2, so CTA buttons on the Preview tab would render as bare links. Scope a
   faithful copy to .web-content-editor — a container that exists only in the F2 editor — so the preview matches
   the live site WITHOUT overriding the real rules on the website itself. GENERIC: covers every block's CTA (Call
   To Action, Section Header, Statistics, Image Grid, etc.), so it stays here rather than duplicated per block.
   Brand colours fall back to hex in case the --hot-* vars aren't in scope. */
.web-content-editor .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-family: "Montserrat", "Roboto", sans-serif;
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
}
.web-content-editor .btn.primary-btn { background-color: var(--hot-blue, #1368aa); color: #fff; }
.web-content-editor .btn.secondary-btn { background-color: var(--hot-orange, #feb139); color: #000; }
.web-content-editor .btn.white-btn { background-color: #fff; color: #000; }
.web-content-editor .btn.lg-btn, .web-content-editor .btn.xl-btn { height: 48px; font-size: 16px; padding: 0 24px; font-weight: 700; }

/* Content-page header row: breadcrumb (left) + company social links (right). NOT part of this RCL — rendered by
   KnowledgeCentreBreadcrumb.razor / ContentSocialLinks.razor in the Hotline.Client.Content project (the main site
   app), reused by four different page hosts. Kept here rather than split into that other project's own scoped
   CSS, since these are page CHROME (not a content-engine block) and this file is the shared home for
   Knowledge-Centre visual styling regardless of which project renders the chrome. */
.kc-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.content-socials { display: flex; gap: .5rem; flex: 0 0 auto; }
.content-social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kc-navy); color: #fff; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.content-social:hover { background: #32446b; color: #fff; text-decoration: none; }
.content-social .mud-icon-root { width: 17px; height: 17px; font-size: 17px; }

/* ---- Knowledge Centre navigation: breadcrumbs, search banner, results refine bar ---- */

/* GENUINELY SHARED, NOT SPLITTABLE: the base search form/input/select/button/note styling. PageSearchContent
   (this RCL) uses these classes, but so does the results-page refine bar in
   Hotline.Client.Content/Pages/KnowledgeCentreSearch.razor — a plain <form class="kc-search-refine"> hand-rolled
   in a completely different project, outside any shared component. CSS isolation can't reach that markup, so
   these base rules must stay global. (PageSearchContent's own block-specific overrides — the clean centred
   search box, heading/subtext sizing — live in PageSearchContent.razor.css.) */
.kc-search-form, .kc-search-refine { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 40rem; align-items: center; }
.kc-search-refine { max-width: none; margin: .5rem 0 1.5rem; }
.kc-search-input { flex: 1 1 14rem; min-width: 0; padding: .7rem 1rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.kc-search-select { padding: .7rem 1rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.kc-search-btn { padding: .7rem 1.4rem; border: none; border-radius: 10px; font-weight: 700; background: var(--kc-accent); color: #fff; cursor: pointer; }
.kc-search-btn:disabled { opacity: .6; cursor: default; }
.kc-search-note { font-size: .78rem; color: var(--kc-muted); margin-top: .5rem; }

/* GENUINELY SHARED, NOT SPLITTABLE: reused by ProductGrid.razor and ProductListCarousel.razor (both in this RCL)
   AND by Hotline.Client.Core/Components/Product/CategoryCarouselMultiMini.razor (a different project) — three
   separate components, no single owner, so this can't move into any one of their .razor.css files without
   duplicating it. Quote avatar sizing is fixed via .kc-avatar in QuoteContent.razor.css; this rule is unrelated
   to Quote — it bounds product images inside the category-carousel "multi mini" tile (no crop). */
.category-carousel-multi-mini .content-center img { max-height: 200px; width: auto; max-width: 100%; object-fit: contain; }