/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/


/* Page content */
.page-content a {
	transition: all 0.1s ease;
}
.page-content a:hover {
	color: var(--fg-strong);
}
.page-content p {
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 1.25em;
}
.page-content ul, .page-content ol {
	margin-left: 2.5em;
	margin-bottom: 1.25em;
}
.page-content li {
	font-size: 1.125rem;
	line-height: 1.5;
	margin-bottom: 0.5em;
}
.page-content p:last-child, .page-content ul:last-child, .page-content ol:last-child, .page-content li:last-child {
	margin-bottom: var(--spacing-none);
}
.page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child, .page-content h4:first-child, .page-content h5:first-child, .page-content h6:first-child {
	margin-top: var(--spacing-none);
}
.page-content h1 {
	font-size: 3rem;
	line-height: 1.1;
	letter-spacing: -0.04em;
	margin-bottom: calc(1.125rem * 1.25);
}
.page-content h2 {
	font-size: 2.25rem;
	line-height: 1.1;
	letter-spacing: -0.04em;
	margin-top: 1.5em;
	margin-bottom: calc(1.125rem * 1.25);
}
.page-content h3 {
	font-size: 1.875rem;
	line-height: 1.2;
	letter-spacing: -0.04em;
	margin-top: 1.5em;
	margin-bottom: calc(1.125rem * 1.25);
}
.page-content h4 {
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-top: 1.5em;
	margin-bottom: calc(1.125rem * 1.25);
}
.page-content h5 {
	font-size: 1.25em;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin-top: 1.5em;
	margin-bottom: calc(1.125rem * 1.25);
}
.page-content h6 {
	font-size: 1.125rem;
	line-height: 1.5;
	letter-spacing: -0.01em;
	margin-top: 1.5em;
	margin-bottom: calc(1.125rem * 1.25);
}
.page-content .wp-block-image {
	margin: calc(1.125rem * 2) var(--spacing-none);
}
.page-content .wp-block-image .wp-element-caption {
	margin-top: var(--spacing-lg);
	margin-bottom: var(--spacing-none);
	font-size: 0.875rem;
	color: var(--fg-subtle);
}
@media (max-width: 767px) {
	.page-content p, .page-content li {
		font-size: 1rem;
	}
	.page-content h1 {
		font-size: 2.25rem;
		line-height: 1.1;
		letter-spacing: -0.04em;
		margin-bottom: calc(1rem * 1.25);
	}
	.page-content h2 {
		font-size: 1.875rem;
		line-height: 1.2;
		letter-spacing: -0.04em;
		margin-bottom: calc(1rem * 1.25);
	}
	.page-content h3 {
		font-size: 1.5rem;
		line-height: 1.2;
		letter-spacing: -0.01em;
		margin-bottom: calc(1rem * 1.25);
	}
	.page-content h4 {
		font-size: 1.25rem;
		line-height: 1.4;
		letter-spacing: -0.01em;
		margin-bottom: calc(1rem * 1.25);
	}
	.page-content h5 {
		font-size: 1.125rem;
		line-height: 1.5;
		letter-spacing: -0.01em;
		margin-bottom: calc(1rem * 1.25);
	}
	.page-content h6 {
		font-size: 1rem;
		line-height: 1.5;
		letter-spacing: -0.01em;
		margin-bottom: calc(1rem * 1.25);
	}
	.page-content .wp-block-image {
		margin: calc(1rem * 2) var(--spacing-none);
	}
	.page-content .wp-block-image .wp-element-caption {
		font-size: 0.75rem;
	}
}


/* Typography utility classes */
.display-h1 {
	font-size: 3.75rem;
  	line-height: 1.1;
	letter-spacing: -0.04em;
}
.display-h2 {
  	font-size: 3rem;
  	line-height: 1.1;
	letter-spacing: -0.04em;
}
.display-h3 {
  	font-size: 2.25rem;
  	line-height: 1.1;
	letter-spacing: -0.04em;
}
.display-h4 {
  	font-size: 1.875rem;
  	line-height: 1.2;
	letter-spacing: -0.04em;
}
.display-h5 {
  	font-size: 1.5rem;
  	line-height: 1.3;
	letter-spacing: -0.01em;
}
.display-h6 {
  	font-size: 1.25rem;
  	line-height: 1.4;
	letter-spacing: -0.01em;
}
.text-xl {
  	font-size: 1.25rem;
  	line-height: 1.4;
	letter-spacing: -0.01em;
}
.text-lg {
  	font-size: 1.125rem;
  	line-height: 1.5;
	letter-spacing: -0.01em;
}
.text-md {
  	font-size: 1rem;
  	line-height: 1.5;
	letter-spacing: -0.01em;
}
.text-sm {
  	font-size: 0.875rem;
  	line-height: 1.5;
	letter-spacing: -0.01em;
}
.text-xs {
  	font-size: 0.75rem;
  	line-height: 1.5;
	letter-spacing: -0.01em;
}
@media (max-width: 767px) {
	.display-h1 {
		font-size: 3rem;
	}
	.display-h2 {
		font-size: 2.25rem;
		line-height: 1.1;
	}
	.display-h3 {
		font-size: 1.875rem;
		line-height: 1.2;
	}
	.display-h4 {
		font-size: 1.5rem;
		letter-spacing: -0.01em;
	}
	.display-h5 {
		font-size: 1.25rem;
		line-height: 1.4;
	}
	.display-h6 {
		font-size: 1.125rem;
		line-height: 1.5;
	}
	.text-xl {
		font-size: 1.125rem;
		line-height: 1.5;
	}
	.text-lg {
		font-size: 1rem;
	}
}


/* SVG icons */
.no-fill-svg .gb-shape svg {
	fill: none!important;
}


/* Text selection */
::selection {
  background: var(--brand-100);
  color: var(--black);
}
::-moz-selection {
  background: var(--brand-100);
  color: var(--black);
}


/**** DESIGN SYSTEM ****/

:root {
    /* ===== PRIMITIVES ===== */
    
    /* --- COLORS --- */
    /* Core */
    --black: #000000;
    --white: #FFFFFF;
     
    /* Neutral */
    --neutral-50: #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-300: #CBD5E1;
    --neutral-400: #94A3B8;
    --neutral-500: #64748B;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;
    --neutral-950: #020617;
    
    /* Primary */
    --primary-50: #FAFBFF;
    --primary-100: #D2DCFF;
    --primary-200: #AABDFF;
    --primary-300: #839FFF;
    --primary-400: #5B82FF;
    --primary-500: #3366FF;
    --primary-600: #0846FC;
    --primary-700: #043AD2;
    --primary-800: #052FA3;
    --primary-900: #052476;
    --primary-950: #041749;
    
    /* Success */
    --success-50: #ECFDF5;
    --success-100: #D1FAE5;
    --success-200: #A7F3D0;
    --success-300: #6EE7B7;
    --success-400: #34D399;
    --success-500: #10B981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065F46;
    --success-900: #064E3B;
    --success-950: #022C22;
    
    /* Warning */
    --warning-50: #FFFBEB;
    --warning-100: #FEF3C7;
    --warning-200: #FDE68A;
    --warning-300: #FCD34D;
    --warning-400: #FBBF24;
    --warning-500: #F59E0B;
    --warning-600: #D97706;
    --warning-700: #B45309;
    --warning-800: #92400E;
    --warning-900: #78350F;
    --warning-950: #431407;
    
    /* Error */
    --error-50: #FEF2F2;
    --error-100: #FEE2E2;
    --error-200: #FECACA;
    --error-300: #FCA5A5;
    --error-400: #F87171;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --error-700: #B91C1C;
    --error-800: #991B1B;
    --error-900: #7F1D1D;
    --error-950: #450A0A;
    
    /* Info */
    --info-50: #EFF6FF;
    --info-100: #DBEAFE;
    --info-200: #BFDBFE;
    --info-300: #93C5FD;
    --info-400: #60A5FA;
    --info-500: #3B82F6;
    --info-600: #2563EB;
    --info-700: #1D4ED8;
    --info-800: #1E40AF;
    --info-900: #1E3A8A;
    --info-950: #172554;
    
    /* --- SIZES --- */
    --size-0: 0rem;         /* 0px */
    --size-0-5: 0.125rem;   /* 2px */
    --size-1: 0.25rem;      /* 4px */
    --size-1-5: 0.375rem;   /* 6px */
    --size-2: 0.5rem;       /* 8px */
    --size-3: 0.75rem;      /* 12px */
    --size-4: 1rem;         /* 16px */
    --size-5: 1.25rem;      /* 20px */
    --size-6: 1.5rem;       /* 24px */
    --size-8: 2rem;         /* 32px */
    --size-10: 2.5rem;      /* 40px */
    --size-12: 3rem;        /* 48px */
    --size-16: 4rem;        /* 64px */
    --size-20: 5rem;        /* 80px */
    --size-24: 6rem;        /* 96px */
    --size-32: 8rem;        /* 128px */
    --size-40: 10rem;       /* 160px */
    --size-48: 12rem;       /* 192px */
    --size-56: 14rem;       /* 224px */
    --size-64: 16rem;       /* 256px */
    --size-80: 20rem;       /* 320px */
    --size-96: 24rem;       /* 384px */
    --size-120: 30rem;      /* 480px */
    --size-140: 35rem;      /* 560px */
    --size-160: 40rem;      /* 640px */
    --size-180: 45rem;      /* 720px */
    --size-192: 48rem;      /* 768px */
    --size-256: 64rem;      /* 1024px */
    --size-320: 80rem;      /* 1280px */
    --size-360: 90rem;      /* 1440px */
    --size-400: 100rem;     /* 1600px */
    --size-480: 120rem;     /* 1920px */
    --size-full: 625rem;    /* 10000px */
    

    /* ===== SEMANTIC ===== */
     
    /* --- RADIUS --- */
    --radius-none: var(--size-0);       /* 0px */
    --radius-xxs: var(--size-0-5);      /* 2px */
    --radius-xs: var(--size-1);         /* 4px */
    --radius-sm: var(--size-1-5);       /* 6px */
    --radius-md: var(--size-2);         /* 8px */
    --radius-lg: var(--size-3);         /* 12px */
    --radius-xl: var(--size-4);         /* 16px */
    --radius-2xl: var(--size-5);        /* 20px */
    --radius-3xl: var(--size-6);        /* 24px */
    --radius-4xl: var(--size-8);        /* 32px */
    --radius-5xl: var(--size-10);       /* 40px */
    --radius-6xl: var(--size-12);       /* 48px */
    --radius-7xl: var(--size-16);       /* 64px */
    --radius-8xl: var(--size-20);       /* 80px */
    --radius-9xl: var(--size-24);       /* 96px */
    --radius-full: var(--size-full);    /* 10000px */
    
    /* --- SPACING --- */
    --spacing-none: var(--size-0);      /* 0px */
    --spacing-xxs: var(--size-0-5);     /* 2px */
    --spacing-xs: var(--size-1);        /* 4px */
    --spacing-sm: var(--size-1-5);      /* 6px */
    --spacing-md: var(--size-2);        /* 8px */
    --spacing-lg: var(--size-3);        /* 12px */
    --spacing-xl: var(--size-4);        /* 16px */
    --spacing-2xl: var(--size-5);       /* 20px */
    --spacing-3xl: var(--size-6);       /* 24px */
    --spacing-4xl: var(--size-8);       /* 32px */
    --spacing-5xl: var(--size-10);      /* 40px */
    --spacing-6xl: var(--size-12);      /* 48px */
    --spacing-7xl: var(--size-16);      /* 64px */
    --spacing-8xl: var(--size-20);      /* 80px */
    --spacing-9xl: var(--size-24);      /* 96px */
    --spacing-10xl: var(--size-32);     /* 128px */
    --spacing-11xl: var(--size-40);     /* 160px */
    --spacing-12xl: var(--size-48);     /* 192px */

    /* --- SHADOWS --- */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
    --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03);
    --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
    --shadow-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.14);
    
    /* --- BACKDROP BLURS --- */
    /* Colors */
    --backdrop-blur-light: rgba(255, 255, 255, 0.6);
    --backdrop-blur-dark: rgba(0, 0, 0, 0.6);

    /* Blur amount */
    --backdrop-blur-xs: var(--size-1);      /* 4px */
    --backdrop-blur-sm: var(--size-2);      /* 8px */
    --backdrop-blur-md: var(--size-4);      /* 16px */
    --backdrop-blur-lg: var(--size-6);      /* 24px */
    --backdrop-blur-xl: var(--size-8);      /* 32px */
    --backdrop-blur-2xl: var(--size-10);    /* 40px */
    --backdrop-blur-3xl: var(--size-16);    /* 64px */
  }