/* Theme palette */
:root {
    --c-dark-green: #1f3a26;
    --c-seashell: #fff8f3;
    --c-night: #0d0f0d;
    --c-reseda: #7b896f;
    --c-dim: #636363;
    --c-gold: #FEC700;
    --glass: linear-gradient(180deg, #fff9, #ffffff96 25%, #fff9 50%, #ffffffd6 75%);
}

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');



/* Global surfaces */
body {
    font-family: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
    background-color: var(--c-seashell);
}

a {
    color: var(--c-dark-green);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover, a:focus {
    color: var(--c-gold) !important;
    text-decoration: none;
    outline: none;
    background: none !important;
    font-weight: bold;
}



/* Focus visibility for keyboard users */
:focus-visible {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

/* Hide .sr-only visually but keep for screen readers; reveal on focus handled inline */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* Header */
header {
    background-color: var(--c-night) !important
}

/* Respect users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Custom styles to match the provided visual */
.hero-bg {
    background-size: cover;
    background-position: center;
    position: relative
}

.hero-bg:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .35))
}

.hero-bg>.container {
    position: relative;
    z-index: 1
}

.brand-strip {
    background: var(--c-reseda)
}

.brand-dot {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600
}

.brand-dot:before {
    content: "";
    width: .6rem;
    height: .6rem;
    border-radius: 9999px;
    background: var(--c-night);
    display: inline-block
}

/* Input group like the reference */
.input-group {
    display: flex
}

.input-group-input {
    flex: 1;
    height: 44px;
    border-radius: 8px 0 0 8px;
    border: 1px solid rgba(99, 99, 99, .45);
    background: var(--c-seashell);
    padding: 0 12px;
    color: var(--c-night)
}

.input-group-input::placeholder {
    color: #8b8b8b
}

.input-group-btn {
    height: 44px;
    padding: 0 16px;
    border-radius: 0 8px 8px 0;
    background: var(--c-dark-green);
    color: #fff;
    font-weight: 600
}

/* Card tweaks */
.badge {
    font-size: 11px;
    text-transform: uppercase;
    background: var(--c-night);
    color: #fff;
    padding: 4px 8px;
    border-radius: 8px
}

/* Award badge variants (applies to .award-badge and .badge) */
.award-badge { /* base for card overlay badges */
    font-size: 11px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--c-night);
    color: #fff;
}

.award-badge.is-grand-prix, .badge.is-grand-prix {
    background-color: #111827; /* gray-900 */
    color: var(--c-gold);
    border: 1px solid var(--c-gold);
}

.award-badge.is-gold, .badge.is-gold {
    background-color: var(--c-gold);
    color: #111; /* dark text on gold */
}

.award-badge.is-silver, .badge.is-silver {
    background-color: #9ca3af; /* gray-400 */
    color: #111;
}

.award-badge.is-bronze, .badge.is-bronze {
    background-color: #cd7f32; /* classic bronze */
    color: #fff;
}

.award-badge.is-shortlist, .badge.is-shortlist {
    background-color: #374151; /* gray-700 */
    color: #fff;
}

.award-badge.is-winner, .badge.is-winner {
    background-color: #111827; /* gray-900 */
    color: #fff;
}

.award-badge.is-popular, .badge.is-popular {
    background-color: #7c3aed; /* purple-600 */
    color: #fff;
}

/* New: Entry variant */
.award-badge.is-entry, .badge.is-entry {
    background-color: #2563eb; /* blue-600 */
    color: #fff;
}

/* Reusable card component for grids */
.card {
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .10);
    border-color: #d1d5db;
}

.card:focus-within {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(254, 199, 0, .35);
    border-color: var(--c-gold);
}

.card-media {
    position: relative;
    background: #f3f4f6;
    overflow: hidden;
}

/* Force square-cropped images; apply via class and to all card images */
.card-media img, .card-img-square {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    transition: transform .25s ease;
}

.card:hover .card-media img {
    transform: scale(1.03);
}

.card-body {
    padding: 16px;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.card-title a {
    color: #111827;
    text-decoration: none;
}

.card-title a:hover {
    text-decoration: none;
    background-color: transparent;
    color: var(--c-dark-green);
}

.card-meta {
    font-size: .875rem;
    color: #6b7280;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    background: #fff;
}

.btn-secondary:hover {
    border-color: #d1d5db;
}

.card-shadow {
    box-shadow: 0 6px 20px rgba(2, 6, 23, .06)
}

/* Select2 → match Tailwind form fields */
.select2-container {
    width: 100% !important
}

.select2-container .select2-selection--single {
    height: 44px;
    border: 1px solid rgba(99, 99, 99, .45);
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    color: var(--c-night)
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8b8b8b
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 8px
}

.select2-container--default .select2-selection__clear {
    display: none
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--c-night);
    box-shadow: 0 0 0 2px rgba(13, 15, 13, .15)
}

.select2-dropdown {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden
}

.select2-results__option {
    padding: 8px 12px
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--c-dark-green);
    color: #fff
}

.select2-search--dropdown .select2-search__field {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px
}

/* Remove overrides to Tailwind utility colors to preserve defaults */

/* Accent utilities */
.text-accent {
    color: var(--c-gold) !important
}

.bg-accent {
    background-color: var(--c-gold) !important
}

.border-accent {
    border-color: var(--c-gold) !important
}

/* Accent for interactive states */
a:hover {
    color: var(--c-seashell);
    background-color: var(--c-reseda);
}

button:hover {
    border-color: var(--c-gold)
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(254, 199, 0, .35);
    border-color: var(--c-gold)
}

/* Header navigation — unify default, hover and active states across pages */
header nav a {
    background-color: var(--c-night) !important;
    color: var(--c-seashell) !important;
    border: 1px solid #fff !important;
    border-radius: 9999px !important; /* ensure pill shape regardless of utility classes */
    box-shadow: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Make icon containers neutral by default */
header nav a span {
    background-color: transparent !important;
}

/* Icon color follows link color */
header nav a i {
    color: inherit !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Hover and Active should look identical */
header nav a:hover,
header nav a.nav-active {
    background-color: var(--c-reseda) !important;
    color: var(--c-seashell) !important;
    border-color: var(--c-reseda) !important;
}

/* Ensure icon color matches on hover/active */
header nav a:hover i,
header nav a.nav-active i {
    color: var(--c-seashell) !important;
}


@keyframes floatXY {
    0%   { transform: translate(0, 0); }
    12%  { transform: translate(-2px, 2px); }
    22%  { transform: translate(-3px, 5px);}
    32%  { transform: translate(-1px, 2px);}
    42%  { transform: translate(2px, -1px);}
    50%  { transform: translate(2px, -3px);}
    62%  { transform: translate(3px, 1px);}
    75%  { transform: translate(-2px, 1px);}
    85%  { transform: translate(1px, 2px);}
    100% { transform: translate(0, 0); }
  }
  .animate-float {
    animation: floatXY 3s ease-in-out infinite;
    will-change: transform;
  }