/*
 Theme Name:   Poize Child
 Theme URI:    https://yoursite.com
 Description:  Child theme for Poize — adds Themgumthottathil Family Network styling
 Author:       Themgumthottathil Family
 Author URI:   https://yoursite.com
 Template:     poize
 Version:      1.0.0
 Text Domain:  poize-child
*/

/* ============================================================
   POIZE CHILD THEME
   All rules here override the parent Poize theme AND
   re-skin the Themgumthottathil Family Network plugin
   to feel native to the Poize design language.
   ============================================================ */

/* ── 1. Import parent theme styles ─────────────────────────── */
@import url("../poize/style.css");

/* ── 2. Re-map plugin CSS variables to Poize palette ─────── */
/*
   Poize palette extracted from theme source:
   Dark bg      : #1c1d1d / #151515
   Light cream  : #f1f0eb / #fbf5f5
   Warm accent  : #ecdbcb
   Body text    : #222 / #1c1d1d
   Muted        : #6b6b6b
   Headings     : Anton (Google), fallback Impact
   Body font    : inherit (Poize sets via customizer)
*/

:root {
  /* Override family plugin tokens to match Poize */
  --thf-primary:   #ecdbcb;   /* Poize warm cream — used for headings/accents */
  --thf-secondary: #b6a08a;   /* muted gold from Poize palette */
  --thf-accent:    #f1f0eb;   /* off-white panels */
  --thf-light:     #1c1d1d;   /* Poize dark — panel backgrounds */
  --thf-text:      #f1f0eb;   /* light text on dark */
  --thf-muted:     #9a9a9a;
  --thf-border:    #2e2e2e;
  --thf-radius:    4px;        /* Poize uses tighter, more angular corners */
  --thf-shadow:    0 2px 16px rgba(0,0,0,.45);
}

/* ── 3. Family Directory ──────────────────────────────────── */

.thf-directory-filters {
  background: #151515;
  border-color: #2e2e2e;
}

.thf-filter-input,
.thf-filter-select {
  background: #0d0d0d;
  border-color: #3a3a3a;
  color: #f1f0eb;
  border-radius: 3px;
}
.thf-filter-input::placeholder { color: #666; }
.thf-filter-input:focus,
.thf-filter-select:focus { border-color: #ecdbcb; outline: none; }

/* Dark select arrow */
.thf-filter-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23ecdbcb'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Member cards — dark Poize style */
.thf-member-card {
  background: #1c1d1d;
  border: 1px solid #2a2a2a;
  border-radius: var(--thf-radius);
  box-shadow: var(--thf-shadow);
  transition: transform .2s, border-color .2s;
}
.thf-member-card:hover {
  transform: translateY(-5px);
  border-color: #ecdbcb;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}

.thf-card-photo-placeholder {
  background: linear-gradient(135deg, #1c1d1d 0%, #2a2a2a 100%);
  color: #ecdbcb;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 60px;
  letter-spacing: 2px;
}

.thf-card-name {
  color: #f1f0eb;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.thf-card-malayalam {
  color: #ecdbcb;
  font-size: 14px;
}
.thf-card-profession,
.thf-card-location,
.thf-card-branch {
  color: #9a9a9a;
  font-size: 12px;
}
.thf-card-role {
  background: transparent;
  border: 1px solid #ecdbcb;
  color: #ecdbcb;
  font-family: 'Anton', Impact, sans-serif;
  letter-spacing: 1.5px;
  font-size: 9px;
  text-transform: uppercase;
  border-radius: 2px;
}

/* Status badges — Poize-toned */
.thf-card-status { border-radius: 2px; }
.thf-status-active   { background: rgba(39,174,96,.15);  color: #5ecc8a; border: 1px solid rgba(39,174,96,.3); }
.thf-status-inactive { background: rgba(230,126,34,.12); color: #e8a765; border: 1px solid rgba(230,126,34,.3); }
.thf-status-deceased { background: rgba(127,140,141,.1); color: #aaa;    border: 1px solid rgba(127,140,141,.25); }
.thf-status-pending  { background: rgba(52,152,219,.12); color: #7fbce8; border: 1px solid rgba(52,152,219,.3); }

/* ── 4. Family Tree ───────────────────────────────────────── */

.thf-tree-wrap {
  background: #111;
  border-color: #2e2e2e;
  border-radius: var(--thf-radius);
}

.thf-tree-toolbar {
  background: #151515;
  border-bottom-color: #2e2e2e;
}

#thf-tree-container {
  background: radial-gradient(ellipse at center, #1c1d1d 0%, #0d0d0d 100%);
  cursor: grab;
}

/* Node labels */
.thf-node-label {
  fill: #f1f0eb !important;
  font-size: 11px;
  font-family: 'Anton', Impact, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.thf-node-sublabel {
  fill: #6b6b6b !important;
  font-size: 9px;
}

/* Tree SVG links */
.thf-link-parent { stroke: #3a3a3a !important; }
.thf-link-spouse  { stroke: #5a3a3a !important; }
.thf-h-link       { stroke: #3a3a3a !important; }

/* Dimmed/highlighted */
.thf-node--highlight circle {
  stroke: #ecdbcb !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 6px rgba(236,219,203,.5));
}
.thf-node--dim { opacity: .15; }

/* ── 5. Member Detail Panel ───────────────────────────────── */

.thf-member-panel {
  background: #1c1d1d;
  border: 1px solid #2e2e2e;
  border-radius: var(--thf-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
}
#thf-panel-close { color: #6b6b6b; }
#thf-panel-close:hover { color: #ecdbcb; }

.thf-panel-header h3 {
  color: #f1f0eb;
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
}
.thf-panel-ml      { color: #ecdbcb; }
.thf-panel-details { color: #9a9a9a; }
.thf-panel-details dt { color: #6b6b6b; }
.thf-panel-details dd { color: #f1f0eb; }

.thf-panel-photo {
  border-color: #ecdbcb;
}
.thf-panel-photo-placeholder {
  background: #111;
  border-color: #ecdbcb;
  color: #ecdbcb;
  font-family: 'Anton', Impact, sans-serif;
}

/* ── 6. Profile Page (member detail content area) ─────────── */

.thf-profile-details { margin-top: 40px; }

.thf-detail-section {
  background: #1c1d1d;
  border-color: #2e2e2e;
  border-radius: var(--thf-radius);
}
.thf-section-title {
  color: #ecdbcb;
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  border-bottom: 1px solid #2e2e2e;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.thf-detail-section li,
.thf-detail-section p { color: #9a9a9a; }
.thf-detail-section li strong { color: #f1f0eb; }

.thf-relatives a {
  color: #ecdbcb;
  border-bottom: 1px solid rgba(236,219,203,.25);
}
.thf-relatives a:hover { border-bottom-color: #ecdbcb; }

/* ── 7. Buttons ───────────────────────────────────────────── */

.thf-btn {
  background: transparent;
  border: 1px solid #3a3a3a;
  color: #f1f0eb;
  border-radius: 2px;
  font-family: 'Anton', Impact, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 18px;
  transition: border-color .2s, color .2s;
}
.thf-btn:hover {
  border-color: #ecdbcb;
  color: #ecdbcb;
  background: transparent;
}
.thf-btn--primary {
  background: #ecdbcb;
  color: #111 !important;
  border-color: #ecdbcb;
}
.thf-btn--primary:hover {
  background: #f1f0eb;
  border-color: #f1f0eb;
  color: #111 !important;
}

/* Tree toolbar buttons */
#thf-tree-zoom-in,
#thf-tree-zoom-out,
#thf-tree-reset {
  min-width: 36px;
  text-align: center;
  padding: 6px 10px;
}

/* ── 8. Poize-native menu item (add to nav) ───────────────── */
/*
   When "Family Directory" or "Family Tree" are added to the
   Poize navigation, this makes them feel native.
*/
.menu-item-family-network > a { letter-spacing: 2px; }

/* ── 9. Archive page heading for thf_member CPT ──────────── */
.post-type-archive-thf_member .page-title,
.tax-thf_branch .page-title,
.tax-thf_family_group .page-title {
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #f1f0eb;
}

/* Subtle Kerala-inspired decorative rule under archive headings */
.post-type-archive-thf_member .page-title::after,
.tax-thf_branch .page-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: #ecdbcb;
  margin: 12px auto 0;
}

/* ── 10. Responsive adjustments ──────────────────────────── */
@media (max-width: 768px) {
  .thf-member-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }
  .thf-tree-toolbar { gap: 6px; }
  #thf-tree-zoom-in,
  #thf-tree-zoom-out { font-size: 18px; }
  .thf-member-panel {
    width: calc(100% - 24px);
    left: 12px;
    right: 12px;
  }
}