@layer base {
    :root {
        --background: 222 47% 4%;
        --foreground: 210 40% 98%;
        --card: 222 47% 7%;
        --card-foreground: 210 40% 98%;
        --popover: 222 47% 7%;
        --popover-foreground: 210 40% 98%;
        --primary: 222 47% 4%;
        --primary-foreground: 210 40% 98%;
        --secondary: 217 33% 17%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217 33% 17%;
        --muted-foreground: 215 20% 65%;
        --accent: 217 33% 17%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 63% 50%;
        --destructive-foreground: 210 40% 98%;
        --border: 217 33% 17%;
        --input: 217 33% 17%;
        --ring: 224 71% 4%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 60%;
        --radius: 0.5rem;
    }
}

@layer utilities {
    .animate-fade-up {
        animation: fadeUp 0.6s ease-out forwards;
    }

    .animate-fade-out {
        animation: fadeOut 0.5s ease-in forwards;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-10px);
        }
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ------------------------------------------------------------------
   Brand typography
   ------------------------------------------------------------------ */
html body {
    font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-rendering: optimizeLegibility;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-family: 'Sora', 'Manrope', ui-sans-serif, system-ui, sans-serif;
}

/* Premium white-to-gold gradient for the main page headings */
.text-gradient-gold {
    display: inline-block;
    max-width: 100%;
    background-image: linear-gradient(92deg, #ffffff 0%, #f4f6f8 48%, #f3d28c 78%, #d6a84b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Fine gold rule used as an accent under small labels */
.accent-line {
    background-image: linear-gradient(90deg, #d6a84b 0%, rgba(214, 168, 75, 0) 100%);
}

/* Long copy: justified text, collapsed to 3 lines on small screens */
.read-more-content {
    text-align: justify;
    text-justify: inter-word;
}

@media (max-width: 1023.98px) {
    .read-more-content.is-collapsed {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.read-more-toggle .fa-chevron-down {
    transition: transform 0.25s ease;
}

.read-more-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* When the category chips leave a single item on the last mobile row, centre it */
@media (max-width: 639.98px) {
    .filter-chips > a:last-child:nth-child(odd) {
        grid-column: span 2;
        justify-self: center;
        max-width: 100%;
    }
}