/* ============================================================================
   GLL PREMIUM — site-wide "alternation" layer.
   Loaded after gll-pages (so it wins), scoped to body:not(.default-theme) so it
   only touches the branded theme, never the raw default theme.

   Adds the premium rhythm the brand asked for:
     • whitest section backgrounds + SOFT-GREY content cards
     • a SLATE (#626769) accent for alternating premium bands
     • a reusable fading TOPOGRAPHIC wave texture (replaces grid/net textures)
   Colours are tokens only (brand grey ramp + slate). Square corners preserved.
   ============================================================================ */

body:not(.default-theme){
  --gll-slate:     #626769;
  --gll-slate-l:   #6E7376;
  --gll-slate-d:   #565B5D;
  --gll-card-grey: #FAFAFA;   /* FINAL soft card tint — barely-there off-white */
  --gll-mist-a:    #F1F5F8;   /* cool light */
  --gll-mist-b:    #FAFAFA;
  --gll-line-2:    #E4E5E5;
}

/* ---------------------------------------------------------------------------
   1. SOFT-GREY CARDS on the whitest background (site-wide)
   Only the primary CONTENT-card surfaces — never bootstrap form/dashboard cards.
   --------------------------------------------------------------------------- */
body:not(.default-theme) .card.listing-card,
body:not(.default-theme) .listing-card,
body:not(.default-theme) .glw-card,
body:not(.default-theme) .gll-ac,
body:not(.default-theme) .gll-icat__tile{
  background: var(--gll-card-grey) !important;
}
/* inner surfaces (body / footer) inherit the grey so cards read as one tile */
body:not(.default-theme) .card.listing-card .card-body,
body:not(.default-theme) .card.listing-card .card-footer,
body:not(.default-theme) .card.listing-card .card-footer.bg-light,
body:not(.default-theme) .glw-card .glw-card-body{
  background: transparent !important;
}

/* ---------------------------------------------------------------------------
   2. SLATE ACCENT BAND — utility for alternating premium sections
   Apply .gll-band-slate to any full-width dark band to reslate + texture it.
   --------------------------------------------------------------------------- */
body:not(.default-theme) .gll-band-slate{
  position: relative;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(184,146,42,0.15) 0%, rgba(184,146,42,0) 48%),
    linear-gradient(165deg, var(--gll-slate-l) 0%, var(--gll-slate) 46%, var(--gll-slate-d) 100%) !important;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   3. FADING TOPOGRAPHIC WAVE TEXTURE — reusable
   Add .gll-topo to an element (or it is auto-applied on .gll-band-slate) to lay
   subtle white contour waves that gradually fade to transparent.
   --------------------------------------------------------------------------- */
body:not(.default-theme) .gll-band-slate::after,
body:not(.default-theme) .gll-topo::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M0 20 Q60 6 120 20 T240 20'/%3E%3Cpath d='M0 60 Q60 46 120 60 T240 60'/%3E%3Cpath d='M0 100 Q60 84 120 100 T240 100'/%3E%3Cpath d='M0 140 Q60 126 120 140 T240 140'/%3E%3Cpath d='M0 180 Q60 166 120 180 T240 180'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 200px;
  -webkit-mask-image: linear-gradient(172deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 92%);
          mask-image: linear-gradient(172deg, #000 0%, rgba(0,0,0,0.5) 52%, transparent 92%);
  pointer-events: none;
  z-index: 0;
}
/* ---------------------------------------------------------------------------
   4. LIGHT PREMIUM BANDS — cool mist gradient + seamless white blend
   --------------------------------------------------------------------------- */
body:not(.default-theme) .gll-band-mist{
  position: relative;
  background: linear-gradient(180deg, var(--gll-mist-a) 0%, var(--gll-mist-b) 100%) !important;
  overflow: hidden;
}
body:not(.default-theme) .gll-band-seam{
  position: relative;
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%) !important;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   5. TEXTURE VARIETY (mix across blocks) — INK strokes for LIGHT bands.
   Waves, curved contours, and a fine check — each fades gradually to nothing.
   --------------------------------------------------------------------------- */
body:not(.default-theme) .gll-topo-ink::after,
body:not(.default-theme) .gll-curve-ink::after,
body:not(.default-theme) .gll-check-ink::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  -webkit-mask-image: linear-gradient(168deg, #000 0%, rgba(0,0,0,0.45) 55%, transparent 92%);
          mask-image: linear-gradient(168deg, #000 0%, rgba(0,0,0,0.45) 55%, transparent 92%);
}
/* waves */
body:not(.default-theme) .gll-topo-ink::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='200' viewBox='0 0 240 200'%3E%3Cg fill='none' stroke='%231f1f1f' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 20 Q60 6 120 20 T240 20'/%3E%3Cpath d='M0 60 Q60 46 120 60 T240 60'/%3E%3Cpath d='M0 100 Q60 84 120 100 T240 100'/%3E%3Cpath d='M0 140 Q60 126 120 140 T240 140'/%3E%3Cpath d='M0 180 Q60 166 120 180 T240 180'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 200px;
}
/* curved contours that run over the block */
body:not(.default-theme) .gll-curve-ink::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240' viewBox='0 0 320 240'%3E%3Cg fill='none' stroke='%231f1f1f' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M-20 70 C70 10 130 120 210 70 S330 20 360 100'/%3E%3Cpath d='M-20 130 C70 70 130 180 210 130 S330 80 360 160'/%3E%3Cpath d='M-20 190 C70 130 130 240 210 190 S330 140 360 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 240px;
}
/* fine check / grid */
body:not(.default-theme) .gll-check-ink::after{
  background-image:
    linear-gradient(rgba(31,31,31,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,31,31,0.035) 1px, transparent 1px);
  background-size: 58px 58px;
}
/* content always rides above every texture */
body:not(.default-theme) .gll-band-slate > *,
body:not(.default-theme) .gll-band-mist > *,
body:not(.default-theme) .gll-band-seam > *,
body:not(.default-theme) .gll-topo > *,
body:not(.default-theme) .gll-topo-ink > *,
body:not(.default-theme) .gll-curve-ink > *,
body:not(.default-theme) .gll-check-ink > *{ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  /* textures are static; nothing to disable, kept for parity */
}