/**
 * scope-pages.css — SCOPE Conference section
 * Transforms legacy table layout → modern flexbox
 * All rules scoped to body.scope-page
 * v20260713scope2
 */

/* ── Body ── */
body.scope-page {
  background: #f1f5f9 !important;
  overflow-x: hidden !important;
}

/* ── PAGE WIDTH CONSTRAINT ───────────────────────────────────────────────
   #main-content is width:100% with no max-width in spav.min.css.
   We constrain the scope layout to 1400px centred so it never stretches
   edge-to-edge on large monitors.
─────────────────────────────────────────────────────────────────────────── */
body.scope-page #main-content,
body.scope-page .main-content {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ── FIX: css/style.css rule ".flexslider { margin-left: 150px }" causes
   the banner to push 150 px outside the container on every SCOPE page.
   Override it here with !important so specificity wins regardless of
   load order. ─────────────────────────────────────────────────────────── */
body.scope-page .flexslider,
body.scope-page #flexslider-2 {
  margin: 0 !important;
}

/* ── Clear intermediate wrapper divs that may inherit stray margins ──── */
body.scope-page .view-content {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Banner image: full-width, proportional ─────────────────────────────
   The <img> has hardcoded width="1148"/"1150" attributes. CSS width:100%
   overrides those attribute hints. overflow:hidden on the wrapper prevents
   any remaining bleed if the parent is narrower than 1148 px.
─────────────────────────────────────────────────────────────────────────── */
body.scope-page .pane-content {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}
body.scope-page .pane-content center { display: block !important; }
body.scope-page .pane-content picture,
body.scope-page .pane-content img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* ══════════════════════════════════════════════════════
   OUTER LAYOUT TABLE → FLEXBOX
   Only matches <table width="1100"> (the layout table).
   Inner content tables have different widths and are unaffected.
════════════════════════════════════════════════════════ */
body.scope-page table[width="1100"] {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-collapse: separate !important;
  padding: 1.5rem 0 !important;
  gap: 0 !important;
}
body.scope-page table[width="1100"] > tbody {
  display: flex !important;
  width: 100% !important;
}
body.scope-page table[width="1100"] > tbody > tr {
  display: flex !important;
  width: 100% !important;
  gap: 1.5rem !important;
  align-items: flex-start !important;
}

/* ── LEFT column: sidebar nav ── */
body.scope-page table[width="1100"] > tbody > tr > td:first-child {
  display: block !important;
  flex: 0 0 200px !important;
  width: 200px !important;
  padding: 0 !important;
  border: none !important;
  vertical-align: top !important;
}

/* ── RIGHT column: content ── */
body.scope-page table[width="1100"] > tbody > tr > td:nth-child(2) {
  display: block !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 1.75rem 2rem !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.07) !important;
  color: #1e293b !important;
  border: none !important;
}

/* ══════════════════════════════════════════════════════
   SIDEBAR NAVIGATION (.menu_simple)
════════════════════════════════════════════════════════ */
body.scope-page .menu_simple {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  overflow: hidden;
}
body.scope-page .menu_simple ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.scope-page .menu_simple li {
  border-bottom: 1px solid #f1f5f9 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}
body.scope-page .menu_simple li:last-child {
  border-bottom: none !important;
}
body.scope-page .menu_simple li a {
  display: block !important;
  padding: .6rem .95rem !important;
  color: #374151 !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  transition: background .15s, color .15s, padding-left .15s, border-color .15s !important;
  line-height: 1.4 !important;
}
body.scope-page .menu_simple li a:hover {
  background: #f8fafc !important;
  color: #003366 !important;
  padding-left: 1.2rem !important;
  border-left-color: #c8a84b !important;
}
body.scope-page .menu_simple li a.active {
  background: linear-gradient(90deg, rgba(200,168,75,.13), rgba(200,168,75,.03)) !important;
  color: #003366 !important;
  border-left-color: #c8a84b !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════
   CONTENT AREA TYPOGRAPHY
════════════════════════════════════════════════════════ */

/* Section title: <font color="#ff8040"> */
body.scope-page table[width="1100"] td font[color="#ff8040"],
body.scope-page table[width="1100"] td font[color="#FF8040"] {
  color: #003366 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: .85rem !important;
  padding-bottom: .55rem !important;
  border-bottom: 2px solid #c8a84b !important;
  line-height: 1.3 !important;
}

/* Category headings: <font color="#0000ff"> / "#0000a0" */
body.scope-page table[width="1100"] td font[color="#0000ff"],
body.scope-page table[width="1100"] td font[color="#0000FF"],
body.scope-page table[width="1100"] td font[color="#0000a0"],
body.scope-page table[width="1100"] td font[color="#0000A0"] {
  color: #1e40af !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  display: inline-block !important;
  margin-top: .6rem !important;
}

/* Date highlights: <font color="blue"> */
body.scope-page font[color="blue"] {
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* Publisher label: <font color="#0000a0"> outside tables */
body.scope-page font[color="#0000a0"],
body.scope-page font[color="#0000A0"] {
  color: #1e40af !important;
  font-weight: 600 !important;
}

/* h2 inside content */
body.scope-page table[width="1100"] td:nth-child(2) h2 {
  color: #003366 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #c8a84b !important;
  padding-bottom: .5rem !important;
  margin: 0 0 1rem !important;
}

/* Paragraphs and lists */
body.scope-page table[width="1100"] td:nth-child(2) p {
  color: #374151;
  line-height: 1.75;
  margin: 0 0 1rem;
}
body.scope-page table[width="1100"] td:nth-child(2) ul {
  color: #374151;
  line-height: 1.75;
  padding-left: 1.5rem;
  margin: .5rem 0 1rem;
}
body.scope-page table[width="1100"] td:nth-child(2) li {
  margin-bottom: .35rem;
}

/* Links in content */
body.scope-page table[width="1100"] td:nth-child(2) a {
  color: #003366 !important;
  text-decoration: underline;
}
body.scope-page table[width="1100"] td:nth-child(2) a:hover {
  color: #c8a84b !important;
}

/* ══════════════════════════════════════════════════════
   INNER TABLES (dates, journal list, form tables)
   Must restore table display — not affected by outer flex
════════════════════════════════════════════════════════ */
body.scope-page table[width="1100"] td:nth-child(2) table {
  display: table !important;
  width: auto !important;
  max-width: 100% !important;
  background: transparent !important;
  border-collapse: collapse !important;
  margin: .75rem 0 !important;
  height: auto !important;
}
body.scope-page table[width="1100"] td:nth-child(2) table > tbody {
  display: table-row-group !important;
}
body.scope-page table[width="1100"] td:nth-child(2) table tr {
  display: table-row !important;
}
body.scope-page table[width="1100"] td:nth-child(2) table td {
  display: table-cell !important;
  padding: .5rem .9rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #374151 !important;
  vertical-align: middle !important;
  background: transparent !important;
}
body.scope-page table[width="1100"] td:nth-child(2) table td:first-child {
  color: #374151 !important;
  white-space: nowrap;
}

/* Images inside content */
body.scope-page table[width="1100"] td:nth-child(2) img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
}

/* ── iFrame (map) ── */
body.scope-page iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 350px !important;
  border: none !important;
  border-radius: 8px !important;
  display: block;
}

/* ── Form (paper submission) ── */
body.scope-page form input[type="text"],
body.scope-page form textarea {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .875rem;
  color: #1e293b;
  background: #f9fafb;
  width: 240px;
  max-width: 100%;
  box-sizing: border-box;
  margin: 2px 0;
}
body.scope-page form textarea {
  width: 300px;
  max-width: 100%;
  min-height: 130px;
  resize: vertical;
}
body.scope-page form input[type="submit"] {
  background: #003366;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .6rem 1.5rem;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s;
  margin-top: .5rem;
}
body.scope-page form input[type="submit"]:hover {
  background: #c8a84b;
  color: #003366;
}

/* ── Hide redundant legacy secondary nav ── */
body.scope-page .sub-mainbottom,
body.scope-page #block-menu-menu-secondary-nav.block {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media(max-width: 768px) {
  body.scope-page table[width="1100"] > tbody > tr {
    flex-direction: column !important;
  }
  body.scope-page table[width="1100"] > tbody > tr > td:first-child {
    flex: none !important;
    width: 100% !important;
  }
  body.scope-page .menu_simple { position: static !important; }
  body.scope-page table[width="1100"] > tbody > tr > td:nth-child(2) {
    padding: 1.25rem 1rem !important;
  }
}