/* =============================
   File: /assets/styles.css
   Description: Global theme vars + button components
   ============================= */

/* ---- Default fallbacks (used if no PHP injection present) ---- */
:root {
  --btn-bg: #eab308;           /* yellow-500 */
  --btn-bg-hover: #ca8a04;     /* yellow-600 */
  --btn-text: #0b0b0b;         /* near-black for legibility on yellow */
  --btn-ring: rgba(234,179,8,.45);

  --subtle-bg: rgba(255,255,255,.08);
  --subtle-bg-hover: rgba(255,255,255,.14);

  --soft-bg: rgba(234,179,8,.15);
  --soft-bg-hover: rgba(234,179,8,.25);

  --outline-text: #eab308;
}

/* =============================
   Theme-aware Chip (non-button)
   ============================= */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .625rem; /* smaller than .btn */
  border-radius: 9999px;   /* full pill */
  font-size: .75rem;       /* text-xs */
  font-weight: 600;
  line-height: 1.25;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}

/* ---- Button primitives (semantic, not tied to page context) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border-radius: .75rem;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600; line-height: 1.25;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--btn-ring); }

/* Variants */
.btn-subtle {
  background: var(--subtle-bg);
  color: #fff;
  border-color: transparent;
}
.btn-subtle:hover { background: var(--subtle-bg-hover); }

.btn-soft {
  background: var(--soft-bg);
  color: #fff;
}
.btn-soft:hover { background: var(--soft-bg-hover); }

.btn-outline {
  background: transparent;
  color: var(--outline-text);
  border-color: var(--outline-text);
}
.btn-outline:hover {
  background: color-mix(in oklab, var(--outline-text) 14%, transparent);
}

.btn-danger {
  background: #dc2626; /* red-600 */
  color: #fff;
}
.btn-danger:hover { background: #b91c1c; } /* red-700 */

/* Ghost/link styles for low emphasis actions */
.btn-ghost {
  background: transparent;
  color: var(--outline-text);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--subtle-bg); }

.btn-link {
  background: transparent;
  color: var(--outline-text);
  border: 1px solid transparent !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 0;
  box-shadow: none;
}
.btn-link:hover { opacity: .9; }

/* Sizes + shapes */
.btn-sm { padding: .375rem .75rem; font-size: .875rem; }
.btn-lg { padding: .75rem 1.25rem; font-size: 1rem; }
.btn-pill { border-radius: 9999px; }

/* Optional: icon sizing helper (SVGs) */
.btn > svg { width: 1.05em; height: 1.05em; }

/* Utility: full-width button if needed */
.btn-block { display: inline-flex; width: 100%; }

/* ---- Non-button helpers tied to theme vars ---- */
.badge-soft {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .5rem; border-radius: 9999px;
  background: var(--soft-bg); color: #fff; font-weight: 600; font-size: .75rem;
}

/* Cards (using theme colors) */
.resource-card {
  background-color: var(--btn-bg);
  border: 1px solid var(--outline-text);
  box-shadow: none;
}
.resource-card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,.3), 0 0 10px rgba(0,0,0,.5);
}
.resource-card-featured {
  border-color: var(--btn-ring);
  box-shadow: 0 0 10px var(--btn-ring);
  color: white;
}
.resource-card-featured:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 0 15px var(--btn-ring);
  color: white;
}
.resource-card-featured:active {
  box-shadow: 0 0 25px var(--btn-ring);
}

/* =============================
   Global Form Controls (scoped to .cv-forms)
   ============================= */

.cv-forms select,
.cv-forms input,
.cv-forms textarea { color-scheme: dark; }

:root{
  --cv-bg:#0b0f14;
  --cv-bg-hover:#0f1620;
  --cv-fg:#e6e8ec;
  --cv-fg-muted:#a8b0bb;
  --cv-border:rgba(255,255,255,0.12);
  --cv-border-focus:rgba(56,189,248,0.6);
  --cv-ring:rgba(56,189,248,0.25);
  --cv-radius:12px;
  --cv-py:10px;
  --cv-px:14px;
}

/* Inputs/Textareas */
.cv-forms input[type]:not([class*="bg-"]):not([class*="text-"]),
.cv-forms textarea:not([class*="bg-"]):not([class*="text-"]) {
  -webkit-appearance:none; appearance:none;
  background-color:var(--cv-bg) !important;
  color:var(--cv-fg) !important;
  border:1px solid var(--cv-border) !important;
  border-radius:var(--cv-radius) !important;
  padding:var(--cv-py) var(--cv-px) !important;
  outline:0 !important; width:100%;
  transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.cv-forms input::placeholder,
.cv-forms textarea::placeholder { color:var(--cv-fg-muted) !important; }
.cv-forms input:hover:not([class*="bg-"]),
.cv-forms textarea:hover:not([class*="bg-"]) { background-color:var(--cv-bg-hover) !important; }
.cv-forms input:focus,
.cv-forms textarea:focus {
  border-color:var(--cv-border-focus) !important;
  box-shadow:0 0 0 4px var(--cv-ring) !important;
}

/* Selects */
.cv-forms select:not([class*="bg-"]):not([class*="text-"]) {
  -webkit-appearance:none; appearance:none;
  background-color:var(--cv-bg) !important;
  color:var(--cv-fg) !important;
  border:1px solid var(--cv-border) !important;
  border-radius:var(--cv-radius) !important;
  padding:var(--cv-py) var(--cv-px) !important;
  outline:0 !important; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%23a8b0bb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  padding-right:42px !important;
}
.cv-forms select:hover:not([class*="bg-"]) { background-color:var(--cv-bg-hover) !important; }

.cv-forms input:disabled,
.cv-forms select:disabled,
.cv-forms textarea:disabled,
.cv-forms input[readonly],
.cv-forms textarea[readonly] { opacity:.6; cursor:not-allowed; }

/* Firefox-only */
@-moz-document url-prefix() {
  .cv-forms select:not([class*="bg-"]) option{
    background-color:#0e141b;
    color:var(--cv-fg);
  }
}

/* WebKit autofill */
.cv-forms input:-webkit-autofill{
  -webkit-text-fill-color:var(--cv-fg) !important;
  box-shadow:0 0 0px 1000px var(--cv-bg) inset !important;
  transition:background-color 5000s ease-in-out 0s;
}

/* Radios/checkboxes */
.cv-forms input[type="checkbox"], .cv-forms input[type="radio"]{ accent-color:#38bdf8; }

/* Force dark theme dropdowns */
select,
.bb-select {
  background-color: rgba(17, 24, 39, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  line-height: 1.25rem;
  appearance: none;
}
select option {
  background-color: #111827;
  color: #f9fafb;
}