/*
    Lens by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* ==========================================================================
   IMPORTS
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url('https://fonts.googleapis.com/css2?family=Borel&display=swap');

/* ==========================================================================
   RESET & BASICS
   ========================================================================== */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
    -webkit-text-size-adjust: none;
    background-color: #fff;
    color: #aaa;
    overflow: hidden;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
html {
    font-size: 16pt;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

@media screen and (max-width: 1680px) {
    html { font-size: 12pt; }
}

@media screen and (max-width: 1280px) {
    html { font-size: 11pt; }
}

body, input, select, textarea {
    font-family: "Roboto", Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.65;
    font-size: 1em;
    color: #aaa;
}

a {
    transition: color 0.25s ease, border-bottom-color 0.25s ease;
    border-bottom: dotted 1px;
    color: inherit;
    text-decoration: none;
}

a:hover {
    border-bottom-color: transparent;
    color: #FF6B35; /* Updated to Reunion Orange */
}

strong, b {
    font-weight: 400;
    color: #555;
}

p {
    margin: 0 0 1.25em 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 0.5em 0;
    color: #555;
}

/* ==========================================================================
   BUTTONS (Customized for Reunion)
   ========================================================================== */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    background-color: transparent;
    border-radius: 50px; /* ROUNDED CORNERS (Pill shape) */
    border: solid 1px #ccc;
    color: #555;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    padding: 0.75em 2em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/* Primary "Sign Up" Button Style */
.button.primary {
    background-color: #FF6B35; /* Reunion Orange */
    color: #ffffff !important;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.button.primary:hover {
    background-color: #e85d2a;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

/* ==========================================================================
   LAYOUT SECTIONS
   ========================================================================== */

/* Main Container */
#main {
    transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 22.5em;
    height: 100%;
    background: #fff;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: right;
    visibility: visible;
    z-index: 10000;
    right: 0;
}

/* Header */
#header {
    padding: 3em 2.25em 1.75em 2.25em;
}

/* Footer */
#footer {
    padding: 2.25em 2.25em 1em 2.25em;
}

#footer .copyright {
    list-style: none;
    padding: 0;
}

#footer .copyright li {
    display: inline-block;
    font-size: 0.8em;
    margin-left: 0.35em;
}

/* ==========================================================================
   CLEAN SOCIAL LOGOS (No Words)
   ========================================================================== */
ul.icons {
    cursor: default;
    list-style: none;
    padding-left: 0;
    margin-top: 1.5em;
    display: flex;
    justify-content: flex-end; /* Align right */
    gap: 1.2em;        /* Space between icons */
}

@media screen and (max-width: 480px) {
    ul.icons {
        justify-content: center; /* Center on mobile */
    }
}

ul.icons li {
    display: inline-block;
    padding: 0;
}

/* The Icon Itself */
ul.icons li .icon {
    font-size: 2rem; /* Big, clear logos */
    border: none;    /* Remove any border/underline */
    text-decoration: none;
}

ul.icons li .icon:before {
    font-size: 2rem;
}

/* Hide the text labels completely */
ul.icons li .icon .label {
    display: none !important;
}

/* --- BRAND COLORS --- */

/* Instagram (Gradient Text) */
ul.icons li .icon.fa-instagram {
    background: -webkit-linear-gradient(#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #E1306C; /* Fallback */
}

/* TikTok (Black) */
ul.icons li .icon.fa-tiktok {
    color: #000000;
}

/* Email (Reunion Orange) */
ul.icons li .icon.fa-reddit {
    color: #FF6B35;
}

/* Hover Effect: Pop up slightly */
ul.icons li .icon:hover {
    transform: translateY(-3px);
    transition: transform 0.2s ease;
}

/* Actions (Button Container) */
ul.actions {
    display: flex;
    cursor: default;
    list-style: none;
    padding-left: 0;
    /* Align buttons to the right (since text-align is right) or adjust based on preference */
    justify-content: flex-end;
}

/* ==========================================================================
   THUMBNAILS (BENTO GRID CONFIGURATION)
   ========================================================================== */

#thumbnails {
    display: grid;               /* Use Grid, not Flex */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px;
    padding: 0 0.75em;
}

#thumbnails article {
    position: relative;
    width: 100%;                 /* Full width of the grid cell */
    background: #101010;
    outline: 0;
}

#thumbnails article .thumbnail {
    display: block;
    position: relative;
    border: 0;
    outline: 0;
}

#thumbnails article .thumbnail img {
    display: block;
    width: 100%;
}

/* Hover Overlay for Thumbnails */
#thumbnails article .thumbnail:before {
    pointer-events: none;
    transition: opacity 0.25s ease;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 2px #FF6B35, inset 0 0 0px 3px rgba(0, 0, 0, 0.15); /* Updated to Orange */
    opacity: 0;
    z-index: 1;
}

#thumbnails article .thumbnail:focus:before,
#thumbnails article.active .thumbnail:before {
    opacity: 1;
}

#thumbnails article h2, #thumbnails article p {
    display: none;
}

/* Viewer (Full Screen Slideshow) */
#viewer {
    transition: opacity 0.75s ease, width 0.75s ease;
    position: absolute;
    top: 0;
    width: calc(100% - 22.5em);
    height: 100%;
    left: 0;
}

#viewer .inner {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#viewer .inner > * { pointer-events: auto; }

/* Viewer Close Button */
#viewer .inner .toggle {
    position: absolute;
    top: 0;
    width: 4em;
    height: 4em;
    background-image: url("images/close.svg");
    background-repeat: no-repeat;
    background-size: 64px 64px;
    cursor: pointer;
    z-index: 1;
    right: 0;
    background-position: calc(100% - 0.75em) 0.75em;
}

/* Viewer Navigation Arrows */
#viewer .inner .nav-next,
#viewer .inner .nav-previous {
    position: absolute;
    top: 50%;
    width: 6em;
    height: 6em;
    margin-top: -3em;
    background-image: url("images/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

#viewer .inner .nav-previous {
    transform: scaleX(-1);
    left: 0;
}

#viewer .inner .nav-next {
    right: 0;
}

/* Slides */
#viewer .slide {
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
}

#viewer .slide .caption {
    background: linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0));
    padding: 2em 2em 0.75em 2em;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: rgba(255, 255, 255, 0.5);
    z-index: 1;
}

#viewer .slide .caption h2 { color: #fff; }

#viewer .slide .image {
    transition: opacity 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
}

#viewer .slide.active .image { opacity: 1; }


/* ==========================================================================
   REUNION CUSTOM CLASSES
   ========================================================================== */

/* 1. Header Logo (Borel Font) */
#header h1 {
    font-family: 'Borel', cursive !important;
    font-weight: 400 !important;
    font-size: 3.8em !important;
    line-height: 1.2 !important;
    letter-spacing: 0px !important;
    text-transform: none !important;
    margin-bottom: 0.5em;
}

.logo-orange { color: #FF6B35; }
.logo-blue { color: #0077B6; }

/* 2. Welcome Card Box */
.welcome-card {
    background-color: #f9f9f9;
    padding: 1.5em;
    margin: 1.5em 0 2em 0;
    border-radius: 12px;
    border-left: 6px solid #FF6B35;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.handwritten-highlight {
    font-family: 'Borel', cursive;
    font-size: 1.6em;
    color: #0077B6;
    line-height: 1.3;
    display: block;
    margin-bottom: 0.5em;
}

.welcome-card p {
    font-family: "Roboto", Helvetica, sans-serif;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 1em;
    line-height: 1.5;
}

.badge-no-dating {
    display: inline-block;
    background-color: #ffe5e5;
    color: #d63031;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.4em 0.8em;
    border-radius: 50px;
}

/* ==========================================================================
   MEDIA QUERIES (Mobile Responsiveness)
   ========================================================================== */

@media screen and (max-width: 1280px) {
    #main { width: 19em; }
    #viewer { width: calc(100% - 19em); }
    body.fullscreen #main { right: -19em; }
}

@media screen and (max-width: 980px) {
    #main { background: rgba(255, 255, 255, 0.925); }
    #main .toggle { display: block; }
    #viewer { width: 100%; }

    #viewer .inner .toggle {
        background-image: url("images/open.svg");
        opacity: 0;
    }
    body.fullscreen #viewer .inner .toggle { opacity: 1; }
}

@media screen and (max-width: 480px) {
    /* Layout */
    #main {
        width: 100%;
        text-align: center;
        transition: opacity 0.5s ease, visibility 0.5s;
    }

    /* Hide viewer initially on mobile load */
    #viewer {
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    /* Toggle Button */
    #main .toggle { display: none; }

    /* Thumbnails */
    #thumbnails article .thumbnail:before { display: none; }

    /* Reunion Custom Tweaks */
    #header h1 { font-size: 3em !important; }

    .welcome-card {
        text-align: center;
        border-left: none;
        border-top: 6px solid #FF6B35;
    }

    /* Button specific for mobile: KEEP IT ROUND but allow natural width */
    .button.primary {
        display: inline-block; /* Prevents full width expansion */
        width: auto;
        min-width: 200px; /* Ensures it's clickable but not edge-to-edge */
    }

    ul.actions {
        justify-content: center; /* Center button on mobile */
    }
}

/* ==========================================================================
   OLIVE BACKGROUND OVERRIDES
   ========================================================================== */

/* 1. Change the main page background */
body, html {
    background-color: #F4F5E6; /* Light Olive */
}

/* 2. Change the sidebar/panel background */
/* This ensures the "sheet" of paper looks olive too */
#main {
    background-color: #F4F5E6;
}

/* 3. Update the Welcome Card to stand out slightly */
/* Since the background is now olive, we make the card pure white to pop */
.welcome-card {
    background-color: #ffffff; /* Pure white card on olive background */
    border: 1px solid rgba(0,0,0,0.05); /* Subtle border */
}

/* 4. Mobile adjustment */
@media screen and (max-width: 980px) {
    #main {
        background: rgba(244, 245, 230, 0.95); /* Semi-transparent Olive */
    }
}

.icon.brands:before {
   font-family: 'Font Awesome 5 Brands' !important;
}
/* ==========================================================================
   GIF & VIDEO CARDS: ROUNDED CORNERS (Visual Style Only)
   ========================================================================== */

/* 1. Desktop & General Styling */
#thumbnails article {
    /* No width settings here - Grid controls it */
    padding: 10px; /* Space between cards */
    background: transparent;
    box-sizing: border-box;
}

/* 2. Round the corners and add shadow */
#thumbnails article .thumbnail {
    border-radius: 20px; /* Nice round corners */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3. Round the hover overlay too */
#thumbnails article .thumbnail:before {
    border-radius: 20px;
}

/* 4. Hover Animation */
#thumbnails article .thumbnail:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* 5. Image & Video Fit (General Fallback) */
#thumbnails article .thumbnail img,
#thumbnails article .thumbnail video {
    border-radius: 20px;
    display: block;
    width: 100%;
    height: 100%;       /* Ensure it fills */
    object-fit: cover;  /* Crop correctly */
}


/* ==========================================================================
   TURN OFF "PORTFOLIO MODE" (Single Column Layout)
   ========================================================================== */

/* 1. Hide the Slideshow Viewer completely */
#viewer {
    display: none !important;
}

/* 2. Make the Main Content centered and full width on Desktop */
/* This overrides the "Sidebar" layout of the original template */
#main {
    width: 100% !important;      /* Use full screen width */
    max-width: 900px !important; /* But don't get too wide (keeps it readable) */
    position: relative !important;
    right: auto !important;
    left: auto !important;
    margin: 0 auto !important;   /* Centers the container */
    padding-top: 4em;            /* Adds nice spacing at top */
    background-color: transparent !important; /* seamless blend */
    box-shadow: none !important; /* Removes any sidebar shadow */
    overflow: visible !important;
}

/* 3. Disable the "Hand" cursor and ANY clicks on videos to prevent pausing/modals */
#thumbnails article .thumbnail {
    cursor: default;
    pointer-events: none; /* KEY FIX: Disables clicks entirely */
}

/* ==========================================================================
   CRITICAL FIX: ENABLE SCROLLING & FIX MOBILE LAYOUT
   ========================================================================== */

/* 1. Unlock the page scrollbars */
html, body {
    overflow-y: auto !important; /* Forces vertical scrolling */
    overflow-x: hidden !important; /* Prevents side-scrolling glitches */
    height: auto !important; /* Lets the page grow as long as it needs */
    position: relative !important;
}

/* 2. Reset the Main Container to flow naturally */
#main {
    position: relative !important; /* Stops it from being "fixed" to the screen */
    height: auto !important;
    width: 100% !important;
    max-width: 800px !important; /* Keeps it readable */
    margin: 0 auto !important;   /* Centers it */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    overflow: visible !important; /* Lets content spill out so you can scroll to it */
    transform: none !important;   /* Disables any leftover slide animations */
}

/* 3. Fix the Header/Logo on Mobile */
/* Sometimes the header gets squashed or hidden at the top */
#header {
    padding-top: 4em !important; /* clearer space at the top */
    width: 100% !important;
}

/* 4. Disable the "Toggle" button (The hamburger menu) */
/* Since we are now a simple scrolling page, we don't need this button blocking things */
#main .toggle {
    display: none !important;
}
/* ==========================================================================
   COMPACT LAYOUT: REMOVE EXTRA SPACE & TIGHTEN
   ========================================================================== */

/* 1. Remove the big gap at the very top of the page */
#main {
    padding-top: 0 !important; /* Removes top gap */
    margin-top: 2vh !important; /* tiny breathing room only */
}

/* 2. Shrink the Header spacing */
#header {
    padding: 1em 1.5em 0.5em 1.5em !important; /* Much tighter padding */
}

/* 3. Make the Logo slightly smaller to save vertical space */
#header h1 {
    font-size: 3em !important;
    margin-bottom: 0 !important; /* Remove gap below logo */
}

/* 4. Tighten the Welcome Card */
.welcome-card {
    margin: 0.5em 0 1em 0 !important; /* Reduce margins around the box */
    padding: 1em !important;          /* Reduce padding inside the box */
}

/* 5. Move Social Icons closer to the button */
ul.icons {
    margin-top: 0.5em !important;
    margin-bottom: 0.5em !important;
}

/* 6. Mobile Specific: Ensure it doesn't touch the very top edge */
@media screen and (max-width: 480px) {
    #header {
        padding-top: 1.5em !important; /* Just enough space for phone status bar */
    }

    #header h1 {
        font-size: 2.5em !important; /* Smaller logo on phone */
    }

    /* On mobile, we can allow scrolling, so we don't need it as tight */
    .welcome-card {
        margin: 1em 0 !important;
    }
}
/* ==========================================================================
   CENTER EVERYTHING (Header, Text, Buttons)
   ========================================================================== */

/* 1. Center the text inside the Header */
#header {
    text-align: center !important;
}

/* 2. Center the Welcome Card */
.welcome-card {
    text-align: center !important;
    margin-left: auto !important;  /* auto margins center a block element */
    margin-right: auto !important;
    max-width: 600px;              /* Keeps the box from getting too wide on desktop */

    /* Switch the accent bar from Left to Top for symmetry */
    border-left: none !important;
    border-top: 6px solid #FF6B35 !important;
}

/* 3. Center the Sign Up Button */
ul.actions {
    justify-content: center !important;
}

/* 4. Center the Social Icons */
ul.icons {
    justify-content: center !important;
}

/* ==========================================================================
   BENTO GRID LAYOUT SPECIFICS (Box, Portrait, Wide)
   ========================================================================== */

/* --- ITEM 1: TOP LEFT (Box) --- */
#thumbnails article:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
#thumbnails article:nth-child(1) .thumbnail img,
#thumbnails article:nth-child(1) .thumbnail video {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: 100%;
}

/* --- ITEM 2: MIDDLE LEFT (Box) --- */
#thumbnails article:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
}
#thumbnails article:nth-child(2) .thumbnail img,
#thumbnails article:nth-child(2) .thumbnail video {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: 100%;
}

/* --- ITEM 3: RIGHT SIDE (Tall Portrait) --- */
#thumbnails article:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2; /* Spans 2 rows tall */
}
#thumbnails article:nth-child(3) .thumbnail,
#thumbnails article:nth-child(3) .thumbnail img,
#thumbnails article:nth-child(3) .thumbnail video {
    height: 100% !important; /* Forces it to fill the height of the two boxes on the left */
    aspect-ratio: 1 / 2; /* Optional fallback ratio */
    object-fit: cover;
}

/* --- ITEM 4: BOTTOM (Wide) --- */
#thumbnails article:nth-child(4) {
    grid-column: 1 / span 2; /* Spans across both columns */
    grid-row: 3;
}
#thumbnails article:nth-child(4) .thumbnail img,
#thumbnails article:nth-child(4) .thumbnail video {
    aspect-ratio: 2.5 / 1; /* Wide ratio */
    object-fit: cover;
    width: 100%;
}

/* --- MOBILE FIX (Stack them normally on phone - Fallback) --- */
@media screen and (max-width: 480px) {
    #thumbnails {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }
    #thumbnails article {
        width: 100% !important;
        margin-bottom: 0px;
    }
    #thumbnails article .thumbnail img,
    #thumbnails article .thumbnail video {
        height: auto !important;
        aspect-ratio: 1/1 !important; /* All squares on mobile looks cleanest */
    }
}
/* ==========================================================================
   MOBILE SETTINGS (Keep Bento Grid)
   ========================================================================== */

@media screen and (max-width: 480px) {
    /* 1. Header Adjustments */
    #header {
        padding-top: 1.5em !important;
    }
    #header h1 {
        font-size: 2.5em !important;
    }

    /* 2. Enable the 2-Column Bento Grid on Mobile */
    #thumbnails {
        display: grid !important;    /* Force Grid (Overrides Flex above) */
        grid-template-columns: 1fr 1fr; /* 2 Columns */
        gap: 10px !important;        /* Tighter gap for small screens */
    }

    /* 3. Ensure Grid Items fit perfectly */
    #thumbnails article {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* 4. Ensure images AND VIDEOS fill their grid cells completely */
    #thumbnails article .thumbnail img,
    #thumbnails article .thumbnail video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* Remove any specific aspect-ratios here so the Grid controls the shape */
        aspect-ratio: unset;
    }

    /* 5. General Cleanup */
    .welcome-card { margin: 1em 0 !important; }

    .button.primary {
        display: inline-block;
        width: auto;
        min-width: 200px;
    }
}