/* GLOBAL stylesheet */


/* things to add
  calculation

  width: calc(100% / var(--number-of-items) - (var(--gap) * var(--number-of-gaps) / var(--number-of-items))); 

  try this in the main block
  width: calc(100% - 100px);
  height: calc(100vh - 100px);
  font-size: calc(2vw + 5px);
  margin: calc(2rem + 10px);  

/* more page layout (2 columns with flex or grid)
   more input types (range, textarea, ??)
*/
 

@import url(./style-osu-colors.css);


/* MOBILE devices are the base case (320px - 480px) 
  Design for mobile first.
  Other sizes inherit all this. 
  See media queries at the bottom.
*/
body {

  font-size: 14px;
  padding: 0 16px;
  line-height: 1.5;

  font-family: Cambria, Georgia, serif;
  background-color:var(--offWhite); 
  margin:0 auto;
  border: 1px solid var(--moondust);
  color:var(--rogueWave);
}

/* Page Layout ---------------------------*/
header, footer{
  background-color:var(--solarFlare);
  padding:2%;
  text-align:center;
}
header h1, header p, footer p { color:var(--bucktoothWhite);}
footer {
  margin-top:150px;
}

nav {
  padding: 1%; 
  background-color:var(--highTide);
  margin:0;
  color:var(--offWhite); 
  border-radius: 0 0 5px 5px;
  text-align:center;
}
nav a, 
nav a:visited {
  padding: 1%; 
  border-left:2px solid var(--offWhite); 
  background-color:var(--highTide);
  margin:3% 2%;
  color:var(--offWhite); 
  text-decoration:none;
  border-radius: 5px;
}  

nav a:hover {
  background-color:rgb(255, 243, 228); 
  color:var(--highTide);
}
main {
  margin:3%;
  height: calc(100vh - 1%);   
}

/* asides, figure with media -------------------*/
figure, aside {
  width: calc(100% / 2);
  border:1px solid var(--rogueWave);
}
figcaption {padding:2%;font-size:90%;}
img {width:100%;}
iframe {width:100%; height:320px;} /* use calc here */
.right {float:right;  margin:0 0% 2% 2%;}
.left {float:left;  margin:0 2% 2% 0%;}


/* Typography ----------------------------*/
code {
  background: #e9edef; /* moondust derivied*/
  padding:1%;
  font-size:90%;
}

h1, h2 {
  font-family: Georgia, serif;
}

p, li, dt, dd {
  margin:0 0 1% 0; 
}

/* Tables  ------------------------*/
table {
  border:1px solid var(--solarFlare); ;
  width:100%;
  color: var(--rogueWave);;
  background-color:var(--bucktoothWhite);

  /* Collapse is recommend to remove the automatic double line. */
  border-collapse: collapse; 
  
  /* Give the table space above it */
  margin-top:3%;
}
thead {
  background-color:var(--solarFlare);  
  padding: 2%;
}
tr th {
  font-size:85%; 
  font-family:Calibri, sans-serif;
  padding:10px;
  text-align:center;
}
tr td {
  text-align:center;
  padding:10px;
  border:1px dashed var(--solarFlare); ;
}
tr:hover {
  background-color:var(--offWhite); 
}
tr:active {color:var(--beaverOrange);}

#retrieveTable td:nth-child(5) {width:150px;}
.store {width:300px;}
#quantity {color:var(--beaverOrange); }


/* forms ---------------------------------*/
form {
  display:flex;
  font-family:inherit;
  /* flex-flow:row wrap; */ /* turn on when using media queries */
}
fieldset {
  margin:1% 2% 2% 0;
  background-color:var(--offWhite); 
  border:1px solid var(--highTide);
  background-color:var(--bucktoothWhite);
  width: calc(100% / 3 - 2%);
}

legend {
  color:var(--highTide); 
}
label {display:inline;}
 
#orderForm label,
#checkoutForm label {
  display:block;
  margin:5% 0 0 0;
  line-height:1;
}
input {max-width:auto;}
input[type="number"] {width:100px;}
textarea {height:300px; width:95%;}
button, select {
  padding:3%; 
  border:transparent;
  border-radius:3px;
  color:var(--offWhite); ;
  background-color:var(--highTide);
  font-family: Cambria, Georgia, serif;
  font-size:110%;
}
button:hover {
  background-color:var(--offWhite); ;
  color:var(--highTide);
  border:1px solid var(--highTide);
}

#response p {background-color:rgb(249, 235, 238); padding:3%}
.alert {color:var(--beaverOrange);}


/* gallery----------------------------- */
.gallery { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  justify-content:center;
  margin-bottom:2%;
}
.gallery figure {
  width: 300px;
}
.loading {
  margin:0 auto; 
}
.gallery figcaption,
.gallery figcaption strong {
  line-height:1.2;
  font-family:Calibri,sans-serif;
  font-size:80%;
}
.gallery figcaption strong {
  font-weight:900;
  font-size:1.2em;
  color:var(--tan)
}
.gallery img {
  width: 100%;
  /* border-radius: 10px; */
  border:10px solid var(--purple);
}
.gallery img:hover {
  box-shadow: 1px 0 15px 5px var(--purpleT);
  cursor:zoom-in;
}

 
/* Modal-----------------------------*/
.modal {
  display: none;                /* start hidden */
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: var(--highDesertT);
  z-index: 9999;
  justify-content: center;      /* center modal content */
  align-items: center;
}

.modal-content {
  background: var(--moondust);
  padding: 2rem;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 20px var(--paddletailBlack);
  border-radius: 5px;
  text-align:center;
}
 
#closeModal {
  /* margin-top: 1rem; */
  font-size: 1.2rem;
  background-color: var(--highTide);
  color: var(--bucktoothWhite);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  position:absolute;
  top:150px;
}
#closeModal:hover {
  background-color: var(--rogueWave);
}
.sr-only { /* Screen Readers */
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Cart -------------------------------*/
#checkoutForm,
.cartGallery {
  display:flex;
}
fieldset#cartItems {
  width: calc(100%);
}
/* Cart Template Items */
#cartItemTemplate {}

.cartGallery figure {
 width:200px;
}

/* in the figure */
.image-item {}
.item-title {}
.item-description {}
.item-price {}
.lazy-img {}
.quantity-text {}

/* quantity controls */
.quantityControls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
} 
.decrease {}
.increase {}
.remove {}

/* section of items in the cart */
#cartItems {}
.cartGallery {}
#cartTotal {}

/* Pagination ----------------------------*/
#pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

#pagination button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 5px;
  border: 1px solid var(--highTide);
  background-color: var(--highTide);
  color: var(--bucktoothWhite);
  cursor: pointer;
  transition: background-color 0.2s;
}

#pagination button.active,
#pagination button:hover {
  background-color: var(--offWhite);
  color: var(--highTide);
}


/* Notification ----------------------*/
#notification {
  background: green;
  color: white;
  padding: 1rem 2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999; /* Higher than modal */
  transform: translate(-50%, -50%);
  display: none; /* hidden by default */
  border-radius: 6px;
  font-weight: bold;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  text-align: center;
}


/* POSITIONING --------------------------------
  Add ID based rules so that the letters O, S and U are displayed as follows
  The font-size for each letter must be 100px.
  The letter O must be in orange, S in black and U in grey.
  S must be displayed below O and to its right.
  U must be displayed below S and to its right.
*/
#o, #s, #u {
  font-size:100px;
}
#o {color:var(--luminance); }
#s {color:var(--paddletailBlack); 
  position:relative; 
  top: 60px;}
#u {
  color:var(--coastline); 
  position:relative; 
  top: 140px;
}


/* MEDIA QUERIES inherit the body above ---------------*/

/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {
  body {
    font-size: 15px;
    padding: 0 20px;
  }
}

/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
  body {
    font-size: 16px;
    padding: 0;
    max-width: 90%;
    margin: 0 auto;
  }
}

/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {
  body {
    font-size: 18px;
    padding: 0;
    max-width: 80%;
  }
}

/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {
  body {
    font-size: 20px;
    padding: 0;
    max-width: 70%;
  }
  .gallery figure {
    width: 367px;
  }
}