/*
 Theme Name:   DMS Academy Child Theme
 Description:  Basel child theme customized for Delores M. Smith Academy, Inc.
 Author:       Highgrade Concepts Inc.
 Author URI:   https://highgradeconcepts.com
 Template:     basel
 Version:      2.0.4
 Text Domain:  basel-child
*/

:root{
  --dms-cream:#f7f3e8;
  --dms-cream-2:#fffdf8;
  --dms-ink:#18313b;
  --dms-green:#1f6f3b;
  --dms-green-dark:#174e2f;
  --dms-green-soft:#dcefc6;
  --dms-yellow:#f6ca38;
  --dms-orange:#f05a24;
  --dms-orange-lite:#efa61d;
  --dms-pink:#f1b7be;
  --dms-blue:#a9d9e7;
  --dms-line:rgba(24,49,59,.12);
  --dms-radius:18px;
  --dms-shadow:0 12px 32px rgba(20,45,35,.08);
}

html{scroll-behavior:smooth;}
body{
  /* background:var(--dms-cream);
  color:var(--dms-ink);*/
  font-family:"Open Sans",Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,
.title,
.page-title,
.entry-title,
.widget-title{
  font-family:"Playfair Display",Georgia,serif;
  color:var(--dms-ink);
  letter-spacing:-.02em;
}

a{color:var(--dms-green);}
a:hover{color:var(--dms-green-dark);}

/* BASEL HEADER */
.main-header,
.header-spacing,
.sticky-header,
.whb-header,
.whb-sticky-header{
 /* background:rgba(255,253,248,.97)!important;*/
}

.main-header,
.whb-header{
  border-bottom:1px solid rgba(24,49,59,.06)!important;
}

.sticky-header,
.whb-sticky-header{
  box-shadow:0 10px 26px rgba(20,45,35,.08)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.main-header .container,
.main-header .container-fluid,
.whb-header .container,
.whb-header .container-fluid{
  max-width:1220px;
}

/* Logo sizing and source are intentionally left to Basel Theme Options /
   WordPress admin. The child theme must not override admin logo settings. */

/* Main navigation v2.0.1: clean pill hover, no underline */
/*
 * Basel can output slightly different menu wrappers depending on the
 * header preset. These selectors cover the classic Basel nav as well as
 * the newer WD-style header markup without changing the header structure.
 */
body .main-header .main-nav > li,
body .main-header .main-nav .menu > li,
body .sticky-header .main-nav > li,
body .sticky-header .main-nav .menu > li,
body .whb-header .wd-nav-main > li,
body .whb-sticky-header .wd-nav-main > li{
  margin:0 3px!important;
}

body .main-header .main-nav > li > a,
body .main-header .main-nav .menu > li > a,
body .sticky-header .main-nav > li > a,
body .sticky-header .main-nav .menu > li > a,
body .whb-header .wd-nav-main > li > a,
body .whb-sticky-header .wd-nav-main > li > a{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  min-height:38px!important;
  padding:8px 15px!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:999px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  /*color:var(--dms-ink)!important;*/
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  line-height:1.2!important;
  text-decoration:none!important;
  text-transform:none!important;
  transition:
    color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease!important;
}

/* Remove Basel underline/highlight rules from the anchor and its label. */
body .main-header .main-nav > li > a::before,
body .main-header .main-nav > li > a::after,
body .main-header .main-nav .menu > li > a::before,
body .main-header .main-nav .menu > li > a::after,
body .sticky-header .main-nav > li > a::before,
body .sticky-header .main-nav > li > a::after,
body .sticky-header .main-nav .menu > li > a::before,
body .sticky-header .main-nav .menu > li > a::after,
body .whb-header .wd-nav-main > li > a::before,
body .whb-header .wd-nav-main > li > a::after,
body .whb-sticky-header .wd-nav-main > li > a::before,
body .whb-sticky-header .wd-nav-main > li > a::after,
body .main-header .main-nav > li > a > span::before,
body .main-header .main-nav > li > a > span::after,
body .main-header .main-nav .menu > li > a > span::before,
body .main-header .main-nav .menu > li > a > span::after,
body .whb-header .wd-nav-main > li > a > span::before,
body .whb-header .wd-nav-main > li > a > span::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  transform:none!important;
}

/* Keep the current page clean when idle. No permanent underline or block. */
body .main-header .main-nav > li.current-menu-item > a,
body .main-header .main-nav > li.current-menu-parent > a,
body .main-header .main-nav > li.current_page_item > a,
body .main-header .main-nav .menu > li.current-menu-item > a,
body .main-header .main-nav .menu > li.current-menu-parent > a,
body .main-header .main-nav .menu > li.current_page_item > a,
body .sticky-header .main-nav > li.current-menu-item > a,
body .sticky-header .main-nav .menu > li.current-menu-item > a,
body .whb-header .wd-nav-main > li.current-menu-item > a,
body .whb-header .wd-nav-main > li.current-menu-parent > a,
body .whb-sticky-header .wd-nav-main > li.current-menu-item > a{
  background:transparent!important;
  background-image:none!important;
  color:var(--dms-yellow)!important;
  box-shadow:none!important;
}

/* Hover/focus: animated pale-green pill. */
body .main-header .main-nav > li:hover > a,
body .main-header .main-nav .menu > li:hover > a,
body .sticky-header .main-nav > li:hover > a,
body .sticky-header .main-nav .menu > li:hover > a,
body .whb-header .wd-nav-main > li:hover > a,
body .whb-sticky-header .wd-nav-main > li:hover > a,
body .main-header .main-nav > li > a:hover,
body .main-header .main-nav .menu > li > a:hover,
body .main-header .main-nav > li > a:focus-visible,
body .main-header .main-nav .menu > li > a:focus-visible,
body .whb-header .wd-nav-main > li > a:hover,
body .whb-header .wd-nav-main > li > a:focus-visible{
  background:var(--dms-orange-lite)!important;
  background-image:none!important;
  color:#ffffff !important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:0 7px 16px rgba(31,111,59,.12)!important;
  text-decoration:none!important;
  transform:translateY(-2px)!important;
}

/* Dropdown caret follows the hovered link color instead of creating a line. */
body .main-header .main-nav > li > a .menu-opener,
body .main-header .main-nav .menu > li > a .menu-opener,
body .whb-header .wd-nav-main > li > a .wd-nav-opener{
  color:inherit!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Dropdowns */
.main-nav .sub-menu,
.wd-dropdown-menu,
.dropdown-menu{
  background:#fffdf8!important;
  border:1px solid rgba(24,49,59,.08)!important;
  border-radius:14px!important;
  box-shadow:0 18px 42px rgba(20,45,35,.12)!important;
  padding:10px!important;
}

.main-nav .sub-menu li a,
.wd-dropdown-menu a,
.dropdown-menu a{
  border-radius:10px!important;
  padding:10px 12px!important;
  color:var(--dms-ink)!important;
  transition:background-color .2s ease,transform .2s ease!important;
}

.main-nav .sub-menu li a:hover,
.wd-dropdown-menu a:hover,
.dropdown-menu a:hover{
  background:var(--dms-orange-lite)!important;
  color:var(--dms-orange)!important;
  transform:translateX(2px);
}

/* Header CTA or buttons */
.main-header .btn,
.main-header .button,
.whb-header .btn,
.whb-header .button,
.header-links .btn,
.header-links .button{
  background:var(--dms-yellow)!important;
  color:var(--dms-ink)!important;
  border:0!important;
  border-radius:999px!important;
  font-weight:700!important;
  box-shadow:none!important;
  padding:12px 22px!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
.main-header .btn:hover,
.main-header .button:hover,
.whb-header .btn:hover,
.whb-header .button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.12)!important;
}

/* MOBILE NAV */
.mobile-nav,
.mobile-menu-wrapper,
.wd-side-hidden{
  background:#fffdf8!important;
}
.mobile-nav .menu li a,
.mobile-menu-wrapper .menu li a,
.wd-nav-mobile li a{
  color:var(--dms-ink)!important;
  border-radius:10px;
}
.mobile-nav .menu li a:hover,
.mobile-menu-wrapper .menu li a:hover,
.wd-nav-mobile li a:hover{
  background:var(--dms-green-soft)!important;
}

/* GLOBAL BUTTONS */
.btn,
.button,
button,
input[type="submit"],
.vc_btn3{
  border-radius:999px;
}

.btn.btn-color-primary,
.button.btn-color-primary,
.vc_btn3.vc_btn3-color-primary,
input[type="submit"]{
  background:var(--dms-green)!important;
  color:#fff!important;
  border-color:var(--dms-green)!important;
}

.btn.btn-color-primary:hover,
.button.btn-color-primary:hover,
.vc_btn3.vc_btn3-color-primary:hover,
input[type="submit"]:hover{
  background:var(--dms-green-dark)!important;
  border-color:var(--dms-green-dark)!important;
}

/* CONTENT / WPBAKERY */
.site-content,
.main-page-wrapper,
.page-wrapper{
  background:var(--dms-cream);
}

.vc_row{
  box-sizing:border-box;
}

.wpb_single_image img,
.entry-content img{
  height:auto;
}

/* Common DMS card language */
.dms-card,
.dms-panel,
.wpb_wrapper .dms-card,
.wpb_wrapper .dms-panel{
  border-radius:var(--dms-radius);
  overflow:hidden;
}

/* FORM SYSTEM */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea{
  background:#fffdf8!important;
  color:var(--dms-ink)!important;
  border:1px solid rgba(24,49,59,.14)!important;
  border-radius:10px!important;
  box-shadow:none!important;
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--dms-green)!important;
  box-shadow:0 0 0 3px rgba(31,111,59,.08)!important;
}

/* FOOTER
.footer-container{
  background:#fffdf8!important;
  color:var(--dms-ink)!important;
  border-top:1px solid rgba(24,49,59,.06);
  padding-top:50px;
}

.footer-container .container{
  max-width:1180px;
}

.footer-container .widget-title,
.footer-container h3,
.footer-container h4{
  color:var(--dms-ink)!important;
  font-family:"Playfair Display",Georgia,serif!important;
  font-weight:700;
}

.footer-container a{
  color:var(--dms-ink)!important;
  transition:color .2s ease,transform .2s ease;
}
.footer-container a:hover{
  color:var(--dms-green)!important;
}

.footer-container ul li{
  margin-bottom:8px;
}
.footer-container ul li:before{
  color:var(--dms-green)!important;
}

.copyrights-wrapper,
.min-footer,
.footer-copyrights{
  background:var(--dms-green)!important;
  color:#fff!important;
  border:0!important;
}

.copyrights-wrapper a,
.min-footer a,
.footer-copyrights a{
  color:#fff!important;
}*/

/* SOCIAL ICONS */
.social-icons a,
.basel-social-icons a,
.footer-container .social-icons a{
  width:34px!important;
  height:34px!important;
  line-height:34px!important;
  border-radius:50%!important;
  background:var(--dms-green)!important;
  color:#fff!important;
  border:0!important;
}
.social-icons a:hover,
.basel-social-icons a:hover,
.footer-container .social-icons a:hover{
  background:var(--dms-green-soft)!important;
  color:#fff!important;
}

/* BREADCRUMBS / TITLES */
.page-title-default,
.page-title,
.title-wrapper{
  background:var(--dms-cream)!important;
}
.breadcrumbs,
.basel-breadcrumbs{
  color:#6a777c!important;
}
.breadcrumbs a,
.basel-breadcrumbs a{
  color:var(--dms-green)!important;
}

/* SPACING / RESPONSIVE */
@media (max-width:991px){
  .main-header .container,
  .main-header .container-fluid,
  .whb-header .container,
  .whb-header .container-fluid{
    padding-left:18px;
    padding-right:18px;
  }
  .footer-container{padding-top:38px;}
}

@media (max-width:767px){
  body{font-size:14px;}
  .footer-container{padding-top:30px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}


/* ============================================================
   NAVIGATION REFINEMENT v2.0.2
   Fixes oversized hover pill and Basel's nested dropdown panel.
   ============================================================ */

/* Keep the classic Basel desktop menu vertically centered without letting
   its links inherit the full header-row height. */
@media (min-width: 992px){
  body .main-header .main-nav,
  body .sticky-header .main-nav,
  body .main-header .main-nav .menu,
  body .sticky-header .main-nav .menu{
    height:100%!important;
  }

  body .main-header .main-nav .menu,
  body .sticky-header .main-nav .menu{
    display:flex!important;
    align-items:center!important;
  }

  body .main-header .main-nav .menu > li,
  body .sticky-header .main-nav .menu > li{
    display:flex!important;
    align-items:center!important;
    align-self:stretch!important;
    height:auto!important;
    min-height:0!important;
    margin:0 2px!important;
    padding:0!important;
  }

  /* The pill itself is intentionally compact. Basel normally stretches
     top-level anchors to the full header height, which caused the tall oval
     shown in the live-site screenshot. */
  body .main-header .main-nav .menu > li > a,
  body .sticky-header .main-nav .menu > li > a{
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:0 16px!important;
    line-height:42px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  body .main-header .main-nav .menu > li:hover > a,
  body .sticky-header .main-nav .menu > li:hover > a,
  body .main-header .main-nav .menu > li > a:hover,
  body .sticky-header .main-nav .menu > li > a:hover,
  body .main-header .main-nav .menu > li > a:focus-visible,
  body .sticky-header .main-nav .menu > li > a:focus-visible{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    padding:0 16px!important;
    line-height:42px!important;
    border-radius:999px!important;
    transform:translateY(-1px)!important;
    box-shadow:0 5px 13px rgba(31,111,59,.11)!important;
  }

  /* Prevent any inherited line-height from making labels/carets taller than
     the pill. */
  body .main-header .main-nav .menu > li > a > span,
  body .sticky-header .main-nav .menu > li > a > span,
  body .main-header .main-nav .menu > li > a .menu-opener,
  body .sticky-header .main-nav .menu > li > a .menu-opener{
    line-height:1!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }

  /* Basel's default dropdown uses .sub-menu-dropdown as the actual panel.
     Style that wrapper, then neutralize the inner UL so there is only ONE
     card instead of a square outer box plus a rounded inner box. */
  body .main-header .main-nav .menu > li.menu-item-has-children > .sub-menu-dropdown,
  body .sticky-header .main-nav .menu > li.menu-item-has-children > .sub-menu-dropdown,
  body .main-header .main-nav .menu > li.menu-item-design-default > .sub-menu-dropdown,
  body .sticky-header .main-nav .menu > li.menu-item-design-default > .sub-menu-dropdown{
    width:250px!important;
    min-width:250px!important;
    max-width:250px!important;
    padding:9px!important;
    margin-top:8px!important;
    background:#fffdf8!important;
    border:1px solid rgba(24,49,59,.08)!important;
    border-radius:15px!important;
    box-shadow:0 16px 34px rgba(20,45,35,.13)!important;
    overflow:visible!important;
  }

  body .main-header .main-nav .menu > li > .sub-menu-dropdown > .container,
  body .sticky-header .main-nav .menu > li > .sub-menu-dropdown > .container,
  body .main-header .main-nav .menu > li > .sub-menu-dropdown > .container-fluid,
  body .sticky-header .main-nav .menu > li > .sub-menu-dropdown > .container-fluid{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  body .main-header .main-nav .sub-menu-dropdown .sub-menu,
  body .sticky-header .main-nav .sub-menu-dropdown .sub-menu,
  body .main-header .main-nav .menu > li > ul.sub-menu,
  body .sticky-header .main-nav .menu > li > ul.sub-menu{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  body .main-header .main-nav .sub-menu-dropdown .sub-menu > li,
  body .sticky-header .main-nav .sub-menu-dropdown .sub-menu > li,
  body .main-header .main-nav .menu > li > ul.sub-menu > li,
  body .sticky-header .main-nav .menu > li > ul.sub-menu > li{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }

  body .main-header .main-nav .sub-menu-dropdown .sub-menu > li > a,
  body .sticky-header .main-nav .sub-menu-dropdown .sub-menu > li > a,
  body .main-header .main-nav .menu > li > ul.sub-menu > li > a,
  body .sticky-header .main-nav .menu > li > ul.sub-menu > li > a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:42px!important;
    height:auto!important;
    margin:0!important;
    padding:10px 13px!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:var(--dms-ink)!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.35!important;
    letter-spacing:.01em!important;
    text-transform:none!important;
    box-shadow:none!important;
    transform:none!important;
  }

  body .main-header .main-nav .sub-menu-dropdown .sub-menu > li > a:hover,
  body .sticky-header .main-nav .sub-menu-dropdown .sub-menu > li > a:hover,
  body .main-header .main-nav .menu > li > ul.sub-menu > li > a:hover,
  body .sticky-header .main-nav .menu > li > ul.sub-menu > li > a:hover{
    background:#ffc1076e !important;
    color:var(--dms-orange)!important;
    transform:none!important;
  }

  /* Remove Basel's decorative arrows/lines from dropdown links if the
     selected header preset injects them. */
  body .main-header .main-nav .sub-menu-dropdown .sub-menu > li > a::before,
  body .main-header .main-nav .sub-menu-dropdown .sub-menu > li > a::after,
  body .sticky-header .main-nav .sub-menu-dropdown .sub-menu > li > a::before,
  body .sticky-header .main-nav .sub-menu-dropdown .sub-menu > li > a::after{
    content:none!important;
    display:none!important;
  }
}