/*
Theme Name: TicketBox
Theme URI: https://ticketbox.bg
Author: TicketBox / Vili Velichkov
Description: Официалната тема на TicketBox — платформа за билети и управление на събития.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: ticketbox
*/

/* ══════════════════════════════════════════════════
   DESIGN TOKENS — Light theme as default
   Dark theme optionally via [data-theme="dark"]
   ══════════════════════════════════════════════════ */

:root {
  /* ── Font vars: aliases live in _tokens.css → all resolve to Montserrat ── */
  --nav-h: 72px;

  /* ── Backgrounds (light default) ── */
  --bg-primary:    #FFFFFF;
  --bg-surface:    #ffffff;
  --bg-elevated:   #F5F9F9;
  --bg-hover:      rgba(0,103,127,0.06);

  /* ── Text ── */
  --text-primary:   #1a1818;
  --text-secondary: #444444;
  --text-muted:     #666666;
  --text-inverse:   #ffffff;

  /* ── Borders ── */
  --border-subtle:  rgba(0,103,127,0.10);
  --border-default: rgba(0,103,127,0.20);
  --border-strong:  rgba(0,103,127,0.35);

  /* ── Brand ── */
  --brand-red:       #00677F;
  --brand-red-hover: #004355;
  --brand-gold:      #b88b5a;
  --brand-gold-hover:#9a6f42;

  /* ── Semantic ── */
  --success: #2D8B4D;
  --warning: #e65100;
  --danger:  #C8342A;

  /* ── Overlays ── */
  --overlay-dark: rgba(26,26,26,0.6);
  --scrim:        rgba(255,255,255,0.95);

  color-scheme: light;

  /* ── Legacy aliases (existing CSS uses these names) ── */
  --red:        #00677F;
  --red-dark:   #004355;
  --black:      var(--bg-primary);
  --black2:     var(--bg-surface);
  --black3:     var(--bg-elevated);
  --white:      var(--text-primary);
  --white-dim:  rgba(26,26,26,.70);
  --white-faint:rgba(26,26,26,.06);
  --gold:       var(--brand-gold);

  /* ── Nav vars ── */
  --nav-bg-rest:     rgba(0,103,127,0);
  --nav-bg-scrolled: rgba(0,103,127,.96);
  --mobile-overlay:  rgba(26,26,26,.60);
  --panel-border:    rgba(0,103,127,.20);
  --bar-bg:          rgba(255,255,255,.97);
}

/* ══════════════════════════════════════════════════
   DARK THEME OVERRIDES
   Opt-in via data-theme="dark" (unused elsewhere) or the
   .tb-dark-theme body class (site-brand.php, per-site tb_site_brand
   dark_theme flag — e.g. DryVia's charcoal/gold redesign).
   ══════════════════════════════════════════════════ */

[data-theme="dark"],
.tb-dark-theme {
  --bg-primary:    #0C0C0E;
  --bg-surface:    #151311;
  --bg-elevated:   #1f1c1a;
  --bg-hover:      rgba(255,255,255,0.04);

  --text-primary:   #f5f1ea;
  --text-secondary: #c4bdb3;
  --text-muted:     #8a8379;
  --text-inverse:   #1a1a1a;

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.15);
  --border-strong:  rgba(255,255,255,0.30);

  --brand-red:       #20AAAA;
  --brand-red-hover: #1A8A8A;
  --brand-gold:      #d4a574;
  --brand-gold-hover:#b88b5a;

  --success: #4caf50;
  --warning: #ff9800;
  --danger:  #e53935;

  --overlay-dark: rgba(0,0,0,0.7);
  --scrim:        rgba(11,10,9,0.95);

  color-scheme: dark;

  --red:        #20AAAA;
  --red-dark:   #1A8A8A;
  --black:      var(--bg-primary);
  --black2:     var(--bg-surface);
  --black3:     var(--bg-elevated);
  --white:      var(--text-primary);
  --white-dim:  rgba(255,255,255,.55);
  --white-faint:rgba(255,255,255,.06);
  --gold:       var(--brand-gold);

  --nav-bg-rest:     rgba(11,10,9,0);
  --nav-bg-scrolled: rgba(11,10,9,.96);
  --mobile-overlay:  rgba(11,10,9,.72);
  --panel-border:    rgba(0,103,127,.25);
  --bar-bg:          rgba(11,10,9,.97);
}

/* ── Smooth theme transition ── */
body,
.tb-nav,
.tb-mobile-panel,
.tb-ep-bar,
.tb-about,
.tb-services,
.tb-contact,
.tb-footer {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ══════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Form elements must inherit theme fonts, not browser/WP defaults */
input, textarea, select, button { font-family: var(--font-body); }

/* Headings always use display font — overrides WP block editor defaults */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }

/* WP block editor utility class overrides — point to our fonts, not old presets */
.has-display-font-family { font-family: var(--font-display) !important; }
.has-body-font-family    { font-family: var(--font-body) !important; }
.has-mono-font-family    { font-family: var(--font-mono) !important; }
/* Legacy WP preset slug "serif" now maps to Fraunces */
.has-serif-font-family   { font-family: var(--font-display) !important; }

/* ── Icon system ── */
.tb-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.tb-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

/* ── Custom cursor ── */
.tb-cursor {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
}
.tb-cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid rgba(0,103,127,.35);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .3s, height .3s, border-color .3s;
}
.tb-cursor-ring.hovered { width: 52px; height: 52px; border-color: var(--red); }

/* ══════════════════════════════════════════════════
   BUTTONS — unified system
   Base: btn-red (filled teal) | btn-ghost (underline)
   Sizes: --sm (nav) | default | --lg (hero CTAs)
   ══════════════════════════════════════════════════ */

.btn-red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: #FFFFFF; background: var(--tb-red-500);
  padding: 14px 32px; border: none; cursor: none;
  transition: background .2s; text-decoration: none;
  white-space: nowrap; border-radius: var(--tb-radius-full);
}
.btn-red:hover { background: var(--tb-red-600); color: #FFFFFF; }

/* Size variants */
.btn-red--sm { padding: 9px 20px; font-size: 10px; }
.btn-red--lg { padding: 16px 40px; font-size: 12px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: var(--tb-text-muted);
  padding: 14px 0;
  border-bottom: 1px solid var(--tb-cream-300);
  background: none; cursor: none;
  transition: color .2s, border-color .2s; text-decoration: none;
  white-space: nowrap;
}
.btn-ghost:hover { color: var(--tb-black); border-color: var(--tb-black); }

/* Dark-context ghost (hero overlay) */
.btn-ghost--light {
  color: rgba(255,255,255,.80);
  border-color: rgba(255,255,255,.40);
}
.btn-ghost--light:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ══════════════════════════════════════════════════
   SECTION LABELS + TITLES
   ══════════════════════════════════════════════════ */

.section-label {
  font-family: var(--font-body);
  font-size: 10px; letter-spacing: .38em; text-transform: uppercase; font-weight: 600;
  color: var(--red); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::before {
  content: ''; display: block;
  width: 22px; height: 1px; background: var(--red);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--tb-text-3xl);
  line-height: 1.05; letter-spacing: -.01em; font-weight: 600;
  color: var(--text-primary);
}

/* Archive header — standard section opener for archive pages */
.tb-archive-header {
  padding: calc(var(--nav-h) + 48px) 48px 40px;
}
.tb-archive-header .section-title {
  font-size: var(--tb-text-2xl);
  margin-bottom: 12px;
}
.tb-archive-header p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 520px;
  margin-top: 12px;
}

/* ══════════════════════════════════════════════════
   REVEAL ANIMATIONS
   ══════════════════════════════════════════════════ */

.tb-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.tb-reveal.visible { opacity: 1; transform: translateY(0); }
.tb-reveal.d1 { transition-delay: .15s; }
.tb-reveal.d2 { transition-delay: .30s; }
.tb-reveal.d3 { transition-delay: .45s; }

/* ══════════════════════════════════════════════════
   FAB — floating action button
   ══════════════════════════════════════════════════ */

.tb-fab {
  position: fixed; bottom: 32px; right: 32px; z-index: 150;
  background: var(--red); color: #FFFFFF;
  font-family: var(--font-body); font-size: 10px;
  letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  padding: 13px 24px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(0,103,127,.30);
  transition: background .2s, box-shadow .2s, transform .2s, opacity .2s;
  cursor: none;
}
/* Hidden once the footer scrolls into view — otherwise the fixed FAB
   sits on top of footer content, especially on short pages. */
.tb-fab--hidden { opacity: 0; pointer-events: none; }
.tb-fab:hover {
  background: var(--red-dark);
  box-shadow: 0 8px 32px rgba(0,103,127,.45);
  transform: translateY(-2px);
  color: #FFFFFF;
}
.tb-fab__dot {
  width: 5px; height: 5px;
  background: #FFFFFF; border-radius: 50%;
  animation: tb-pulse 2s infinite;
}

/* ══════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════ */

@keyframes tb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tb-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes tb-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-gallery-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tb-scroll-line {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50%       { transform: scaleY(.6); opacity: .4; }
}
@keyframes tb-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: .6; }
}
@keyframes tb-spin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — 960px
   ══════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .tb-archive-header { padding: calc(var(--nav-h) + 32px) 24px 28px; }
  .tb-fab { padding: 11px 18px; font-size: 9px; bottom: 20px; right: 20px; }
}