/*
    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 four 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.

    A PAGE THAT CARRIES A PHOTOGRAPH OWNS A DISTINCT ONE - 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. Contact carries none, for the reason stated on its own variant below: a band
    whose subject cannot be photographed wears the product's own dark surface rather than a stand-in.

    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;
}

/*
  TWO GROUPS AT THE RIGHT, ONE GAP BETWEEN THEM. The auto margin is what holds them there rather
  than the nav's own space-between: with three children that would put the pages in the middle of
  the bar, and an auto margin absorbs the free space before space-between has any to distribute.
  The nav's gap is the same step the group states inside itself, so the row reads as one list at
  every width the two fit on.
*/
.sv-public__links {
  display: flex;
  align-items: center;
  gap: var(--sv-space-5);
  margin-left: auto;
}

.sv-public__cta {
  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.webp");
  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.webp");
  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.webp");
  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%);
}

/* ── The one head band with no photograph in it ───────────────────────────────
   AND THAT IS THE DECISION, not a file that has not arrived. Each of the three
   above answers a question with a frame - craft, scale, layout - and a contact
   page's subject is the people who answer, which the imagery rules put out of
   reach: no identifiable face, no branded workwear, no identifiable premises.
   What is left to photograph is a stock desk, which says nothing and dates.

   SO THE BAND IS THE PRODUCT'S OWN SURFACE INSTEAD. `data-theme="dark"` sits on
   the section, exactly as the landing page's engine band wears it, so every token
   inside resolves against the ink rather than against the page - the accent comes
   out at its fill value, where a light-mode accent over near-black would be the
   darkened paper-safe one. The sunken step rather than the page's own keeps the
   band a surface of its own in DARK mode as well, where everything around it is
   lighter than it is; there is no scrim, because there is nothing to wash.
   ------------------------------------------------------------------------ */
.sv-page-hero--contact {
  background: var(--sv-bg-sunken);
  border-bottom-color: var(--sv-border);
  /* AND IT STATES ITS OWN INK, for the reason the navigation column does: a custom property
     resolves where it is USED, so `body` computes --sv-text once in the page's own mode and every
     child inherits that ink whatever the tokens are redeclared to underneath. Without this line an
     element inside carrying no colour of its own is near-black type on a near-black band. */
  color: var(--sv-text);
  /* Nothing is bottom-aligned to a photograph's horizon here, so the two halves
     centre on one another the way the band's own split does. */
  align-items: center;
}

.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;
  }
}

/* ── The head band on a phone ─────────────────────────────────────────────────
   THE WASH TURNS TO RUN DOWN THE BAND RATHER THAN ACROSS IT. Every hero's scrim
   is weighted to the left, because on a desk the words occupy the left third of
   a wide picture and the right two thirds are the picture. A phone has no right
   two thirds: the words fill the band, so the corner the gradient is thinnest at
   is the corner the last line of type sits in, and the line that says how much
   help there is was set in 62% white over sunlit ground. Turned vertical, every
   line stands on the same ground and the picture still reads underneath.
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .sv-page-hero__scrim,
  .sv-page-hero--pricing .sv-page-hero__scrim,
  .sv-page-hero--help .sv-page-hero__scrim {
    background:
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--sv-unthemed-ink) 58%, transparent) 0%,
        color-mix(in srgb, var(--sv-unthemed-ink) 72%, transparent) 55%,
        color-mix(in srgb, var(--sv-unthemed-ink) 84%, transparent) 100%);
  }

  /* AND THE QUIETEST LINE COMES UP WITH IT. The count is a 10px mono label at 62% white, which is
     the least legible thing in the band on the widest screen and the only thing under the reader's
     thumb on the narrowest. On a phone the picture is behind the words rather than beside them, so
     what was a caption on an image becomes a line of the page. */
  .sv-page-hero__meta {
    color: color-mix(in srgb, var(--sv-unthemed-paper) 80%, transparent);
  }
}


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

/* ── The bar on a phone ───────────────────────────────────────────────────────
   THE BAR IS ONE ROW WITH ROOM FOR BOTH HALVES, and a phone is where there is not. Unwrapped it
   takes the width out of the mark - `.sv-brand-link` states `min-width: 0` so that a rail can
   shrink it, which here let the name draw straight through the first link and squeezed the mark
   itself to nothing. The mark is the one thing in the bar that may not give up width.

   THE WAY IN STAYS BESIDE THE MARK and the three pages take the line under it: somebody arriving
   on a phone is signing in or making an account far more often than they are browsing to Pricing,
   and the pages are in the footer as well.

   IT STOPS STICKING. Two rows pinned to the top of a phone is a fifth of the screen held for
   chrome already read, which is the rule `.sv-pagehead__bar` follows one shell over.
   ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  .sv-public__nav {
    flex-wrap: wrap;
    position: static;
    row-gap: var(--sv-space-3);
    column-gap: var(--sv-space-3);
    padding: var(--sv-space-3) var(--sv-space-4);
  }

  /* Two classes, because the lockup is brand-assets.css's own element and one class would tie. */
  .sv-public__nav .sv-brand-link {
    flex: 0 0 auto;
  }

  .sv-public__cta {
    order: 1;
    margin-left: auto;
    gap: var(--sv-space-3);
  }

  .sv-public__links {
    order: 2;
    flex: 1 0 100%;
    margin-left: 0;
  }
}