/*
 * YippeeBates Global Styles
 * css/global.css
 *
 * Base resets, typography defaults, utility classes.
 * Loaded after design-system.css so all tokens are available.
 * ---------------------------------------------------------------
 */

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--yb-font-body);
  font-size: var(--yb-text-base);
  font-weight: var(--yb-weight-normal);
  line-height: var(--yb-leading-relaxed);
  color: var(--yb-text-primary);
  background-color: var(--yb-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* ============================================================
   TYPOGRAPHY — BASE STYLES
   ============================================================ */

/* Display headings use Fraunces */
.yb-display,
.yb-h1, .yb-h2, .yb-h3 {
  font-family: var(--yb-font-display);
  font-weight: var(--yb-weight-black);
  letter-spacing: var(--yb-tracking-tight);
  line-height: var(--yb-leading-tight);
  color: var(--yb-text-primary);
}

.yb-h1 { font-size: clamp(var(--yb-text-4xl), 5.5vw, var(--yb-text-7xl)); }
.yb-h2 { font-size: clamp(var(--yb-text-3xl), 4vw,   var(--yb-text-5xl)); }
.yb-h3 { font-size: clamp(var(--yb-text-2xl), 3vw,   var(--yb-text-4xl)); }
.yb-h4 { font-family: var(--yb-font-display); font-size: var(--yb-text-2xl); font-weight: var(--yb-weight-bold); }

/* Body text */
.yb-body-lg { font-size: var(--yb-text-lg); line-height: var(--yb-leading-loose); color: var(--yb-text-secondary); }
.yb-body    { font-size: var(--yb-text-base); line-height: var(--yb-leading-relaxed); color: var(--yb-text-secondary); }
.yb-body-sm { font-size: var(--yb-text-sm);  line-height: var(--yb-leading-relaxed); color: var(--yb-text-secondary); }

/* Eyebrow / label */
.yb-eyebrow {
  font-family: var(--yb-font-body);
  font-size: var(--yb-text-xs);
  font-weight: var(--yb-weight-heavy);
  letter-spacing: var(--yb-tracking-widest);
  text-transform: uppercase;
  color: var(--yb-violet-mid);
  display: block;
}

/* Text colour utilities */
.yb-text-brand   { color: var(--yb-violet-mid); }
.yb-text-green   { color: var(--yb-green); }
.yb-text-amber   { color: var(--yb-amber); }
.yb-text-rose    { color: var(--yb-rose); }
.yb-text-muted   { color: var(--yb-text-muted); }
.yb-text-inverse { color: var(--yb-white); }

/* Gradient text */
.yb-grad-text {
  background: var(--yb-grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.yb-grad-text-green {
  background: var(--yb-grad-green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.yb-container {
  max-width: var(--yb-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--yb-space-6);
  padding-right: var(--yb-space-6);
}

.yb-container-wide {
  max-width: var(--yb-container-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--yb-space-6);
  padding-right: var(--yb-space-6);
}

.yb-section {
  padding-top: var(--yb-section-pad);
  padding-bottom: var(--yb-section-pad);
}

.yb-section-sm {
  padding-top: var(--yb-section-pad-sm);
  padding-bottom: var(--yb-section-pad-sm);
}

.yb-section-lg {
  padding-top: var(--yb-section-pad-lg);
  padding-bottom: var(--yb-section-pad-lg);
}

/* Flex utils */
.yb-flex         { display: flex; }
.yb-flex-center  { display: flex; align-items: center; justify-content: center; }
.yb-flex-between { display: flex; align-items: center; justify-content: space-between; }
.yb-flex-col     { display: flex; flex-direction: column; }
.yb-gap-1  { gap: var(--yb-space-1); }
.yb-gap-2  { gap: var(--yb-space-2); }
.yb-gap-3  { gap: var(--yb-space-3); }
.yb-gap-4  { gap: var(--yb-space-4); }
.yb-gap-6  { gap: var(--yb-space-6); }
.yb-gap-8  { gap: var(--yb-space-8); }

/* Grid utils */
.yb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--yb-space-6); }
.yb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--yb-space-6); }
.yb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--yb-space-5); }

/* Centering */
.yb-text-center { text-align: center; }
.yb-mx-auto     { margin-left: auto; margin-right: auto; }


/* ============================================================
   BUTTON SYSTEM
   ============================================================ */

.yb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yb-space-2);
  font-family: var(--yb-font-body);
  font-weight: var(--yb-weight-bold);
  font-size: var(--yb-text-sm);
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: var(--yb-radius-full);
  padding: 0.65rem 1.4rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--yb-transition-base);
  position: relative;
  overflow: hidden;
}

/* Sizes */
.yb-btn-sm  { padding: 0.42rem 0.95rem; font-size: var(--yb-text-xs); }
.yb-btn-lg  { padding: 0.9rem 2rem;     font-size: var(--yb-text-base); }
.yb-btn-xl  { padding: 1.05rem 2.4rem;  font-size: var(--yb-text-lg); }
.yb-btn-full { width: 100%; }

/* Variants */
.yb-btn-brand {
  background: var(--yb-grad-brand);
  color: var(--yb-white);
  box-shadow: var(--yb-shadow-brand);
}
.yb-btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(109, 40, 217, 0.42);
}

.yb-btn-green {
  background: var(--yb-grad-green);
  color: var(--yb-white);
  box-shadow: var(--yb-shadow-green);
}
.yb-btn-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(5, 150, 105, 0.42);
}

.yb-btn-white {
  background: var(--yb-white);
  color: var(--yb-violet);
  box-shadow: var(--yb-shadow-md);
}
.yb-btn-white:hover {
  transform: translateY(-2px);
  box-shadow: var(--yb-shadow-lg);
}

.yb-btn-ghost {
  background: transparent;
  color: var(--yb-ink-700);
  border: 1.5px solid var(--yb-ink-200);
}
.yb-btn-ghost:hover {
  border-color: var(--yb-violet-mid);
  color: var(--yb-violet-mid);
  background: var(--yb-violet-xs);
}

.yb-btn-ghost-white {
  background: rgba(255, 255, 255, 0.1);
  color: var(--yb-white);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}
.yb-btn-ghost-white:hover { background: rgba(255, 255, 255, 0.2); }

.yb-btn-sky {
  background: var(--yb-grad-sky);
  color: var(--yb-white);
  box-shadow: var(--yb-shadow-sky);
}
.yb-btn-sky:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.42);
}

/* Active / loading state */
.yb-btn:active { transform: translateY(0) !important; }
.yb-btn[disabled], .yb-btn.is-loading {
  opacity: 0.72;
  pointer-events: none;
}


/* ============================================================
   BADGE / PILL SYSTEM
   ============================================================ */

.yb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--yb-space-1);
  font-family: var(--yb-font-body);
  font-size: var(--yb-text-xs);
  font-weight: var(--yb-weight-heavy);
  letter-spacing: 0.03em;
  border-radius: var(--yb-radius-full);
  padding: 0.24rem 0.7rem;
  line-height: 1;
}

.yb-badge-brand  { background: var(--yb-violet-soft); color: var(--yb-violet); }
.yb-badge-green  { background: var(--yb-green-soft);  color: var(--yb-green); }
.yb-badge-amber  { background: var(--yb-amber-soft);  color: var(--yb-amber); }
.yb-badge-rose   { background: var(--yb-rose-soft);   color: var(--yb-rose); }
.yb-badge-sky    { background: var(--yb-sky-soft);    color: var(--yb-sky-mid); }
.yb-badge-live   { background: var(--yb-grad-warm);   color: var(--yb-white); }
.yb-badge-dark   { background: var(--yb-ink-900);     color: var(--yb-white); }

/* Status badges (used in dashboard) */
.yb-status         { display: inline-flex; align-items: center; gap: var(--yb-space-1); }
.yb-status-dot     { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.yb-status-pending  { background: var(--yb-status-pending-bg);  color: var(--yb-status-pending-text); }
.yb-status-approved { background: var(--yb-status-approved-bg); color: var(--yb-status-approved-text); }
.yb-status-paid     { background: var(--yb-status-paid-bg);     color: var(--yb-status-paid-text); }
.yb-status-rejected { background: var(--yb-status-error-bg);    color: var(--yb-status-error-text); }

.yb-status-pending  .yb-status-dot { background: var(--yb-amber); }
.yb-status-approved .yb-status-dot { background: var(--yb-green); }
.yb-status-paid     .yb-status-dot { background: var(--yb-violet); }
.yb-status-rejected .yb-status-dot { background: var(--yb-rose); }


/* ============================================================
   CARD SYSTEM
   ============================================================ */

.yb-card {
  background: var(--yb-bg-surface);
  border: 1.5px solid var(--yb-border-base);
  border-radius: var(--yb-radius-xl);
  transition: var(--yb-transition-base);
}

.yb-card-hover:hover {
  border-color: var(--yb-violet-soft);
  box-shadow: var(--yb-shadow-md);
  transform: translateY(-3px);
}

.yb-card-dark {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px) saturate(160%);
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */

.yb-input {
  width: 100%;
  font-family: var(--yb-font-body);
  font-size: var(--yb-text-sm);
  color: var(--yb-text-primary);
  background: var(--yb-white);
  border: 1.5px solid var(--yb-border-base);
  border-radius: var(--yb-radius-lg);
  padding: 0.75rem 1rem;
  outline: none;
  transition: var(--yb-transition-fast);
  box-shadow: var(--yb-shadow-xs);
}

.yb-input:focus {
  border-color: var(--yb-violet-mid);
  box-shadow: var(--yb-ring-brand), var(--yb-shadow-xs);
}

.yb-input::placeholder { color: var(--yb-text-muted); }
.yb-input.is-error     { border-color: var(--yb-rose); box-shadow: var(--yb-ring-error); }

.yb-label {
  display: block;
  font-size: var(--yb-text-xs);
  font-weight: var(--yb-weight-bold);
  color: var(--yb-ink-700);
  margin-bottom: var(--yb-space-2);
  letter-spacing: 0.01em;
}

.yb-field { margin-bottom: var(--yb-space-5); }


/* ============================================================
   DIVIDERS
   ============================================================ */

.yb-divider {
  border: none;
  border-top: 1px solid var(--yb-border-base);
  margin: 0;
}

.yb-divider-subtle { border-top-color: var(--yb-border-subtle); }
.yb-divider-dark   { border-top-color: rgba(255, 255, 255, 0.08); }


/* ============================================================
   VISIBILITY UTILITIES
   ============================================================ */

.yb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.yb-hidden   { display: none !important; }
.yb-visible  { visibility: visible; }
.yb-invisible{ visibility: hidden; }


/* ============================================================
   SCROLL REVEAL (JS adds .is-visible)
   ============================================================ */

.yb-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s var(--yb-ease-out),
    transform 0.55s var(--yb-ease-out);
}

.yb-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.yb-reveal-delay-1 { transition-delay: 0.08s; }
.yb-reveal-delay-2 { transition-delay: 0.16s; }
.yb-reveal-delay-3 { transition-delay: 0.24s; }
.yb-reveal-delay-4 { transition-delay: 0.32s; }


/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */

@media (max-width: 768px) {
  .yb-hide-mobile { display: none !important; }
  .yb-grid-2, .yb-grid-3, .yb-grid-4 { grid-template-columns: 1fr; }
  .yb-container, .yb-container-wide { padding-left: var(--yb-space-4); padding-right: var(--yb-space-4); }
  .yb-section    { padding-top: var(--yb-space-12); padding-bottom: var(--yb-space-12); }
}

@media (min-width: 769px) {
  .yb-hide-desktop { display: none !important; }
}


/* ── Hide WP admin bar for non-admin users ── */
/* PHP show_admin_bar(false) handles this — CSS is a fallback */
body:not(.admin-bar) #wpadminbar { display: none !important; }
.yb-guest  #wpadminbar,
.yb-authed #wpadminbar { display: none !important; }