/* Spring of Hope Choir BRICOSS — balanced green/white app polish v2
   Green remains the dominant identity. White is used only for selected cards
   and content surfaces to create contrast and a cleaner premium look.
*/

:root{
  --soh-ui-green-950:#022b22;
  --soh-ui-green-900:#03382b;
  --soh-ui-green-850:#064634;
  --soh-ui-green-800:#07533e;
  --soh-ui-green-700:#0a684d;
  --soh-ui-gold:#e8b53c;
  --soh-ui-gold-2:#ffd86f;
  --soh-ui-white:#ffffff;
  --soh-ui-cream:#fff9e8;
  --soh-ui-light:#f5f8f6;
  --soh-ui-ink:#17382e;
  --soh-ui-muted:#6c7c76;
  --soh-ui-border:rgba(255,255,255,.14);
  --soh-ui-shadow:0 12px 30px rgba(0,0,0,.16);
}

/* Keep app environment green */
html:has(body.sohapp-body){background:var(--soh-ui-green-950)!important}

body.sohapp-body{
  color:#f8fffb!important;
  background:
    radial-gradient(circle at 12% -4%,rgba(232,181,60,.17),transparent 25rem),
    radial-gradient(circle at 90% 18%,rgba(21,132,96,.22),transparent 27rem),
    linear-gradient(160deg,#022f25 0%,#054534 48%,#022a21 100%)!important;
}

/* Keep subtle background texture */
body.sohapp-body .sohapp-bg{
  display:block!important;
  opacity:.42;
}

/* Branded top bar */
body.sohapp-body .sohapp-topbar{
  background:linear-gradient(to bottom,rgba(2,43,34,.99),rgba(3,56,43,.93) 78%,rgba(3,56,43,.08))!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 7px 22px rgba(0,0,0,.16)!important;
}
body.sohapp-body .sohapp-brand strong{color:#fff!important}
body.sohapp-body .sohapp-brand small{color:var(--soh-ui-gold-2)!important}
body.sohapp-body .sohapp-icon-btn{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.16)!important;
}
body.sohapp-body .sohapp-icon-btn:hover,
body.sohapp-body .sohapp-icon-btn:focus-visible{
  background:var(--soh-ui-gold)!important;
  color:#14362a!important;
}

/* Main text remains light on green */
body.sohapp-body .sohapp-page-title h1,
body.sohapp-body .sohapp-kicker,
body.sohapp-body .sohapp-section-head h2{color:#fff!important}

body.sohapp-body .sohapp-page-title p,
body.sohapp-body .sohapp-welcome h1,
body.sohapp-body .sohapp-section-head p{color:var(--soh-ui-gold-2)!important}

body.sohapp-body .sohapp-page-title span,
body.sohapp-body .sohapp-section-head>a,
body.sohapp-body .sohapp-motto{color:#cfe0d9!important}

/* Do NOT turn every section white.
   Most sections stay green-glass, with only selected cards white. */
body.sohapp-body .sohapp-main>.sohapp-section:not(.sohapp-social-promo):not(.sohapp-newsletter){
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:22px!important;
  padding:15px!important;
  box-shadow:0 12px 28px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(8px);
}

/* Featured hero stays strongly branded */
body.sohapp-body .sohapp-featured{
  border-color:rgba(255,255,255,.15)!important;
  background:
    linear-gradient(112deg,rgba(1,38,29,.99) 4%,rgba(5,75,56,.92) 52%,rgba(5,75,56,.20) 78%),
    radial-gradient(circle at 82% 18%,rgba(242,189,69,.32),transparent 22rem)!important;
}
body.sohapp-body .sohapp-featured h2,
body.sohapp-body .sohapp-featured p{color:#fff!important}
body.sohapp-body .sohapp-featured .sohapp-label{color:var(--soh-ui-gold-2)!important}

/* Featured/song artwork keeps green framing */
body.sohapp-body .sohapp-song-art{
  background:#0a4937!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.17)!important;
}
body.sohapp-body .sohapp-song-card-row h3{color:#fff!important}
body.sohapp-body .sohapp-song-card-row p{color:#b9d0c6!important}
body.sohapp-body .sohapp-song-stat{color:#9ec5b5!important}
body.sohapp-body .sohapp-more-btn{color:#e8f3ee!important}
body.sohapp-body .sohapp-more-btn:hover{background:rgba(255,255,255,.09)!important}

/* Use white selectively for list/action cards */
body.sohapp-body .sohapp-info-card,
body.sohapp-body .sohapp-action-card,
body.sohapp-body .sohapp-list-row,
body.sohapp-body .sohapp-profile,
body.sohapp-body .sohapp-state,
body.sohapp-body .sohapp-event-card{
  color:var(--soh-ui-ink)!important;
  background:rgba(255,255,255,.97)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.09)!important;
}

body.sohapp-body .sohapp-info-card strong,
body.sohapp-body .sohapp-action-card strong,
body.sohapp-body .sohapp-list-row h3,
body.sohapp-body .sohapp-profile h2,
body.sohapp-body .sohapp-event-card h3{color:var(--soh-ui-ink)!important}

body.sohapp-body .sohapp-info-card small,
body.sohapp-body .sohapp-action-card small,
body.sohapp-body .sohapp-list-row p,
body.sohapp-body .sohapp-profile p,
body.sohapp-body .sohapp-state span,
body.sohapp-body .sohapp-event-card p{color:var(--soh-ui-muted)!important}

body.sohapp-body .sohapp-event-date{
  color:var(--soh-ui-green-900)!important;
  background:var(--soh-ui-cream)!important;
  border:1px solid #efdda8!important;
}

/* Album/action tiles: mixed treatment */
body.sohapp-body .sohapp-card-grid .sohapp-action-card:nth-child(odd),
body.sohapp-body .sohapp-card-grid .sohapp-info-card:nth-child(odd){
  background:linear-gradient(145deg,#0a5a43,#064434)!important;
  border-color:rgba(255,255,255,.13)!important;
  color:#fff!important;
}
body.sohapp-body .sohapp-card-grid .sohapp-action-card:nth-child(odd) strong,
body.sohapp-body .sohapp-card-grid .sohapp-info-card:nth-child(odd) strong{color:#fff!important}
body.sohapp-body .sohapp-card-grid .sohapp-action-card:nth-child(odd) small,
body.sohapp-body .sohapp-card-grid .sohapp-info-card:nth-child(odd) small{color:#c9ddd5!important}

/* Tabs */
body.sohapp-body .sohapp-tab{
  color:#eaf5f0!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(255,255,255,.15)!important;
}
body.sohapp-body .sohapp-tab.active{
  color:#17382e!important;
  background:var(--soh-ui-gold)!important;
  border-color:transparent!important;
}

/* Search + forms use white inputs for readability */
body.sohapp-body .sohapp-search input,
body.sohapp-body .sohapp-form input,
body.sohapp-body .sohapp-form select{
  color:var(--soh-ui-ink)!important;
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(255,255,255,.72)!important;
}
body.sohapp-body .sohapp-mini-btn{
  color:#fff!important;
  background:#0b6047!important;
  border-color:rgba(255,255,255,.12)!important;
}

/* Social promotion: green section with white individual buttons/cards */
body.sohapp-body .sohapp-social-promo{
  color:#fff!important;
  background:linear-gradient(145deg,#07533e,#04382b)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:22px!important;
  padding:18px!important;
  box-shadow:var(--soh-ui-shadow)!important;
}
body.sohapp-body .sohapp-social-promo h2,
body.sohapp-body .sohapp-social-promo h3{color:#fff!important}
body.sohapp-body .sohapp-social-grid a{
  color:var(--soh-ui-ink)!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.75)!important;
}
body.sohapp-body .sohapp-social-grid small{color:var(--soh-ui-muted)!important}
body.sohapp-body .sohapp-social-grid b{
  color:var(--soh-ui-green-900)!important;
  background:var(--soh-ui-cream)!important;
}

/* Newsletter remains gold for variety */
body.sohapp-body .sohapp-newsletter{
  color:var(--soh-ui-ink)!important;
  background:linear-gradient(135deg,#e8b53c,#ffd86f)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.12)!important;
}

/* Bottom nav stays green */
body.sohapp-body .sohapp-bottom-nav{
  background:rgba(2,43,34,.985)!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 -8px 28px rgba(0,0,0,.18)!important;
}
body.sohapp-body .sohapp-bottom-nav a{color:#bdd2c9!important}
body.sohapp-body .sohapp-bottom-nav a.active{
  color:#ffd86f!important;
  background:rgba(255,255,255,.06)!important;
}

/* App sheet: mostly green with selected white actions */
body.sohapp-body .sohapp-sheet-card{
  color:#fff!important;
  background:linear-gradient(160deg,#064634,#022f25)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}
body.sohapp-body .sohapp-sheet-actions a,
body.sohapp-body .sohapp-sheet-actions button{
  color:var(--soh-ui-ink)!important;
  background:#fff!important;
  border-color:#e0e7e3!important;
}

/* Public pages shown inside installed app/TWA */
@media (display-mode:standalone){
  body.soh-app-mode{
    color:#fff!important;
    background:
      radial-gradient(circle at 90% 10%,rgba(232,181,60,.10),transparent 20rem),
      linear-gradient(160deg,#022f25,#054534 50%,#022a21)!important;
  }
  body.soh-app-mode .album-page-main{
    background:linear-gradient(180deg,#043b2e,#032e24)!important;
  }
}

/* Phone spacing */
@media(max-width:700px){
  body.sohapp-body .sohapp-shell{padding-inline:12px!important}
  body.sohapp-body .sohapp-main{gap:17px!important}
  body.sohapp-body .sohapp-main>.sohapp-section:not(.sohapp-social-promo):not(.sohapp-newsletter){
    padding:13px!important;
    border-radius:19px!important;
  }
}