/**
 * Theme Name:        KIM 2026
 * Theme URI:         https://kiminoayawin.com/
 * Version:           1.0.0
 * Author:            Erin Ringland
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

:root {
  --primary-colour: #422680;
  --secondary-colour: #341671;
  --tri-colour: #280659;
  --contrast-one-colour: #660f56;
  --contrast-two-colour: #ae2d68;
  --contrast-three-colour: #f54952;

  --dull-colour: #544F6E;
  --black: #111113;
  --white: #efefef;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.show {
  display: contents!important;
}

.none {
  display: none;
}

/**
** Structure
*/

html {
	margin-top: 0!important;
}

body {
  background: var(--dull-colour);
}

nav ul {
  list-style: none;
}

/**
** Header
*/

header {
  background-color: var(--white);
  margin: 0;
  display: flex;
  justify-content: center;
}

#header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 20px;
}

#header-logo h1 {
  color: var(--tri-colour);
  font-size: 20px;
  width: 60%;
}

#top-menu {
  background: var(--black);
  width: 100%;
  display: none;
}

#top-menu ul {
  display: flex;
  justify-content:flex-end;
  align-items: center;
  height: 50px;
}

#top-menu ul li a {
  color: var(--contrast-two-colour);
  font-size: 12px;
  margin: 10px;
  padding: 10px;
  text-decoration: none;
}

#top-menu ul li a:hover {
  color: var(--contrast-two-colour);
  background: var(--white);
}

#site-logo img {
  max-width: 100px;
  padding: 50px 0 10px 0;
}

#main-menu-ele {

}

#main-menu {
  display: none;
}

#main-menu a {
  text-decoration: none;
  color: var(--contrast-two-colour)
}

.main-menu > li {
  position: relative;
  display: block;
  height: 40px;
  padding: 0 20px;
  float: left;
}

.main-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  display: none;
  text-align: left;
  width: 250px;
  margin-left: -75px;
  padding: 10px;
  background-color: var(--white);
  font-size: 13px;
}

.main-menu .sub-menu li {
  display: block;
  text-align: left;
  border-bottom: 1px dotted #d0d0d0;
  padding: 10px 0;
}

.main-menu .sub-menu li {
  padding: 10px 0;
 }

.main-menu > li:hover .sub-menu {
  display: block;
}

#mobile-menu-ele {
  width: 100%;
  position: fixed;
  background-color: var(--white);
}

#mobile-menu-btn {
  background: var(--dull-colour);
  color: var(--white);
  border: 0;
  width: 100%;
  height: 30px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

#mobile-menu-btn button:hover {
  cursor: pointer;
}

#mobile-menu {
  height:100%; 
  width: 100%;
  z-index: 999;
  padding: 25px;
}

#mobile-menu ul li {
  padding-bottom: 5px;
}

#mobile-menu ul li ul li {
  padding-left: 10px;
}

#mobile-menu .sub-menu {
  padding-bottom: 0;
  padding-top: 5px;
}

/**
** Page Structure
*/

#main {
  padding: 25px 10px;
  line-height: 1.75;
}

#main h1, h2, h3, h4, h5 {
  padding-bottom: 15px;
}

#main h3 {
  font-size: 20px;

}

#main h4 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#main h5 {
  font-size: 16px;
  font-style: italic;
  letter-spacing: 5px;
}

#main p {
  padding-bottom: 15px;
}

#main ul {
  padding-left: 25px;
}

#main ul li {
  padding-bottom: 10px;
}

#main ul li ul li {
  padding-bottom: 0px;
}

/**
** Page Banners
*/

#lg-banner {
  height: 400px;
  width: 100%;
  background: var(--black);
}

#sm-banner {
  height: 250px;
  width: 100%;
  background: var(--black);
}

/**
** Footer
*/

footer {
  background-color: var(--black);
  padding: 50px 25px;
  display: flex;
  gap: 50px;
  flex-direction: column;
  font-size: 13px;
  justify-content: center;
  align-items: center;
  color: var(--white);
}

#footer-site {
  text-align: center;
  max-width: 300px;
  width: 100%;
  margin: auto;
}

#footer-site h1 a { 
  text-decoration: none;
  color: var(--white);
  font-size: 25px;
}

#footer-logo img{
  width: 100%;
  max-width: 150px;
}

#footer-menu {
  min-width: fit-content;
}

#footer-menu ul li {
  padding: 10px 10px 0px 10px;
}

#footer-menu ul li ul {
  padding: 10px 10px 0px 10px;
}

#footer-menu .sub-menu {
  padding-top: 0px;
}

#footer-menu a {
  text-decoration: none;
  padding: 5px;
  color: var(--contrast-three-colour);
}

#footer-menu a:hover {
  text-decoration: none;
  background-color: var(--contrast-three-colour);
  color: var(--white);
}

#footer-text {
  max-width: 300px;
  width: 100%;
}

/**
** Media Queries
*/

/**   Tablet    */

@media screen and (min-width: 400px) and (max-width: 789px) { 
  #footer-text {
    max-width: none;
  }
}

  /**   Desktop   */

@media screen and (min-width: 790px) { 
  header {
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 20px;
  }
  #mobile-menu-ele {
    display: none;
  }
  #site-logo img {
    padding: 25px 0;
  }
  #top-menu {
    display: inline;
    flex-grow: 999;
  }
  #main-menu {
    display: flex;
  }
  #main {
    max-width: 1000px;
    margin: auto;
  }
  footer { 
    flex-direction: row;
  }
  #footer-site{
    margin: 0;
  }
}

/**   Both    */

@media screen and (min-width: 400px) { 
  #header-logo h1 {
    width: 220px;
  }
}