/**
 * Developer Hub layer: navigation icons, knowledge base, newsletter CTA,
 * quickstart banner and books block. Loaded after theme.css.
 *
 * Ported from the layout proposal (dremio-dev-mock.netlify.app custom.css).
 * The UI/UX pass restyles this file; keep new-layout styles here rather than
 * growing theme.css.
 */

/* A text colour set in the editor (core's highlight format, a <mark>) is
   only a colour: no Bootstrap mark padding */
mark.has-inline-color {
  padding: 0;
}

/* 6-item grid support for site-header dropdown */
.site-header .dropdown-menu .dropdown-item:nth-child(6) {
  grid-column: 2;
  grid-row: 3;
}

/* Custom navigation and menu icons */
.site-header .dropdown-menu .dropdown-item.icon-newsletter::before,
.mobile-menu-dark .accordion .menu-link-item.icon-newsletter::before {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3e%3cpath%20d='m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207'/%3e%3c/svg%3e");
}

.site-header .dropdown-menu .dropdown-item.icon-youtube::before,
.mobile-menu-dark .accordion .menu-link-item.icon-youtube::before {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='white'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z'/%3e%3c/svg%3e");
}

.site-header .dropdown-menu .dropdown-item.icon-events::before,
.mobile-menu-dark .accordion .menu-link-item.icon-events::before {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'%20ry='2'/%3e%3cline%20x1='16'%20x2='16'%20y1='2'%20y2='6'/%3e%3cline%20x1='8'%20x2='8'%20y1='2'%20y2='6'/%3e%3cline%20x1='3'%20x2='21'%20y1='10'%20y2='10'/%3e%3c/svg%3e");
}

.site-header .dropdown-menu .dropdown-item.icon-reddit::before,
.mobile-menu-dark .accordion .menu-link-item.icon-reddit::before {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='white'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%200C5.373%200%200%205.373%200%2012c0%203.314%201.343%206.314%203.515%208.485l-2.03%202.03A.75.75%200%20002%2024h10c6.627%200%2012-5.373%2012-12S18.627%200%2012%200zm5.01%204.744c.688%200%201.25.561%201.25%201.249a1.25%201.25%200%2001-2.498.056l-2.597-.547-.8%203.747c1.824.07%203.48.632%204.674%201.488.308-.309.73-.491%201.207-.491.968%200%201.754.786%201.754%201.754%200%20.716-.435%201.333-1.01%201.614a3.111%203.111%200%2001.042.52c0%202.694-3.13%204.87-7.004%204.87-3.874%200-7.004-2.176-7.004-4.87%200-.183.015-.366.043-.534A1.748%201.748%200%20014.028%2012c0-.968.786-1.754%201.754-1.754.463%200%20.898.196%201.207.49%201.207-.883%202.878-1.43%204.744-1.487l.885-4.182a.342.342%200%2001.14-.197.35.35%200%2001.238-.042l2.906.617a1.214%201.214%200%20011.108-.702zM9.25%2012C8.561%2012%208%2012.562%208%2013.25c0%20.687.561%201.248%201.25%201.248.687%200%201.248-.561%201.248-1.249%200-.688-.561-1.249-1.249-1.249zm5.5%200c-.687%200-1.248.561-1.248%201.25%200%20.687.561%201.248%201.249%201.248.688%200%201.249-.561%201.249-1.249%200-.687-.562-1.249-1.25-1.249zm-5.466%203.99a.327.327%200%2000-.231.094.33.33%200%20000%20.463c.842.842%202.484.913%202.961.913.477%200%202.105-.056%202.961-.913a.361.361%200%2000.029-.463.33.33%200%2000-.464%200c-.547.533-1.684.73-2.512.73-.828%200-1.979-.197-2.512-.73a.326.326%200%2000-.232-.095z'/%3e%3c/svg%3e");
}

.site-header .dropdown-menu .dropdown-item.icon-open-data::before,
.mobile-menu-dark .accordion .menu-link-item.icon-open-data::before {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cellipse%20cx='12'%20cy='5'%20rx='9'%20ry='3'/%3e%3cpath%20d='M3%205V19A9%203%200%200%200%2021%2019V5'/%3e%3cpath%20d='M3%2012A9%203%200%200%200%2021%2012'/%3e%3c/svg%3e");
}

.site-header .dropdown-menu .dropdown-item.icon-open-ai::before,
.mobile-menu-dark .accordion .menu-link-item.icon-open-ai::before {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202v4'/%3e%3cpath%20d='m4.93%204.93%202.83%202.83'/%3e%3cpath%20d='M2%2012h4'/%3e%3cpath%20d='m4.93%2019.07%202.83-2.83'/%3e%3cpath%20d='M12%2022v-4'/%3e%3cpath%20d='m19.07%2019.07-2.83-2.83'/%3e%3cpath%20d='M22%2012h-4'/%3e%3cpath%20d='m19.07%204.93-2.83%202.83'/%3e%3ccircle%20cx='12'%20cy='12'%20r='4'/%3e%3c/svg%3e");
}

/* ========================================================
   Knowledge Base Section & Cards
   ======================================================== */
/* Closing section: the Integrations gradient ending in the Events wave artwork
   (same background the homepage had above the footer). */
.kb-block {
  padding: 76px 0 200px;
  background:
    url("../images/section-waves.svg") center bottom / 100% auto no-repeat,
    linear-gradient(180deg, #0C101A 0%, #121723 94.23%);
}

/* Knowledge base card (dremio_render_kb_card(): related guides, /kb/), as
   in the Figma article's related guides (3332:54725): the dev v2 card fill
   and stroke, badge, 17px title, 13px text, and the link at the bottom.
   Hover: the shared .kb-card rules in theme.css. */
.kb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--dev-v2-color-stroke);
  border-radius: var(--dev-v2-radius-card);
  background: var(--dev-v2-card-fill);
  color: inherit;
  text-decoration: none;
}
.kb-card-header {
  display: flex;
}
/* Badge small (.badge-project--small): the KB badge (header, cards, the
   homepage list rows), Figma 3332:54725 */
.badge-project--small {
  padding: 2px 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.kb-card-title {
  margin: 16px 0 8px;
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-17);
  font-weight: 500;
  line-height: 24px;
}
.kb-card-desc {
  flex-grow: 1;
  margin: 0;
  color: var(--dev-v2-color-muted);
  font-size: var(--dev-v2-font-size-13);
  line-height: 21px;
}
.kb-card-footer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-12);
  font-weight: 600;
  line-height: 18px;
}
.kb-card-footer .devhub-icon {
  width: 15px;
  height: 15px;
}

/* ========================================================
   Knowledge base article (Figma "Knowledge base" 3332:54725). The header
   band and the content type also serve /kb/ and the Default template
   (singular.php).
   ======================================================== */
/* The breadcrumb 24px under the absolute header (y98 at the Figma's 74px
   header), 40px under the links */
.kb-article-header {
  padding: calc(var(--site-header-h) + 24px) 0 40px;
  border-bottom: 1px solid var(--dev-v2-color-band-border);
  background: var(--dev-v2-kb-header-bg);
}
/* The breadcrumb: the site's 14px (owner, 2026-10-16), the Figma's "›",
   grey links and the page in white */
.kb-article-header .dremio-breadcrumb {
  margin-bottom: 30px;
}
.kb-article-header .breadcrumb {
  --bs-breadcrumb-item-padding-x: 0;
  padding: 0;
}
.kb-article-header .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  padding: 0 9px;
}
.kb-article-header .breadcrumb-item .breadcrumb-link {
  color: var(--dev-v2-color-meta);
}
.kb-article-header .breadcrumb-item.breadcrumb-current {
  color: var(--color-white);
}
.kb-header-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kb-header-label {
  color: var(--dev-v2-color-meta);
  font-size: var(--dev-v2-font-size-13);
  line-height: 20px;
}
.kb-article-title {
  margin: 14px 0 0;
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-40);
  font-weight: 600;
  line-height: 48px;
}
.kb-subtitle {
  max-width: 820px;
  margin: 12px 0 0;
  color: var(--dev-v2-color-muted);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line-height);
}
/* Section pills: the article's sections as labels, not links, so no hover
   (Figma "Pill", 3332:54808; owner, 2026-10-16) */
.kb-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.kb-sections li {
  padding: 9px 19px; /* Figma's 36px pill draws its 1px border inside */
  border: 1px solid var(--dev-v2-color-meta);
  border-radius: var(--dev-v2-radius-pill);
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-12);
  line-height: 16px;
}

/* Article: a 980px column, 56px under the band, 96px above the footer */
.kb-article-body {
  padding: 56px 0 96px;
}
.kb-article-column {
  max-width: 980px;
  margin: 0 auto;
}
/* Section titles: the article's, the newsletter card's, related guides */
.kb-content h2,
.kb-newsletter-cta__title,
.kb-related-title {
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-26);
  font-weight: 500;
  line-height: 34px;
  letter-spacing: -0.01em;
}
/* Content: 14/22, a section every 64px, 18px under its title, 15px between
   paragraphs, subheadings 24px above and 7px over their text */
.kb-content {
  color: var(--dev-v2-color-muted);
  font-size: var(--body-base-size);
  line-height: 22px;
}
.kb-content h2 {
  margin: 64px 0 18px;
}
.kb-content > h2:first-child {
  margin-top: 12px;
}
.kb-content h3 {
  margin: 24px 0 7px;
  color: var(--color-white);
  font-size: var(--body-lg-size);
  font-weight: 500;
  line-height: 23px;
}
.kb-content p {
  margin: 0 0 15px;
}
.kb-content ul,
.kb-content ol {
  margin: 15px 0 22px;
  padding-left: 22px;
}
.kb-content li {
  padding-left: 4px;
}
.kb-content li + li {
  margin-top: 5px;
}
/* A list inside a list item: the gap between items above it, nothing below
   (owner, 2026-10-16) */
.kb-content li > :is(ul, ol) {
  margin: 5px 0 0;
}
.kb-content strong {
  color: var(--color-neutral-100);
  font-weight: 600;
}

/* Diagram: the dev v2 card around the artwork, the caption inside it */
.kb-diagram-container {
  margin: 22px 0 0;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--dev-v2-color-stroke);
  border-radius: var(--dev-v2-radius-figure);
  background: var(--dev-v2-card-fill);
  box-shadow: var(--dev-v2-figure-shadow);
}
.kb-diagram-container svg {
  display: block;
  max-width: 100%;
  height: auto;
}
.kb-diagram-caption {
  margin: 0;
  padding: 14px 4px 0;
  color: var(--dev-v2-color-muted);
  font-size: var(--dev-v2-font-size-12);
  line-height: 18px;
}

/* Callout: a 3px teal edge on the card hover's tint */
.kb-callout {
  margin: 52px 0 0;
  padding: 22px 24px;
  border-left: 3px solid var(--color-teal-400);
  border-radius: 0 8px 8px 0;
  background: var(--dev-v2-callout-fill);
}
.kb-callout h3 {
  margin: 0;
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-13);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.0615em;
  text-transform: uppercase;
}
.kb-callout p {
  margin: 6px 0 0;
}

.kb-content code {
  background: #141D2B;
  color: var(--color-teal-400);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid rgba(49, 211, 219, 0.2);
}

/* Newsletter card: two glows on a dark blue, a purple stroke. Phones: 24px
   all round, its own top and bottom padding (owner, 2026-10-16) */
.kb-newsletter-cta {
  margin-top: 52px;
  padding: 24px;
  border: 1px solid var(--dev-v2-kb-cta-stroke);
  border-radius: var(--dev-v2-radius-card-lg);
  background: var(--dev-v2-kb-cta-bg);
  box-shadow: var(--dev-v2-kb-cta-shadow);
  text-align: center;
}
@media (min-width: 768px) {
  .kb-newsletter-cta {
    padding: 24px 32px;
    --btn-icon-gap: 16px; /* Subscribe: the mail icon 16px before the label */
  }
}
/* Badge rounded (.badge-project--rounded): 8px corners instead of a pill
   (the newsletter card, Figma 3332:54725) */
.badge-project--rounded {
  padding: 4px 8px;
  border-radius: 8px;
}
.kb-newsletter-cta__title {
  margin: 16px 0 0;
}
.kb-newsletter-cta__text {
  max-width: 690px;
  margin: 9px auto 0;
  color: var(--dev-v2-color-muted);
  font-size: var(--dev-v2-font-size-13);
  line-height: 21px;
}
.kb-newsletter-cta .marketo-form,
.kb-newsletter-cta > .btn {
  margin-top: 20px;
}
.kb-newsletter-note {
  margin: 15px 0 0;
  color: var(--dev-v2-color-meta);
  font-size: var(--dev-v2-font-size-12);
  line-height: 17px;
}

/* Related guides: three cards of the column, 16px apart */
.kb-related-section {
  margin-top: 52px;
}
.kb-related-title {
  margin: 0 0 18px;
}
.kb-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 767.98px) {
  .kb-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* KB category badges (kb-category term slugs); colors follow the proposal */
.badge-project-architecture,
.badge-project-open-data {
  background-color: var(--badge-iceberg);
  color: var(--badge-iceberg-text);
}

.badge-project-open-ai {
  background-color: var(--badge-polaris);
  color: var(--badge-polaris-text);
}

/* ========================================================
   Icon library for Feature Duo items/chips (icon type "Library",
   icon class e.g. "icon-newsletter"). Nav icons reuse the same names.
   ======================================================== */
.resource-icon i[class*="icon-"],
.chip-icon i[class*="icon-"] {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: center / contain no-repeat;
}

.chip-icon i[class*="icon-"] {
  width: 14px;
  height: 14px;
}

.resource-icon i.icon-university,
.chip-icon i.icon-university {
  background-image: var(--icon-university);
}

.resource-icon i.icon-community,
.chip-icon i.icon-community {
  background-image: var(--icon-community);
}

.resource-icon i.icon-blog,
.chip-icon i.icon-blog {
  background-image: var(--icon-blog);
}

.resource-icon i.icon-docs,
.chip-icon i.icon-docs {
  background-image: var(--icon-docs);
}

.resource-icon i.icon-blogroll,
.chip-icon i.icon-blogroll {
  background-image: var(--icon-blogroll);
}

.resource-icon i.icon-integrations,
.chip-icon i.icon-integrations {
  background-image: var(--icon-integrations);
}

.resource-icon i.icon-slack,
.chip-icon i.icon-slack {
  background-image: var(--icon-slack);
}

.resource-icon i.icon-apache,
.chip-icon i.icon-apache {
  background-image: var(--icon-apache);
}

.resource-icon i.icon-books,
.chip-icon i.icon-books {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='text-white'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3C/svg%3E");
}

.resource-icon i.icon-events,
.chip-icon i.icon-events {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'%20ry='2'/%3e%3cline%20x1='16'%20x2='16'%20y1='2'%20y2='6'/%3e%3cline%20x1='8'%20x2='8'%20y1='2'%20y2='6'/%3e%3cline%20x1='3'%20x2='21'%20y1='10'%20y2='10'/%3e%3c/svg%3e");
}

.resource-icon i.icon-laptop,
.chip-icon i.icon-laptop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='text-white'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='2' x2='22' y1='20' y2='20'/%3E%3C/svg%3E");
}

.resource-icon i.icon-newsletter,
.chip-icon i.icon-newsletter {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20width='20'%20height='16'%20x='2'%20y='4'%20rx='2'/%3e%3cpath%20d='m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207'/%3e%3c/svg%3e");
}

.resource-icon i.icon-open-ai,
.chip-icon i.icon-open-ai {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202v4'/%3e%3cpath%20d='m4.93%204.93%202.83%202.83'/%3e%3cpath%20d='M2%2012h4'/%3e%3cpath%20d='m4.93%2019.07%202.83-2.83'/%3e%3cpath%20d='M12%2022v-4'/%3e%3cpath%20d='m19.07%2019.07-2.83-2.83'/%3e%3cpath%20d='M22%2012h-4'/%3e%3cpath%20d='m19.07%204.93-2.83%202.83'/%3e%3ccircle%20cx='12'%20cy='12'%20r='4'/%3e%3c/svg%3e");
}

.resource-icon i.icon-open-data,
.chip-icon i.icon-open-data {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20xmlns='http://www.w3.org/2000/svg'%3e%3cellipse%20cx='12'%20cy='5'%20rx='9'%20ry='3'/%3e%3cpath%20d='M3%205V19A9%203%200%200%200%2021%2019V5'/%3e%3cpath%20d='M3%2012A9%203%200%200%200%2021%2012'/%3e%3c/svg%3e");
}

.resource-icon i.icon-reddit,
.chip-icon i.icon-reddit {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='white'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%200C5.373%200%200%205.373%200%2012c0%203.314%201.343%206.314%203.515%208.485l-2.03%202.03A.75.75%200%20002%2024h10c6.627%200%2012-5.373%2012-12S18.627%200%2012%200zm5.01%204.744c.688%200%201.25.561%201.25%201.249a1.25%201.25%200%2001-2.498.056l-2.597-.547-.8%203.747c1.824.07%203.48.632%204.674%201.488.308-.309.73-.491%201.207-.491.968%200%201.754.786%201.754%201.754%200%20.716-.435%201.333-1.01%201.614a3.111%203.111%200%2001.042.52c0%202.694-3.13%204.87-7.004%204.87-3.874%200-7.004-2.176-7.004-4.87%200-.183.015-.366.043-.534A1.748%201.748%200%20014.028%2012c0-.968.786-1.754%201.754-1.754.463%200%20.898.196%201.207.49%201.207-.883%202.878-1.43%204.744-1.487l.885-4.182a.342.342%200%2001.14-.197.35.35%200%2001.238-.042l2.906.617a1.214%201.214%200%20011.108-.702zM9.25%2012C8.561%2012%208%2012.562%208%2013.25c0%20.687.561%201.248%201.25%201.248.687%200%201.248-.561%201.248-1.249%200-.688-.561-1.249-1.249-1.249zm5.5%200c-.687%200-1.248.561-1.248%201.25%200%20.687.561%201.248%201.249%201.248.688%200%201.249-.561%201.249-1.249%200-.687-.562-1.249-1.25-1.249zm-5.466%203.99a.327.327%200%2000-.231.094.33.33%200%20000%20.463c.842.842%202.484.913%202.961.913.477%200%202.105-.056%202.961-.913a.361.361%200%2000.029-.463.33.33%200%2000-.464%200c-.547.533-1.684.73-2.512.73-.828%200-1.979-.197-2.512-.73a.326.326%200%2000-.232-.095z'/%3e%3c/svg%3e");
}

.resource-icon i.icon-youtube,
.chip-icon i.icon-youtube {
  background-image: url("data:image/svg+xml,%3csvg%20width='19'%20height='16'%20viewBox='0%200%2024%2024'%20fill='white'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M23.498%206.186a3.016%203.016%200%200%200-2.122-2.136C19.505%203.545%2012%203.545%2012%203.545s-7.505%200-9.377.505A3.017%203.017%200%200%200%20.502%206.186C0%208.07%200%2012%200%2012s0%203.93.502%205.814a3.016%203.016%200%200%200%202.122%202.136c1.871.505%209.376.505%209.376.505s7.505%200%209.377-.505a3.015%203.015%200%200%200%202.122-2.136C24%2015.93%2024%2012%2024%2012s0-3.93-.502-5.814zM9.545%2015.568V8.432L15.818%2012l-6.273%203.568z'/%3e%3c/svg%3e");
}

.site-header .dropdown-menu .dropdown-item.icon-laptop::before,
.mobile-menu-dark .accordion .menu-link-item.icon-laptop::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='text-white'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='2' x2='22' y1='20' y2='20'/%3E%3C/svg%3E");
}

.site-header .dropdown-menu .dropdown-item.icon-books::before,
.mobile-menu-dark .accordion .menu-link-item.icon-books::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='text-white'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3C/svg%3E");
}

/* ========================================================
   Homepage sections: replacements for the proposal's inline styles
   ======================================================== */
.hub-block-placeholder {
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #9DA4AE;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
}

.hub-section-header .badge {
  font-size: 12px;
  padding: 4px 14px;
}

.hub-section-header .lead {
  color: #9DA4AE;
  font-size: 1rem;
}

.resource-title-row {
  margin-bottom: 0.5rem;
}

/* Links inside article text (dark theme; the Bootstrap default is dark purple). */
.kb-article-body a:not(.btn):not(.chip):not(.kb-card) {
  color: var(--color-teal-400);
}

/* ========================================================
   New homepage (Figma "Redesign landing page"; dev v2 tokens)
   ======================================================== */

/* Hero: the optional label over the logos takes their top gap (theme.css
   .hero-logos padding-top) */
.hero-logos-label {
  margin: 0;
  padding-top: 48px;
  color: var(--dev-v2-color-meta);
  font-size: var(--dev-v2-font-size-11);
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-section .hero-logos-label + .hero-logos {
  padding-top: 22px;
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-logos-label {
    padding-top: 24px;
  }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-logos-label {
    padding-top: 32px;
  }
}

/* Hero, style "Dev v2": wider text, logos in a centred row (the site hero's
   gap-5, 3rem), 30px tall as in the Figma. hero.php leaves the row's
   Bootstrap utilities off Dev v2, so phones can make it a grid. No line
   under the hero (Figma). */
.hero-section--v2 {
  --hero-border: 0;
}
.hero-section--v2 .hero-lead {
  max-width: 670px;
  margin-left: auto;
  margin-right: auto;
}
.hero-section--v2 .hero-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.hero-section--v2 .hero-logos img {
  height: 30px;
}
/* Desktop: the height follows the content as in the Figma (64px header
   and 108px above the title, 88px under the logos, 80px from the buttons
   to the label with their 24px margin), not the site hero's 2:1 box;
   logos 56px apart */
@media (min-width: 992px) {
  .hero-section--v2 {
    --hero-pt: calc(64px + 108px);
    --hero-pb: 88px;
    --hero-aspect: auto;
  }
  .hero-section--v2 .hero-logos-label {
    padding-top: 56px;
  }
  .hero-section--v2 .hero-logos {
    gap: 56px;
  }
}
/* Below 768px (Figma mobile): logos two to a row, 24px apart */
@media (max-width: 767.98px) {
  .hero-section--v2 .hero-logos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-items: center;
    gap: 24px;
  }
}
/* Phones (Figma mobile), at theme.css's hero phone breakpoint (576px), whose
   rules these adjust: 14/21 text and full-width buttons (theme.css stops
   them at 320px); 48px from the buttons to the label (with their 24px
   margin) and 60px under the logos (with the column's 48px) */
@media (max-width: 576px) {
  .hero-section--v2 {
    --hero-pb: 12px;
    --hero-btn-max: none;
  }
  .hero-section--v2 .hero-logos-label {
    padding-top: 24px;
  }
  .hero-section--v2 .hero-lead {
    font-size: var(--body-base-size);
    line-height: 21px;
  }
}
/* Pill buttons: the site's buttons (colours, sliding fill) in the Figma
   shape, in the Dev v2 hero, every Developer Hub section (Community
   Extensions, Transform Studio, the homepage sections), the Events CTA
   band and the KB newsletter card */
.hero-section--v2 .btn,
.devhub-hero .btn,
.devhub-section .btn,
.events-cta-block .btn,
.kb-newsletter-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--dev-v2-radius-pill);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}
/* The KB newsletter card's is the Figma's 50px, with 16px text on the
   site button's line height. Phones keep the pill above (14px, as the
   homepage newsletter's), so "Subscribe to Newsletter" fits one line at
   320px. */
@media (min-width: 768px) {
  .kb-newsletter-cta .btn {
    min-height: 50px;
    font-size: var(--body-lg-size);
    line-height: var(--bs-btn-line-height);
  }
}

/* The pill buttons' external-link icon (theme.css .btn.external-link):
   the Figma icon, 16px in the label's colour, 10px after it */
.hero-section--v2 .btn.external-link::after,
.devhub-hero .btn.external-link::after,
.devhub-section .btn.external-link::after,
.events-cta-block .btn.external-link::after {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  opacity: 1;
  background: currentColor;
  -webkit-mask: url("../../figma-assets/devhub/external.svg") center / contain no-repeat;
  mask: url("../../figma-assets/devhub/external.svg") center / contain no-repeat;
}

/* Marketo forms (dremio_marketo_form_html(), inc/newsletter.php), their own styles
   removed by theme.js, as the Figma field: a 14/20 label 4px over a 40px
   input, 16px between fields (the Figma form's spare rows) and the
   Subscribe pill 24px below. Consent text and checkboxes in the muted
   body text. A slot shows its fallback link while it has no form. */
.marketo-form {
  width: 100%;
}
/* The fields read left to right; the fallback link follows its section */
.marketo-form .mktoForm {
  text-align: left;
}
.marketo-form.has-form .marketo-form__fallback,
.marketo-form.is-done .marketo-form__fallback,
/* An empty .mktoInstruction (after every field) would add a gap of its own */
.marketo-form .mktoInstruction:empty,
.marketo-form .mktoOffset,
.marketo-form .mktoGutter,
.marketo-form .mktoClear,
.marketo-form .mktoAsterix,
.marketo-form .mktoErrorArrowWrap {
  display: none;
}
/* Marketo writes a width on every element it sizes (.mktoHasWidth), again
   on each resize: min/max-width win over it, so they fill the form. */
.marketo-form .mktoHasWidth {
  min-width: 100%;
  max-width: 100%;
}
.marketo-form .mktoFieldWrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}
.marketo-form .mktoFormRow:first-child .mktoFieldWrap {
  margin-top: 0;
}
/* Marketo puts the asterisk first; Figma reads "Email *" */
.marketo-form .mktoLabel {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
  color: var(--color-white);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}
.marketo-form .mktoRequiredField .mktoAsterix {
  display: block;
}
/* Figma: slate-900 fill, 1px border in the buttons' purple, 4px radius
   (Bootstrap's small radius); 12px inset as Bootstrap's .form-control.
   Checkboxes sit in a list, not directly in the field. */
.marketo-form .mktoFieldWrap > .mktoField {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-purple-700);
  border-radius: var(--bs-border-radius-sm);
  background: var(--color-slate-900);
  color: var(--color-white);
  font-size: var(--body-base-size);
}
.marketo-form .mktoField.mktoInvalid {
  border-color: var(--bs-form-invalid-border-color);
}
.marketo-form .mktoCheckboxList {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.marketo-form .mktoCheckboxList .mktoField {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0; /* centred on the first line */
  accent-color: var(--color-purple-700);
}
.marketo-form .mktoCheckboxList label,
.marketo-form .mktoHtmlText {
  color: var(--dev-v2-color-muted);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}
.marketo-form .mktoHtmlText a {
  color: var(--color-teal-400); /* the site's teal link (link-teal) */
}
.home-newsletter .marketo-form .mktoHtmlText a {
  color: var(--color-purple-200); /* the homepage newsletter's privacy policy link: Purple 200 (designer, 2026-10-26; that section only, owner 2026-10-27) */
}
.marketo-form .mktoError {
  color: var(--bs-form-invalid-color);
  font-size: var(--dev-v2-font-size-12);
  line-height: 18px;
}
.marketo-form .mktoButtonRow {
  display: flex;
  padding-top: 24px;
}
/* The Marketo form in the KB newsletter card (Figma 3332:54725): the email
   field (441px, 48px, 20px corners, its label only for screen readers)
   beside Subscribe, 10px apart; the form's other rows full width under
   them */
.kb-newsletter-cta .mktoForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}
.kb-newsletter-cta .mktoFormRow {
  flex: 0 0 100%;
  order: 2;
}
.kb-newsletter-cta .mktoFormRow:first-child {
  flex: 0 1 441px;
  order: 0;
}
.kb-newsletter-cta .mktoFormRow:first-child .mktoLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kb-newsletter-cta .mktoFormRow:first-child .mktoField {
  height: 48px;
  border-radius: 20px;
}
.kb-newsletter-cta .mktoButtonRow {
  order: 1;
  padding-top: 0;
}
/* Phones: the field and Subscribe stacked, the same width, 10px apart (the
   desktop gap between them; owner, 2026-10-16) */
@media (max-width: 767.98px) {
  .kb-newsletter-cta .mktoFormRow:first-child,
  .kb-newsletter-cta .mktoButtonRow {
    flex-basis: 100%;
  }
  .kb-newsletter-cta .mktoButtonRow {
    padding-top: 10px;
  }
  .kb-newsletter-cta .mktoButtonWrap {
    flex: 1;
  }
  .kb-newsletter-cta .mktoButton {
    width: 100%;
  }
}
/* The thank-you and error text, readable on the dark cards it sits in
   (owner, 2026-10-19: it inherited Bootstrap's dark body colour) */
.marketo-form__status {
  margin: 0;
  color: var(--dev-v2-color-muted);
}
.marketo-form__status:focus {
  outline: 0; /* focused by script only, to announce the thank-you */
}
/* The newsletter form's section or card: focused by script when a
   newsletter link scrolls to it, a target rather than a control */
.devhub-newsletter:focus,
.kb-newsletter-cta:focus {
  outline: 0;
}

/* Newsletter form slot: holds the form's height until Marketo's form is in,
   so the page below doesn't jump when it lands (audit MEDIA-05); the
   fallback link stays on top. Released when the slot has the form (then its
   own height rules), after a signup, when theme.js marks the slot spare (no
   form is coming, or it goes to another slot; the mark follows a resize and
   a retry) and without scripts (a browser lacking scripting: none holds it).
   The heights are the form hello.dremio.com served on 2026-10-19
   (tools/qa/fixtures/marketo/form-3317.html) in each container, as its
   consent and privacy text wrap. Settings of the two containers, not root
   tokens (one more on :root is one more on every element of every route in
   compare). `npm run forms` fails where
   the fixture's form is more than 48px off: for a new form, refresh the
   fixture and measure again. */
.marketo-form[data-dremio-newsletter-form] {
  min-height: var(--mkto-reserve, 0);
}
.marketo-form[data-dremio-newsletter-form]:is(.has-form, .is-done, .is-spare) {
  min-height: 0;
}
@media (scripting: none) {
  .marketo-form[data-dremio-newsletter-form] {
    min-height: 0;
  }
}
.home-newsletter {
  --mkto-reserve: 264px; /* below 576px */
}
.kb-newsletter-cta {
  --mkto-reserve: 242px; /* below 768px */
}
@media (min-width: 576px) {
  .home-newsletter {
    --mkto-reserve: 224px;
  }
}
@media (min-width: 768px) {
  .home-newsletter {
    --mkto-reserve: 232px;
  }
  .kb-newsletter-cta {
    --mkto-reserve: 194px;
  }
}
@media (min-width: 992px) {
  .kb-newsletter-cta {
    --mkto-reserve: 126px;
  }
}

/* Knowledge Base Grid, List layout: eyebrow header (devhub-pages.css) and
   two columns of one-line cards. The cards keep .kb-card's hover. */
/* 32px padding on phones (Figma mobile) */
.kb-block--list {
  padding: 32px 0;
  background: var(--dev-v2-gradient-dark-band);
}
/* Figma: the eyebrow sits 5px into its container; 99px under the cards
   (the rendered frame, see devhub-pages.css "Homepage sections") */
@media (min-width: 768px) {
  .kb-block--list {
    padding: 49px 0 99px;
  }
}
.kb-block--list .devhub-section-header {
  margin-bottom: 48px;
}
.kb-block--list .devhub-section-title {
  font-size: var(--dev-v2-font-size-32);
  line-height: 1.15; /* Figma: 32px, 1.15em */
  letter-spacing: -0.02em;
}
.kb-block--list .devhub-section-intro {
  max-width: 720px;
  color: var(--dev-v2-color-muted);
  font-size: var(--dev-v2-font-size-13);
  line-height: 20px;
}
/* Phones (Figma mobile): the title 24/32, as the homepage section titles,
   and the cards 36px under the header */
@media (max-width: 767.98px) {
  .kb-block--list .devhub-section-header {
    margin-bottom: 36px;
  }
  .kb-block--list .devhub-section-title {
    font-size: var(--dev-v2-font-size-24);
    line-height: 32px;
  }
}
/* The rows: the KB card (above) in a row, with the Card dev v2 shadow, on
   .kb-card's own hover */
.kb-card--row {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-height: 102px;
  padding: 14px 16px;
  box-shadow: var(--dev-v2-card-shadow);
}
.kb-card-icon,
.kb-card-arrow {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  background: var(--color-slate-900);
}
.kb-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px; /* Figma */
}
.kb-card-icon .devhub-icon {
  width: 14px;
  height: 14px;
}
.kb-card-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid var(--dev-v2-color-stroke);
  border-radius: 50%;
}
.kb-card-arrow .devhub-icon {
  width: 15px;
  height: 15px;
}
.kb-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.kb-card--row .kb-card-title {
  margin: 9px 0 0;
  color: var(--color-gray-200);
  font-size: var(--body-base-size);
  line-height: 18px;
}
.kb-card--row .kb-card-desc {
  margin: 4px 0 0;
  font-size: var(--dev-v2-font-size-10);
  line-height: 14px;
}