/*
Theme Name: Trinity Lutheran Church
Theme URI: https://www.trinitylutherannewhampton.org
Author: Ashley Morrison Design
Author URI: https://www.ashleymorrison.design
Description: Ashley Morrison Design Custom Theme
Tags: Simple
Version: 1.0
Requires at least: 5.0
Tested up to: 5.8
Text Domain: trinitylutherannewhampton.org
*/


/****** RESET *********/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/****** GLOBALS *********/

.desktop{
	display:block;
}

.mobile{
	display:none;
}

body{
	background-color:#fcfbf6;
	width:100%;
	height:auto;
	font-family:Tinos, serif;
}

.container{
	width:100%;
	max-width:1200px;
	height:auto;
	margin:auto;

}

a{
	color:#000000;
	text-decoration:none;
}

a:hover{
	color:gray;
	transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

h1, h2, h3, h4{
	font-family: Aboreto, serif;
	font-weight:normal;
}

h1{
	font-size:30px;
}

h2{
	font-size:18px !important;
}

p{
	font-size: 18px;
	padding-bottom:2%;
}

hr {
    margin: 25px 0 20px;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #ebebeb;
}

.wp-block-separator {
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #ebebeb;
}

.wp-element-caption{
	font-size:12px;
	text-transform: uppercase;
	font-family:Josefin, sans-serif;
	text-align: center;
	color:gray;
	letter-spacing: .1em;
}

/****** FONTS *********/

.josefin{
	font-family:Josefin Sans, sans-serif;
}

.ten{
	font-size:10px;
}


.upper{
	text-transform:uppercase;
}

.left{
	text-align:left;
}

.center{
	text-align:center;
}

.right{
	text-align:right;
}

.gray{
	color:gray;
}

.black{
	color:#000000;
}

.white{
	color:#FFFFFF;
}

.maroon{

}

.coral{
	color:#c36065;
}

/****** HEADERS *********/

#pre-pre-header{
	width:100%;
	height:auto;
	line-height:30px;
	background-color:#522925;
	color:#693d3a;
}

#pre-pre-header-blocks{
	display:flex;
	flex-direction:row;
	justify-content: space-between;
}

.pre-pre-header-block{
	width:30%;
}

#pre-header{
	width:100%;
	height:auto;
	line-height: 36px;
	background-color:#efefef;
	border-bottom:1px solid #ebebeb;
}

#pre-header-blocks{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}

.pre-header-block{
	width:30%;
}

#logo{
	width:185px;
	height:auto;
	margin:auto;
	padding:25px 0;
}

#main-body img{
	border-radius:5px;
}


/**** SEARCH ****/

.pre-header-block p{
	padding:0px;
	margin:0px;
}

.is-form-style input.is-search-input {
    background: #fff;
    background-image: none !important;
    color: #333;
    padding: 0 8px;
    margin: 0;
    outline: 0 !important;
    font-size: 12px !important;
    height: 26px !important;
    min-height: 0;
    line-height: 1;
    border-radius: 0;
    border: 1px solid #ccc !important;
    font-family: arial;
    width: 68%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.is-search-icon svg {
    width: 22px;
    display: inline;
}

.is-search-icon {
    padding-top: 1px !important;
    cursor: pointer;
}
.is-form-style input.is-search-submit, .is-search-icon {
    font-size: 12px !important;
    height: 26px !important;
}

/**** NAVIGATION ****/

nav{
	width:100%;
	height:auto;
	text-align: center;
	font-family:Aboreto, serif;
}

.menu-main-navigation-container ul{
	list-style: none;
	padding:0px;
	display:flex;
	justify-content: center;
}

.menu-main-navigation-container ul li{
	padding:0 30px;
}

.menu-main-navigation-container ul li a{
	color:#000000;
	text-decoration: none;
	font-size:20px;
}

.menu-main-navigation-container ul li a:hover{
	color:gray;
}

/**** PAGES ****/

#main-body{
	margin-top:2%;
}

#tile-blocks{
	width:100%;
	height:auto;
	display:flex;
	flex-direction: row;
	justify-content: center;
}

.tile-block{
	width:375px;
	height:auto;
	margin:1%;
	text-align: center;
	position:relative;
	border-radius:5px;
}

#tile-blocks h2.wp-block-heading{
	position: absolute;
	left: 50%;
	bottom:5px;
  transform: translate(-50%, -50%);
  background-color: #522925;
  border-radius: 5px;
  padding:2%;
  color:#FFFFFF;
  opacity:80%;
  width:80%;
}

#feature-blocks{
	width:100%;
	height:auto;
	min-height:300px;
	background-image: url('img/church-landscape.jpg');
	background-size:cover;
	margin-top:3%;
}

#calendar-blocks{
	width:100%;
	height:auto;
	padding:3% 0;
}


#body-h1-wrapper{
	width:100%;
	height:auto;
	padding:2% 0;
	text-align: center;
	background-color:#efefef;
}

#body-page-wrapper{
	width:100%;
	height:auto;
	min-height: 600px;
	padding: 3% 0;
}

#body-page-wrapper a{
	text-decoration: underline;
}

.breadcrumbs{
	font-size:11px;
	font-family: Josefin, sans-serif;
	color:gray;
	text-transform: uppercase;
	letter-spacing: .1em;
}


/**** FOOTER ****/

#synod-blocks{
	width:100%;
	height:auto;
	background-color:#efefef;
	padding:2% 0;
}

#synod-block{
	width:150px;
	height:auto;
	margin:auto;
	font-family: Josefin, sans-serif;
	font-size:11px;
	text-transform: uppercase;
	text-align: center;
}

#footer-blocks{
	width:100%;
	height:auto;
	min-height: 300px;
	background-color:#522925;
}

.footer-container{
	width:100%;
	max-width:1200px;
	margin:auto;
	height:auto;
	display: flex;
}

.footer-block{
	height:auto;
	flex-direction: row;
}

.footer-block:nth-child(1){
	width:10%;
	margin-top:5%;
}

.footer-block:nth-child(2){
	width:90%;
	margin-top:5%;
}

.footer-block ul{
	list-style: none;
	display: flex;
	justify-content:flex-end;
}

.footer-block ul li{
	width:15%;
	text-align: right;
}

.footer-block ul li a{
	font-size:18px;
	color:#FFFFFF;
	text-transform: uppercase;
	font-family:Aboreto, Serif;
	text-decoration: none;
}

.footer-block ul li a:hover{
	color:gray;
}

#footer-slogan{
	margin-top:1%;
	color:#c36065;
	font-family:Josefin, sans-serif;
	font-size:14px;
}

#footer-credits{
	margin-top:1%;
	font-size:14px;
}


/**** ANIMATIONS ****/

.fade-down-element {
    /* Apply the animation properties */
    animation-name: fadeInDown;
    animation-duration: .75s; /* The duration of the animation (adjust as needed) */
    animation-timing-function: ease-out; /* The speed curve of the animation */
    animation-fill-mode: forwards; /* Ensures the element stays in its final state after the animation finishes */
    opacity: 0; /* Initial state before animation starts */
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Starts 20px above its final position */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Ends in its original position */
    }
}




@media only screen and (max-width:786px) {

.desktop{
	display:none;
}

.mobile{
	display:block;
}

.pre-pre-header-block:nth-child(2){
	width:100%;

}

#pre-header-blocks{
	flex-direction: column;
}

#pre-header{
	background-color:#3a1d1a;
	text-align: center;
}

.pre-header-block{
	width:100%;
}

.pre-header-block a{
	color:#FFFFFF;
}



}