/* =========================
   GPSHELIX Site Patch (v1)
   Purpose: universal nav/footer behaviour + anchor offset hygiene
   ========================= */

:root {
  --header-offset: 88px; /* adjust if your header is taller/shorter */
}

/* Ensure the whole brand area is clickable */
.site-header .brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
}

/* If you use any in-page anchors, prevent sticky header overlap */
[id] {
  scroll-margin-top: var(--header-offset);
}

/* Improve header readability while keeping it elegant */
.site-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Domain cards with images */
.domain-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.domain-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Resource cards */
.resource-card .text-link {
  display: inline-block;
  margin-top: 0.4rem;
}
/* === GPSHELIX PATCH: Fix Resources page inverted dark cards === */

/* 1) Make the Resources page background dark (apply to common wrappers) */
body.resources,
.page-resources,
.resources,
section.resources,
main.resources,
main .resources,
.resources-page,
.section.resources {
  background: #020b16 !important;
  color: #eaf2ff !important;
}

/* 2) Force "card" tiles back to light surface */
.resource-card,
.resources-card,
.card,
.tiles .tile,
.download-card,
a.resource-tile,
.resources .tile,
.resources .card,
.resources-grid > a,
.resources-grid > div {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #020b16 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}

/* 3) Ensure text inside the cards is readable */
.resource-card *,
.resources-card *,
.card *,
.tiles .tile *,
.download-card *,
.resources-grid > a *,
.resources-grid > div * {
  color: #020b16 !important;
}

/* 4) Keep links readable inside cards */
.resource-card a,
.resources-card a,
.card a,
.download-card a,
.resources-grid a {
  color: #0077ff !important;
}
/* === GPSHELIX PATCH: Fix Resources page inverted dark cards === */

/* 1) Make the Resources page background dark (apply to common wrappers) */
body.resources,
.page-resources,
.resources,
section.resources,
main.resources,
main .resources,
.resources-page,
.section.resources {
  background: #020b16 !important;
  color: #eaf2ff !important;
}

/* 2) Force "card" tiles back to light surface */
.resource-card,
.resources-card,
.card,
.tiles .tile,
.download-card,
a.resource-tile,
.resources .tile,
.resources .card,
.resources-grid > a,
.resources-grid > div {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #020b16 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}

/* 3) Ensure text inside the cards is readable */
.resource-card *,
.resources-card *,
.card *,
.tiles .tile *,
.download-card *,
.resources-grid > a *,
.resources-grid > div * {
  color: #020b16 !important;
}

/* 4) Keep links readable inside cards */
.resource-card a,
.resources-card a,
.card a,
.download-card a,
.resources-grid a {
  color: #0077ff !important;
}
/* === RESOURCES PAGE ONLY (scoped, safe) === */

.page-resources {
  background: #020b16;
  color: #eaf2ff;
}

.page-resources .resource-card,
.page-resources .download-card,
.page-resources .card {
  background: #ffffff;
  color: #020b16;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.page-resources .resource-card *,
.page-resources .download-card *,
.page-resources .card * {
  color: #020b16;
}

.page-resources a {
  color: #0077ff;
}
/* Mobile hardening */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  /* Make common containers full-width */
  main, section, header, footer, .container {
    max-width: 100%;
  }

  /* Reduce oversized headings */
  h1 {
    font-size: clamp(32px, 8vw, 48px);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  /* If you have any sidebar/2-col layouts, force stacking */
  .layout, .grid, .columns, .row {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  /* Images should not force horizontal scroll */
  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }
}