/*
Theme Name: RadFlix
Theme URI: https://radflix.org
Author: RadFlix
Description: Marketing theme for RadFlix — video distraction therapy for pediatric radiation. Includes a Home template and an About template with the install map.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: radflix
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #061021; }
body { font-family: 'Manrope', system-ui, sans-serif; }
img { max-width: 100%; height: auto; }

@keyframes rfpulse { 0% { box-shadow: 0 0 0 0 rgba(0,173,242,.45), 0 0 16px 4px rgba(0,173,242,.5); } 70% { box-shadow: 0 0 0 16px rgba(0,173,242,0), 0 0 16px 4px rgba(0,173,242,.5); } 100% { box-shadow: 0 0 0 0 rgba(0,173,242,0), 0 0 16px 4px rgba(0,173,242,.5); } }
@keyframes rfpulseW { 0% { box-shadow: 0 0 0 0 rgba(47,134,192,.45), 0 0 14px 4px rgba(47,134,192,.5); } 70% { box-shadow: 0 0 0 14px rgba(47,134,192,0), 0 0 14px 4px rgba(47,134,192,.5); } 100% { box-shadow: 0 0 0 0 rgba(47,134,192,0), 0 0 14px 4px rgba(47,134,192,.5); } }
@keyframes rfbar { 0% { width: 18%; } 50% { width: 62%; } 100% { width: 18%; } }
@keyframes rffloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* hover states */
.rfh1:hover{color:#fff !important}
.rfh2:hover{background:rgba(0,173,242,.1) !important}
.rfh3:hover{background:#26bdf7 !important}
.rfh4:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04) !important}
.rfh5:hover{background:rgba(255,255,255,.06) !important}
.rfh6:hover{background:rgba(255,255,255,.05) !important}
.rfh7:hover{background:#21509a !important}
.rfh8:hover{background:rgba(24,59,124,.18) !important}
.rfh9:hover{color:#9fd6f5 !important}
.rfa1:hover{color:#fff !important}
.rfa2:hover{background:rgba(0,173,242,.1) !important}
.rfa3:hover{background:#26bdf7 !important}
.rfa4:hover{background:#21509a !important}
.rfa5:hover{color:#9fd6f5 !important}


/* header / footer / shared link hovers */
.rfnav:hover{color:#fff !important}
.rfnav_donate:hover{background:rgba(0,173,242,.1) !important}
.rfnav_cta:hover{background:#26bdf7 !important}
.rfnav_navy:hover{background:#21509a !important}
.rfghost:hover{background:rgba(255,255,255,.06) !important}
.rff1:hover{color:#fff !important}
.rff2:hover{color:#9fd6f5 !important}

/* mobile menu (CSS only, no JS) */
.rf-menu-cb { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.rf-burger { display: none; }
.rf-nav { align-items: center; }
.rf-burger span { display: block; width: 22px; height: 2px; background: #cfe0f5; border-radius: 2px; }

/* trust strip founder credit */
.rf-founder { margin-left: auto; }
@media (max-width: 1000px) { .rf-founder { margin-left: 0; } }

/* responsive */
@media (max-width: 960px) {
  .rf-page nav { flex-wrap: wrap; gap: 14px !important; }
  .rf-page section > div > div[style*="grid-template-columns"]:not([style*="repeat(4,1fr)"]),
  .rf-page section > div[style*="grid-template-columns"]:not([style*="repeat(4,1fr)"]) { grid-template-columns: 1fr !important; }
  .rf-page div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  .rf-page div[style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .rf-page header nav { flex-wrap: wrap; padding-top: 12px !important; padding-bottom: 12px !important; }
  .rf-burger { display: flex; flex-direction: column; gap: 5px; margin-left: auto; padding: 11px 12px; cursor: pointer; border: 1px solid rgba(0,173,242,.4); border-radius: 10px; }
  .rf-page .rf-nav { display: none !important; }
  .rf-menu-cb:checked ~ .rf-nav {
    display: flex !important;
    width: 100%;
    margin: 14px 0 4px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .rf-page h1 { font-size: 40px !important; }
  .rf-page h2 { font-size: 30px !important; }
}
@media (max-width: 640px) {
  .rf-page div[style*="repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
  .rf-page header img { height: 44px !important; }
  .rf-page section { padding-left: 18px !important; padding-right: 18px !important; }
}