/* Layout */
.generator-layout {
  display: flex;
  gap: 1rem;
}

.generator-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.buttons-group {
  display: flex;
  flex-direction: column; /* stack button above fieldset */
  gap: 1rem;
  align-items: flex-start; /* prevent stretching, align to content */
}

/* Side box */
.generator-side {
  width: 200px;          /* desired desktop width */
  align-self: stretch;    /* same height as generator-main */
  background-color: #111;
  color: white;
  border: 2px solid white;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

/* Output */
#genFrenchName {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: left;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  color: white;
  background-color: #111;
  min-width: 40ch;
}

/* Main generator button */
#buttonFrench {
    display: inline-block;
    margin: 0;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  background-color: #111;
  color: white;
  border: 2px solid white;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

#buttonFrench:hover {
  background-color: red;
  border-color: red;
  color: #111;
}

/* Fieldset styling */
.fieldset {
  width: fit-content; /* shrink to content */
  min-width: unset;   /* override min-width if previously set */
}

.fieldset, legend {
  border: 2px solid white;
  border-radius: 0.5rem;
  padding: 1rem;
  color: white;
  background-color: #111;
}

.fieldset legend {
  display: table;
  margin: 0 auto 0;
  font-weight: bold;
  color: red;
}

/* Radio buttons */
.fieldset input[type="radio"] {
  accent-color: red;
}

.fieldset label {
  margin-left: 0.25rem;
}

/* Mobile / small screen */
@media (max-width: 600px) {
  .generator-layout {
    flex-direction: column;
  }

  .generator-side {
    width: 100%;
    order: 1; /* appear between output and buttons */
    align-self: auto;
    height: auto; /* allow expansion */
  }

  .buttons-group {
    order: 2;
    width: 100%;
  }
}