@font-face {
    font-family: 'KhmerOS_battambang';
    src: url('assets/fonts/KhmerOS_battambang.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('assets/fonts/KhmerOS_battambang.ttf') format('truetype'); /* Chrome 4+, Firefox 4+, Opera 10+, Safari 3—5+ */
  }
  
  @font-face {
    font-family: 'KhmerOSNew-Regular';
    src: url('assets/fonts/KhmerOSNew-Regular.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('assets/fonts/KhmerOSNew-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 1.+, Opera 10+, Safari 3—5+ */
  }
  
  @font-face {
    font-family: 'VC Light';
    src: url('assets/fonts/VC Light.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('assets/fonts/VC Light.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }
  
  @font-face {
    font-family: 'VC Italic';
    src: url('assets/fonts/VC Italic.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('assets/fonts/VC Italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }
  @font-face {
    font-family: 'Dangrek';
    src: url('assets/fonts/Dangrek.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
         url('assets/fonts/Dangrek.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  }
/*

.dropbtn {
  background-color: #F07D00;
  color: white;
  padding: 5px 10px;
  font-size: 20px;
  border: none;
  box-shadow: 1px 1px 1px 1px #ffffff;
  cursor: pointer;
  margin-top: 2px;
  
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #F07D00;
  color: #ffffff;
}

.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}
p {
	font-family: 'KhmerOS_battambang';
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 250px;
  margin-left: -250px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  line-height: 0.1em;
  z-index: 100;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  line-height: 1.5em;
}

.dropdown a:hover {background-color: #F07D00; color: #ffffff;}

.show {display: block;}
*/

/*
==========================================================================
  NEW RESPONSIVE DROPDOWN STYLES
==========================================================================
*/

/* =========================================
   1. DESKTOP: Hover Dropdowns (Screen > 64em)
   ========================================= */
/* --- MOBILE: Main Navigation Styles --- */
/* Adjust the breakpoints if your mobile menu triggers at a different width */

/* --- MOBILE MENU OVERRIDES --- */

/* 1. Ensure the parent box is relative */
.main-navigation-mobile .menu-item-has-children {
    position: relative !important; 
}

/* 2. Style the Link (The Click Trigger) */
.main-navigation-mobile .menu-item-has-children > a {
    display: block !important;
    position: relative;
    padding-right: 60px !important; /* Make room for arrow */
    cursor: pointer;
    /* Optional: Disable text selection to make it feel like an app */
    -webkit-user-select: none;
    user-select: none;
}

/* 3. The Arrow (Visual Only) */
.main-navigation-mobile .submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    pointer-events: none; /* KEY: Clicks pass through to the link */
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(0,0,0,0.05);
    z-index: 10;
}

/* Draw the Arrow */
.main-navigation-mobile .submenu-toggle::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #F07D00;
    border-bottom: 2px solid #F07D00;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* 4. Active State (Rotation) */
.main-navigation-mobile .menu-item-has-children.toggled-on > .submenu-toggle::after {
    transform: rotate(225deg) !important;
}

/* 5. The Submenu (Hidden by default) */
.main-navigation-mobile .sub-menu {
/*     display: none !important; Force hide initially */
/*     background: #fafafa; */
    padding-left: 0;
    margin: 0;
    width: 100%;
}

/* 6. Override for when JS opens it (display: block is handled by JS slideToggle, 
   but we need to allow the JS inline style to work) */
.main-navigation-mobile .menu-item-has-children.toggled-on > .sub-menu {
    /* No display rule here, let jQuery handle it */
    border-top: 1px solid #eee;
}

/* Submenu Links */
.main-navigation-mobile .sub-menu a {
    padding-left: 30px !important;
    background: transparent !important;
}