/* =========================================================
   TMMA COLOR TEST — OPTION 1: FRESH MOUNTAIN CLASSIC
   Sage-led, calm, closest to the current website structure.

   Brand rule:
   The six Traverse Mountain colors are the official brand palette.
   Website interface colors may use approved tints and shades derived
   from Copper, Sage, and Stone for accessibility, hover states,
   borders, and section contrast.

   The original six colors should remain the primary reference colors
   and should be used for major brand applications.

   Paste this AFTER the main website stylesheet.
========================================================= */

:root {
  /* =========================================================
     OFFICIAL TRAVERSE MOUNTAIN BRAND PALETTE
     Use these exact colors for primary brand applications.
  ========================================================= */

  --tmma-oat-milk: #D3C7B8;
  --tmma-copper: #B06D2A;
  --tmma-black: #000000;
  --tmma-mint: #D9E5D7;
  --tmma-sage: #738A6E;
  --tmma-stone: #97A09D;


  /* =========================================================
     WEBSITE SUPPORT RAMP — COPPER
     Derived from #B06D2A. --c50 is a light tint of Oat Milk.
     Use for buttons, links, CTAs, active states, focus rings,
     small accents, alert accents, and hover states.
  ========================================================= */

  --c50: #F0EBE3;
  --c100: #E9CFA7;
  --c200: #D8A96F;
  --c300: #C78945;
  --c400: #B06D2A;
  --c500: #B06D2A;
  --c600: #965B22;
  --c700: #7D4B1C;
  --c800: #5C3513;


  /* =========================================================
     WEBSITE SUPPORT RAMP — SAGE
     Derived from #738A6E.
     Use for nav, footer, hero overlays, panel headers,
     section headers, and green hover/focus states.
  ========================================================= */

  --p50: #EEF4EC;
  --p100: #D9E5D7;
  --p200: #B8C9B4;
  --p300: #97AE92;
  --p400: #738A6E;
  --p500: #738A6E;
  --p600: #5B7056;
  --p700: #3F533D;
  --p800: #263C25;


  /* =========================================================
     WEBSITE SUPPORT RAMP — STONE
     Derived from #97A09D.
     Use for page backgrounds, borders, muted text, dividers,
     inputs, cards, captions, and neutral interface elements.
  ========================================================= */

  --s50: #F8F6F1;
  --s100: #E4E8E2;
  --s200: #C7D0C4;
  --s300: #97A09D;
  --s400: #7F8985;
  --s500: #59625E;
  --s600: #3F4844;
  --s700: #252B28;
  --s800: #111412;


  /* =========================================================
     SEMANTIC TOKENS
  ========================================================= */

  --ch: var(--tmma-black);

  /* Semantic status colors */
  --r: #8F2F24;        /* deeper red, use only for true errors/urgent warnings */
  --info: var(--tmma-sage);

  --ok: var(--tmma-sage);
  --warn: var(--tmma-copper);
  --risk: #8F2F24;

  /* Emergency/contact emphasis */
  --emergency-bg: var(--p700);
  --emergency-border: var(--p600);
  --emergency-text: #fff;
  --emergency-accent: var(--tmma-mint);
}


/* =========================================================
   TYPOGRAPHY
   Keep existing website font: Lato.
========================================================= */

body,
button,
input,
select,
textarea {
  font-family: 'Lato', Arial, sans-serif;
}


/* =========================================================
   OVERALL PAGE
========================================================= */

body {
  background: var(--s50);
  color: var(--ch);
}

.site {
  background: #fff;
}


/* =========================================================
   ALERT
========================================================= */

.alert {
  background: var(--tmma-oat-milk);
  border-bottom-color: rgba(176, 109, 42, 0.22);
  color: var(--c800);
}

.alert .dot {
  background-color: var(--tmma-copper);
}

.alert a,
.alert .x {
  color: var(--tmma-copper);
}


/* =========================================================
   TOP BAR
========================================================= */

.top {
  background: #fff;
  border-bottom-color: rgba(151, 160, 157, 0.35);
}

.logo-text {
  color: var(--tmma-black);
}

.logo-sub,
.top-phone {
  color: var(--s400);
}

.soc {
  background: var(--s50);
  border-color: rgba(151, 160, 157, 0.32);
  color: var(--s400);
}

.soc:hover {
  background: var(--tmma-mint);
  color: var(--tmma-sage);
  border-color: var(--tmma-sage);
}


/* =========================================================
   NAVIGATION
========================================================= */

nav.main,
.hamburger,
.chatbot-fab,
.chat-head,
.chat-input-row button,
.cal-nav,
.yag-head,
.events-header {
  background: var(--tmma-sage);
}

nav.main .nav-link {
  color: rgba(255, 255, 255, 0.88);
}

nav.main .nav-link:hover,
nav.main .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

nav.main .nav-link.active {
  border-bottom-color: var(--tmma-copper);
}

.nav-link-staff {
  color: var(--tmma-oat-milk) !important;
}

.dropdown a:hover,
.mobile-menu .mm-sub a:hover,
.doc-item:hover,
.faq-q:hover,
.acc-head:hover,
.qa-card:hover {
  background: var(--tmma-mint);
  color: var(--p700);
}


/* =========================================================
   HERO
========================================================= */

.hero {
  background:
    linear-gradient(rgba(63, 83, 61, 0.72), rgba(63, 83, 61, 0.58)),
    url('/uploads/tmma-03.jpg') center/cover no-repeat;
}

.page-hero {
  background: linear-gradient(135deg, var(--tmma-sage), var(--p700));
}

.hero-rule span,
.page-hero .breadcrumb a {
  color: var(--tmma-copper);
}

.hero-rule .line {
  background-color: var(--tmma-copper);
}


/* =========================================================
   BUTTONS
========================================================= */

.btn-copper,
.login-btn {
  background: var(--tmma-copper);
  color: #fff;
}

.btn-copper:hover,
.login-btn:hover {
  background: var(--c600);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

.btn-sage {
  padding: 13px 30px;
  border-radius: 6px;
  background: var(--tmma-sage);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  border: 1.5px solid var(--tmma-sage);
  cursor: pointer;
  transition: .15s;
}

.btn-sage:hover {
  background: var(--p700);
  border-color: var(--p700);
}

.btn-sage:active {
  opacity: .82;
  transform: scale(.99);
}


/* =========================================================
   CARDS AND SECTIONS
========================================================= */

.qa-grid {
  background: var(--s50);
}

.qa-card,
.news-card,
.info-card,
.act-card,
.team-card,
.events-panel,
.contact-card,
.doc-list,
.hours-block,
.amen-card,
.amen-detail-panel,
.faq-list,
.acc-group {
  border-color: rgba(151, 160, 157, 0.34);
}

.news-card,
.qa-card,
.info-card,
.team-card,
.amen-card {
  background: #fff;
}

.qa-card:hover {
  background: var(--tmma-mint);
}

.news-card:hover,
.info-card:hover,
.team-card:hover,
.amen-card:hover {
  box-shadow: 0 16px 40px rgba(37, 43, 40, 0.12);
}

.act-card:hover {
  background: var(--tmma-oat-milk);
  border-color: var(--tmma-copper);
}

.about-card {
  background: linear-gradient(135deg, var(--tmma-oat-milk), #fff);
  border-color: rgba(176, 109, 42, 0.22);
}

.about-card h3,
.news-body .cta,
.info-card .ic-body a,
.section-header .more,
.team-card a,
.link {
  color: var(--tmma-copper);
}

.about-card h3:hover,
.news-body .cta:hover,
.info-card .ic-body a:hover,
.section-header .more:hover,
.team-card a:hover,
.link:hover {
  color: var(--c600);
}

.contact-card h3,
.page-body h3,
.sm-section-head,
.cal-month-head {
  color: var(--p700);
}


/* =========================================================
   INFO CARD HEADERS
========================================================= */

.info-card .ic-head {
  background: var(--tmma-sage);
}


/* =========================================================
   DOCUMENTS / LIST ITEMS
========================================================= */

.doc-item:hover {
  border-color: var(--p200);
  background: var(--tmma-mint);
}

.di-eye {
  color: var(--tmma-sage);
}

.di-eye:hover {
  background: var(--tmma-mint);
  border-color: var(--p300);
}

.di-dl-btn {
  background: var(--tmma-oat-milk);
  color: var(--c700);
}

.di-dl-btn:hover {
  background: var(--c100);
}


/* =========================================================
   FORMS
========================================================= */

input,
select,
textarea {
  border-color: var(--s500) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--tmma-sage) !important;
  box-shadow: 0 0 0 3px rgba(115, 138, 110, 0.16);
}


/* =========================================================
   TABLES
========================================================= */

.page-body table th {
  background: var(--s50);
  color: var(--ch);
}

.page-body table tbody tr:hover {
  background: var(--tmma-mint);
}

/* =========================================================
   CALENDAR / EVENTS
========================================================= */

.cal-date {
  background: var(--s50);
}

.cal-date.meeting {
  background: var(--tmma-mint);
}

.cal-date.reg {
  background: var(--tmma-oat-milk);
}

.cal-reg.required {
  background: var(--tmma-oat-milk);
  color: var(--c700);
  border-color: var(--c200);
}

.cal-reg.open {
  background: var(--tmma-mint);
  color: var(--p700);
  border-color: var(--p100);
}

/* Future event date icons: strong Sage */
#event-cal .cal-month-events .cal-event:not(.cal-past) .cal-date {
  background: var(--tmma-sage) !important;
  border: 1px solid var(--p600) !important;
  color: #fff !important;
  opacity: 1 !important;
}

#event-cal .cal-month-events .cal-event:not(.cal-past) .cal-date .cal-m,
#event-cal .cal-month-events .cal-event:not(.cal-past) .cal-date .cal-d {
  color: #fff !important;
  opacity: 1 !important;
}

/* Past event date icons: muted Sage, still readable */
#event-cal .cal-month-events .cal-event.cal-past .cal-date {
  background: var(--p100) !important;
  border: 1px solid var(--p300) !important;
  color: var(--p700) !important;
  opacity: 1 !important;
}

#event-cal .cal-month-events .cal-event.cal-past .cal-date .cal-m,
#event-cal .cal-month-events .cal-event.cal-past .cal-date .cal-d {
  color: var(--p700) !important;
  opacity: 1 !important;
}
/* =========================================================
   BADGES
========================================================= */

.badge-pine {
  background: var(--tmma-mint);
  color: var(--p700);
  border-color: var(--p100);
}

.badge-copper {
  background: var(--tmma-oat-milk);
  color: var(--c700);
  border-color: var(--c100);
}

.badge-stone {
  background: var(--s100);
  color: var(--s600);
  border-color: var(--s200);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
  background: var(--p700);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.footer-main-logo {
  display: block;
  width: min(280px, 100%);
  height: auto;
}

.footer-brand-info {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.8;
}

.footer-brand-info i {
  width: 16px;
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-brand-info-indent {
  padding-left: 24px;
}

.footer-emergency {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--emergency-bg);
  border: 1px solid var(--emergency-border);
}

.footer-emergency .fe-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: .06em;
  margin-bottom: 2px;
}

.footer-emergency .fe-num {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
}

.emergency {
  background: var(--p700);
  border-color: var(--p600);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}

.footer-emergency {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
}

.emergency .elabel,
.emergency .eval {
  color: #fff;
}

.emergency .eval a {
  color: #fff !important;
  text-decoration: none;
}

.page-body .amen-detail-overlay h3 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.58);
}

.page-body .amen-detail-kicker {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

:focus-visible {
  outline: 2px solid var(--tmma-copper);
  outline-offset: 2px;
}

/* =========================================================
   DARK MODE TOKEN FLIPS
   These override the light-mode :root tokens above so that
   every rule using var(--s*), var(--p*), var(--c*) gets the
   correct dark-mode value automatically.
========================================================= */
@media(prefers-color-scheme:dark){
  :root{
    --ch:#F0EDE8;
    --s50:#1E1C19;--s100:#2A2825;--s200:#3A3835;--s300:#6A6660;
    --s400:#9A9690;--s500:#B8B4AC;--s600:#D0CCC4;--s700:#E8E4DC;
    --p50:#0D1A10;--p100:#162015;--p200:#2A3D27;--p300:#4A7050;
    --p400:#6A9068;--p500:#6A9068;--p600:#6A9068;--p700:#88A886;
    --c50:#1A1408;--c100:#2A1E08;--c200:#4A3010;--c300:#8A5020;
    --c700:#D4904A;
    --emergency-bg:#3A1515;--emergency-border:#6B2020;--emergency-text:#F5A0A0
  }
  body{background:#141312}
  .site{background:#1A1816}
  .top{background:#1A1816;border-bottom-color:#2A2825}
  .news-card,.qa-card,.info-card,.team-card,.amen-card{background:#1E1C19}
  .about-card{background:linear-gradient(135deg,#1E1811,#1E1C19)}
  .dropdown a:hover,.mobile-menu .mm-sub a:hover,.doc-item:hover,
  .faq-q:hover,.acc-head:hover,.qa-card:hover{background:#252320;color:var(--s700)}
  .act-card:hover{background:#252320;border-color:var(--c200)}
  .di-eye{color:var(--p400)}
  .di-eye:hover{background:#162015;border-color:var(--p400)}
  .di-dl-btn{background:var(--c100);color:var(--c700)}
  .di-dl-btn:hover{background:var(--c200)}
  .badge-pine{background:var(--p50);color:var(--p300);border-color:var(--p200)}
  .badge-copper{background:var(--c50);color:var(--c300);border-color:var(--c200)}
  .badge-stone{background:var(--s50);color:var(--s500);border-color:var(--s200)}
  input,select,textarea{background:#252320!important;color:var(--ch)!important;border-color:#3A3835!important}
  input:focus,select:focus,textarea:focus{border-color:var(--tmma-sage)!important;box-shadow:0 0 0 3px rgba(115,138,110,.2)!important}
  .page-body table th{background:#252320}
  .page-body table tbody tr:hover{background:#252320}
  .contact-card h3,.page-body h3,.sm-section-head,.cal-month-head{color:var(--p400)}
  .cal-reg.required{background:var(--c50);color:var(--c300);border-color:var(--c200)}
  .cal-reg.open{background:var(--p50);color:var(--p300);border-color:var(--p200)}
  .logo-text{color:#F0EDE8}
  .logo-mark{filter:brightness(1.35)}
  /* Rental notice boxes with hardcoded light backgrounds */
  .rental-cap-box{background:#3A1515!important;border-color:#6B2020!important}
  .rental-cap-box,.rental-cap-box strong,.rental-cap-box p{color:#F5A0A0!important}
  .rental-warn-box{background:#2A1E08!important;border-color:#5A4008!important;color:#F0C878!important}
  .rental-subassoc-box{background:#252320!important;border-left-color:#D4904A!important}
}