/* portainer.industries — overrides layered on portainer.css.
   Keep portainer.css byte-identical to the copy on portainer.io so it can be
   updated wholesale; everything specific to the Industrial & IoT BU lives here.

   Teal replaces blue as the accent, because teal is the IIoT identity. The two
   themes need different teals: #13bebb reaches only 2.3:1 against white, so
   light mode uses a darker teal (5.17:1) and dark mode uses the brand teal
   (7.69:1 on the dark background). */

:root, [theme='light'] {
  --accent: #0b7a77;
  --accent-2: #0d8481;
  --on-accent: #ffffff;
  --brand: #0b7a77;
  --brand-soft: #0d8481;
  --eyebrow-bg: #e6f6f6;
  --eyebrow-border: #c6eae9;
  --eyebrow-text: #0b7a77;
  --wayfind-bg: #eefaf9;
  --wayfind-link: #0b7a77;
  --announce-bg: #0b7a77;
  --phrase: #0b7a77;
  --go: #0b7a77;
  --std-lbl: #0b7a77;
  --quote-bar: #0b7a77;
}

[theme='dark'] {
  --accent: #13bebb;
  --accent-2: #35e3df;
  --on-accent: #04100f;
  --brand: #35e3df;
  --brand-soft: #13bebb;
  --eyebrow-bg: rgba(19, 190, 187, .14);
  --eyebrow-border: rgba(19, 190, 187, .32);
  --eyebrow-text: #7fe6e3;
  --wayfind-link: #35e3df;
  --phrase: #35e3df;
  --go: #35e3df;
  --std-lbl: #35e3df;
  --quote-bar: #35e3df;
}

/* The theme hardcodes #fff on accent backgrounds, which fails against teal in
   dark mode. Route them through --on-accent instead. */
.btn-primary { color: var(--on-accent); }
.badge, .tbadge, .price-tier .badge, .opt .badge { color: var(--on-accent); }

/* Brand mark is a white PNG, so it needs inverting on the light theme. */
[theme='light'] .brand-logo { filter: brightness(0); }

/* Mobile navigation. portainer.css hides .navlinks and reveals .menu-btn below
   900px but defines no open state, so the panel behavior is supplied here. */
@media (max-width: 900px) {
  .nav .wrap { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .nav.open .navlinks {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    order: 3;
    width: 100%;
    margin: 4px 0 0;
    gap: 0;
  }
  .nav.open .navlinks > a,
  .nav.open .ddwrap > button {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 12px 2px;
    font-size: 15.5px;
  }
  .nav.open .ddpanel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    margin: 0 0 8px 10px;
    padding: 4px;
    background: transparent;
  }
  .nav.open .navspace .btn-ghost { display: inline-flex; }
  .navspace { margin-left: auto; }
}

/* Left-aligned section headings; the theme default is centered. */
.sec-head.left { text-align: left; margin-left: 0; max-width: 78ch; }

/* Availability marker for capability that is not yet generally available. */
.note.status { border-left: 3px solid var(--warning); }
.note.status b { color: var(--text); }
.status-inline {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Inline code outside .prose. */
code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Plus/minus lists inside cards. */
.card .pm, .feat .pm { margin-bottom: 9px; }
.pmhead { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }

/* Layer stack reused for the zone rail and the control plane view. */
.layer .lsub { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
.layer .ldir { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--phrase); margin-top: 8px; }

/* Partner rows. */
.prow { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
.prow .plogo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.prow .plogo img { max-height: 44px; width: auto; }
[theme='dark'] .prow .plogo img { filter: brightness(0) invert(1); opacity: .8; }
.prow .prole { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
@media (max-width: 900px) { .prow { grid-template-columns: 1fr; gap: 18px; } }

/* Wordmark fallback where no logo asset exists. */
.wordmark { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; line-height: 1.35; letter-spacing: .04em; color: var(--text-semi); text-align: center; }

/* Tap-to-open dropdowns on touch devices, which get no hover. */
.ddwrap.tapopen .ddpanel { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---- dark-theme token parity ----
   :root and [theme='dark'] have equal specificity, and this file loads after
   portainer.css, so any token declared only in the light block above would win
   in dark mode too. These two need explicit dark values; the wayfinder band was
   rendering light-on-light before they were added. */
[theme='dark'] {
  --wayfind-bg: transparent;
  --announce-bg: rgba(255, 255, 255, .05);
}

/* ---- article hero alignment ----
   The theme narrows .article-hero .wrap to 820px for a prose column, but these
   pages run full-width .wrap sections underneath, so the hero sat indented
   against everything below it. Match the standard width and cap the text
   measure instead. */
.article-hero .wrap { max-width: 1180px; }
.article-hero h1 { max-width: 20ch; }
.article-hero .lead { max-width: 64ch; }

/* ---- Resource Center: post typography ----
   Posts are Markdown, so the styling has to come from element selectors rather
   than classes. Measure matches the theme's .prose column. */
.blog-post { max-width: 760px; margin: 0 auto; }
.blog-post > *:first-child { margin-top: 0; }
.blog-post h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.02em; margin: 44px 0 14px; }
.blog-post h3 { font-size: 21px; line-height: 1.3; margin: 32px 0 10px; }
.blog-post h4 { font-size: 17px; margin: 26px 0 8px; }
.blog-post p { font-size: 17px; line-height: 1.72; color: var(--text-semi); margin: 0 0 20px; }
.blog-post ul, .blog-post ol { margin: 0 0 20px; padding-left: 22px; color: var(--text-semi); font-size: 17px; line-height: 1.72; }
.blog-post li { margin-bottom: 8px; }
.blog-post a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.blog-post img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); margin: 12px 0 26px; }
.blog-post blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--quote-bar);
  color: var(--text-semi);
  font-size: 18px;
}
.blog-post blockquote p:last-child { margin-bottom: 0; }
.blog-post pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
}
.blog-post pre code { background: none; border: 0; padding: 0; color: var(--code-text); font-size: inherit; }
.blog-post hr { border: 0; border-top: 1px solid var(--border); margin: 38px 0; }
.blog-post table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.blog-post th, .blog-post td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.blog-post th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

.post-meta { margin-top: 18px; font-size: 14px; color: var(--muted); }
.post-hero { display: block; max-width: 900px; margin: 0 auto 34px; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }
.post-foot { max-width: 760px; margin: 44px auto 0; padding-top: 26px; border-top: 1px solid var(--border); display: flex; gap: 12px; flex-wrap: wrap; }