/* Global Styles */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
}

.grid-columns-3 {
    grid-template-columns: 1fr 1fr 3fr;
}

body{
    overflow-x: hidden;
}

/* Grid column span utilities */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }

/* Grid row span utilities */
.row-1 { grid-row: span 1; }
.row-2 { grid-row: span 2; }
.row-3 { grid-row: span 3; }
.row-4 { grid-row: span 4; }

header{
    background: linear-gradient(135deg, #5E7AA1 0%, #1E3A5F 100%);
}

div.ccm-page header h1, div.ccm-page header h2,
 div.ccm-page header h3, div.ccm-page header h4,
  div.ccm-page header h5, div.ccm-page header h6,
   div.ccm-page header p, div.ccm-page header nav ul a{
    color: #FFFFFF;
}

header .logo-container {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    grid-column: 1;
    grid-row: 1/ spand 2;
}

.logo-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
header .logo-title {
    display: flex;
    font-weight: 600;
    flex-direction: column;
    justify-content: center;
    margin: 0 1rem;
    width: 100%;
    max-width: 180px;
}

.logo-title h1:nth-child(1){
    position: relative; 
    bottom: -16px; 
    text-align: center; 
    font-size: 26px;
}

.logo-title h1:nth-child(2){
    text-align: center; 
    font-size: 40px;
}
.logo-title h1:nth-child(3){
    position: relative; 
    top: -16px; 
    right: -4px; 
    text-align: right; 
    font-size: 26px;
}

@media (max-width: 769px){
    .logo-title h1:nth-child(1){
        font-size: 18px;
        bottom: -10px; 
    }
    .logo-title h1:nth-child(2){
        font-size: 22px;
    }
    .logo-title h1:nth-child(3){
        top: -6px; 
        font-size: 18px;
    }
}

header .logo-title h1{
    margin: 0;
}

header .logo-title h1:hover{
    text-decoration: none;
}

header .logo-image {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1/ spand 2;
}

header .logo-img {
    max-height: 125px;
    width: auto;
}
header .navigation {
    margin: 1rem 1rem;
    grid-column: 3;
    grid-row: 1;
}

header .navigation .nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

header .navigation .nav li a{
    color: #FFFFFF;
    font-size: 20px;
    background: transparent;
}

header .navigation .nav li a:hover{
    color: #FFFFFF;
    background: transparent;
}

.ccm-responsive-menu-launch i:after{
    font-size: 30px;
}

@media (max-width: 769px) {
    header .navigation {
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
}

div.ccm-page header nav ul{
    width: 100%;
    display: flex;
    flex-direction: row ;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: 0;
}

div.ccm-page header nav ul li {
    padding: 0 0.5rem;
}

div.ccm-page header nav ul li a{
    font-size: 20px;
    padding: 0;
}

header .excerpt-container{
    display: flex;
    align-items: center;
    justify-content: end;
    grid-column: 1 / span 2;
    grid-row: 2 / span 3;
}
header .excerpt-container .excerpt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 50%;
    background: linear-gradient(90deg, #C8A24D 0%, #84631b 100%);
    right: -40px;
    z-index: 1;
}
header .banner {
    grid-column: 3;
    grid-row: 2 / span 3;
    padding-top: 1rem;
}
header .description h2{
    font-size: 22px;
}
header .description p{
    font-size: 20px;
}
header .description {
    padding: 0.5rem;
    grid-column: 1 / span 3;
    grid-row: 5;
}

div.ccm-responsive-overlay{
    top: 155px;
}

@media (max-width: 615px){
    div.ccm-responsive-overlay{
       top: 25vw;
    }
}
@media (max-width: 458px){
    div.ccm-responsive-overlay{
	top: 115px;
    }
}

@media (max-width: 769px) {
    header .excerpt-container {
        grid-column: 1 / span 3;
        grid-row: 3 / span 2;
        justify-content: center;
    }
    header .excerpt-container .excerpt{
        right: 0;
        background: linear-gradient(90deg, #c8a14d75 0%, #84631b80 100%);
    }
    header .banner {
        grid-column: 1 / span 3;
        grid-row: 3 / span 2;
    }
}

/* Footer Styles */
footer{
    background: linear-gradient(135deg, #4c4c4c 0%, #262626 100%);
}

footer .logo-container, footer .logo-title-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-decoration: none;
}
footer .logo-title {
    display: flex;
    font-weight: 600;
    flex-direction: column;
    justify-content: center;
    margin: 0 1rem;
    width: 100%;
    max-width: 180px;
}
footer .logo-title h1{
    margin: 0;
    color: #FFFFFF;
}

footer p{
    margin: 0;
    color: #FFFFFF;
}

footer .footer-row{
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 769px) {
    footer .footer-row .right-col p{
        text-align: right!important;
        font-size: 9px;
    }
}

footer .logo-img {
    max-height: 125px;
    padding: 1rem;
    width: auto;
}

footer#footer-theme section:last-child{
    border: none;
}

/* Home Page Styles */

.schedule-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 2rem;
}

@media (max-width: 769px) {
    .schedule-container {
        align-items: flex-start;
        flex-direction: column;
    }
}

.schedule-container .schedule,
.schedule-container .address {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.schedule-container i {
    font-size: 2rem;
    color: #1f3b60;
}

.schedule-container .schedule-text,
.schedule-container .address-text {
    display: flex;
    flex-direction: column;
}

.schedule-container p {
    margin: 0;
    color: #1f3b60;
    font-size: 16px;
}

.hero-sections {
    display: flex;
    justify-content: center;
    padding: calc(2vw + 2vh);
    flex-direction: column;
    align-items: center;
}

.hero-sections .section {
    height: calc(25vw + 25vh);
    max-height: 450px;
    aspect-ratio: 800 / 500;
    background-image: url('/application/themes/sharon_moravian_elemental/images/EventsBackground.png');
    background-position: center;
    background-size: cover;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    margin: calc(2vw + 2vh) 0;
    overflow: hidden;
}


.hero-sections .section.sermons{
    background-image: url('/application/files/6617/7255/3378/OnlineSermons.jpg');
}

.hero-sections .section.contact{
    background-image: url('/application/files/8617/7161/1431/ContactBackground.png');
}

@media (max-width: 1000px) {
    .hero-sections .section {
        width: 100%;
    }
}

.hero-sections .section .header {
    text-align: center;
    background: linear-gradient(135deg, #8bae97 0%, #3e915b 100%);
    border-radius: 4px;
    position: relative;
    padding: calc(1vw + 1vh) 0 calc(2vw + 2vh) 0;
    z-index: 2;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 57% 75%, 50% 100%, 43% 75%, 0 75%);
}
.hero-sections .section.sermons .header{
    background: linear-gradient(135deg, #76b1ff 0%, #0d5fca 100%);
}
.hero-sections .section.contact .header{
    background: linear-gradient(135deg, #6f5d4e 0%, #463120 100%);
}

.hero-sections .section.sermons .header {
    clip-path: none;
}

.hero-sections .section.contact .header {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 57% 75%, 50% 75%, 43% 75%, 0 75%);
}

.hero-sections .section .header::after {
    display: none;
}

.hero-sections .section .header h3 {
    font-size: min( 28px, calc(1.75vw + 1.75vh));
    margin: 0;
    color: #FFFFFF;
}

.hero-sections .section .body {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.hero-sections .section.sermons .body{
    justify-content: space-between;
}

.hero-sections .section .event-icon img {
    max-width: calc(10vw + 10vh);
    height: auto;
}

.hero-sections .section h4 {
    text-align: center;
    font-size: min( 24px, calc(1.5vw + 1.5vh));
    margin: 0;
    color: #FFFFFF;
}

.hero-sections .section h5 {
    text-align: center;
    font-size: min( 20px, calc(1vw + 1vh));
    margin: 0;
    color: #FFFFFF;
}

.hero-sections .section .event-nav {
    text-align: center;
}


.hero-sections .section .sermon-nav {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.5rem;
    align-items: center;
    background: #84631b;
}

.hero-sections .section .sermon-icon{
    position: relative; 
    top: -7vh; 
    z-index: 2; 
    height: 50px;
}

@media (max-width: 1000px) { 
    .hero-sections .section .sermon-icon{
        top: 0; 
    }
}

.hero-sections .section .sermon-icon img {
    max-height: 200px;
    height: calc(10vw + 10vh);
}

.hero-sections .section .sermon-nav p{
    color: #ffffff;
}



/* Fade-in animation for sections */

@keyframes fadeUpIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section {
    opacity: 0;
    transform: translateY(30px);
}



.section.fade-in-visible {
    animation: fadeUpIn 0.6s ease-out forwards;
}



div.ccm-page .hero-sections .section .event-nav .btn{
    font-size: min( 20px, calc(1vw + 1vh));
    border-radius: calc(0.5vw + 0.5vh);
    background-color: #0e4676;
    border: solid 2px #ffffff;
    border-radius: calc(0.5vw + 0.5vh);
}


div.ccm-page .hero-sections .section .sermon-nav .btn{
    font-size: min( 24px, calc(1.25vw + 1.25vh));
    border-radius: calc(0.5vw + 0.5vh);
    background-color: #99bddd;
    border: solid 2px #ffffff;
    border-radius: calc(0.5vw + 0.5vh);
}

div.ccm-page .hero-sections .section .contact-nav .btn{
    font-size: min(24px, calc(1.25vw + 1.25vh));
    border-radius: calc(0.5vw + 0.5vh);
    background-color: #392e1d;
    border: solid 2px #ffffff;
    border-radius: calc(0.5vw + 0.5vh);
}

.hero-sections .section .contact-icons{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: calc(2vw + 2vh);
}

.hero-sections .section .contact-icons img {
    width: calc(6vw + 6vh);
    max-width: 100px;
    height: auto;
}


.hero-sections .section .event-nav {
    text-align: center;
}


/* Default Page Styles */

div.ccm-page .HeroHeader h1{
    color: #FFFFFF;
    font-size: 3em;
}

/* Default Form Styles */

div#ContactForm {
    width: 100%;
    max-width: 600px;
    margin: 2rem auto;
}

div#ContactForm .form-actions{
    float: right;
}

div#ContactForm  .form-group.captcha{
    max-width: 300px;
    margin: 2rem auto;
}

div#ContactForm .btn{
    font-size: calc(1vw + 1vh);
    border-radius: calc(0.5vw + 0.5vh);
    background-color: #0e4676;
    border: solid calc(0.2vw + 0.2vh) #ffffff;
    border-radius: calc(0.5vw + 0.5vh);
}

/* Main Calendar Styles */

.MainCalendar {
    padding: 2rem;
}