body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}
/* ============================================================
   YRIVER.CSS — v2.0
   Mobile-first. Edit the :root block to retheme site-wide.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
    --blue:        #009ee1;
    --blue-dark:   #0077aa;
    --black:       #111111;
    --white:       #ffffff;
    --grey:        #666666;
    --grey-light:  #f4f6f8;

    --font:        'Georgia', sans-serif;

    /* Layout */
    --header-h:    90px;
    --content-max: 860px;
    --section-gap: clamp(3rem, 8vw, 7rem);
    --side-pad:    clamp(1.25rem, 5vw, 4rem);

    /* Typescale */
    --text-sm:     0.875rem;
    --text-base:   1rem;
    --text-lg:     1.125rem;
    --text-xl:     clamp(1.5rem, 4vw, 2.25rem);
    --text-2xl:    clamp(2rem, 5vw, 3rem);

    /* Radius */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-padding-top: var(--header-h);
}

body {
    margin: 0;
    padding-top: var(--header-h);
    font-family: var(--font);
    font-weight: 300;
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--black);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--blue); font-weight: 700; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4 {
    margin: 0 0 0.75em;
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-sm); color: var(--grey); }

p { margin: 0 0 1em; }

/* Invisible utility */
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ============================================================
   3. HEADER
   ============================================================ */
#header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    background: var(--white);
    border-bottom: 1px solid rgba(0,0,0,.08);
    z-index: 1000;
}

#header .inside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 var(--side-pad);
}

.logo { flex-shrink: 0; }
.logo img { width: clamp(120px, 20vw, 180px); }

.Yriver .logo img {
    width: 200px;
    height: auto;
    max-height: none; /* Removes the 50px restriction if needed */
}

.RW .logo img {
    width: 80px;
    height: auto;
    max-height: none; /* Removes the 50px restriction if needed */
}

/* ============================================================
   4. NAVIGATION — desktop
   ============================================================ */
.mod_onepage_navigation ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod_onepage_navigation li a {
    display: block;
    padding: 0.4em 0.9em;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--grey);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.mod_onepage_navigation li a:hover,
.mod_onepage_navigation li.active a {
    color: var(--blue);
    background: rgba(0,158,225,.08);
}

/* ============================================================
   5. HAMBURGER BUTTON (mobile only)
   ============================================================ */
.nav-toggler {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--blue);
}

.nav-toggler__button {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

.menu-icon {
    position: relative;
    display: block;
    width: 24px;
    height: 18px;
}

.menu-icon__inner,
.menu-icon__inner::before,
.menu-icon__inner::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--blue);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

.menu-icon__inner          { top: 50%; margin-top: -1px; }
.menu-icon__inner::before  { content: ''; top: -8px; width: 80%; right: 0; left: auto; }
.menu-icon__inner::after   { content: ''; bottom: -8px; width: 80%; right: 0; left: auto; }

.nav-toggler--active .menu-icon__inner          { transform: rotate(45deg); }
.nav-toggler--active .menu-icon__inner::before  { opacity: 0; }
.nav-toggler--active .menu-icon__inner::after   { transform: rotate(-90deg); bottom: 0; width: 100%; }

/* ============================================================
   6. MOBILE NAV OVERLAY (Smaller, Right-Aligned, Higher Up)
   ============================================================ */
@media (max-width: 768px) {
    .nav--mobile {
        display: none; /* hidden by default */
        position: fixed;
        top: 80px; /* Adjust this to match your header height */
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        z-index: 999;
        
        /* Layout for the container */
        flex-direction: column;
        align-items: flex-end; /* Align items to the right */
        justify-content: flex-start;
        padding-top: 5vh; /* Moves it higher (was 10vh) */
        padding-right: 10%; /* Keeps text away from the very edge */
    }

    /* Target the list specifically */
    .nav--mobile ul.onepage_navigation__list {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end; /* Ensure list items align right */
        gap: 1.25rem; /* Reduced space between items (was 2rem) */
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .nav--mobile ul li {
        width: auto; /* Shrink-wrap the width to the text size */
        text-align: right;
    }

    .nav--mobile ul li a {
        font-size: 1.1rem; /* Smaller font size (was 1.4rem) */
        font-weight: 700;
        color: #333;
        display: block;
        text-transform: lowercase; /* Matches your previous style */
    }

    /* Active state triggered by your JavaScript */
    .nav--mobile--active {
        display: flex !important;
    }
}

/* ============================================================
   7. SECTION LAYOUT — shared
   Each article = full-width block with constrained inner content
   ============================================================ */
.mod_article {
    padding: var(--section-gap) var(--side-pad);
}

.mod_article .inside,
.mod_article > * {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
}

/* Blue/dark sections */
.background_blue {
    background: var(--blue);
    color: var(--white);
}

.background_blue h1,
.background_blue h2,
.background_blue h3 { color: var(--white); }

.background_blue a { color: var(--white); font-weight: 700; }
.background_blue a:hover { text-decoration: underline; }

.background_blue p { color: rgba(255,255,255,.92); }

/* Section headline accent */
.ce_headline {
    padding-top: 0;
    padding-bottom: 0.5rem;
}

.ce_headline:not(.background_blue .ce_headline)::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.background_blue .ce_headline::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background: rgba(255,255,255,.5);
    border-radius: 2px;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

/* ============================================================
   8. HOME SECTION — hero-style intro
   ============================================================ */
#home.mod_article {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--header-h) + 2rem) var(--side-pad) var(--section-gap);
    background: var(--white);
}

#home .ce_image .image_container {
    margin: 0 auto 2rem;
}

#home .ce_image img {
    width: clamp(100px, 20vw, 160px);
    margin: 0 auto;
}

/* Home text blocks — clean prose, no squares */
#home .ce_text {
    max-width: 640px;
    margin: 0 auto 2.5rem;
}

#home .ce_text h1 {
    font-size: var(--text-xl);
    color: var(--blue);
    margin-bottom: 0.5rem;
}

#home .ce_text p {
    color: var(--grey);
    font-size: var(--text-lg);
}

/* Divider line between home blurbs */
#home .ce_text + .ce_text {
    border-top: 1px solid rgba(0,0,0,.07);
    padding-top: 2rem;
}

/* ============================================================
   9. RECEIPTS WORLD — product page variant
   The page has no nav, so hero treatment
   ============================================================ */
#home.mod_article.receipts-hero {
    min-height: auto;
    text-align: left;
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 3rem);
}

/* Product icon */
.receipts-hero .ce_image img {
    width: clamp(80px, 15vw, 120px);
    margin: 0 0 1.5rem;
}

/* Section blocks on receiptsworld */
.receipts-hero .ce_text { max-width: var(--content-max); }
.receipts-hero .ce_text + .ce_text { border-top: 1px solid rgba(0,0,0,.07); padding-top: 2rem; }

/* Download button / hyperlink */
.ce_hyperlink {
    display: flex;            /* Turns the container into a flexbox */
    justify-content: center;   /* Centers the child (the button) horizontally */
    align-items: center;       /* Centers it vertically if needed */
    width: 100%;               /* Ensures the container spans the full page width */
    max-width: 100% !important;/* Overrides any narrow constraints from other styles */
    margin: 2rem 0 3rem;       /* Adds breathing room above and below */
    padding: 0;
}

.ce_hyperlink a.hyperlink_txt {
    display: inline-block;
    text-align: center;
    padding: 0.7em 1.6em;
    background: var(--blue);
    color: var(--white);
    font-weight: 700;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    text-decoration: none;
    transition: background 0.2s;
}

.ce_hyperlink a:hover { background: var(--blue-dark); text-decoration: none; }

/* ============================================================
   10. WEB DESIGN SECTION
   ============================================================ */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.specs .ce_text {
    padding: 1.25rem 1.5rem;
    border-left: 3px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.1);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.specs .ce_text h3 { font-size: var(--text-base); margin-bottom: 0.5rem; }
.specs .ce_text p  { font-size: var(--text-sm); margin: 0; }

/* ============================================================
   11. GALLERY (examples & travel photos)
   ============================================================ */
.ce_gallery { margin-top: 2rem; }

.ce_gallery h1 {
    font-size: var(--text-xl);
    margin-bottom: 1rem;
}

.ce_gallery ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ce_gallery li { margin: 0; }

.ce_gallery .image_container { margin: 0; }

.ce_gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    border: 2px solid rgba(0,0,0,.06);
    transition: opacity 0.2s;
}

.ce_gallery img:hover { opacity: .88; }

.ce_gallery figcaption.caption {
    margin-top: 0.4rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: rgba(255,255,255,.8);
}

/* ============================================================
   12. TRAVEL PLANS section — light background variant
   ============================================================ */
#travelplans.mod_article {
    background: var(--grey-light);
}

#travelplans .ce_gallery img { border-color: rgba(0,0,0,.1); }

#travelplans figcaption.caption { color: var(--grey); }

/* ============================================================
   13. ABOUT SECTION
   ============================================================ */
#about .ce_text p { margin-bottom: 1.5rem; }

#about figure.image_container {
    margin: 1.5rem 0;
}

#about img {
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-lg);
}

/* ============================================================
   14. CONTACT / FORM SECTIONS
   ============================================================ */
/* #contact.mod_article {
    background: var(--blue);
    color: var(--white);
} */

#contact, #subscribe {
    min-height: calc(100vh - 147px);
}

#contact .details, #subscribe .details {
    font-size: var(--text-lg);
    margin-bottom: 0.5rem;
}

#contact .info, #subscribe .info {
    font-size: var(--text-xl);
    margin-bottom: 1.5rem;
}

/* Form wrapper */
.ce_form {
    background: rgba(255,255,255,.2);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

/* All widgets stack vertically */
.ce_form .widget {
    display: block;
    margin-bottom: 0.75rem;
}

/* Input & Textarea */
.ce_form input[type="text"],
.ce_form input[type="email"],
.ce_form input[type="url"] {
    display: block;
    width: 100%;
    padding: 0.65em 0.9em;
    font-family: var(--font);
    font-size: 1rem; /* prevents iOS zoom */
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.92);
    color: var(--black);
}

.ce_form textarea {
    display: block;
    width: 100%;
    padding: 0.65em 0.9em;
    font-family: var(--font);
    font-size: 1rem;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.92);
    color: var(--black);
    resize: vertical;
    min-height: 140px;
}

/* Submit button */
.widget-submit button[type="submit"],
div.widget-submit button[type="submit"] {
    display: inline-block;
    padding: 0.65em 2em;
    background: var(--white);
    color: var(--blue);
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 700;
    border: 2px solid var(--white);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-top: 0.5rem;
}

.widget-submit button[type="submit"]:hover {
    background: transparent;
    color: var(--white);
}

/* reCAPTCHA */
.grecaptcha-badge { visibility: hidden; }

/* Privacy note */
.ce_form + .ce_text,
#contact .ce_text:last-child {
    margin-top: 1rem;
    font-size: var(--text-sm);
    color: rgba(255,255,255,.75);
}

.ce_form + .ce_text a,
#contact .ce_text:last-child a {
    color: rgba(255,255,255,.9);
}

/* Apply the blue background ONLY to the form box on the homepage */
#contact:not(.background_blue) .ce_form {
    background-color: var(--blue);
    border: 1px solid rgba(0, 158, 225, 0.5);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Gives it a modern 'lift' */
}

/* Ensure the labels/text inside the form remain readable */
#contact:not(.background_blue) .ce_form .widget {
    color: var(--black);
}

/* Make inputs stand out against the light blue tint */
#contact:not(.background_blue) .ce_form input,
#contact:not(.background_blue) .ce_form textarea {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: border-color 0.2s;
}

#contact:not(.background_blue) .ce_form input:focus {
    border-color: var(--blue);
    outline: none;
}

/* Make the button the primary brand blue */
#contact:not(.background_blue) .widget-submit button[type="submit"] {
    background: var(--white);
    color: var(--blue);
    border: none;
}

#contact:not(.background_blue) .ce_headline,
#contact:not(.background_blue) .details {
    color: var(--black);
}

/* Privacy note - adjustment for white backgrounds */
#contact:not(.background_blue) .ce_form + .ce_text,
#contact:not(.background_blue) .ce_text:last-child {
    color: var(--grey); /* Darker grey for readability */
}

#contact:not(.background_blue) .ce_form + .ce_text a,
#contact:not(.background_blue) .ce_text:last-child a {
    color: var(--blue); /* Standard blue links */
}

/* ============================================================
   15. FOOTER
   ============================================================ */
#footer {
    background: var(--black);
    color: rgba(255,255,255,.6);
    font-size: var(--text-base);
    font-weight: 700;
    padding: 1rem var(--side-pad);
    text-align: center;
}

/* Hide the duplicate nested #footer */
#footer #footer { padding: 0; background: none; }

/* ============================================================
   16. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Mobile: hamburger nav --- */
@media (max-width: 768px) {
    /* Hide the default desktop nav wrapper until toggled */
    .mod_onepage_navigation:not(.nav--mobile--active) { 
        display: none; 
    }
    
    .nav-toggler { display: block; }

    /* Fix image and grid layouts for mobile */
    #home .ce_text { text-align: left; }
    .specs { grid-template-columns: 1fr; }
    .ce_gallery ul { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* --- Desktop: show inline nav --- */
@media (min-width: 769px) {
    .nav-toggler { display: none; }
    
    /* Ensure the menu is always visible and reset overlay properties */
    .mod_onepage_navigation {
        display: block !important;
        position: static;
        background: none;
        opacity: 1;
        pointer-events: auto;
    }
}