/*==================================================
SECTION BANNERS
One visual system for the whole site. Each page's header
carries the image of its section, so a reader can tell at a
glance where they are:

  data-banner="states"   U.S. map      Compare States, LawLookup
  data-banner="wire"     courthouse    Registry Wire, archive, Follow
  data-banner="intl"     globe         International, countries,
                                       Traveling Abroad, Cruises
  data-banner="law"      gavel         Case Law Library and every case
                                       page, the GPS special report
  data-banner="library"  library       Registry Reality, Myths vs.
                                       Reality, Contact, 404

The images are the landing page's own (images/home-*.jpg),
served through the Netlify Image CDN at the width the screen
needs. One image per page; never layered.

Two forms, same markup hook:

  .page-banner[data-banner]        the navy page hero
                                   (<section class="job-hero …">):
                                   the photograph sits under a
                                   strong navy wash, so white and
                                   gold text keep their contrast.

  .page-banner-wash[data-banner]   the parchment LawLookup app:
                                   the photograph sits under a
                                   parchment wash behind the top of
                                   the page and fades out, so the
                                   dark text keeps its contrast.

Loaded last on every page, after the page's own CSS. It sets
only backgrounds — never padding, type or layout — so each
page's header keeps its own shape. The site-wide body
background is untouched.
==================================================*/


/*-------- images (desktop) --------*/

[data-banner="states"]{
--banner-img:url("/.netlify/images?url=/images/home-card-states.jpg&w=1600&q=60");
--banner-pos:50% 45%;
}

[data-banner="wire"]{
--banner-img:url("/.netlify/images?url=/images/home-hero-courthouse.jpg&w=1600&q=60");
--banner-pos:78% 35%;
}

[data-banner="intl"]{
--banner-img:url("/.netlify/images?url=/images/home-card-international.jpg&w=1600&q=60");
--banner-pos:50% 40%;
}

[data-banner="law"]{
--banner-img:url("/.netlify/images?url=/images/home-card-wire.jpg&w=1600&q=60");
--banner-pos:60% 62%;
}

[data-banner="library"]{
--banner-img:url("/.netlify/images?url=/images/home-card-library.jpg&w=1600&q=60");
--banner-pos:55% 45%;
}


/*-------- images (phones: a smaller file) --------*/

@media (max-width:700px){

[data-banner="states"]{
--banner-img:url("/.netlify/images?url=/images/home-card-states.jpg&w=800&q=60");
}

[data-banner="wire"]{
--banner-img:url("/.netlify/images?url=/images/home-hero-courthouse.jpg&w=800&q=60");
}

[data-banner="intl"]{
--banner-img:url("/.netlify/images?url=/images/home-card-international.jpg&w=800&q=60");
}

[data-banner="law"]{
--banner-img:url("/.netlify/images?url=/images/home-card-wire.jpg&w=800&q=60");
}

[data-banner="library"]{
--banner-img:url("/.netlify/images?url=/images/home-card-library.jpg&w=800&q=60");
}

}


/*==================================================
DARK FORM — the navy page hero
==================================================*/

.page-banner[data-banner]{

position:relative;

background-color:#081A33;

background-image:
linear-gradient(
180deg,
rgba(8,26,51,.0) 55%,
rgba(8,26,51,.45) 100%),
linear-gradient(
135deg,
rgba(8,26,51,.92) 0%,
rgba(12,36,66,.86) 55%,
rgba(19,58,99,.80) 100%),
var(--banner-img);

background-size:auto, auto, cover;

background-position:center, center, var(--banner-pos, center);

background-repeat:no-repeat;

/* a thin gold rule: the same finish under every section header */
box-shadow:inset 0 -3px 0 rgba(201,162,39,.55);

}

/* The courthouse is bright marble and sky: a little more shade */

.page-banner[data-banner="wire"]{

background-image:
linear-gradient(
180deg,
rgba(8,26,51,.0) 55%,
rgba(8,26,51,.45) 100%),
linear-gradient(
135deg,
rgba(8,26,51,.93) 0%,
rgba(12,36,66,.89) 55%,
rgba(19,58,99,.84) 100%),
var(--banner-img);

}


/*==================================================
LIGHT FORM — the parchment LawLookup app
The band sits behind the top of the page (under the fixed
header) and fades into the parchment page colour.
==================================================*/

.page-banner-wash[data-banner]::before{

content:"";

/* the initial containing block: full width, top of the document */
position:absolute;

top:0;

left:0;

right:0;

height:min(560px, 92vh);

/* above the page colour (painted on the canvas), below all content */
z-index:-1;

pointer-events:none;

background-image:
linear-gradient(
180deg,
rgba(246,241,231,.86) 0%,
rgba(246,241,231,.89) 45%,
rgba(246,241,231,1) 100%),
var(--banner-img);

background-size:auto, cover;

background-position:center, var(--banner-pos, center);

background-repeat:no-repeat;

}


/* Over the wash, LawLookup's brass accent (#b0812f) is too light for
   small text; its page header uses a deeper brass instead (≥ 4.5:1). */

.page-banner-wash[data-banner] .hero,
.page-banner-wash[data-banner] .statute-header{

--brass:#74521a;

}


/*==================================================
PRINT — no photographs on paper
==================================================*/

@media print{

.page-banner[data-banner]{

background-image:none;

box-shadow:none;

}

.page-banner-wash[data-banner]::before{

display:none;

}

}