/*
Theme Name: NATA Welfare Foundation
Description: Red, black and white theme for NATA Welfare Foundation (NWF). Same design as the Laravel site.
Version: 1.0
Author: NWF
*/
/* Theme: the three NWF logo colors: BLACK ring, RED circle, WHITE heart. Change colors here only. */
:root { --black:#111111; --red:#d2111f; --dark-red:#a50d18; --white:#ffffff; --soft:#f6f6f6; --text:#1c1c1c; }
* { box-sizing:border-box; }
body { margin:0; font-family:Georgia,'Times New Roman',serif; color:var(--text); background:var(--white); line-height:1.6; }
a { color:var(--red); }
h1,h2,h3,.nav,.btn { font-family:'Trebuchet MS',Arial,sans-serif; }
h1 { color:var(--black); } h2 { color:var(--black); }

/* Logo sizes (one component: x-logo) */
.logo { border-radius:50%; display:block; object-fit:cover; aspect-ratio:1/1; }
.logo-sm { width:54px; height:54px; } .logo-md { width:96px; height:96px; }

/* Header and footer: black with a red line, identical on every page */
.site-header, .site-footer { background:var(--black); color:var(--white); }
.site-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:10px 24px; border-bottom:5px solid var(--red); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--white); font-weight:bold; font-size:1.15rem; }
.nav { display:flex; flex-wrap:wrap; gap:6px; }
.nav a { color:var(--white); text-decoration:none; padding:6px 12px; border-radius:4px; border:2px solid transparent; }
.nav a:hover { border-color:var(--red); }
.nav a.active { background:var(--red); color:var(--white); }
.site-footer { text-align:center; padding:24px; display:grid; justify-items:center; gap:8px; border-top:5px solid var(--red); }
.site-footer a { color:var(--white); }
.site-footer .nav { justify-content:center; }

/* Layout */
.wrap { max-width:1000px; margin:0 auto; padding:24px; }
.wrap h2 { border-left:6px solid var(--red); padding-left:12px; }
.intro { text-align:center; } .intro h1 { font-size:2.4rem; margin-bottom:8px; }
.intro h1::after { content:""; display:block; width:90px; height:5px; background:var(--red); margin:10px auto 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.card { border:2px solid var(--black); border-radius:8px; padding:16px; background:var(--white); position:relative; }
.card h3 { margin:0 0 6px; color:var(--black); } .card p { margin:0; }
.card.problem { border-color:var(--red); border-top-width:6px; background:var(--white); }
.card.problem h3 { color:var(--red); }
.card.step { padding-top:34px; }
.card.win { background:var(--soft); border-left:6px solid var(--red); } .card.win h3 { color:var(--red); }
.num { position:absolute; top:-14px; left:14px; background:var(--red); color:var(--white); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:Arial,sans-serif; font-weight:bold; border:2px solid var(--black); }

/* Home slider */
.slider { position:relative; height:360px; border:4px solid var(--black); border-radius:10px; overflow:hidden; background:var(--soft); box-shadow:0 6px 0 var(--red); }
.slide { position:absolute; inset:0; opacity:0; transition:opacity .8s; display:grid; place-items:center; }
.slide.active { opacity:1; z-index:1; }
.slide img { width:100%; height:100%; object-fit:contain; background:var(--black); }  /* whole picture, never cropped */
.slide-empty { display:grid; place-items:center; }
.slide-name { position:absolute; left:0; right:0; bottom:0; padding:14px; background:rgba(17,17,17,.88); color:var(--white); text-align:center; border-top:4px solid var(--red); font:bold 1.2rem 'Trebuchet MS',Arial,sans-serif; }
.dots { position:absolute; top:10px; right:10px; z-index:2; display:flex; gap:6px; }
.dots button { width:12px; height:12px; border-radius:50%; border:2px solid var(--white); background:var(--black); cursor:pointer; padding:0; }
.dots button.on { background:var(--red); }

/* Program top and photos */
.program-top { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; align-items:center; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.photo { margin:0; border:2px solid var(--black); border-bottom:5px solid var(--red); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; gap:8px; padding-bottom:10px; background:var(--white); }
.photo img { width:100%; height:240px; object-fit:contain; background:var(--black); display:block; }  /* same frame size for every photo, whole picture shown */
.photo figcaption { padding:0 12px; font-size:.95rem; } .photo > details, .photo > form { padding:0 12px; }
.empty { background:var(--soft); border:2px dashed var(--red); padding:20px; text-align:center; }

/* Buttons, forms, messages */
.btn { background:var(--white); color:var(--black); border:2px solid var(--black); padding:9px 16px; border-radius:4px; text-decoration:none; cursor:pointer; font-size:1rem; display:inline-block; }
.btn:hover { background:var(--black); color:var(--white); }
.btn-solid { background:var(--red); color:var(--white); border-color:var(--red); } .btn-solid:hover { background:var(--dark-red); border-color:var(--dark-red); }
.btn-light { background:transparent; color:var(--white); border-color:var(--white); } .btn-light:hover { background:var(--red); border-color:var(--red); }
.pager { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; max-width:1000px; margin:0 auto; padding:16px 24px 32px; }
.photo-form { display:grid; gap:10px; max-width:520px; margin:10px 0; }
.photo-form label { display:grid; gap:4px; font:.9rem 'Trebuchet MS',Arial,sans-serif; }
.photo-form input, .photo-form textarea, .photo-form select { padding:8px; border:2px solid var(--black); border-radius:4px; font:inherit; }
.flash { background:var(--red); color:var(--white); padding:10px 24px; text-align:center; }
a:focus-visible, button:focus-visible { outline:3px solid var(--red); outline-offset:2px; }

/* Smaller Previous / Home / Next buttons */
.pager .btn { padding:4px 10px; font-size:.8rem; border-width:1px; }

/* Footer program links */
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:.9rem; }
.footer-links strong { width:100%; color:var(--red); font-family:'Trebuchet MS',Arial,sans-serif; }
.admin-link { text-align:center; padding-top:0; }

/* Language picker (Google Translate) */
.lang { font-size:.85rem; min-height:28px; }
.lang select { padding:4px; border-radius:4px; border:2px solid var(--red); background:var(--white); color:var(--black); }
.lang .goog-te-gadget { color:var(--white); font-size:0; } .lang .goog-te-gadget a { display:none; }
.goog-te-banner-frame { display:none !important; } body { top:0 !important; }

/* All buttons are round (pill shape) */
.btn, .nav a, .btn-light { border-radius:999px; }
.lang select { border-radius:999px; }

/* Round social buttons in the footer */
.social { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:6px 0; }
.social-btn { width:42px; height:42px; border-radius:50%; background:var(--white); color:var(--black) !important; display:grid; place-items:center; text-decoration:none; font-size:1.1rem; font-weight:bold; border:2px solid var(--red); }
.social-btn:hover { background:var(--red); color:var(--white) !important; }
.social-btn span { font:bold .8rem 'Trebuchet MS',Arial,sans-serif; }

/* Donate page, program help box */
.donate-card .value { font-size:1.1rem; font-weight:bold; color:var(--red); word-break:break-all; }
.help { text-align:center; }
.help .mail-text { font-size:.9rem; margin-top:8px; }

/* Program content text, source line, empty photo frame */
.lead { font-size:1.15rem; font-weight:bold; color:var(--dark-red); }
.source { font-size:.85rem; color:#555; border-top:1px solid #ddd; padding-top:8px; }
.photo-empty { height:240px; display:grid; place-items:center; align-content:center; border:2px dashed var(--red); border-radius:8px; background:var(--soft); text-align:center; }
.program-top { align-items:start; }
img{max-width:100%}

/* Top contact bar, footer contact, disease table */
.topbar { background:var(--red); color:var(--white); padding:6px 0; overflow:hidden; white-space:nowrap; font:.9rem 'Trebuchet MS',Arial,sans-serif; }
.topbar a { color:var(--white); text-decoration:none; } .topbar a:hover { text-decoration:underline; }
.contact { margin:0; } .contact a { color:var(--white); }
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; margin-bottom:10px; }
.data-table th { background:var(--red); color:var(--white); text-align:left; padding:10px; font-family:'Trebuchet MS',Arial,sans-serif; }
.data-table td { border:1px solid #ccc; padding:10px; vertical-align:top; }
.data-table tr:nth-child(even) td { background:var(--soft); }

/* Moving top bar: one line of text slides from right to left, endlessly. Hover pauses it. */
.topbar-track { display:inline-block; padding-left:100%; animation:nwf-scroll 25s linear infinite; }
.topbar:hover .topbar-track { animation-play-state:paused; }
@keyframes nwf-scroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .topbar-track { animation:none; padding-left:0; } .topbar { white-space:normal; text-align:center; } }

/* Floating round WhatsApp button, bottom right on every page */
.wa-float { position:fixed; right:18px; bottom:18px; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff !important; display:grid; place-items:center; font-size:30px; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.35); z-index:9999; }
.wa-float:hover { background:#128C7E; }

/* Fixed slides: logo + text on a dark red background */
.logo-lg { width:150px; height:150px; }
.slide-empty { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:0 20px 60px; text-align:center; color:var(--white); background:radial-gradient(circle at center,#4a0b11 0%,#111 72%); }
.slide-tag { margin:0; font:1.15rem 'Trebuchet MS',Arial,sans-serif; }

/* Program slides: big round icon, name, focus and one line of text */
.slider { height:400px; }
.slide-icon { width:110px; height:110px; border-radius:50%; background:var(--red); color:var(--white); display:grid; place-items:center; font-size:50px; border:4px solid var(--white); }
.slide-text { margin:0; max-width:640px; font-size:.95rem; opacity:.92; }