/*
 Theme Name:   Flatsome Child
 Theme URI:    https://flatsome.uxthemes.com/
 Description:  Flatsome Child Theme
 Author:       UX-Themes
 Template:     flatsome
 Version:      3.0.2
*/

/*************** 
All custom CSS should be added to Theme Options > Custom CSS 
or in the style.css of a Child Theme.
***************/

/******************** CSS for the book menu for KR and HF****************************/
.menu-table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: Arial, sans-serif;
  }

.menu-table th {
  color: #00a4e4;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: left;
  padding: 12px 10px;
  text-transform: none; /* Disables automatic capitalization */
}

  .menu-table td {
    padding: 0px;
    vertical-align: middle;
    border-bottom: 1px solid #e5e5e5;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: #c94b32;
  }

.menu-item img {
  margin-top: 20px;
}

  .menu-item.green { color: #00994d; }
  .menu-item.blue { color: #2791F5; }

/*************************** Font Lato setting ********************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap');

/* Ensure Latin text uses Lato and Chinese uses crisp system fonts */
body, p, h1, h2, h3, h4, h5, h6, .nav > li > a, .header-nav a {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

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

body, 
p, 
span,
li,
a,
h1, h2, h3, h4, h5, h6, 
.nav > li > a, 
.header-nav a {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif !important;
  font-weight: 500 !important;
}*/

/********************CSS moved from old server****************************/

.mybutton:hover {
border-radius: 20px 20px 20px 20px;
-moz-box-shadow:    0px 0px 6px 2px rgba(255, 194, 14, 0.5);
-webkit-box-shadow: 0px 0px 6px 2px rgba(255, 194, 14, 0.5);
box-shadow:        0px 0px 6px 2px rgba(255, 194, 14, 0.5);
background-color: rgba(255, 194, 14, 0.2);
}

.mybutton2:hover {
border-radius: 20px 20px 20px 20px;
-moz-box-shadow:    0px 0px 6px 2px rgba(100, 100, 100, 1);
-webkit-box-shadow: 0px 0px 6px 2px rgba(100, 100, 100, 1);
box-shadow:        0px 0px 6px 2px rgba(100, 100, 100, 1);
}

#mybutton2:hover {
opacity: 1;
border-style: solid;
border-width: 1px;
border-color: rgba(142, 216, 248, 0.6);
border-radius: 5px 5px 5px 5px;
background-color: rgba(142, 216, 248, 0.2);
background-size: 160px 29px;
background-repeat: no-repeat;
}

#mybutton3:hover {
opacity: 1;
border-radius: 5px 5px 5px 5px;
background-color: rgba(255, 247, 153, 0.4);
background-size: 160px 29px;
background-repeat: no-repeat;
}

#white-bn:hover {
opacity: 1;
border-style: solid;
border-width: 1px;
border-color: rgba(255, 255, 255, 1);
border-radius: 5px 5px 5px 5px;
background-color: rgba(255, 255, 255, 1);
background-size: 100% 100%;
background-repeat: no-repeat;
}

.mybutton-home {
border-radius: 20px 20px 20px 20px;
}

.mybutton-home:hover {
-moz-box-shadow:    0px 0px 6px 2px rgba(100, 100, 100, 1);
-webkit-box-shadow: 0px 0px 6px 2px rgba(100, 100, 100, 1);
box-shadow:        0px 0px 6px 2px rgba(100, 100, 100, 1);
}

#mybutton-notuse {
border-radius: 20px 20px 20px 20px;
margin: 1px 5px;
opacity: 0.3;
}

.mybutton-phonics:hover {
border-radius: 25px 25px 25px 25px;
-moz-box-shadow:    0px 0px 6px 2px rgba(100, 100, 100, 0.6);
-webkit-box-shadow: 0px 0px 6px 2px rgba(100, 100, 100, 0.6);
box-shadow:        0px 0px 6px 2px rgba(100, 100, 100, 0.6);
}

.mybutton-phonics-old {
border-style: solid;
border-width: 2px;
border-color: rgba(142, 216, 248, 0.8);
border-radius: 20px 20px 20px 20px;
background-color: rgba(142, 216, 248, 0.3);
}

.mybutton-phonics-old:hover {
-moz-box-shadow:    0px 0px 6px 2px rgba(100, 100, 100, 0.6);
-webkit-box-shadow: 0px 0px 6px 2px rgba(100, 100, 100, 0.6);
box-shadow:        0px 0px 6px 2px rgba(100, 100, 100, 0.6);
}

/**************** for ebook cover buttons***************/
.mybutton-ebook:hover {
border-radius: 0px 0px 0px 0px;
-moz-box-shadow:    0px 0px 6px 5px rgba(255, 194, 14, 0.5);
-webkit-box-shadow: 0px 0px 6px 5px rgba(255, 194, 14, 0.5);
box-shadow:        0px 0px 6px 5px rgba(255, 194, 14, 0.5);
background-color: rgba(255, 194, 14, 0.2);
}



/* ==========================================================================
   Fluid Grid & Column Utilities (W3-style)
   ========================================================================== */

/* 1. Ensure floats and padding do not push columns to new lines */
.w3-col,
.w3-half,
.w3-third,
.w3-twothird,
.w3-threequarter,
.w3-quarter {
  float: left !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 40px !important; /* Adds 10px left padding */
}

/* 2. Clearfix container (prevents the parent wrapper from collapsing to 0 height) */
.w3-row::after,
.w3-row-padding::after {
  content: "";
  display: table;
  clear: both;
}

/* 3. Desktop Column Widths (Active at >= 850px to match Flatsome's desktop break) */
@media (min-width: 850px) {
  .w3-col.m8  { width: 8.33333% !important; }
  .w3-col.m16 { width: 16.66666% !important; }
  .w3-col.m25, .w3-quarter { width: 25% !important; }
  .w3-col.m33, .w3-third { width: 33.33333% !important; }
  .w3-col.m41 { width: 41.66666% !important; }
  .w3-col.m50, .w3-half { width: 50% !important; }
  .w3-col.m58 { width: 58.33333% !important; }
  .w3-col.m66, .w3-twothird { width: 66.66666% !important; }
  .w3-col.m75, .w3-threequarter { width: 75% !important; }
  .w3-col.m83 { width: 83.33333% !important; }
  .w3-col.m91 { width: 91.66666% !important; }
  .w3-col.m100 { width: 100% !important; }
}

/* 4. Text & Vertical Align Utilities */
.w3-left-align   { text-align: left !important; }
.w3-right-align  { text-align: right !important; }
.w3-justify      { text-align: justify !important; }
.w3-center       { text-align: center !important; }

.w3-cell-top     { vertical-align: top !important; }
.w3-cell-middle  { vertical-align: middle !important; }
.w3-cell-bottom  { vertical-align: bottom !important; }

/************************ old *****************************/
/* Fluid Grid, Table col width:  
Reference : https://www.w3schools.com/w3css/w3css_grid.asp
m8  width:8.33%
m16  width:16.66%
m25  width:25.00%
m33  width:33.33%
m41  width:41.66%
m50  width:50.00%
m58  width:58.33%
m66  width:66.66%
m75  width:75%
m83  width:83.33%
m91  width:91.66%
m100 width:100%
w3-left-align
w3-right-align
w3-justify
w3-center
*/
/****************************.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}

@media (min-width:900px){.w3-col.m8{width:8.33333%}.w3-col.m16{width:16.66666%}.w3-col.m25,.w3-quarter{width:24.99999%}.w3-col.m33,.w3-third{width:33.33333%}
.w3-col.m41{width:41.66666%}.w3-col.m50,.w3-half{width:49.99999%}.w3-col.m58{width:58.33333%}.w3-col.m66,.w3-twothird{width:66.66666%}
.w3-col.m75,.w3-threequarter{width:74.99999%}.w3-col.m83{width:83.33333%}.w3-col.m91{width:91.66666%}.w3-col.m100{width:99.99999%}}

.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}

.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}

*************************************************/

/***** Green and Orange buttons *****/
.buttonmain {
  border: none;
  color: white;
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 10px;
}

.buttonmain-orange {
  background-color: #ff8000;
  border: 5px solid #ff8000;
  color: white; 
}

.buttonmain-orange:hover {
  background-color: #FF3600;
  border: 5px solid #FF3600;
  color: white;
}

.buttonmain-green {
  background-color: #2eb82e;
  border: 5px solid #2eb82e;  
  color: white; 
}

.buttonmain-green:hover {
  background-color: #03890F;
  border: 5px solid #03890F; 
  color: white;
}

/***** Orange demo buttons *****/
.buttondemo {
  border: none;
  color: white;
  padding: 2px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 2px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
  border-radius: 10px;
}

.buttondemo-orange {
  background-color: white;
  border: 3px solid #ff8000;
  color: #ff8000; 
}

.buttondemo-orange:hover {
  background-color: #FF3600;
  border: 3px solid #FF3600;
  color: white;
}

.buttondemo-red {
  background-color: white;
  border: 3px solid #ff0000;
  color: #ff0000; 
}

.buttondemo-red:hover {
  background-color: #ff0000;
  border: 3px solid #ff0000;
  color: white;
}

.buttondemo-blue {
  background-color: white;
  border: 3px solid #3399ff;
  color: #3399ff; 
}

.buttondemo-blue:hover {
  background-color: #3399ff;
  border: 3px solid #3399ff;
  color: white;
}

.buttondemo-green {
  background-color: white;
  border: 3px solid #2eb82e;
  color: #2eb82e; 
}

.buttondemo-green:hover {
  background-color: #2eb82e;
  border: 3px solid #2eb82e;
  color: white;
}
/***** Orange demo small buttons *****/
.buttondemosmall {
  border: none;
  color: white;
  padding: 5px 10px 8px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
  border-radius: 5px;
}

.buttondemosmall-blue {
  background-color: #00ccff;
  border: 1px solid #00ccff;
  color: white; 
}

.buttondemosmall-blue:hover {
  background-color: white;
  border: 1px solid #00ccff;
  color: #00ccff;
}

/**************************** new buttons ************************/
/* Smoothly shrink button by 10% on hover */
.press-btn {
  display: inline-block;
  transition: transform 0.2s ease !important;
}

.press-btn:hover {
  transform: scale(0.9) !important; /* 10% smaller */
}

/*************************login css**************************/
/* --- Yellow Card Container --- */
#loginform {
    background-color: #fab800; /* Warm sunflower yellow */
    border-radius: 28px;
    padding: 30px 28px 24px;
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 16px;
}

#loginform p {
    margin: 0;
    padding: 0;
}

/* --- Full-Width Fields (Username & Password) --- */
#loginform .login-username,
#loginform .login-password {
    grid-column: 1 / -1;
    position: relative;
}

/* --- Labels --- */
#loginform label {
    display: block;
    font-size: 16px;
    color: #2b2b2b;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* --- Inputs --- */
#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100% !important;
    height: 42px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 2px !important;
    font-size: 16px !important;
    color: #333333 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: none !important;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
    border-color: #0082c8 !important;
    background-color: #ffffff !important;
}

/* --- Remember Me (Bottom Left, Single Line) --- */
#loginform .login-remember {
    grid-column: 1;
    align-self: center; /* Aligns vertically with the blue Login button */
    margin: 0;
}

#loginform .login-remember label {
    display: inline-flex !important;
    flex-direction: row !important; /* Puts checkbox and text side-by-side */
    align-items: center !important;  /* Centers checkbox vertically against text */
    gap: 8px !important;            /* Space between checkbox and text */
    font-size: 15px;
    color: #2b2b2b;
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;            /* Prevents the text from wrapping */
}

#loginform .login-remember input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    border-radius: 3px;
    border: 1px solid #ccc;
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Blue Submit Button (Bottom Right) --- */
#loginform .login-submit {
    grid-column: 2;
    align-self: flex-end;
    margin: 0;
}

#loginform .login-submit input[type="submit"] {
    background-color: #0082c8 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    height: 38px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background-color 0.2s ease !important;
}

#loginform .login-submit input[type="submit"]:hover {
    background-color: #006da8 !important;
}