@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/ZauberCMS.Components/ZauberCMS.Components.v2qanyl1m6.bundle.scp.css';

/* /Layouts/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-0wl14gpgow] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0wl14gpgow] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.site-footer[b-0wl14gpgow] {
    background-color: var(--om-turquoise);
    color: var(--om-white);
    padding: 64px 80px 56px;
    font-family: var(--om-font-family);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
}

.site-footer__main[b-0wl14gpgow] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.site-footer__newsletter-wrap[b-0wl14gpgow] {
    flex: 0 0 46%;
}

.site-footer__newsletter[b-0wl14gpgow] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid rgba(241, 242, 243, 0.4);
    padding-bottom: 16px;
}

.site-footer__email[b-0wl14gpgow] {
    background: transparent;
    border: none;
    color: rgba(241, 242, 243, 0.6);
    font-family: var(--om-font-family);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
    outline: none;
    flex: 1;
}

.site-footer__email[b-0wl14gpgow]::placeholder {
    color: rgba(241, 242, 243, 0.6);
}

.site-footer__newsletter-btn[b-0wl14gpgow] {
    background: transparent;
    border: none;
    color: var(--om-white);
    font-family: var(--om-font-family);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    text-align: right;
}

.site-footer__newsletter-btn:hover[b-0wl14gpgow] {
    opacity: 0.7;
}

.site-footer__cols[b-0wl14gpgow] {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

.site-footer__col-title[b-0wl14gpgow] {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: var(--om-white);
    margin: 0 0 32px 0;
    font-family: var(--om-font-family);
}

.site-footer__nav nav[b-0wl14gpgow],
.site-footer__socials nav[b-0wl14gpgow] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__nav a[b-0wl14gpgow],
.site-footer__socials a[b-0wl14gpgow] {
    color: var(--om-white);
    text-decoration: none;
    font-family: var(--om-font-family);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
}

.site-footer__nav a:hover[b-0wl14gpgow],
.site-footer__socials a:hover[b-0wl14gpgow] {
    opacity: 0.7;
    color: var(--om-white);
}

.site-footer__bottom[b-0wl14gpgow] {
    display: flex;
    align-items: center;
}

.site-footer__logo[b-0wl14gpgow] {
    flex: 0 0 32%;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-footer__logo:hover[b-0wl14gpgow] {
    opacity: 0.7;
    text-decoration: none;
}

.site-footer__info[b-0wl14gpgow] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-footer__address[b-0wl14gpgow],
.site-footer__phone[b-0wl14gpgow] {
    font-family: var(--om-font-family);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: var(--om-white);
    margin: 0;
}

@media (max-width: 991px) {
    .site-footer[b-0wl14gpgow] {
        padding: 40px 30px;
    }

    .site-footer__main[b-0wl14gpgow] {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
    }

    .site-footer__newsletter-wrap[b-0wl14gpgow] {
        flex: 0 0 auto;
        width: 100%;
    }

    .site-footer__cols[b-0wl14gpgow] {
        gap: 40px;
    }

    .site-footer__bottom[b-0wl14gpgow] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-footer__logo[b-0wl14gpgow] {
        flex: 0 0 auto;
        width: auto;
    }

    .site-footer__info[b-0wl14gpgow] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Layouts/NavBar.razor.rz.scp.css */
/* ===================================================
   Site Navigation — Figma navbar component 2:2804
   Default variant: white links + white-fill CONTACT (hero pages)
   .site-nav--dark:  dark links/logo + dark-fill CONTACT (blog pages)
   =================================================== */

.site-nav[b-lodvfpuyrs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Over a light page section (JS adds .site-nav--dark on scroll, and blog pages
   render it server-side) the bar gets a translucent, blurred backdrop so the dark
   nav text + logo never collide with the page content scrolling underneath. Over
   dark heroes the bar stays fully transparent. */
.site-nav--dark[b-lodvfpuyrs] {
    pointer-events: auto;
    background-color: rgba(241, 242, 243, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(54, 54, 54, 0.08);
}

.site-nav__inner[b-lodvfpuyrs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 80px; /* Figma: px-[80px] py-[32px] */
    pointer-events: auto;
}

/* Logo — Figma: 150.955 × 56 desktop, 89 × 33 mobile (5:778) */
.site-nav__logo[b-lodvfpuyrs] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.site-nav__logo:hover[b-lodvfpuyrs] {
    opacity: 0.8;
    text-decoration: none;
}

.site-nav__logo[b-lodvfpuyrs]  .oasis-logo {
    width: 151px;
    height: 56px;
}

/* Smooth the light↔dark flip as the bar scrolls over a hero boundary. */
.site-nav__logo[b-lodvfpuyrs]  .oasis-logo img {
    transition: filter 0.2s ease;
}

.site-nav--dark .site-nav__logo[b-lodvfpuyrs]  .oasis-logo img {
    filter: brightness(0);
}

/* Desktop nav container — Figma: gap 64px between links block and CONTACT */
.site-nav__desktop[b-lodvfpuyrs] {
    display: flex;
    align-items: center;
    gap: 64px;
}

.site-nav__links[b-lodvfpuyrs] {
    display: flex;
    align-items: center;
    gap: 64px; /* Figma: gap-[64px] */
}

/*
 * Nav link states — Figma `navbar item` 2:3002 (note 1:1044):
 *   inactive → #f1f2f3 · hover → #363636 · click → #01657d
 * Current page (mockups 1:577 / 1:810): underlined, decoration from-font.
 */
.site-nav__link[b-lodvfpuyrs] {
    font-family: 'PP Editorial New', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.4px;
    line-height: 20px;
    color: #f1f2f3;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.site-nav__link:hover[b-lodvfpuyrs] {
    color: #363636;
    text-decoration: none;
}

.site-nav__link:active[b-lodvfpuyrs] {
    color: #01657d;
}

.site-nav__link--active[b-lodvfpuyrs],
.site-nav__link--active:hover[b-lodvfpuyrs] {
    color: #f1f2f3;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}

/* dark variant (blog pages): inactive #363636 · hover/click #01657d */
.site-nav--dark .site-nav__link[b-lodvfpuyrs] {
    color: #363636;
}

.site-nav--dark .site-nav__link:hover[b-lodvfpuyrs],
.site-nav--dark .site-nav__link:active[b-lodvfpuyrs] {
    color: #01657d;
}

.site-nav--dark .site-nav__link--active[b-lodvfpuyrs],
.site-nav--dark .site-nav__link--active:hover[b-lodvfpuyrs] {
    color: #363636;
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-position: from-font;
}

/*
 * CONTACT pill — Figma navbar 2:2804:
 *   Default variant → white fill #f1f2f3, dark text (2:2582)
 *   hover → black-fill button state (2:2579)
 *   click → turquoise fill (2:2593)
 *   dark variant → dark fill #363636, white text (2:2890)
 */
.site-nav__contact-btn[b-lodvfpuyrs] {
    font-family: 'PP Editorial New', Georgia, serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 20px;
    color: #363636;
    background-color: #f1f2f3;
    border: 0.5px solid #f1f2f3;
    border-radius: 28px;
    padding: 14px 24px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase; /* Figma: CONTACT */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.site-nav__contact-btn:hover[b-lodvfpuyrs] {
    background-color: #363636;
    border-color: #f1f2f3;
    color: #f1f2f3;
    text-decoration: none;
}

.site-nav__contact-btn:active[b-lodvfpuyrs] {
    background-color: #01657d;
    border-color: #f1f2f3;
    color: #f1f2f3;
}

/* dark variant CONTACT — Figma button 2:2588:
   state=default → outline (transparent fill, dark border + text)
   hover         → dark fill #363636, light text
   click         → turquoise fill #01657d, light text */
.site-nav--dark .site-nav__contact-btn[b-lodvfpuyrs] {
    background-color: transparent;
    border-color: #363636;
    color: #363636;
}

.site-nav--dark .site-nav__contact-btn:hover[b-lodvfpuyrs] {
    background-color: #363636;
    border-color: #363636;
    color: #f1f2f3;
}

.site-nav--dark .site-nav__contact-btn:active[b-lodvfpuyrs] {
    background-color: #01657d;
    border-color: #01657d;
    color: #f1f2f3;
}

/* Hamburger — Figma mobile navbar (5:812): 33 × 33, three thin lines */
.site-nav__hamburger[b-lodvfpuyrs] {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 33px;
    height: 33px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.site-nav__hamburger span[b-lodvfpuyrs] {
    display: block;
    width: 27px;
    height: 1.5px;
    background-color: #f1f2f3;
    border-radius: 1px;
    transition: background-color 0.2s ease;
}

.site-nav--dark .site-nav__hamburger span[b-lodvfpuyrs] {
    background-color: #363636;
}

/* ===================================================
   Mobile menu overlay — Figma Menu 5:849 / panel 5:922
   Dark panel inset 13px left/right, ~21px top/bottom;
   page stays visible (undimmed) around the edges.
   =================================================== */

.mobile-menu[b-lodvfpuyrs] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: transparent;
}

.mobile-menu__panel[b-lodvfpuyrs] {
    position: absolute;
    inset: 21px 13px; /* Figma: 348px panel on 375 viewport, 782px on 824 */
    background-color: #363636;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

/* Close — Figma 5:929: 66px hit area at top 35 / right 15,
   white 47px circle with a thin dark X */
.mobile-menu__close[b-lodvfpuyrs] {
    position: absolute;
    top: 35px;
    right: 15px;
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1;
}

.mobile-menu__close-circle[b-lodvfpuyrs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    background-color: #f1f2f3;
    border-radius: 50%;
}

/* Links — Figma 5:923: left 46 / top 135, gap 32, 24px/28px, +0.12px */
.mobile-menu__nav[b-lodvfpuyrs] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 135px 0 0 46px;
}

.mobile-menu__link[b-lodvfpuyrs] {
    font-family: 'PP Editorial New', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.12px;
    line-height: 28px;
    color: #f1f2f3;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.mobile-menu__link:hover[b-lodvfpuyrs] {
    color: #f1f2f3;
    text-decoration: none;
    opacity: 0.7;
}

/* Selected page — turquoise (nav-item activated colour, 1:1044) */
.mobile-menu__link--active[b-lodvfpuyrs],
.mobile-menu__link--active:hover[b-lodvfpuyrs] {
    color: #01657d;
    opacity: 1;
}

/* CONTACT pill — Figma 5:934: 118 × 35 at left 45 / bottom 52,
   0.32px white border, radius 28, 18px text */
.mobile-menu__contact-btn[b-lodvfpuyrs] {
    position: absolute;
    bottom: 52px;
    left: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    height: 35px;
    font-family: 'PP Editorial New', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.09px;
    line-height: 1;
    color: #f1f2f3;
    background: transparent;
    border: 0.32px solid #f1f2f3;
    border-radius: 28px;
    padding: 8px 20px;
    text-decoration: none;
    text-transform: uppercase; /* Figma: CONTACT */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-menu__contact-btn:hover[b-lodvfpuyrs] {
    background-color: #f1f2f3;
    color: #363636;
    text-decoration: none;
}

/* ===================================================
   Responsive — Mobile breakpoint
   =================================================== */

@media (max-width: 991px) {
    .site-nav__inner[b-lodvfpuyrs] {
        padding: 24px 30px; /* Figma 5:705: 30px side margins */
    }

    .site-nav__logo[b-lodvfpuyrs]  .oasis-logo {
        width: 89px;
        height: 33px;
    }

    .site-nav__desktop[b-lodvfpuyrs] {
        display: none;
    }

    .site-nav__hamburger[b-lodvfpuyrs] {
        display: flex;
    }
}
/* /Pages/HomeView.razor.rz.scp.css */
/* All component styles moved to Tailwind utility classes in HomeView.razor */

/* /Shared/OasisLogo.razor.rz.scp.css */
/*
  OasisLogo — assembles the multi-part SVG logo mark.
  Container is 89×33 px; all parts are positioned with percentages
  so the whole logo scales when you resize the container via CSS.

  Colour note: every SVG has fill="#F1F2F3" (near-white).
  Use the modifier class .oasis-logo--dark to invert to black
  when the logo appears on a light background.
*/

.oasis-logo[b-yppe1m2ovy] {
    position: relative;
    display: inline-block;
    width: 89px;
    height: 33px;
    flex-shrink: 0;
}

/* ---- boat icon ---- */
.oasis-logo__frame[b-yppe1m2ovy] {
    position: absolute;
    top: 0;
    left: 0;
    width: 32.03%;   /* 28.505 / 89 */
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

/* ---- shared letter base ---- */
.oasis-logo__letter[b-yppe1m2ovy] {
    position: absolute;
    object-fit: fill;
}

/* O */
.oasis-logo__o[b-yppe1m2ovy] {
    top: 34.43%;
    left: 39.11%;
    width: 9.83%;   /* 100 - 51.06 - 39.11 */
    height: 30.86%; /* 100 - 34.43 - 34.71 */
}

/* A */
.oasis-logo__a[b-yppe1m2ovy] {
    top: 43.71%;
    left: 48.55%;
    width: 6.85%;   /* 100 - 44.60 - 48.55 */
    height: 20.94%; /* 100 - 43.71 - 35.35 */
}

/* S (first) */
.oasis-logo__s1[b-yppe1m2ovy] {
    top: 43.5%;
    left: 55.93%;
    width: 4.94%;   /* 100 - 39.13 - 55.93 */
    height: 21.56%; /* 100 - 43.50 - 34.94 */
}

/* I */
.oasis-logo__i[b-yppe1m2ovy] {
    top: 43.93%;
    left: 62.03%;
    width: 2.86%;   /* 100 - 35.11 - 62.03 */
    height: 20.72%; /* 100 - 43.93 - 35.35 */
}

/* S (second) */
.oasis-logo__s2[b-yppe1m2ovy] {
    top: 43.5%;
    left: 66.3%;
    width: 4.93%;   /* 100 - 28.77 - 66.30 */
    height: 21.56%; /* 100 - 43.50 - 34.94 */
}

/* M */
.oasis-logo__m[b-yppe1m2ovy] {
    top: 43.93%;
    left: 75.91%;
    width: 8.60%;   /* 100 - 15.49 - 75.91 */
    height: 20.72%; /* 100 - 43.93 - 35.35 */
}

/* E */
.oasis-logo__e[b-yppe1m2ovy] {
    top: 43.93%;
    left: 85.48%;
    width: 6.26%;   /* 100 - 8.26 - 85.48 */
    height: 20.72%; /* 100 - 43.93 - 35.35 */
}

/* U */
.oasis-logo__u[b-yppe1m2ovy] {
    top: 43.93%;
    left: 92.51%;
    width: 7.49%;   /* 100 - 0 - 92.51 */
    height: 21.16%; /* 100 - 43.93 - 34.91 */
}

/* Dark variant — use when logo sits on a light background */
.oasis-logo--dark img[b-yppe1m2ovy] {
    filter: brightness(0);
}