/*
Theme Name: WPHaris OnePage
Version: 1.1.0
Text Domain: wpharis
*/

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif; line-height:1.5; color:#0f172a; background:#ffffff; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }

.container { width: min(1200px, 92%); margin: 0 auto; }
.section { padding: 80px 0; }
.section.dark { background:#0b1220; color:#f8fafc; }
.section.gray { background:#f8fafc; }
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.site-header { position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom:1px solid #e5e7eb; }
.navbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.brand { font-weight:800; letter-spacing:.5px; font-size:22px; }
.brand .accent { color:#16a34a; }

.nav { display:flex; gap:20px; align-items:center; }
.nav a { padding:8px 10px; border-radius:10px; transition: all .2s ease; font-weight:600; color:#0f172a; }
.nav a:hover { background:#f1f5f9; }
.cta-btn { background:#16a34a; color:#fff; padding:10px 16px; border-radius:12px; font-weight:700; }
.cta-btn:hover { filter:brightness(.95); }

/* Mobile menu toggle */
.menu-toggle { display:none; background:#0f172a; color:#fff; border:none; border-radius:12px; padding:10px 12px; font-weight:800; cursor:pointer; }
.menu-toggle .bars { display:inline-block; width:18px; height:2px; background:#fff; position:relative; vertical-align:middle; margin-right:8px; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content:""; position:absolute; left:0; right:0; height:2px; background:#fff; }
.menu-toggle .bars::before { top:-6px; }
.menu-toggle .bars::after { top:6px; }

/* Slide-down nav panel on mobile */
@media (max-width: 900px) {
  .nav {
    position:absolute;
    left:0; right:0;
    top:100%;
    display:none;
    flex-direction:column;
    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
    padding:10px 0;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
  }
  .nav.open {
    display:flex;
    animation: slideDown .2s ease-out both;
  }
  .nav a { padding:12px 16px; border-radius:0; }
  .nav .cta-btn { margin:6px 16px; text-align:center; }
  .menu-toggle { display:inline-flex; align-items:center; }
  .navbar { padding:12px 0; }
}

@keyframes slideDown {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Hero */
.hero { padding: 90px 0 70px; display:grid; gap:32px; align-items:center; }
.hero h1 { font-size: clamp(28px, 5vw, 56px); line-height:1.1; margin:0 0 12px; }
.hero p { font-size: clamp(15px, 2.5vw, 18px); opacity:.9; }
.badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.badge { font-size:13px; padding:6px 10px; background:#e2e8f0; border-radius:999px; font-weight:700; color:#0f172a; }
.stats { display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; }
.stat { background:#0b1220; color:#f8fafc; padding:12px 14px; border-radius:14px; }
.stat strong { display:block; font-size:20px; }

/* Cards */
.card { border:1px solid #e2e8f0; border-radius:16px; padding:18px; background:#fff; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.card h3 { margin:0 0 6px; font-size:18px; }
.card p { margin:0; opacity:.85; }
.card .tag { display:inline-block; background:#f1f5f9; padding:4px 8px; font-size:12px; border-radius:999px; margin-right:6px; }

/* Projects */
.project { display:flex; gap:18px; align-items:flex-start; }
.project img { width:160px; height:110px; object-fit:cover; border-radius:12px; border:1px solid #e5e7eb; }
.project .meta { flex:1; }
.project .meta h4 { margin:0 0 4px; }
.project .meta .small { font-size:13px; opacity:.8; }
@media (max-width: 640px) {
  .project { flex-direction:column; }
  .project img { width:100%; height:200px; }
}

/* Footer */
.site-footer { border-top:1px solid #e5e7eb; padding:24px 0; color:#475569; font-size:14px; }
.footer-nav { display:flex; gap:14px; flex-wrap:wrap; }

/* Modal */
.modal { position:fixed; inset:0; display:none; place-items:center; background:rgba(2,6,23,.6); z-index:100; padding:20px; }
.modal.open { display:grid; }
.modal-card { width:min(680px, 96%); background:#ffffff; border-radius:18px; padding:22px; border:1px solid #e2e8f0; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.modal-title { font-weight:800; font-size:20px; }
.close-x { background:#0f172a; color:#fff; border:none; border-radius:10px; padding:6px 10px; cursor:pointer; }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-grid .full { grid-column: 1/-1; }
input[type="text"], input[type="email"], textarea, select {
  width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:12px; font:inherit; color:#0f172a; background:#fff;
}
textarea { min-height:120px; resize:vertical; }
button[type="submit"] { background:#16a34a; color:#fff; border:none; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; }
.form-note { font-size:12px; color:#64748b; margin-top:6px; }
.success { color:#16a34a; font-weight:700; }
.error { color:#dc2626; font-weight:700; }

/* Better touch targets */
@media (max-width: 900px) {
  .nav a, .cta-btn { padding:14px 18px; }
}