/* /styles/layout.css */

/* Header hero strip */
/* Header hero strip — normal flow (not sticky) */
.header-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: static;             /* remove sticky */
  top: auto;                    /* neutralize sticky offset */
  z-index: auto;                /* no stacking layer needed */
  background: var(--color-bg);

  /* exact paddings/heights preserved */
    padding: calc(var(--logo-strip-padding-y) + 30px) var(--logo-strip-padding-x) calc(var(--logo-strip-padding-y) + 50px);
  /* Use min-height so padding doesn't "double" the height */
  min-height: var(--header-height);
}


.header-hero__logo {
  height: var(--header-height); /* ensure the alternative logo selector also scales */
  width: auto;
}


.header-hero__center {
  /* keep absolute/transform centering exactly as is */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.brand-marketing {
  display: block;
  height: var(--header-height); /* driven by token, keeps aspect ratio */
  width: auto;
  max-width: 100%;                /* prevent clipping on narrow viewports */
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; /* crispness for vector-like logos */
  image-rendering: crisp-edges;
  border: none;
  background: transparent;
}

/* Use real dark logo asset instead of filter inversion */
.brand-marketing--dark { display: none; }   /* default: show light, hide dark */

:root[data-theme="dark"] .brand-marketing--light { display: none; }
:root[data-theme="dark"] .brand-marketing--dark  { display: block; }



/* Main container layout (mobile-first) */
#mainContainer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 20px;
}
/* Main container — widened, centered */
#mainContainer {
  max-width: var(--content-max-width);
  margin-inline: auto;
  width: 100%;
}


/* Column gutters — align with dashboard bar */
#leftColumn,
#rightColumn {
  min-width: 300px;
  padding-left: 12px; /* rely on #mainContainer gap */
}



/* Two-column content area — equal heights (tablet) */
@media (min-width: 768px) {
  #mainContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;                      /* force equal column heights */
    gap: 2rem;                                 /* preserves your existing gap */
    min-height: var(--content-row-min-height); /* min height on the row, not children */
  }

  #leftColumn,
  #rightColumn {
    min-width: 0;            /* allow columns to shrink within grid */
    display: flex;           /* let inner panels stretch */
    flex-direction: column;
  }
}

/* Larger doc panel — keep grid ratio, no inner column padding */
@media (min-width: 1024px) {
  #mainContainer {
    grid-template-columns: 4fr 1fr; /* ~80/20 design ratio */
  }
  #rightColumn {
    padding-left: 10px; /* keep alignment with dashboard buttons */
  }
}

/* --- Horizontal bar under the header — normal flow (not sticky) --- */
#dashboardSidebar {
  position: static;                      /* remove sticky; normal flow */
  top: auto;                             /* neutralize offset */
  left: auto;
  right: auto;

    display: flex;
  flex-direction: row;                   /* keep visuals the same */
  flex-wrap: nowrap;                     /* stay on one row so it can overflow */
  align-items: flex-start; /* top-align tiles so the images line up */
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
  padding-bottom: 12px;  /* bump this number up/down to taste */
    background: var(--color-bg);
  z-index: auto;

  /* Default: no line, just breathing room */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;

  /* Match the main content container width */
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;

}
#chatbotButtons { margin-top: 0; }


/* When space is tight, reintroduce the gold hairline */
@media (max-width: 900px) {
  #dashboardSidebar {
    border-bottom: none;
    padding-bottom: 5px;   /* 5px above the line */
    margin-bottom: 5px;    /* 5px below the line */
  }

/* Highlighted button row — normal flow, visible under header/bar */
#chatbotButtons {
  position: static;                      /* explicitly non-sticky */
  top: auto;
  display: flex;                             /* make the row a flex strip   */
  flex-wrap: wrap;                           /* wrap on small screens       */
  gap: var(--space-10);                      /* space between buttons (10px)*/

  /* Align with content width */
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: 12px; /* NEW: match the 12px column gutter so buttons align */

  /* Tokenized spacing so it never tucks under the bar */
  margin-top: var(--space-8);
  margin-bottom: var(--space-20);
}


#dashboardSidebar img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-8);
  display: block;
  margin: 0 auto 6px;
  border: 1px solid var(--color-border-strong);
}

#dashboardSidebar span {
  display: block;
  text-align: center;
  font-weight: 500;
  color: var(--color-muted);
  font-size: 13px;
}

/* WebKit scrollbar to keep visibility as before */
#dashboardSidebar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 10px;
}
#dashboardSidebar::-webkit-scrollbar-thumb {
  background-color: rgba(176,138,72,0.9);
  border-radius: 5px;
}

/* Optional cross-browser hint (doesn't change colors) */
#dashboardSidebar {
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: rgba(176,138,72,0.9) transparent;
}

/* (removed) mobile-only sidebar override — using one horizontal model across breakpoints */


}