/* =========================================================
   theme.css
   Purpose:
   - Palette and component overrides for CHL refresh.
   - Load AFTER style.css. Nothing in style.css is deleted;
     this file wins via cascade where rules conflict.
   - Option C: deep teal anchor, warm stone surfaces,
     vivid gold accent pulled from the larch in forest-hero.jpg
   =========================================================

   PALETTE REFERENCE
   -----------------
   --c-deep        #142830   Darkest teal — nav bar, footer
   --c-primary     #1C3942   Brand anchor — logo, headings
   --c-mid         #2A4E5C   Mid teal — hover states, borders
   --c-gold        #DFB751   Larch gold — primary accent / CTA
   --c-gold-light  #F5EDD0   Gold tint — surface highlight
   --c-stone       #F2EDE4   Warm stone — member area surfaces
   --c-stone-2     #E8E1D6   Slightly deeper stone — borders
   --c-stone-3     #D4CCBF   Muted stone — dividers
   --c-grey-light  #F6F7F8   Neutral light grey — hover on white/light surfaces
   --c-white       #FFFFFF   Pure white — cards
   --c-text-on-dark rgba(242,237,228,0.90)  Body text on dark bg
   --c-text-muted  rgba(242,237,228,0.55)   Secondary text on dark bg
   ========================================================= */

:root {
  /* ---- Core palette ---- */
  --c-deep:         #142830;
  --c-primary:      #1C3942;
  --c-mid:          #2A4E5C;
  --c-gold:         #DFB751;
  --c-gold-hover:   #D4A820;
  --c-gold-light:   #F5EDD0;
  --c-gold-tint:    rgba(223, 183, 81, 0.15);
  --c-stone:        #F2EDE4;
  --c-stone-2:      #E8E1D6;
  --c-stone-3:      #D4CCBF;
  --c-grey-light:   #F6F7F8;
  --c-white:        #FFFFFF;
  --c-text-on-dark: rgba(242, 237, 228, 0.92);
  --c-text-muted:   rgba(242, 237, 228, 0.55);
  --c-border-dark:  rgba(255, 255, 255, 0.10);
  --c-border-light: rgba(20, 40, 48, 0.14);

  /* ---- Re-map existing style.css variables ---- */
  --color-base:         var(--c-primary);
  --color-accent-1:     var(--c-gold);
  --color-accent-1-light: rgba(223, 183, 81, 0.20);
  --color-accent-2:     var(--c-gold);
  --color-light:        var(--c-stone);

  /* ---- Radius tightened for modern feel ---- */
  --radius: 12px;
  --shadow: 0 8px 24px rgba(20, 40, 48, 0.18);
}


/* =========================================================
   Page background
   Purpose: keep forest image on all pages, deepen overlay
   so light content panels sit clearly on top
   ========================================================= */

.page-bg {
  background:
    linear-gradient(180deg,
      rgba(20, 40, 48, 0.72) 0%,
      rgba(20, 40, 48, 0.50) 40%,
      rgba(20, 40, 48, 0.60) 100%),
    url("/assets/img/forest-hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

@media (min-width: 901px) {
  .page-bg { background-attachment: fixed; }
}


/* =========================================================
   Site header — dark bar
   ========================================================= */

.site-header {
  background: var(--c-deep);
  border-bottom: 1px solid var(--c-border-dark);
  backdrop-filter: none;
}

/* Purpose: show brand title alongside logo */
.brand-title {
  color: var(--c-text-on-dark);
  letter-spacing: 0.07em;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  display: inline;
}

/* Purpose: larger logo, minimal vertical padding */
.brand img {
  height: 62px;
  width: auto;
  padding: 0;
}

.header-inner {
  padding: 4px 0;
  gap: var(--space-3);
}

@media (max-width: 700px) {
  .brand img { height: 48px; }
}

/* Purpose: only hide brand title on very narrow screens */
@media (max-width: 350px) {
  .brand-title { display: none; }
}

/* Purpose: public nav links on dark bar */
.nav a {
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 14px;
  border-radius: 8px;
  padding: 7px 12px;
  transition: color var(--ease), background var(--ease);
}

.nav a:hover {
  color: var(--c-text-on-dark);
  background: rgba(255, 255, 255, 0.08);
}


/* =========================================================
   Nav: dropdown + avatar — new components
   ========================================================= */

/* Purpose: wrapper that holds trigger + menu */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Purpose: Members dropdown trigger button */
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-text-muted);
  font-weight: 500;
  font-size: 14px;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
  white-space: nowrap;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.open {
  color: var(--c-text-on-dark);
  background: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-trigger .chevron {
  font-size: 12px;
  transition: transform 200ms ease;
  display: inline-block;
}

.nav-dropdown-trigger.open .chevron {
  transform: rotate(180deg);
}

/* Purpose: dropdown menu panel */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--c-white);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 1100;
}

.nav-dropdown-menu.open { display: block; }

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 400;
  /* Purpose: explicit dark color overrides any .nav a inheritance */
  color: #1C3942 !important;
  text-decoration: none;
  transition: background var(--ease);
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.nav-dropdown-item:hover {
  background: var(--c-stone);
  color: #1C3942 !important;
}

.nav-dropdown-item i {
  font-size: 17px;
  /* Purpose: deeper gold so icon is visible but not competing with text */
  color: #A07818 !important;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.nav-dropdown-divider {
  border: none;
  border-top: 1px solid var(--c-stone-2);
  margin: 4px 0;
}

.nav-dropdown-item--danger {
  color: #7f2020;
}

.nav-dropdown-item--danger i {
  color: #7f2020;
}

/* Purpose: avatar circle showing user initials */
.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-deep);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(223, 183, 81, 0.40);
  transition: border-color var(--ease), transform var(--ease);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

.nav-avatar:hover {
  border-color: var(--c-gold);
  transform: scale(1.05);
}

/* Purpose: profile dropdown — shows name + email at top */
.nav-profile-top {
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--c-stone-2);
}

.nav-profile-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-primary);
  line-height: 1.3;
}

.nav-profile-email {
  font-size: 11px;
  color: #6b7f70;
  margin-top: 1px;
}

/* Purpose: hamburger toggle — mobile only */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--c-text-on-dark);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}

/* Purpose: mobile drawer */
.nav-mobile-drawer {
  display: none;
  flex-direction: column;
  background: var(--c-deep);
  border-top: 1px solid var(--c-border-dark);
  padding: 8px 0 12px;
}

.nav-mobile-drawer.open { display: flex; }

.nav-mobile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: 15px;
  color: var(--c-text-on-dark);
  text-decoration: none;
  transition: background var(--ease);
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.nav-mobile-item:hover { background: rgba(255,255,255,0.06); }

.nav-mobile-item i {
  font-size: 18px;
  color: var(--c-gold);
  width: 22px;
  flex-shrink: 0;
}

.nav-mobile-section {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-muted);
  padding: 10px 20px 4px;
}

.nav-mobile-divider {
  border: none;
  border-top: 1px solid var(--c-border-dark);
  margin: 6px 0;
}

.nav-mobile-item--danger { color: #f09090; }
.nav-mobile-item--danger i { color: #f09090; }


/* =========================================================
   Header inner layout override
   ========================================================= */

.header-inner {
  padding: 10px 0;
  gap: var(--space-3);
}

/* Purpose: mobile nav layout */
@media (max-width: 700px) {
  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    flex-wrap: nowrap;
    text-align: left;
    margin: 0;
    gap: 0;
  }

  /* Purpose: 12px left margin on logo */
  .brand {
    justify-content: flex-start;
    margin-left: 12px;
  }

  /* Purpose: 12px right margin on hamburger */
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 12px;
  }

  /* Purpose: hide desktop-only nav items */
  .nav-desktop { display: none !important; }
}

/* Purpose: desktop nav — 12px padding on both sides of the nav bar */
@media (min-width: 701px) {
  .brand { margin-left: 12px; }
  .nav.nav-desktop { margin-right: 12px; }
}

/* Purpose: desktop — show full nav, hide hamburger */
@media (min-width: 701px) {
  .nav-hamburger { display: none; }
  .nav-mobile-drawer { display: none !important; }
  .nav-desktop { display: flex !important; }
}


/* =========================================================
   Buttons — global standards
   ========================================================= */

/* Standard heights — apply alongside btn-* colour classes
   btn-h-primary : 50px — main actions (add, save, search, cancel, upload)
   btn-h-secondary: 38px — inline actions (open, download)
   Width standard : 150px for labelled buttons; exempt icon-only and sort buttons */
.btn-h-primary {
  height: 40px;
  width: 150px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.btn-h-secondary {
  height: 38px;
  width: 150px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Primary — mid teal. Save, about, navigation actions */
.btn-primary {
  background: var(--c-mid);
  color: var(--c-stone);
  border-color: transparent;
}
.btn-primary:hover {
  background: var(--c-primary);
}

/* Secondary — dark/glass. Cancel, dismiss on dark or image backgrounds */
.btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-text-on-dark);
  border-color: rgba(255, 255, 255, 0.30);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

/* Secondary Light — stone surface. Cancel, open, download on light backgrounds */
.btn-secondary-light {
  background: var(--c-stone-2);
  color: var(--c-primary);
  border-color: var(--c-stone-3);
}
.btn-secondary-light:hover {
  background: var(--c-stone-3);
  color: var(--c-primary);
}

/* Accent — gold CTA. Submit, add new, primary call-to-action */
.btn-accent {
  background: var(--c-gold);
  color: var(--c-deep);
  border-color: var(--c-gold);
  box-shadow: 0 2px 12px rgba(223, 183, 81, 0.30);
}
.btn-accent:hover {
  background: var(--c-gold-hover);
  border-color: var(--c-gold-hover);
  color: var(--c-deep);
}

/* Purpose: ensure nav accent button text/hover are always correct */
.nav a.btn-accent,
.nav .btn-accent {
  color: var(--c-deep) !important;
}
.nav a.btn-accent:hover,
.nav .btn-accent:hover {
  background: var(--c-gold-hover) !important;
  color: var(--c-deep) !important;
}


/* =========================================================
   Cards and panels — stone surfaces over forest bg
   ========================================================= */

/* Purpose: primary content card — light stone on dark forest */
.card {
  background: rgba(242, 237, 228, 0.96);
  border: 1px solid var(--c-stone-2);
  color: var(--c-primary);
}

/* Purpose: hero panels — semi-transparent dark teal */
.home-hero-panel {
  background: rgba(20, 40, 48, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
}

/* Purpose: split cards — light stone */
.split-card {
  background: var(--c-stone);
  border: 1px solid var(--c-stone-2);
  color: var(--c-primary);
}

.split-card h2,
.split-card p { color: var(--c-primary); }

.hero-intro { color: var(--c-stone); }


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: rgba(20, 40, 48, 0.88);
  color: var(--c-text-on-dark);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--c-border-dark);
}

.site-footer .small { color: var(--c-text-muted); }


/* =========================================================
   Form elements — stone theme
   ========================================================= */

.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(242, 237, 228, 0.90);
  border: 1px solid var(--c-stone-3);
  color: var(--c-primary);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(223, 183, 81, 0.18);
}

.form-field {
  margin-bottom: var(--space-4);
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text-on-dark);
}

.form-alert {
  background: rgba(223, 183, 81, 0.15);
  border-color: rgba(223, 183, 81, 0.40);
  color: var(--c-text-on-dark);
}

/* Use .form-light on any form container sitting on a white/light background */
.form-light .form-field input,
.form-light .form-field select,
.form-light .form-field textarea {
  background: var(--c-stone);
  border: 1px solid var(--c-stone-3);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  color: var(--c-primary);
  outline: none;
  font-family: inherit;
  width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form-light .form-field input:focus,
.form-light .form-field select:focus,
.form-light .form-field textarea:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(223, 183, 81, 0.15);
  background: var(--c-white);
}
.form-light .form-field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.form-light .form-alert {
  color: #B8920A;
  background: rgba(223, 183, 81, 0.10);
  border-color: rgba(223, 183, 81, 0.35);
}


/* =========================================================
   Members area — calendar.css variable overrides
   Purpose: re-map calendar.css to new palette without
   editing that file
   ========================================================= */

/* Member page background — forest with lighter overlay */
.cal-main {
  background: transparent;
}

/* Purpose: light stone panels over forest */
.cal-grid-wrap,
.cal-detail-panel,
.cal-form-panel,
.cal-agenda-item {
  background: rgba(242, 237, 228, 0.97);
}

.cal-day-names {
  background: var(--c-stone-2);
}

.cal-day-name { color: var(--c-mid); }
.cal-day-num  { color: var(--c-primary); }

.cal-day-num.is-today {
  background: var(--c-gold);
  color: var(--c-deep);
}

.cal-nav-btn,
.cal-month-label { color: var(--c-text-on-dark); }

.cal-nav-btn {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

.cal-nav-btn:hover { background: rgba(255,255,255,0.18); }

.cal-page-title { color: var(--c-text-on-dark); }

.cal-admin-notice {
  background: rgba(223, 183, 81, 0.18);
  border-color: rgba(223, 183, 81, 0.45);
  color: var(--c-text-on-dark);
}

.cal-success-notice {
  background: rgba(242, 237, 228, 0.95);
  border-color: var(--c-stone-3);
  color: var(--c-primary);
}

/* Purpose: legend dots and text readable on dark bg */
.legend-item { color: var(--c-text-on-dark); }

/* Purpose: add event button uses gold accent */
.cal-add-btn {
  background: var(--c-gold);
  color: var(--c-deep);
  border-color: var(--c-gold);
}

.cal-add-btn:hover { background: var(--c-gold-hover); }

/* Purpose: form fields inside cal panels use stone */
.cal-form-field input,
.cal-form-field select,
.cal-form-field textarea {
  background: var(--c-white);
  border-color: var(--c-stone-3);
  color: var(--c-primary);
}

.cal-form-field input:focus,
.cal-form-field select:focus,
.cal-form-field textarea:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 2px rgba(223, 183, 81, 0.18);
}

.cal-form-field label { color: var(--c-mid); }


/* =========================================================
   Page titles — consistent across all pages
   Purpose:
   - .page-title always sits outside the content panel
   - Readable over the forest background
   - Gold colour pulls from the larch accent in the photo
   ========================================================= */

.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--space-4) 0;
  /* Purpose: ensure it's outside any dark panel */
  display: block;
}

/* Purpose: when page-title is inside a dark panel (register, login) */
.home-hero-panel .page-title,
.content-panel .page-title {
  color: var(--c-gold);
  margin-top: 0;
}