/**
 * PHP app overrides and additions (test, user, lang switch, etc.).
 * Base styles are in general.css (original design).
 * Includes former general.css customisations: conditional main padding,
 * td/.bordered split, form and input behaviour.
 */

/* Main padding when no section (non-designed pages) */
main:not(:has(section)) {
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 30px;
}
main {
  padding-left: 80px;
  padding-right: 80px;
}
main:has(section) {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 768px) {
	main:not(:has(section)) {
	  padding-left: 10px;
	  padding-right: 10px;
	  padding-bottom: 30px;
	}
}

/*
 * Exercise pages: fluid side gutters — stay narrow until the viewport is quite wide,
 * then grow slowly (overrides main { padding-left: 80px } on these pages only).
 * 90rem ≈ 1440px: below that, gutter is 12px; above, adds ~1px per 16px of width up to 64px.
 */
main:has(test),
main:has(.test-content),
main:has(.exercise-page-container),
main:has(.feedback-page) {
  --exercise-inline-gutter: clamp(
    12px,
    12px + (100vw - 90rem) / 16,
    64px
  );
  /* Copy-fitted exercises: cap line length on very wide desktops */
  --exercise-content-max-width: 1800px;
  padding-left: var(--exercise-inline-gutter);
  padding-right: var(--exercise-inline-gutter);
}

/* Default td: no gray box (design applies it to all td; we limit to .bordered).
   Override design’s white-space: nowrap so content wraps by default and doesn’t break layout.
   Where nowrap is needed, add class td-nowrap to the table or to specific td so designers can see and control it. */
td {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.bordered td {
  background-color: var(--lightergray);
  box-shadow: 0.05rem 0.05rem 0.1rem 0.04rem rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}
/* Opt-in nowrap: use class td-nowrap on table or on td when no-wrap is required */
table.td-nowrap td,
td.td-nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
  word-wrap: normal;
}

/* Form: keep simpler layout (design’s flex/max-width can break some app forms) */
form {
  display: block;
  max-width: none;
  gap: 0;
  align-items: unset;
}

/* input/select/textarea: width 100% from design breaks many app forms */
input, select, textarea {
  width: auto;
  max-width: 100%;
}

/* Nav actions (LOG IN / SIGN UP): prevent label wrapping on mobile */
.nav-actions .botaored,
.nav-actions .botaowhite {
  white-space: nowrap;
  min-width: 5.5rem;
}

/* Language switch button */
.lang-switch-btn-wrap {
  position: fixed;
  top: 6rem;
  right: 1rem;
  z-index: 100;
}
.lang-switch-btn-wrap .botao {
  margin: 0;
  padding: 0.35rem 0.9rem;
  font-size: var(--pequeno);
}
@media (max-width: 900px) {
  .lang-switch-btn-wrap {
    top: 4.25rem;
    right: 0.25rem;
  }
  .lang-switch-btn-wrap .botao {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.2;
    width: auto !important;
  }
}

/* Bordered table (e.g. exercises table) – cell spacing */
.bordered {
  border-collapse: separate;
  border-spacing: 2px;
}

/* Test/exercise content from DB: use full width, wrap text (no overflow); same padding as feedback page */
test,
.test-content {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: min(var(--exercise-content-max-width, 1800px), 100%);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  box-sizing: border-box;
  padding-top: 1.5rem;
}
/* Outer layout table (contains #question): must use table layout so tbody fills width */
test table:has(#question),
.test-content table:has(#question) {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
test table:has(#question) tbody,
.test-content table:has(#question) tbody {
  display: table-row-group;
  width: 100%;
  min-width: 100%;
}
test table:has(#question) tr,
.test-content table:has(#question) tr {
  display: table-row;
}
/* Form that contains the layout table: don’t constrain width (overrides design form max-width) */
test form:has(table:has(#question)),
.test-content form:has(table:has(#question)) {
  width: 100%;
  min-width: 100%;
  max-width: none;
}
/* Default table chrome only — width is set per context in CHANGE-2026-Q1 below and shell rules above */
test table,
.test-content table {
  max-width: 100%;
  box-sizing: border-box;
}
test #question,
test [id="question"],
.test-content #question {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ==========================================================================
   CHANGE-2026-Q1-QUESTION-TABLE-WIDTH — BEGIN
   Question + help/suggestions DB tables: size to content, cap at 100%.
   Fixes image+text rows stretching apart at width: 100%.
   (Tables in #question, .exercise-db-html, and #suggestions — not shell/layout tables.)

   Revert: restore the block marked CHANGE-2026-Q1-QUESTION-TABLE-WIDTH-REVERT
   below, and delete this BEGIN…END section (both generalphp.css and test.css).
   ========================================================================== */
test #question table,
.test-content #question table,
.exercise-db-html table,
test #suggestions table,
.test-content #suggestions table {
  display: table;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  table-layout: auto;
  box-sizing: border-box;
}
.exercise-db-html table td,
test #suggestions table td,
.test-content #suggestions table td {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
test #question table > tbody > tr > td:first-child:has(img),
.test-content #question table > tbody > tr > td:first-child:has(img),
test #suggestions table > tbody > tr > td:first-child:has(img),
.test-content #suggestions table > tbody > tr > td:first-child:has(img) {
  width: 1%;
  max-width: 220px;
  vertical-align: top;
}
/* CHANGE-2026-Q1-QUESTION-TABLE-WIDTH — END */

/* CHANGE-2026-Q1-QUESTION-TABLE-WIDTH-REVERT (previous behaviour — keep for easy rollback)
test #question table,
.test-content #question table {
  display: table;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
.exercise-db-html table {
  width: max-content;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .exercise-db-html table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: auto;
  }
  .exercise-db-html table td {
    width: 100%;
    max-width: 100%;
  }
}
*/

test #question tbody,
.test-content #question tbody {
  display: table-row-group;
  width: auto;
}
test #question tr,
.test-content #question tr {
  display: table-row;
}
test #question td,
.test-content #question td {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}
test #question p,
.test-content #question p {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
/* Empty <p></p> / lone-<br> paragraphs collapse to ~0 height without inline content */
test #question p:empty,
test #question p:has(> br:only-child),
.test-content #question p:empty,
.test-content #question p:has(> br:only-child),
.exercise-db-html p:empty,
.exercise-db-html p:has(> br:only-child) {
  min-height: 1.3em;
  margin-bottom: 0.75rem;
}
test #question img,
.test-content #question img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Write exercises: single full-width answer box ({text} → textarea) */
test #question textarea,
.test-content #question textarea,
.exercise-db-html textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  resize: vertical;
}

/* Embedded media in exercise content (video, YouTube iframe, etc.) */
test #question video,
test #question iframe,
test #question embed,
test #question object,
.test-content #question video,
.test-content #question iframe,
.exercise-db-html video,
.exercise-db-html iframe,
.exercise-db-html embed,
.exercise-db-html object,
test #description video,
test #description iframe,
.test-content #description video,
.test-content #description iframe,
test .dica video,
test .dica iframe,
.test-content .dica video,
.test-content .dica iframe {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  max-height: min(100vh, 100dvh);
  border: 0;
}

test #question video,
.test-content #question video,
.exercise-db-html video,
test #description video,
.test-content #description video,
test .dica video,
.test-content .dica video {
  width: auto;
  height: auto;
}

test #question iframe,
test #question embed,
test #question object,
.test-content #question iframe,
.exercise-db-html iframe,
.exercise-db-html embed,
.exercise-db-html object,
test #description iframe,
.test-content #description iframe,
test .dica iframe,
.test-content .dica iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   Exercise DB HTML flag: question content from database (the $question field only).
   When reporting display issues with an exercise, refer to class "exercise-db-html"
   or selector ".exercise-db-html" (e.g. "table inside .exercise-db-html overflows").
   The description ($descr) is a separate field and is not part of this flag.
   -------------------------------------------------------------------------- */
.exercise-db-html {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  box-sizing: border-box;
}
/* Question table sizing: see CHANGE-2026-Q1-QUESTION-TABLE-WIDTH in generalphp.css */
/* Only when first cell contains an image: keep that column narrow so text column gets space (question+textarea tables stay balanced) */
.exercise-db-html table td:first-child:has(img) {
  width: 1%;
  max-width: 220px;
  vertical-align: top;
}
.exercise-db-html table img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}

/* Exercise “description” (target group, e.g. 3.º Ciclo do Ensino Básico). Separate field from question; ensure HTML inside wraps. */
test #description,
.test-content #description {
  font-family: var(--ff1);
  font-weight: var(--fw3);
  font-size: var(--tx);
  color: var(--lightgray);
  line-height: var(--esp);
  margin: 0 0 0.75rem 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  box-sizing: border-box;
}
test #description p,
.test-content #description p {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
test #description p:empty,
test #description p:has(> br:only-child),
.test-content #description p:empty,
.test-content #description p:has(> br:only-child) {
  min-height: 1.3em;
  margin-bottom: 0.75rem;
}
test #description table,
.test-content #description table {
  max-width: 100%;
  table-layout: fixed;
}
test #description td,
.test-content #description td {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
test #description img,
.test-content #description img {
  max-width: 100%;
  height: auto;
}

/*
 * Word list / answer bank (legacy help HTML: <div id="wordlist">…</div>).
 * Usually rendered inside #suggestions; ~750 exercises use this pattern.
 */
test #wordlist,
.test-content #wordlist {
  background-color: var(--lightyellow);
  color: var(--darkgray);
  margin: 0.75rem 0 1rem 0;
  padding: 0.65rem 0.85rem 0.85rem;
  border-radius: 6px;
  box-sizing: border-box;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
test #wordlist h1,
.test-content #wordlist h1 {
  font-family: var(--ff1);
  font-weight: var(--fw1);
  font-size: var(--pequeno);
  color: var(--red);
  margin: 0 0 0.5rem 0;
  padding: 0;
  line-height: var(--esp);
}
test #wordlist table,
.test-content #wordlist table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}
test #wordlist td,
.test-content #wordlist td {
  vertical-align: top;
  padding: 0.2rem 0.5rem 0.2rem 0;
  font-size: var(--tx);
}
test #wordlist img,
.test-content #wordlist img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Suggestions/help block in test (top, scroll, or side cell) – stylable hook */
test #suggestions,
.test-content #suggestions {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Selects inside #question: less tall than general input/select */
test #question select,
.test-content #question select,
.exercise-db-html select {
  padding: 0.25rem 0.5rem;
  min-height: 0;
  height: auto;
  line-height: 1.3;
}

@media (max-width: 768px) {
  test #question select,
  .test-content #question select,
  .exercise-db-html select {
    padding: 0.12rem 0.4rem;
    line-height: 1.25;
  }
}

section.new-page {
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 30px;
  padding-top: 30px;
}