/* =========================================================
   Nudgie styles.css — single source of truth
   Bootstrap-friendly: we style Nudgie classes + light globals
   ========================================================= */

/* -------------------------
   1) Design tokens
------------------------- */
:root{
  --ink:#0f172a;
  --muted:#475569;
  --border: rgba(15, 23, 42, 0.10);
  --soft:#f6f8fb;

  /* App nav */
  --appnav-bg:#0b2a5b;
  --appnav-fg:#ffffff;
  --appnav-fg-muted: rgba(255,255,255,0.70);
}

/* -------------------------
   2) Base (safe globals)
------------------------- */
body{
  color: var(--ink);
  background: #fff;
}

a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* -------------------------
   3) Layout helpers
------------------------- */
.wrap{
  max-width: 720px; /* readable, matches app pages */
}

/* -------------------------
   4) Typography helpers
------------------------- */
.brand{
  font-weight: 800;
  letter-spacing: 0.2px;
}

.page-title{
  font-weight: 800;
  letter-spacing: -0.01em;
}

.section-title{
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lead-muted{
  color: var(--muted);
  font-size: 1.05rem;
}

.muted{
  color: var(--muted);
}

/* -------------------------
   5) Common UI elements
------------------------- */
.divider{
  height: 1px;
  background: var(--border);
  margin: 1.75rem 0;
}

.chip{
  display:inline-block;
  font-size: .78rem;
  padding: .18rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: #fff;
}

.card-soft{
  background: var(--soft);
}

/* -------------------------
   6) App nav (component)
------------------------- */
.app-nav{
  background: var(--appnav-bg);
  color: var(--appnav-fg);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Default text in app-nav */
.app-nav,
.app-nav *{
  color: var(--appnav-fg);
}

/* Label */
.app-nav-label{
  text-transform: uppercase;
  font-size: .80rem;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .72;
  white-space: nowrap;
}

/* Links */
.app-nav .nav-link{
  padding: .25rem .55rem;
  border-radius: 999px;
  line-height: 1.1;
  color: var(--appnav-fg);
  opacity: .92;
  text-decoration: none;
}

.app-nav .nav-link:hover{
  opacity: 1;
  text-decoration: underline;
}

/* Optional “active” state */
.app-nav .nav-link.active{
  background: rgba(255,255,255,0.14);
  text-decoration: none;
  opacity: 1;
}

/* Muted helper within app-nav (if you use .text-muted inside it) */
.app-nav .text-muted{
  color: var(--appnav-fg-muted);
}

/* Account chip */
.account-chip{
  padding: .30rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  font-size: .90rem;
  opacity: .92;
  white-space: nowrap;
}

/* Bridge: if app-nav is injected inside #app-nav container,
   ensure it inherits white without needing !important */
#app-nav .app-nav,
#app-nav .app-nav *{
  color: var(--appnav-fg);
}

/* -------------------------
   7) Birthdays page components
------------------------- */
.bday-card{
  border-radius: 18px;
  border: 1px solid var(--border) !important;
}

.bday-top{
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: .55rem;
}

.bday-title{
  font-weight: 800;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  margin-bottom: .35rem;
}

.bday-sub{
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.3;
}
.bday-sub + .bday-sub{
  margin-top: .25rem;
}

/* Add-birthday card */
.add-bday-card{
  background-color: var(--soft);
}
.add-bday-card .card-body,
.add-bday-card label,
.add-bday-card input,
.add-bday-card small,
.add-bday-card p{
  font-size: 1rem;
}

/* -------------------------
   8) Homepage (index.html)
------------------------- */
.hero-wrap{
  background:
    radial-gradient(1000px 600px at 10% 10%, rgba(13,110,253,0.10), transparent 60%),
    radial-gradient(800px 500px at 90% 30%, rgba(111,66,193,0.10), transparent 55%),
    linear-gradient(180deg, var(--soft) 0%, #ffffff 70%);
  border-bottom: 1px solid var(--border);
}

.tile{
  border: 1px solid var(--border);
  border-radius: 1.25rem;
}

.shadow-soft{
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.icon{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(13,110,253,0.10);
  border: 1px solid rgba(13,110,253,0.18);
  font-size: 18px;
}

/* Device placeholder blocks on the homepage */
.device{
  position: absolute;
  right: 12px;
  top: 10px;
  width: 320px;
  height: 410px;
  border-radius: 26px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background:
    linear-gradient(180deg, rgba(15,23,42,0.04), rgba(15,23,42,0.02)),
    radial-gradient(350px 220px at 30% 20%, rgba(13,110,253,0.25), transparent 55%),
    radial-gradient(300px 220px at 80% 55%, rgba(111,66,193,0.18), transparent 60%),
    #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
  overflow: hidden;
}

.device::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.55), transparent 40%);
  opacity: 0.7;
}

.device-2{
  right: 90px;
  top: 55px;
  width: 260px;
  height: 360px;
  opacity: 0.65;
  filter: saturate(0.9);
}

.tile.bg-dark{
  border-color: rgba(255,255,255,0.14);
}

/* -------------------------
   9) Micro polish
------------------------- */
@media (min-width: 992px){
  .hero-wrap h1.display-5{
    letter-spacing: -0.02em;
    line-height: 1.08;
  }
}

.hero-wrap .lead{
  max-width: 38rem;
}

/* Only apply hover effects on hover-capable devices */
@media (hover: hover){
  .tile{
    transition: transform 140ms ease, box-shadow 140ms ease;
  }

  .tile:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
  }
}

.hero-wrap .btn{
  transition: transform 120ms ease;
}

.hero-wrap .btn:active{
  transform: translateY(1px);
}