/*  JavaScript 7th Edition
    Chapter 2
    Hands-on Project 2-4

    Filename: styles.css

    Purpose: Page-specific lunch order layout for Hands-on Project 2-4.
    The main retro terminal theme comes from ../../styles.css.
*/

/* =============================
   Project 2-4 Layout
   ============================= */

article {
   max-width: 960px;
   margin: 0 auto;
   padding-bottom: 2rem;
}

article h2 {
   margin-bottom: 1.25rem;
}

form {
   display: grid;
   grid-template-columns: minmax(18rem, 1fr) minmax(18rem, 1fr);
   gap: 2rem;
   align-items: start;
   max-width: 900px;
   margin: 0 auto 2rem;
   padding: 1rem;
}

/* =============================
   Lunch Selection Items
   ============================= */

input[type="checkbox"] {
   float: none;
   clear: none;
   width: 1rem;
   height: 1rem;
   margin: 0 0.75rem 0 0;
   vertical-align: middle;
}

label {
   display: block;
   float: none;
   margin-bottom: 0.85rem;
   line-height: 1.35;
}

/* =============================
   Cost Summary
   ============================= */

aside {
   position: static;
   display: grid;
   grid-template-columns: 1fr auto;
   column-gap: 2rem;
   row-gap: 0.85rem;
   align-self: start;
   padding: 0.75rem 1rem;
   outline: none;
}

aside span {
   position: static;
   width: auto;
   font-size: inherit;
}

aside span:nth-child(even) {
   text-align: right;
}

#totalLab,
#taxLab,
#billLab {
   font-weight: bold;
}

#foodTotal,
#foodTax,
#totalBill {
   min-width: 6rem;
   text-align: right;
}

/* =============================
   Small Screen Adjustments
   ============================= */

@media (max-width: 760px) {
   form {
      grid-template-columns: 1fr;
   }

   aside {
      max-width: 100%;
   }
}