/* ============================================================================
   Informed Software Solutions — Informed Defence page styles
   ----------------------------------------------------------------------------
   Page-specific styles for product-defence.html ONLY. Loaded AFTER the shared
   cascade (tokens.css → base.css → components.css → product.css → this file).
   The page sets body.theme-defence, so --product-accent (slate-indigo) is
   resolved — consume var(--product-accent), never raw hex.
   Shared product.css is FROZEN — Defence-only rules live here.

   Metaphor: parallel, ordered ridge lines — order, due process, structure,
   the other side of the table. Tone is calm, even-handed, plain-English NZ.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO TAG — the brief uses a mono kicker form ('// DF-03 — DEFENCE PRACTICE')
   inside the evidence-tag pill, which is wider than a bare 'DF-03'. Let it sit
   as a pill but keep the accent treatment from product.css.
--------------------------------------------------------------------------- */
.theme-defence .product-hero__tag {
  letter-spacing: var(--ls-tag);
}

/* Back-link icon sits a touch tighter than the default chevron box */
.theme-defence .back-link__icon {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------------------
   HERO RIDGE MOTIF
   The contained ridge slot (product.css) holds the inline SVG of parallel,
   ordered ridge lines. We let the lines bleed slightly under the raised UI
   card and fade toward the lower edge so the card reads as resting ON the
   ridge — order beneath the interface.
--------------------------------------------------------------------------- */
.theme-defence .product-hero__ridge {
  /* Push the ridge slot out beyond the card so lines extend left + down,
     reinforcing the "parallel lines running on" feel. */
  inset: -8% -12% -14% -16%;
  /* On the navy void the parallel ridge lines (raw accent is slate-indigo, far
     too dark to read) are mixed toward navy-300 so the drawn stroke END-STATE
     is a clearly visible luminous ruled field on the dark ground. */
  color: color-mix(in srgb, var(--product-accent) 26%, var(--navy-300));
  /* Mask uses only the alpha channel; the colour keyword is a mask stop,
     not a brand colour, so no design token applies here. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 14%,
    black 72%,
    transparent 100%);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 14%,
    black 72%,
    transparent 100%);
}

.theme-defence .product-hero__ridge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------------------------------------------------------------------------
   HERO UI CARD — let the slate-indigo dashboard mock read as a real screen:
   a subtle accent hairline at the top edge nods to the active matter bar.
--------------------------------------------------------------------------- */
.theme-defence .product-hero__ui {
  position: relative;
}

.theme-defence .product-hero__ui::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--product-accent) 0%,
    color-mix(in srgb, var(--product-accent) 45%, transparent) 60%,
    transparent 100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   FEATURE CARDS — keep the index sitting above the title with comfortable
   rhythm. product.css gives us the icon, index, title and body; we only
   adjust the small spacing relationship between icon and index here.
--------------------------------------------------------------------------- */
.theme-defence .feature-card__index {
  margin-top: calc(var(--space-1) * -1);
}

/* On hover the icon plate warms toward the accent — a quiet, ordered response,
   not a flourish (audience is defence lawyers, tone is calm). */
.theme-defence .feature-card .feature-card__icon {
  transition:
    background-color var(--dur-med) var(--ease-standard),
    color var(--dur-med) var(--ease-standard);
}

.theme-defence .feature-card:hover .feature-card__icon {
  background-color: color-mix(in srgb, var(--product-accent) 18%, transparent);
}

/* ---------------------------------------------------------------------------
   FEATURE ROW MEDIA — inline SVG vignettes that echo the product UI.
   product.css styles .feature-row__media (raised card, border, radius); the
   vignette fills it and keeps the 480×320 (3:2) aspect with no layout shift.
--------------------------------------------------------------------------- */
.theme-defence .row-vignette {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 480 / 320;
}

/* A faint accent wash behind the media on larger screens so the dark vignette
   doesn't float — it sits in a shallow pool of the product colour. */
@media (min-width: 900px) {
  .theme-defence .feature-row__media {
    position: relative;
  }

  .theme-defence .feature-row__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px
      color-mix(in srgb, var(--product-accent) 12%, transparent);
    border-radius: inherit;
  }
}

/* ---------------------------------------------------------------------------
   FEATURE LIST — product.css already styles the accent-dot bullets via
   --product-accent. We tighten the body measure inside rows so the supporting
   checklist reads as a calm, scannable column.
--------------------------------------------------------------------------- */
.theme-defence .feature-row__text .feature-list {
  max-width: 48ch;
}

/* ---------------------------------------------------------------------------
   PRODUCT CTA — the dark band already seeds an accent glow from the product
   colour (product.css). The brief's heading is short and assured; give it a
   touch more breathing room above the actions.
--------------------------------------------------------------------------- */
.theme-defence .product-cta__title {
  max-width: 18ch;
}

/* CTA band primary — product.css fills .product-cta .btn-primary with the
   product accent (slate-indigo) + navy-900 text, which is far too low-contrast
   on the deepened navy-950 band. Re-fill with the light slate (navy-300) +
   deep navy text so "Request a demo" reads as a strong, calm primary (~6:1) —
   keeping Defence's even-handed register rather than borrowing amber. */
.theme-defence .product-cta .btn-primary {
  background-color: var(--navy-300);
  border-color: var(--navy-300);
  color: var(--navy-950);
}

.theme-defence .product-cta .btn-primary:hover {
  background-color: var(--navy-200);
  border-color: var(--navy-200);
  color: var(--navy-950);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--navy-300) 30%, transparent);
}

/* The page ground is now dark site-wide, so the global .btn-ghost already reads
   correctly on the navy-950 CTA band. Pin the hover to the calm light slate
   (not amber) so the ghost stays in Defence's even-handed register. */
.theme-defence .product-cta .btn-ghost {
  color: var(--ink);
  border-color: var(--line-strong);
}

.theme-defence .product-cta .btn-ghost:hover {
  border-color: var(--navy-300);
  color: var(--ink);
  background-color: color-mix(in srgb, var(--navy-300) 12%, transparent);
}