/* Custom styles for Love Lab Landing Page */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Londrina+Solid:wght@100;300;400;900&display=swap');

.londrina-solid-thin {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.londrina-solid-light {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.londrina-solid-regular {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.londrina-solid-black {
    font-family: "Londrina Solid", sans-serif;
    font-weight: 900;
    font-style: normal;
}


.crimson-pro-light {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.crimson-pro-normal {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.crimson-pro-medium {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.crimson-pro-semibold {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.crimson-pro-bold {
    font-family: "Crimson Pro", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}


:root {
    --bulma-primary-h: 353deg;
    --bulma-primary-s: 43%;
    --bulma-primary-l: 96%;
    --bulma-scheme-h: 352;
    --bulma-scheme-s: 48%;
    --bulma-light-l: 46%;
    --bulma-link-h: 352deg;
    --bulma-link-s: 48%;
    --bulma-link-l: 46%;
    --bulma-light-h: 346deg;
    --bulma-light-s: 42%;
    --bulma-light-l: 86%;
    --bulma-white-h: 353deg;
    --bulma-white-s: 46%;
    --bulma-white-l: 96%;
    --bulma-dark-h: 240deg;
    --bulma-dark-2: 20%;
    --bulma-dark-l: 29%;

    --bulma-family-secondary: "Londrina Solid", "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --bulma-family-primary: "Crimson Pro", "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.title {
    font-family: var(--bulma-family-secondary) !important;
}

img.framed {
    padding: var(--bulma-size-6);
    border: 4px solid hsl(var(--bulma-scheme-main-h), var(--bulma-scheme-main-s), var(--bulma-scheme-main-l));
    box-shadow: var(--bulma-shadow);
    background-color: #fff;
}


/* Custom spacing utilities that extend Bulma */
.spacer-large {
    height: 100px;
}

/* CTA input container styling */
.cta-input-container {
    border-radius: 9999px;
    box-shadow: var(--bulma-box-shadow);
}

.input-transparent {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Availability panel styling */
.availability-box {
    border-radius: var(--bulma-radius-large);
    border: 2px solid hsl(var(--bulma-border-h), var(--bulma-border-s), var(--bulma-border-l));
}

/* Hidden utility */
.is-hidden {
    display: none !important;
}

/* Animation utilities for panels */
.panel-animate-in {
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease-out;
}

.panel-animate-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@keyframes waving-spotlight {
    0% {
        transform: rotate(0deg);
        /* Starting position */
    }

    50% {
        transform: rotate(20deg);
        /* Mid-point position */
    }

    100% {
        transform: rotate(0deg);
        /* Ending position (often same as start for oscillation) */
    }
}

/* Autocomplete dropdown styles - using Bulma utilities where possible */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: hsl(var(--bulma-scheme-main-h), var(--bulma-scheme-main-s), var(--bulma-scheme-main-l));
    border: 1px solid hsl(var(--bulma-border-h), var(--bulma-border-s), var(--bulma-border-l));
    border-radius: 0 0 var(--bulma-radius) var(--bulma-radius);
    box-shadow: var(--bulma-shadow);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

/* Show dropdown when input is focused and has suggestions */
.control:focus-within .autocomplete-dropdown.has-suggestions {
    display: block;
}

/* Hide dropdown when input is not focused */
.control:not(:focus-within) .autocomplete-dropdown {
    display: none !important;
}

/* Ensure dropdown items can receive focus/interaction */
.autocomplete-dropdown {
    pointer-events: auto;
}

.autocomplete-item {
    cursor: pointer;
    padding: 0.75rem 1rem; /* Bulma spacing values */
    border-bottom: 1px solid hsl(var(--bulma-border-weak-h), var(--bulma-border-weak-s), var(--bulma-border-weak-l));
    font-size: var(--bulma-size-small);
    transition: background-color var(--bulma-duration) ease;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
    color: hsl(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l));
}

.autocomplete-item:last-child {
    border-bottom: none;
}

/* Ensure parent containers have relative positioning for autocomplete */
.control {
    position: relative;
}

.control .input:focus + .autocomplete-dropdown {
    border-top: none;
}