/*
Theme Name: Crafto Child
Theme URI: https://crafto.themezaa.com/
Author: ThemeZaa
Author URI: https://www.themezaa.com/
Description: Child theme for Crafto theme
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0
License: Themeforest Split Licence
License URI: https://themeforest.net/licenses/
Text Domain: crafto-child
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout, custom-background, custom-colors, flexible-header, custom-menu, editor-style, featured-images, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce
Template: crafto
*/


/* ==========================================================================
   GLOBAL TYPOGRAPHY SYSTEM — Root Variables + Responsive Scaling
   ========================================================================== */

:root {
  /* ---- LETTER SPACING ---- */
  --ls-tight: -0.02em;
  --ls-normal: 1px;
  --ls-wide: 0.02em;

  /* ---- LINE HEIGHTS ---- */
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* ---- FONT SIZES (fluid via clamp — scales smoothly between breakpoints) ---- */
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);      /* ~36px – 56px */
  --fs-h2: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);  /* ~30px – 44px */
  --fs-h3: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);  /* ~24px – 34px */
  --fs-h4: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem); /* ~20px – 26px */
  --fs-h5: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);   /* ~18px – 22px */
  --fs-h6: clamp(1rem, 0.92rem + 0.3vw, 1.125rem);    /* ~16px – 18px */
/*   --fs-p:  clamp(1rem, 0.95rem + 0.2vw, 1.125rem);     */ /* ~16px – 18px */
	--fs-p:  clamp(1rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-small: clamp(0.8125rem, 0.78rem + 0.1vw, 0.875rem);
  --fs-button: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --fs-blockquote: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
}
body {
  line-height: var(--lh-normal) ;
  letter-spacing: var(--ls-normal) ;
  font-size: var(--fs-p) ;
}

h1, .h1 {
  font-size: var(--fs-h1) ;
  line-height: var(--lh-tight) ;
  letter-spacing: var(--ls-tight) ;
  margin-bottom: 0.6em ;
}

h2, .h2 {
  font-size: var(--fs-h2) ;
  line-height: var(--lh-heading) ;
  letter-spacing: var(--ls-tight) ;
  margin-bottom: 0.6em ;
}

h3, .h3 {
  font-size: var(--fs-h3) ;
  line-height: var(--lh-heading) ;
  letter-spacing: var(--ls-normal) ;
  margin-bottom: 0.5em ;
}

h4, .h4 {
  font-size: var(--fs-h4) ;
  line-height: var(--lh-heading) ;
  letter-spacing: var(--ls-normal) ;
  margin-bottom: 0.5em ;
}

h5, .h5 {
  font-size: var(--fs-h5) ;
  line-height: var(--lh-heading) ;
  letter-spacing: var(--ls-normal) ;
  margin-bottom: 0.4em ;
}

h6, .h6 {
  font-size: var(--fs-h6) ;
  line-height: var(--lh-heading) ;
  letter-spacing: var(--ls-wide) ;
  margin-bottom: 0.4em ;
}

p, .elementor-widget-text-editor .elementor-widget-container {
  font-size: var(--fs-p);
  line-height: var(--lh-normal) ;
  letter-spacing: var(--ls-normal) ;
  margin-bottom: 1em ;
  text-align:justify;
}

p.lead, .lead {
  font-size: var(--fs-lead) ;
  line-height: var(--lh-relaxed) ;
}

small, .small {
  font-size: var(--fs-small) ;
  line-height: var(--lh-normal) ;
}

a {
  font-size: inherit ;
  line-height: inherit ;
  letter-spacing: var(--ls-normal) ;
}

ul, ol {
  font-size: var(--fs-p) ;
  line-height: var(--lh-relaxed) ;
  letter-spacing: var(--ls-normal) ;
}

li {
  font-size: inherit ;
  line-height: inherit ;
}
blockquote {
  font-size: var(--fs-blockquote) ;
  line-height: var(--lh-relaxed) ;
  letter-spacing: var(--ls-normal) ;
}

cite {
  font-size: var(--fs-small) ;
}

button,
input[type="submit"],
input[type="button"],
.elementor-button,
.elementor-button-text {
  font-size: var(--fs-button) ;
  line-height: var(--lh-tight) ;
  letter-spacing: var(--ls-wide) ;
}

input, textarea, select, label {
  font-size: var(--fs-p) ;
  line-height: var(--lh-normal) ;
  letter-spacing: var(--ls-normal) ;
}

table, th, td {
  font-size: var(--fs-p) ;
  line-height: var(--lh-normal) ;
}

figcaption {
  font-size: var(--fs-small) ;
  line-height: var(--lh-normal) ;
  letter-spacing: var(--ls-normal) ;
}

.elementor-widget-text-editor p,
.elementor-widget-text-editor,
.elementor-text-editor {
  font-size: var(--fs-p) ;
  line-height: var(--lh-normal) ;
  letter-spacing: var(--ls-normal) ;
}

/* Large desktops / big screens */
@media (min-width: 1920px) {
  :root {
    --fs-h1: 4rem;
    --fs-h2: 3.25rem;
    --fs-h3: 2.5rem;
    --fs-h4: 2rem;
    --fs-h5: 1.5rem;
    --fs-h6: 1.25rem;
    --fs-p: 1rem;
  }
}

/* Laptops / standard desktop (Elementor "Desktop" breakpoint) */
@media (max-width: 1439px) {
  :root {
    --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
    --fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    --fs-h3: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
  }
}

/* Tablets (Elementor "Tablet" breakpoint ≈ 1024px) */
@media (max-width: 1024px) {
  :root {
    --fs-h1: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
    --fs-h2: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem);
    --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
    --fs-h4: clamp(1.1875rem, 1rem + 0.7vw, 1.5rem);
    --lh-heading: 1.35;
  }
}

/* Small tablets / large phones (Elementor "Mobile Extra" breakpoint ≈ 767px) */
@media (max-width: 767px) {
  :root {
    --fs-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.5rem);
    --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.3rem);
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;
    --fs-p: 1rem;
    --fs-lead: 1.125rem;
    --lh-normal: 1.55;
    --lh-heading: 1.3;
  }
}

/* Mobile phones (Elementor "Mobile" breakpoint ≈ 480px) */
@media (max-width: 480px) {
  :root {
    --fs-h1: 1.625rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.1875rem;
    --fs-h4: 1.0625rem;
    --fs-h5: 1rem;
    --fs-h6: 0.9375rem;
    --fs-p: 0.9375rem;
    --fs-lead: 1.0625rem;
    --fs-button: 0.9375rem;
    --ls-tight: -0.01em;
  }

  h1, .h1, h2, .h2, h3, .h3 {
    margin-bottom: 0.5em ;
  }
}