/* ==========================================================================
   Kneib.io Theme - Main Stylesheet
   Converted from React/Tailwind design
   ========================================================================== */

/* CSS Variables - Design Tokens */
:root {
    --background: 220 20% 6%;
    --foreground: 210 20% 95%;
    --card: 220 20% 10%;
    --card-foreground: 210 20% 95%;
    --popover: 220 20% 10%;
    --popover-foreground: 210 20% 95%;
    --primary: 175 80% 50%;
    --primary-foreground: 220 20% 6%;
    --secondary: 220 20% 14%;
    --secondary-foreground: 210 20% 95%;
    --muted: 220 20% 14%;
    --muted-foreground: 215 15% 55%;
    --accent: 175 80% 50%;
    --accent-foreground: 220 20% 6%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 220 20% 18%;
    --input: 220 20% 18%;
    --ring: 175 80% 50%;
    --radius: 0.5rem;
    
    /* Custom design tokens */
    --gradient-primary: linear-gradient(135deg, hsl(175 80% 50%) 0%, hsl(190 80% 45%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(220 20% 12%) 0%, hsl(220 20% 8%) 100%);
    --shadow-glow: 0 0 40px hsl(175 80% 50% / 0.15);
    --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.4);
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Inter', system-ui, sans-serif;
}

/* Base Styles */
* {
    box-sizing: border-box;
    border-color: hsl(var(--border));
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-sans);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    margin: 0;
}

code, pre {
    font-family: var(--font-mono);
}

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

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

/* Container */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 768px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* Utility Classes */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.hidden {
    display: none;
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }
    .md\:hidden {
        display: none;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:py-32 {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .md\:pt-8 {
        padding-top: 2rem;
    }
    .md\:pt-16 {
        padding-top: 4rem;
    }
    .md\:pb-12 {
        padding-bottom: 3rem;
    }
}

/* Typography */
.font-mono {
    font-family: var(--font-mono);
}

.font-sans {
    font-family: var(--font-sans);
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-5xl {
    font-size: 3rem;
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.leading-tight {
    line-height: 1.25;
}

.leading-relaxed {
    line-height: 1.625;
}

/* Colors */
.bg-background {
    background-color: hsl(var(--background));
}

.bg-card {
    background-color: hsl(var(--card));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.border-border {
    border-color: hsl(var(--border));
}

.border-b {
    border-bottom-width: 1px;
}

.border-t {
    border-top-width: 1px;
}

.border {
    border-width: 1px;
}

/* Spacing */
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.pt-6 {
    padding-top: 1.5rem;
}

.pt-8 {
    padding-top: 2rem;
}

.pt-12 {
    padding-top: 3rem;
}

.pt-16 {
    padding-top: 4rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pb-12 {
    padding-bottom: 3rem;
}

.pb-16 {
    padding-bottom: 4rem;
}

.pb-20 {
    padding-bottom: 5rem;
}

.pt-32 {
    padding-top: 8rem;
}

.pb-32 {
    padding-bottom: 8rem;
}

.pb-40 {
    padding-bottom: 10rem;
}

@media (min-width: 768px) {
    .md\:pt-16 {
        padding-top: 4rem;
    }
    
    .md\:pt-32 {
        padding-top: 8rem;
    }
    
    .md\:pb-20 {
        padding-bottom: 5rem;
    }
    
    .md\:pb-40 {
        padding-bottom: 10rem;
    }
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-16 { margin-top: 4rem; }

/* Layout */
.min-h-screen {
    min-height: 100vh;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-4xl {
    max-width: 56rem;
}

.w-full {
    width: 100%;
}

.h-4 {
    height: 1rem;
}

.h-5 {
    height: 1.25rem;
}

.h-10 {
    height: 2.5rem;
}

.w-1 {
    width: 0.25rem;
}

.w-4 {
    width: 1rem;
}

.w-10 {
    width: 2.5rem;
}

/* Border Radius */
.rounded-lg {
    border-radius: var(--radius);
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-t-lg {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

/* Positioning */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.left-2 {
    left: 0.5rem;
}

.right-2 {
    right: 0.5rem;
}

.bottom-3 {
    bottom: 0.75rem;
}

.top-1\/2 {
    top: 50%;
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

.-translate-x-1\/2 {
    transform: translateX(-50%);
}

.left-1\/2 {
    left: 50%;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

/* Object Fit */
.object-cover {
    object-fit: cover;
}

/* Aspect Ratio */
.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Transitions */
.transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

/* Hover States */
.hover\:opacity-80:hover {
    opacity: 0.8;
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

.hover\:text-foreground:hover {
    color: hsl(var(--foreground));
}

.hover\:bg-background:hover {
    background-color: hsl(var(--background));
}

.hover\:underline:hover {
    text-decoration: underline;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:text-primary {
    color: hsl(var(--primary));
}

.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* Opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* Cursor */
.cursor-pointer {
    cursor: pointer;
}

/* Focus States */
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:border-primary:focus {
    border-color: hsl(var(--primary));
}

.focus\:ring-1:focus {
    box-shadow: 0 0 0 1px hsl(var(--ring));
}

/* Placeholder */
.placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Resize */
.resize-none {
    resize: none;
}

/* Grid */
.grid {
    display: grid;
}

.gap-6 {
    gap: 1.5rem;
}

/* Space Y */
.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* Custom Components */

/* Tile Card */
.tile-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--card));
    transition: all 0.3s;
    box-shadow: var(--shadow-card);
}

.tile-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: var(--shadow-glow), var(--shadow-card);
    transform: translateY(-4px);
}

/* Gradient Text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow Line */
.glow-line {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
}

/* Carousel */
.tile-carousel {
    position: relative;
}

.carousel-slide {
    position: absolute;
    inset: 0;
    transition: opacity 0.5s;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 9999px;
    background-color: hsl(var(--background) / 0.8);
    padding: 0.375rem;
    color: hsl(var(--foreground));
    opacity: 0;
    backdrop-filter: blur(4px);
    transition: opacity 150ms;
    border: none;
    cursor: pointer;
    z-index: 20;
}

.carousel-prev {
    left: 0.5rem;
}

.carousel-next {
    right: 0.5rem;
}

/* Show arrows on hover of tile-card or carousel group */
.tile-card:hover .carousel-prev,
.tile-card:hover .carousel-next,
.tile-carousel.group:hover .carousel-prev,
.tile-carousel.group:hover .carousel-next {
    opacity: 1;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: hsl(var(--background));
}

.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 20;
}

.carousel-indicator {
    height: 0.25rem;
    width: 0.25rem;
    border-radius: 9999px;
    transition: all 150ms;
    border: none;
    cursor: pointer;
    background-color: hsl(var(--foreground) / 0.4);
    padding: 0;
}

.carousel-indicator:hover {
    background-color: hsl(var(--foreground) / 0.6);
}

.carousel-indicator.active {
    width: 1rem;
    background-color: hsl(var(--primary));
}

/* Carousel image overlay - card background fade from bottom to top over 60px */
.carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, hsl(var(--card)) 0%, transparent 100%);
    pointer-events: none;
    z-index: 10;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Prose (for content areas) */
.prose {
    color: hsl(var(--foreground));
}

.prose-invert {
    color: hsl(var(--foreground));
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose a {
    color: hsl(var(--primary));
    text-decoration: underline;
}

.prose a:hover {
    opacity: 0.8;
}

/* Text Center */
.text-center {
    text-align: center;
}

/* Inline Flex */
.inline-flex {
    display: inline-flex;
}

/* Flex Wrap */
.flex-wrap {
    flex-wrap: wrap;
}

/* Backdrop Blur */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Block */
.block {
    display: block;
}

/* Responsive Typography */
@media (min-width: 768px) {
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
}

@media (min-width: 1024px) {
    .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .lg\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
}

/* Form Styling - Comprehensive override for SilverStripe forms */
form.space-y-6 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Reset all form field containers */
form .field,
form .fieldgroup,
form .fieldgroup .field,
form .middleColumn,
form .fieldgroup .middleColumn,
form .fieldgroup > .field,
form .fieldgroup > div {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

form .field,
form .fieldgroup .field {
    display: flex;
    flex-direction: column;
}

form .fieldgroup {
    display: grid !important;
}

/* Labels styling - muted foreground color, NO background */
form label,
form .field label,
form .fieldgroup label,
form .fieldgroup .field label,
form .left label,
form .fieldgroup .left label,
form .fieldgroup .field .left label,
form .field label.left,
form .fieldgroup .field label.left {
    display: block !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: hsl(var(--muted-foreground)) !important;
    font-weight: normal !important;
    padding: 0 !important;
    width: 100% !important;
    background: none !important;
    background-color: transparent !important;
}

/* Input and textarea styling - catch all possible selectors */
form input[type="text"],
form input[type="email"],
form textarea,
form .field input[type="text"],
form .field input[type="email"],
form .field textarea,
form .fieldgroup .field input[type="text"],
form .fieldgroup .field input[type="email"],
form .fieldgroup .field textarea,
form .middleColumn input[type="text"],
form .middleColumn input[type="email"],
form .middleColumn textarea,
form .fieldgroup .middleColumn input[type="text"],
form .fieldgroup .middleColumn input[type="email"],
form .fieldgroup .middleColumn textarea,
form input.bg-secondary,
form textarea.bg-secondary,
form .field input,
form .field textarea,
form .fieldgroup .field input,
form .fieldgroup .field textarea,
form input.text,
form input.email,
form textarea {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius) !important;
    border: 1px solid hsl(var(--border)) !important;
    background-color: hsl(var(--secondary)) !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--font-sans) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 1rem !important;
    transition: border-color 150ms, box-shadow 150ms !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus,
form .field input[type="text"]:focus,
form .field input[type="email"]:focus,
form .field textarea:focus,
form .fieldgroup .field input[type="text"]:focus,
form .fieldgroup .field input[type="email"]:focus,
form .fieldgroup .field textarea:focus,
form .middleColumn input[type="text"]:focus,
form .middleColumn input[type="email"]:focus,
form .middleColumn textarea:focus {
    outline: none !important;
    border-color: hsl(var(--primary)) !important;
    box-shadow: 0 0 0 1px hsl(var(--ring)) !important;
}

form input[type="text"]::placeholder,
form input[type="email"]::placeholder,
form textarea::placeholder,
form .field input[type="text"]::placeholder,
form .field input[type="email"]::placeholder,
form .field textarea::placeholder,
form .fieldgroup .field input[type="text"]::placeholder,
form .fieldgroup .field input[type="email"]::placeholder,
form .fieldgroup .field textarea::placeholder,
form .middleColumn input[type="text"]::placeholder,
form .middleColumn input[type="email"]::placeholder,
form .middleColumn textarea::placeholder {
    color: hsl(var(--muted-foreground)) !important;
    opacity: 1 !important;
}

form textarea,
form .field textarea,
form .fieldgroup .field textarea,
form .middleColumn textarea {
    resize: none !important;
    min-height: 120px !important;
}

form .Actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

form .Actions .field {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

form .Actions .middleColumn {
    padding: 0 !important;
    margin: 0 !important;
}

form button[type="submit"],
form input[type="submit"],
form .contact-form-submit,
form .Actions button,
form .Actions input[type="submit"],
form .Actions .field button,
form .Actions .field input[type="submit"],
form .Actions .middleColumn button,
form .Actions .middleColumn input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border-radius: var(--radius) !important;
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    padding: 0.75rem 1.5rem !important;
    font-family: var(--font-mono) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 150ms !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

/* Add send icon before button text - paper airplane icon */
form .contact-form-submit::before,
form button[type="submit"]::before,
form .Actions button::before,
form .Actions input[type="submit"]::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

form button[type="submit"]:hover,
form input[type="submit"]:hover,
form .contact-form-submit:hover,
form .Actions button:hover {
    opacity: 0.9 !important;
}

form button[type="submit"]:disabled,
form input[type="submit"]:disabled,
form .contact-form-submit:disabled,
form .Actions button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Grid layout for form fields */
form .fieldgroup {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
}

/* Ensure fieldgroup children are grid items */
form .fieldgroup > *,
form .fieldgroup .field {
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 768px) {
    form .fieldgroup.fieldgroup-two-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    form .fieldgroup.fieldgroup-two-columns > *,
    form .fieldgroup.fieldgroup-two-columns .field {
        width: 100% !important;
    }
}

/* Form field wrapper styling */
form .fieldgroup .field {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Remove default SilverStripe form styling */
form .field input,
form .field textarea,
form .fieldgroup .field input,
form .fieldgroup .field textarea,
form .middleColumn input,
form .middleColumn textarea {
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Remove SilverStripe's default field wrapper styling */
form .field .middleColumn,
form .fieldgroup .field .middleColumn,
form .fieldgroup .middleColumn {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Remove any table-based layouts SilverStripe might use */
form .fieldgroup table,
form .fieldgroup .field table {
    width: 100% !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

form .fieldgroup td,
form .fieldgroup .field td {
    padding: 0 !important;
    border: none !important;
    vertical-align: top !important;
}

/* Force gray background on ALL form inputs - most aggressive override */
form input,
form textarea,
form select,
form input[type],
form textarea[type] {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--foreground)) !important;
}

/* Error messages */
form .message,
form .error {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
}

form .message.bad,
form .error {
    background-color: hsl(var(--destructive) / 0.1);
    color: hsl(var(--destructive-foreground));
    border: 1px solid hsl(var(--destructive));
}

form .message.good {
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--primary));
}

/* Ensure form fields don't have white backgrounds from browser defaults */
form input:-webkit-autofill,
form input:-webkit-autofill:hover,
form input:-webkit-autofill:focus,
form textarea:-webkit-autofill,
form textarea:-webkit-autofill:hover,
form textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px hsl(var(--secondary)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
    background-color: hsl(var(--secondary)) !important;
}

/* Mobile menu */
.mobile-menu {
    display: none;
}

@media (max-width: 767px) {
    header.mobile-menu-open .mobile-menu {
        display: block;
    }
}

header.mobile-menu-open .menu-icon-close {
    display: none;
}

header.mobile-menu-open .menu-icon-open {
    display: block;
}