/* ================================================================
   CJSC GLOBAL STYLES — user.css
   Wild Apricot CSS Customization
   Last updated: 2026
   ================================================================ */


/* ── FONTS ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@300;400;500;600&display=swap');


/* ── MENU COLORS ────────────────────────────────────────────────── */
.menuInner {
  background: #1F4D3A !important;
}

.WaGadgetMenuHorizontal.menuStyle002 .menuBackground {
  background: #1F4D3A !important;
}


/* ── CSS DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  --cjsc-green:      #1e5e45;
  --cjsc-green-dk:   #163d2d;
  --cjsc-teal:       #008bae;
  --cjsc-teal-lt:    #40b2cf;
  --cjsc-border:     #dde5ea;
  --cjsc-muted:      #7a9a8a;
  --cjsc-bg-teal:    #e8f5f9;
  --cjsc-font-head:  'Playfair Display', Georgia, serif;
  --cjsc-font-body:  'DM Sans', sans-serif;
}


/* ── SHARED SECTION HEADER ──────────────────────────────────────── */
/* Usage: <div class="cjsc-section-hd">
            <div class="cjsc-section-hd-icon"><!-- svg --></div>
            <h2>Title</h2>
            <div class="cjsc-section-hd-line"></div>
          </div>                                                    */

.cjsc-section-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--cjsc-font-body);
}

.cjsc-section-hd-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--cjsc-bg-teal);
  border: 1px solid rgba(0,139,174,.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.cjsc-section-hd-icon svg {
  width: 14px; height: 14px;
  stroke: var(--cjsc-teal); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.cjsc-section-hd h2 {
  font-family: var(--cjsc-font-head) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1a2d22 !important;
  margin: 0 !important; padding: 0 !important;
  border: none !important; line-height: 1 !important;
}

.cjsc-section-hd-line {
  flex: 1; height: 1px;
  background: var(--cjsc-border);
}


/* ── SHARED PANEL (white card with border) ──────────────────────── */
/* Usage: add class="cjsc-panel" to any div                         */

.cjsc-panel {
  background: #ffffff;
  border: 1px solid var(--cjsc-border);
  border-radius: 8px;
  padding: 18px 20px;
  font-family: var(--cjsc-font-body);
}

.cjsc-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cjsc-teal);
  margin-bottom: 8px;
}

.cjsc-panel-label svg {
  width: 13px; height: 13px;
  stroke: var(--cjsc-teal); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}


/* ── WA BUILT-IN GADGET OVERRIDES (gadgetStyle004) ─────────────── */
/* Reskins the standard WA news/events panel titles and list items  */
/* to match CJSC design system wherever gadgetStyle004 appears.     */

.gadgetStyle004 .gadgetStyleTitle {
  background: transparent !important;
  border-bottom: 1px solid var(--cjsc-border) !important;
  padding: 13px 16px 12px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.gadgetStyle004 .gadgetStyleTitle::before {
  content: '' !important;
  display: block !important;
  width: 3px !important; height: 18px !important;
  background: linear-gradient(180deg, var(--cjsc-green), var(--cjsc-teal-lt)) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

.gadgetStyle004 .gadgetTitleH4 {
  font-family: var(--cjsc-font-head) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #1a2d22 !important;
  margin: 0 !important; padding: 0 !important;
  border: none !important; background: transparent !important;
  line-height: 1.2 !important;
}

.gadgetStyle004 .gadgetStyleBody ul {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
}

.gadgetStyle004 .gadgetStyleBody li {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f0f4f2 !important;
  margin: 0 !important;
  font-family: var(--cjsc-font-body) !important;
}

.gadgetStyle004 .gadgetStyleBody li.last {
  border-bottom: none !important;
}

.gadgetStyle004 .gadgetStyleBody li:hover {
  background: #f7fbf9 !important;
}

.gadgetStyle004 .gadgetStyleBody .title {
  margin: 0 0 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

.gadgetStyle004 .gadgetStyleBody .title a {
  color: var(--cjsc-green-dk) !important;
  text-decoration: none !important;
}

.gadgetStyle004 .gadgetStyleBody .title a:hover {
  color: var(--cjsc-teal) !important;
}

.gadgetStyle004 .gadgetStyleBody .date {
  font-size: 11px !important;
  color: var(--cjsc-muted) !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.gadgetStyle004 .gadgetStyleBody .date .separator {
  color: #c0d4ca !important;
}

.gadgetStyle004 .gadgetStyleBody .date .location {
  color: #8aab98 !important;
  font-style: italic !important;
}

.gadgetStyle004 .gadgetStyleBody .author {
  margin: 3px 0 0 !important;
  font-size: 10.5px !important;
  color: #aac4b8 !important;
  font-weight: 300 !important;
}

.gadgetStyle004 .gadgetStyleBody .author a {
  color: #aac4b8 !important;
  text-decoration: none !important;
}

.gadgetStyle004 .gadgetStyleBody .author a:hover {
  color: var(--cjsc-muted) !important;
}


/* ── EXPANDABLE HISTORY COMPONENT ───────────────────────────────── */
.cjsc-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 800;
  padding: 10px 0;
}

.cjsc-history summary .summary-icon {
  font-size: 1.2em;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.cjsc-history[open] summary .summary-icon {
  transform: rotate(90deg);
}

.cjsc-history summary:hover .summary-icon {
  opacity: 1;
}