/*
 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
*/



/****************************************/
/****************************************/
/***** Global Style Tweaks *****/

  /* Add local font */
/* arial-bold */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Arial Bold';
  font-style: normal;
  font-weight: 700;
  src: url('https://thinkrapt.kinsta.cloud/wp-content/uploads/2024/05/arial-black.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/****************************************/
/****************************************/
/***** Typography Tweaks *****/


:root {
    /* TEXT SIZE SCALE */

	/* These HAVE TO match what is in the Customizer > Typography. Pull in font familys using font manager. Set headline-font as 'All Headlings', set body-font as HTML */
    --title-font: 'Arial Bold' , sans-serif;
	--headline-font: 'Open Sans', sans-serif;
    --body-font: 'Open Sans', sans-serif;
	
    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-base: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);
}

/* TEXT SIZE UTILITY CLASSES */

/* You now don't need to set ANY typography in Theme Styles - not even body copy. The below code handles it all from here in one place. REMOVE any font sizes or line heights set for body copy in Bricks Theme Style typography settings. */

p,.text-xl,.text-l,.text-base,.text-s,.text-xs {
	font-family:var(--body-font);
	color: var(--base-900);	
}

h1,h2,.h1,.h2 {
	font-family: var(--title-font);
	color: var(--base-800);
}

h3,h4,h5,h6,.h3,.h4,.h5,.h6 {
	font-family: var(--headline-font);
	color: var(--brand);
	font-weight: 500;
}

.text-xl {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.4;
}
.text-l {
    font-size: var(--text-l);
    font-weight: 400;
    line-height: 1.5;
}
body,
.text-base {
    font-size: var(--text-m);
    font-weight: 400;
    line-height: 1.5;
}
.text-s {
    font-size: var(--text-s);
    font-weight: 400;
    line-height: 1.6;
}
.text-xs {
    font-size: var(--text-xs);
    font-weight: 400;
    line-height: 1.7;
}

/* HEADING SIZE UTILITY CLASSES */

/*  REMOVE any font sizes or line heights set for all heading levels in Bricks Theme Style typography settings. */

.h-title {
    font-size: var(--h-title);
    font-weight: 700;
    line-height: 1.05;
}
h1,
.h1 {
    font-size: var(--h1);
    font-weight: 700;
    line-height: 1.1;
}
h2,
.h2 {
    font-size: var(--h2);
    font-weight: 700;
    line-height: 1.2;
}
h3,
.h3 {
    font-size: var(--h3);
    font-weight: 700;
    line-height: 1.3;
}
h4,
.h4 {
    font-size: var(--h4);
    font-weight: 700;
    line-height: 1.4;
}
h5,
.h5 {
    font-size: var(--h5);
    font-weight: 700;
    line-height: 1.5;
}
h6,
.h6 {
    font-size: var(--h6);
    font-weight: 700;
    line-height: 1.6;
}


.h-top-bar:before {
  content:"";
  width:100%;
  height:8px;
  left:0;
  top:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to left, white 60%, var(--brand) 40%);
}



/****************************************/
/****************************************/
/***** Theme Tweaks *****/

/* Body background colour (outside wrapper) */
body {
    background-color: var(--base-200);
}

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    background-color: var(--base-0);
}



/* Sticky Navigation */
.navigation-stick {
    width: 100%;
    max-width: 1920px;
    margin: auto;
    background-color: var(--base-0);
}

/* Set the main content area height */
#main {
    min-height: 65vh;
}

/* remove bottom margin on last paragraph or list in container */
.gb-container p:last-child:last-of-type,
.gb-container ul:last-child:last-of-type {
  margin-bottom: 0px;
}

/* Container Padding Overrides */
.inside-header {
    padding-inline: 0 !important;
}

.site-header {
    padding-inline: clamp(1rem, 0.848rem + 0.758vw, 1.5rem) !important;
}

.site-content,
#content {
    padding: 0;
}

/* Post Editor Width (BACKEND) */
.post-type-post .block-editor-block-list__layout {
    max-width: 728px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;
}

.post-type-post
    .edit-post-visual-editor__post-title-wrapper
    .editor-post-title {
    max-width: 728px !important;
    margin-inline: auto !important;
}

.content-header {
    position: relative;
}

.content-header::before {
    content: "";
    background-color: #c1ffa9;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    width: 5px;
    height: 100%;
    left: -72px;
}

.content-area :is(p, li) a:hover {
    color: var(--brand-dark);
    border: var(--brand-dark);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

/* page and post hyperlinks */
.content-area :is(p, li ) a {
  font-weight: 600;
  color: var(--brand);
  border: var(--brand);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0px;
}


/****************************************/
/****************************************/
/***** Button Tweaks *****/


/* GB button line height override */
.gb-button {
	line-height: 1.5em;
}



/****************************************/
/****************************************/
/***** Sidebar Tweaks *****/


/* sidebar categories list style */
.wp-block-categories {
    list-style: none;
    margin-left: unset;
}

/* drop sidebar below content on tablet */
@media (max-width: 1024px) {
    .site-content {
        flex-direction: column;
    }

    .site-content .content-area,
    .site-content .is-right-sidebar {
        width: 100%;
    }
}



/****************************************/
/****************************************/
/***** Search Tweaks *****/


/* wp search block style */
.wp-block-search__button.has-icon {
    background-color: var(--brand);
    border-radius: 2px;
    transition: all 0.5s ease 0s;
}

.wp-block-search__button.has-icon:hover {
    background-color: var(--brand);
}

.wp-block-search__button svg {
    min-height: 1.6em;
    min-width: 1.6em;
    vertical-align: text-bottom;
}



/****************************************/
/****************************************/
/***** Single Post Tweaks *****/

.single-post :is(p, ul, ol) + :is(h2, h3, h4) {
  margin-top: 40px;
}




/****************************************/
/****************************************/
/***** Fluent Form Styles *****/


/* START FLUENT FORMS STYLES */

/* label style */
.fluentform .frm-fluent-form .ff-el-input--label {
  font-size: var(--text-m);
  font-weight: 500;
  color: var(--base-800);
}

/* field style */
.fluentform .frm-fluent-form .ff-el-form-control {
  background-color: var(--base-0);
  color: var(--base-700);
  border: 1px solid  var(--base-300);
  border-radius: 2px;
  font-size: var(--fs-body-m);
  line-height: 27px;
  padding: 11px 24px;
}

/* focus field style */
.fluentform .frm-fluent-form .ff-el-form-control:focus {
  border: 1px solid  var(--brand);
  outline: none;
}

/* placeholder text style */
.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
  color: var(--base-700);
  font-size: var(--text-s);
}

/* placeholder focus text style */
.fluentform .frm-fluent-form .ff-el-form-control:focus::placeholder {
  color: color: var(--base-700);
}

/* button style */
.fluentform .frm-fluent-form .ff-btn-submit {
  background-color: var(--brand-light);
  color: var(--base-0);
  opacity: 100%;
  border: 1px solid var(--brand-light);
  border-radius: 2px;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 27px;
  padding: 11px 24px;
  transition: all 0.5s ease 0s;
}

/* button hover style */
.fluentform .frm-fluent-form .ff-btn-submit:hover {
  background-color: var(--brand-dark);
  border: 1px solid var(--brand-dark);
  color: var(--base-0);
}

/* full width buttons */
form.fluent_form_3 .ff-btn-submit, form.fluent_form_4 .ff-btn-submit {
	width: 100%;
}

/* form error text style */
.fluentform .ff-el-is-error .text-danger {
  font-size: var(--fs-body-m) !important;
}

/* top align email form */
.frm-fluent-form .ff-t-cell .ff_submit_btn_wrapper_custom {
  margin-top: 0px !important;
}

/* success message style */
.fluentform .ff-message-success {
  position: relative;
  border: none;
  box-shadow: none;
  font-size: var(--fs-body-m);
  font-weight: 500;
  text-align: center;
  color: var(--base-0);
  padding: 0px;
  margin-top: 20px;
}

/* END FLUENT FORMS STYLES */



/****************************************/
/****************************************/
/***** Footer Navigation *****/


/* footer navigation block spacing */
.wp-block-navigation {
	gap: 0;
}

/* footer navigation block link hover color */
.wp-block-navigation li:hover {
  color: var(--brand-dark);
}