/*
   Hands-on Project 3-1
   Sung Kim | 6-14-26 | IST-239-W01
   Program: Lunch Menu Calculator Styling

   Purpose:
   This stylesheet defines the layout and appearance of the lunch menu calculator.
   It resets default browser styling, formats the page layout, styles the header,
   form elements, and positions the total cost display using CSS positioning.
   
   Filename: styles.css
   Related: project03-01.html, project03-01.js
*/

/* Applies box-sizing model so padding/border don't affect width */
* {
   -moz-box-sizing: border-box; /* Mozilla compatibility */
   -webkit-box-sizing: border-box; /* WebKit compatibility */
   box-sizing: border-box; /* Standard behavior */
}

/* Reset default spacing for all HTML elements */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0; /* remove default margin */
   padding: 0; /* remove default padding */
   border: 0; /* remove default border */
   font-size: 100%; /* reset font size */
   font: inherit; /* inherit font styles */
   vertical-align: baseline; /* align baseline */
}

/* Make HTML5 elements display correctly in older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block; /* force block layout */
}

/* Body layout styling */
body {
   line-height: 1; /* compact line spacing */
   width: 960px; /* fixed page width */
   background: white; /* page background color */
   margin: 0 auto; /* center page horizontally */
   font-family: Verdana, Geneva, sans-serif; /* default font */
}

/* Remove bullet points from lists */
ol, ul {
   list-style: none; /* no list styling */
}

/* Header styling */
header {
   background: #5472B2; /* blue header background */
   width: 100%; /* full width header */
   color: #FFFFFF; /* white text */
   font-size: 48px; /* large title text */
   text-align: center; /* center text */
   line-height: 1.5em; /* vertical spacing */
}

/* Main content area */
article {
   width: 960px; /* fixed width */
   height: 250px; /* fixed height */
   text-align: left; /* left align text */
   background: #FFDB70; /* yellow background */
   position: relative; /* allow absolute positioning inside */
}

/* Subheading styling */
article h2 {
   font-weight: bold; /* bold text */
   font-size: 24px; /* medium heading size */
   padding: 10px; /* spacing around text */
}

/* Form layout */
form {
   float: left; /* align form left */
}

/* Checkbox input styling */
input {
   float: left; /* align left */
   clear: left; /* stack vertically */
   margin: 10px; /* spacing around inputs */
}

/* Label styling */
label {
   float: left; /* align next to checkbox */
   font-size: 1.4em; /* readable size */
}

/* (Unused container style kept from template) */
article div {
   width: 50%; /* half width layout */
   float: right; /* align right side */
   font-size: 18px; /* text size */
   font-weight: bold; /* bold text */
}

/* Total display positioning */
aside {
   font-size: 1.5em; /* larger text */
   position: absolute; /* absolute positioning */
   left: 400px; /* horizontal placement */
   top: 20px; /* vertical placement */
}