/*
 * CricketWindies content-page shell
 *
 * Use cw-content-page on a page-specific wrapper when available. The
 * structural selectors below also cover the current MyBB Help and Contact
 * templates without requiring broad table or form rules.
 */

.cw-content-page,
#container > table.tborder,
#container > form[action="contact.php"] {
  width: min(100% - 60px, 1120px);
  margin: 18px auto 0;
}

.cw-content-page {
  padding-bottom: 32px;
}

.cw-content-page .tborder,
#container > table.tborder,
#container > form[action="contact.php"] > table.tborder {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border, #e4ddd7);
  border-radius: 5px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface, #fff);
  box-shadow: 0 1px 2px rgba(21, 32, 51, .04);
}

/* The rule above and the very first rule in this file both target
   `#container > table.tborder` (Help's un-wrapped compatibility case,
   where that one element has to serve as both the outer, width-capped
   container AND the inner table surface at once) — but they set
   contradictory `width` values, and this being the later one, its
   width:100% silently cancelled the outer rule's min(100% - 60px, 1120px)
   + centering (confirmed live: measured 1280px, uncentered, on an 1120px
   design). Restoring the outer sizing here, after both, rather than
   editing either original rule, so the fix is easy to spot and remove if
   .cw-content-page ever gets a real wrapper added around this table
   instead. */
#container > table.tborder {
  width: min(100% - 60px, 1120px);
  margin: 18px auto 0;
}

.cw-content-page .thead,
#container > table.tborder .thead,
#container > form[action="contact.php"] .thead {
  padding: 13px 16px;
  color: var(--ivory, #fff9f0);
  background: var(--maroon, #54102b);
  font-size: 14px;
  line-height: 1.2;
}

.cw-content-page .tcat,
#container > table.tborder .tcat,
#container > form[action="contact.php"] .tcat {
  color: var(--ink, #152033);
  background: var(--surface-alt, #f7f5f2);
  border-bottom: 1px solid var(--border, #e4ddd7);
}

.cw-content-page .trow1,
.cw-content-page .trow2,
#container > table.tborder .trow1,
#container > table.tborder .trow2,
#container > form[action="contact.php"] .trow1,
#container > form[action="contact.php"] .trow2 {
  color: var(--ink, #152033);
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e4ddd7);
}

.cw-content-page .trow2,
#container > table.tborder .trow2,
#container > form[action="contact.php"] .trow2 {
  background: var(--surface-alt, #fbfaf8);
}

.cw-content-page td,
#container > table.tborder td,
#container > form[action="contact.php"] > table.tborder td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border, #e4ddd7);
}

.cw-content-page tr:last-child td,
#container > table.tborder tr:last-child td,
#container > form[action="contact.php"] > table.tborder tr:last-child td {
  border-bottom: 0;
}

.cw-content-page .smalltext,
#container > table.tborder .smalltext,
#container > form[action="contact.php"] .smalltext {
  color: var(--muted, #5f6877);
  font-size: 12px;
  line-height: 1.35;
}

.cw-content-page a,
#container > table.tborder a,
#container > form[action="contact.php"] a {
  color: var(--blue-link, #07588c);
}

.cw-content-page input.textbox,
.cw-content-page textarea,
#container > table.tborder input.textbox,
#container > table.tborder input[type="text"],
#container > form[action="contact.php"] input.textbox,
#container > form[action="contact.php"] textarea {
  width: min(100%, 560px);
  min-height: 38px;
  padding: 8px 10px;
  color: var(--ink, #152033);
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong, #d5cdc7);
  border-radius: 4px;
}

.cw-content-page textarea,
#container > form[action="contact.php"] textarea {
  min-height: 150px;
  resize: vertical;
}

.cw-content-page input[type="submit"],
.cw-content-page button,
#container > table.tborder input[type="submit"],
#container > form[action="contact.php"] input[type="submit"],
#container > form[action="contact.php"] button {
  min-height: 38px;
  padding: 0 16px;
  color: var(--ivory, #fff);
  background: var(--maroon, #54102b);
  border: 1px solid var(--maroon, #54102b);
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

#container > form[action="contact.php"] {
  padding-bottom: 32px;
}

#container > form[action="contact.php"] > table.tborder td:first-child {
  width: 30%;
}

/* Shared hook for help/contact/report/permission content added later. */
.cw-content-page__title {
  margin: 0;
  color: var(--ink, #152033);
  font-size: 28px;
  line-height: 1.1;
}

.cw-content-page__intro {
  margin: 6px 0 16px;
  color: var(--muted, #5f6877);
  font-size: 14px;
}

@media (max-width: 700px) {
  .cw-content-page,
  #container > table.tborder,
  #container > form[action="contact.php"] {
    width: calc(100% - 32px);
    margin-top: 12px;
  }

  .cw-content-page .thead,
  #container > table.tborder .thead,
  #container > form[action="contact.php"] .thead {
    padding: 12px;
  }

  .cw-content-page td,
  #container > table.tborder td,
  #container > form[action="contact.php"] > table.tborder td {
    padding: 10px 11px;
  }

  #container > form[action="contact.php"] > table.tborder td:first-child {
    width: auto;
  }

  #container > form[action="contact.php"] > table.tborder td {
    display: block;
    width: 100%;
  }

  .cw-content-page input[type="submit"],
  .cw-content-page button,
  #container > form[action="contact.php"] input[type="submit"],
  #container > form[action="contact.php"] button {
    width: 100%;
  }
}