/*
Theme Name: Best Choice
Theme URI: https://best-choice.test
Author: Best Choice
Author URI: https://best-choice.test
Description: Custom landing theme for the Best Choice award homepage.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: best-choice
*/

@font-face {
  font-family: 'Comfortaa';
  src: url('assets/fonts/comfortaa-variable.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue';
  src: url('assets/fonts/bebas-neue-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'KabelC';
  src: url('assets/fonts/kabelc-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: oklch(99% 0.004 92);
  --surface: oklch(100% 0.001 92);
  --fg: oklch(36% 0.026 70);
  --muted: oklch(58% 0.024 72);
  --border: oklch(90% 0.017 82);
  --accent: oklch(68% 0.145 82);

  --accent-deep: color-mix(in oklch, var(--accent) 68%, var(--fg));
  --accent-light: color-mix(in oklch, var(--accent) 52%, var(--surface));
  --accent-wash: color-mix(in oklch, var(--accent) 14%, var(--surface));
  --accent-line: color-mix(in oklch, var(--accent) 30%, var(--border));
  --muted-soft: color-mix(in oklch, var(--muted) 68%, var(--surface));
  --shadow-gold: color-mix(in oklch, var(--accent-deep) 22%, transparent);
  --shadow-panel: color-mix(in oklch, var(--accent) 16%, transparent);
  --shadow-tab: color-mix(in oklch, var(--fg) 8%, transparent);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: 'Comfortaa', system-ui, sans-serif;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

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

.page-shell {
  width: 100%;
  overflow: hidden;
  background: var(--surface);
}

.page-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.gold-text {
  background-image: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 72%, var(--surface)) 0%,
    var(--accent) 36%,
    var(--accent-deep) 62%,
    color-mix(in oklch, var(--accent) 78%, var(--surface)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gold-button {
  background-image: linear-gradient(
    90deg,
    var(--accent-light) 0%,
    var(--accent) 55%,
    var(--accent-deep) 100%
  );
  clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%);
}

.gold-button-left {
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}

.panel-card-bg {
  background-image: linear-gradient(
    180deg,
    color-mix(in oklch, var(--surface) 98%, transparent) 0%,
    color-mix(in oklch, var(--accent-wash) 96%, transparent) 100%
  );
}

.progress-fill {
  background-image: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 72%, var(--surface)) 0%,
    var(--accent) 36%,
    var(--accent-deep) 62%,
    color-mix(in oklch, var(--accent) 78%, var(--surface)) 100%
  );
}

.soft-card {
  background-image: linear-gradient(180deg, var(--surface) 0%, var(--accent-wash) 100%);
}

.footer-gradient {
  background-image: linear-gradient(180deg, var(--surface) 0%, var(--accent-deep) 100%);
}