/*
 Theme Name:   OGD Starter Theme
 Theme URI:    https://optimalgrowthdigital.com
 Description:  Default OGD child theme for GeneratePress projects.
 Author:       Optimal Growth Digital
 Author URI:   https://optimalgrowthdigital.com
 Template:     generatepress
 Version:      0.1
*/

:root {
  /* --- HEADINGS (Slightly Reduced) --- */
	
  --fs-hero-title: clamp(2.6rem, 1.8rem + 3.5vw, 4.2rem);
  --fs-hero-lead: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);

  --fs-h1: clamp(1.9rem, 1.85rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 1.45rem + 2.2vw, 2.7rem);
  --fs-h3: clamp(1.375rem, 1.3rem + 1.7vw, 2.25rem);
  --fs-h4: clamp(1.1875rem, 1.15rem + 1.2vw, 1.8rem);
  --fs-h5: clamp(1.0625rem, 1.05rem + 0.8vw, 1.5rem);
  --fs-h6: clamp(1rem, 0.98rem + 0.4vw, 1.35rem);
  /* Paragraph */
  --fs-p: clamp(1rem, 0.95rem + 0.4vw, 1.1rem);
	
	/* Spacing */
  --space-section-y: clamp(5rem, 8vw, 7rem);
  --space-section-x: clamp(1rem, 4vw, 5rem);
  --space-inner-gap: clamp(2.5rem, 5vw, 6rem);

  /* Layout */
  --container-max: 1380px;
  --content-max: 760px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
}

/* 2. APPLY THE FONT SIZES TO THE RESPECTIVE ELEMENTS */
h1, .fs-h1 { font-size: var(--fs-h1); }
h2, .fs-h2 { font-size: var(--fs-h2); }
h3, .fs-h3 { font-size: var(--fs-h3); }
h4, .fs-h4 { font-size: var(--fs-h4); }
h5, .fs-h5 { font-size: var(--fs-h5); }
h6, .fs-h6 { font-size: var(--fs-h6); }
p, .fs-p { font-size: var(--fs-p); }

/* Borrowed from Bootstrap */ 
/* Tutorial: https://youtu.be/HBriBrnRlQE?si=DLiSXEiBHt6lw91l */ 
/* Make sure you only have ONE link inside your card 😅 or this will not work!  */ 
.stretch-link{
	position: relative;
}

.stretch-link a::after{
	content: '';
	position: absolute;
	inset: 0;
}

.stretch-link a:is(:focus-visible)::after{
	outline: 2px solid;
}

.stretch-link a:is(:hover, :focus){
	outline: none;
}


/* Css for injecting wrapper for website */
.site-wrapper {
	 position: relative;
    max-width: 1920px;
    width: 100%;
    margin-inline: auto; /* Same as margin-left: auto; margin-right: auto; */
    overflow-x: hidden;
    box-shadow: 0px 0px 150px 0px rgba(100, 116, 130, 0.82); /* Assuming the color value */
}

:root {
    --pj-wrapper-max: 1180px;
    --pj-wrapper-wide: 1360px;
    --pj-wrapper-narrow: 880px;

    --pj-page-gutter: clamp(1rem, 4vw, 2.5rem);

    --pj-section-padding: clamp(4rem, 8vw, 8rem);
    --pj-section-padding-small: clamp(3rem, 6vw, 5rem);
    --pj-section-padding-large: clamp(5rem, 10vw, 10rem);
}

/* Outer full-width section */
.pj-section {
    position: relative;
    padding-top: var(--pj-section-padding);
    padding-bottom: var(--pj-section-padding);
}

/* Inner constrained wrapper */
.pj-wrapper {
    width: min(var(--pj-wrapper-max), calc(100% - (var(--pj-page-gutter) * 2)));
    margin-left: auto;
    margin-right: auto;
}

/* Optional wrapper sizes */
.pj-wrapper--narrow {
    width: min(var(--pj-wrapper-narrow), calc(100% - (var(--pj-page-gutter) * 2)));
}

.pj-wrapper--wide {
    width: min(var(--pj-wrapper-wide), calc(100% - (var(--pj-page-gutter) * 2)));
}

/* Optional section spacing modifiers */
.pj-section--small {
    padding-top: var(--pj-section-padding-small);
    padding-bottom: var(--pj-section-padding-small);
}

.pj-section--large {
    padding-top: var(--pj-section-padding-large);
    padding-bottom: var(--pj-section-padding-large);
}

.pj-section--no-top {
    padding-top: 0;
}

.pj-section--no-bottom {
    padding-bottom: 0;
}