/* About Us page (Views/Home/About.cshtml) — Oct 2026 redesign.
   Design only: the body is stored HTML (SiteContents id 1) rendered through .cx-about-prose, so every rule here
   styles whatever h1/h2/h3/p/ul the editor stored without touching the markup. Scoped under .cx-root .cx-about
   and the .cx-about- prefix; tokens come from cannalnx-ui.css (--cx-*) and match landing.css / network.css.
   A few !important only beat the site-wide p / a / li rules in CannaLnx.css. */

.cx-root .cx-about { --cx-about-ice: #EFF6FA; --cx-about-sky: #A4C8E1; --cx-about-measure: 820px; }

/* ---- Hero: full-width soft-blue band, title left, quiet geometric accents right ---- */
.cx-root .cx-about-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--cx-about-ice);
    border-bottom: 1px solid var(--cx-line);
    padding: 52px 0 56px;
}
.cx-root .cx-about-hero::before, .cx-root .cx-about-hero::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    border: 64px solid rgba(164, 200, 225, .22);
}
.cx-root .cx-about-hero::before { width: 560px; height: 560px; right: -180px; top: -300px; }
.cx-root .cx-about-hero::after  { width: 360px; height: 360px; right: 160px; bottom: -260px; border-width: 40px; }
.cx-root .cx-about-hero-inner { max-width: 1180px; margin: 0 auto; padding-inline: 16px; }
.cx-root .cx-about-title {
    font-family: var(--cx-font-display); color: var(--cx-brand); font-weight: 600; letter-spacing: -.02em;
    font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; margin: 0; max-width: 16ch; text-wrap: balance;
}

/* ---- Reading column ---- */
.cx-root .cx-about-body { background: #fff; padding: 36px 0 56px; }
.cx-root .cx-about-col { max-width: var(--cx-about-measure); margin: 0 auto; padding-inline: 16px; }

/* ---- Stored HTML: typography (replaces the inline <style> the view used to carry) ---- */
.cx-root .cx-about-prose { font-size: 17px; line-height: 1.65; color: var(--cx-fg); font-family: var(--cx-font-body); }
.cx-root .cx-about-prose p { margin: 0 0 1.2em; font-size: inherit !important; line-height: inherit !important; font-family: inherit !important; color: inherit; }
.cx-root .cx-about-prose p:empty { display: none; }
.cx-root .cx-about-prose > p:first-child { font-size: 20px !important; line-height: 1.55 !important; color: var(--cx-muted); margin-bottom: 1.4em; }   /* opening paragraph reads as the lead */
.cx-root .cx-about-prose p:last-child { margin-bottom: .4em; }

/* Section openers: each stored h1/h2 becomes a section heading with a thin rule above, so the long page reads as
   the mockup's stacked sections without splitting the HTML. */
.cx-root .cx-about-prose h1, .cx-root .cx-about-prose h2 {
    font-family: var(--cx-font-display); color: var(--cx-brand); font-weight: 600; letter-spacing: -.015em;
    font-size: 28px; line-height: 1.2; margin: 2.2em 0 .55em; padding-top: 1.4em; border-top: 1px solid var(--cx-line);
    text-align: left !important;
}
.cx-root .cx-about-prose h1 { font-size: 30px; }
.cx-root .cx-about-prose h1:first-child, .cx-root .cx-about-prose h2:first-child,
.cx-root .cx-about-prose hr + h1, .cx-root .cx-about-prose hr + h2,
.cx-root .cx-about-prose hr + br + h1, .cx-root .cx-about-prose hr + br + h2 { border-top: 0; padding-top: 0; margin-top: .3em; }
.cx-root .cx-about-prose h3, .cx-root .cx-about-prose h4 {
    font-family: var(--cx-font-display); color: var(--cx-brand); font-weight: 600; font-size: 21px; line-height: 1.3;
    margin: 1.6em 0 .5em; text-align: left !important;
}
.cx-root .cx-about-prose hr { border: 0; border-top: 1px solid var(--cx-line); margin: 2em 0 .2em; }

/* Lists */
.cx-root .cx-about-prose ul, .cx-root .cx-about-prose ol { margin: 0 0 1.2em; padding-left: 1.5em; }
.cx-root .cx-about-prose ul { list-style: none; padding-left: 0; }
.cx-root .cx-about-prose ul li { position: relative; padding-left: 26px; }
.cx-root .cx-about-prose ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--cx-brand-dark); }
.cx-root .cx-about-prose ul li, .cx-root .cx-about-prose ol li { font-size: inherit !important; line-height: 1.55; margin-bottom: .55em; font-family: inherit !important; }
.cx-root .cx-about-prose ul li br, .cx-root .cx-about-prose ol li br { display: none; }

/* Editor leftovers: runaway <br>s, inline fonts, centred blocks */
.cx-root .cx-about-prose br + br + br { display: none; }
.cx-root .cx-about-prose p + br, .cx-root .cx-about-prose ul + br, .cx-root .cx-about-prose ol + br,
.cx-root .cx-about-prose h1 + br, .cx-root .cx-about-prose h2 + br, .cx-root .cx-about-prose h3 + br,
.cx-root .cx-about-prose div + br, .cx-root .cx-about-prose hr + br { display: none; }
.cx-root .cx-about-prose li span, .cx-root .cx-about-prose li font, .cx-root .cx-about-prose p span,
.cx-root .cx-about-prose p font { font-size: inherit !important; font-family: inherit !important; }
.cx-root .cx-about-prose [style*="text-align"], .cx-root .cx-about-prose .text-center, .cx-root .cx-about-prose [align="center"] { text-align: left !important; }
.cx-root .cx-about-prose img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 1.2em auto; }
.cx-root .cx-about-prose strong, .cx-root .cx-about-prose b { font-weight: 600; color: var(--cx-brand); }
.cx-root .cx-about-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cx-root .cx-about-prose td, .cx-root .cx-about-prose th { border-bottom: 1px solid var(--cx-line); padding: 8px 6px; text-align: left; }

/* Links and buttons that live inside the stored HTML */
.cx-root .cx-about-prose a, .cx-root .cx-about-prose a:visited { color: var(--cx-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cx-root .cx-about-prose a:hover { color: var(--cx-brand); }
.cx-root .cx-about-prose a:focus-visible, .cx-root .cx-about a:focus-visible { outline: 3px solid var(--cx-brand-dark); outline-offset: 2px; }
.cx-root .cx-about-prose .cannaLnxButton, .cx-root .cx-about-prose .btn, .cx-root .cx-about-prose a.cannaLnxButton:visited {
    background: var(--cx-brand); color: #fff !important; border: 0; border-radius: 6px; padding: 11px 22px; font-weight: 600;
    font-size: 15px; text-decoration: none; display: inline-block; line-height: 1.3; min-height: 44px;
}
.cx-root .cx-about-prose .cannaLnxButton:hover, .cx-root .cx-about-prose .btn:hover { background: var(--cx-brand-dark); color: #fff !important; }

/* Legacy "read more" modal (kept: stored content may still call ShowMore()) */
.cx-root.cx-about-modal-body .cx-about-prose { font-size: 16px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .cx-root .cx-about-hero { padding: 40px 0 44px; }
    .cx-root .cx-about-hero::after { display: none; }
}
@media (max-width: 480px) {
    .cx-root .cx-about-hero { padding: 32px 0 36px; }
    .cx-root .cx-about-hero::before { width: 380px; height: 380px; right: -200px; top: -220px; border-width: 44px; }
    .cx-root .cx-about-body { padding: 26px 0 44px; }
    .cx-root .cx-about-prose { font-size: 16px; }
    .cx-root .cx-about-prose > p:first-child { font-size: 18px !important; }
    .cx-root .cx-about-prose h1, .cx-root .cx-about-prose h2 { font-size: 25px; margin-top: 1.8em; padding-top: 1.1em; }
    .cx-root .cx-about-prose h3, .cx-root .cx-about-prose h4 { font-size: 19px; }
}