/* =============================================================================
   Chasa — landing page styles
   Loaded only by the SaaS marketing layout (Views/layouts/landing.php).
   Phase 0 of the SaaS roadmap. See CLAUDE.md "SaaS roadmap".
   ============================================================================= */

/* -------- Body & typography -------- */
body.rb-landing-body {
    margin: 0;
    background: #ffffff;
    color: #1a1a1a;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, Helvetica, Arial, sans-serif;
}

/* -------- Top navigation header -------- */
.rb-landing-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* -------- Brand wordmark -------- */
/*
 * Inline SVG of the Chasa wordmark (Comfortaa-derived paths) with the
 * chalet roof in Swiss-flag red. Wrapper `.rb-landing-logo` controls
 * sizing; `color` cascades into the SVG's `currentColor` glyph fills
 * so the same SVG renders dark on the navbar and white on the footer
 * (see .rb-landing-logo--footer below). Chalet roof colours are
 * hardcoded inside the SVG so they stay branded regardless of context.
 */
.rb-landing-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #2F2F2F;
    line-height: 1;
    /* `--logo-surface` paints the chalet roof's inner triangle the
       same colour as the surface the logo sits on, so the inner
       reads as negative space (the chalet's "open" interior) and
       only the red outline shows. Navbar default = white; footer
       overrides to the dark footer bg below. */
    --logo-surface: #ffffff;
}
.rb-landing-logo:hover {
    color: #2F2F2F;
}
.rb-chasa-logo {
    display: block;
    /* 2.5rem nav height matches the visual weight of the old
       NP Naipol wordmark at 1.75rem font-size. The 1024×300
       viewBox is ~3.4:1; width auto-scales from height. */
    height: 2.5rem;
    width: auto;
}
.rb-chasa-logo-inner {
    fill: var(--logo-surface);
}

/* -------- Language switcher (navbar) -------- */
.rb-landing-lang-btn {
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a1a;
    font-weight: 500;
    background: transparent;
}
.rb-landing-lang-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.18);
}
.rb-landing-lang .dropdown-menu {
    min-width: 11rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
}
.rb-landing-lang .dropdown-item.active {
    background: var(--bs-primary);
    color: #ffffff;
}
.rb-landing-lang .dropdown-item.active .text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* -------- Hero section -------- */
.rb-landing-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.rb-landing-hero h1 {
    letter-spacing: -0.02em;
}

/* -------- Coming-soon disabled CTA (placeholder until waitlist ships) -------- */
.rb-landing-hero .btn.disabled[aria-disabled='true'],
.rb-landing-header .btn.disabled[aria-disabled='true'] {
    cursor: default;
    pointer-events: none;
    opacity: 0.7;
}

/* -------- Features section -------- */
.rb-landing-features {
    background: #ffffff;
}
.rb-landing-feature {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rb-landing-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
}
.rb-landing-feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #dc1f26;        /* Swiss red — anchors features to the brand */
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rb-landing-feature-icon .material-symbols-outlined {
    font-size: 1.6rem;
    /* Optical-size axis hint — keeps the glyph crisp at this size */
    font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 0, 'GRAD' 0;
}
.rb-landing-feature h3 {
    color: #1a1a1a;
}

/* -------- Live demo section (booking widget iframe) -------- */
.rb-landing-demo {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.rb-landing-demo-frame {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.08);
}
#rb-demo-widget {
    display: block;
    width: 100%;
    border: 0;
    /* Initial guess; the postMessage listener overrides as soon as the
       iframe's widget.js measures and reports back. */
    min-height: 600px;
}

/* -------- Guest app preview section -------- */
.rb-landing-guest {
    background: #ffffff;
}
.rb-landing-guest .btn .material-symbols-outlined {
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 1, 'GRAD' 0;
}
.rb-landing-guest-feature {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rb-landing-guest-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.08);
}

/* -------- Pricing teaser section -------- */
.rb-landing-pricing {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* -------- Footer -------- */
.rb-landing-footer {
    background: #1a1a1a;
    color: #e5e5e5;
}
.rb-landing-footer h6 {
    color: #ffffff;
    letter-spacing: 0.04em;
}
.rb-landing-footer a {
    transition: color 0.15s ease;
}
.rb-landing-footer a:hover {
    color: #ffffff !important;
}
.rb-landing-footer .text-muted {
    color: #aaaaaa !important;
}
.rb-landing-footer hr {
    border-color: rgba(255, 255, 255, 0.1);
    opacity: 1;
}
.rb-landing-logo--footer {
    color: #ffffff;
    /* Match .rb-landing-footer background so the chalet's inner
       triangle reads as negative space against the dark footer. */
    --logo-surface: #1a1a1a;
}
.rb-landing-logo--footer:hover {
    color: #ffffff;
}
/* Footer logo: slightly larger to anchor the column visually. */
.rb-landing-logo--footer .rb-chasa-logo {
    height: 3rem;
}

/* -------- Policy pages (Terms / Privacy / Cancellation) -------- */
.rb-landing-policy {
    background: #ffffff;
}
.rb-landing-policy-body p { line-height: 1.7; }
.rb-landing-policy-body h2,
.rb-landing-policy-body h3 {
    margin-top: 2rem;
    font-weight: 700;
}
.rb-landing-policy-body ul,
.rb-landing-policy-body ol {
    line-height: 1.7;
}
.rb-landing-policy-body .alert {
    margin: 1.5rem 0;
}