/* 
 * New.hulp.nl - Responsive Styles
 * Based on original Hulp.nl
 */

/* Mobile First Approach */
@media only screen and (max-width: 47.9375em) { /* < 768px */
  /* Top Bar */
  .top-bar__logo img {
    width: 85px;
    height: 64px;
  }
  
  .top-bar__navigation-label {
    display: none;
  }
  
  .top-bar__navigation-item--sign-up .button {
    display: none;
  }
  
  /* Hero */
  .hero--homepage {
    padding: 3rem 0;
  }
  
  .hero__title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  
  .hero__byline {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  
  /* Category Tiles */
  .category-tiles__list {
    flex-direction: column;
  }
  
  .category-tile {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Process Steps */
  .process-steps__list {
    flex-direction: column;
  }
  
  .step {
    margin-bottom: 2rem;
  }
  
  /* Footer */
  .footer__nav {
    flex-direction: column;
  }
  
  .footer__bottom {
    flex-direction: column;
  }
  
  .footer__social {
    margin-top: 1rem;
  }
  
  /* Cookie Notice */
  .cookie-notice {
    flex-direction: column;
  }
  
  .cookie-notice__text {
    margin-bottom: 1rem;
  }
}

/* Tablet */
@media only screen and (min-width: 48em) and (max-width: 54.9375em) { /* 768px - 879px */
  .category-tile {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .footer__nav-column {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Desktop */
@media only screen and (min-width: 55em) { /* >= 880px */
  .content-container {
    padding: 0 2rem;
  }
  
  .top-bar__pay-off {
    display: block;
  }
  
  .hero--homepage {
    padding: 5rem 0 1rem;
  }
  
  .hero__title {
    font-size: 3rem;
    line-height: 3.5rem;
  }
  
  .hero__byline {
    font-size: 1.25rem;
    max-width: 80%;
    margin: 0 auto;
  }
  
  .category-tiles__list {
    margin: 0 -1.5rem;
  }
  
  .category-tile {
    padding: 1.5rem;
  }
  
  .process-steps {
    padding: 5rem 0;
  }
  
  .process-steps__title {
    margin-bottom: 3rem;
  }
  
  .footer {
    padding: 5rem 0 3rem;
  }
  
  .footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer__social {
    margin-top: 0;
  }
}

/* High-resolution displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* Optimize images for high-resolution displays */
  .top-bar__logo img,
  .category-tile__icon,
  .step__icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Print styles */
@media print {
  .cookie-notice,
  .top-bar__navigation,
  .footer {
    display: none !important;
  }
  
  .hero--homepage {
    padding: 2rem 0;
    background-color: transparent;
  }
  
  .category-tile__inner {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .button {
    border: 1px solid #000;
    background-color: transparent !important;
    color: #000 !important;
  }
}