/* ===== FreeApps Theme — style.css ===== */
/* Combined main site theme + subdomain styles */

/* ---------- Design tokens ---------- */
:root {
  --bg:#0b1020;
  --card:#131a33;
  --accent1:#7c4dff;
  --accent2:#00e5ff;
  --text:#e8ecff;
  --muted:#a6b0d6;
  --danger:#ff5d5d;
  --success:#00d084;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.12);
  --glass:rgba(11,16,32,.65);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0}
html,body{display:flex; flex-direction:column}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.35), transparent),
    radial-gradient(1000px 500px at 110% 10%, rgba(0,229,255,.25), transparent),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.p{padding:12px}

/* ---------- Header (Updated) ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  backdrop-filter: saturate(1.2) blur(8px);
  background: var(--bg); /* ✅ keep dark solid background */
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  background: var(--bg);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  height: 64px;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
}
.brand .logo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow: var(--shadow);
  font-weight: 900;
  color:#0b1020;
}
.header-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
}
.go-main-link {
  padding: 8px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  color: #0b1020 !important;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.go-main-link:hover {
  opacity: .9;
  transform: translateY(-2px);
}

/* ---------- Header search bar with clear button ---------- */
.header-search {
  position: relative;
  margin: 0 12px;
}
.header-search input {
  padding:6px 28px 6px 10px; /* space for clear button */
  border-radius:8px;
  border:1px solid var(--border-strong);
  font-size:0.9rem;
  width:180px;
  background: #fff;
  color:#222;
}
.clear-btn {
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  color:#666;
  display:none; /* hidden until text is entered */
}
.clear-btn:hover {
  color:#000;
}

/* ---------- Main & Footer ---------- */
.site-main{flex:1; padding-top:80px; padding-bottom:40px}
.site-footer{
  margin-top:auto;
  background:#0b1020; /* ✅ solid dark background for footer */
  border-top:1px solid var(--border);
}
.footer-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:18px; padding:18px 16px}
.site-footer a{display:block; color:var(--muted); text-decoration:none; margin:6px 0}
.site-footer h4{margin:.3rem 0}

/* ---------- FreeApps Custom (Middle Only) ---------- */
.freeapps-main {
  background:#f4f6fa;
  color:#222;
  padding:20px 0;
  padding-top:70px !important; /* ✅ force homepage below header */
}

/* Search bar */
.freeapps-main .header-search {
  margin:0 auto 20px;
  max-width:400px;
}
.freeapps-main .header-search input {
  width:100%;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid #ccc;
}

/* Apps grid */
.freeapps-main .apps-container {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:15px;
  padding:20px;
}
.freeapps-main .app-box {
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  padding:15px;
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor:pointer;
}
.freeapps-main .app-box:hover {
  transform:translateY(-4px);
  border-color:#bbb;
  box-shadow:0 14px 40px rgba(0,0,0,0.15);
}
.freeapps-main .app-box img {
  width: 100%;              /* always span full box width */
  aspect-ratio: 2 / 1;      /* width:height = 2:1 */
  object-fit: cover;        /* fill the box, crop excess */
  margin-bottom: 12px;
  border-radius: 8px;       /* optional: match box rounding */
  display: block;
}


.freeapps-main .app-box h3 {
  margin:8px 0;
  font-size:1rem;
  font-weight:700;
  color:#222;
  position:relative;
  display:inline-block;
  padding-bottom:4px;
}
.freeapps-main .app-box h3::after {
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:3px;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  border-radius:2px;
}
.freeapps-main .app-box p {
  font-size:0.9rem;
  color:#333;
  line-height:1.4;
  min-height:32px;
}
.freeapps-main .app-box a {
  display:inline-block;
  margin-top:8px;
  padding:6px 12px;
  background:#007bff;
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-size:0.9rem;
  transition:background 0.2s ease;
}
.freeapps-main .app-box a:hover {background:#0056b3}

#noResults {
  text-align:center;
  margin:20px;
  font-size:1rem;
  color:#666;
  display:none;
}

/* ---------- Visibility & Layout Fixes ---------- */
/* Prevent header overlap */
body, .site-main {
  padding-top: 0; /* reset */
}
main {
  padding-top:64px; /* ✅ calculators below header */
}

/* Darker text in light sections */
.freeapps-main, .calc-wrapper, .apps-container, main {
  color: #222;
}

/* Keep header/footer text light */
.site-header, .site-header a, .site-footer, .site-footer a {
  color: var(--text) !important;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .footer-grid{grid-template-columns: repeat(2,1fr)}
  .freeapps-main .apps-container{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .header-title {
    font-size:1rem;
    max-width:50%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (max-width:600px){
  .freeapps-main .apps-container{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .header-title {display:none;} /* Hide title completely on mobile */
}