/* =========================================================
   ClaimOwl Theme (single source of truth)
   Put this in: /site/templates/theme.css
   Load from _head.php
========================================================= */

/* -------------------------
   1) Brand tokens
------------------------- */
:root {
  /* ClaimOwl 3-tone yellow system */
  --claimowl: #F0CD54;
  --claimowl-strong: #E2B93F;
  --claimowl-soft: #FAF1C9;

  /* Text/ink */
  --claimowl-ink: #1F2937;

  /* Supporting neutrals (use these instead of hardcoded hex) */
  --surface: #FDFBF7;
  --card: #FFFFFF;
  --muted: #6B7280;      /* gray-500-ish */
  --border: #E5E7EB;     /* gray-200-ish */

  /* Optional darker heading colour */
  --navy: #0A2540;

  /* RGB helper for rgba() uses */
  --claimowl-rgb: 240, 205, 84;

  /* Strict mode: prevent old brand vars from silently working */
  --impakt: initial;
  --impakt-soft: initial;
  --impakt-ink: initial;
  
   --tp-star: #00b67a;     /* Trustpilot green (keep for authenticity) */
  --tp-star-off: #e5e7eb; /* gray */
}

/* -------------------------
   2) Base helpers
------------------------- */
.bg-surface { background: var(--surface); }
.bg-card { background: var(--card); }
.text-ink { color: var(--claimowl-ink); }
.text-muted { color: var(--muted); }
.text-navy { color: var(--navy); }
.border-default { border-color: var(--border); }

.ring-claimowl:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--claimowl-rgb), 0.35);
}

/* -------------------------
   3) Buttons
   Use: class="btn btn-primary"
------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  border-radius: 0.75rem; /* rounded-xl */
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease, opacity .15s ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.btn-primary {
  background: var(--claimowl);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
}
.btn-primary:hover { background: var(--claimowl-strong); }

.btn-outline {
  background: transparent;
  color: var(--claimowl-ink);
  border: 2px solid rgba(var(--claimowl-rgb), 0.55);
}
.btn-outline:hover { background: rgba(var(--claimowl-rgb), 0.12); }

.btn-soft {
  background: var(--claimowl-soft);
  color: var(--claimowl-ink);
}
.btn-soft:hover { background: rgba(var(--claimowl-rgb), 0.22); }

/* Sizes (optional) */
.btn-lg { padding: 1.25rem 2.5rem; font-size: 1.25rem; } /* py-5 px-10 text-xl */
.btn-md { padding: .9rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .65rem 1rem; font-size: .95rem; border-radius: .65rem; }

/* Focus ring (apply to any .btn) */
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--claimowl-rgb), 0.35);
}

/* -------------------------
   4) Panels / highlights / badges
------------------------- */
.panel-soft {
  background: var(--claimowl-soft);
  border: 1px solid rgba(var(--claimowl-rgb), 0.35);
  border-radius: 1rem;
}

.badge-claimowl {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .875rem;
  background: rgba(var(--claimowl-rgb), 0.20);
  color: var(--claimowl-ink);
  border: 1px solid rgba(var(--claimowl-rgb), 0.35);
}

/* Links */
a.link-claimowl {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: rgba(var(--claimowl-rgb), 0.75);
  text-underline-offset: 3px;
}
a.link-claimowl:hover {
  text-decoration-color: rgba(var(--claimowl-rgb), 1);
}

/* -------------------------
   5) Form accents (optional)
------------------------- */
.input-claimowl:focus {
  outline: none;
  border-color: rgba(var(--claimowl-rgb), 0.75);
  box-shadow: 0 0 0 4px rgba(var(--claimowl-rgb), 0.25);
}

/* Optional: selection highlight */
::selection {
  background: rgba(var(--claimowl-rgb), 0.35);
}

.hero-badge {
  color: var(--claimowl);
  text-transform: uppercase;
  letter-spacing: .08em;
}