/*
Theme Name: Saylendra Blog
Theme URI: https://saylendra.co.id/
Author: Saylendra Group
Description: WordPress blog theme matching the Saylendra Group static website style.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: saylendra-blog
*/

body {
  background: #131313;
  color: #e5e2e1;
  font-family: 'Hanken Grotesk', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.dropdown-menu {
  display: none;
}

.group:hover .dropdown-menu,
.group:focus-within .dropdown-menu {
  display: block;
}

.wp-block-image img,
.entry-content img {
  height: auto;
  max-width: 100%;
}

.entry-content {
  color: #c8c6c5;
  font-size: 18px;
  line-height: 1.75;
}

.entry-content > * + * {
  margin-top: 1.25rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: #e5e2e1;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2.5rem;
}

.entry-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.entry-content h3 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.entry-content a {
  color: #fcd726;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.entry-content blockquote {
  border-left: 4px solid #fcd726;
  color: #e5e2e1;
  font-size: 1.25rem;
  font-style: italic;
  padding-left: 1.5rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content pre,
.entry-content code {
  background: #201f1f;
  border: 1px solid #4c4733;
  color: #e5e2e1;
}

.entry-content pre {
  overflow-x: auto;
  padding: 1rem;
}

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  header nav {
    gap: 0.5rem;
    padding-bottom: 0.75rem !important;
    padding-top: 0.75rem !important;
  }

  header nav > a:first-child {
    font-size: 16px !important;
    line-height: 1.1 !important;
    max-width: 42vw;
  }

  header nav > a:last-child {
    font-size: 11px !important;
    padding: 0.5rem 0.75rem !important;
    white-space: nowrap;
  }

  header [aria-label="Language switcher"] {
    padding-left: 0.5rem !important;
  }

  header .hidden.items-center.gap-6.md\:flex {
    -webkit-overflow-scrolling: touch;
    background: rgba(19, 19, 19, 0.98);
    border-top: 1px solid #4c4733;
    display: flex !important;
    gap: 1rem !important;
    left: 0;
    overflow-x: auto;
    padding: 0.75rem 20px;
    position: absolute;
    right: 0;
    scrollbar-width: none;
    top: 100%;
  }

  header .hidden.items-center.gap-6.md\:flex::-webkit-scrollbar {
    display: none;
  }

  header .hidden.items-center.gap-6.md\:flex > a,
  header .hidden.items-center.gap-6.md\:flex button {
    flex: 0 0 auto;
    font-size: 12px !important;
  }

  header .group .dropdown-menu {
    left: 20px !important;
    position: fixed !important;
    right: 20px !important;
    top: 116px !important;
    width: auto !important;
  }

  main {
    padding-top: 120px !important;
  }

  h1,
  h2,
  h3,
  p,
  a,
  span {
    overflow-wrap: anywhere;
  }
}