/*
 Theme Name:   Olney Baptist Child
 Theme URI:    https://olneybaptist.org/
 Description:  Child theme for The Olney Baptist Church, based on Astra.
               Delivers a professional, welcoming design faithful to the
               church's Reformed Baptist identity and missions focus.
 Author:       Perplexity Computer
 Author URI:   https://perplexity.ai/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  olney-baptist-child
*/

/* ============================================================
   IMPORT FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES  (design tokens)
   ============================================================ */
:root {
    /* Primary palette — navy / gold inspired by the original site */
    --obc-navy:        #1B2D5B;   /* deep navy — primary brand color    */
    --obc-navy-dark:   #0F1D3E;   /* darkened navy for hover/footer     */
    --obc-navy-mid:    #263A6E;   /* mid navy — header gradient         */
    --obc-gold:        #B8922A;   /* warm gold — accent / CTA           */
    --obc-gold-light:  #D4A83A;   /* lighter gold for hover             */
    --obc-cream:       #F8F5EE;   /* warm off-white — page background   */
    --obc-cream-dark:  #EDE8DC;   /* card / section backgrounds         */
    --obc-text:        #1A1A2E;   /* near-black body text               */
    --obc-text-muted:  #555577;   /* secondary / muted text             */
    --obc-border:      #D4CEBD;   /* subtle border / divider            */

    /* Typography */
    --font-heading:   'Lora', Georgia, serif;
    --font-body:      'Source Sans 3', 'Segoe UI', Arial, sans-serif;

    /* Spacing */
    --section-pad:    4rem 0;
    --container-max:  1180px;
}

/* ============================================================
   BASE RESETS & BODY
   ============================================================ */
body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--obc-text);
    background-color: var(--obc-cream);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--obc-navy);
    line-height: 1.25;
    font-weight: 700;
}

a {
    color: var(--obc-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--obc-gold);
}

p {
    margin-bottom: 1.1em;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   SITE HEADER
   ============================================================ */

/* Top header bar containing logo */
.site-header,
#masthead,
.ast-primary-header-bar {
    background: linear-gradient(135deg, var(--obc-navy-dark) 0%, var(--obc-navy-mid) 100%) !important;
    padding: 0 !important;
}

/* Logo area */
.ast-site-identity {
    padding: 14px 0 !important;
}

.site-title,
.ast-header-site-title a {
    font-family: var(--font-heading) !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px;
}

.site-description,
.ast-header-site-description,
.header-site-tagline {
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    color: var(--obc-gold-light) !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Logo image sizing */
.custom-logo,
.site-logo img,
.astra-logo-svg,
img.custom-logo {
    max-height: 80px;
    width: auto;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Primary nav bar background */
#ast-desktop-header .main-header-bar,
.ast-main-header-wrap,
.main-header-bar {
    background-color: var(--obc-navy) !important;
    border-top: 3px solid var(--obc-gold) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Nav links */
.ast-primary-nav-container .menu-item > a,
#primary-menu > .menu-item > a,
.main-navigation .menu > li > a,
.ast-builder-menu-1 .menu-item > a {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #e8eaf2 !important;
    padding: 16px 18px !important;
    transition: color 0.2s ease, background 0.2s ease !important;
}

.ast-primary-nav-container .menu-item > a:hover,
#primary-menu > .menu-item > a:hover,
.main-navigation .menu > li > a:hover,
.ast-builder-menu-1 .menu-item > a:hover,
.ast-primary-nav-container .current-menu-item > a,
.ast-primary-nav-container .current-menu-ancestor > a {
    color: var(--obc-gold-light) !important;
    background-color: rgba(255,255,255,0.06) !important;
}

/* Dropdown menus */
.ast-primary-nav-container .sub-menu,
.main-navigation .sub-menu {
    background-color: var(--obc-navy-dark) !important;
    border-top: 2px solid var(--obc-gold) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important;
    min-width: 200px;
}

.ast-primary-nav-container .sub-menu .menu-item > a,
.main-navigation .sub-menu .menu-item a {
    font-size: 0.83rem !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    color: #d0d4e8 !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.ast-primary-nav-container .sub-menu .menu-item > a:hover,
.main-navigation .sub-menu .menu-item a:hover {
    color: var(--obc-gold-light) !important;
    background-color: rgba(255,255,255,0.08) !important;
}

/* Mobile hamburger */
.ast-button-wrap .menu-toggle,
button#astra-mobile-menu-toggle {
    color: #ffffff !important;
}

/* ============================================================
   HERO / BANNER SECTION
   (Metaslider or custom hero block target)
   ============================================================ */

/* If using MetaSlider or similar plugin */
.metaslider,
#metaslider_container,
.ml-slider-container,
#homepage-hero-slider,
.wp-block-cover.hero-banner {
    width: 100%;
    max-height: 540px;
    overflow: hidden;
}

/* Slide caption overlay */
.flexslider .flex-caption,
.ms-caption,
.nivo-caption,
.hero-caption-overlay {
    background: linear-gradient(to right, rgba(15,29,62,0.82) 0%, rgba(15,29,62,0.45) 70%, transparent 100%) !important;
    padding: 28px 40px !important;
}

.hero-caption-overlay h2,
.flex-caption h2,
.ms-caption h2 {
    font-family: var(--font-heading) !important;
    font-size: clamp(1.4rem, 3vw, 2.2rem) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    margin-bottom: 0.4em;
}

.hero-caption-overlay p,
.flex-caption p,
.ms-caption p {
    font-family: var(--font-body) !important;
    font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important;
    color: rgba(255,255,255,0.9) !important;
    font-style: italic;
}

/* ============================================================
   TAGLINE STRIP (below hero)
   ============================================================ */
.obc-tagline-strip {
    background-color: var(--obc-navy);
    color: #ffffff;
    text-align: center;
    padding: 16px 20px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 3px solid var(--obc-gold);
}

.obc-tagline-strip span {
    color: var(--obc-gold-light);
}

/* ============================================================
   SERVICE ANNOUNCEMENT STRIP
   ============================================================ */
.obc-service-announce {
    background-color: var(--obc-cream-dark);
    border-top: 1px solid var(--obc-border);
    border-bottom: 1px solid var(--obc-border);
    padding: 22px 20px;
    text-align: center;
}

.obc-service-announce p {
    font-size: 1.1rem;
    color: var(--obc-navy);
    margin: 0;
    font-weight: 400;
}

.obc-service-announce a {
    color: var(--obc-gold);
    font-weight: 600;
    border-bottom: 1px solid var(--obc-gold);
}

/* ============================================================
   HOMEPAGE THREE-COLUMN INFO SECTION
   ============================================================ */
.obc-info-columns {
    background-color: var(--obc-cream);
    padding: var(--section-pad);
}

.obc-info-columns .obc-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

@media (max-width: 860px) {
    .obc-info-columns .obc-container {
        grid-template-columns: 1fr;
    }
}

.obc-info-card {
    background: #ffffff;
    border: 1px solid var(--obc-border);
    border-top: 4px solid var(--obc-navy);
    border-radius: 4px;
    padding: 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.obc-info-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.obc-info-card h3 {
    font-size: 1.2rem;
    color: var(--obc-navy);
    border-bottom: 2px solid var(--obc-gold);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

.obc-info-card p {
    font-size: 0.97rem;
    color: var(--obc-text-muted);
    margin-bottom: 0.7em;
}

.obc-info-card address {
    font-style: normal;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--obc-text);
}

/* Service times list */
.obc-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.obc-service-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--obc-border);
    font-size: 0.97rem;
    gap: 10px;
}

.obc-service-list li:last-child {
    border-bottom: none;
}

.obc-service-list .service-name {
    font-weight: 600;
    color: var(--obc-navy);
    flex-shrink: 0;
}

.obc-service-list .service-time {
    color: var(--obc-text-muted);
    text-align: right;
}

/* ============================================================
   BUTTONS / CTAs
   ============================================================ */
.obc-btn,
.wp-block-button .wp-block-button__link,
.button,
input[type="submit"],
button[type="submit"] {
    display: inline-block;
    background-color: var(--obc-navy) !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 12px 28px !important;
    border-radius: 3px !important;
    border: 2px solid var(--obc-navy) !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer;
}

.obc-btn:hover,
.wp-block-button .wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
    background-color: var(--obc-gold) !important;
    border-color: var(--obc-gold) !important;
    color: #ffffff !important;
}

/* Gold variant */
.obc-btn-gold {
    background-color: var(--obc-gold) !important;
    border-color: var(--obc-gold) !important;
}

.obc-btn-gold:hover {
    background-color: var(--obc-navy) !important;
    border-color: var(--obc-navy) !important;
}

/* ============================================================
   CONTENT PAGES — POST / PAGE BODY
   ============================================================ */
.entry-content,
.page-content {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--obc-text);
}

.entry-title,
.page-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--obc-navy);
    border-bottom: 3px solid var(--obc-gold);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

/* Page header area (Astra) */
.ast-archive-description .ast-archive-title,
.ast-page-title-wrap .page-title {
    color: #ffffff !important;
}

/* ============================================================
   SERMONS PAGE
   ============================================================ */
.wpfc-sermon,
.sermon,
.ast-col-md-4.sermon-archive {
    background: #ffffff;
    border: 1px solid var(--obc-border);
    border-top: 4px solid var(--obc-navy);
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.widget {
    background: #ffffff;
    border: 1px solid var(--obc-border);
    border-top: 3px solid var(--obc-navy);
    padding: 22px 20px;
    margin-bottom: 28px;
    border-radius: 4px;
}

.widget-title,
.widgettitle {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--obc-navy);
    border-bottom: 2px solid var(--obc-gold);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
#colophon,
.footer-widget-area,
.ast-footer-copyright {
    background-color: var(--obc-navy-dark) !important;
    color: #b0b8cc !important;
}

.footer-widget-area {
    padding: 48px 0 36px !important;
    border-top: 3px solid var(--obc-gold) !important;
}

.footer-widget-area .widget-title,
.footer-widget-area .widgettitle {
    color: #ffffff !important;
    border-bottom-color: var(--obc-gold) !important;
    font-size: 1rem !important;
}

.footer-widget-area a,
.footer-widget-area p {
    color: #b0b8cc !important;
    font-size: 0.9rem;
}

.footer-widget-area a:hover {
    color: var(--obc-gold-light) !important;
}

/* Copyright bar */
.ast-footer-copyright,
.ast-footer-copyright .ast-copyright-text {
    background-color: var(--obc-navy-dark) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding: 14px 20px !important;
    text-align: center;
    font-size: 0.83rem !important;
    color: #7a85a0 !important;
}

.ast-footer-copyright a {
    color: #7a85a0 !important;
}

.ast-footer-copyright a:hover {
    color: var(--obc-gold-light) !important;
}

/* ============================================================
   PAGE HEADER / BANNER (Astra page header)
   ============================================================ */
.ast-banner-title-bar,
.ast-page-title-wrap {
    background-color: var(--obc-navy) !important;
    padding: 36px 0 !important;
}

.ast-page-title-wrap .page-title,
.ast-banner-title-bar .title {
    color: #ffffff !important;
    font-size: clamp(1.4rem, 3vw, 2rem) !important;
}

/* Breadcrumb */
.astra-breadcrumbs,
.rank-math-breadcrumb {
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.83rem !important;
}

.astra-breadcrumbs a,
.rank-math-breadcrumb a {
    color: var(--obc-gold-light) !important;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
input[type="text"],
input[type="email"],
textarea {
    border: 1px solid var(--obc-border) !important;
    border-radius: 3px !important;
    padding: 10px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 0.97rem !important;
    background-color: #ffffff !important;
    color: var(--obc-text) !important;
    transition: border-color 0.2s ease !important;
    width: 100%;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--obc-navy) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(27,45,91,0.12) !important;
}

/* ============================================================
   GOOGLE MAPS EMBED
   ============================================================ */
.obc-map-wrap iframe,
.obc-info-card iframe {
    width: 100%;
    height: 220px;
    border: 0;
    border-radius: 3px;
    margin-top: 12px;
    display: block;
}

/* ============================================================
   UTILITY / HELPER CLASSES
   ============================================================ */
.obc-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.obc-section {
    padding: var(--section-pad);
}

.obc-section-navy {
    background-color: var(--obc-navy);
    color: #ffffff;
}

.obc-section-navy h2,
.obc-section-navy h3 {
    color: #ffffff;
}

.obc-section-cream {
    background-color: var(--obc-cream-dark);
}

.obc-divider {
    border: none;
    border-top: 2px solid var(--obc-border);
    margin: 3rem 0;
}

.obc-gold-line {
    border-top-color: var(--obc-gold);
}

.text-center { text-align: center; }

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .site-title,
    .ast-header-site-title a {
        font-size: 1.25rem !important;
    }

    .obc-info-columns .obc-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-widget-area {
        padding: 32px 0 24px !important;
    }
}

@media (max-width: 480px) {
    .obc-section {
        padding: 2.5rem 0;
    }
}

/* ============================================================
   BLOCK EDITOR (Gutenberg) STYLES
   ============================================================ */
.wp-block-quote {
    border-left: 4px solid var(--obc-gold) !important;
    background-color: var(--obc-cream-dark);
    padding: 18px 24px !important;
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--obc-navy);
    margin: 2em 0;
}

.wp-block-quote cite,
.wp-block-quote footer {
    font-family: var(--font-body);
    font-style: normal;
    font-size: 0.88rem;
    color: var(--obc-text-muted);
    margin-top: 8px;
    display: block;
}

.wp-block-separator {
    border-top: 2px solid var(--obc-gold) !important;
    max-width: 80px !important;
    margin: 2em auto !important;
}

/* Highlight block */
.wp-block-cover,
.wp-block-cover-image {
    min-height: 400px;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .site-header,
    .main-header-bar,
    .site-footer,
    .ast-footer-copyright {
        display: none;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}