/*
 * POKÉCARDS — GLOBAL STYLES (THE PULL CO — DARK BOUTIQUE)
 * Auto-loaded by pokecards-elementor plugin on frontend + Elementor preview.
 */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Archivo:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── RESET (scoped to pkc- elements) ── */
.pkc-section *, .pkc-section *::before, .pkc-section *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pkc-section img, .pkc-section svg { display: block; max-width: 100%; }
.pkc-section a { color: inherit; text-decoration: none; }
.pkc-section button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.pkc-section ul { list-style: none; }

/* ── DESIGN TOKENS — DARK BOUTIQUE ── */
:root {
  --pkc-bg:        #0D0D0B;
  --pkc-surface:   #14140F;
  --pkc-surface-2: #1B1B14;

  --pkc-gold:      #B29056;
  --pkc-gold-dark: #8E7340;
  --pkc-gold-glow: rgba(178,144,86,.14);

  /* Legacy "red" tokens routed to gold so widgets that referenced --pkc-red
     in cream theme still render correctly in dark theme (CTAs use gold). */
  --pkc-red:       #B29056;
  --pkc-red-dark:  #8E7340;
  --pkc-red-glow:  rgba(178,144,86,.18);

  --pkc-green:     #7A8C6E;
  --pkc-blue:      #6E80A0;

  --pkc-text:      #FFFFFF;
  --pkc-text-muted:#888780;
  --pkc-text-soft: #5C5B57;

  --pkc-border:    #26241D;
  --pkc-border-b:  #3A3830;

  --pkc-f-head: 'Bebas Neue', 'Archivo', system-ui, -apple-system, sans-serif;
  --pkc-f-body: 'Inter', system-ui, -apple-system, sans-serif;

  --pkc-container: 1200px;
  --pkc-nav-h:     72px;

  --pkc-r-sm:   6px;
  --pkc-r-md:  10px;
  --pkc-r-lg:  16px;
  --pkc-r-pill: 999px;

  --pkc-sh-md: 0 2px 14px rgba(0,0,0,.40);
  --pkc-sh-lg: 0 16px 48px rgba(0,0,0,.55);

  --pkc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── SECTION BASE ── */
.pkc-section {
  font-family: var(--pkc-f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--pkc-text);
  background: var(--pkc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pkc-section h1, .pkc-section h2, .pkc-section h3, .pkc-section h4 {
  font-family: var(--pkc-f-head);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--pkc-text);
}
.pkc-section h1 { font-size: clamp(44px, 6.5vw, 82px); }
.pkc-section h2 { font-size: clamp(34px, 4.2vw, 58px); }
.pkc-section h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: 0.02em; }
.pkc-section h4 { font-size: 14px; letter-spacing: 0.12em; }
.pkc-section p  { color: var(--pkc-text-muted); font-weight: 300; }

/* ── LAYOUT ── */
.pkc-container {
  max-width: var(--pkc-container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}
.pkc-pad    { padding-top: 96px;  padding-bottom: 96px; }
.pkc-pad-lg { padding-top: 120px; padding-bottom: 120px; }

/* ── SECTION HEAD ── */
.pkc-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 20px;
  flex-wrap: wrap;
}
.pkc-section-head h2 { margin-bottom: 10px; }
.pkc-section-head .pkc-desc { color: var(--pkc-text-muted); max-width: 520px; font-weight: 300; }
.pkc-link-arrow {
  color: var(--pkc-gold);
  font-family: var(--pkc-f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--pkc-gold);
  padding-bottom: 4px;
  transition: gap .2s var(--pkc-ease), color .2s var(--pkc-ease), border-color .2s var(--pkc-ease);
}
.pkc-link-arrow:hover { gap: 10px; color: #C2A56B; border-color: #C2A56B; }

/* ── PILL ── */
.pkc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--pkc-r-pill);
  background: var(--pkc-gold-glow);
  border: 1px solid rgba(178,144,86,.30);
  color: var(--pkc-gold);
  font-family: var(--pkc-f-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 24px;
}
.pkc-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pkc-gold);
  box-shadow: 0 0 10px var(--pkc-gold);
}

/* ── BUTTONS — gold-on-black, Supreme/DSM style ── */
.pkc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--pkc-r-sm);
  font-family: var(--pkc-f-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .2s var(--pkc-ease), background .2s var(--pkc-ease), border-color .2s var(--pkc-ease), color .2s var(--pkc-ease);
  line-height: 1;
  border: 1px solid transparent;
}
.pkc-btn-primary {
  background: var(--pkc-gold);
  color: var(--pkc-bg);
  border-color: var(--pkc-gold);
}
.pkc-btn-primary:hover {
  background: var(--pkc-gold-dark);
  border-color: var(--pkc-gold-dark);
  transform: translateY(-1px);
}
.pkc-btn-ghost {
  background: transparent;
  border: 1px solid var(--pkc-border-b);
  color: var(--pkc-text);
}
.pkc-btn-ghost:hover {
  border-color: var(--pkc-gold);
  color: var(--pkc-gold);
}

/* ── LOGO MARK (poké-ball) — adapted for dark bg ── */
.pkc-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--pkc-f-head);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pkc-text);
}
.pkc-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pkc-gold) 0 50%, #fff 50% 100%);
  position: relative;
  border: 2px solid #fff;
  box-shadow: 0 0 20px var(--pkc-gold-glow);
}
.pkc-logo-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  background: #fff;
  border: 3px solid var(--pkc-bg);
  border-radius: 50%;
}
.pkc-logo .pkc-logo-accent { color: var(--pkc-gold); }

/* ── SCROLL REVEAL ── */
.pkc-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--pkc-ease), transform 600ms var(--pkc-ease);
}
.pkc-reveal.pkc-visible { opacity: 1; transform: none; }

/* Elementor editor mode: bypass the reveal so re-rendered widgets stay visible.
   Elementor adds .elementor-editor-active to <body> inside the preview iframe. */
body.elementor-editor-active .pkc-reveal,
.elementor-editor-active .pkc-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .pkc-section *, .pkc-section *::before, .pkc-section *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .pkc-reveal { opacity: 1; transform: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .pkc-pad    { padding-top: 64px; padding-bottom: 64px; }
  .pkc-pad-lg { padding-top: 80px; padding-bottom: 80px; }
  .pkc-section-head { margin-bottom: 32px; }
}
@media (max-width: 768px) {
  .pkc-container { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 560px) {
  .pkc-section h1 { font-size: clamp(34px, 8vw, 44px); line-height: 1.05; }
  .pkc-section h2 { font-size: clamp(26px, 6vw, 32px); }
  .pkc-section h3 { font-size: 18px; }
  .pkc-btn        { padding: 12px 22px; font-size: 12px; }
}
@media (hover: none) {
  .pkc-section a:hover, .pkc-section button:hover { transform: none; }
}