/* styles-mobile.css — narrow layout (max-width: 1023px) */
:root {
  --brand:#db2777;
  --ink:#0f172a;
  --muted:#6b7280;
  --bg:#f8fafc;
}

*,
*::before,
*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
  line-height:1.5;
  font-size:16px;
}

.container { width:100%; max-width: 100%; padding: 16px; margin: 0 auto; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:16px; }

/* Header & Nav (stacked on mobile) */
.header { position: sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; z-index:10; }
.header .container { display:block !important; }
.header .container > a { display:inline-block; font-weight:800; font-size:20px; color:var(--brand) !important; text-decoration:none; }
.nav { display:grid; grid-template-columns: 1fr; gap:8px; margin-top:10px; }
.nav a { display:block; padding:10px 12px; border:1px dashed #e5e7eb; border-radius:10px; color: var(--ink); text-decoration:none; }
.nav a.active { color:var(--brand); font-weight:600; border-color: var(--brand); }

/* Hero & grids */
.hero { background:#fde2f2; border-radius:16px; padding:28px 16px; text-align:left; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-block; padding:10px 16px; border-radius:10px; border:1px solid var(--brand); color:#fff; background:var(--brand); text-decoration:none; }
.btn.outline { background:transparent; color:var(--brand); }
.grid { display:grid; gap:12px; }
.grid-3 { grid-template-columns: 1fr; } /* single column on mobile */

/* Lists */
.list { display:grid; gap:12px; }
.item { display:grid; grid-template-columns: 1fr; gap:10px; }

/* Footer */
.footer { background:#0b1220; color:#cbd5e1; text-align:center; padding:20px; margin-top:28px; }


/* --- Hamburger menu for narrow screens --- */
.header .container { position: relative; display:flex !important; justify-content:space-between; align-items:center; gap:12px; }
.hamburger {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  font-size:16px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
}
.hamburger:focus { outline:2px solid #94d3f0; outline-offset:2px; }

/* Hide the inline nav by default on mobile, show as a popover panel when open */
.nav {
  display:none;
  position:absolute;
  top:100%;
  right:16px;
  left:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  padding:10px;
  margin-top:8px;
  z-index:100;
}
.mobile-nav-open .nav { display:block; }
.nav a { display:block; padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none; }
.nav a:hover { background:#f3f4f6; }
.nav a.active { color:var(--brand); font-weight:600; }