/*
Theme Name: Glory Houston
Theme URI: https://gloryhouston.org
Author: Glory Ministries Houston
Author URI: https://gloryhouston.org
Description: A premium, fully customizable church theme for Glory Ministries Houston with sermons, ministries, events, testimonials, giving and a VIP guest flow.
Version: 1.0.5
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: glory-houston
Tags: church, nonprofit, one-column, custom-logo, custom-menu, featured-images, full-width-template
*/

:root { --accent: #f59e0b; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; background: #030712; color: #f8fafc; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: Outfit, system-ui, sans-serif; line-height: 1.15; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }
.muted { color: #94a3b8; }
.hero { min-height: 78vh; display: flex; align-items: center; background: #030712 center/cover no-repeat; position: relative; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #030712, rgba(3,7,18,.65)); }
.hero-inner { position: relative; z-index: 1; padding: 96px 0; text-align: center; }
.btn { display: inline-block; background: #f59e0b; color: #111827; font-weight: 800; padding: 14px 22px; border-radius: 14px; text-decoration: none; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; margin-left: 10px; }
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: rgba(15,23,42,.8); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 24px; }
.card img { border-radius: 16px; margin-bottom: 14px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(3,7,18,.88); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; flex-wrap: wrap; }
.custom-logo-link, .site-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.custom-logo, .site-logo img { height: 54px; width: auto; }
.custom-logo { max-height: 54px; width: auto; }
.nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
.nav a { text-decoration: none; font-size: 14px; }
/* Extra links (Appearance → Menus): header extras are plain .nav links; footer extras use the same look */
/* Wider header only when extra links exist, so the menu stays on one row on desktop */
.site-header.has-extra-links .wrap { max-width: 1400px; }
.footer-nav { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-nav a { font-size: 14px; color: #cbd5e1; text-decoration: none; }
.footer-nav a:hover { color: #f59e0b; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Language toggle: small pill, active language highlighted */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.lang-toggle a { display: inline-block; margin: 0; padding: 4px 10px; font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .04em; color: #cbd5e1; text-decoration: none; }
.lang-toggle a.active { background: #f59e0b; color: #111827; }
.lang-toggle a:not(.active):hover { color: #fff; }

/* Social icons: always small, never inherit large intrinsic SVG sizes */
.social-icons { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0; padding: 0; color: inherit; text-decoration: none; transition: color .2s; }
.social-icons a:hover { color: #f59e0b; }
.social-icons svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; display: block; fill: currentColor; flex-shrink: 0; }
.site-header .social-icons a { color: #cbd5e1; }
footer .social-icons { display: flex; margin-top: 18px; }

/* Mobile: compact header, scrollable link row, nothing overflows */
@media (max-width: 760px) {
        .site-header .wrap { min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
        .custom-logo, .site-logo img { height: 42px !important; max-height: 42px; }
        .site-header .nav { width: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; gap: 14px; }
        .site-header .nav > a { white-space: nowrap; font-size: 13px; flex-shrink: 0; }
}
.video-thumb { position: relative; display: block; border-radius: 16px; overflow: hidden; }
.video-thumb img { margin-bottom: 0; }
.video-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.25); transition: background .2s; }
.video-thumb:hover::after { background: rgba(0,0,0,.45); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; border-radius: 50%; background: #ff0000; color: #fff; display: grid; place-items: center; font-size: 20px; z-index: 1; padding-left: 4px; }
.card .video-thumb { margin-bottom: 14px; }
.btn-video { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #fff; }
.btn-video:hover { background: #ff0000; border-color: #ff0000; }