/*
  This css file is for individual users to restyle items for their personal site,
  or for the implementation of features specifically for their site. Anything that
  is an official part of the theme (ex. Pull Requests) should be included in main.css
  and follow the formatting and style given.
*/
/* static/css/add-on.css */

/* Impor font dari Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* Customisasi Header*/
#site-header {
  background-color: #2f1967 !important;
  color: white !important;
}

h1.nav-title a.nav {
  color: #ffffff !important;
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

h1.nav-title a.nav:hover {
  color: #e0e0e0 !important;
  transform: scale(1.1);
}

#share-menu {
  height: 100% !important;
  background-color: #2f1967 !important;
}

#share-menu h1 {
  color: #ffffff !important;
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#lang-menu {
  height: auto !important;
  background-color: #2f1967 !important;
  color: white !important;
}

#site-nav {
  height: 100% !important;
}

#site-nav-menu {
  height: auto !important;
}

#site-nav-menu a.nav[href="/"],
#site-nav-menu a.nav[href="/about"],
#site-nav-menu a.nav[href="/blog"],
#site-nav-menu a.nav[href="/categories"],
#site-nav-menu a.nav[href="/contact"],
#site-nav-menu a.nav[href="/id/"],
#site-nav-menu a.nav[href="/id/about"],
#site-nav-menu a.nav[href="/id/blog"],
#site-nav-menu a.nav[href="/id/categories"],
#site-nav-menu a.nav[href="/id/contact"] {
  font-family: "Roboto", sans-serif !important;
  letter-spacing: none !important;
  font-weight: bold !important;
  letter-spacing: normal !important;
  background-color: #2f1967 !important;
  color: white !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#site-nav-menu a.nav[href="/"]:hover,
#site-nav-menu a.nav[href="/about"]:hover,
#site-nav-menu a.nav[href="/blog"]:hover,
#site-nav-menu a.nav[href="/categories"]:hover,
#site-nav-menu a.nav[href="/contact"]:hover,
#site-nav-menu a.nav[href="/id/"]:hover,
#site-nav-menu a.nav[href="/id/about"]:hover,
#site-nav-menu a.nav[href="/id/blog"]:hover,
#site-nav-menu a.nav[href="/id/categories"]:hover,
#site-nav-menu a.nav[href="/id/contact"]:hover {
  color: #e0e0e0 !important;
  transform: scale(1.1);
}

/* Header*/
#site-header {
  background-color: #2f1967 !important;
  color: white !important;
}

h1.nav-title a.nav {
  color: #ffffff !important;
  font-family: "Playfair Display", serif !important;
  font-size: 1rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

h1.nav-title a.nav:hover {
  color: #e0e0e0 !important;
  transform: scale(1.1);
}

#share-menu {
  height: 100% !important;
  background-color: #2f1967 !important;
}

#share-menu h1 {
  color: #ffffff !important;
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

#lang-menu {
  height: auto !important;
  background-color: #2f1967 !important;
  color: white !important;
}

#site-nav {
  height: 100% !important;
}

#site-nav-menu {
  height: auto !important;
}

#site-nav-menu a.nav[href="/"],
#site-nav-menu a.nav[href="/about"],
#site-nav-menu a.nav[href="/blog"],
#site-nav-menu a.nav[href="/categories"],
#site-nav-menu a.nav[href="/contact"],
#site-nav-menu a.nav[href="/id/"],
#site-nav-menu a.nav[href="/id/about"],
#site-nav-menu a.nav[href="/id/blog"],
#site-nav-menu a.nav[href="/id/categories"],
#site-nav-menu a.nav[href="/id/contact"] {
  font-family: "Roboto", sans-serif !important;
  letter-spacing: none !important;
  font-weight: bold !important;
  letter-spacing: normal !important;
  background-color: #2f1967 !important;
  color: white !important;
  font-size: 0.9rem !important;
  text-transform: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#site-nav-menu a.nav[href="/"]:hover,
#site-nav-menu a.nav[href="/about"]:hover,
#site-nav-menu a.nav[href="/blog"]:hover,
#site-nav-menu a.nav[href="/categories"]:hover,
#site-nav-menu a.nav[href="/contact"]:hover,
#site-nav-menu a.nav[href="/id/"]:hover,
#site-nav-menu a.nav[href="/id/about"]:hover,
#site-nav-menu a.nav[href="/id/blog"]:hover,
#site-nav-menu a.nav[href="/id/categories"]:hover,
#site-nav-menu a.nav[href="/id/contact"]:hover {
  color: #e0e0e0 !important;
  transform: scale(1.1);
}

#site-nav-menu a.nav.link.share-toggle,
#site-nav-menu a.nav.link.search-toggle {
  background-color: #41228e !important; /* Warna hitam */
}

/* Body */

body {
  background-color: white !important; /* Warna latar belakang abu-abu muda */
}

/* Kustomisasi site-intro */
#site-intro img {
  width: auto !important;
  height: 175px !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2) !important;
}

#site-intro h1 {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-transform: none !important;
}

#site-intro p {
  font-family: "Roboto", sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 0.9rem !important;
}

#site-intro > footer > ul.socnet-icons > li > a {
  color: #000000 !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#site-intro > footer > ul.socnet-icons > li > a:hover {
  color: #4a4a4a !important;
  transform: scale(1.1);
}

/* Kustomisasi site-main */
article.post {
  background-color: #ffffff !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

#site-main article.post header .title h2 a {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-transform: none !important;
}

#site-main article.post header .title p {
  font-size: 0.7rem !important;
  font-family: "Roboto", sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
}

#site-main article.post header .meta {
  letter-spacing: normal !important;
  text-transform: none !important;
}

#site-main article.post header .meta time {
  font-family: "Playfair Display", serif !important;
}

#site-main article.post .content p {
  font-family: "Roboto", sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
}

#site-main article.post footer a.button.big {
  background-color: #2f1967 !important;
  color: #ffffff !important;
  border: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#site-main article.post footer a.button.big:hover {
  background-color: #c82333 !important;
  color: #e0e0e0 !important;
  transform: scale(1.05);
}

/* Site-sidebar */

#recent-posts header h1 {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-transform: none !important;
}

article.mini-post {
  background-color: #ffffff !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

#recent-posts article.mini-post header h2 {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-transform: none !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

#recent-posts article.mini-post header time {
  font-family: "Playfair Display", serif !important;
}

#recent-posts footer a.button {
  background-color: #41228e !important;
  color: #ffffff !important;
  border: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#recent-posts footer a.button:hover {
  background-color: #c82333 !important;
  color: #e0e0e0 !important;
  transform: scale(1.05);
}

#categories header h1 {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-transform: none !important;
}

#categories ul {
  font-family: "Roboto", sans-serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-transform: capitalize !important;
}

#mini-bio header h1 {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-align: center !important;
  text-transform: none !important;
}

#mini-bio p {
  letter-spacing: normal !important;
  text-align: center !important;
  text-transform: none !important;
}

#mini-bio footer a.button {
  background-color: #41228e !important;
  color: #ffffff !important;
  border: none !important;
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#mini-bio footer a.button:hover {
  background-color: #c82333 !important;
  color: #e0e0e0 !important;
  transform: scale(1.05);
}

/* Footer */

#site-footer ul {
  color: black !important;
}

#site-footer p {
  color: black !important;
  font-size: 0.9rem !important;
  letter-spacing: normal !important;
  text-align: center !important;
  text-transform: none !important;
}

/* About */
#site-main a[href="/about"] {
  font-family: "Playfair Display", serif !important;
  letter-spacing: normal !important;
  color: black !important;
  text-align: center !important;
  text-transform: none !important;
}