/* ============================================================================
   portainer.io theme layer.

   Loaded after portainer-site-engine's shared base theme (theme/base.css,
   linked by the engine because site.baseTheme is true), so rules here win
   the cascade. Colours always come from the base tokens (--accent, --text,
   --muted, --border, --surface, ...) so both themes stay correct. Before
   adding a rule here, check the base for an existing component that already
   does the job; a change the whole site family needs belongs in the engine's
   base instead.

   Page-specific blocks are scoped under a page class so they can't leak into
   other pages: the class goes on that page's <main>.
   ============================================================================ */

/* Light/dark image pairs: put both <img>s side by side, one with .img-light
   and one with .img-dark, and only the one matching the site theme shows.
   Keyed on the theme attribute (not prefers-color-scheme) so it follows the
   theme toggle. Give both loading="lazy" so the hidden one isn't fetched. */
[theme='dark'] .img-light,:root:not([theme='dark']) .img-dark{display:none}

/* ============================================================================
   PORTAINER-IDP PAGE (src/products/portainer-idp.njk, <main class="idp-page">)
   ============================================================================ */
html:has(.idp-page){scroll-padding-top:84px}
.idp-page .section.alt{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.idp-page .sec-head .eyebrow{margin-bottom:16px}
.idp-page .sec-copy p a,.idp-page .sec-head p a,.idp-page .faq-item p a{color:var(--accent);font-weight:600}
.idp-page .tablewrap{overflow-x:auto;border-radius:10px}
.idp-page .tablewrap .comparison-table{margin:0;min-width:760px}
.idp-page .comparison-table th.idp,.idp-page .comparison-table td.idp{background:rgba(46,144,250,.07)}
.idp-page .comparison-table td:first-child{font-weight:600;color:var(--text);white-space:nowrap}
.idp-page .fine{font-size:13px;color:var(--muted);margin:14px 0 0;max-width:80ch}
.idp-page .parts{justify-content:flex-start;margin-top:22px}
.idp-page .parts span{font-size:14.5px;font-weight:500;padding:9px 16px}
.idp-page .cap .ci svg,.idp-page .rolechip svg{display:block}
.idp-page .grid-3.tight{gap:16px}

/* Route + role rows */
.idp-page .routes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.idp-page .infobox{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 22px;color:var(--text-semi);font-size:15px;line-height:1.6}
.idp-page .infobox b{color:var(--text)}
.idp-page .col.bespoke .ic{color:var(--muted)}
.idp-page .col .sub{font-size:14px;color:var(--muted);margin:-12px 0 14px}
.idp-page .vs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.idp-page .vs .card p{font-size:14.5px;line-height:1.6}
.idp-page .vs .card p+p{margin-top:12px}
.idp-page .vs .card .choose{padding-top:12px;margin-top:14px;border-top:1px solid var(--border)}
.idp-page .vs .card .choose b{color:var(--text)}
.idp-page .vs .card .math{font-size:13.5px;color:var(--muted)}
.idp-page .pull .btnrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.idp-page .price-box{max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--std-border);box-shadow:var(--std-glow);border-radius:20px;padding:36px 36px 32px;text-align:center}
.idp-page .price-box h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.015em;font-weight:800;margin:0 0 12px;color:var(--text)}
.idp-page .price-box p{font-size:17px;color:var(--text-semi);max-width:56ch;margin:0 auto}
.idp-page .price-box .tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--phrase);margin-bottom:12px}
@media (max-width:900px){
  .idp-page .routes,.idp-page .vs{grid-template-columns:minmax(0,1fr)}
  .idp-page .price-box{padding:28px 20px}
}

/* Screenshots: framed light/dark image pairs */
.idp-page .shot{margin:0}
.idp-page .shot-frame{border:1px solid var(--border-strong);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--card-shadow)}
/* :where() keeps this at low specificity so the .img-light/.img-dark hide rule above still wins */
:where(.idp-page) .shot-frame img{display:block;width:100%;height:auto;cursor:zoom-in}
.idp-page .shot figcaption{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5}
.idp-page .shot figcaption b{color:var(--text-semi);font-weight:600}
.idp-page .routes .cap{display:flex;flex-direction:column;min-width:0}
.idp-page .shot,.idp-page .shot-frame{min-width:0}
.idp-page .routes .cap .shot{margin-top:auto;padding-top:22px}

/* Feature rows: copy beside a screenshot */
.idp-page .feature-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center;margin-top:56px}
.idp-page .feature-copy h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.015em;font-weight:800;color:var(--text);margin:0 0 12px;line-height:1.2}
.idp-page .feature-copy p{font-size:16.5px;line-height:1.65;color:var(--text-semi);margin:0 0 16px}
.idp-page .feature-copy ul{margin:0;padding:0;list-style:none}
.idp-page .feature-copy li{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--border);font-size:15px;color:var(--text-semi);line-height:1.45}
.idp-page .feature-copy li .ic{flex:none;width:18px;color:var(--success);font-weight:700}
.idp-page .btn svg{flex:none}
.idp-page .hero-below{margin-top:34px}
.idp-page .hero .hero-visual{padding:20px;background:var(--eyebrow-bg);border:1px solid var(--eyebrow-border);border-radius:22px;box-shadow:var(--pop-shadow);transition:border-color .2s}
.idp-page .hero .hero-visual:hover{border-color:var(--accent)}
.idp-page .hero .hero-visual img{border-radius:10px;box-shadow:var(--card-shadow)}
.idp-page .hero .hero-visual img:hover{transform:none;box-shadow:var(--card-shadow)}
@media (min-width:961px){.idp-page .hero-visual{position:relative;top:28px}.idp-page .hero-below{margin-top:62px}}
.idp-page .textlink{font-size:14.5px;color:var(--text-semi);margin-top:14px}
.idp-page .textlink a{color:var(--accent);font-weight:600}
.idp-page .feature-row.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.idp-page .feature-copy code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
@media (max-width:900px){.idp-page .feature-row,.idp-page .feature-row.flip{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:40px}.idp-page .feature-row.flip .shot{order:2}}