/*
    THE PUBLIC SITE'S OWN STYLESHEET.

    The chrome and the shared surfaces of everything outside the application: the nav, the footer,
    the entry hero the three public entry points wear, the photography band and the lead paragraph.
    Every page rendered inside Components/Layout/PublicShell.razor needs it - the landing page,
    pricing, help, about, contact, privacy, terms, the guest share page and the two error pages -
    so App.razor emits it for the whole shell rather than each page linking it.

    SAME PALETTE AS THE APP so the site and the tool read as one thing, and a larger type scale
    (14-18px against the app's 12-13.5px) because a page that argues is read differently from a page
    that is operated.

    EACH PUBLIC ENTRY POINT OWNS A DISTINCT PHOTOGRAPH - craft, scale, plan layout - so the three do
    not read as the same commercial rooftop. Crops and scrims are tuned per frame and the title is
    always on the left.

    PHOTOGRAPHY IS NOT A DESIGN SURFACE: it carries its own contrast, which is what the scrims are
    for. They take --sv-unthemed-ink and --sv-unthemed-paper, which are fixed in both themes for the same
    reason the wiring-zone colours are - a wash that inverted with the theme would be a light haze
    over a bright roof in one mode and legible in the other.

    WHAT IT DOES NOT OWN. .sv-container, .sv-section, .sv-btn and .sv-label are utilities the whole
    product sets and stay in utilities.css. The landing page's own devices are landing.css, the plan
    cards are pricing.css and the help centre is help-centre.css - this file is only what they share.
*/

.sv-public {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sv-public__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sv-space-5);
  padding: var(--sv-space-4) var(--sv-space-6);
  border-bottom: 1px solid var(--sv-border-subtle);
  position: sticky;
  top: 0;
  background: var(--sv-bg);
  z-index: 20;
}

.sv-public__links {
  display: flex;
  align-items: center;
  gap: var(--sv-space-5);
}

/*
  :not(.sv-btn) matters. `.sv-public__links a` is specificity (0,1,1) and beats `.sv-btn--primary`
  at (0,1,0), so without the exclusion a call-to-action rendered as an anchor inside the nav gets
  the muted link colour instead of --sv-on-accent - amber text on an amber fill, which is
  effectively invisible.
*/
.sv-public__links a:not(.sv-btn) {
  color: var(--sv-text-secondary);
  font: 400 14px/1 var(--sv-font-sans);
}

.sv-public__links a:not(.sv-btn):hover {
  color: var(--sv-text);
  text-decoration: none;
}

.sv-public__footer {
  margin-top: auto;
  border-top: 1px solid var(--sv-border-subtle);
  padding: var(--sv-space-6) 0;
  color: var(--sv-text-tertiary);
}

.sv-lead {
  font: 400 17px/1.62 var(--sv-font-sans);
  color: var(--sv-text-secondary);
  max-width: 54ch;
}

.sv-photo {
  /* A BORDERED SURFACE, NOT A FIGURE IN PROSE: the browser's own 40px side indent has nothing to
     do with a photograph that draws its own border. */
  margin: 0;
  min-height: 320px;
  border-radius: var(--sv-radius-panel);
  border: 1px solid var(--sv-border);
  background-color: var(--sv-map-canvas);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.sv-photo--roof { background-image: url('../images/marketing/roof-install.webp'); }
.sv-photo--storage { background-image: url('../images/marketing/battery-loadshedding.webp'); }

/* About page band - surveyors on a roof without modules (the work the product replaces). */
.sv-photo--survey { background-image: url('../images/marketing/site-survey.webp'); }

/* A caption is a label and a sentence about the picture, and the caption owns the step between
   them - the four of them across the landing and about pages each stated it twice. */
.sv-photo__caption {
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-1);
  width: 100%;
  padding: var(--sv-space-4);
  background: color-mix(in srgb, var(--sv-bg) 86%, transparent);
  border-bottom-left-radius: var(--sv-radius-panel);
  border-bottom-right-radius: var(--sv-radius-panel);
}

.sv-page-hero {
  position: relative;
  isolation: isolate;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--sv-border-subtle);
  background: var(--sv-bg-overlay);
}

.sv-page-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

/* About - residential tiled roof, modules filling the right half. */
.sv-page-hero--about .sv-page-hero__media {
  background-image: url("/images/marketing/hero-about.jpg");
  background-position: 78% 42%;
}

/* Pricing - solar carport diagonal; open apron on the left holds the title. */
.sv-page-hero--pricing .sv-page-hero__media {
  background-image: url("/images/marketing/hero-pricing.jpg");
  background-position: 62% 48%;
}

/* Help - nadir plan of a designed array; keep banks centred so setbacks read. */
.sv-page-hero--help .sv-page-hero__media {
  background-image: url("/images/help/hero-banner.jpg");
  background-position: 52% 48%;
}

.sv-page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Left-weighted wash so title stays legible without a full black bar. */
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--sv-unthemed-ink) 74%, transparent) 0%,
      color-mix(in srgb, var(--sv-unthemed-ink) 50%, transparent) 40%,
      color-mix(in srgb, var(--sv-unthemed-ink) 20%, transparent) 70%,
      color-mix(in srgb, var(--sv-unthemed-ink) 8%, transparent) 100%);
}

/* Pricing apron is very bright - deepen the left wash so type stays AA. */
.sv-page-hero--pricing .sv-page-hero__scrim {
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--sv-unthemed-ink) 80%, transparent) 0%,
      color-mix(in srgb, var(--sv-unthemed-ink) 55%, transparent) 38%,
      color-mix(in srgb, var(--sv-unthemed-ink) 22%, transparent) 68%,
      color-mix(in srgb, var(--sv-unthemed-ink) 10%, transparent) 100%);
}

/* Help plan view is mid-tone - a lighter wash lets the layout geometry show. */
.sv-page-hero--help .sv-page-hero__scrim {
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--sv-unthemed-ink) 70%, transparent) 0%,
      color-mix(in srgb, var(--sv-unthemed-ink) 46%, transparent) 42%,
      color-mix(in srgb, var(--sv-unthemed-ink) 16%, transparent) 72%,
      color-mix(in srgb, var(--sv-unthemed-ink) 6%, transparent) 100%);
}

.sv-page-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sv-space-7) var(--sv-space-5);
}

.sv-page-hero__label {
  color: color-mix(in srgb, var(--sv-unthemed-paper) 72%, transparent);
}

.sv-page-hero__title {
  margin: var(--sv-space-2) 0 0;
  color: var(--sv-unthemed-paper);
  max-width: 22ch;
}

.sv-page-hero__lead {
  margin: var(--sv-space-3) 0 0;
  max-width: 48ch;
  color: color-mix(in srgb, var(--sv-unthemed-paper) 88%, transparent);
}

.sv-page-hero__meta {
  margin: var(--sv-space-4) 0 0;
  color: color-mix(in srgb, var(--sv-unthemed-paper) 62%, transparent);
}

@media (max-width: 860px) {
  .sv-page-hero {
    min-height: 240px;
  }
}


.sv-photo__caption > p {
  margin: 0;
}