/* Greyharbor — Kingdom-specific styling
   This file controls:
   - Page-level background tweaks (if needed)
   - Card colors and border accents
   - Banner image / gradient overrides
   - Hover / active flavors unique to this realm
*/

/* =========================================
   Greyharbor — Single-column detail grid
   Mirrors havens-crest.css behavior:
   force 1-column card flow on Greyharbor detail pages.
   ========================================= */

body.lw-site.world-rhome.atlas-page.kingdom-page.town-page.greyharbor-page .home-grid {
  grid-template-columns: minmax(0, 1fr);
}

body.lw-site.world-rhome.atlas-page.kingdom-page.town-page.greyharbor-page.greyharbor-index-page .home-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* =========================================
   Greyharbor — Local palette tokens
   Wind-lashed slate, iron salt, lantern-glow teal.
   ========================================= */

body.lw-site.world-rhome.greyharbor-page {
  --greyharbor-accent:      #79cfd0;             /* lantern-glow sea-teal */
  --greyharbor-accent-soft: rgba(121, 207, 208, 0.22);
  --greyharbor-outline:     rgba(121, 207, 208, 0.75);

  /* Realm shell overrides (used by layout-lorewalker.css) */
  --shell-border: var(--greyharbor-outline);
  --shell-glow:   rgba(121, 207, 208, 0.18);
  --hero-accent:  var(--greyharbor-outline);

  --nav-active-border: var(--greyharbor-outline);
  --nav-active-bg:     rgba(20, 34, 44, 0.78);  /* storm-slate wash */
  --nav-active-text:   var(--rhome-parchment);
}

/* =========================================
   Greyharbor — Page background refinement
   Keep subtle: fog + cold sea glow.
   ========================================= */

body.lw-site.world-rhome.greyharbor-page {
  background-image:
    radial-gradient(circle at 0 0, rgba(121, 207, 208, 0.10), transparent 58%),
    radial-gradient(circle at 100% 100%, rgba(127, 199, 255, 0.06), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(213, 128, 255, 0.06), transparent 56%),
    radial-gradient(circle at 0 100%, rgba(0, 0, 0, 0.12), transparent 60%),
    linear-gradient(to bottom, #05030a, #080412, #06030e);
}

/* =========================================
   Greyharbor — Banner overrides
   (No image required; gradient does the work.)
   ========================================= */

body.lw-site.world-rhome.greyharbor-page .home-banner {
  background:
    radial-gradient(circle at top left,
      rgba(121, 207, 208, 0.24),
      rgba(7, 5, 16, 0.95)
    );
}

/* Optional: if you later add a realm banner image, uncomment.
body.lw-site.world-rhome.greyharbor-page .home-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/banners/greyharbor.jpg") center/cover no-repeat;
  opacity: 0.22;
  filter: saturate(0.85) contrast(1.05);
}
*/

/* =========================================
   Greyharbor — Card accents
   Works with your existing .home-card system.
   ========================================= */

body.lw-site.world-rhome.greyharbor-page .home-card {
  --card-accent-bg:   var(--greyharbor-accent-soft);
  --card-accent-text: var(--rhome-parchment);
  --card-border:      var(--greyharbor-outline);
}

/* Hover flavor: cold lantern sheen (subtle, tight) */
body.lw-site.world-rhome.greyharbor-page .home-card:hover,
body.lw-site.world-rhome.greyharbor-page .home-card:focus-visible {
  border-color: rgba(121, 207, 208, 0.92);
  box-shadow:
    0 0.25rem 0.6rem rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(121, 207, 208, 0.10);
}

/* =========================================
   Optional: If you use realm-specific card classes on index pages
   (mirrors theme-rhome.css “.card-havens-crest” pattern)
   ========================================= */

.card-greyharbor {
  --card-accent-bg:   var(--greyharbor-accent-soft);
  --card-accent-text: var(--rhome-parchment);
  --card-border:      var(--greyharbor-outline);
}