/* ---------------------------------------------------
   DELTA DIRECTORY — SHARED BLOCK STYLES v1.0
   Load on every page. All other block CSS lives here.
   DeltaCMS v2 §8.1
   --------------------------------------------------- */

/* -- CSS Custom Properties -- */
:root {
  --dpa-primary:     #1a2e4a;
  --dpa-primary-lt:  #243d63;
  --dpa-accent:      #f5a623;
  --dpa-accent-dk:   #d4881a;
  --dpa-accent2:     #e8834a;
  --dpa-light:       #f4f6f9;
  --dpa-white:       #ffffff;
  --dpa-text:        #2d3748;
  --dpa-muted:       #718096;
  --dpa-border:      #e2e8f0;
  --dpa-success:     #38a169;
  --dpa-warning:     #d69e2e;
  --dpa-danger:      #e53e3e;
  --dpa-info:        #3182ce;
  --dpa-purple:      #805ad5;
  --dpa-radius:      12px;
  --dpa-radius-sm:   6px;
  --dpa-radius-lg:   20px;
  --dpa-shadow:      0 4px 20px rgba(0,0,0,0.08);
  --dpa-shadow-md:   0 8px 30px rgba(0,0,0,0.11);
  --dpa-shadow-lg:   0 16px 48px rgba(0,0,0,0.16);
  --dpa-transition:  all 0.3s cubic-bezier(0.4,0,0.2,1);
  --dpa-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* -- Keyframe Animations -- */
@keyframes dpa-fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes dpa-fadeDown  { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:none} }
@keyframes dpa-fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes dpa-slideInL  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }
@keyframes dpa-slideInR  { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
@keyframes dpa-scaleIn   { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes dpa-pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes dpa-spin      { to{transform:rotate(360deg)} }
@keyframes dpa-shimmer   { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
@keyframes dpa-bounce    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes dpa-countUp   { from{opacity:0.2} to{opacity:1} }
@keyframes dpa-ripple    { to{transform:scale(4);opacity:0} }
@keyframes dpa-toastIn   { from{opacity:0;transform:translateX(110%)} to{opacity:1;transform:none} }
@keyframes dpa-toastOut  { from{opacity:1;transform:none} to{opacity:0;transform:translateX(110%)} }

/* -- Scroll-reveal utility (JS adds .dpa-visible) -- */
.dpa-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.dpa-reveal.dpa-visible { opacity: 1; transform: none; }
.dpa-reveal-left  { opacity:0; transform:translateX(-24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.dpa-reveal-right { opacity:0; transform:translateX(24px);  transition: opacity 0.6s ease, transform 0.6s ease; }
.dpa-reveal-left.dpa-visible, .dpa-reveal-right.dpa-visible { opacity:1; transform:none; }

/* Stagger children */
.dpa-stagger > *:nth-child(1)  { transition-delay:0s; }
.dpa-stagger > *:nth-child(2)  { transition-delay:.07s; }
.dpa-stagger > *:nth-child(3)  { transition-delay:.14s; }
.dpa-stagger > *:nth-child(4)  { transition-delay:.21s; }
.dpa-stagger > *:nth-child(5)  { transition-delay:.28s; }
.dpa-stagger > *:nth-child(6)  { transition-delay:.35s; }
.dpa-stagger > *:nth-child(7)  { transition-delay:.42s; }
.dpa-stagger > *:nth-child(8)  { transition-delay:.49s; }

/* -- Skeleton shimmer -- */
.dpa-skeleton {
  background: linear-gradient(90deg,#e2e8f0 25%,#f7fafc 50%,#e2e8f0 75%);
  background-size: 600px 100%;
  animation: dpa-shimmer 1.5s infinite;
  border-radius: var(--dpa-radius-sm);
  color: transparent !important;
  pointer-events: none;
}

/* -- Layout -- */
.dpa-section      { padding: 64px 20px; }
.dpa-section--sm  { padding: 36px 20px; }
.dpa-section--xs  { padding: 20px; }
.dpa-container    { max-width: 1200px; margin: 0 auto; width: 100%; }
.dpa-container--sm { max-width: 800px; margin: 0 auto; }

/* Section header */
.dpa-section-head { margin-bottom: 36px; }
.dpa-section-label {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; font-weight: 700; color: var(--dpa-accent);
  margin-bottom: 6px;
}
.dpa-section-title {
  font-size: clamp(1.4rem,3vw,2rem); font-weight: 800;
  color: var(--dpa-primary); letter-spacing: -.02em; margin: 0 0 8px;
  font-family: var(--dpa-font);
}
.dpa-section-subtitle { color: var(--dpa-muted); font-size: 1rem; margin: 0; }
.dpa-section-head--center { text-align: center; }
.dpa-section-head--between {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px;
}

/* -- Grid system -- */
.dpa-grid   { display: grid; gap: 20px; }
.dpa-cols-1 { grid-template-columns: 1fr; }
.dpa-cols-2 { grid-template-columns: repeat(2,1fr); }
.dpa-cols-3 { grid-template-columns: repeat(3,1fr); }
.dpa-cols-4 { grid-template-columns: repeat(4,1fr); }
.dpa-cols-5 { grid-template-columns: repeat(5,1fr); }
.dpa-cols-auto { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.dpa-flex   { display:flex; gap:16px; flex-wrap:wrap; }
.dpa-flex-center { align-items:center; }
.dpa-flex-between { justify-content:space-between; }

@media (max-width:900px) {
  .dpa-cols-4,.dpa-cols-5 { grid-template-columns: repeat(2,1fr); }
  .dpa-cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:600px) {
  .dpa-cols-4,.dpa-cols-5,.dpa-cols-3,.dpa-cols-2 { grid-template-columns: 1fr; }
  .dpa-section { padding:40px 16px; }
}

/* -- Card base -- */
.dpa-card {
  background: var(--dpa-white);
  border-radius: var(--dpa-radius);
  box-shadow: var(--dpa-shadow);
  border: 1px solid var(--dpa-border);
  transition: var(--dpa-transition);
  position: relative;
  overflow: hidden;
}
.dpa-card:hover { box-shadow: var(--dpa-shadow-lg); transform: translateY(-3px); }
.dpa-card--flat  { box-shadow: none; border: 1.5px solid var(--dpa-border); }
.dpa-card--flat:hover { border-color: var(--dpa-accent); box-shadow: var(--dpa-shadow); }
.dpa-card--dark  { background: var(--dpa-primary); color: var(--dpa-white); border: none; }
.dpa-card--glass {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
}
.dpa-card-body  { padding: 20px; }
.dpa-card-img   { width:100%; object-fit:cover; display:block; }

/* -- Badges -- */
.dpa-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  white-space: nowrap;
}
.dpa-badge--primary { background:var(--dpa-primary); color:#fff; }
.dpa-badge--accent  { background:var(--dpa-accent); color:#fff; }
.dpa-badge--success { background:var(--dpa-success); color:#fff; }
.dpa-badge--danger  { background:var(--dpa-danger); color:#fff; }
.dpa-badge--warning { background:var(--dpa-warning); color:#fff; }
.dpa-badge--info    { background:var(--dpa-info); color:#fff; }
.dpa-badge--purple  { background:var(--dpa-purple); color:#fff; }
.dpa-badge--muted   { background:var(--dpa-border); color:var(--dpa-muted); }
.dpa-badge--outline { background:transparent; border:1.5px solid currentColor; }
.dpa-badge--lg      { padding:5px 14px; font-size:.8rem; }
.dpa-badge--dot::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; margin-right:4px;
}

/* -- Buttons -- */
.dpa-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--dpa-radius-sm);
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: var(--dpa-transition); border: none;
  text-decoration: none; font-family: var(--dpa-font);
  position: relative; overflow: hidden; white-space: nowrap;
}
.dpa-btn:focus-visible { outline: 3px solid var(--dpa-accent); outline-offset: 2px; }
.dpa-btn--primary    { background:var(--dpa-accent); color:#fff; }
.dpa-btn--primary:hover { background:var(--dpa-accent-dk); transform:translateY(-1px); box-shadow:0 6px 20px rgba(245,166,35,.35); }
.dpa-btn--secondary  { background:var(--dpa-primary); color:#fff; }
.dpa-btn--secondary:hover { background:var(--dpa-primary-lt); transform:translateY(-1px); }
.dpa-btn--outline    { background:transparent; border:2px solid var(--dpa-accent); color:var(--dpa-accent); }
.dpa-btn--outline:hover { background:var(--dpa-accent); color:#fff; }
.dpa-btn--ghost      { background:rgba(255,255,255,0.14); color:#fff; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.2); }
.dpa-btn--ghost:hover { background:rgba(255,255,255,0.22); }
.dpa-btn--danger     { background:var(--dpa-danger); color:#fff; }
.dpa-btn--sm  { padding:6px 14px; font-size:.78rem; }
.dpa-btn--lg  { padding:12px 26px; font-size:1rem; }
.dpa-btn--block { display:flex; justify-content:center; width:100%; }
.dpa-btn--pill { border-radius:999px; }
.dpa-btn--icon-only { padding:8px; border-radius:50%; }

/* Button ripple (JS injects .dpa-btn-ripple span) */
.dpa-btn-ripple {
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,0.45);
  animation:dpa-ripple 0.6s linear;
  pointer-events:none;
}

/* -- Text + headings -- */
.dpa-text-muted   { color:var(--dpa-muted); }
.dpa-text-accent  { color:var(--dpa-accent); }
.dpa-text-center  { text-align:center; }
.dpa-text-right   { text-align:right; }
.dpa-text-sm      { font-size:.85rem; }
.dpa-text-xs      { font-size:.78rem; }
.dpa-text-bold    { font-weight:700; }

.dpa-heading-xl {
  font-size:clamp(2.1rem,4vw,3rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--dpa-primary);
  margin:0 0 10px;
  font-family:var(--dpa-font);
}
.dpa-heading-lg {
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--dpa-primary);
  margin:0 0 10px;
}
.dpa-heading-md {
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 8px;
  color:var(--dpa-primary);
}

/* -- Spacing utilities -- */
.dpa-mt-0  { margin-top:0 !important; }
.dpa-mt-8  { margin-top:8px !important; }
.dpa-mt-12 { margin-top:12px !important; }
.dpa-mt-16 { margin-top:16px !important; }
.dpa-mt-24 { margin-top:24px !important; }
.dpa-mt-32 { margin-top:32px !important; }
.dpa-mb-0  { margin-bottom:0 !important; }
.dpa-mb-8  { margin-bottom:8px !important; }
.dpa-mb-12 { margin-bottom:12px !important; }
.dpa-mb-16 { margin-bottom:16px !important; }
.dpa-mb-24 { margin-bottom:24px !important; }
.dpa-mb-32 { margin-bottom:32px !important; }
.dpa-pt-8  { padding-top:8px !important; }
.dpa-pt-16 { padding-top:16px !important; }
.dpa-pt-24 { padding-top:24px !important; }
.dpa-pt-32 { padding-top:32px !important; }
.dpa-p-12  { padding:12px !important; }
.dpa-p-16  { padding:16px !important; }
.dpa-p-20  { padding:20px !important; }
.dpa-p-24  { padding:24px !important; }
.dpa-p-32  { padding:32px !important; }

/* -- Simple separators -- */
.dpa-divider {
  height:1px;
  width:100%;
  background:linear-gradient(90deg,transparent, var(--dpa-border), transparent);
  margin:16px 0;
}
.dpa-divider--thick {
  height:2px;
  background:linear-gradient(90deg, var(--dpa-accent), var(--dpa-accent2));
}

/* -- Icon circle (for lists, stats, etc.) -- */
.dpa-icon-circle {
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(26,46,74,0.04);
  color:var(--dpa-primary);
  font-size:16px;
}
.dpa-icon-circle--accent {
  background:rgba(245,166,35,0.12);
  color:var(--dpa-accent);
}

/* -- Simple tag chips -- */
.dpa-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--dpa-light);
  color:var(--dpa-muted);
  font-size:.8rem;
  border:1px solid rgba(226,232,240,0.9);
}
.dpa-chip--clickable {
  cursor:pointer;
  transition:var(--dpa-transition);
}
.dpa-chip--clickable:hover {
  background:#fff;
  border-color:var(--dpa-accent);
  color:var(--dpa-accent);
}

/* -- Progress bar base (used by stats / achievements) -- */
.dpa-progress {
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(226,232,240,0.9);
  overflow:hidden;
}
.dpa-progress__bar {
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--dpa-accent), var(--dpa-accent2));
  transition:width .4s ease;
}

/* -- Scroll helper: pin top bar, etc. -- */
.dpa-sticky-top {
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter:blur(10px);
}

/* -- Basic table styling (for leaderboards, etc.) -- */
.dpa-table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.dpa-table th,
.dpa-table td {
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--dpa-border);
}
.dpa-table thead th {
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dpa-muted);
}
.dpa-table tbody tr:hover {
  background:rgba(244,246,249,0.7);
}

/* -- Pill stat label -- */
.dpa-stat-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:.78rem;
  border-radius:999px;
  background:rgba(26,46,74,0.05);
  color:var(--dpa-primary);
}

/* -- Toast container baseline (notification JS will hook into) -- */
.dpa-toast-stack {
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9999;
}

/* Individual toast box (variants set via modifier classes) */
.dpa-toast {
  min-width:260px;
  max-width:320px;
  padding:12px 14px;
  border-radius:var(--dpa-radius-sm);
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#1a202c;
  color:#edf2f7;
  box-shadow:var(--dpa-shadow-md);
  animation:dpa-toastIn .28s ease-out;
}
.dpa-toast--success { background:#22543d; }
.dpa-toast--info    { background:#2a4365; }
.dpa-toast--warning { background:#744210; }
.dpa-toast--danger  { background:#742a2a; }
.dpa-toast__icon { font-size:18px; line-height:1; }
.dpa-toast__body { flex:1; }
.dpa-toast__title {
  font-size:.82rem;
  font-weight:700;
  margin-bottom:2px;
}
.dpa-toast__text {
  font-size:.8rem;
  opacity:.9;
}
.dpa-toast__close {
  cursor:pointer;
  border:none;
  background:transparent;
  color:inherit;
  font-size:14px;
  padding:0;
  line-height:1;
}

/* -- Simple backdrop for modals / overlays -- */
.dpa-backdrop {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.58);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9990;
}

/* Modal shell (admin overlay can extend this) */
.dpa-modal {
  background:#fff;
  border-radius:var(--dpa-radius);
  box-shadow:var(--dpa-shadow-lg);
  max-width:520px;
  width:100%;
  padding:20px 22px;
}

/* -- Tabs styling -- */
.dpa-tabs-nav {
  display:flex;
  gap:0;
  border-bottom:2px solid var(--dpa-border);
  margin-bottom:20px;
}
.dpa-tabs-nav [data-tab] {
  padding:10px 20px;
  cursor:pointer;
  font-size:.88rem;
  font-weight:600;
  color:var(--dpa-muted);
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:var(--dpa-transition);
  background:none;
  border-top:none;
  border-left:none;
  border-right:none;
}
.dpa-tabs-nav [data-tab]:hover {
  color:var(--dpa-primary);
}
.dpa-tabs-nav [data-tab].dpa-active {
  color:var(--dpa-accent);
  border-bottom-color:var(--dpa-accent);
}
[data-tab-panel] {
  display:none;
}
[data-tab-panel].dpa-active {
  display:block;
  animation:dpa-fadeIn 0.25s ease;
}

/* -- Accordion styling -- */
.dpa-accordion-item {
  border:1px solid var(--dpa-border);
  border-radius:var(--dpa-radius-sm);
  margin-bottom:8px;
  overflow:hidden;
}
[data-accordion-trigger] {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  cursor:pointer;
  font-weight:600;
  font-size:.92rem;
  color:var(--dpa-primary);
  background:var(--dpa-light);
  border:none;
  width:100%;
  text-align:left;
  transition:var(--dpa-transition);
}
[data-accordion-trigger]:hover {
  background:var(--dpa-border);
}
[data-accordion-trigger]::after {
  content:'+';
  font-size:1.1rem;
  transition:transform 0.3s ease;
}
.dpa-open [data-accordion-trigger]::after {
  content:'\2212';
}
[data-accordion-content] {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  padding:0 18px;
}
.dpa-open [data-accordion-content] {
  padding:14px 18px;
}

/* -- Carousel styling -- */
.dpa-carousel {
  position:relative;
  overflow:hidden;
}
.dpa-carousel-slide {
  display:none;
  animation:dpa-fadeIn 0.4s ease;
}
.dpa-carousel-slide.dpa-active {
  display:block;
}
.dpa-carousel-dots {
  display:flex;
  justify-content:center;
  gap:8px;
  padding:12px 0;
}
.dpa-carousel-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--dpa-border);
  border:none;
  cursor:pointer;
  transition:var(--dpa-transition);
  padding:0;
}
.dpa-carousel-dot.dpa-active {
  background:var(--dpa-accent);
  transform:scale(1.2);
}

/* -- Utility: hide on mobile / desktop -- */
@media (max-width:700px) {
  .dpa-hide-mobile { display:none !important; }
}
@media (min-width:701px) {
  .dpa-hide-desktop { display:none !important; }
}