/* 
 * Custom font definitions for Casa Kaire
 * Using Fontshare CDN fonts with names matching Webflow CSS expectations
 */

/* Zodiak Variable - using Fontshare CDN but with Webflow-expected name */
body {
    font-family: 'Cabinet Grotesk', sans-serif;
}

@font-face {
    font-family: 'Zodiak Variable';
    src: url('https://cdn.fontshare.com/wf/ECUEQQ5BLZLFJS3PPLWOEEVS7SQONQMH/WNTXEMDDVWUVWDURRKDXCJC6G7TMP277/TBWKTFSYABV4KN4GNIJMAOQUOTYBUWB3.woff2') format('woff2'),
        url('https://cdn.fontshare.com/wf/ECUEQQ5BLZLFJS3PPLWOEEVS7SQONQMH/WNTXEMDDVWUVWDURRKDXCJC6G7TMP277/TBWKTFSYABV4KN4GNIJMAOQUOTYBUWB3.woff') format('woff');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Zodiak Variable';
    src: url('https://cdn.fontshare.com/wf/63K42MQSJZ57SBX4XJ4J7L4M5IM6V2HQ/DTT4Y5AJV6DYRVZQST5O4K2E6SESQNV3/VGG36BIEB6ODAX4ZN7UV43FK742PFGDV.woff2') format('woff2'),
        url('https://cdn.fontshare.com/wf/63K42MQSJZ57SBX4XJ4J7L4M5IM6V2HQ/DTT4Y5AJV6DYRVZQST5O4K2E6SESQNV3/VGG36BIEB6ODAX4ZN7UV43FK742PFGDV.woff') format('woff');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}



/* Centering Content in Feature Sections */
.features_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Ensure the text container is also centered */
.features_content .max-width-small {
    margin-left: auto;
    margin-right: auto;
}

/* Separator Implementation */
.custom-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 10px auto 30px auto;
    width: 100%;
    max-width: 300px;
    color: #4a4a4a;
}

.features_content .custom-separator {
    color: currentColor;
}

.custom-separator .line {
    height: 1px;
    flex-grow: 1;
    background-color: currentColor;
    opacity: 0.4;
}

.custom-separator .star {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-separator .star svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Zodiak Font from Local Files */
@font-face {
    font-family: 'Zodiak-Regular';
    src: url('../fonts/Zodiak-Regular.woff2') format('woff2'),
        url('../fonts/Zodiak-Regular.woff') format('woff'),
        url('../fonts/Zodiak-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}


/* Apply Zodiak to Navigation */
.nav_link .text-size-regular,
.logo {
    font-family: 'Zodiak-Regular', sans-serif !important;
}

/* 
 * Text Readability Improvements 
 * Adds white text, shadows, and subtle gradients to ensure legibility over images/videos
 */

/* Hero Section Readability */
.cta_content-copy h3,
.cta_content-copy .cta_subtitle {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

/* Location Cards Readability */
.location_card {
    position: relative;
    /* Ensure sizing logic isn't broken by relative positioning if it wasn't already */
}

/* Gradient Overlay for Location Cards */
.location_card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    /* Cover slightly more than half to be safe */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    /* Inherit border radius from card if present */
}

/* Ensure text is above the gradient */
.location_card .heading-style-h2 {
    position: relative;
    z-index: 2;
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Gradient for Hero Section (if needed, but video overlay might exist) */
/* Checking HTML, .video-overlay exists, but we can enhance the text area specifically if needed. */
/* For now, the text shadow + white color should be enough for the hero if the video is dark enough, 
   but let's add a subtle bottom gradient to the cta_background for safety. */
.cta_background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}