/*
Theme Name: Kadence GKM
Theme URI: https://example.com
Description: Kadence child theme with GKM core styles, animation system, and components.
Author: GK Marketing
Author URI: https://example.com
Template: kadence
Version: 2.1.0
Text Domain: kadence-gkm
*/

/* 
This file is intentionally minimal.
All styles are loaded via functions.php.
*/


/* set images to multiply blend mode */

.multiplyme img {
  mix-blend-mode: multiply !important;
}

/* office hour styling */

.gk-office-hours {}
.gk-office-hours-row {
  display: flex;
  justify-content: space-between;
}
.gk-office-hours-day {}
.gk-office-hours-time {}
.gk-office-hours-time.is-closed {
  opacity: 0.6;
}
/* sidebar meet the dentist fix */

.splitround {
    border-radius: 16px;
    overflow: hidden;
}

.nopaddingwrap .entry-content-wrap {
    padding: 0;
}

.service-hero h5.eyebrow {
	margin-bottom: -10px !important;
	margin-left: -0.5em !important;
	color: #C09B30;
}

.service-hero p {
	color: white;
}

.service-hero h4 {
	color: #EAF5ED;
}
.service-hero h1 {
		    margin-bottom: 8px;
			color: white;
}

.service-template-default div#primary {
    margin-top: 0px;
    margin-bottom: 0px;
}

hr.section-divider {
    margin-top: 3em !important;
    margin-bottom: 0em !important;
    border-bottom-color: #C09B30;
	border-bottom-width: 1px;
}

.section-gk h3 {
	margin: 0.85em 0 0.25em;
}
/* =========================================================
   KADENCE CLOUD ROW SYSTEM (BOTTOM DIVIDER ONLY)
   ========================================================= */


/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root {
  --cloud-height: 180px;

  --cloud-speed: 40s;
  --cloud-speed-layered: 20s;

  --cloud-layered-opacity: 0.5;

  --cloud-white: #ffffff;
  --cloud-blue: #7CA5B9;
  --cloud-mint: #EAF5ED;

  --cloud-svg-front: url('/wp-content/uploads/2026/01/cloud-front.svg');
  --cloud-svg-back:  url('/wp-content/uploads/2026/01/cloud-back-v2.svg');
}


/* =========================================================
   ROW SETUP
   ========================================================= */

.cloud-white,
.cloud-white-layered,
.cloud-blue,
.cloud-blue-layered,
.cloud-mint,
.cloud-mint-layered {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   CLOUD RENDERING
   ========================================================= */

.cloud-white::after,
.cloud-blue::after,
.cloud-mint::after,
.cloud-white-layered::after,
.cloud-blue-layered::after,
.cloud-mint-layered::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;

  width: calc(100% + 2px);
  height: var(--cloud-height);

  background-color: var(--cloud-color);

  pointer-events: none;
}


/* =========================================================
   NON-LAYERED CLOUD
   ========================================================= */

.cloud-white::after,
.cloud-blue::after,
.cloud-mint::after {

  -webkit-mask-image: var(--cloud-svg-front);
  mask-image: var(--cloud-svg-front);

  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;

  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;

  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}


/* =========================================================
   LAYERED CLOUD
   ========================================================= */

.cloud-white-layered::after,
.cloud-blue-layered::after,
.cloud-mint-layered::after {

  -webkit-mask-image:
    var(--cloud-svg-front),
    var(--cloud-svg-back);

  mask-image:
    var(--cloud-svg-front),
    var(--cloud-svg-back);

  -webkit-mask-repeat: repeat-x, repeat-x;
  mask-repeat: repeat-x, repeat-x;

  /* Front cloud untouched, back cloud width locked */
  -webkit-mask-size: auto 100%, 1619px auto;
  mask-size: auto 100%, 1619px auto;

  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;

  opacity: 1;
}


/* =========================================================
   COLOR CLASSES
   ========================================================= */

.cloud-white,
.cloud-white-layered {
  --cloud-color: var(--cloud-white);
}

.cloud-blue,
.cloud-blue-layered {
  --cloud-color: var(--cloud-blue);
}

.cloud-mint,
.cloud-mint-layered {
  --cloud-color: var(--cloud-mint);
}


/* =========================================================
   MOTION
   ========================================================= */

.cloud-left::after {
  animation: cloud-left var(--cloud-speed) linear infinite;
}

.cloud-right::after {
  animation: cloud-right var(--cloud-speed) linear infinite;
}

.cloud-static::after {
  animation: none;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes cloud-left {
  from {
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
  }
  to {
    -webkit-mask-position: -100% 0, -50% 0;
    mask-position: -100% 0, -50% 0;
  }
}

@keyframes cloud-right {
  from {
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
  }
  to {
    -webkit-mask-position: 100% 0, 50% 0;
    mask-position: 100% 0, 50% 0;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cloud-white::after,
  .cloud-blue::after,
  .cloud-mint::after,
  .cloud-white-layered::after,
  .cloud-blue-layered::after,
  .cloud-mint-layered::after {
    animation: none;
  }
}