/* ==========================================================================
   Lehua AI Theme
   Theme: Active with custom warm palette
   ========================================================================== */
html,
body {
    min-height: 100%;
    padding: 0;
    margin: 0;
}

/* --------------------------------------------------------------------------
   wa-page Configuration
   -------------------------------------------------------------------------- */
wa-page {
    --menu-width: 0;
}

wa-page::part(menu) {
    display: none;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
[slot="header"] {
    /* margin: var(--wa-space-2xl); */
    /* margin-block-end: 0; */
    /* margin-block-start: 0; */
    padding: var(--wa-space-xl);
    padding-block-end: var(--wa-space-xs);
    padding-block-start: var(--wa-space-xl);
}

wa-page::part(header) {
    background: var(--wa-color-neutral-fill-normal);
}

.logo {
    height: 50px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
[slot="footer"] {
    background: var(--wa-color-neutral-10);
    color: var(--wa-color-neutral-90);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
    padding: var(--wa-space-4xl) var(--wa-space-l);
}

.section-alt {
    background: var(--wa-color-neutral-5);
}

/* --------------------------------------------------------------------------
   Content Containers
   -------------------------------------------------------------------------- */
:root {
    --content-width-wide: 100ch;
    --content-width-medium: 85ch;
    --content-width-narrow: 65ch;
    --content-width-form: 65ch;
}

.content-wide {
    max-width: var(--content-width-wide);
    margin-inline: auto;
}

.content-medium {
    max-width: var(--content-width-medium);
    margin-inline: auto;
}

.content-narrow {
    max-width: var(--content-width-narrow);
    margin-inline: auto;
}

.content-form {
    max-width: var(--content-width-form);
    margin-inline: auto;
}

.wa-cluster:has(.check-icon) {
    flex-wrap: nowrap;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero-container {
    display: grid;
    align-items: center;
    justify-items: center;
    min-block-size: 85vh;
    overflow: hidden;
    border-radius: var(--wa-border-radius-l);
    margin: 0 var(--wa-space-m) var(--wa-space-m) var(--wa-space-m);
}

.hero-image,
.hero-content {
    grid-area: 1 / 1;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-content {
    z-index: 2;
    text-align: center;
    padding: var(--wa-space-2xl);
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-content h1 {
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.05em;
}

.hero-content p {
    color: white;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .hero-content .wa-cluster {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-icon {
    font-size: 3rem;
    color: var(--wa-color-brand-50);
}

.check-icon {
    color: var(--wa-color-success-50);
}

/* --------------------------------------------------------------------------
   Grid Layouts
   -------------------------------------------------------------------------- */
.grid-cards {
    --min-column-size: 300px;
}

.grid-cards-2col {
    --min-column-size: 300px;
}

/* --------------------------------------------------------------------------
   Contact Form
   -------------------------------------------------------------------------- */
.contact-success-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    max-width: 400px;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}