/* ===== FreeApps Theme — style.css (improved + header/footer spacing fixes) ===== */

/* ---------- 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);
  --content-max: 1200px;
  --header-height: 64px;   /* adjust if your header height changes */
  --footer-height: 72px;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html,body { height:100%; min-height:100%; }
body{
  margin:0;
  padding:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  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:var(--content-max);margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.p{padding:12px}

/* ---------- Header (fixed) ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--header-height);
  backdrop-filter: saturate(1.2) blur(8px);
  background: linear-gradient(180deg, rgba(11,16,32,0.85), var(--bg));
  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:100%;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:1.05rem;
}
.brand .logo{
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  box-shadow:var(--shadow);
  font-weight:900;color:#0b1020;font-size:0.9rem;
}
.header-title{flex:1;text-align:center;font-weight:700;font-size:1.15rem;color:var(--text);margin:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.go-main-link{padding:8px 14px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#0b1020;font-weight:600;text-decoration:none;transition:opacity .2s ease, transform .2s ease}
.go-main-link:hover{ opacity:.95; transform:translateY(-2px) }

/* ---------- Header search ---------- */
.header-search{ position:relative; margin:0 8px; }
.header-search input{
  padding:6px 28px 6px 10px;border-radius:8px;border:1px solid #ccc;font-size:0.9rem;width:180px;background:#fff;color:#222;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.header-search input:focus{ outline:none; border-color: rgba(124,77,255,0.9); box-shadow: 0 6px 20px rgba(124,77,255,0.06); }
.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; }
.header-search input:not(:placeholder-shown) + .clear-btn{ display:block }
.clear-btn:hover{ color:#000 }

/* ---------- Footer: non-sticky (normal flow) ---------- */
.site-footer {
  position: relative;
  width: 100%;
  display:flex;
  align-items:center;
  background: var(--bg);
  border-top: 1px solid var(--border);
  color: var(--muted);
  padding: 18px 0;
  margin-top: 28px;
}
.site-footer .wrap { display:flex; align-items:center; justify-content:space-between; }

/* ---------- Main area: place below fixed header ----------
   Use padding-top to avoid content being hidden under header.
   This approach preserves natural document flow and allows footer to sit after content. */
main, .site-main {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding-top: calc(var(--header-height) + 8px); /* small gap under header */
  padding-bottom: 28px;
  background: transparent;
  overflow: visible;
  -webkit-overflow-scrolling: auto;
}

/* Ensure the first content isn't pushed down twice */
.wrap > .latest-section:first-child,
.wrap > section:first-child { margin-top: 0 !important; }

/* ---------- FreeApps section (light middle area) ---------- */
.freeapps-main, .freeapps-main-override {
  background:#f4f6fa;
  color:#222;
  padding:20px 0;
  /* if you need a smaller top gap change the calc below */
  padding-top: calc(var(--header-height) + 8px) !important;
}
.freeapps-main .header-search, .freeapps-main-override .header-search { margin:0 auto 20px; max-width:400px; }
.freeapps-main .header-search input, .freeapps-main-override .header-search input {
  width:100%; padding:8px 12px; border-radius:8px; border:1px solid #ccc; background:#fff; color:#222;
}

/* ---------- Apps grid ---------- */
.freeapps-main .apps-container, .freeapps-main-override .apps-container {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:15px; padding:20px;
}
.freeapps-main .app-box, .freeapps-main-override .app-box {
  background:#fff;border:1px solid #ddd;border-radius:12px;padding:15px;text-align:center;transition:transform .2s ease, box-shadow .2s ease,border-color .2s ease;cursor:pointer;
}

/* ---------- Latest articles grid (floating photo + details) ---------- */
.latest-section { padding: 12px 0; }
.latest-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
  align-items: start;
  margin-top: 12px;
}

/* clamp any excessive top spacing the theme may add */
.blog-container { margin-top: 12px; padding-top: 0; }

/* headings: keep smaller top margins to avoid big gaps */
h1,h2,h3 { margin-top: 0.5em; }

/* ---------- Article card (photo + details below) ---------- */
.latest-card {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  overflow: visible;
  display:flex;
  flex-direction:column;
  transition: transform .12s ease, box-shadow .12s ease;
  isolation: isolate;
}

/* anchor fills card */
.latest-card > a { display:block; color:inherit; text-decoration:none; outline:none; }

/* thumbnail: crisp image */
.latest-thumb {
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  margin-bottom: -28px; /* overlap effect with body panel below */
  box-shadow: 0 10px 30px rgba(11,16,32,0.12);
  transition: transform .3s ease, box-shadow .3s ease;
}
.latest-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* icon badge */
.latest-thumb .icon {
  position:absolute; left:12px; top:12px;
  background: rgba(255,255,255,0.95); color:#0b1020;
  padding:6px 8px; border-radius:8px; font-weight:700; font-size:0.85rem;
  box-shadow: 0 6px 20px rgba(11,16,32,0.06);
  pointer-events:none;
}

/* body: floating white panel under image */
.latest-body {
  background:#fff;
  border-radius:12px;
  padding:20px 16px 16px;
  box-shadow: 0 18px 50px rgba(11,16,32,0.08);
  transform: translateY(-18px);
  position: relative;
  z-index:1;
  color:#222;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:160px;
}

/* meta/category (blue) */
.latest-body .meta {
  font-size:0.78rem; font-weight:700; color:#1557e6;
  letter-spacing:.02em; text-transform:uppercase; margin-bottom:4px;
}

/* title */
.post-title {
  margin:0; font-size:1.12rem; line-height:1.18; color:#07204a; font-weight:800;
  transform: translateY(-2px); hyphens:auto; word-break:break-word;
}

/* excerpt */
.post-excerpt {
  margin:0; color:#4b5563; font-size:0.95rem; line-height:1.45; flex:1 1 auto; margin-top:6px;
}

/* footer row */
.post-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:0.9rem; }
.post-date { font-size:0.85rem; color:var(--muted); }
.read-more { font-weight:700; color:var(--accent1); font-size:0.95rem; text-decoration:none; }

/* hover interactions */
.latest-card:hover .latest-thumb { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 80px rgba(11,16,32,0.12); }
.latest-card:hover .latest-body  { transform: translateY(-22px); box-shadow: 0 26px 90px rgba(11,16,32,0.10); }

/* focus visible */
.latest-card > a:focus,
.latest-card > a:focus-visible {
  box-shadow: 0 0 0 4px rgba(124,77,255,0.12), 0 12px 40px rgba(11,16,32,0.06);
  border-radius:12px; outline:none;
}
.latest-card > a:focus .latest-thumb,
.latest-card > a:focus-visible .latest-thumb { transform: translateY(-6px); }

/* remove pointer blocking on icon badge */
.latest-thumb .icon { pointer-events:none; }

/* accessibility reduce motion */
@media (prefers-reduced-motion: reduce) {
  .latest-thumb, .latest-body, .latest-card { transition:none; transform:none; }
}

/* responsive grid */
@media (max-width: 1200px) {
  .latest-grid { grid-template-columns: repeat(3, 1fr); }
  .latest-thumb { margin-bottom: -22px; }
  .latest-body { padding:16px; transform: translateY(-14px); }
}
@media (max-width: 900px) {
  .latest-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .latest-grid { grid-template-columns: 1fr; }
  .latest-thumb { margin-bottom: -14px; border-radius:10px; }
  .latest-body { padding:14px; transform: translateY(-10px); min-height:0; }
  .post-title { font-size:1.02rem; }
}

/* ---------- Small utilities and admin styles (kept) ---------- */
#noResults{ text-align:center; margin:20px; font-size:1rem; color:#666; display:none; }
.site-header, .site-header a, .site-footer, .site-footer a { color:var(--text) !important }
.freeapps-main, .freeapps-main-override, .calc-wrapper, .apps-container, main { color:#222 }
a:focus, button:focus, input:focus, .app-box:focus { outline:3px solid rgba(124,77,255,0.18); outline-offset:2px; box-shadow: 0 6px 20px rgba(124,77,255,0.06); }
@media (prefers-reduced-motion: reduce){ .freeapps-main .app-box, .freeapps-main-override .app-box, .go-main-link { transition:none; transform:none; } }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr) } .freeapps-main .apps-container, .freeapps-main-override .apps-container { grid-template-columns:repeat(2,1fr) } }
@media (max-width:768px){ .header-title{ font-size:1rem; max-width:50% } }
@media (max-width:600px){ .freeapps-main .apps-container, .freeapps-main-override .apps-container { grid-template-columns:1fr } .footer-grid{ grid-template-columns:1fr } }
@media (max-width:480px){ .header-title{ display:none } }

/* admin & form styles */
.card { background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:12px; padding:12px; }
.admin-grid { display:grid; grid-template-columns:1fr 420px; gap:20px; align-items:start; }
input[type="text"], input[type="password"], input[type="file"], input[type="email"], textarea, select {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background:#fff; color:#222; font-size:0.95rem; line-height:1.3;
}
textarea { min-height:120px; resize:vertical; }
input:focus, textarea:focus, select:focus { outline:none; border-color: rgba(124,77,255,0.9); box-shadow: 0 6px 20px rgba(124,77,255,0.06); }
.btn { display:inline-block; padding:8px 12px; border-radius:8px; background:linear-gradient(135deg,var(--accent1),var(--accent2)); color:#0b1020; border:none; font-weight:600; cursor:pointer; transition:transform .12s ease, opacity .12s ease; }
.btn:hover { transform:translateY(-2px); opacity:.95; }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.08); color:var(--text); padding:7px 10px; }
.btn[disabled], .btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
label { display:block; margin-bottom:6px; font-weight:600; color:var(--bg); }
.login-wrap { max-width:420px; margin:80px auto; background:#fff; color:#222; padding:20px; border-radius:12px; box-shadow:0 10px 30px rgba(11,16,32,0.08); border:1px solid rgba(0,0,0,0.04); }
.alert { padding:10px; border-radius:8px; margin-bottom:12px; font-weight:600; }
.alert-success { background:#ecfdf5; border:1px solid #bbf7d0; color:#065f46; }
.alert-error { background:#fff1f2; border:1px solid #fecaca; color:#7f1d1d; }
table { width:100%; border-collapse:collapse; font-size:0.95rem; color:#222; background:#fff; border-radius:8px; overflow:hidden; }
table thead { background:transparent; color:var(--muted); font-weight:700; }
table th, table td { padding:10px 8px; border-bottom:1px solid #f3f4f6; vertical-align:middle; }
table tbody tr:hover { background: rgba(11,16,32,0.02); }
.admin-panel { background:#fff; border-radius:10px; padding:12px; box-shadow:0 8px 24px rgba(11,16,32,0.05); border:1px solid rgba(0,0,0,0.04); color:#222; }
.admin-panel img { max-width:100%; border-radius:8px; display:block; margin-top:8px; }
.form-actions { display:flex; gap:8px; align-items:center; }
.form-note { font-size:0.85rem; color:var(--muted); margin-top:8px; }
.table-actions { text-align:right; }
:focus-visible { outline: 3px solid rgba(124,77,255,0.16); outline-offset:2px; }
button[style*="background:#ef4444"] { background: linear-gradient(135deg, #ff7a7a, #ef4444); color:#fff; border-radius:8px; padding:8px 10px; }
.hidden { display:none !important; }
.center { text-align:center; }

/* End of file */