/*
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.4.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/
/* =============================
 * TOKENS — TYPOGRAPHY
 * Define global font sizes using clamp() for a fluid effect.
 * Adjust line-height with ex values for consistent vertical spacing.
============================= */

:root {
  /* Body text */
  --global-font-size-body: clamp(1rem, 0.227vw + 0.955rem, 1.125rem);

  /* T-shirt scale (sm → xxxl) */
  --global-kb-font-size-sm:   clamp(0.85rem, 0.78rem + 0.2vw, 0.95rem);
  --global-kb-font-size-md:   clamp(1.15rem, 0.5vw + 1.05rem, 1.4rem);
  --global-kb-font-size-lg:   clamp(1.35rem, 0.75vw + 1.2rem, 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);

}

/* =============================
 * TYPOGRAPHY — 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;
  text-wrap: pretty;
}

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

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

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

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

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

/* =============================
 * TYPOGRAPHY — BODY TEXT & ICON LIST
============================= */

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

/* Make default margin-bottom fluid */
section.wpt-section p {
  margin-block-end: var(--global-kb-spacing-sm);
}

/* =============================
 * TYPOGRAPHY — 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;
}

/* =============================
 * SPACING - TOKENS
 * Define global spacing tokens using clamp() for fluid scaling.
 * Used for padding, margins, gaps, and section spacing site-wide.
============================= */

:root {
  /* Fluid horizontal padding for content edges (mobile → desktop) */
  --global-content-edge-padding: clamp(1rem, 2.927vw + 0.305rem, 2.5rem);

  /* Default vertical spacing for sections (mobile → desktop) */
  --global-section-padding-y: clamp(2.5rem, 4.878vw + 1.341rem, 5rem);

  /* Row gutter (tablet → desktop) */
  --global-row-gutter-sm: clamp(0.5rem, 1.852vw + -0.389rem, 1rem);
  --global-row-gutter-md: clamp(1rem, 3.704vw + -0.778rem, 2rem);
  --global-row-gutter-lg: clamp(2rem, 7.407vw + -1.556rem, 4rem);

/* Row gutter mobile */
  --global-row-gutter-mobile: clamp(1.5rem, 2.067vw + 1.009rem, 2rem);
  
  @media (max-width: 767px) {
  .kt-row-column-wrap {
    row-gap: var(--global-row-gutter-mobile);
  }
}

  /* Column gap scale. (tablet → desktop) */
  --global-kb-gap-sm: clamp(0.5rem, 1.852vw + -0.389rem, 1rem);
  --global-kb-gap-md: clamp(1rem, 3.704vw + -0.778rem, 2rem);
  --global-kb-gap-lg: clamp(2rem, 7.407vw + -1.556rem, 4rem);

  /* Global fluid spacing scale (Kadence spacing tokens) */
  --global-kb-spacing-xxs: clamp(0.25rem, 0.488vw + 0.134rem, 0.5rem);
  --global-kb-spacing-xs:  clamp(0.5rem, 0.976vw + 0.268rem, 1rem);
  --global-kb-spacing-sm:  clamp(1rem, 1.463vw + 0.652rem, 1.75rem);
  --global-kb-spacing-md:  clamp(1.25rem, 1.951vw + 0.787rem, 2.25rem);
  --global-kb-spacing-lg:  clamp(1.5rem, 2.439vw + 0.921rem, 2.75rem);
  --global-kb-spacing-xl:  clamp(2rem, 3.415vw + 1.189rem, 3.75rem);
  --global-kb-spacing-xxl: clamp(3rem, 3.902vw + 2.073rem, 5rem);
  --global-kb-spacing-3xl: clamp(4rem, 4.878vw + 2.841rem, 6.5rem);
  --global-kb-spacing-4xl: clamp(5rem, 5.854vw + 3.61rem, 8rem);
  --global-kb-spacing-5xl: clamp(7rem, 5.854vw + 5.61rem, 10rem);     
}

/* =============================
 * SPACING — SECTION (opt-in)
============================= */

section.wpt-section {
  padding-block: var(--global-section-padding-y);
}

/* =============================
 * TOKENS — RADIUS
============================= */

: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 - MINI-FRAMEWORK
============================= */

.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);
}

/* =============================
 * UTILITIES & COMPONENT TWEAKS
 * Small layout fixes that don’t belong in the token sections.
============================= */

/* Ensure all items in the related posts carousel have equal height */
.carousel-item > article {
  height: 100%;
}

/* =============================
 * ARCHIVE CARD LAYOUT (GRID ONLY)
 * Ensures equal-height cards by pushing the footer to the bottom.
 * Disabled by default — only works correctly when archives use grid layouts.
 * Uncomment when using Kadence archive grids.
============================= */

/*
#archive-container article.entry {
  display: flex;
  flex-direction: column;
}

#archive-container article.entry .entry-content-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#archive-container article.entry .entry-content-wrap .entry-footer {
  margin-top: auto;
}
*/

/* =============================
 * RESPONSIVE
============================= */

/* Hide sidebar on mobile devices (max-width: 768px). */
@media (max-width: 768px) {
  .has-sidebar .primary-sidebar {
    display: none;
  }
}