/* 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 {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .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: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    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: 0 4px;
    background: transparent;
    transition: max-height .2s, opacity .2s, visibility 0s .2s;
  }
  .nav.open .ddwrap.tapopen .ddpanel {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    padding: 4px;
    transition: max-height .2s, opacity .2s, visibility 0s;
  }
  .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: none; }
.sec-head.left.measured { max-width: 78ch; }
.gov4.full { max-width: none; }
.note.full { max-width: none; margin-left: 0; margin-right: 0; }

/* 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 .plogo img.no-filter,
[theme='dark'] .prow .plogo img.no-filter { filter: none; opacity: 1; }
.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; }

/* ---- Resource Center filter chips ---- */
.rfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 34px; }
.rchip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-semi);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
}
.rchip:hover { border-color: var(--accent); color: var(--text); }
.rchip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.article-kicker a { color: inherit; text-decoration: none; }
.article-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- HubSpot form embeds ----
   The v4 embed renders into the page rather than an iframe, so fields inherit
   whatever the surrounding CSS gives them, and HubSpot's own styling assumes a
   light background. Rather than fight that per-field in both themes, the form
   always sits on an explicitly light panel: it renders on the background
   HubSpot expects, in either theme, and reads as a deliberate form card.
   `color-scheme: light` keeps browser-drawn UI (autofill, selects, date
   pickers) light too, which the panel alone would not fix. */

.formbox {
  color-scheme: light;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 34px;
  max-width: 720px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}
.formbox-wide { max-width: 860px; }

.formbox h3 { color: #111827; margin: 0 0 6px; font-size: 20px; }
.formbox .formbox-sub { color: #4b5563; font-size: 14.5px; margin: 0 0 22px; }

/* HubSpot's own markup. Selectors kept broad because the embed's class names
   vary by form version; anything that does not match is simply inert. */
.formbox form,
.formbox .hs-form { margin: 0; }
.formbox label,
.formbox .hs-form-field > label,
.formbox legend {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.formbox .hs-form-required { color: #b42318; }
.formbox .hs-field-desc { color: #6b7280; font-size: 13px; margin: 4px 0 8px; }

.formbox input[type="text"],
.formbox input[type="email"],
.formbox input[type="tel"],
.formbox input[type="number"],
.formbox input[type="url"],
.formbox select,
.formbox textarea,
.formbox .hs-input {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.formbox input[type="checkbox"],
.formbox input[type="radio"] { width: auto; accent-color: #0b7a77; }
.formbox .hs-input:focus,
.formbox input:focus,
.formbox select:focus,
.formbox textarea:focus {
  outline: none;
  border-color: #0b7a77;
  box-shadow: 0 0 0 3px rgba(11, 122, 119, .18);
}
.formbox .hs-form-field { margin-bottom: 16px; }
.formbox .form-columns-2 .hs-form-field,
.formbox .form-columns-3 .hs-form-field { padding-right: 12px; }
.formbox .inputs-list { list-style: none; margin: 0; padding: 0; }
.formbox .inputs-list label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }

.formbox .hs-button,
.formbox input[type="submit"] {
  background: #0b7a77;
  color: #ffffff;
  border: 1px solid #0b7a77;
  border-radius: 8px;
  padding: 12px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}
.formbox .hs-button:hover,
.formbox input[type="submit"]:hover { background: #0d8481; border-color: #0d8481; }

.formbox .hs-error-msg,
.formbox .hs-error-msgs label { color: #b42318; font-weight: 400; font-size: 13px; }
.formbox .submitted-message,
.formbox .hs-richtext { color: #374151; font-size: 15px; }
.formbox a { color: #0b7a77; }

/* Layout for a form beside explanatory copy. */
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .formrow { grid-template-columns: 1fr; gap: 28px; } .formbox { padding: 24px; } }

.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: 1fr; } }

/* Partner directory grid: uniform teaser cards grouped by partner type. */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); color: inherit; transition: .18s; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--pop-shadow); border-color: var(--std-border); }
.pcard-logo { background: #ffffff; min-height: 88px; display: grid; place-items: center; padding: 18px; }
.pcard-logo img { max-height: 40px; max-width: 80%; width: auto; }
.pcard-logo .wordmark { font-size: 13px; padding: 0 6px; }
.pcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.pcard-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--phrase); margin: 0 0 8px; }
.pcard h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.pcard p { font-size: 13.5px; color: var(--text-semi); line-height: 1.5; margin: 0 0 14px; }
.pcard-go { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--go); }

.fbrand { display: flex; flex-direction: column; align-items: flex-start; }
.fsocial-row { margin-top: auto; padding-top: 14px; display: flex; gap: 14px; align-items: center; }
.fsocial { color: var(--muted); display: inline-flex; }
.fsocial:hover { color: var(--accent); }

.ptype-head { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
@media (max-width: 900px) { .pgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pgrid { grid-template-columns: 1fr; } }

.fdisclosure { margin-top: 14px; font-size: 11px; line-height: 1.5; color: var(--muted); opacity: .65; max-width: 90ch; }