/**
 * TODO: Exercise 5.2: give real quality to the style of the app:
 *       - Use a good combination of colours (color.adobe.com can help):
 *         * Apply a gradient to the main background
 *         * Improve the article style applying a white semi-transparent
 *           background, rounded borders and a little shadow.
 *       - Improve the style of the image so that any size image can perfectly
 *         fit without appearing wrong/cut/with white spaces...
 *       - Use custom fonts, one for the title and one for the rest of the app
 *       - Actually center the title
 *       - Use SVG icons for the header buttons.
 *       - Add a media query to modify the design when shown in landscape
 *       - Set 1 line ellipsis style to the description of the article so that
 *         the layout is the same independent of the text size.
 *       - Set the price and button area to the bottom in both orientation modes.
 */

/* Import font-faces for custom fonts */
@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Handlee);

/* font-face definition for the icons */
@font-face {
  font-family: 'icomoon';
  src: url(../fonts/icomoon.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Normalizing rules */
body {
  margin: 0px;
}

/* Setting these 100% heights are vital so that the scroll area
   can know its size; otherwise all the page will scroll down like
   a normal web site */
html, body {
  height: 100%;
}

html {
  font-family: 'Handlee', cursive;
}

.vertical-layout {
  display: flex;
  flex-direction: column; /* main axis direction (default: row) */
}

.horizontal-layout {
  display: flex;
  flex-direction: row; /* main axis direction (default: row) */
}

.spaced {
  justify-content: space-between; /* main axis distribution */
}

header {
  height: 44px; /* Common guidelines: iOS => 44px; Android => 56px */
  align-items: center; /* flex property for cross axis alignment */
  padding-left: 8px;
  padding-right: 8px;
  background-color: crimson;
  color: white;
}

header > span {
  flex: 1;
  display: flex; /* so that I can justify its content (text and pseudo-elements
    act as flex items) */
}

header > #menu-button {
  justify-content: flex-start;
}

header > #appName {
  justify-content: center;
  font-family: 'Pacifico', cursive;
  font-size: 1.3rem;
}

header > #cart-button {
  justify-content: flex-end;
  align-items: center;
  font-size: 0.8rem; /* for the number of products */
}

.icon::before, .icon::after {
  font-family: 'icomoon';
  font-size: 1.4rem;
  /* Better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon#menu-button::before {
  content: '\e3c7';
}

.icon#cart-button::after {
  content: '\e8cc';
}

main {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: linear-gradient(to bottom right, crimson, #FFF352);
}

article {
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 14px;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden; /* prevents the content from overflowing the rounded borders */
}

article:last-child {
  margin-bottom: 0px;
}

article > .picture {
  height: 200px;
  background-color: white; /* I set it as a fallback for the image */
  background-size: cover; /* one side: full container size; opposite side: overflows */
  background-position: center center; /* horizontally and vertically centered */
}

article > footer {
  padding: 8px;
}

article > footer > .title {
  font-weight: bold;
  font-size: 1.2rem;
}

article > footer > .description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

article > footer > .bottom {
  flex: 1;
  align-items: flex-end;
}

article > footer .button {
  border: 1px solid crimson;
  border-radius: 6px;
  padding: 3px;
  color: crimson;
  font-weight: bold;
}

#templates {
  display: none;
}

@media (orientation: landscape) {
  article.vertical-layout {
    flex-direction: row;
  }

  article > .picture, article > footer {
    flex: 1;
  }

  article > footer > .description {
    white-space: pre-wrap;
  }
}