/*
 * Theme "Classic" (src/Theme/ClassicTheme.php) of the generated project websites: section type "project" and the
 * page shell of pages with class "pj-site". Every colour, font and shape comes from the style tokens in
 * site.css_override (/wl/<id>/style.css, written by src/Theme/ThemeCss.php; the list of --pj-* variables is there).
 * Each var() keeps the original look as fallback. Never define --pj-* here: this file loads after style.css.
 * Plain CSS on purpose (no theme rebuild); loaded by block-elements/project.html.twig.
 */
body.pj-site {
    background: var(--pj-bg, #f6f8fc) !important;
    color: var(--pj-text, #334155);
    font-family: var(--pj-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
body.pj-site button, body.pj-site input, body.pj-site select, body.pj-site textarea { font-family: inherit; }

/* ---------- header (the classic whitelabel navigation) ---------- */
body.pj-site nav.main-nav {
    background: var(--pj-header-bg, color-mix(in srgb, var(--pj-card, #fff) 88%, transparent)) !important;
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--pj-header-line, var(--pj-line, #e3e8f1));
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: none;
}
body.pj-site nav.main-nav .navbar-brand img { max-height: 40px; width: auto; filter: none !important; }
body.pj-site nav.main-nav .nav-root > li > a.nav-link,
body.pj-site nav.main-nav .nav-item a.nav-link { color: var(--pj-header-ink, var(--pj-ink, #0b1220)) !important; opacity: .78; font-weight: 600; }
body.pj-site nav.main-nav .nav-root > li.active > a.nav-link,
body.pj-site nav.main-nav .nav-root > li > a.nav-link:hover { opacity: 1; background: color-mix(in srgb, var(--pj-header-ink, var(--pj-primary)) 12%, transparent) !important; color: var(--pj-header-ink, var(--pj-primary)) !important; }
body.pj-site .mobile-toggle { color: var(--pj-header-ink, var(--pj-ink, #0b1220)); }

/* ---------- footer (classic whitelabel footer) ---------- */
body.pj-site footer {
    background: var(--pj-card, #fff) !important;
    color: var(--pj-text, #334155) !important;
    border-top: 1px solid var(--pj-line, #e3e8f1);
    padding: 56px 0 40px !important;
    margin-top: 72px;
}
body.pj-site footer .shadow-top { display: none; }
body.pj-site footer h3 { color: var(--pj-ink, #0b1220) !important; font-size: 15px !important; font-weight: 700; margin-bottom: 12px; }
body.pj-site footer p, body.pj-site footer li { font-size: 14px; color: var(--pj-muted, #64748b) !important; }
body.pj-site footer a { color: var(--pj-text, #334155) !important; text-decoration: none; }
body.pj-site footer a:hover { color: var(--pj-hover-ink, var(--pj-primary-ink, var(--pj-primary))) !important; }
body.pj-site footer ul { list-style: none; padding: 0; }
body.pj-site footer ul li { margin-bottom: 6px; }

/* ---------- building blocks ---------- */
.pj { position: relative; padding: 40px 0; color: var(--pj-text, #334155); }
.pj h1, .pj h2, .pj h3, body.pj-site footer h3, .pj-token__head b, .pj-util b {
    font-family: var(--pj-font-heading, inherit); text-transform: var(--pj-h-case, none);
}
.pj h1, .pj h2, .pj h3 { color: var(--pj-ink, #0b1220); letter-spacing: var(--pj-h-track, -.02em); }
.pj h1 { font-size: calc(clamp(36px, 5.4vw, 60px) * var(--pj-h-scale, 1)); font-weight: var(--pj-h-weight, 800); line-height: 1.05; margin: 14px 0 16px; }
.pj h2 { font-size: calc(clamp(22px, 2.6vw, 30px) * var(--pj-h-scale, 1)); font-weight: var(--pj-h2-weight, 750); margin: 0 0 12px; }
.pj h3 { font-size: calc(18px * var(--pj-h-scale, 1)); font-weight: var(--pj-h3-weight, 700); margin: 0 0 12px; }
.pj-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--pj-muted, #64748b); max-width: 620px; margin: 0; }
.pj-muted { color: var(--pj-muted, #64748b); }
.pj-pill {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pj-pill, 999px);
    font-size: 13px; font-weight: 650; color: var(--pj-badge-ink, var(--pj-primary-ink, var(--pj-primary))); background: var(--pj-badge-bg, rgba(var(--pj-primary-rgb, 10, 84, 224), .1));
}
.pj-card {
    background: var(--pj-card, #fff); border: 1px solid var(--pj-card-line, var(--pj-line, #e3e8f1)); border-radius: var(--pj-radius, 18px);
    box-shadow: var(--pj-shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .14)); padding: 28px;
}
.pj-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pj-card__head h2 { margin: 0; font-size: 20px; }
.pj-section-head { margin-bottom: 22px; }

.pj-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: var(--pj-radius-btn, 12px);
    font-weight: 700; font-size: 15px; text-decoration: none !important; border: 1px solid transparent; cursor: pointer;
    background: var(--pj-btn-bg, var(--pj-primary)); color: var(--pj-btn-ink, var(--pj-on-primary, #fff)) !important;
    box-shadow: 0 10px 24px -10px rgba(var(--pj-primary-rgb, 10, 84, 224), .7);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pj-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(var(--pj-primary-rgb, 10, 84, 224), .8); }
.pj-btn--ghost { background: var(--pj-card, #fff); color: var(--pj-ink, #0b1220) !important; border-color: var(--pj-line, #e3e8f1); box-shadow: none; }
.pj-btn--ghost:hover { border-color: var(--pj-hover-line, var(--pj-primary)); color: var(--pj-hover-ink, var(--pj-primary-ink, var(--pj-primary))) !important; box-shadow: none; }
.pj-btn--sm { padding: 8px 12px; font-size: 13px; border-radius: var(--pj-radius-btn, 10px); }
.pj-icon-btn {
    border: 1px solid var(--pj-line, #e3e8f1); background: transparent; color: var(--pj-muted, #64748b); width: 32px; height: 32px;
    border-radius: calc(9px * var(--pj-rk, 1)); display: inline-grid; place-items: center; cursor: pointer;
}
.pj-icon-btn:hover, .pj-icon-btn.is-done { color: var(--pj-primary-ink, var(--pj-primary)); border-color: var(--pj-primary); }

/* ---------- hero ---------- */
.pj-hero { padding: 72px 0 48px; overflow: hidden; }
.pj-hero__glow {
    position: absolute; inset: var(--pj-backdrop-inset, -30% -10% auto auto); width: var(--pj-backdrop-w, 70%); height: var(--pj-backdrop-h, 140%);
    pointer-events: none; z-index: 0;
    background: var(--pj-backdrop, radial-gradient(closest-side, rgba(var(--pj-primary-rgb, 10, 84, 224), .18), transparent 70%),
                radial-gradient(closest-side at 30% 70%, color-mix(in srgb, var(--pj-accent, #14b8a6) 22%, transparent), transparent 70%));
    background-size: var(--pj-backdrop-size, auto);
    -webkit-mask-image: var(--pj-backdrop-mask, none); mask-image: var(--pj-backdrop-mask, none);
}
.pj-hero .container { position: relative; z-index: 1; }
.pj-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pj-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 22px; }

.pj-socials { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pj-socials a {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: calc(10px * var(--pj-rk, 1)); font-size: 14px; font-weight: 600;
    color: var(--pj-text, #334155); background: var(--pj-card, #fff); border: 1px solid var(--pj-line, #e3e8f1); text-decoration: none;
}
.pj-socials a:hover { color: var(--pj-hover-ink, var(--pj-primary-ink, var(--pj-primary))); border-color: var(--pj-hover-line, var(--pj-primary)); }

/* ---------- token card ---------- */
.pj-token {
    background: var(--pj-card, #fff); border: 1px solid var(--pj-card-line, var(--pj-line, #e3e8f1)); border-radius: var(--pj-radius, 18px);
    box-shadow: var(--pj-shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .14)); padding: 24px; display: grid; gap: 18px;
}
.pj-token__head { display: flex; align-items: center; gap: 14px; }
.pj-token__head img { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; background: var(--pj-bg-soft, #eef2f9); box-shadow: 0 0 0 3px var(--pj-badge-bg, transparent); }
.pj-token__head b { display: block; font-size: 22px; color: var(--pj-ink, #0b1220); }
.pj-token__head span { color: var(--pj-muted, #64748b); font-size: 14px; }
.pj-token__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.pj-token__stats div { background: var(--pj-bg-soft, #eef2f9); border-radius: var(--pj-radius-sm, 12px); padding: 10px 12px; }
.pj-token__stats dt { font-size: 12px; font-weight: 600; color: var(--pj-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; }
.pj-token__stats dd { margin: 2px 0 0; font-weight: 750; color: var(--pj-ink, #0b1220); font-variant-numeric: tabular-nums; }
.pj-token__stats dd.is-up { color: #16a34a; }
.pj-token__stats dd.is-down { color: #dc2626; }
.pj-token__addr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--pj-radius-sm, 12px); border: 1px dashed var(--pj-line, #e3e8f1); }
.pj-token__addr small { color: var(--pj-muted, #64748b); font-weight: 600; }
.pj-token__addr code { flex: 1; color: var(--pj-ink, #0b1220); font-size: 14px; background: none; }
.pj-token__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- chart ---------- */
.pj-chart { padding-top: 8px; }
.pj-chart__frame { position: relative; min-height: 120px; border-radius: var(--pj-radius-sm, 12px); overflow: hidden; }
.pj-chart__frame iframe { width: 100%; height: 520px; border: 0; display: block; }

/* ---------- utilities ---------- */
.pj-utils__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pj-util {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--pj-radius, 18px);
    background: var(--pj-card, #fff); border: 1px solid var(--pj-card-line, var(--pj-line, #e3e8f1)); text-decoration: none; color: var(--pj-text, #334155);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pj-util:hover { transform: translateY(-2px); border-color: var(--pj-hover-line, rgba(var(--pj-primary-rgb, 10, 84, 224), .5)); box-shadow: var(--pj-shadow, 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .14)); }
.pj-util b { color: var(--pj-ink, #0b1220); font-size: 17px; }
.pj-util span:not(.pj-util__icon) { font-size: 14px; color: var(--pj-muted, #64748b); line-height: 1.5; }
.pj-util__icon {
    width: 44px; height: 44px; border-radius: calc(12px * var(--pj-rk, 1)); display: grid; place-items: center; font-size: 18px;
    color: var(--pj-icon-ink, var(--pj-primary-ink, var(--pj-primary))); background: var(--pj-icon-bg, rgba(var(--pj-primary-rgb, 10, 84, 224), .1)); margin-bottom: 6px;
}
.pj-util__go { position: absolute; top: 24px; right: 22px; color: var(--pj-muted, #64748b); }
.pj-util:hover .pj-util__go { color: var(--pj-hover-ink, var(--pj-primary-ink, var(--pj-primary))); }

/* ---------- about teaser + about page ---------- */
.pj-teaser__card { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pj-teaser__card p { margin: 0; color: var(--pj-muted, #64748b); line-height: 1.6; max-width: 760px; }
.pj-page-head { padding: 64px 0 8px; }
.pj-page-head--util { padding-bottom: 0; text-align: center; }
.pj-page-head--util .pj-lead { margin: 0 auto; }
.pj-about__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.pj-about__side { display: grid; gap: 24px; }
.pj-prose p { line-height: 1.7; margin: 0 0 14px; }
.pj-prose h3 { margin-top: 24px; }
.pj-company dl { margin: 0; display: grid; gap: 10px; }
.pj-company dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--pj-muted, #64748b); }
.pj-company dd { margin: 0; color: var(--pj-ink, #0b1220); }

/* the utility widgets below a page head: a little air */
body.pj-site .ss-v2pools-section, body.pj-site .swap-widget, body.pj-site .migration-widget, body.pj-site .ss-buy-section { padding-top: 16px; }
body.pj-site .ss-v2pools__head h1, body.pj-site .sbc-hero h1 { display: none; }

@media (max-width: 991px) {
    .pj-hero { padding-top: 40px; }
    .pj-hero__grid, .pj-about__grid { grid-template-columns: 1fr; gap: 28px; }
    .pj-teaser__card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575px) {
    .pj-card, .pj-token { padding: 18px; }
    .pj-token__stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .pj-chart__frame iframe { height: 420px; }
}

/* create-pool page: the pool creator brings its own hero */
body.pj-site:has(.ss-creator) .pj-page-head--util { display: none; }

/* the classic whitelabel top strip follows the brand colour */
body.pj-site .top-bar { background: var(--pj-primary) !important; }

/* page width token (narrow / wide; "normal" keeps Bootstrap's widths) */
@media (min-width: 1200px) { body.pj-site .container { max-width: var(--pj-container-xl, 1140px); } }
@media (min-width: 1400px) { body.pj-site .container { max-width: var(--pj-container-xxl, 1320px); } }

/* dark backgrounds: the classic whitelabel bits that are not widgets */
body.pj-site .text-muted { color: var(--pj-muted, #64748b) !important; }

/* second colour (token "Use of the second colour"): gradient lines (bold) and a few accents in the shared widgets.
   "html" raises these just above the generated project-widgets.css; every var falls back to the widget's own value. */
body.pj-site nav.main-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pj-rule, transparent); pointer-events: none; }
body.pj-site footer { position: relative; }
body.pj-site footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--pj-rule, transparent); }
html body.pj-site .ss0x__sec--get { border-color: var(--pj-get-line, rgba(var(--pj-primary-rgb), .18)); background: var(--pj-get-bg, transparent); }
html body.pj-site .ss0x__flip {
    background: var(--pj-flip-bg, var(--pj-card, #fff)); border-color: var(--pj-flip-bg, color-mix(in srgb, #dee2e6, var(--pj-line) var(--pj-wmix, 0%)));
    color: var(--pj-flip-ink, color-mix(in srgb, #000, var(--pj-ink) var(--pj-wmix, 0%)));
}
html body.pj-site .ss0x__flip:hover { color: var(--pj-flip-ink, var(--pj-primary-ink, var(--pj-primary))); }
html body.pj-site .ss0x__cta.is-primary { background: var(--pj-btn-bg, var(--pj-primary)); color: var(--pj-btn-ink, var(--pj-on-primary, #fff)); }
html body.pj-site .ss-account__connect {
    background: var(--pj-btn-bg, linear-gradient(135deg, var(--pj-primary), color-mix(in srgb, var(--pj-primary) 82%, var(--pj-card, #fff))));
    color: var(--pj-btn-ink, var(--pj-on-primary, #fff));
}