/*
 * app-shell.css - the app frame: locked viewport, inner scroll container,
 * floating header pill, bottom nav, off-canvas menu and the loader.
 *
 * Only for pages that use the app shell. A standalone landing must NOT load
 * this file: it locks scrolling on html and body.
 */

html, body {
    height: 100%;
    overflow: hidden;
    background-color: var(--cn-background-color);
    /* Brand backdrop: the gradient lives here, not on the hero, so it also
       shows behind the header pill (as in the approved mockup). Sections with
       a solid background cover it as the page scrolls. */
    background-image: var(--cn-gradient-hero);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100vh;
    background-size: 100% 100dvh;
}

.cn-app-viewport {
    animation: cn-fade-in 0.5s ease 0.55s both;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* avoids the jump from the mobile address bar */
    width: 100%;
    position: relative;
}

.cn-scroll-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;   /* fixes the horizontal bar that 100vw was causing */
    padding-top: var(--cn-scroll-pad-top);
    padding-bottom: 0;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   APP HEADER  (floating pill)
   ========================================================================== */
.cn-app-header {
    position: fixed;
    top: var(--cn-header-top);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: 1100px;
    height: var(--cn-header-h);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 40px;
    box-sizing: border-box;
    z-index: 100;

    /* Frosted glass over the gradient */
    background-color: var(--cn-glass-bg);
    backdrop-filter: blur(var(--cn-glass-blur));
    -webkit-backdrop-filter: blur(var(--cn-glass-blur));
    border: 1px solid var(--cn-glass-border);
    box-shadow: var(--cn-shadow-soft);
    transition: all 0.3s ease;
}

@media (min-width: 769px) {
    .cn-app-header {
        top: 20px;
        height: 72px;
        padding: 0 28px;
    }
}

.cn-logo-container,
.cn-logo-container a {
    display: flex;
    align-items: center;
    line-height: 0;
}

/* Icon-only mark (lotus, or lotus in a circle) */
.cn-logo-svg {
    width: 60px;
    height: 60px;
    color: var(--cn-lotus-color);
    display: block;
    transition: color 0.3s ease;
}

/* Horizontal header lockup: fixed height, proportional width. The lotus uses
   currentColor (coral), the wordmark --cn-secondary-color (indigo). */
.cn-logo-svg-full {
    width: auto;
    height: 19px;
}

@media (min-width: 769px) {
    .cn-logo-svg-full { height: 22px; }
}

/* Text-only wordmark: vectors lifted from the horizontal lockup, in indigo.
   The manual gives it an 18px minimum height in digital; here it runs 20/26px. */
.cn-logo-svg-wordmark {
    width: auto;
    height: 18px;   /* the manual's minimum for the wordmark in digital */
    color: var(--cn-text-color);
}

@media (min-width: 769px) {
    .cn-logo-svg-wordmark { height: 22px; }
}

.cn-menu-toggle {
    display: flex;
    align-items: center;
    color: var(--cn-text-color);
    cursor: pointer;
}

/* ==========================================================================
   LOADER AND LOTUS ASSEMBLY
   --------------------------------------------------------------------------
   The lotus assembles petal by petal, clockwise from the centre petal. It is
   all CSS, and the content is always in the HTML, so if anything fails the
   page still looks the same, just without the animation.
   ========================================================================== */
@keyframes cn-petal-in {
    from { opacity: 0; transform: rotate(-35deg) scale(0.35); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes cn-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes cn-loader-out {
    to { opacity: 0; visibility: hidden; }
}

/* Petals: rotate and grow out from the base of the flower */
.cn-lotus-anim path {
    transform-box: view-box;
    transform-origin: 198px 268px;
    animation: cn-petal-in 0.28s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.cn-lotus-anim .cn-petal-1 { animation-delay: 0s; }
.cn-lotus-anim .cn-petal-2 { animation-delay: 0.07s; }
.cn-lotus-anim .cn-petal-3 { animation-delay: 0.14s; }
.cn-lotus-anim .cn-petal-4 { animation-delay: 0.21s; }
.cn-lotus-anim .cn-petal-5 { animation-delay: 0.28s; }

/* Loading veil: takes itself out at 0.62s and stops intercepting input */
.cn-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cn-gradient-hero);
    animation: cn-loader-out 0.35s ease 0.62s forwards;
}

.cn-loader .cn-logo-svg {
    width: 96px;
    height: 96px;
    color: var(--cn-coral);
}

/* Hero lotus: enters once the veil is gone */
.cn-hero-lotus {
    display: flex;
    justify-content: center;
    animation: cn-fade-in 0.6s ease 0.9s both;
}

.cn-hero-lotus .cn-logo-svg {
    width: 72px;
    height: 72px;
    color: var(--cn-coral);
}

.cn-hero-lotus .cn-lotus-anim path { animation: none; opacity: 1; }

/* Later visits in the same session: no veil, no waiting */
.cn-no-loader .cn-loader { display: none; }
.cn-no-loader .cn-app-viewport,
.cn-no-loader .cn-hero-lotus { animation: none; }

/* Anyone who asked for reduced motion sees none of this */
@media (prefers-reduced-motion: reduce) {
    .cn-loader { display: none; }
    .cn-app-viewport,
    .cn-hero-lotus,
    .cn-lotus-anim path { animation: none; opacity: 1; }
}

/* ==========================================================================
   SCROLL CONTAINER SPACING
   ========================================================================== */
/* The last section on every page has to clear the bottom bar */
.cn-scroll-container > *:last-child {
    padding-bottom: var(--cn-scroll-pad-bottom);
}

/* ==========================================================================
   BOTTOM APP NAVIGATION
   ========================================================================== */

/* Mobile/Default - Full Width */
.cn-app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--cn-footer-h);
    z-index: 100;
    transition: all 0.3s ease;

    /* Same glass as the pill above */
    background-color: var(--cn-glass-bg);
    backdrop-filter: blur(var(--cn-glass-blur));
    -webkit-backdrop-filter: blur(var(--cn-glass-blur));
    border-top: 1px solid var(--cn-glass-border);
}

.cn-bottom-nav-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    margin: 10px auto;
    padding: 0 10px;
    list-style: none;
}

.cn-nav-item {
    flex: 1 1 0;
    position: relative;
    display: flex;
    justify-content: center;
}

/* Divider between cells: a short centred hairline, not an edge-to-edge border */
.cn-nav-item + .cn-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 34px;
    background-color: var(--cn-border-subtle);
}

.cn-nav-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--cn-text-color);
    transition: opacity 0.2s ease;
}

.cn-nav-item a:hover {
    opacity: 0.7; 
}

.cn-nav-icon svg {
    margin-bottom: 2px;
}

.cn-nav-label {
    font-size: 14px;
    padding-bottom: 10px;
}

/* Desktop - Floating Capsule */
@media (min-width: 769px) {
    .cn-app-footer {
        width: auto;
        min-width: 500px; 
        height: 90px; 
        bottom: 0;      /* sits flush on the bottom edge */
        left: 50%;
        transform: translateX(-50%);
        border-top: none;
        /* Rounded on top only: the bottom edge meets the viewport, so
           rounding it would leave two gaps at the corners. */
        border-radius: 60px 60px 0 0; 
        padding: 0; 
        margin: 0;      /* a margin on a fixed element still offsets it */
        z-index: 50;
        
        /* Same glass as the pill above */
        background-color: var(--cn-glass-bg);
        backdrop-filter: blur(var(--cn-glass-blur));
        -webkit-backdrop-filter: blur(var(--cn-glass-blur));
        border: 1px solid var(--cn-glass-border);
        border-bottom: none; 
        
        /* Layered Shadows for realistic 3D depth */
        box-shadow: 
            var(--cn-shadow-deep), 
            0 10px 15px rgba(42, 46, 109, 0.05), 
            inset 0 2px 3px rgba(255, 255, 255, 1); 
    }

    .cn-bottom-nav-list {
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    .cn-nav-item {
        flex: 0 0 160px;
    }
    
    /* Adds a modern interactive lift on hover */
    .cn-nav-item a {
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease, color 0.2s ease;
    }

    .cn-nav-item a:hover {
        opacity: 1;
        transform: translateY(-4px); 
        color: var(--cn-cta-color); 
    }
}

/* ==========================================================================
   OFF-CANVAS OVERLAY MENU
   ========================================================================== */

.cn-app-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%; 
    width: 60vw;
    max-width: 400px;
    height: 100vh;
    background-color: var(--cn-primary-color);
    z-index: 9999; 
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    padding: 80px 30px 120px 30px; 
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    overflow-y: auto; 
    box-sizing: border-box; 
    opacity: 97%;
}

.cn-app-menu-overlay.is-active {
    right: 0;
}

.cn-menu-close {
    position: absolute;
    top: 25px;
    right: 25px;
    color: var(--cn-background-color);
    cursor: pointer;
    z-index: 2;
}

.cn-overlay-nav {
    margin-top: 40px;
}

/* WP Menu Specific Formatting */
.cn-offcanvas-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cn-offcanvas-menu-list li {
    margin: 0;
}

/* Base link styles & Flex alignment for the arrow */
.cn-offcanvas-menu-list a {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    color: var(--cn-background-color); 
    text-decoration: none;
    font-family: var(--cn-primary-font);
    font-size: 20px; 
    line-height: 1.6em;
    font-weight: normal; 
}

/* Sub-Menu Styling (Accordion Behavior) */
.cn-offcanvas-menu-list .sub-menu {
    list-style: none;
    padding-left: 20px;
    margin-top: 0; 
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid rgba(241, 241, 241, 0.3);
    
    /* The Animation Magic */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
}

/* Reveal sub-menu when JS adds .is-open class */
.cn-offcanvas-menu-list .menu-item-has-children.is-open > .sub-menu {
    max-height: 600px; 
    opacity: 1;
    margin-top: 15px; 
}

/* Sub-menu links */
.cn-offcanvas-menu-list .sub-menu a {
    font-size: 18px;
    opacity: 0.9;
    padding: 5px 0; /* Gives a little more touch-area for mobile */
}

/* Arrow Animations */
.cn-submenu-toggle {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease; 
}

.cn-offcanvas-menu-list .menu-item-has-children.is-open > a .cn-submenu-toggle {
    transform: rotate(180deg); 
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .cn-offcanvas-menu-list a { font-size: 18px; }
    .cn-offcanvas-menu-list .sub-menu a { font-size: 16px; }
}

@media (max-width: 768px) {
    .cn-offcanvas-menu-list a { font-size: 16px; }
    .cn-offcanvas-menu-list .sub-menu a { font-size: 14px; }
}