/* ==========================================================================
   Spanware — site styles (layered on Bootstrap 5)
   ========================================================================== */

:root {
  --sw-primary: #0d6efd;
  --sw-accent: #20c997;
  --sw-dark: #0f172a;
  --sw-muted: #64748b;
  --sw-surface: #f8fafc;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
  color: #1e293b;
}

main { flex: 1 0 auto; }

/* ---------- Logo: "<span>ware" ---------- */
.sw-logo {
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.sw-logo:hover { color: #fff; }
.sw-logo .sw-tag {
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 600;
  color: var(--sw-accent);
}

/* ---------- Navbar ---------- */
.navbar.sw-nav {
  background: var(--sw-dark);
  /* Bar and contents sized at 110% of Bootstrap's defaults */
  --bs-navbar-padding-y: .55rem;
  --bs-navbar-brand-padding-y: .34375rem;
  --bs-navbar-nav-link-padding-x: .55rem;
  --bs-nav-link-font-size: 1.1rem;
  --bs-navbar-toggler-padding-y: .275rem;
  --bs-navbar-toggler-padding-x: .825rem;
  --bs-navbar-toggler-font-size: 1.375rem;
}
.sw-nav .navbar-nav { --bs-nav-link-padding-y: .55rem; }
.sw-nav .sw-logo { font-size: 1.76rem; }
.sw-nav .nav-link { color: rgba(255,255,255,.75); }
.sw-nav .nav-link:hover,
.sw-nav .nav-link.active { color: #fff; }

/* ---------- Hero ---------- */
.sw-hero {
  background: linear-gradient(135deg, var(--sw-dark) 0%, #1e3a8a 100%);
  color: #fff;
  padding: 5rem 0 4rem;
}
.sw-hero .lead { color: rgba(255,255,255,.8); }
.sw-hero-sm { padding: 3.5rem 0 3rem; }

/* ---------- Tiles (home page) ---------- */
.sw-tile {
  display: block;
  height: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sw-tile:hover,
.sw-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, .12);
  border-color: var(--sw-primary);
  color: inherit;
}
.sw-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: .875rem;
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
}
.sw-tile-icon.ios     { background: #e0e7ff; color: #3730a3; }
.sw-tile-icon.windows { background: #dbeafe; color: #0369a1; }
.sw-tile-icon.oss     { background: #d1fae5; color: #047857; }
.sw-tile .sw-tile-cta { color: var(--sw-primary); font-weight: 600; }

/* ---------- Sections ---------- */
.sw-section { padding: 4rem 0; }
.sw-section-alt { background: var(--sw-surface); }

/* ---------- App / project listings ---------- */
.sw-app + .sw-app { border-top: 1px solid #e2e8f0; }
.sw-app { padding: 3.5rem 0; }
.sw-app-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sw-muted);
  font-size: .7rem;
  text-align: center;
  overflow: hidden;
  flex-shrink: 0;
}
.sw-app-icon img { width: 100%; height: 100%; object-fit: cover; }

/* Screenshots */
.sw-shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}
.sw-shots img {
  scroll-snap-align: start;
  border-radius: .75rem;
  box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .1);
  flex-shrink: 0;
}
.sw-shots.phone img   { height: 420px; width: auto; }
.sw-shots.desktop img { height: 300px; width: auto; }
@media (max-width: 575.98px) {
  .sw-shots.phone img   { height: 340px; }
  .sw-shots.desktop img { height: 200px; }
}

/* Store badges (placeholder buttons) */
.sw-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: .6rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
}
.sw-badge:hover { color: #fff; opacity: .85; }

/* Open-source cards */
.sw-repo-card { border-radius: 1rem; }
.sw-repo-card .card-img-top { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }

/* ---------- Footer ---------- */
.sw-footer {
  background: var(--sw-dark);
  color: rgba(255,255,255,.7);
  padding: 2.5rem 0;
}
.sw-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.sw-footer a:hover { color: #fff; }

/* Shared nav component wrapper (see js/nav.js) — sticky lives on the host element */
sw-navbar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Shared footer component wrapper (see js/footer.js) */
sw-footer { display: block; }

/* Click-to-enlarge screenshots (see js/lightbox.js) */
.sw-shots img[role="button"] { cursor: zoom-in; transition: opacity .15s ease; }
.sw-shots img[role="button"]:hover { opacity: .85; }
.sw-shots img[role="button"]:focus-visible { outline: 3px solid var(--sw-primary); outline-offset: 3px; }
.sw-lightbox .modal-dialog { max-width: min(1400px, 95vw); }
.sw-lightbox img { max-height: 85vh; object-fit: contain; margin: 0 auto; }
.modal-backdrop.show { opacity: .85; }

/* Row of store / purchase buttons — stays on one line, shrinking on narrow screens */
.sw-badges { display: flex; flex-wrap: wrap; gap: .5rem; } /* wraps only as a last resort on very small phones */
.sw-badges .sw-badge { white-space: nowrap; }
.sw-badge-direct { background: var(--sw-primary); }
@media (max-width: 399.98px) {
  .sw-badges .sw-badge { padding: .45rem .7rem; font-size: .85rem; gap: .35rem; }
  .sw-badges .sw-badge .fs-5 { font-size: 1rem !important; }
}

/* App history list (apphistory.html) */
.sw-history-item { padding: 1.5rem 0; }
.sw-history-item:first-child { padding-top: 0; }