@tailwind base;
@tailwind components;
@tailwind utilities;

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

*{
  font-family: 'Open Sans', 'Roboto', sans-serif;
}
html, body {
  overflow-x:hidden;
}
header{
  @apply bg-[#443E3E];
}
.header-container{
  @apply container mx-auto px-2 sm:px-4 lg:px-8;
}
.footer-container{
  @apply mx-auto px-2 sm:px-4 lg:px-8;
}
.main-container{
  @apply container flex lg:flex-row flex-col lg:pt-8 pt-20;
}
footer{
  @apply mx-auto bg-[#443E3E] min-h-[200px] text-white px-2 sm:px-4 lg:px-8 py-5;
}

main{
  @apply mx-auto min-h-[700px] px-4 lg:px-8 py-5;
}

.article-title{
  @apply font-bold text-xl;
}

.nav-item {
  @apply transition duration-500 ease-in-out transform text-green-500 uppercase hover:bg-green-700  hover:text-white py-3 px-5 inline-flex items-center text-sm font-bold;
  /* @apply text-white uppercase hover:bg-white hover:text-gray-900 py-4 px-5 inline-flex items-center text-sm font-bold; */
}
.nav-item-mobile {
  @apply text-green-500 uppercase hover:bg-white hover:text-gray-900 py-2 px-5 block items-center text-sm font-bold;
}
.nav-item-active{
  @apply bg-green-700 text-white;
  /* @apply border-b-[3px] border-b-green-400 text-green-400; */
}
.nav-item-mobile-active{
  @apply bg-green-600 text-white block;
}
.review-item-option{
  @apply text-gray-700 block px-4 py-2 text-sm;
}
.section-div{
  @apply my-5 pl-3 flex justify-between items-center border-l-4 border-green-500;
}
.section-title{
  @apply text-2xl font-bold capitalize;
}
.article-link{
  @apply flex lg:flex-row flex-col;
}
.article-info{
  @apply px-5;
}
.article-img{
  @apply lg:w-1/3 w-full rounded-l object-cover border-gray-400;
}
.article-text{
  @apply grow border-r border-b border-l border-t border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.img-grid {
  @apply relative overflow-hidden rounded cursor-pointer bg-[#443E3E] bg-opacity-60 aspect-[3/2];
}
.img-thumb{
  @apply hover:scale-110 transition-all duration-500 object-cover w-full aspect-[3/2];
}
.img-text{
  @apply absolute bottom-0 left-0 px-4 py-2 w-full bg-[#443E3E] bg-opacity-60;
  /* @apply absolute bottom-0 left-0 px-4 py-3 w-full bg-gradient-to-t from-gray-700 pt-6 to-transparent; */
}
.img-text p{
  @apply text-sm text-gray-200;
}
/* swiper */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  /* text-align: center; */
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.footer-container a {
  @apply hover:text-gray-200 text-gray-300;
}
.reader-questions a {
  @apply hover:underline;
}
.youtube-video {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #17211b;
}
.youtube-video--horizontal { aspect-ratio: 16 / 9; }
.youtube-video--vertical { width: min(100%, 31.5rem); aspect-ratio: 9 / 16; margin-inline: auto; }
.youtube-video__host, .youtube-video__host > div, .youtube-video iframe {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0;
}
.youtube-video:not([data-player-state="play-requested"]):not([data-player-state="playing"]) iframe { pointer-events: none; }
.youtube-video__button {
  position: absolute; z-index: 2; inset: 0; display: grid; width: 100%; height: 100%;
  padding: 0; place-items: center; overflow: hidden; border: 0; background: #17211b;
  color: #fff; cursor: pointer;
}
.youtube-video__thumbnail {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 180ms ease, filter 180ms ease;
}
.youtube-video--vertical .youtube-video__thumbnail { object-fit: contain; }
.youtube-video__button:hover .youtube-video__thumbnail { transform: scale(1.015); filter: brightness(0.88); }
.youtube-video__play {
  position: relative; display: grid; width: clamp(3.5rem, 9vw, 5rem); aspect-ratio: 1;
  place-items: center; border: 3px solid #fff; border-radius: 50%; background: #16803c;
  box-shadow: 0 3px 14px rgb(0 0 0 / 45%);
}
.youtube-video__play-icon {
  width: 0; height: 0; margin-left: 0.3rem; border-top: 0.7rem solid transparent;
  border-bottom: 0.7rem solid transparent; border-left: 1.1rem solid #fff;
}
.youtube-video__button:focus-visible { outline: 5px solid #facc15; outline-offset: -7px; }
.youtube-video__error {
  position: absolute; z-index: 3; inset: auto 1rem 1rem; margin: 0; padding: 0.55rem 0.75rem;
  border-radius: 0.35rem; background: rgb(0 0 0 / 78%); color: #fff; text-align: center;
}

#articleBody h3{
  @apply text-green-600 text-3xl py-2 pb-4 font-bold;
}
#articleBody h4{
  @apply text-green-600 text-2xl py-2 pb-4 font-bold;
}
#articleBody h5{
  @apply text-green-600 text-xl py-2 pb-4 font-bold;
}
h5{
  @apply text-green-600 text-xl py-2 pb-4 font-bold;
}
.question-listing p{
  @apply pb-5 text-justify leading-7;
}
#gdprText{
  @apply bg-gray-100 p-3 rounded text-sm;
}
#gdprText p{
  @apply pb-2 text-justify leading-5 text-gray-600;
}
#askIntro p{
  @apply pb-5 text-justify leading-6;
}
#askIntro p a, #gdprText p a{
  @apply text-green-600 hover:text-green-500 border-b-2 border-green-600 border-dotted;
}
#articleBody p{
  @apply pb-5 text-justify leading-7;
}
#articleBody p strong{
  @apply font-bold;
}
#articleBody p a{
  @apply text-green-600 hover:text-green-500 border-b-2 border-green-600 border-dotted;
}
#articleBody blockquote{
  @apply border-l border-green-400 pl-10 text-gray-700 italic py-2 my-2 text-justify;
}
#askForm p a{
  @apply text-green-600 hover:text-green-500 border-b-2 border-green-600 border-dotted;
}
#techspecs {
  @apply bg-green-800 pb-10 pt-5 px-10 text-white max-w-md;
}
#techspecs h3{
  @apply text-2xl py-2 font-bold pb-5;
}
#techspecs h3{
  @apply text-2xl py-2 font-bold pb-5;
}
#techspecs > table > tbody > tr {
  @apply hover:bg-green-700;
}
#techspecs > table > tbody > tr > td > strong{
  @apply font-bold text-white  font-mono;
}
#techspecs > table > tbody > tr > td{
  @apply text-xs py-1 pr-10 align-top text-gray-200  font-mono;
}
#techspecs > table > tbody > tr > td > a{
  @apply underline;
}
.breadcrumb ul {
  @apply flex;
}
.breadcrumb ul li {
  @apply pr-3;
}
.breadcrumb ul li span{
  @apply text-gray-500;
}

.breadcrumb ul li a{
  @apply hover:border-b-2 border-green-500 border-dotted text-gray-500 hover:text-black;
}
  
.breadcrumb li::before {
  content: "/";
  @apply pr-3 text-gray-500;
}
  
.breadcrumb li:first-child::before {
  content: "";
  @apply pr-0;
}
.question-listing p{
  @apply text-justify;
}
.question-listing p a{
  @apply text-green-600 hover:text-green-500 border-b-2 border-green-600 border-dotted;
}
.category-list li {
  @apply pb-2;
}
.category-list li a{
  @apply cursor-pointer bg-green-600 rounded-md text-sm text-white px-2 py-1 w-auto;
}
.category-label{
  @apply cursor-pointer bg-green-600 rounded-md text-sm text-white px-2 py-1 w-auto;
}