/* ============================================
   Kadence Child Theme — Custom CSS
   Prof Chris L. de Wet
   Classical texture, newsletter, multimedia grid
   ============================================ */

/* ============================================
   CSS Custom Properties — Refined Classical Palette
   ============================================ */
:root {
    --parchment: #f4f1ea;
    --parchment-dark: #e8e1d4;
    --terracotta: #8B4513;
    --terracotta-light: #A0522D;
    --gold: #B8860B;
    --gold-light: #D4A843;
    --ink-dark: #2C1810;
    --ink-body: #3A2A1E;
    --cream: #FFF8F0;
    --warm-gray: #D4C9BC;
    --stone: #5C4033;
}

/* ============================================
   Parchment Background Class
   ============================================ */
.bg-parchment {
    background-color: var(--parchment) !important;
}

/* ============================================
   Watermark Class — for rows / sections
   Usage: add class "has-watermark" to any group/row
   ============================================ */
.has-watermark {
    position: relative;
    overflow: hidden;
}
.has-watermark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}
.has-watermark > * {
    position: relative;
    z-index: 1;
}

/* Christ mosaic watermark (reuse existing reference) */
.has-watermark-christ::before {
    background-image: url('/wp-content/uploads/2026/06/mosaic-christ.jpg');
    opacity: 0.04;
}

/* Parchment texture watermark (pure CSS) */
.has-watermark-parchment {
    background-color: var(--parchment);
    position: relative;
}
.has-watermark-parchment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(139, 69, 19, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(184, 134, 11, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.has-watermark-parchment > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   Classical Accent Elements
   ============================================ */
/* Gold top border for featured sections */
.section-classical {
    border-top: 3px solid var(--gold);
    padding-top: 2rem;
    margin-top: 2rem;
}

/* Terracotta blockquote accent */
blockquote {
    border-left: 3px solid var(--gold) !important;
    background: var(--parchment) !important;
}

/* ============================================
   NEWSLETTER FORM — Footer Signup
   ============================================ */
.newsletter-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 0.5rem 0;
}
.newsletter-form__heading {
    font-family: "Merriweather", Georgia, serif;
    font-size: 1rem;
    color: var(--ink-dark);
    margin: 0 0 0.3rem 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.newsletter-form__description {
    font-size: 0.85rem;
    color: var(--ink-body);
    margin: 0 0 0.8rem 0;
    line-height: 1.5;
    text-wrap: pretty;
}
.newsletter-form__fields {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.newsletter-form__input {
    flex: 1;
    min-width: 180px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--parchment-dark);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--ink-body);
    font-family: "Lato", sans-serif;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-form__input::placeholder {
    color: var(--warm-gray);
    opacity: 1;
}
.newsletter-form__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.15);
}
.newsletter-form__button {
    padding: 0.6rem 1.2rem;
    background: var(--gold);
    color: var(--cream);
    border: none;
    border-radius: 2px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.newsletter-form__button:hover {
    background: var(--terracotta-light);
}

/* Newsletter success message */
.newsletter-success {
    background: rgba(184, 134, 11, 0.35);
    border: 1px solid var(--gold);
    color: var(--ink-dark);
    padding: 0.8rem 1rem;
    border-radius: 2px;
    font-size: 0.9rem;
    text-align: center;
    max-width: 400px;
    margin: 0.5rem auto;
    font-weight: 600;
}

/* ============================================
   PREKE & PRAATJIES — Multimedia Grid
   ============================================ */

/* Responsive video grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.video-grid__item {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.video-grid__item:hover {
    box-shadow: 0 4px 20px rgba(44, 24, 16, 0.12);
    transform: translateY(-2px);
}

.video-grid__thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: var(--parchment-dark);
    overflow: hidden;
}
.video-grid__thumbnail iframe,
.video-grid__thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-grid__info {
    padding: 1rem 1.2rem 1.2rem;
}
.video-grid__title {
    font-family: "Merriweather", Georgia, serif;
    font-size: 1rem;
    color: var(--ink-dark);
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
}
.video-grid__date {
    font-size: 0.8rem;
    color: var(--stone);
    font-family: "Lato", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
}
.video-grid__excerpt {
    font-size: 0.9rem;
    color: var(--ink-body);
    line-height: 1.5;
    margin: 0;
}
.video-grid__play {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--terracotta);
    font-family: "Lato", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}
.video-grid__play:hover {
    color: var(--gold);
    text-decoration: underline;
}

/* ============================================
   HTML5 Audio Player Styling
   ============================================ */
.sermon-audio {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: 3px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.sermon-audio__info {
    flex: 1;
    min-width: 150px;
}
.sermon-audio__title {
    font-family: "Merriweather", Georgia, serif;
    font-size: 1rem;
    color: var(--ink-dark);
    margin: 0 0 0.2rem 0;
}
.sermon-audio__meta {
    font-size: 0.8rem;
    color: var(--stone);
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Custom audio player styling */
.sermon-audio audio {
    width: 100%;
    max-width: 400px;
    height: 40px;
    border-radius: 2px;
}

/* Audio player fallback for browsers that support it */
.sermon-audio audio::-webkit-media-controls-panel {
    background: var(--parchment);
}
.sermon-audio audio::-webkit-media-controls-play-button {
    background: var(--terracotta);
    border-radius: 50%;
}
.sermon-audio audio::-webkit-media-controls-timeline {
    color: var(--terracotta);
}
.sermon-audio audio::-webkit-media-controls-current-time-display,
.sermon-audio audio::-webkit-media-controls-time-remaining-display {
    color: var(--ink-body);
    font-family: "Lato", sans-serif;
}

/* Download link */
.sermon-audio__download {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--terracotta);
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-top: 0.3rem;
}
.sermon-audio__download:hover {
    color: var(--gold);
    text-decoration: underline;
}

/* ============================================
   Language Switcher
   ============================================ */
.lang-switcher,
.lang-switcher-header,
.lang-switcher-footer {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.lang-switcher ul,
.lang-switcher-header ul,
.lang-switcher-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.3rem;
}
.lang-switcher li,
.lang-switcher-header li,
.lang-switcher-footer li {
    margin: 0;
}
.lang-switcher a,
.lang-switcher-header a,
.lang-switcher-footer a {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dark) !important;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.2s;
}
.lang-switcher a:hover,
.lang-switcher-header a:hover,
.lang-switcher-footer a:hover {
    border-color: var(--gold);
    color: var(--gold) !important;
    background: transparent;
}
.lang-switcher .current-lang a,
.lang-switcher-header .current-lang a,
.lang-switcher-footer .current-lang a {
    border-color: var(--terracotta);
    color: var(--terracotta) !important;
    font-weight: 700 !important;
}

/* Footer language switcher */
.lang-switcher-footer {
    text-align: center;
    padding: 0.5rem 0;
}
.lang-switcher-footer ul {
    justify-content: center;
}
.lang-switcher-footer a {
    color: var(--warm-gray) !important;
}
.lang-switcher-footer a:hover {
    color: var(--gold) !important;
    border-color: var(--gold);
}
.lang-switcher-footer .current-lang a {
    color: var(--gold) !important;
    border-color: var(--gold);
}

/* ============================================
   Footer Newsletter Section
   ============================================ */
.footer-newsletter {
    padding: 2rem 0 0.5rem 0;
    border-bottom: 1px solid rgba(255, 248, 240, 0.1);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ============================================
   Kadence Footer Widget Area Overrides
   ============================================ */
.site-footer .footer-widget-area {
    background: transparent !important;
}
.site-footer .footer-widget-area .widget-title {
    color: var(--cream);
    font-family: "Merriweather", Georgia, serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ============================================
   Responsive: Audio player on mobile
   ============================================ */
@media (max-width: 600px) {
    .sermon-audio {
        flex-direction: column;
        align-items: stretch;
    }
    .sermon-audio audio {
        max-width: 100%;
    }
    .video-grid {
        grid-template-columns: 1fr;
    }
    .newsletter-form__fields {
        flex-direction: column;
    }
    .newsletter-form__input {
        min-width: auto;
    }
}

/* ============================================
   SUBMENU — Dropdown styling
   ============================================ */
.wp-block-navigation__submenu-container,
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
    background: var(--cream) !important;
    border: 1px solid var(--parchment-dark) !important;
    border-top: 2px solid var(--gold) !important;
    box-shadow: 0 4px 24px rgba(44, 24, 16, 0.10) !important;
    padding: 0.5rem 0 !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a {
    font-size: 0.85rem !important;
    color: var(--ink-body) !important;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    background: var(--parchment) !important;
    border-left-color: var(--gold);
    color: var(--ink-dark) !important;
}

/* Primary nav submenu link styling */
.header-navigation .header-menu-container ul ul li.menu-item a {
    letter-spacing: 0.02em;
    border-bottom: 1px solid transparent;
}
.header-navigation .header-menu-container ul ul li.menu-item:last-child a {
    border-bottom: none;
}

/* ============================================
   LANGUAGE SWITCHER — Nav menu style
   ============================================ */
.menu-item.lang-switcher {
    display: inline-flex !important;
    align-items: center;
    margin-left: 0.8rem !important;
    padding-left: 0.8rem !important;
    border-left: 1px solid var(--warm-gray);
    gap: 0.15rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.menu-item.lang-switcher a {
    font-weight: 400 !important;
    color: var(--stone) !important;
    padding: 0.2rem 0.1rem !important;
    font-size: 0.75rem !important;
    transition: color 0.2s;
    border: none !important;
    background: none !important;
}

.menu-item.lang-switcher a:hover,
.menu-item.lang-switcher a.lang-active {
    color: var(--terracotta) !important;
    font-weight: 700 !important;
}

.lang-sep {
    color: var(--warm-gray);
    font-size: 0.7rem;
    padding: 0 0.1rem;
    user-select: none;
}

/* On mobile, align properly */
@media (max-width: 1024px) {
    .menu-item.lang-switcher {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        padding: 0.5rem 0;
    }
}Ci8qID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09CiAgIExPR0lOIC8gUFJPRklMRSDigJQgTmF2IG1lbnUgaXRlbXMKICAgPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0gKi8KLm1lbnUtaXRlbS1sb2dpbiBhLAoubWVudS1pdGVtLXByb2ZpbGUgYSwKLm1lbnUtaXRlbS1yZWdpc3RlciBhIHsKICAgIGZvbnQtd2VpZ2h0OiA2MDAgIWltcG9ydGFudDsKfQoKLm1lbnUtaXRlbS1sb2dpbiBhIHsKICAgIGNvbG9yOiB2YXIoLS10ZXJyYWNvdHRhKSAhaW1wb3J0YW50OwogICAgcGFkZGluZzogMC40cmVtIDAuOHJlbSAhaW1wb3J0YW50OwogICAgYm9yZGVyOiAxcHggc29saWQgdmFyKC0tdGVycmFjb3R0YSkgIWltcG9ydGFudDsKICAgIGJvcmRlci1yYWRpdXM6IDJweDsKICAgIHRyYW5zaXRpb246IGFsbCAwLjJzOwp9CgoubWVudS1pdGVtLWxvZ2luIGE6aG92ZXIgewogICAgYmFja2dyb3VuZDogdmFyKC0tdGVycmFjb3R0YSkgIWltcG9ydGFudDsKICAgIGNvbG9yOiB2YXIoLS1jcmVhbSkgIWltcG9ydGFudDsKfQoKLm1lbnUtaXRlbS1sb2dvdXQgYSB7CiAgICBmb250LXNpemU6IDAuOHJlbSAhaW1wb3J0YW50OwogICAgb3BhY2l0eTogMC43Owp9Ci5tZW51LWl0ZW0tbG9nb3V0IGE6aG92ZXIgewogICAgb3BhY2l0eTogMTsKfQoKQG1lZGlhIChtYXgtd2lkdGg6IDEwMjRweCkgewogICAgLm1lbnUtaXRlbS1sb2dpbiBhIHsKICAgICAgICBib3JkZXI6IG5vbmUgIWltcG9ydGFudDsKICAgICAgICBwYWRkaW5nOiAwLjVyZW0gMCAhaW1wb3J0YW50OwogICAgfQp9