/*
 * iPundit Community — Q2A 1.8.x theme stylesheet
 *
 * Targets the actual class names emitted by Q2A 1.8.8's HTML output
 * (verified against view-source on 2026-05-14). Forked from a careful
 * read of Q2A's default SnowFlat HTML structure; brand tokens mirror
 * Common\DesignTheme.vb and iPundit Solutions/css/iPundit-tokens.css.
 *
 * Naming policy: OLD product names primary (Smart 3D, SPPID, CADWorx).
 */

:root {
  --ip-primary-dark:     #1B587D;
  --ip-primary:          #2E94D1;
  --ip-primary-light:    #C0DEF1;
  --ip-primary-lighter:  #D6EAF8;
  --ip-primary-lightest: #EBF5FB;
  --ip-body-text:        #1A1A1A;
  --ip-muted:            #6B7B8D;
  --ip-bg:               #EEF6FB;
  --ip-page-bg:          #FFFFFF;
  --ip-hover-dark:       #144A6B;
  --ip-active-dark:      #0E3F5A;
  --ip-secondary-border: #B0BEC5;
  --ip-success:          #27AE60;
  --ip-warning:          #E67E22;
  --ip-danger:           #C0392B;

  --ip-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ip-font-mono: 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  --ip-radius: 8px;
  --ip-radius-sm: 4px;
  --ip-shadow-card: 0 1px 3px rgba(20, 65, 94, 0.08);
}

/* ─────────────────────────────────────────────────────────────
 * Base
 * ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ip-bg);
  color: var(--ip-body-text);
  font-family: var(--ip-font);
  font-size: 15px;
  line-height: 1.55;
}
body { overflow-x: hidden; }  /* prevent horizontal scrollbar from full-bleed band breakouts */

a {
  color: var(--ip-primary-dark);
  text-decoration: none;
}
a:hover {
  color: var(--ip-hover-dark);
  text-decoration: underline;
}

h1, h2, h3, h4 {
  color: var(--ip-primary-dark);
  margin: 0 0 12px 0;
  font-weight: 600;
}

code, kbd, pre {
  font-family: var(--ip-font-mono);
  font-size: 0.93em;
  background: var(--ip-primary-lightest);
  border-radius: var(--ip-radius-sm);
  padding: 1px 5px;
  color: #14415E;
}
pre {
  padding: 12px 16px;
  overflow-x: auto;
  border: 1px solid var(--ip-primary-light);
}
pre code {
  background: transparent;
  padding: 0;
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────
 * Body wrapper — flex column spanning the full viewport.
 *
 * Header, honest-stats, and footer are full-width flex items (dark navy
 * bands run edge-to-edge). Sidepanel + main are wrapped (in PHP) in an
 * `.ip-content-row` which is a centered max-width white card, and grows
 * to fill the remaining vertical space so the footer always pins to the
 * bottom of the viewport on short pages.
 * ───────────────────────────────────────────────────────────── */

.qa-body-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* No max-width: bands naturally span full viewport. The light-blue
     framing strips on either side of the content card come from body bg. */
}

/* Full-bleed bands — header / honest-stats / footer.
   Padding pushes inner content inwards to the centered 1280px column. */
.qa-header,
.ip-honest-stats,
.qa-footer {
  flex: 0 0 auto;
  width: 100%;
  padding-left: max(28px, calc((100vw - 1280px) / 2 + 28px));
  padding-right: max(28px, calc((100vw - 1280px) / 2 + 28px));
}

/* Centered content area — wraps sidepanel + main, white card, fills
   remaining vertical space (pushing footer to the bottom on short pages),
   and forms a BFC so the floated sidepanel is contained (no white gap
   below main when sidepanel is taller). */
.ip-content-row {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  background: var(--ip-page-bg);
  display: flow-root;
}

/* Clear floats (Q2A uses qa-*-clear divs for legacy float clearing) */
.qa-header-clear,
.qa-nav-user-clear,
.qa-nav-main-clear {
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
  line-height: 0;
}

/* ─────────────────────────────────────────────────────────────
 * Header (dark navy bar with logo + nav + search)
 *
 * Q2A flat sibling structure:
 *   .qa-header > .qa-logo .qa-nav-user .qa-search .qa-nav-main
 * Use CSS Grid to lay out as 2 rows:
 *   Row 1: [ logo | nav-user ]
 *   Row 2: [ nav-main spans full-width including search ]
 * ───────────────────────────────────────────────────────────── */

.qa-header {
  background: var(--ip-primary-dark);
  color: #FFFFFF;
  padding-top: 10px;
  padding-bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo slogan navuser"
    "navmain navmain navmain";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}

/* Logo block — image only; slogan is now a separate grid cell so it can
   be centered independently of the logo's left-aligned position. */
.qa-logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  min-height: 0;
}
.qa-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.qa-logo-link:hover { text-decoration: none; opacity: 0.92; }
.qa-logo-img {
  height: 44px;
  width: auto;
  display: block;
}
.qa-slogan {
  grid-area: slogan;
  justify-self: center;
  text-align: center;
  color: var(--ip-primary-light);
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.2px;
  line-height: 1.3;
  opacity: 0.95;
}

/* User-actions block (right side of row 1, e.g. "Hello manoj | Updates | Logout") */
.qa-nav-user {
  grid-area: navuser;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF;
  font-size: 13px;
}
.qa-logged-in {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}
.qa-logged-in-pad { /* "Hello " padding text */ }
.qa-logged-in-data .qa-user-link {
  color: #FFFFFF;
  font-weight: 600;
}
.qa-logged-in-data .qa-user-link:hover {
  color: var(--ip-primary-light);
  text-decoration: none;
}

.qa-nav-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.qa-nav-user-item {
  margin: 0;
  padding: 0;
}
.qa-nav-user-link {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--ip-radius-sm);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.qa-nav-user-link:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  text-decoration: none;
}

/* Search box (Q2A renders this between nav-user and nav-main; on small layouts
   we tuck it into the main nav row floated right) */
.qa-search {
  grid-area: navmain;
  justify-self: end;
  align-self: end;
  margin-bottom: 8px;
}
.qa-search form { display: flex; gap: 6px; }
.qa-search-field {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid transparent;
  border-radius: var(--ip-radius-sm);
  padding: 6px 10px;
  font-family: var(--ip-font);
  font-size: 13px;
  width: 200px;
}
.qa-search-field:focus {
  outline: 2px solid var(--ip-primary);
  background: #FFFFFF;
}
.qa-search-button {
  background: var(--ip-primary);
  color: #FFFFFF;
  border: none;
  padding: 6px 14px;
  border-radius: var(--ip-radius-sm);
  font-family: var(--ip-font);
  font-size: 13px;
  cursor: pointer;
}
.qa-search-button:hover { background: var(--ip-hover-dark); }

/* Main nav (row 2) — Questions / Unanswered / Tags / Users / Ask / Admin */
.qa-nav-main {
  grid-area: navmain;
  align-self: end;
  background: transparent;
  margin-top: 4px;
}
.qa-nav-main-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
.qa-nav-main-item {
  margin: 0;
  padding: 0;
}
.qa-nav-main-link {
  display: inline-block;
  padding: 10px 18px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.qa-nav-main-link:hover {
  background: var(--ip-hover-dark);
  color: #FFFFFF;
  text-decoration: none;
}
.qa-nav-main-selected .qa-nav-main-link {
  background: var(--ip-active-dark);
  border-bottom-color: var(--ip-primary-light);
}
/* Highlight "Ask a Question" call-to-action */
.qa-nav-main-ask .qa-nav-main-link {
  color: var(--ip-primary-light);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
 * Layout — main content area + sidepanel (Q2A floats sidepanel right)
 * ───────────────────────────────────────────────────────────── */

.qa-sidepanel {
  float: right;
  width: 280px;
  padding: 22px 24px 22px 0;
}
.qa-sidebar {
  background: var(--ip-primary-dark);
  color: #FFFFFF;
  border-radius: var(--ip-radius);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.qa-sidebar a {
  color: var(--ip-primary-light);
}

.qa-feed {
  background: var(--ip-page-bg);
  border: 1px solid var(--ip-primary-light);
  border-radius: var(--ip-radius);
  padding: 12px 16px;
  font-size: 13px;
}
.qa-feed-link {
  color: var(--ip-primary-dark);
}

.qa-main {
  margin-right: 304px;
  padding: 22px 24px;
  min-height: 60vh;
}

.qa-main-heading {
  border-bottom: 1px solid var(--ip-primary-light);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.qa-main-heading h1 {
  font-size: 22px;
  margin: 0;
  color: var(--ip-primary-dark);
}

.qa-suggest-next {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--ip-primary-lightest);
  border-left: 4px solid var(--ip-primary);
  border-radius: 0 var(--ip-radius-sm) var(--ip-radius-sm) 0;
  color: var(--ip-body-text);
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────
 * Question list (when there are questions)
 * ───────────────────────────────────────────────────────────── */

.qa-q-list {
  margin: 0;
  padding: 0;
}
.qa-q-list-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--ip-primary-light);
}
.qa-q-item-title a {
  font-size: 16px;
  font-weight: 600;
  color: var(--ip-primary-dark);
}
.qa-q-item-title a:visited { color: #4A6E85; }
.qa-q-item-meta {
  font-size: 12.5px;
  color: var(--ip-muted);
  margin-top: 6px;
}
.qa-q-item-stats { color: var(--ip-muted); font-size: 13px; }

/* ─────────────────────────────────────────────────────────────
 * Tags
 * ───────────────────────────────────────────────────────────── */

.qa-tag-link {
  display: inline-block;
  background: var(--ip-primary-light);
  color: var(--ip-primary-dark);
  padding: 2px 9px;
  border-radius: var(--ip-radius-sm);
  font-size: 12px;
  margin: 0 6px 4px 0;
  text-decoration: none;
}
.qa-tag-link:hover {
  background: var(--ip-primary);
  color: #FFFFFF;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────
 * Forms — login / register / ask
 * ───────────────────────────────────────────────────────────── */

.qa-form-tall-table,
.qa-form-wide-table {
  width: 100%;
  border-collapse: collapse;
}
.qa-form-tall-label {
  font-weight: 500;
  color: var(--ip-primary-dark);
  padding: 10px 0 4px;
  display: block;
}
/* Cascading category dropdowns (Tool → Category → Sub-category) on
   the Ask form. Stock Q2A renders them as bare <select> elements whose
   width is content-driven, which looks visually tiny next to the
   full-width question-title input. Equalise the visual weight by
   stretching them across the row in a flex layout. */
.qa-form-tall-data select {
  padding: 9px 12px;
  font-family: var(--ip-font);
  font-size: 14px;
  background: var(--ip-page-bg);
  color: var(--ip-body-text);
  border: 1px solid var(--ip-secondary-border);
  border-radius: var(--ip-radius-sm);
  min-width: 0;
  flex: 1 1 0;
}
/* Wrap multiple consecutive selects (the cascade) into a flex row so
   they share the available width evenly. The qa-form-tall-data cell is
   already full-width via the table layout, so flex children get the
   actual row width to divide up. */
.qa-form-tall-data:has(select + select) {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Per-select micro-labels injected by qa-theme.php's
   ipundit_ask_form_helpers() — Tool / Category / Sub-category prefix
   each cascade select so it's obvious at a glance which is which. */
.ip-cascade-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--ip-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: -4px;
  padding: 0 2px;
}
.ip-cascade-label + select {
  margin-left: 0;
}

/* Submit gate — JS in qa-theme.php disables the "Ask the Question"
   button until L1/L2/L3 cascade is fully picked. Make the disabled
   state visibly greyed so engineers know why nothing happens on hover. */
.qa-form-tall-button:disabled,
.qa-form-tall-button[disabled],
input.qa-form-tall-button:disabled,
input[name="doask"]:disabled,
button[name="doask"]:disabled {
  background: var(--ip-secondary-border) !important;
  color: #FFFFFF !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}
input[name="doask"]:disabled:hover,
button[name="doask"]:disabled:hover {
  background: var(--ip-secondary-border) !important;
}

.qa-form-tall-data input[type="text"],
.qa-form-tall-data input[type="email"],
.qa-form-tall-data input[type="password"],
.qa-form-tall-data textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ip-secondary-border);
  border-radius: var(--ip-radius-sm);
  font-family: var(--ip-font);
  font-size: 15px;
  background: var(--ip-page-bg);
  color: var(--ip-body-text);
  box-sizing: border-box;
}
.qa-form-tall-data input:focus,
.qa-form-tall-data textarea:focus {
  outline: 2px solid var(--ip-primary);
  outline-offset: -1px;
  border-color: var(--ip-primary);
}

.qa-form-tall-button,
.qa-form-wide-button,
button.qa-form-tall-button {
  background: var(--ip-primary-dark);
  color: #FFFFFF;
  border: none;
  padding: 9px 22px;
  border-radius: var(--ip-radius-sm);
  font-family: var(--ip-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.qa-form-tall-button:hover { background: var(--ip-hover-dark); }
.qa-form-tall-button:active { background: var(--ip-active-dark); }

.qa-form-tall-note {
  color: var(--ip-muted);
  font-size: 13px;
  margin-top: 6px;
}
.qa-form-tall-error {
  color: var(--ip-danger);
  font-size: 13px;
  margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────
 * Pagination
 * ───────────────────────────────────────────────────────────── */

.qa-page-links {
  margin: 18px 0;
  text-align: center;
}
/* Q2A wraps page numbers in a <ul>. Strip its default bullets + vertical
   stacking so each page-link sits inline next to the "Page:" label. */
.qa-page-links ul,
.qa-page-links ol {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.qa-page-links li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.qa-page-link,
.qa-page-prev,
.qa-page-next {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border-radius: var(--ip-radius-sm);
  border: 1px solid var(--ip-primary-light);
  color: var(--ip-primary-dark);
  background: var(--ip-page-bg);
  text-decoration: none;
}
.qa-page-link:hover {
  background: var(--ip-primary-light);
  text-decoration: none;
}
.qa-page-selected {
  background: var(--ip-primary-dark);
  color: #FFFFFF;
  border-color: var(--ip-primary-dark);
}

/* ─────────────────────────────────────────────────────────────
 * Honest live-stats widget (rendered between qa-main and qa-footer)
 * ───────────────────────────────────────────────────────────── */

.ip-honest-stats {
  clear: both;
  display: flex;
  gap: 36px;
  align-items: baseline;
  justify-content: center;
  padding: 8px 24px;
  background: var(--ip-primary-lightest);
  border-top: 1px solid var(--ip-primary-light);
  border-bottom: 1px solid var(--ip-primary-light);
  color: var(--ip-primary-dark);
  font-size: 13px;
}
.ip-honest-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.ip-honest-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ip-primary-dark);
  line-height: 1.1;
}
.ip-honest-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
  color: var(--ip-muted);
}

/* ─────────────────────────────────────────────────────────────
 * Footer
 * ───────────────────────────────────────────────────────────── */

.qa-footer {
  clear: both;
  background: var(--ip-primary-dark);
  color: var(--ip-primary-light);
  padding: 10px 28px;
  font-size: 12.5px;
}
.qa-footer a {
  color: #FFFFFF;
}
.qa-footer a:hover {
  color: var(--ip-primary-light);
}
.qa-footer-sponsor {
  text-align: center;
  margin-bottom: 2px;
}
.qa-attribution {
  text-align: center;
  color: var(--ip-primary-light);
  opacity: 0.7;
  font-size: 11.5px;
}

/* ─────────────────────────────────────────────────────────────
 * Notices (success / warning / error)
 * ───────────────────────────────────────────────────────────── */

.qa-notice {
  padding: 10px 14px;
  border-radius: var(--ip-radius-sm);
  border-left: 4px solid var(--ip-primary);
  background: var(--ip-primary-lightest);
  margin-bottom: 16px;
}
.qa-notice.qa-error,
.qa-error {
  border-left-color: var(--ip-danger);
  background: #FCEFEE;
  color: var(--ip-danger);
}

/* ─────────────────────────────────────────────────────────────
 * Admin pages — keep the admin sub-nav visible against our header
 * ───────────────────────────────────────────────────────────── */

.qa-template-admin .qa-main {
  margin-right: 24px;   /* admin pages don't have the sidepanel */
}

.qa-nav-sub {
  background: var(--ip-primary-lightest);
  border-bottom: 1px solid var(--ip-primary-light);
  padding: 8px 28px;
}
.qa-nav-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.qa-nav-sub-item { margin: 0; }
.qa-nav-sub-link {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--ip-radius-sm);
  color: var(--ip-primary-dark);
  font-size: 13px;
  text-decoration: none;
}
.qa-nav-sub-link:hover {
  background: var(--ip-primary-light);
  text-decoration: none;
}
.qa-nav-sub-selected .qa-nav-sub-link {
  background: var(--ip-primary);
  color: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────────
 * Mobile responsive — collapse the header grid to a single column
 * ───────────────────────────────────────────────────────────── */

@media (max-width: 820px) {
  .qa-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "slogan"
      "navuser"
      "navmain";
    padding-top: 10px;
    row-gap: 6px;
  }
  .qa-logo { justify-self: start; }
  .qa-slogan {
    justify-self: center;
    font-size: 14px;
  }
  .qa-nav-user { justify-self: start; }
  .qa-search { justify-self: stretch; margin-bottom: 6px; }
  .qa-search-field { width: 100%; }
  .qa-nav-main-list { flex-wrap: wrap; }
  .qa-logo-img { height: 38px; }

  .qa-sidepanel {
    float: none;
    width: auto;
    padding: 16px;
  }
  .qa-main {
    margin-right: 0;
    padding: 16px;
  }

  .ip-honest-stats {
    flex-wrap: wrap;
    gap: 14px;
  }

  /* Tighter full-bleed padding on mobile */
  .qa-header,
  .ip-honest-stats,
  .qa-footer {
    padding-left: max(16px, calc((100vw - 1280px) / 2 + 16px));
    padding-right: max(16px, calc((100vw - 1280px) / 2 + 16px));
  }
  .ip-honest-stat-value { font-size: 15px; }
}