/*
 Theme Name:   JF Theme
 Theme URI:    https://generatepress.com
 Description:  James Fletcher Web Design child theme
 Author:       James Fletcher Web Design
 Author URI:   https://www.jamesfletcher.uk
 Template:     generatepress
 Version:      0.1
*/


/* =========================
   TYPOGRAPHY
========================= */

/* Font Family Utilities */
.ff-body {
    font-family: var(--gp-font--body);
}

.ff-heading {
    font-family: var(--gp-font--headings);
}

/* Heading and utility class font assignment */
h1, h2, h3, h4, h5, h6,
[class^="fs-"] {
    font-family: var(--gp-font--headings);
}

.fs-p {
    font-family: var(--gp-font--body);
}

/* =============================== 
   Fluid Typography System
   =============================== */

:root {

  /* Headings */
  --fs-h1: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-h4: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-h5: clamp(1.125rem, 1rem + 0.4vw, 1.4rem);
  --fs-h6: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  /* Body */
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);

}

/* ===============================
   Base typography
   =============================== */

body {
  font-size: var(--fs-body);
  line-height: 1.6;
}

p,
li {
  font-size: var(--fs-body);
}

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

/* ===============================
   Headings
   =============================== */

h1, .fs-h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

h2, .fs-h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

h3, .fs-h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
}

h4, .fs-h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
}

h5, .fs-h5 {
  font-size: var(--fs-h5);
  line-height: 1.3;
}

h6, .fs-h6 {
  font-size: var(--fs-h6);
  line-height: 1.35;
}

/* ===============================
   Paragraph rhythm
   =============================== */

p {
  margin-bottom: 1rem;
}

p + h2,
p + h3 {
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.4rem);
}