/* site.css — Indevlin's additions to the shopsite theme.
 *
 * Loaded last (from layouts/partials/custom_head.html), after default.css,
 * fonts.css and brand.css. Like the theme, it uses only the palette
 * variables, so a change to branding-indevlin.css reskins all of it.
 *
 * Sections: theme adjustments · header · hero · software cards · feature
 * cards · software page · filters and badges · footer · contact/forms
 */

/* ---- Theme adjustments -------------------------------------------- */

/* The theme sets headings in small caps; product names like EDLD and
   EDAM read wrongly that way. */
h1, h2, h3, h4, h5, h6 { font-variant-caps: normal; letter-spacing: -0.01em; }

/* Version strings, commands and IDs in the mono face. */
.mono, kbd { font-family: var(--font-mono); }

/* The theme's links are dotted-underlined everywhere; keep that for prose,
   but not for buttons, chips and cards, which are already obviously
   clickable. */
a.chip, a.chip:link, a.chip:visited,
a.sw-card-link, a.sw-card-link:link, a.sw-card-link:visited,
.sw-feature-title a:link, .sw-feature-title a:visited,
.foot-links a:link, .foot-links a:visited { text-decoration: none !important; }

/* ---- Header: the lockup as banner.svg (the theme drops its shadow) -- */

.header-bar img {
  height: 52px;
  width: auto;
  margin: 1rem 0 0.5rem;
}
@media (min-width: 600px) { .header-bar img { height: 64px; } }

/* ---- Hero ---------------------------------------------------------- */

.hero { text-align: center; margin: 1.5rem auto 2rem; max-width: 46rem; }
.hero-tagline {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.hero-tagline::before { content: "› "; color: var(--accent); font-weight: 700; }
.hero-copy { font-size: 1.1em; }
.hero-copy p { margin: 0.5em 0; }

/* ---- Software cards (grid) ----------------------------------------- */

.sw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0 2rem;
}
@media (min-width: 700px)  { .sw-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 1100px) { .sw-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.sw-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color3);
  border-radius: 8px;
  padding: 1rem;
  background: var(--color1);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sw-card:hover { box-shadow: 3px 3px 0 var(--accent); transform: translateY(-2px); }

.sw-card-head { display: flex; gap: 0.9rem; align-items: center; }
.sw-card-head > div { min-width: 0; }

.sw-icon {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 14px;
  box-shadow: none;
  display: block;
}
.sw-icon-lg { width: 80px; height: 80px; border-radius: 18px; }
.sw-icon-xl { width: 112px; height: 112px; border-radius: 24px; }
.sw-icon-empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--color4); color: var(--color1);
  font-family: var(--font-mono); font-weight: 700; font-size: 1.8em;
}

.sw-card-title { margin: 0; font-size: 1.25em; font-family: var(--font-mono); }
.sw-card-tagline { margin: 0.15rem 0 0; font-size: 0.9em; color: var(--muted); }
.sw-card-blurb { font-size: 0.92em; margin: 0.85rem 0; flex: 1 0 auto; }

.sw-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center; justify-content: space-between;
  padding-top: 0.6rem; border-top: 1px solid var(--color3);
}

.sw-platforms { list-style: none; margin: 0.25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sw-platforms li {
  font-family: var(--font-mono);
  font-size: 0.72em;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--color3);
  color: var(--color2);
}

/* ---- Feature cards (New Releases, pinned on the home page) --------- */

.sw-features { display: grid; gap: 1.5rem; margin: 1rem 0 2.5rem; }

.sw-feature {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color3);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color1);
  box-shadow: 4px 4px 0 var(--accent);
}
@media (min-width: 900px) {
  .sw-feature { grid-template-columns: 7fr 5fr; }
  .sw-feature:nth-child(even) { grid-template-columns: 5fr 7fr; }
  .sw-feature:nth-child(even) .sw-feature-art { order: 2; }
}

.sw-feature-art { display: block; background: var(--color2); line-height: 0; }
.sw-feature-art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: left top;
  box-shadow: none; display: block;
}
.sw-feature-art-contain { display: flex; align-items: center; background: #0b0f15; }
.sw-feature-art-contain img { height: auto; object-fit: contain; }
.sw-feature-body { padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.sw-feature-body p { margin: 0; }
.sw-feature-title { margin: 0.2rem 0 0; font-size: 1.6em; font-family: var(--font-mono); }

/* ---- Software page -------------------------------------------------- */

.sw-head { display: flex; gap: 1.25rem; align-items: center; margin: 1rem 0 0.5rem; }
.sw-title { margin: 0.2rem 0 0; font-family: var(--font-mono); font-size: 2.2em; line-height: 1.1; }
.sw-fullname { margin: 0.2rem 0 0; font-weight: 600; color: var(--color2); }
.sw-tagline { margin: 0.2rem 0 0; color: var(--muted); }
@media (max-width: 599px) {
  .sw-head { flex-direction: column; align-items: flex-start; }
  .sw-title { font-size: 1.7em; }
}

.sw-gallery img { box-shadow: none; border: 1px solid var(--color3); }
.sw-gallery figcaption { font-size: 0.8em; color: var(--muted); margin: 0.3rem 0 0.4rem; }

.sw-panel > p:first-child { margin-top: 0; }
.sw-panel .spec-table { margin-top: 1rem; font-size: 0.9em; }
.sw-cta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sw-cta .btn { margin: 0; }
.sw-panel .sw-cta .btn { width: 100%; text-align: center; }

.btn-disabled {
  border-style: dashed;
  color: var(--muted) !important;
  border-color: var(--muted);
  cursor: default;
}

.product-body h2 { margin-top: 1.75rem; }
.product-body table { margin: 0.5rem 0 1rem; width: 100%; }
.product-body table th { text-align: left; }
.product-body table td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 599px) { .product-body table td:first-child { white-space: normal; } }

.sw-terms { margin: 1.5rem 0; font-size: 0.85em; color: var(--muted); }

/* ---- Filters and badges -------------------------------------------- */

.sw-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  min-height: 36px;
  border: 1px solid var(--color3);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.88em;
}
.chip:hover { border-color: var(--color4); filter: none; }
/* The theme's link colour is !important on a:link/a:visited, so the
   active chip restates its own at the same weight and specificity. */
a.chip-active, a.chip-active:link, a.chip-active:visited, a.chip-active:hover {
  background: var(--color4); border-color: var(--color4); color: var(--color1) !important;
}
.chip-empty { color: var(--muted); border-style: dashed; background: transparent; }
.chip-count { font-family: var(--font-mono); font-size: 0.8em; opacity: 0.75; }

.sw-badges { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.badge {
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
/* Signal green is a fill, never a text colour on the light ground:
   dark text on green, per the branding CSS. */
.badge-new  { background: var(--accent); border-color: var(--accent); color: var(--color2); }
.badge-dev  { color: var(--color4); }
.badge-soon { color: var(--muted); border-style: dashed; }

/* ---- Footer ---------------------------------------------------------- */

.foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.5rem 0; }
.foot-notice { font-size: 0.75em; color: var(--muted); max-width: 46rem; margin: 0.5rem auto; }

/* ---- Contact details and forms --------------------------------------- */

/* .business-card comes from the theme's {{< business >}} shortcode. */

input[type="text"], input[type="email"], textarea, select {
  width: 100%; max-width: 36rem;
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color3);
  border-radius: 6px;
  background: var(--color1);
  color: var(--color2);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--color4); outline-offset: 1px; }
button.btn { font: inherit; font-weight: 700; cursor: pointer; }

/* ---- Product page: hero, body + panel, screenshots ------------------ */

.sw-hero { margin: 1rem 0 1.5rem; }
.sw-hero img {
  width: 100%; display: block;
  border: 1px solid var(--color3); border-radius: 8px;
  box-shadow: 4px 4px 0 var(--accent);
}
.sw-hero-contain img { background: #0b0f15; }
.sw-hero figcaption {
  font-size: 0.82em; color: var(--muted); margin: 0.45rem 0 0; text-align: center;
}

.sw-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1000px) {
  .sw-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .sw-layout .sw-panel { position: sticky; top: 1rem; grid-column: 2; grid-row: 1; }
  .sw-layout .sw-body { grid-column: 1; grid-row: 1; }
}
.sw-body > h2:first-child { margin-top: 0; }
.sw-body h2 { margin-top: 2rem; }
.sw-body table { margin: 0.5rem 0 1rem; width: 100%; }
.sw-body table th { text-align: left; }
.sw-body table td:first-child { font-weight: 600; white-space: nowrap; }
@media (max-width: 599px) { .sw-body table td:first-child { white-space: normal; } }

/* .shot and .shots come from the theme's shortcodes; the gallery at the
   foot of a product page reuses them. */
.shots-gallery { margin-bottom: 2rem; }