/* InsightRPG Layout Styles
   ========================
   Page-level layout structures and responsive design.
*/

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page--with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar"
    "main"
    "footer";
}

@media (min-width: 64em) {
  .page--with-sidebar {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "sidebar main"
      "sidebar footer";
    gap: 0;
  }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  grid-area: sidebar;
  background: var(--surface-1);
  border-right: 1px solid var(--surface-2);
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 2px; }

@media (min-width: 64em) {
  .sidebar {
    position: sticky;
    top: calc(var(--endorser-height) + var(--nav-height));
    align-self: start;
    height: calc(100vh - var(--endorser-height) - var(--nav-height));
    padding: var(--space-8) var(--space-4) var(--space-8) var(--space-6);
    box-shadow: inset 0 -24px 16px -16px var(--surface-2);
  }
}

@media (max-width: 63.99em) {
  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--surface-2);
    padding: var(--space-4);
    max-height: 50vh;
    overflow-y: auto;
  }
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main {
  grid-area: main;
  min-width: 0; /* prevent grid blowout */
  padding: var(--space-8) var(--space-6) var(--space-16);
  max-width: 960px;
}

@media (min-width: 64em) {
  .main {
    padding: var(--space-12) var(--space-12) var(--space-24);
  }
}

/* ============================================================
   SPREAD (full-viewport section, e.g. cover)
   ============================================================ */
.spread {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-16) 0;
}

.spread--cover {
  text-align: center;
  align-items: center;
  min-height: 70vh;
}

.spread--cover h1 {
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

@media (max-width: 48em) {
  .spread--cover h1 {
    font-size: var(--text-3xl);
  }
}

/* ============================================================
   TWO-COLUMN CONTENT
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin: var(--space-6) 0;
}

@media (min-width: 48em) {
  .two-col {
    grid-template-columns: 2fr 1fr;
  }
}

.two-col__main {
  min-width: 0;
}

.two-col__aside {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================================
   CARD GRID
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

@media (min-width: 72em) {
  .card-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* ============================================================
   TITLE BLOCK
   ============================================================ */
.title-block {
  padding: var(--space-20) 0 var(--space-12);
  text-align: center;
}

.title-block__subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  font-weight: 500;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  grid-area: footer;
  margin-top: auto;
  padding: var(--space-8) var(--space-6);
  border-top: 1px solid var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

@media (min-width: 64em) {
  .footer {
    padding: var(--space-8) var(--space-12);
  }
}

.footer a {
  color: var(--text-tertiary);
}

.footer a:hover {
  color: var(--accent);
}

/* ============================================================
   ARTICLE (content wrapper)
   ============================================================ */
article {
  /* Breathing room between major sections */
}

article > section {
  margin-bottom: var(--space-12);
}

article > section:last-child {
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE TABLE WRAPPER
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-6) 0 var(--space-8);
}

.table-wrap table {
  margin: 0;
}

/* ============================================================
   RESPONSIVE DIAGRAM WRAPPER
   ============================================================ */
.diagram-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-6) 0;
}

.diagram-wrap svg {
  min-width: 600px;
}

/* ============================================================
   PRINT HELPERS
   ============================================================ */
.page-break-before {
  page-break-before: always;
}

.page-break-after {
  page-break-after: always;
}

.no-break {
  page-break-inside: avoid;
}

/* --- Product Navigation --- */

.product-nav {
  position: sticky;
  top: var(--endorser-height);
  z-index: 100;
  background: var(--surface-0);
  border-bottom: var(--border-thin);
  height: var(--nav-height);
}

.product-nav nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  height: 100%;
}

.product-nav__brand {
  display: flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
}

/* Logo: single icon, light/dark variants */
.product-nav__logo { width: 28px; height: 28px; }
.product-nav__logo--dark { display: none; }
[data-theme="dark"] .product-nav__logo--light { display: none; }
[data-theme="dark"] .product-nav__logo--dark { display: block; }

/* Right side: theme toggle + sidebar toggle */
.product-nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Theme toggle button */
.theme-toggle {
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover {
  color: var(--text-primary);
}

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

.product-nav__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.product-nav__link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: none;
  padding: var(--space-3) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.product-nav__link:hover {
  color: var(--text-primary);
}

.product-nav__link--active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.product-nav__sidebar-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-2);
  color: var(--text-primary);
  cursor: pointer;
}

/* --- Product layout (tools, no sidebar) --- */

.page--product {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: var(--space-8) var(--page-gutter);
}

.page--product .main--wide {
  max-width: 100%;
}

/* --- Sidebar as mobile drawer --- */

.sidebar-overlay {
  display: none;
}

@media (max-width: 63.99em) {
  .product-nav__sidebar-toggle {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: calc(var(--endorser-height) + var(--nav-height));
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--surface-0);
    border-right: var(--border-thin);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
    z-index: 90;
    overflow-y: auto;
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: calc(var(--endorser-height) + var(--nav-height));
    background: rgba(0, 0, 0, 0.4);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
  }

  .sidebar-overlay--visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (min-width: 64em) {
  .no-desktop {
    display: none !important;
  }

  .page--with-sidebar {
    padding-top: 0;
  }
}

/* ============================================================
   CROSS-PRODUCT CTA SECTION (between content and footer)
   ============================================================ */
.cross-cta-section {
  border-top: 1px solid var(--surface-2);
  padding: var(--space-16) var(--space-6);
  background: var(--surface-1);
}

.cross-cta-section__inner {
  max-width: var(--container-lg);
  margin: 0 auto;
}

/* ============================================================
   MEGATABLE EXPANSION (no side-scrolling)
   ============================================================ */
.megatable-wrap {
  max-width: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.megatable {
  font-size: var(--text-xs);
}

.megatable td,
.megatable th {
  padding: var(--space-1) var(--space-2);
  word-break: break-word;
}

@media (max-width: 48em) {
  .megatable {
    font-size: 0.6rem;
  }
  .megatable td,
  .megatable th {
    padding: 2px 4px;
  }
}