/*New css*/
/* this is the stylesheet for the responsive version of the yangga website*/
html {
  background-color: #FAFCE6;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }

  a {
    color: inherit; /* Inherit color from parent */
    text-decoration: underline; /* Underline only */
  }
  
  a:visited {
    color: inherit; /* Prevent visited links from changing color */
  }
  
  a:hover, a:focus {
    color: #cc7524;
    text-decoration: underline; /* Optional: underline or make bold */
  }
  
.container {
  max-width: 940px;
  width: 100%;
}
/*HEADER Area*/
header {
  position: relative;
  color: #10420B;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/YanggaBackM.png");
  background-size: cover;
  background-position: center;
  opacity: 0.5;
}
.title-area {
  position: relative;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.owl-head {
  animation-name: owlLoad;
  animation-duration: 2.5s;
  position: absolute;
  left: 0;
  top: 0;
  width: auto; /* Changed from 25% */
  height: 200px; /* Fixed height based on 25% of 200px title-area height */
  aspect-ratio: 1.12; /* Maintain the aspect ratio (1 / 0.89) */
  background-image: url('../images/owlhead.png');
  background-size: contain; /* Changed from cover */
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.5;
  transform: scale(.95);
  transition: all 700ms ease-in-out;
} 
.owl-head:hover {
  transform: scale(1.1) rotate(15deg) translate(10px, 10px);
  opacity: .8;
}

.title-content {
  text-align: center;
  z-index: 1;
}
h1 {
  font-size: 2rem;
  margin: 0;
}
h2 {
  font-size: 1.5rem;
  margin: 0.5rem 0 0;
}
h4 {
  font-size: 1.2rem;
  margin: 0.5rem 0 0;
}
.yangga {
  color: #FFD473;
  text-shadow: 3px 2px 5px #A0740E;
  font-size: 110%;
}
.yangga-green {
  color: #10420B;
  text-shadow: 3px 2px 5px #d1fdca;
  font-size: 110%;
}


@media screen and (max-width: 520px){
  .title-area {
    flex-direction: column;
  }
  .owl-head {
    position: relative;
  } 
  h1 {
    font-size: 1.5rem;
    margin: 0;
    /*width: fit-content;*/
  }  
  h2 {
    font-size: 1.2rem;
    margin: 0;
    margin-bottom: 4px;
    /*width: fit-content;*/
  }
}

/* owl hover */
@keyframes owlHover {
  0% {
      opacity: 0.5;
      transform: scale(0.95);
  }          
  40% {
      transform: rotate(5deg) scale(.97);
  }
  60% {
      transform: rotate(-2deg) scale(.97);
  }
  100% {
      opacity: 0.5;
      transform: scale(0.95);
  }
}

/* loading owl animation */
@keyframes owlLoad {
  0% {
      opacity: 0;
      transform: scale(0);
  }            
  45% {
      opacity: 0.5;
      transform: scale(0.9);
  }
  50% {
      opacity: 0.5;
      transform: scale(0.9);
  }
  70% {
      opacity: .55;
      transform: rotate(25deg) scale(.97);
  }
  80% {
      opacity: .55;
      transform: rotate(25deg) scale(.97);
  }
  100% {
      opacity: 0.5;
      transform: scale(0.95);
  }
}




/*NAV Area*/
nav {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 50px;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  padding-left: 3%;
  box-sizing: border-box;
}
nav ul li {
  width: 20%;
  margin-right: 1.5%;
}
nav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #10420B;
  text-decoration: none;
  background-color: rgba(241, 246, 199, 0.7);
  border: 2px solid #cbd18f;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  border-radius: 25% 25% 0 0;
  border-bottom: none;
  box-sizing: border-box;
  font-size: 1rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 20px;
}
nav ul li a:hover {
  background-color: #cbd18f;
}

.current-menu-item{
  background-color:#FAFCE6;
  color: #8a9689 ;
}

@media screen and (max-width: 750px){
  nav {
    height: 40px;
  }
  nav ul {
    padding: 0 1% 0 2%;
  }
  nav ul li {
    width: 25%;
    margin-right: 1.5%;
  }
  nav ul li a {
    padding: 10px;
  }
    
}
@media screen and (max-width: 520px){
  nav {
    height: 70px;
    padding-bottom: 4px;
    box-sizing: border-box;
  }
  nav ul {
    padding-left: 1.5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  nav ul li {
    width: 100%;
    margin-right: 0;
  }
  nav ul li a {
    padding: 0px;
    border: 2px solid #cbd18f;
    border-radius: 6px;
  }
}

/*int header, for the internal pages*/

.int-header{
  position: relative;
  color: #10420B;
  overflow: hidden;
}

.int-title-area{
  position: relative;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.int-title-area h2{
  font-weight: normal;
}

.int-owl-head{
  animation-name: owlLoad;
  animation-duration: 2.5s;
  position: absolute;
  left: 3%;
  top: 0;
  width: auto; /* Changed from 25% */
  height: 100px; /* Fixed height based on 25% of 200px title-area height */
  aspect-ratio: 1.12; /* Maintain the aspect ratio (1 / 0.89) */
  background-image: url('../images/owlhead.png');
  background-size: contain; /* Changed from cover */
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.5;
  transform: scale(.95);
  transition: all 700ms;
}


.int-owl-head:hover {
  transform: scale(1.2) rotate(20deg) translate(10px, 5px);
  opacity: 1;
}



/*MAIN area*/
main {
  display: flex;
  width: 100%;
}
/*MAIN-int page*/

.int-main{
  display: flex;
  width: 100%;
}
.int-content-area{
  padding: 10px 10px 0 10px;
  flex: 1;
}
.source{
  /**/
  margin: 0;
}
.int-nav-area{
  width: 185px;
  margin: 20px;
  box-sizing: border-box;
  display: flex;
}
.int-nav-area ul{
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.int-nav-area ul li{
  display: flex;
  list-style: none;
  /*flex: 1;*/
  margin-bottom: 10px;
}
.int-nav-area ul li a{
  flex: 1;
  display: block;
  text-decoration: none;
  color: #10420B;
  border: 2px solid #cbd18f;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  padding: 10px 20px;
  box-sizing: border-box;
  background-color: #cbceb1;
}
.int-nav-area ul li a:hover,
.int-nav-area ul li a.list-title-link:hover{
  background-color: #c3c98c;
  color: #42160b;
}
.int-nav-area ul li a.list-title-link{
  color: #FFF;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
  border: 2px solid #cbd18f;
  background-color:#637761;
}

@media screen and (max-width: 750px){
  .int-main{
    flex-direction: column;
  }
  .int-content-area{
    order: 2;
  }
  .int-nav-area{
    order: 1;
    width: 100%;
    margin-right: 0;
    margin: auto;
    /*background-color: #FAFCE6;*/
    background-color:#e1e4bf;
  }
  .int-nav-area ul{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 6px 0;
  }
  .int-nav-area ul li {
    margin: 0px;
    padding: 3px;
  }
  .int-nav-area ul li a{
    padding: 4px;
  }

}

/*int content area wordlist*/
.int-content-area h3.ica-h3 {
  color: #10420B;
  font-size: 200%;
  font-weight: normal;
  letter-spacing: 3px;
  text-align: center;
  margin: 0;
}

table.word,
table.wordlist{
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}
table.archival-sources{
  border-spacing: 0;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}
table th {
  text-align: left;
  color: #FFF;
  text-shadow: 1px 1px 0 rgba(128,128,128, .4);
  border: 2px solid #cbd18f;
  background-color: #e0fbd4;
  font-weight: 100;
  font-size: 110%;
}

table tbody tr:nth-child(even) td{
  background-color: #edefda;
}

table th,
table td {
  color: #10420B;
  border: 1px solid #cbd18f;
  padding: 10px;
  display: table-cell;
}


table td:nth-child(1) {
  font-weight: bold;
}

table td:nth-child(4) {
  font-size: 80%;
}


.col-category {
  width: 22%;
}

.col-yangga,
.col-english{
  width: 37%;
}

.col-catword{
  width: 25%;
}

.col-sound {
  width: 70px;
  padding: 0;
}

/*int contentarea page template*/

.int-content-area h3.ica-h3-sub {
  color: #10420B;
  font-size: 120%;
  font-weight: normal;
  text-align: center;
  margin: 0;
  margin-bottom: 20px;
}

.int-content-area h4.ica-h4-text {
  color: #10420B;
  font-size: 130%;
  font-weight: normal;
  letter-spacing: 1px;
  text-align: left;
  margin: 0;
  margin-top: 20px;
}

/*janggawordpage*/

.word-and-sound {
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.word p{
  font-size: 200%;
  letter-spacing: 3px;
}
.archival-sources-area p{
  font-size: 120%;
}

.archival-sources-area p{
  text-align: center;
}

.button-box{
  display: grid;
  place-items: center;
}

.toggle-button{
  display: block;
  margin: 10px;
  background-color: #FAFCE6;
  color: #10420B;
  font-size: 80%;
  border: 2px solid #cbd18f;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  padding: 10px 20px;
  box-sizing: border-box;
  align-self: auto;
}

.hidden{
  display: none;
}


.toggle-button:hover{
  background-color: #c3c98c;
  color: #42160b;
}

/* category list*/
.list-area{
  padding-top: 10px;
  column-count: 4;
  color: #10420B;
}

.list-area ul{
  padding: 0;
  margin: 0;
  list-style: none;font-size: 110%;

}

.list-area hr{
  border: none;
  border-top: 1px solid #7a7a7a1c;
}
.list-area ul li{
  padding: 10px 0;
}

/* words of this category list*/

.list-area-catword{
  padding-top: 10px;
  column-count: 3;
  color: #10420B;
}

/* words of this old source list*/

.list-area-oldword{
  padding-top: 10px;
  column-count: 2;
  color: #10420B;
}

@media screen and (max-width: 900px){
  .list-area-oldword{
    column-count: 1;
  }
}


@media screen and (max-width: 750px){
  .list-area{
    column-count: 3;
  }
  .list-area-catword{
    column-count: 2;
  }  
  .list-area-oldword{
    column-count: 1;
  }
  
}
@media screen and (max-width: 520px){
  .list-area{
    column-count: 2;
  }
  .list-area-catword{
    column-count: 1;
  }
  .list-area-oldword{
    column-count: 1;
  }}



/*MAIN-front page*/

.welcome-area {
  width: 75%;
  border-style: solid;
  border-top: none;
  border-width: 5px;
  border-color: #FFD473;
  display: flex;
  flex-direction: column;
}
.welcome-text-area {
  padding: 20px;
  flex-grow: 1;
}
.welcome-text-area h3 {
  font-size: 125%;
}
.lexeme-area {
  background-color: #FFD473;
  color: #10420B;
  border-style: solid;
  border-width: 1px;
  border-color: #e6c068;
  padding: 15px;
  text-align: center;
}
.blog-area {
  font-size: 85%;
  width: 25%;
  background-color: #cbd18f;
  color: #10420B;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
}
.blog-area h2 {
  padding: 15px;
  text-align: center;
  letter-spacing: 4px;
  margin: 0;
}

@media screen and (max-width: 750px){
  main{
    flex-direction: column;
  }
  .welcome-area{
    width: 100%;
    box-sizing: border-box;
  }
  .lexeme-area{
    padding: 5px;
  }
  .blog-area{
    width: 100%;
    font-size: .85rem;
    background-color: rgba(241, 246, 199, 1);/*#e7ecb4*/
  }
  .blog-area h2 {
    padding: 5px;
    letter-spacing: 2px;
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 520px){
  .welcome-area {
    border-style: solid;
  }
  
}
/*popup Map area*/

  /* Style for the link */
  .popup-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(250, 252, 230, 0.9);
}

/* Modal Content */
.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

/* The Close Button */
.close-map {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close-map:hover,
.close-map:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*FOOTER area*/
footer {
  font-size: 60%;
}
footer hr{
  margin-top: 40px;
  border: none;
  border-top: 1px solid #7a7a7a1c;
}
.wordpress-link{
  text-align: right;
}
.footer-nav{
  padding-bottom: 15px;

}
.footer-nav ul{
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.footer-nav ul li{
  list-style: none;
}
.footer-nav ul li a{
  display: block;
  color:#474747b1;/*hardcoded or else overwritten by chrome*/
  text-decoration: none;  /*removes link underlining and coloring*/
  padding: 0 20px;
  background-color: none;
  border: 1px solid #4747470d;
  border-radius: 4px;
}
.footer-nav ul li a:hover{
  font-size: 110%;
  background-color: #e9ebd8;
}    
.footer-nav p{
  color:#474747bd;
  margin: 0px;
  text-align: center;
}

@media screen and (max-width: 750px){
  footer hr{
    margin-top: 10px;
  }
}