/* ===================================================================
   Aurora — a theme drawn from the iPhone lock-screen wallpaper.

   Every colour below is sampled from that image: the honey glow at the
   left edge, the rose-gold numerals, the champagne ridges, the cocoa
   shadow under them and the plum-navy that the whole thing sinks into.

   This file carries the texture: the silk gradients, the glass and the
   shadows. The flat brand colours it works with are set in the dashboard.
   =================================================================== */

:root{
  /* --- sampled from the wallpaper -------------------------------- */
  --aur-honey:      #ba8b53;   /* warm glow, left edge */
  --aur-bronze:     #a87a41;
  --aur-bronze-dp:  #8a6234;
  --aur-rosegold:   #bda58d;   /* the clock numerals */
  --aur-champagne:  #b4a292;   /* lit ridge */
  --aur-sand:       #998c83;   /* mid tone */
  --aur-pearl:      #d6d1cb;   /* brightest highlight */
  --aur-cocoa:      #4e3c30;   /* shadow under the curves */
  --aur-plum:       #15121d;   /* deepest ground */
  --aur-slate:      #3a3c50;   /* cool lower third */
  --aur-mist:       #8c909e;   /* cool silver-blue */

  /* The brand colours themselves live in Dashboard > Appearance, seeded
     from this same palette, so they stay editable. Only the tokens the
     effects below need are kept here. */
  --aur-glass: rgba(255,255,255,.16);
  --aur-glass-line: rgba(255,255,255,.28);
  --aur-shadow: 0 18px 48px -22px rgba(78,60,48,.45);
}

/* ------------------------------------------------------------------
   The silk. Layered soft gradients that read as folded fabric rather
   than flat colour — the same move the wallpaper makes.
   ------------------------------------------------------------------ */
.aur-silk,
.detail-hero,
.page-banner,
.site-footer,
.section.bg-dark{
  position:relative;
  background-color:var(--aur-plum);
  background-image:
    radial-gradient(120% 90% at 8% 12%,  rgba(186,139,83,.55) 0%, rgba(186,139,83,0) 58%),
    radial-gradient(90% 70% at 88% 4%,   rgba(214,209,203,.30) 0%, rgba(214,209,203,0) 55%),
    radial-gradient(130% 80% at 62% 44%, rgba(180,162,146,.34) 0%, rgba(180,162,146,0) 62%),
    radial-gradient(100% 70% at 18% 82%, rgba(58,60,80,.75)   0%, rgba(58,60,80,0)   60%),
    radial-gradient(120% 90% at 95% 96%, rgba(140,144,158,.34) 0%, rgba(140,144,158,0) 58%),
    linear-gradient(168deg, #241b23 0%, #3a2c26 34%, #2a2533 66%, #15121d 100%);
  background-attachment:scroll;
  color:var(--aur-pearl);
}

/* Two hairline ridges, like the lit edges of the folds. */
.aur-silk::after,
.detail-hero::after,
.page-banner::after,
.site-footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 120% at 30% 118%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(70% 140% at 78% -22%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 44%);
  mix-blend-mode:screen;opacity:.9;
}
.detail-hero > *,
.page-banner > *,
.site-footer > *{position:relative;z-index:1}

.detail-hero,
.page-banner{background-blend-mode:normal}

/* A project cover still shows through — the silk sits under it as tint. */
.detail-hero[style*="background-image"]{
  background-blend-mode:luminosity, normal, normal, normal, normal, normal;
}

/* Page body picks up the warm pearl with the faintest wash of the same
   palette, so white cards sit on something rather than nothing. */
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(70% 45% at 4% 0%,   rgba(186,139,83,.13) 0%, rgba(186,139,83,0) 60%),
    radial-gradient(60% 40% at 100% 8%, rgba(140,144,158,.12) 0%, rgba(140,144,158,0) 58%);
  background-attachment:fixed;
}

/* ------------------------------------------------------------------
   Glass. The lock screen's torch and camera buttons: a translucent
   disc, a bright hairline, a soft blur of whatever is behind.
   ------------------------------------------------------------------ */
.site-header{
  background:rgba(247,243,236,.62)!important;
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(233,224,210,.7);
}
body.has-hero .site-header:not(.is-stuck){
  background:rgba(21,18,29,.28)!important;
  border-bottom-color:rgba(255,255,255,.14);
}

.btn,
.pill,
.chip,
.country-chips a,
.dev-chip,
.lang-switch,
select,
.field,
input[type="text"],input[type="email"],input[type="search"]{
  border-radius:999px;
}
.field,select,input[type="text"],input[type="email"],input[type="search"],textarea{
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(233,224,210,.9);
  backdrop-filter:blur(8px);
}
textarea{border-radius:18px}

.btn-primary{
  background:linear-gradient(140deg, var(--aur-honey) 0%, var(--aur-bronze) 46%, var(--aur-bronze-dp) 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 26px -12px rgba(168,122,65,.75),
             inset 0 1px 0 rgba(255,255,255,.34);
  color:#fff;
}
.btn-primary:hover{
  filter:brightness(1.06);
  box-shadow:0 14px 34px -12px rgba(168,122,65,.85),
             inset 0 1px 0 rgba(255,255,255,.42);
}

.btn-ghost{
  background:var(--aur-glass);
  border:1px solid var(--aur-glass-line);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
}
.detail-hero .btn-ghost,
.page-banner .btn-ghost{color:var(--aur-pearl)}

/* ------------------------------------------------------------------
   Cards, panels, tiles — softer corners, a warm shadow instead of grey,
   and the same hairline highlight along the top edge.
   ------------------------------------------------------------------ */
.card,.panel,.dev-card,.search-card,.stat,.item-row,.gallery-item,.card-media{
  border-radius:var(--radius);
}
.card,.panel,.dev-card,.search-card{
  background:rgba(255,253,249,.86);
  border:1px solid rgba(233,224,210,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--aur-shadow);
  position:relative;
}
.card::before,.panel::before,.dev-card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 22%,
    rgba(255,255,255,.85) 78%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.card:hover,.dev-card:hover{
  box-shadow:0 26px 60px -24px rgba(78,60,48,.55);
  border-color:rgba(189,165,141,.85);
}

.badge,.badge-featured{
  background:linear-gradient(140deg, var(--aur-honey), var(--aur-bronze-dp));
  border:1px solid rgba(255,255,255,.2);
}
.badge-status{
  background:rgba(21,18,29,.55);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
}

/* Country chips pick up the rose-gold. */
.country-chips a{
  background:linear-gradient(140deg, rgba(186,139,83,.10), rgba(189,165,141,.16));
  border-color:rgba(189,165,141,.55);
}
.country-chips .cc{
  background:linear-gradient(140deg, var(--aur-honey), var(--aur-bronze-dp));
}

/* Stat band and other solid primary blocks get the folded gradient. */
.stats-band,.section.bg-primary,.cta-band{
  background-image:linear-gradient(135deg, var(--aur-bronze-dp) 0%, var(--aur-honey) 52%, #c79a63 100%);
}

/* The developer monogram well, warmed. */
.dev-logo{background:linear-gradient(150deg, rgba(186,139,83,.13), rgba(214,209,203,.5))}
.dev-monogram{color:var(--aur-bronze-dp)}

/* Footer text and links on the silk. */
.site-footer a{color:rgba(214,209,203,.82)}
.site-footer a:hover{color:#fff}
.site-footer h4,.site-footer strong{color:var(--aur-pearl)}

/* Quiet the orange link colour into bronze everywhere it appears. */
a{color:var(--primary)}
.card-price,.price-tag{color:var(--aur-bronze-dp)}

/* Gallery captions read as frosted glass over the photo. */
.gallery-caption{
  background:linear-gradient(to top, rgba(21,18,29,.82), rgba(21,18,29,0));
  backdrop-filter:blur(2px);
}

/* Selection and focus in the palette rather than browser blue. */
::selection{background:rgba(186,139,83,.28)}
:focus-visible{outline:2px solid var(--aur-bronze);outline-offset:2px}

@media (prefers-reduced-motion:no-preference){
  .btn-primary,.card,.dev-card{transition:box-shadow .35s var(--rise), filter .25s ease, border-color .35s ease}
}

/* ------------------------------------------------------------------
   Banners and heroes now sit on the silk, so their type has to be light.
   ------------------------------------------------------------------ */
.page-banner,.page-banner h1,.page-banner h2,.page-banner p,
.page-banner .lead,.page-banner .muted,
.detail-hero,.detail-hero h1,.detail-hero p,.detail-hero .lead{
  color:var(--aur-pearl);
}
.page-banner .crumbs,.detail-hero .crumbs,
.page-banner .crumbs a,.detail-hero .crumbs a{color:rgba(214,209,203,.72)}
.page-banner .crumbs a:hover,.detail-hero .crumbs a:hover{color:#fff}
.page-banner .muted,.detail-hero .muted{color:rgba(214,209,203,.7)}
.page-banner .hero-facts span,.detail-hero .hero-facts span{color:var(--aur-pearl)}

/* A cover photo keeps its detail but takes the palette's cast, so a
   grey city shot and a golden one still belong to the same site. */
.detail-hero{isolation:isolate}
.detail-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(110% 80% at 6% 10%,  rgba(186,139,83,.55) 0%, rgba(186,139,83,0) 60%),
    radial-gradient(120% 90% at 84% 92%, rgba(58,60,80,.66)   0%, rgba(58,60,80,0)   62%),
    linear-gradient(170deg, rgba(36,27,35,.42) 0%, rgba(21,18,29,.72) 100%);
  mix-blend-mode:multiply;
}
.detail-hero::after{z-index:0}

/* The brand plate over a hero reads as glass rather than a grey box. */
body.has-hero .brand-block .brand{
  background:var(--aur-glass);
  border:1px solid var(--aur-glass-line);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}