/*
Theme Name: True Hope Command Center
Theme URI: https://www.savemuskegon.org
Author: True Hope Church
Description: Custom, high-performance digital command center for True Hope Church in Muskegon, MI.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: truehope
*/

/* Tailwind (loaded via CDN in functions.php) handles almost all styling.
   This stylesheet only carries the design tokens and hand-built components
   that aren't expressible as Tailwind utility classes. */

:root {
    --true-red: #E53935;
    --true-navy: #1F2E6E;
    --true-gray: #9AA0A6;
    --near-black: #05070A;
    --carolina-blue: #4B9CD3;
    --silver-accent: rgba(192, 199, 209, 0.25);
}

* { -webkit-tap-highlight-color: transparent; }

html {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

body {
    background-color: var(--near-black);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.locked-gradient {
    background: linear-gradient(180deg, var(--near-black) 0%, var(--true-navy) 100%);
}
.dark-section-gradient {
    background: linear-gradient(135deg, #0B1F3B 0%, #05070A 100%);
}

.logo-container { display: flex; flex-direction: column; align-items: center; line-height: 0.85; }
.logo-main { display: flex; align-items: baseline; margin-bottom: -5px; }
.logo-t { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 800; color: var(--true-red); font-size: 2.1rem; margin-right: -1.5px; }
.logo-wordmark { font-family: 'Poppins', sans-serif; font-weight: 800; font-style: italic; font-size: 1.7rem; letter-spacing: -1.5px; color: white; text-transform: lowercase; }
.logo-sub { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.38em; color: var(--true-gray); display: flex; align-items: center; width: 100%; justify-content: center; margin-top: 1px; }

.pulse-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: 0; } }

.heartbeat-element { animation: beat 2s ease-in-out infinite; }
@keyframes beat {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

.btn-primary { background-color: var(--carolina-blue); color: var(--near-black); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary:hover { background-color: white; color: var(--near-black); box-shadow: 0 0 15px rgba(75, 156, 211, 0.4); }

.btn-secondary { background-color: transparent; border: 2px solid white; color: white; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-secondary:hover { background-color: white; color: var(--near-black); }

.btn-true-red { background-color: var(--true-red); color: white; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s ease; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-true-red:hover { box-shadow: 0 0 15px rgba(229, 57, 53, 0.5); transform: scale(1.02); }

.glass-panel { background: rgba(31, 46, 110, 0.15); backdrop-filter: blur(12px); border: 1px solid var(--silver-accent); border-radius: 4px; }
.bsb-border-red { border-left: 4px solid var(--true-red); }
.bsb-border-blue { border-left: 4px solid var(--carolina-blue); }

.accent-line-blue { height: 4px; width: 60px; background-color: var(--carolina-blue); margin-top: 1rem; margin-bottom: 1.5rem; }
.accent-line-red { height: 4px; width: 60px; background-color: var(--true-red); margin-top: 1rem; margin-bottom: 1.5rem; }

input, textarea, select {
    border-radius: 4px !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 16px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--true-red) !important;
    box-shadow: 0 0 10px rgba(229, 57, 53, 0.2);
    outline: none;
}

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

#mobile-menu { transition: transform 0.3s ease-in-out; }
.menu-open { transform: translateX(0%); }
.menu-closed { transform: translateX(100%); }

.hero-full { min-height: 100svh; }

:target { scroll-margin-top: 80px; }

/* Written blog content (raw editor HTML) */
.prose-truehope h1, .prose-truehope h2, .prose-truehope h3, .prose-truehope h4 { color: #fff; margin-top: 1.75em; margin-bottom: 0.5em; }
.prose-truehope h2 { font-size: 1.5rem; }
.prose-truehope h3 { font-size: 1.25rem; }
.prose-truehope p { margin-bottom: 1.25em; }
.prose-truehope a { color: var(--carolina-blue); text-decoration: underline; }
.prose-truehope ul, .prose-truehope ol { margin: 1em 0 1.5em 1.5em; }
.prose-truehope ul { list-style: disc; }
.prose-truehope ol { list-style: decimal; }
.prose-truehope li { margin-bottom: 0.5em; }
.prose-truehope blockquote { border-left: 4px solid var(--true-red); padding-left: 1rem; font-style: italic; color: #e5e7eb; margin: 1.5em 0; }
.prose-truehope img { border-radius: 4px; margin: 1.5em 0; }

/* Mobile app-style bottom tab bar */
.mobile-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: rgba(5, 7, 10, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tab-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 4px 8px;
    color: var(--true-gray);
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 48px;
}
.mobile-tab-bar a.is-active,
.mobile-tab-bar a:active {
    color: var(--true-red);
}
.mobile-tab-bar svg { width: 22px; height: 22px; }

body.has-mobile-tab-bar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
    .mobile-tab-bar { display: none; }
    body.has-mobile-tab-bar { padding-bottom: 0; }
}