.page-content-container {
  max-width: 800px; /* Override page.css default 720px */
}


label {
  display: inline-block;

  margin-top: 12px;
  margin-bottom: 5px;

  font-weight: bold;
}

input, textarea, select {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;

  font-family: "Calibri", serif;
  border: 1px solid var(--lightgrey);
  border-radius: 4px;
}

textarea {
  /*
  The following calculation returns the height of 2 lines of text (1.5 is the line height,
  set in reset.css).
  box-sizing: content-box is necessary to make sure the min-height is applied to the
  area where text can actually be written (i.e. the content of the textarea), instead of
  being eaten up by the textarea's padding/border/margin.
  */
  box-sizing: content-box;
  min-height: calc(2 * 1.5em);
  /* Account for parent padding + textarea border since we're in content-box */
  max-width: calc(100% - 22px);
  resize: vertical; /* Allow vertical resizing only */
}


/* ---------- Section style ---------- */

section {
  margin-top: 30px;
  padding: 20px;

  background-color: var(--rosewhite);
  border: 1px solid var(--lightgrey);
  border-radius: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* --- List action buttons (add or remove item) --- */
.list-action-button {
  /* Center button icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 36px;
  height: 36px;
  padding: 0;

  background-color: transparent;
  border-color: transparent;
  border-radius: 50%; /* Round button */
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.list-action-button svg {
  width: 22px;
  height: 22px;
}

.list-action-button:hover, .list-action-button:focus {
  outline-style: solid;
  outline-color: transparent;
}

.list-action-button.add-item-button {
  color: #0F9D58;
}

.list-action-button.add-item-button:hover, .list-action-button.add-item-button:focus {
  background-color: #80CC3326;
}

.list-action-button.remove-item-button {
  color: #DB4437;
}

.list-action-button.remove-item-button:hover, .list-action-button.remove-item-button:focus {
  background-color: #D9268026;
}


/* --- List container and items --- */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-item > input, .list-item > textarea, .list-item > select {
  /* We remove the initial bottom margin because the vertical spacing between the
   list items is already handled by the list container (using flexbox' gap).
   Also, having no bottom margin makes vertically centering the remove item button easier */
  margin-bottom: 0;
}


.utensils-section h3, .instructions-section h3 {
  margin-bottom: 12px;
}


/* ---------- Instructions section ---------- */
#instructions-list {
  padding-left: 25px;
}

#instructions-list > li::marker {
  font-weight: bold;
  color: var(--nutmeg);
}

.instruction-item {
  padding-left: 10px;
}

.instruction-item > textarea {
  /*
  The desired vertical position of the marker is at the top of the item content.

  However, some testing showed that this position depends on the min-height
  of the textarea. More specifically, the marker appears to be positioned at the
  center of the textarea's min-height, starting from the top (remark: this is only true
  if the textarea's min-height is greater than the height of a line of text. Otherwise,
  the marker is positioned at the top of the textarea, aligned with the textarea's first
  line of text).

  The min-height of the textarea is previously set to 2 lines of text (see above).
  We change this to one line height, so that the marker is correctly positioned at the
  top of the textarea.
  */
  min-height: 1.5em;
  height: calc(3 * 1.5em);
}


/* ---------- JSON output section ---------- */
.json-output-container h3 {
  margin-bottom: 10px;
  color: var(--soot);
}

.json-textarea-container {
  position: relative; /* To absolute position the copy button inside */
}

#json-output {
  min-height: 400px;

  background-color: #f8f9fa;
  font-family: monospace;
  font-size: 0.9em;
  border: 1px dashed #ccc;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* --- Generate JSON button --- */
.generate-json-button {
  display: block;
  margin: 35px auto 50px auto; /* Center the button horizontally */
  padding: 12px 18px;

  background-color: var(--nutmeg);
  color: white;
  border-color: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.generate-json-button:hover {
  opacity: 0.85;
}

.generate-json-button:active {
  background-color: #6a3828;
  opacity: 1;
}


/* ---------- Copy JSON button ---------- */
.copy-json-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  top: 8px;
  right: 8px;

  padding: 6px 10px;

  background-color: var(--lightgrey);
  font-size: 0.8em;
  border: 1px solid var(--umber);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.copy-json-button:hover {
  background-color: #c9bdb1;
}

.copy-json-button:active {
  background-color: #dbd3cb;
  transition: none; /* Disable transition on active state */
}

.copy-json-button svg {
  width: 16px;
  height: 16px;
}