/*
 Theme Name:   Pahrump CC
 Theme URI:    https://generatepress.com
 Description:  Custom theme for PahrumpCC by Converging Currents -Ed Hall
 Author:       Ed Hall  
 Author URI:  
 Template:     generatepress
 Version:      0.1
*/

/*----------------------------
 # 1 GENERAL APPEARANCE  CODE
----------------------------*/

/* Site Wrapper */
.site-wrapper {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

/* Remove bottom margin on last paragraph */
/* .gb-container p:last-child:last-of-type {
    margin-bottom: 0px;
}

.block-editor-block-list__layout .gb-container p:nth-last-child(2) {
    margin-bottom: 0px;
} */

/* Sets expert length */
.line-limit {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; 
      overflow:hidden;
      height:4.5rem;
  }

  html {font-size:16px;}
  h1 {font-size: clamp(2.04rem, 1.70299rem + 1.419vw, 2.98rem);}
  h2 {font-size: clamp(1.73rem, 1.46115rem + 1.132vw, 2.48rem);}
  h3 {font-size: clamp(1.44rem, 1.22483rem + 0.906vw, 2.04rem);}
  h4 {font-size: clamp(1.2rem, 1.01rem + 0.8vw, 1.73rem);}
  h5 {font-size: clamp(1rem, 0.8423rem + 0.664vw, 1.44rem);}
  h6 {font-size: clamp(0.9rem, 0.79241rem + 0.453vw, 1.2rem);}
  body {font-size: clamp(0.8rem, 0.66046rem + 0.377vw, 1rem);}
  p {font-size: clamp(0.8rem, 0.66046rem + 0.377vw, 1rem);}


/*----------------------------
 # 2 HELPER CLASSES
----------------------------*/
.ar-16-9 {
    aspect-ratio: 16/9;
}

.ar-9-16 {
    aspect-ratio: 9/16;
}

.ar-4-3 {
    aspect-ratio: 4/3;
}

.ar-1-1 {
	aspect-ratio: 1/1;
}

/* Visually Hidden */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* No Underline */
.no-ul, .no-ul a {
	text-decoration: none;
}

.list-clean{
    list-style: none;
    margin-inline-start: 0;
}
/*----------------------------
 # Nav Menu
----------------------------*/
.has-inline-color{
    padding-inline: 1rem;
    border-radius: 8px;
}
li.gb-button.give{
    margin-left: 2rem;
}
li.gb-button.give a{
    color: var(--base-3);
}
@media (max-width: 768px) {
    /* CSS in here for mobile only */
    .gb-button.give{
        margin-inline: auto;
        margin-block-end:3em;
    }
    
}
.main-navigation .main-nav > ul > li.current_page_item{
	background-image: linear-gradient(var(--primary-400),var(--primary-200));
	background-size: 100% 4px, auto;
	background-size: calc(100% - 2.0em) 4px, auto;
}

.main-navigation .main-nav > ul > li{
background-image: linear-gradient(var(--primary-400),var(--primary-200));
    background-size: 0 4px, auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: all .2s ease-out;
}
.main-navigation .main-nav > ul > li:hover{
	background-size: 100% 4px, auto;
	background-size: calc(100% - 1.5em) 4px, auto;
} 

.full-width{
width:100%;
}

@media (max-width:1060px){
    .give-block a{
	display:none;
    }
}
@media (min-width:1000px){
    .give-block-menu a{
	display:none;
    }
}
/*----------------------------
 # 8 Blockquote
----------------------------*/
blockquote {
	position: relative;
	text-align: center; 
	border: 0;
	margin-top: 3rem;
	padding-top: 2rem;
}

blockquote::before{
	position: absolute;
	content: ''; 
	width: 60%;
	height: 2px;
	background-color: #E7E7E8;
	top: 0;
	transform: translatex(-50%);
}

blockquote::after{
	--_quote-size: 34px;
	position: absolute;
	content: '';
	width: var(--_quote-size);
	aspect-ratio: 1/1; 
	background-image: url('/wp-content/uploads/2023/06/open-book-book-svgrepo-com.svg');
	background-size: cover;
	top: calc(var(--_quote-size)/-2);
	left: 50%;
	transform: translatex(-50%);
	
}

blockquote p {
	font-size: 1.25rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.2;
}

blockquote cite {
	font-style: normal; 
	text-transform: uppercase; 
	font-weight: 500;
	letter-spacing: .1em;
	font-size: 0.85rem;
	color: hsla(226, 7%, 51%, 1);
}

/*----------------------------
 # 9 Fluent Forms CSS
----------------------------*/

/* Change button style*/
.ff_submit_btn_wrapper button.ff-btn-submit.ff_btn_style{
    background-color: var(--primary-500); /*change button background color */
    color: var(--base-3); /*change button font color*/
    /* border: 1px solid var(--accent-2); */
    /* font-weight: 700; */
    letter-spacing: 0.1em; 
    /* width: 100%; */
    padding: 0.75em 1.5em;
    border-radius: 8px; /*change button round corners*/
    transition: all 0.4s ease-in-out 0.15;
    
}

/*Change button hover style*/
.ff_submit_btn_wrapper button.ff-btn-submit.ff_btn_style:hover  {
    background-color: var(--secondary-500); /*change button background color on hover*/
    /* color: var(--accent); change button font color on hover */
    transform: scale(1.025) perspective(1000px);
}

/*input style*/
form.fluent_form .ff-el-form-control{
    padding: 6px 12px;  /*change padding*/
    font-size: 16px; /*change font size*/
    line-height: 1.5; /*change line height*/
    color: var(--contrast-2); /*change font color*/
    background-color: var(--base); /*change background color*/
    border: 1px solid var(--base); /*change border width and color*/
    /*border-radius: 10px; /*change corner round/ border radius*/
}

/*Change label styles*/
.ff-el-input--label{
    font-size:.8rem; /*change label font size*/
    font-weight: 700;
    color: var(--contrast-2); /*change label color*/
}

/* Change Rating Star Color */
form.fluent_form_4 .ff-el-ratings label.active svg {
    fill: var(--base-3);
}

/*Change Step button styles*/
.sermon-step  .step-nav button.ff-btn{
    background-color: rgba(255, 255, 2555, 0) !important; /* change step button background color */
    color: var(--primary-500); /*change step button font color*/
    border:none;
    text-decoration: underline;
    border-radius: 8px; /*change step button round corners*/
}


/*Change Step button styles on hover*/
.sermon-step  .step-nav button.ff-btn:hover{
    /*background-color: var(--secondary-500)!important; /*change step button background color on hover*/
    color: var(--secondary-500); /*change step button font color on hover*/
    border: 1px solid var(--secondary-500);
}

/* Change file upload button styles */
.fluentform span.ff_upload_btn.ff-btn{
    background-color: var(--primary-500);
    color: var(--base-3);
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.4s ease-in-out 0.15;
}
/* Change file upload button styles on hover*/
.fluentform span.ff_upload_btn.ff-btn:hover{
    background-color: var(--secondary-500);
    transform: scale(1.025) perspective(1000px);
}
/* ------------ Individual Styles------------ */
/* Set button width to 100% on forms #8 & #22 */
.fluent_form_8 .ff_submit_btn_wrapper button.ff-btn,
.fluent_form_22 .ff_submit_btn_wrapper button.ff-btn{
    width: 100%;
}
h3.ff-el-section-title,
h3.ff-el-section-title{
    font-size: 1.43rem;
    font-weight: 500 !important;
}
.ff-section_break_desk p {
    font-size:0.9em;
    letter-spacing:0.05em;
    font-weight:700;
    margin-bottom:2em;
    color:var(--neutral-600);
  }
.pcc-modal-btn{
    width: 100%;
  }


/*----------------------------
 # Slide Out Menu
----------------------------*/
  
div.slideout-overlay {
    left: 264px;
}
#generate-slideout-menu.main-navigation {
    background-color: transparent;
}
#generate-slideout-menu:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

button span.gb-icon.pro-close svg {
    background-color: var(--primary-500);
    padding: 12px 16px 16px 16px;
    border-radius: 100%;

}
/*----------------------------
 # 9 Event Calender CSS
----------------------------*/
.ecs-events.compact.compact-3{
	border-spacing:0 1.5em !important;
}
.date_thumb{
    border-radius:5px;
    width: 48px!important;   
}
.summary{
    padding-left: 1rem;
}
.summary a{
    font-weight:900;
    letter-spacing:.1rem
}
.tribe-event-date-start, .tribe-event-time{
    color: var(--secondary-400);
    font-weight: 700;
}

/*----------------------------
 # Grid CSS
----------------------------*/

.grid-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(225px, 1fr));
    /* grid-auto-flow: column; */
    /* grid-auto-columns: 21rem; */
    gap:2em 1em;
}

/*----------------------------
 # Video Thumbnail Scrolling CSS
----------------------------*/

.hz-scroll{
    flex-wrap: nowrap;
    overflow-x: scroll;
    align-items: stretch;
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    /* .bottom-layout{
		text-align:center;
	} */
/* 	.hz-scroll-hp{
			flex-wrap:nowrap;
	overflow-x:auto;
	align-items:stretch;
	} */
	/* .sermon-pane-small{
		flex-direction:column;
	} */
}

@media (max-width: 768px) {
    /* CSS in here for mobile only */
	/* .sermon-title-small{
		font-size:0.85rem;
        
	}
    .sermon-subtitle-small,
    .sermon-date-small{
        font-size:0.75rem;
    }
	.bottom-layout{
		text-align:center
	} */
	
}
/*----------------------------
 # Pretty Google Calendar
----------------------------*/
/* Pretty Calendar List view widget */
.gpc-page .fc-event.fc-h-event{
	/* background-color: var(--primary-500); */
  border: 1px solid var(--primary-500);
}

.gpc-page > .fc .fc-daygrid-day.fc-day-today{
	background-color:var(--secondary-100);
}

.gpc-page .fc-today-button.fc-button.fc-button-primary{
	background-color:transparent;
	border-color:var(--neutral-500);
	color:var(--contrast-2);
}
.gpc-page .fc-today-button.fc-button.fc-button-primary:hover{
	background-color:var(--primary-500);
	border-color:var(--primary500);
	color:var(--neutral-100);
}
.gpc-page .fc-button-primary{
	background-color:var(--primary-500);
	border-color:var(--primary-500);
}
.gpc-page .fc-button.fc-button-primary:hover{
	background-color:var(--primary-700);
	border-color:var(--primary-700);
}
.gpc-page .fc-button.fc-button-primary.fc-button-active{
	background-color:var(--primary-700);
	border-color::var(--primary-700);
}

.gpc-page .fc .fc-header-toolbar h2{
    font-size: clamp(1.73rem, 1.46115rem + 1.132vw, 2.48rem);
}
/* Front Page Pretty Google Calendar List Block */

.gpc-list .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr{
    clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.gpc-list .fc-cell-shaded{
	font-weight:900;
	background-color:inherit;
}

.gpc-list  .fc-list-day-cushion{
	padding-left:0;
}

.gpc-list .fc-event{
	width:72ch;
    margin-top:4px;
    color: var(--primary-700);
    background-color: inherit;
    border-color: inherit;
    border-width: 0;
    font-weight: 500;
    font-size:1rem;
}
.gpc-list .fc-event td{
	border-width:0;
}
.gpc-list .fc-list-event-title{
	width:100%;
}

.gpc-list tr.fc-event:hover{
    color:var(--primary-700);
	background-color:var(--secondary-100);
}

.gpc-list tr.fc-day {
	border-bottom:2px solid var(--fc-border-color);
    border-top-width: 0px;
}
.gpc-list .fc-list{
	border:none;
	border-bottom:1px solid var(--fc-border-color);
}



.pgcal-branding{
		clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

/*----------------------------
 # Awana Data via Option Page 
----------------------------*/
.card{
    position: relative;
   transition: .3s ease-in-out;
}
.card:hover{
    translate: 0 -.25em;
}
.card:focus-within{
    box-shadow:  ;
}
.card p  a::before{
    content:"";
    position:absolute;
    inset:0;
    z-index: 1;
}
.card figure{
	box-shadow: 3px 3px 4px 2px rgba(71, 71, 71, 0.4);
}

/*----------------------------
 # fixes
----------------------------*/
.footer-lineheight li{
    margin-block: 0.5em;
    padding-block: 0.5em;
	/* line-height:3; */
}
/*----------------------------
 # Staff Dirctory
----------------------------*/
/* hides empty staff locations/positions */
.location:not(:has(h3)) {
    display:none;
    }
h3.no-ul a {
    color: var(--neutral-500);
    } 
h3.no-ul a:hover {
        color: var(--primary-500);
        text-decoration: underline;
        }