/*
Theme Name:     KickStarter
Theme URI:      n/a
Template:       kadence
Author:         WP Templater
Author URI:     https://wptemplater.com
Description:    KickStarter is a Kadence starter site that enhances the Kadence theme with global styles, CSS variables, and more smart features to start web projects more efficiently.
Version:        1.3.3
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* =============================
 * TYPOGRAPHY
 * Define global font sizes using clamp() for a fluid effect.
 * Adjust line-height with ex values for consistent vertical spacing.
============================= */
/* Define clamp value for body text */

:root {
  --global-font-size-body: clamp(1rem, 0.227vw + 0.955rem, 1.125rem);
  
/* Redefine clamp values for "t-shirt sizes" (sm to xxxl) */
	
  --global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
	
  --global-kb-font-size-md: clamp(1.25rem, 0.455vw + 1.159rem, 1.5rem);
	
  --global-kb-font-size-lg: clamp(1.35rem, 0.727vw + 1.205rem, 1.7rem);
	
  --global-kb-font-size-xl: clamp(1.7rem, 1.2vw + 1.4rem, 2.3rem);
	
  --global-kb-font-size-xxl: clamp(2rem, 1.6vw + 1.7rem, 3rem);
	
  --global-kb-font-size-xxxl: clamp(2.5rem, 2vw + 2rem, 4rem);
}

/* =============================
 * HEADINGS
 * Apply t-shirt size clamp values to headings
 * Define line-height using ex units for proportional spacing.
============================= */

h1, .wpt-h1 {
  font-size: var(--global-kb-font-size-xxl);
  line-height: 2ex;
	font-weight: bold;
}

h2, .wpt-h2 {
  font-size: var(--global-kb-font-size-xl);
  line-height: 2.1ex;
	font-weight: bold;
}

h3, .wpt-h3 {
  font-size: var(--global-kb-font-size-lg);
  line-height: 2.2ex;
	font-weight: bold;
}

h4, .wpt-h4 {
  font-size: var(--global-kb-font-size-md);
  line-height: 2.2ex;
	font-weight: bold;
}

h5, .wpt-h5 {
  font-size: var(--global-font-size-body);
  line-height: 2.3ex;
	font-weight: bold;
}

h6, .wpt-h6 {
  font-size: var(--global-font-size-body);
  line-height: 2.3ex;
	font-weight: bold;
}

/* =============================
 * BODY TEXT AND ICON LIST
 * Apply global body font size and custom line-height.
============================= */

body, p, .wpt-p,
.wp-block-kadence-iconlist {
  font-size: var(--global-font-size-body);
  line-height: 2.9ex;
	font-weight: inherit;
}

/* =============================
 * TYPOGRAPHY - CUSTOM EYEBROW HEADING
============================= */

.wpt-eyebrow.wp-block-kadence-advancedheading {
  color: var(--global-palette2);
  font-weight: bold;
  line-height: 1rem;
  letter-spacing: 0.1px;
	text-transform: uppercase;
}

/* =============================
 * GLOBAL BORDER STYLES
 * Define border-radius values
============================= */

:root {
  --wpt-border-radius-sm: 4px; /* Same as global button border-radius */
  --wpt-border-radius-md: 8px; /* Same as global image border-radius */
  --wpt-border-radius-lg: 12px; /* For elements requiring more rounded corners */
}

/*
=============================
 * CARDS CONTAINER STYLES
 * Placeholder for card styles. Uncomment as needed.
============================= */

.wpt-card > .kt-inside-inner-col {
	/* border: 2px solid var(--global-palette5); */
  border-radius: var(--wpt-border-radius-md);
  box-shadow: -1px 7px 20px 0px var(--global-palette6);
}

/* =============================
 * POST AND IMAGE STYLES
 * Add vertical spacing to headings and blog post images.
============================= */

.single-post h2,
.single-post h3,
.single-post h4,
.single-post h5,
.single-post h6 {
  margin-top: 4rem;
  margin-bottom: 1.5rem;
}

.single-post figure.wp-block-kadence-image img, .wp-block-image img {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

/* =============================
Adjustments for consistent layout and alignment
============================= */

/* Ensure all items in the related posts carousel have equal height */

.carousel-item > article {
	height: 100%;
}

/* =============================
 * RESPONSIVE STYLES
 * Hide sidebar on mobile devices (max-width: 768px).
============================= */

@media screen and (max-width: 768px) {
  .has-sidebar .primary-sidebar {
    display: none;
  }
}