/*
  ML Aesthetics custom CSS
  Clean version for blank banner + logo/company name header
  Adds sub text under the main header
  Uses Canva Sans where available
*/


/* ================================
   GLOBAL FONT
================================ */

body,
html,
* {
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
}


/* ================================
   LOGO IMAGE SIZE
================================ */

.logo img,
.site-logo img,
.header-logo img,
[class*="logo"] img {
  max-width: 220px !important;
  height: auto !important;
}


/* ================================
   COMPANY NAME / HEADER TEXT
================================ */

.company-name,
.site-title,
.logo-text,
.header-title,
[class*="company"] h1,
[class*="logo"] h1,
[class*="header"] h1 {
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
  font-size: 58px !important;
  line-height: 1.1 !important;
  letter-spacing: 6px !important;
  text-align: center !important;
  color: #3cb1d8 !important;
  font-weight: 700 !important;
  margin: 20px auto 12px auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: normal !important;
}


/* Sub text under company name/header */
.company-name::after,
.site-title::after,
.logo-text::after,
.header-title::after,
[class*="company"] h1::after,
[class*="logo"] h1::after,
[class*="header"] h1::after {
  content: "Natural-looking aesthetics, personalised care, confidence that still feels like you." !important;
  display: block !important;
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  letter-spacing: 3px !important;
  color: #555555 !important;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 920px !important;
  margin: 22px auto 0 auto !important;
}


/* ================================
   BANNER AREA
================================ */

.hero,
.banner,
[class*="hero"],
[class*="banner"] {
  min-height: 390px !important;
  padding-top: 50px !important;
  padding-bottom: 80px !important;
  text-align: center !important;
  overflow: visible !important;
  background-size: cover !important;
  background-position: center center !important;
}


/* Existing subtitle / banner wording - hide duplicate if template already shows it */
.hero h2,
.hero p,
.banner h2,
.banner p,
[class*="hero"] h2,
[class*="hero"] p,
[class*="banner"] h2,
[class*="banner"] p {
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
  font-size: 30px !important;
  line-height: 1.25 !important;
  letter-spacing: 4px !important;
  color: #555555 !important;
  text-align: center !important;
  max-width: 900px !important;
  margin: 0 auto 32px auto !important;
  white-space: normal !important;
  font-weight: 400 !important;
}


/* ================================
   BANNER BUTTONS
================================ */

.hero a,
.hero button,
.banner a,
.banner button,
[class*="hero"] a,
[class*="hero"] button,
[class*="banner"] a,
[class*="banner"] button {
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
  z-index: 2 !important;
}


/* Button styling */
.hero a[role="button"],
.banner a[role="button"],
[class*="hero"] a[role="button"],
[class*="banner"] a[role="button"],
.hero button,
.banner button,
[class*="hero"] button,
[class*="banner"] button {
  background-color: #3199bd !important;
  color: #ffffff !important;
  border: none !important;
  min-width: 190px !important;
  padding: 16px 24px !important;
  margin: 32px 8px 0 8px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
  letter-spacing: 0.5px !important;
}


/* ================================
   NAVIGATION FONT
================================ */

nav,
nav a,
.menu,
.menu a,
[class*="menu"] a,
[class*="nav"] a {
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
}


/* ================================
   BOOKING / CATEGORY AREA FONT
================================ */

#events,
#events h3,
#events p,
#events div,
#events input,
#eventForm,
#eventForm h3,
#eventForm input,
#eventForm button {
  font-family: "Canva Sans", "CanvaSans", Arial, Helvetica, sans-serif !important;
}


/* ================================
   TABLET VIEW
================================ */

@media screen and (max-width: 900px) {

  .logo img,
  .site-logo img,
  .header-logo img,
  [class*="logo"] img {
    max-width: 180px !important;
  }

  .company-name,
  .site-title,
  .logo-text,
  .header-title,
  [class*="company"] h1,
  [class*="logo"] h1,
  [class*="header"] h1 {
    font-size: 48px !important;
    letter-spacing: 5px !important;
    line-height: 1.1 !important;
    margin-bottom: 12px !important;
  }

  .company-name::after,
  .site-title::after,
  .logo-text::after,
  .header-title::after,
  [class*="company"] h1::after,
  [class*="logo"] h1::after,
  [class*="header"] h1::after {
    font-size: 23px !important;
    line-height: 1.3 !important;
    letter-spacing: 2.5px !important;
    max-width: 80% !important;
    margin-top: 18px !important;
  }

  .hero,
  .banner,
  [class*="hero"],
  [class*="banner"] {
    min-height: 410px !important;
    padding-top: 45px !important;
    padding-bottom: 80px !important;
  }

  .hero h2,
  .hero p,
  .banner h2,
  .banner p,
  [class*="hero"] h2,
  [class*="hero"] p,
  [class*="banner"] h2,
  [class*="banner"] p {
    font-size: 24px !important;
    line-height: 1.3 !important;
    letter-spacing: 3px !important;
    max-width: 80% !important;
    margin-bottom: 28px !important;
  }
}


/* ================================
   PHONE VIEW
================================ */

@media screen and (max-width: 600px) {

  .logo img,
  .site-logo img,
  .header-logo img,
  [class*="logo"] img {
    max-width: 145px !important;
    height: auto !important;
  }

  .company-name,
  .site-title,
  .logo-text,
  .header-title,
  [class*="company"] h1,
  [class*="logo"] h1,
  [class*="header"] h1 {
    font-size: 34px !important;
    letter-spacing: 3px !important;
    line-height: 1.15 !important;
    margin: 15px auto 12px auto !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .company-name::after,
  .site-title::after,
  .logo-text::after,
  .header-title::after,
  [class*="company"] h1::after,
  [class*="logo"] h1::after,
  [class*="header"] h1::after {
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: 1.5px !important;
    max-width: 86% !important;
    margin: 18px auto 0 auto !important;
  }

  .hero,
  .banner,
  [class*="hero"],
  [class*="banner"] {
    min-height: 500px !important;
    padding-top: 35px !important;
    padding-bottom: 95px !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .hero h2,
  .hero p,
  .banner h2,
  .banner p,
  [class*="hero"] h2,
  [class*="hero"] p,
  [class*="banner"] h2,
  [class*="banner"] p {
    font-size: 18px !important;
    line-height: 1.35 !important;
    letter-spacing: 2px !important;
    max-width: 86% !important;
    margin: 0 auto 28px auto !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .hero a[role="button"],
  .banner a[role="button"],
  [class*="hero"] a[role="button"],
  [class*="banner"] a[role="button"],
  .hero button,
  .banner button,
  [class*="hero"] button,
  [class*="banner"] button {
    display: block !important;
    width: 220px !important;
    min-width: 220px !important;
    margin: 18px auto 0 auto !important;
    padding: 15px 18px !important;
    font-size: 17px !important;
    text-align: center !important;
  }
}