/* sentiko.css
   Page-specific accent override for sentiko.html.
   Base styles are loaded from spaces.css. This file only redefines the
   accent color used by .nav-item.active (and any other rules that pull
   from --primary) so the Sentiko page reads in its own palette
   (#C71585, per D-001 ikonoworld design system).
*/

body.page-sentiko {
  --primary: #C71585;
  --bg-color: #1A0612;
  background-color: #1A0612;
}

/* Bug 1 fix (Iris, 2026-06-01): spaces.css loads before sentiko.css and
   paints .navbar::before as a yellow to pink gradient (Spaces pillar). The
   Sentiko page must paint its own pillar gradient (magenta to plum) on the
   navbar pill border. Override here. Order of color stops mirrors the
   per-page meditation pill convention (lifted from index.html section-5 +
   meditation top-nav-logo).
*/
body.page-sentiko .navbar::before {
  background: linear-gradient(192deg, #C71585 26%, #3B1530 89%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

body.page-sentiko .nav-item.active {
  background-color: var(--primary);
  color: #ffffff;
}

/* Sentiko page nav. All 5 items in a neutral off-white; only the active
   Sentiko item carries the magenta highlight. Per-item pillar colors put
   TV's pink in the leftmost slot, which dominated the read. Active-only
   color keeps the page signal clean. 2026-06-01, per Elizabeth's call.
*/
body.page-sentiko .nav-item a {
  color: #FFF8EB;
}
body.page-sentiko .nav-item.active a {
  color: #FFFFFF;
}

/* Hero background (section-6).
   Lifted from index.html inline <style> for section-6, adapted for the
   standalone Sentiko page: full-bleed hero (no paired-row tile crop,
   no 144px outer margin, no 64px border-radius). The sentiko-bg.png still
   paints the background via .bgImageOnly background-image.
   These rules override spaces.css .bgImageOnly (which paints the Spaces
   lobby wall) by specificity (.section-6 .bgImageOnly) and !important
   on the background-image swap.
*/
.section-6 {
  position: relative;
  height: auto;
  overflow: hidden;
  /* Neutralize the home-page paired-row offset baked into spaces.css
     (.section-6 { margin-top: 357px } on line 1269). On the standalone
     Sentiko page the hero must sit flush under the absolute-positioned
     header, not 357px below it. Without this override the entire hero,
     including the absolutely-positioned .streamBottom copy card pinned
     to its bottom, is pushed 357px below body top, producing the empty
     black band above the flowers and pushing the copy card off-screen.
  */
  margin-top: 0 !important;
  min-height: 100vh;
}

/* Same neutralization at every responsive breakpoint. spaces.css and
   responsive.css redeclare .section-6 margin-top at 200px (max-width:1870)
   and 347px (deeper breakpoint). All must collapse to 0 on the standalone
   hero so the flowers stay flush.
*/
@media (max-width: 1870px) {
  .section-6.sentiko-hero { margin-top: 0 !important; }
}
@media (max-width: 1200px) {
  .section-6.sentiko-hero { margin-top: 0 !important; }
}
@media (max-width: 768px) {
  .section-6.sentiko-hero { margin-top: 0 !important; }
}

/* Ensure the hero's flex/relative parent .bgImg actually fills the
   viewport so the cover-sized background paints the full hero, and so
   the absolutely-positioned .streamBottom card has a tall enough
   positioned ancestor to sit pinned at the bottom of the viewport.
*/
.section-6.sentiko-hero .bgImg {
  position: relative;
  min-height: 100vh;
  width: 100%;
}

/* Suppress the topShadowImage globally on the Sentiko page: spaces.css
   paints it as a 240px-tall lobby-vignette SVG anchored to body top with
   z-index: 2, which on Sentiko would tint the flowers with a Spaces-brown
   gradient. The Sentiko hero is its own composition.
*/
body.page-sentiko .topShadowImage { display: none; }

body.page-sentiko .section-6 { margin-top: 0 !important; }

/* Header Get in Touch button: override Spaces yellow with Sentiko magenta. */
body.page-sentiko .getInTouch {
  background-color: #C71585 !important;
  color: #FFFFFF !important;
}
body.page-sentiko .gradientBorder {
  background: linear-gradient(192deg, #C71585 26%, #3B1530 89%) !important;
  box-shadow: 1px 1px 5px 0 rgba(199, 21, 133, 0.60) !important;
}

/* Footer: override Spaces yellow gradients with Sentiko aubergine + magenta. */
body.page-sentiko .footer-section,
body.page-sentiko .footer-gradient {
  background: #1A0612 !important;
}
body.page-sentiko .footer-gradient::before {
  background: linear-gradient(233.53deg, #3B1530 11.3%, #C71585 141.56%) !important;
}
body.page-sentiko .footer-divider::before {
  background: linear-gradient(230.12deg, #3B1530 24.68%, #C71585 112.86%) !important;
}

.section-6 .bgImageOnly {
  background-image: url(../Assets/sentiko-hero-museum.jpeg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.section-6 .bgImageOnly video { display: none; }
.section-6 .personImage { display: none; }
.section-6 .bottomShadowImage { display: none; }

.section-6 .artOfSlowGradientWrapper {
  box-shadow: 1px 1px 5px 0 #C7158599;
}
.section-6 .artOfSlowGradientWrapper::before {
  background: linear-gradient(192deg, #C71585 26%, #3B1530 89%);
}
.section-6 .artOfSlow span { color: #C71585; }
.section-6 .btnPrimary {
  background-color: #C71585;
  color: #FFF8EB;
  border: 1px solid rgba(199, 21, 133, 0.6);
}
.section-6 .btnPrimary::after {
  background: linear-gradient(191deg, #C71585 24.68%, #3B1530 112.86%);
}