/*
Theme Name: CCoT
Theme URI: 
Author: 
Author URI: 
Description: New theme for topsfieldchurch website
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccot
Tags: 
*/

.wp-block-column {
    min-width: 0;
}

/* =========================================================
   CALENDAR
   ========================================================= */

.church-calendar {
    width: 100%;
}

.church-calendar iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Mobile */
@media (max-width: 600px) {
    .church-calendar iframe {
        height: 500px;
    }
}

/* =========================================================
   EVENTS
   ========================================================= */

.event-details {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: 1.25rem !important;
    height: auto !important;
    min-height: 0 !important;
}

.event-details > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.event-details__item {
    margin: 0 !important;
}

.event-details__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.25rem !important;
}

.event-details__value {
    line-height: 1.4;
    margin: 0 !important;
}

.event-details__location-name {
    margin: 0 !important;
}

/* Address stays attached to the location */
.event-details__address {
    margin: 0.2rem 0 0 !important;
}

.event-details__address a {
    display: inline;
}

/* Actions/flyer follow immediately after event information */
.event-details__actions {
    margin: 0 !important;
}

.event-details__flyer {
    margin: 0 !important;
}


/* =========================================================
   EVENT RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 900px) {

    .event-header-columns {
        flex-wrap: wrap !important;
        row-gap: 1.5rem;
    }

    .event-header-columns > .wp-block-column {
        flex-basis: 100% !important;
    }

    .event-details {
        gap: 1rem !important;
    }
}

/*============================================================
SERMON VIDEO DISPLAY
============================================================= */

.cct-sermon-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

.sermon-video-column {
    min-width: 0;
    padding-right: 3rem;
}

.sermon-video-column .cct-sermon-video {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 781px) {
    .sermon-video-column {
        padding-right: 0;
    }
}


/*====================================================================
   DETAILS BOX FAQ STYLING
=====================================================================*/

/* Plan Your Visit FAQ */

.cct-faq {
    border-top: 1px solid #d8d2c8;
    padding: 0;
    margin: 0;
}

.cct-faq:last-of-type {
    border-bottom: 1px solid #d8d2c8;
}

.cct-faq summary {
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.4;
    padding: 1.25rem 2.5rem 1.25rem 0;
    cursor: pointer;
    position: relative;
    list-style: none;
}

/* Remove browser's default triangle */
.cct-faq summary::-webkit-details-marker {
    display: none;
}

.cct-faq summary::marker {
    content: "";
}

/* Our + icon */
.cct-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
}

/* Change + to − when open */
.cct-faq[open] summary::after {
    content: "−";
}

/* FAQ answer */
.cct-faq > *:not(summary) {
    max-width: 46rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Optional hover/focus cue */
.cct-faq summary:hover,
.cct-faq summary:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/*===================================================
  CTA Formatting
=====================================================*/

.equal-height-cta { align-items: stretch; }

.equal-height-cta .wp-block-column { display: flex; flex-direction: column; }

.equal-height-cta .wp-block-column :last-child { margin-top: auto; } :where(.wp-site-blocks) * {margin-block-start:0!important;}


/*=======================================================
Homepage Announcement Feature Banner
========================================================*/

.cct-homepage-feature {

--cct-feature-background: #ffffff;
--cct-feature-label: #a32638;
--cct-feature-heading: #222222;
--cct-feature-content: #333333;
background: var(--cct-feature-background);
width: 100%; box-sizing: border-box;
}

.cct-homepage-feature__inner {
width: 100%;
max-width: var(--wp--style--global--content-size, 1200px);
margin-left: auto;
margin-right: auto;
padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem;
box-sizing: border-box;
}

.cct-homepage-feature__content { display: block; }
.cct-homepage-feature__content.has-button {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}

.cct-homepage-feature__content.has-button .cct-homepage-feature__label, .cct-homepage-feature__content.has-button .cct-homepage-feature__heading, .cct-homepage-feature__content.has-button .cct-homepage-feature__text {
grid-column: 1;
}
.cct-homepage-feature__label {
color: var(--cct-feature-label);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em; margin-bottom: 0.5rem;
}

.cct-homepage-feature__heading {
color: var(--cct-feature-heading);
margin-top: 0;
margin-bottom: 1rem;
}

.cct-homepage-feature__text {
 color: var(--cct-feature-content);
}

.cct-homepage-feature__text p:first-child { margin-top: 0; }

.cct-homepage-feature__text p:last-child { margin-bottom: 0; }

.cct-homepage-feature__button-wrap { margin-top: 1.5rem; }

.cct-homepage-feature__content.has-button .cct-homepage-feature__button-wrap {
grid-column: 2;
grid-row: 1 / 4;
align-self: center;
margin-top: 0;
}

.cct-homepage-feature__button {
display: inline-block;
white-space: nowrap;
}
.cct-homepage-feature__image { margin-bottom: 1.5rem; }

.cct-homepage-feature__img {
width: 100%;
height: auto;
display: block;
}

@media (max-width: 700px) {
.cct-homepage-feature__content.has-button { grid-template-columns: 1fr; }
.cct-homepage-feature__content.has-button .cct-homepage-feature__button-wrap {
grid-column: 1;
grid-row: auto; margin-top: 1.5rem;
}
}

/*===========================================================
Mobile Menu Styling and Control
==========================================================*/

.mobile-utility-link { display: none !important; } /* Mobile/tablet: 800px and below */
@media (max-width: 800px) {

    /* Hide the separate utility nav */
    .desktop-utility-nav {
        display: none !important;
    }

    /* Show duplicated utility links inside mobile nav */
    .mobile-utility-link {
        display: flex !important;
    }

    /* Hide full navigation menu */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    /* Show hamburger button */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
}

/* Desktop: 801px and above */
@media (min-width: 801px) {

    /* Show full navigation menu */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        position: relative;
        width: 100%;
        z-index: auto;
    }

    /* Hide hamburger button */
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Hide duplicated mobile-only utility links */
    .mobile-utility-link {
        display: none !important;
    }

    /* Ensure desktop utility nav is visible */
    .desktop-utility-nav {
        display: flex !important;
    }
}


/* =========================================================
   DYNAMIC BUTTON
   ========================================================= */

.tct-dynamic-button-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}


/* =========================================================
   MISSION-RELATED POSTS GRID
   ========================================================= */

.mission-related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
}

.mission-related-post-card {
    min-width: 0;
}

.mission-related-post-image {
    display: block;
    margin-bottom: 1rem;
}

.mission-related-post-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
}

.mission-related-post-title {
    margin: 0 0 0.5rem;
}

.mission-related-post-title a {
    color: inherit;
    text-decoration: none;
}

.mission-related-post-title a:hover {
    text-decoration: underline;
}

.mission-related-post-excerpt {
    margin-bottom: 0.5rem;
}

.mission-related-post-excerpt p {
    margin: 0;
}

.mission-related-post-date {
    margin: 0;
    font-size: 0.875rem;
}

@media (max-width: 900px) {
    .mission-related-posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .mission-related-posts-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   STAFF LIST
   ========================================================= */

.cct-staff-list {
    width: 100%;
}

.cct-staff-person {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.cct-staff-person:first-child {
    padding-top: 0;
}

.cct-staff-person:last-child {
    border-bottom: 0;
}

.cct-staff-person__photo {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
}

.cct-staff-person__photo a {
    display: block;
    width: 100%;
    height: 300px;
}

.cct-staff-person__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cct-staff-person__info {
    min-width: 0;
}

.cct-staff-person__name {
    margin: 0 0 0.25rem;
}

.cct-staff-person__name a {
    color: inherit;
    text-decoration: none;
}

.cct-staff-person__role {
    margin: 0 0 1.25rem;
    font-weight: 600;
}

.cct-staff-person__excerpt {
    max-width: 700px;
}

.cct-staff-person__excerpt p {
    margin-top: 0;
}

.cct-staff-person__link {
    margin: 1rem 0 0;
}

.cct-staff-person__link a {
    font-weight: 600;
}

@media (max-width: 700px) {
    .cct-staff-person {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: start;
    }

    .cct-staff-person__photo {
        max-width: 100%;
        max-height: 300px;
    }

    .cct-staff-person__photo a {
        height: 300px;
    }
}


/* =========================================================
   FAITH IN THE WORLD FEATURED IMAGES
   ========================================================= */

.cct-faith-in-the-world .wp-block-post-featured-image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    width: 100%;
}

.cct-faith-in-the-world .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================================
   RLV SPINNER
   ========================================================= */

.rlv-has-spinner {
    border-color: #711f2b !important;
    border-right-color: transparent !important;
}

.rlv-has-spinner::after {
    background-color: #711f2b !important;
}

.rlv-has-spinner {
    width: 16px !important;
    height: 16px !important;
}
.ajde_evcal_calendar .eventon_list_event .evcal_list_a { background-color: #711f2b !important; } .single-mission-partner .wp-block-post-content p { margin-block-start: 0; margin-block-end: 1.25rem; } .single-mission-partner .wp-block-post-content p:last-child { margin-block-end: 0; } .single-mission-partner .wp-post-image { width: 100%; height: auto; max-height: 420px; object-fit: contain!important; object-position: center; background: #f7f7f7; display: block; } .mission-partner-news img, .single-mission-partner .wp-block-post-featured-image img { width: 100%; height: auto; object-fit: contain; object-position: center; display: block; } .mission-related-posts-empty { padding-top: 1.5rem; font-weight: 600; } .mission-partner-list .wp-block-post-featured-image { height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .mission-partner-list .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: contain !important; object-position: center; display: block; } .person-related-posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 1.5rem; } .person-related-post-card { min-width: 0; } .person-related-post-image { display: block; width: 100%; overflow: hidden; margin-bottom: 1rem; } .person-related-post-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; display: block; } .person-related-post-title { margin: 0 0 0.75rem; font-size: 1.35rem; line-height: 1.25; } .person-related-post-title a { color: inherit; text-decoration: none; } .person-related-post-title a:hover, .person-related-post-title a:focus { text-decoration: underline; } .person-related-post-excerpt { margin-bottom: 0.75rem; } .person-related-post-excerpt p { margin: 0; } .person-related-post-date { margin: 0; font-size: 0.9rem; font-weight: 600; } .person-related-posts-empty { padding-top: 1.5rem; font-weight: 600; } @media (max-width: 900px) { .person-related-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .person-related-posts-grid { grid-template-columns: 1fr; gap: 2rem; } } .single-person .person-featured-image img { width: 100%; max-width: 400px; height: 450px; object-fit: cover !important; object-position: center top; display: block; } .single-person .person-bio p { margin-top: 0 !important; margin-bottom: 1.25rem !important; } .single-person .person-bio p:last-child { margin-bottom: 0 !important; } .person-related-post-image { display: block; width: 100%; max-width: 300px; margin-bottom: 1rem; overflow: hidden; } .person-related-post-image img { width: 100%; height: 180px; object-fit: cover; object-position: center; display: block; } .single-post main { max-width: 1200px; margin-left: auto; margin-right: auto; } .single-post .single-post-featured-image { margin-top: 1.5rem; margin-bottom: 2rem; } .single-post .single-post-featured-image img { width: 100%; max-height: 500px; object-fit: cover !important; object-position: center; display: block; } .single-post .single-post-content p { margin-top: 0 !important; margin-bottom: 1.25rem !important; line-height: 1.7; } .single-post .single-post-content p:last-child { margin-bottom: 0 !important; } .single-post .single-post-content h2, .single-post .single-post-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; } .single-post .single-post-content ul, .single-post .single-post-content ol { margin-bottom: 1.25rem; } .person-related-sermons-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-top: 1.5rem; } .person-related-sermon { padding-top: 1.25rem; border-top: 1px solid #ddd; } .person-related-sermon-title { margin: 0 0 0.5rem; font-size: 1.35rem; line-height: 1.25; } .person-related-sermon-title a { color: inherit; text-decoration: none; } .person-related-sermon-title a:hover, .person-related-sermon-title a:focus { text-decoration: underline; } .person-related-sermon-date { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 600; } .person-related-sermon-excerpt { margin-bottom: 0.75rem; } .person-related-sermon-excerpt p { margin: 0; } .person-related-sermon-link { margin: 0; } .person-related-sermons-empty { padding-top: 1.5rem; font-weight: 600; } @media (max-width: 700px) { .person-related-sermons-list { grid-template-columns: 1fr; } } .person-related-sermons { margin-top: 3.5rem; } @media (min-width: 801px) { .wp-block-navigation .wp-block-navigation__submenu-container { left: 0 !important; right: auto !important; } } .card-grid { aspect-ratio: 3 / 2; overflow: hidden; } .card-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 801px) { .wp-block-navigation .wp-block-navigation__submenu-container { margin-top: 8px; border-radius: 0.5rem; overflow: hidden; } } .desktop-header { display: block; } .mobile-header { display: none; } @media (max-width: 800px) { .desktop-header { display: none !important; } .mobile-header { display: block !important; } } @media (max-width: 800px) { .mobile-header { text-align: center; } .mobile-header .wp-block-image { margin-left: auto; margin-right: auto; } .mobile-header .wp-block-navigation { justify-content: center; } .mobile-header .wp-block-navigation__responsive-container-open { margin-left: auto; margin-right: auto; } .mobile-header .wp-block-navigation__responsive-container.is-menu-open { text-align: left; } .mobile-header .wp-block-navigation__responsive-container-content { align-items: flex-start !important; text-align: left !important; } .mobile-header .wp-block-navigation__container { align-items: flex-start !important; width: 100%; } .mobile-header .wp-block-navigation-item { width: 100%; text-align: left; } .mobile-header .wp-block-navigation-item__content { text-align: left; } } .history-timeline a, .history-timeline a:hover, .history-timeline a:focus, .history-timeline a:active { text-decoration: none !important; } .history-timeline a h2, .history-timeline a h3, .history-timeline a h4 { text-decoration: none !important; } .history-timeline-card { box-sizing: border-box !important; height: 150px !important; min-height: 150px !important; max-height: 150px !important; padding: 16px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; text-align: left !important; overflow: hidden; } .history-timeline-card * { text-align: left !important; } .history-timeline-card a, .history-timeline-card a:hover, .history-timeline-card a:focus, .history-timeline-card a:active { text-decoration: none !important; } .history-timeline-card { transition: transform 0.2s ease, opacity 0.2s ease; } .history-timeline-card:hover { transform: translateY(-2px); opacity: 0.94; } @media (max-width: 700px) { .history-timeline-card { height: auto; min-height: 0; } }