/* Victory Charismatic Baptist Church - Design System */
:root{--color-primary:#4A7C59;--color-primary-dark:#3D6B4A;--color-primary-light:#6B9B7A;--color-secondary:#D4A574;--color-secondary-dark:#C49464;--color-accent:#8B4513;--color-text:#2D2D2D;--color-text-light:#5A5A5A;--color-text-muted:#7A7A7A;--color-background:#FAFAFA;--color-surface:#FFFFFF;--color-border:#E5E5E5;--color-border-light:#F0F0F0;--color-focus:#4A7C59;--color-error:#C53030;--color-success:#2F855A;--font-primary:'Segoe UI',system-ui,sans-serif;--font-heading:Georgia,serif;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--space-xs:0.25rem;--space-sm:0.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--space-4xl:6rem;--max-width:1200px;--max-width-narrow:800px;--header-height:70px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 6px rgba(0,0,0,0.07);--shadow-lg:0 10px 15px rgba(0,0,0,0.1);--shadow-xl:0 20px 25px rgba(0,0,0,0.1);--transition-fast:150ms ease;--transition-base:250ms ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-primary);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text);background-color:var(--color-background)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600;line-height:1.3;color:var(--color-text)}
h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}
p{margin-bottom:var(--space-md)}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--color-primary-dark);text-decoration:underline}
a:focus{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-sm)}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:var(--space-xl)}
li{margin-bottom:var(--space-sm)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-size:var(--font-size-base);font-weight:500;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-decoration:none}
.btn:focus{outline:2px solid var(--color-focus);outline-offset:2px}
.btn-primary{background-color:var(--color-primary);color:white}
.btn-primary:hover{background-color:var(--color-primary-dark);color:white;text-decoration:none}
.btn-secondary{background-color:var(--color-secondary);color:var(--color-text)}
.btn-secondary:hover{background-color:var(--color-secondary-dark);color:var(--color-text);text-decoration:none}
.btn-outline{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background-color:var(--color-primary);color:white;text-decoration:none}
.btn-small{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm)}
.btn-large{padding:var(--space-lg) var(--space-2xl);font-size:var(--font-size-lg)}
.form-group{margin-bottom:var(--space-lg)}
.form-label{display:block;margin-bottom:var(--space-sm);font-weight:500;color:var(--color-text)}
.form-label.required::after{content:" *";color:var(--color-error)}
.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-md);font-size:var(--font-size-base);line-height:1.5;color:var(--color-text);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px rgba(74,124,89,0.15)}
.form-error{display:block;margin-top:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-error)}
.form-hint{display:block;margin-top:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-muted)}
.form-checkbox{display:flex;align-items:flex-start;gap:var(--space-sm)}
.form-checkbox input{margin-top:0.25rem;width:1.125rem;height:1.125rem}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}
.container-narrow{max-width:var(--max-width-narrow)}
.header{position:sticky;top:0;z-index:100;background-color:var(--color-surface);border-bottom:1px solid var(--color-border-light);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}
.logo{display:flex;align-items:center;gap:var(--space-md);font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:600;color:var(--color-text);text-decoration:none}
.logo:hover{text-decoration:none;color:var(--color-primary)}
.logo span{color:var(--color-primary)}
.logo svg{display:inline-block;vertical-align:middle;margin-right:var(--space-sm)}
.logo-text{display:block;line-height:1.1}
.logo-primary{display:block;font-size:var(--font-size-lg);font-weight:600;white-space:nowrap}
.logo-secondary{display:block;font-size:0.65rem;font-weight:400;letter-spacing:0.15em;text-transform:uppercase;margin-top:2px}
.nav-toggle{display:none;padding:var(--space-sm);background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background-color:var(--color-text);margin:5px 0;transition:transform var(--transition-base)}
.nav{display:flex;align-items:center;gap:var(--space-xs)}
.nav-link{padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.nav-link:hover{background-color:var(--color-border-light);color:var(--color-primary);text-decoration:none}
.nav-link.active{background-color:var(--color-primary);color:white}
.hero{position:relative;min-height:70vh;display:flex;align-items:center;background-color:var(--color-text);background-image:linear-gradient(rgba(45,45,45,0.7),rgba(45,45,45,0.7)),url('https://images.pexels.com/photos/1666816/pexels-photo-1666816.jpeg?auto=compress&cs=tinysrgb&w=1920');background-size:cover;background-position:center;color:white}
.hero-content{padding:var(--space-4xl) var(--space-lg);max-width:var(--max-width);margin:0 auto;width:100%}
.hero h1{color:white;margin-bottom:var(--space-lg);max-width:800px}
.hero-strapline{font-size:var(--font-size-xl);margin-bottom:var(--space-2xl);opacity:0.9}
.hero-buttons{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.section{padding:var(--space-4xl) 0}
.section-header{text-align:center;margin-bottom:var(--space-3xl)}
.section-header h2{margin-bottom:var(--space-md)}
.section-header p{max-width:var(--max-width-narrow);margin:0 auto;color:var(--color-text-light)}
.section-alt{background-color:var(--color-surface)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-xl)}
.card{background-color:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-base),box-shadow var(--transition-base)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-image{width:100%;height:200px;object-fit:cover}
.card-content{padding:var(--space-xl)}
.card-content h3{margin-bottom:var(--space-sm)}
.card-content p{color:var(--color-text-light);margin-bottom:var(--space-lg)}
.event-card{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-md);border-left:4px solid var(--color-primary)}
.event-card[data-category="prayer"]{border-left-color:var(--color-secondary)}
.event-card[data-category="teaching"]{border-left-color:var(--color-accent)}
.event-card[data-category="outreach"]{border-left-color:var(--color-primary-light)}
.event-date{display:inline-block;padding:var(--space-xs) var(--space-sm);background-color:var(--color-border-light);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-light);margin-bottom:var(--space-md)}
.event-title{font-size:var(--font-size-xl);margin-bottom:var(--space-sm)}
.event-meta{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-muted)}
.event-actions{display:flex;gap:var(--space-md);margin-top:var(--space-lg)}
.sermon-card{background-color:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.sermon-thumbnail{position:relative;aspect-ratio:16/9;background-color:var(--color-border)}
.sermon-thumbnail img{width:100%;height:100%;object-fit:cover}
.sermon-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background-color:rgba(0,0,0,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:var(--font-size-xl);transition:background-color var(--transition-base)}
.sermon-play:hover{background-color:var(--color-primary)}
.sermon-content{padding:var(--space-lg)}
.sermon-title{font-size:var(--font-size-lg);margin-bottom:var(--space-sm)}
.sermon-meta{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-md)}
.sermon-summary{font-size:var(--font-size-sm);color:var(--color-text-light)}
.filters{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-xl)}
.filter-btn{padding:var(--space-sm) var(--space-lg);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}
.filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.filter-btn.active{background-color:var(--color-primary);border-color:var(--color-primary);color:white}
.search-box{position:relative;max-width:400px;margin-bottom:var(--space-xl)}
.search-input{width:100%;padding:var(--space-md) var(--space-md) var(--space-md) var(--space-3xl);font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.search-icon{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted)}
.footer{background-color:var(--color-text);color:white;padding:var(--space-3xl) 0 var(--space-xl)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-2xl);margin-bottom:var(--space-2xl)}
.footer h3{color:white;font-size:var(--font-size-lg);margin-bottom:var(--space-lg)}
.footer p{color:rgba(255,255,255,0.7);font-size:var(--font-size-sm)}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:var(--space-sm)}
.footer-links a{color:rgba(255,255,255,0.7);font-size:var(--font-size-sm)}
.footer-links a:hover{color:white}
.footer-bottom{padding-top:var(--space-xl);border-top:1px solid rgba(255,255,255,0.1);text-align:center}
.footer-bottom p{color:rgba(255,255,255,0.5);font-size:var(--font-size-sm)}
.alert{padding:var(--space-lg);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}
.alert-warning{background-color:#FFF3CD;border:1px solid #FFC107;color:#856404}
.alert-danger{background-color:#F8D7DA;border:1px solid #F5C6CB;color:#721C24}
.alert-success{background-color:#D4EDDA;border:1px solid #C3E6CB;color:#155724}
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background-color:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-xl);box-shadow:0 -4px 10px rgba(0,0,0,0.1);z-index:1000}
.cookie-banner-inner{max-width:var(--max-width);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.cookie-banner p{margin:0;flex:1;min-width:250px}
.cookie-banner .btn{white-space:nowrap}
@media(max-width:768px){.nav-toggle{display:block}.nav{display:none;position:absolute;top:var(--header-height);left:0;right:0;background-color:var(--color-surface);flex-direction:column;padding:var(--space-md);border-bottom:1px solid var(--color-border)}.nav.open{display:flex}.nav-link{width:100%;text-align:center}.hero{min-height:60vh}.hero h1{font-size:var(--font-size-3xl)}.hero-strapline{font-size:var(--font-size-lg)}.hero-buttons{flex-direction:column}.hero-buttons .btn{width:100%}.section{padding:var(--space-3xl) 0}.cards-grid{grid-template-columns:1fr}.event-actions{flex-direction:column}.footer-grid{grid-template-columns:1fr;text-align:center}}