/*!
 * Theme Name:  Mobile Innovation (base on Sunshine)
 * Theme URI:   https://github.com/jackryanoracoy/sunshine
 * Author:      JACKRO (Jack Ryan Oracoy)
 * Author URI:  https://jackryanoracoy.github.io
 * Email:       jackryanoracoy@gmail.com
 * Description: A Scalable and Maintainable Base Theme
 * Version:     1.0.0
 * License:     The MIT License
 * License URI: https://github.com/jackryanoracoy/sunshine/blob/master/LICENSE.txt
 * Text Domain: sunshine
 * Tags:        ITCSS, SMACSS, OOCSS, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */

/*
 * GETTING STARTED
 *
 * Get started with Sunshine, a scalable and maintainable architecture for building responsive, mobile-first web apps or sites.
 * Sunshine helps you build not only fast but scalable and maintainable web apps or sites.
 * With Sunshine you have a package that is built with the combined knowledge and effort of some great developers, from their methodology, codes, packages, etc...
 *
 *
 * CSS METHODOLOGY
 *
 * Organize project files that can better deal with CSS specifics like global namespace, cascade and selectors specificity.
 * Shares the same methodology of some popular methodologies like ITCSS, BEM, SMACSS and OOCSS.
 * This approach is to ensure everyone who participates in the development of a website works with a single codebase and speaks the same language.
 *
 * # Separated CSS codebase
 * Separate CSS codebase to several sections, this helps organized project files that can better deal with CSS specifics like global namespace, cascade and selectors specificity.
 *
 * 1. setting.css - contains custom properties (css variables), font-face, etc.
 * 2. base.css - reset and/or normalize styles, box-sizing definition, etc.
 * 3. layout.css - specific UI layouts.
 * 4. component.css - specific UI components.
 * 5. utitity.css - utilities and helper classes with ability to override anything.
 *
 *
 * # Naming convention
 * Highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand,
 * easier to work with, easier to scale, more robust and explicit, and a lot more strict.
 *
 * 1. prefix - (u) utility, (l) layout, (c) component, and (js) javascript related classes.
 * 2. classname - preferred class/object name.
 * 3. modifier - preferred modifier name.
 * 4. viewport - (sm) small, (md) medium, (lg) large, (xl) extra large.
 * 5. int - integer (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).
 * 6. others - min, max, auto.
 */

html { margin-top: 0 !important; }
#wpadminbar { opacity: 0.2; }
#wpadminbar:hover { opacity: 0.9; }

.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-current {
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #333;
  border-radius: 6px;
  background: #f5f5f5;
}
.lang-list {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.lang-list li a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
  color: #333;
}
.lang-list li a:hover {
  background: #eee;
}
.lang-switcher.open .lang-list {
  display: block;
}