/* =========================================
   HILOTHAI1688 - RESPONSIVE CSS
   Mobile First Responsive Design
========================================= */


/* =========================================
   SMALL MOBILE
   320px - 374px
========================================= */

@media (max-width: 374px) {

  .header-container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .site-logo {
    max-width: 145px;
  }

  .site-logo img {
    height: 40px;
  }

  .menu-toggle {
    width: 42px;
    height: 42px;
  }


  /* Hero */

  .hero-section {
    padding:
      var(--space-8)
      14px
      var(--space-6);
  }

  .hero-heading h1 {
    font-size: 1.85rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }


  /* Hero Content */

  .hero-content {
    padding: var(--space-4);
  }

  .hero-content p {
    font-size: 0.9rem;
  }


  /* CTA */

  .btn {
    min-height: 56px;
    padding-left: var(--space-4);
    padding-right: var(--space-4);

    font-size: 1rem;
  }


  /* Content */

  .content-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .content-container article {
    padding: var(--space-5);
  }

  .content-container h2 {
    font-size: 1.25rem;
  }


  /* Bottom Navigation */

  .bottom-nav-item {
    padding-left: 2px;
    padding-right: 2px;
  }

  .nav-icon {
    font-size: 1.4rem;
  }

  .nav-text {
    font-size: 0.62rem;
  }

}


/* =========================================
   LARGE MOBILE
   480px+
========================================= */

@media (min-width: 480px) {

  .header-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .content-section {
    padding-left: 24px;
    padding-right: 24px;
  }

  .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }


  /* Hero */

  .hero-heading h1 {
    font-size: 2.7rem;
  }

  .hero-subtitle {
    font-size: 1.3rem;
  }


  /* CTA */

  .btn {
    min-height: 64px;
  }


  /* Bottom Navigation */

  .nav-text {
    font-size: 0.75rem;
  }

}


/* =========================================
   TABLET
   768px+
========================================= */

@media (min-width: 768px) {

  body {
    padding-bottom: 0;
  }


  /* Header */

  .header-container {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }

  .site-logo {
    max-width: 200px;
  }


  /* Hero */

  .hero-section {
    padding:
      var(--space-12)
      var(--container-padding-tablet)
      var(--space-10);
  }

  .hero-container {
    max-width: 850px;
  }

  .hero-heading h1 {
    font-size: 3.2rem;
  }

  .hero-subtitle {
    font-size: 1.4rem;
  }


  /* Hero Image */

  .hero-image {
    max-width: 800px;
  }


  /* Hero Content */

  .hero-content {
    padding: var(--space-6);
  }


  /* CTA Buttons */

  .cta-buttons {
    flex-direction: row;
  }

  .btn {
    width: 50%;
  }


  /* Content */

  .content-section {
    padding:
      var(--space-8)
      var(--container-padding-tablet)
      var(--space-16);
  }

  .content-container {
    max-width: 850px;
  }

  .content-container article {
    padding: var(--space-8);
  }


  /* Footer */

  .site-footer {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }


  /* Bottom Navigation
     ซ่อนบน Tablet และ Desktop
  */

  .bottom-navigation {
    display: none;
  }

}


/* =========================================
   DESKTOP
   1024px+
========================================= */

@media (min-width: 1024px) {


  /* Header */

  .site-header {
    position: sticky;
  }

  .header-container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }


  /* Logo */

  .site-logo {
    max-width: 220px;
  }


  /* Hide Hamburger */

  .menu-toggle {
    display: none;
  }


  /* Desktop Navigation */

  .mobile-menu {
    position: static;

    width: auto;

    padding: 0;

    display: flex !important;
    flex-direction: row;

    background: transparent;

    border: none;

    box-shadow: none;
  }

  .site-header {
    display: flex;
    align-items: center;
  }

  .mobile-menu {
    margin-left: auto;
    margin-right: var(--container-padding-desktop);
  }

  .mobile-menu a {
    width:120px;

    padding: 12px 18px;

    border-bottom: none;

    font-size: 0.95rem;
  }

  .mobile-menu a:hover {
    padding-left: 18px;

    color: var(--color-primary);
  }


  /* Hero */

  .hero-section {
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
  }

  .hero-container {
    max-width: 950px;
  }

  .hero-heading h1 {
    font-size: 3.8rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }


  /* Hero Image */

  .hero-image {
    max-width: 900px;
  }


  /* Hero Content */

  .hero-content {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
  }


  /* CTA */

  .cta-buttons {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
  }


  /* Content */

  .content-container {
    max-width: 950px;
  }

}


/* =========================================
   LARGE DESKTOP
   1200px+
========================================= */

@media (min-width: 1200px) {

  .header-container {
    max-width: var(--container-width);
  }

  .hero-container {
    max-width: 1050px;
  }

  .content-container {
    max-width: 1050px;
  }

}


/* =========================================
   EXTRA LARGE DESKTOP
   1440px+
========================================= */

@media (min-width: 1440px) {

  .hero-heading h1 {
    font-size: 4rem;
  }

}


/* =========================================
   LANDSCAPE MOBILE
========================================= */

@media (
  max-height: 500px
) and (
  orientation: landscape
) {

  .bottom-navigation {
    min-height: 60px;
  }

  .bottom-nav-item {
    min-height: 60px;
  }

  .nav-icon {
    font-size: 1.25rem;
  }

  .nav-text {
    font-size: 0.6rem;
  }

}


/* =========================================
   TOUCH DEVICES
========================================= */

@media (hover: none) {

  .btn:hover {
    box-shadow: inherit;
  }

  .mobile-menu a:hover {
    padding-left: 10px;
  }

}


/* =========================================
   HOVER DEVICES
========================================= */

@media (hover: hover) {

  .btn:hover {
    transform: translateY(-2px);
  }

  .bottom-nav-item:hover {
    background: rgba(212, 175, 55, 0.05);
  }

}


/* =========================================
   HIGH RESOLUTION DISPLAY
========================================= */

@media (min-resolution: 2dppx) {

  img {
    image-rendering: auto;
  }

}