html{font-size:16px;}
body{font-family:system-ui;background:#f7f7f7;color:#111;margin:0}
.btn{padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;display:inline-block}
.primary{background:#b91c1c;color:#fff}
.secondary{background:#fff;color:#000}
.container{max-width:1100px;margin:auto;padding:16px}
.toggle{position:fixed;top:10px;right:10px;display:flex;gap:6px}
.card{background:#111;border:1px solid #222;border-radius:14px;padding:14px}
.grid{display:grid;gap:12px}
@media(min-width:900px){ .cols2{grid-template-columns:1fr 1fr} }
small{opacity:.75}
input,textarea,select{width:100%;padding:10px;border-radius:12px;border:1px solid #333;background:#0a0a0a;color:#fff}
button{cursor:pointer}
/* Theme: default is dark; set for light */
html[data-theme="light"] body{background:#f7f7f7;color:#111}
html[data-theme="light"] .card{background:#fff;border-color:#e5e5e5}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{background:#fff;color:#111;border-color:#d4d4d4}
html[data-theme="light"] .secondary{background:#111;color:#fff}
html[data-theme="light"] .primary{background:#b91c1c;color:#fff}
/* Theme via body class */
body.light{background:#f7f7f7;color:#111}
body.light .card{background:#fff;border-color:#e5e5e5}
body.light input, body.light textarea, body.light select{background:#fff;color:#111;border-color:#d4d4d4}
body.light .secondary{background:#111;color:#fff}
body.light .primary{background:#b91c1c;color:#fff}
/* Keep dark explicit too */
body.dark{background:#000;color:#fff}
body.dark .card{background:#111;border-color:#222}
body.dark input, body.dark textarea, body.dark select{background:#0a0a0a;color:#fff;border-color:#333}
/* Center hero logo */
.hero-logo{
display:flex;
justify-content:center;
margin:20px 0 10px 0;
}
.logo-center{
height:140px;
width:auto;
}
@media (max-width:600px){
.logo-center{
height:110px;
}
}
/* Make logo readable in dark mode */
.logo-wrap{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:22px;
padding:10px 14px;
}
body.dark .logo-wrap{
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.10);
}
body.dark .logo-center{
filter: brightness(1.45) contrast(1.15) drop-shadow(0 2px 10px rgba(255,255,255,0.22));
}
/* =========================
Readability + Mobile Button Fixes
========================= */
/* Ensure LIGHT mode is truly light */
body.light{
background:#ffffff;
color:#111111;
}
body.light .card{
background:#ffffff;
border-color: rgba(0,0,0,0.12);
color:#111111;
}
/* Ensure DARK mode is truly dark */
body.dark{
background:#0b0b0b;
color:#f3f3f3;
}
body.dark .card{
background:#111111;
border-color: rgba(255,255,255,0.12);
color:#f3f3f3;
}
/* Buttons: consistent contrast */
.btn{
font-weight:700;
letter-spacing:0.2px;
}
.btn.primary{
background:#b91c1c;
color:#ffffff !important;
}
.btn.secondary{
background:#ffffff;
color:#111111 !important;
border:1px solid rgba(0,0,0,0.18);
}
body.dark .btn.secondary{
background:#151515;
color:#ffffff !important;
border:1px solid rgba(255,255,255,0.18);
}
/* Donate page buttons/text (Donar menu) */
body.light .donate-wrap, body.light .donate-wrap *{
color:#111111;
}
body.dark .donate-wrap, body.dark .donate-wrap *{
color:#f3f3f3;
}
/* Mobile: make Eventos/Oración/Donar buttons larger and readable */
@media (max-width: 600px){
.btn{
font-size:16px !important;
padding:14px 16px !important;
border-radius:14px !important;
}
.btn svg, .btn .icon{
width:18px !important;
height:18px !important;
}
.hero-actions, .nav-right, .toggle{
gap:10px !important;
}
}
/* =========================
FORCE Nav/Menu Button Readability (Overrides)
========================= */
/* Make sure links don't turn dark/purple when visited */
a, a:visited{ color: inherit; }
/* Force nav/menu buttons to always have readable text */
.nav a.btn, .nav-right a.btn, .hero-actions a.btn, a.btn{
font-size: 18px !important;
line-height: 1 !important;
}
/* Day mode button colors */
body.light a.btn.secondary,
body.light .nav a.btn.secondary,
body.light .nav-right a.btn.secondary,
body.light .hero-actions a.btn.secondary{
background:#ffffff !important;
color:#111111 !important;
border:1px solid rgba(0,0,0,0.25) !important;
}
/* Dark mode button colors */
body.dark a.btn.secondary,
body.dark .nav a.btn.secondary,
body.dark .nav-right a.btn.secondary,
body.dark .hero-actions a.btn.secondary{
background:#1a1a1a !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,0.25) !important;
}
/* Active/pressed state - keep contrast */
body.light a.btn.secondary:active,
body.light a.btn.secondary:focus,
body.light a.btn.secondary:hover{
background:#f2f2f2 !important;
color:#111111 !important;
}
body.dark a.btn.secondary:active,
body.dark a.btn.secondary:focus,
body.dark a.btn.secondary:hover{
background:#2a2a2a !important;
color:#ffffff !important;
}
/* Primary button stays readable */
a.btn.primary,
a.btn.primary:visited,
a.btn.primary:hover,
a.btn.primary:active,
a.btn.primary:focus{
color:#ffffff !important;
}
/* Mobile: bigger tap targets and font */
@media (max-width: 600px){
.nav-right, .hero-actions{
flex-wrap: wrap !important;
justify-content:center !important;
}
.nav a.btn, .nav-right a.btn, .hero-actions a.btn, a.btn{
font-size: 18px !important;
padding: 16px 18px !important;
border-radius: 16px !important;
min-height: 48px !important;
}
}
/* =========================
Page content readability (Donate / Events) + Language Toggle
========================= */
/* General text in containers should follow theme colors */
body.light .container, body.light .container *{
color:#111111;
}
body.dark .container, body.dark .container *{
color:#f3f3f3;
}
/* Ensure paragraphs/list items readable inside cards */
body.light .card, body.light .card *{ color:#111111; }
body.dark .card, body.dark .card *{ color:#f3f3f3; }
/* Links inside content (avoid dark visited links) */
body.light .container a, body.light .container a:visited{
color:#111111;
}
body.dark .container a, body.dark .container a:visited{
color:#f3f3f3;
}
body.light .container a:hover{ color:#111111; opacity:0.85; }
body.dark .container a:hover{ color:#f3f3f3; opacity:0.85; }
/* Donate + Events main info blocks (in case they aren't using .card) */
.donate-wrap, .events-wrap{
color: inherit;
}
body.light .donate-wrap, body.light .events-wrap{
background: transparent;
}
body.dark .donate-wrap, body.dark .events-wrap{
background: transparent;
}
/* Language toggle buttons (ES / EN) */
.lang-toggle .btn,
.lang-toggle a.btn,
a.lang-btn{
font-weight:800;
}
body.light .lang-toggle .btn,
body.light .lang-toggle a.btn,
body.light a.lang-btn{
background:#ffffff !important;
color:#111111 !important;
border:1px solid rgba(0,0,0,0.25) !important;
}
body.dark .lang-toggle .btn,
body.dark .lang-toggle a.btn,
body.dark a.lang-btn{
background:#1a1a1a !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,0.25) !important;
}
/* If language toggle lives in .toggle area */
.toggle .btn, .toggle a.btn{
background: transparent;
}
body.light .toggle .btn, body.light .toggle a.btn{
background:#ffffff !important;
color:#111111 !important;
border:1px solid rgba(0,0,0,0.25) !important;
}
body.dark .toggle .btn, body.dark .toggle a.btn{
background:#1a1a1a !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,0.25) !important;
}
/* Mobile: make language toggle readable & bigger */
@media (max-width: 600px){
.lang-toggle .btn, .lang-toggle a.btn, .toggle .btn, .toggle a.btn{
font-size:16px !important;
padding:12px 14px !important;
border-radius:14px !important;
}
}
/* Donate cards: readable in both themes */
.donate-card{
background:#ffffff;
color:#111111;
border:1px solid rgba(0,0,0,0.12);
}
body.dark .donate-card{
background:#121212;
color:#f3f3f3;
border:1px solid rgba(255,255,255,0.14);
}
body.dark .donate-card h3,
body.dark .donate-card p,
body.dark .donate-card small{
color:#f3f3f3;
}
/* Ads cards: readable in both themes */
.ads-card{
background:#ffffff;
color:#111111;
border:1px solid rgba(0,0,0,0.12);
}
body.dark .ads-card{
background:#121212;
color:#f3f3f3;
border:1px solid rgba(255,255,255,0.14);
}
body.dark .ads-card p,
body.dark .ads-card strong,
body.dark .ads-card small{
color:#f3f3f3;
}
/* Events cards: readable in both themes */
.events-card{
background:#ffffff;
color:#111111;
border:1px solid rgba(0,0,0,0.12);
}
body.dark .events-card{
background:#121212;
color:#f3f3f3;
border:1px solid rgba(255,255,255,0.14);
}
body.dark .events-card p,
body.dark .events-card strong,
body.dark .events-card small{
color:#f3f3f3;
}
/* Default card safety (if body class missing) */
.card{background:#ffffff;color:#111111;}
/* =========================
Prayer page readability + mobile sizing
========================= */
body.light{
background:#ffffff !important;
color:#111111 !important;
}
body.light .container, body.light .container *{ color:#111111 !important; }
/* Increase base font on mobile */
@media (max-width: 600px){
body{
font-size: 17px !important;
}
input, textarea, button{
font-size: 17px !important;
}
textarea{
min-height: 140px;
}
.card{
padding: 18px !important;
}
h1, h2{
font-size: 24px !important;
}
}
/* Toggle safe placement (avoid blocking menu taps) */
.toggle{
z-index: 20;
background: rgba(255,255,255,0.92);
padding:6px;
border-radius:14px;
border:1px solid rgba(0,0,0,0.12);
}
body.dark .toggle{
background: rgba(18,18,18,0.92);
border:1px solid rgba(255,255,255,0.14);
}
@media (max-width: 600px){
.toggle{
position: static !important;
margin: 10px auto 0 auto;
width: fit-content;
}
header.container{ padding-top: 14px !important; }
}
/* Responsive video embed */
.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;background:rgba(15,23,42,.04)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Fullscreen helper button (mobile) */
.fs-row{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
margin-top:12px;
flex-wrap:wrap;
}
.fs-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:12px 18px;
border-radius:999px;
border:1px solid rgba(15,23,42,.14);
background:linear-gradient(180deg,#ffffff,#f8fafc);
color:#0f172a;
font-weight:800;
font-size:16px;
box-shadow:0 6px 18px rgba(2,6,23,.10);
text-decoration:none;
}
.fs-btn:active{
transform:translateY(1px);
box-shadow:0 3px 10px rgba(2,6,23,.12);
}
body.dark .fs-btn{
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));
color:#fff;
border-color:rgba(255,255,255,.18);
box-shadow:0 10px 22px rgba(0,0,0,.35);
}