/**
 * guest.css
 *
 * Guest CSS
 * This covers the core and shared CSS items.
 * To keep this clean, template specific CSS is included as part of their view (injected via blade)
 *
 * Objects are "namespaced" where possible/appropriate by:
 *  - specifying directly within a containing element class
 *  - prefixing with ku- or lda-
 *
 * @category  None
 * @package   \
 * @author    Rick Morice <rick@floor9design.com>
 * @copyright Lda Manchester Ltd (thisislda.com)
 * @license   Private software
 * @version   0.0.0
 * @link      https://kumon.org
 * @see       https://thisislda.com/
 * @since     File available since Release 0.0.0
 */

@font-face {
    font-family: "Be Vietnam Pro";
    src: url('/fonts/BeVietnamPro-Medium.ttf');
}

/* common style */

.line-through {
    text-decoration: line-through !important;
}

em, i {
    color: var(--ku-text);
    font-style: italic;
}

.hidden {
    display: none;
}

.full-width {
    width: 100%;
}

.inline-block {
    display: inline-block;
}

p {
    font-size: var(--ku-font-size-small);
}

/* Main page setup */

body {
    /* set fonts and body/global styles */
    background: var(--ku-white);
    color: var(--ku-text);
    font-family: 'Be Vietnam Pro', sans-serif;
}

.ku-container {
    /* the actual site width limit : aligns where the container ends */
    margin-left: auto;
    margin-right: auto;
    max-width: var(--ku-container-width);
}

@media (max-width:var(--ku-resolution-max-width-mobile))  {
    /* smartphones, Android phones, landscape iPhone */

}

.ku-container-full {
    /* to be used when items (eg colours/lines) are to reach full width */
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.ku-container-small {
    /* to be used when items are enclosed in a smaller space */
    margin-left: auto;
    margin-right: auto;
    max-width: var(--ku-container-width-small);
}

.ku-container-margin-padded {
    /* this mimics .ku-container-padding : allowing you to align to where text ends */
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--ku-container-width) - (2 * var(--ku-container-padding)));
}

.ku-container-padding {
    /* this adds a gutter that offers padding : allowing you to align to where text ends */
    box-sizing: border-box;
    padding-left: var(--ku-container-padding);
    padding-right: var(--ku-container-padding);
}


cite {
    font-style: normal;
}

p.image {
    margin: 0;
}

/* buttons */

.ku-pillbox,
.ku-pillbox-div {
    /* the main button: extend this with a colour */
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 54px;
    padding-left: 27px;
    padding-right: 27px;
    border-radius: 27px;
    text-decoration: none;
    margin: 2px;
    transition: all var(--ku-transition-speed);
    color: var(--ku-text);
    font-size: var(--ku-font-size-small);
}

.ku-pillbox:hover {
    filter: brightness(120%);
}

.ku-pillbox-wider {
    padding-left: 50px;
    padding-right: 50px;
}

.ku-pillbox-widest {
    padding-left: 65px;
    padding-right: 65px;
}

.ku-pillbox-shorter {
    height: 44px;
}

.ku-pillbox-text-medium {
    font-size: var(--ku-font-size-medium);
}

.ku-pillbox-div label,
.ku-pillbox-div p {
    margin: 0;
    padding: 0;
    font-size: var(--ku-font-size-small);
}

.ku-pillbox-input:focus-visible {
    outline: none;
}

.ku-pillbox-pagination {
    margin: 0;
    border: none;
    color: var(--ku-light)!important;
    background: var(--ku-blue-purple);
}

.ku-pillbox-pagination-disabled {
    margin: 0;
    border: none;
    color: var(--ku-text);
    background: var(--ku-grey-light);
}

.ku-pillbox-mint {
    background-color: var(--ku-mint);
}

.ku-pillbox-yellow-orange {
    background-color: var(--ku-yellow-orange);
}

.ku-pillbox-yellow-orange:hover {
    background-color: var(--ku-yellow-orange);
}

.ku-pillbox-pinkish-red {
    background-color: var(--ku-pinkish-red);
}

.ku-pillbox-blue-cyan {
    background-color: var(--ku-blue-cyan);
}

.ku-pillbox-blue-cyan-transparent {
    background-color: var(--ku-blue-cyan-transparent);
}

.ku-pillbox-blue-purple {
    background-color: var(--ku-blue-purple);
    color: var(--ku-white);
}

.ku-pillbox-dark {
    background-color: var(--ku-dark);
    color: var(--ku-light);
}

.ku-pillbox-white {
    background-color: var(--ku-light);
    color: var(--ku-dark);
    border: 1px solid var(--ku-grey-light);
}

.ku-pillbox-dark:hover {
    filter: brightness(160%);
}

.ku-pillbox-teal-blue {
    background-color: var(--ku-teal-blue);
    color: var(--ku-text);
}

.ku-pillbox-light {
    background-color: var(--ku-light);
    color: var(--ku-text);
}

/* generic backgrounds */

.ku-blue-cyan-fade {
    background: linear-gradient(180deg, var(--ku-blue-cyan-transparent) 0%, rgba(227, 229, 236, 0) 300px);
}

/* insets */

.ku-inset {
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 0;
    flex-wrap: wrap;
    gap: 40px;
    padding-left: 60px;
}

.ku-inset li {
    list-style-type: none;
    background: url("/images/elements/arrow-icon.svg") no-repeat center 230px var(--ku-light);
    box-sizing: border-box;
    padding: 0;
    border-radius: 32px;
    border: var(--ku-border-width-medium) solid var(--ku-invisible);
    text-align: center;
    transition: all var(--ku-transition-speed);
    box-shadow: 0 20px 30px #00000028;
    display: flex;
    align-items: center;
    justify-content: center;
    /* some defaults */
    width: 210px;
    height: 295px;
    margin: 0;
}

.ku-inset li:hover {
    border: var(--ku-border-width-medium) solid var(--ku-blue-cyan);
    transition: all var(--ku-transition-speed);
    background-image: url("/images/elements/arrow-icon-blue.svg");
}

/* background "half strips" */

.ku-background-half-strip-light,
.ku-background-half-blue-purple {
    margin-bottom: var(--ku-container-padding);
}

.ku-background-half-strip-light {
    background: linear-gradient(90deg, var(--ku-light), var(--ku-light) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}
.ku-background-half-strip-light  > div:first-child {
    background: var(--ku-light);
    border-radius: var(--ku-half-strip-border-radius);
}

.ku-background-half-blue-purple {
    background: linear-gradient(90deg, var(--ku-blue-purple), var(--ku-blue-purple) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
}

.ku-background-half-blue-purple-rounded {
    background: var(--ku-blue-purple);
    border-radius: var(--ku-half-strip-border-radius);
}

/* Forms */

.ku-form-control {
    box-sizing: border-box;
    width: 100%;
    margin: 20px 0;
    display: flex;
    align-items: center;
}

.ku-form-control input,
.ku-form-control textarea,
.ku-form-control input[type=checkbox],
.ku-form-control input[type=radio]{
    box-sizing: border-box;
    border: none;
    font-size: var(--ku-font-size-small);
    color: var(--ku-dark);
    width: 100%;
    padding: 20px;
    border-radius: 30px;
}

.ku-form-control textarea {
    min-height: 200px;
}

.ku-form-control input[type=checkbox],
.ku-form-control input[type=radio]{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 20px;
}

/* bootstrap fixes - drop down menu */

.dropdown-menu.show {
    top: 46px;
    border: none;
    padding: 30px;
    border-radius: 0 0 25px 25px;
}

#ku-header-main-language-col .dropdown-menu.show {
    top: 70px;
}

.dropdown-menu {
    box-shadow: 0 20px 30px #00000028;
}

.dropdown-item {
    margin: 10px 0;
}

a.dropdown-item {
    padding: 10px 80px 10px 10px;
    background: url("/images/elements/menu-arrow-right-teal-blue.svg") no-repeat calc(100% - 10px) 50%;
    background-size: 15px;
    transition: all var(--ku-transition-speed);
}
a.dropdown-item:hover {
    background-image: url("/images/elements/menu-arrow-right-dark.svg");
    transition: all var(--ku-transition-speed);
    text-decoration: underline;
}

/* boostrap fixes */
.accordion-button {
    color: var(--ku-dark);
}

.accordion-button:not(.collapsed) {
    /* remove the annoying "border" in an accordion */
    box-shadow: none !important;
    color: var(--ku-dark);
}

/* Round Image */
.ku-round-image-medium .image img {
  border-radius: 50% !important;
  width: 384px;
  height: 384px;
  min-height: 384px;
  object-fit: cover;
}

.ku-round-image-border .image img {
  border-radius: 40px !important;
  object-fit: cover;
}

.ku-round-video a {
  border-radius: 50%;
  background-position-x: 0px !important;
  min-width: 234px !important;
}
.ku-round-video a img {
  margin-left: -24px;
}

article + [data-readmore-toggle], article[data-readmore] a {
  display: inline-grid!important;
  width: auto!important;
  margin: 10px 0 0 0;
}

article {
  max-height: 6em;
}
/* Show 8 lines on larger screens */
@media screen and (min-width: 640px) {
  article {
    max-height: 12em;
  }
}

/* Helpers */
.ku-mb-0 {
    margin-bottom: 0;
}
.ku-mt-0 {
    margin-top: 0;
}
.ku-my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.ku-background-cover {
    background-size: cover!important;
}
.ku-background-contain {
    background-size: contain!important;
}
.ku-background-auto {
    background-size: auto!important;
}