/*Alexrivera.vegas - neilmclean.com - portfolio code*/
/*Copyright 2024 Estebagel*/

/* -----------------------------------------------------------------------
   Page layouts and scroll infrastructure.
   Global skeleton (nav, body, components) lives in main.css.
   Color/theme overrides live in from-wordpress.css (commented by default).
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   Footer — default dark theme
   ----------------------------------------------------------------------- */
#colophon {
    background-color: #141414;
    color: #fff;
}

.footer-credits {
    background-color: #141414;
    color: #fff;
}

.footer-credits-text {
    background-color: #141414;
    color: #aaa;
    padding: 0;
}

.footer-social-media {
    margin-bottom: -30px;
}

/* -----------------------------------------------------------------------
   Main content area
   ----------------------------------------------------------------------- */
.content-main-architect {
    margin-left: 280px;
    opacity: 1;
    overflow-x: visible;
    min-height: 510px;
    height: 510px;
}

@media (min-width: 768px) {
    .content-main-architect {
        min-height: 580px;
        height: 80vh;
    }
}

@media (min-width: 1025px) {
    .content-main-architect {
        min-height: 580px;
        height: 80vh;
    }
}

@media (min-height: 980px) {
    .content-main-architect {
        min-height: 580px;
        height: 82vh;
    }
}

@media (min-width: 1840px) {
    #yourDiv {
        --content-width: unset;
    }
}

/* -----------------------------------------------------------------------
   Horizontal scroll wrapper — standard
   ----------------------------------------------------------------------- */
.clearfix-architect {
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -280px;
}

@media (min-width: 768px) {
    .clearfix-architect {
        padding-left: 280px;
    }
}

@media (min-width: 1025px) {
    .clearfix-architect {
        padding-left: 280px;
    }
}

/* -----------------------------------------------------------------------
   Horizontal scroll wrapper — Google Drive content
   ----------------------------------------------------------------------- */
.clearfix-architect-google {
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -280px;
}

@media (max-width: 767px) {
    .clearfix-architect-google {
        margin-left: 0;
        overflow-y: auto;
    }
    .content-main-architect {
        margin-left: 0;
    }
}

@media (min-width: 768px) {
    .clearfix-architect-google {
        padding-left: 280px;
    }
}

@media (min-width: 1025px) {
    .clearfix-architect-google {
        padding-left: 280px;
    }
}

/* -----------------------------------------------------------------------
   Asset scroll containers
   ----------------------------------------------------------------------- */
.assets-architect {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
}

.assets-architect h3 {
    padding-left: 0;
}

.assets-architect h1,
.assets-architect h2,
.assets-architect h3,
.assets-architect h4,
.assets-architect h5,
.assets-architect h6,
.assets-architect p,
.assets-architect div {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .assets-architect {
        width: max-content;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Google Drive asset container */
@media (min-width: 768px) {
    .assets-architect-google {
        width: max-content;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: inherit;
        white-space: nowrap;
    }
}

/* -----------------------------------------------------------------------
   Fixed-width asset containers (legacy pages with hardcoded widths)
   ----------------------------------------------------------------------- */
.assets-architect-dungeon {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
}

.assets-architect-dungeon h3 {
    padding-left: 0;
}

.assets-architect-dungeon h1,
.assets-architect-dungeon h2,
.assets-architect-dungeon h3,
.assets-architect-dungeon h4,
.assets-architect-dungeon h5,
.assets-architect-dungeon h6,
.assets-architect-dungeon p,
.assets-architect-dungeon div {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .assets-architect-dungeon {
        width: 4727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.assets-architect-making {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
}

.assets-architect-making h3 {
    padding-left: 0;
}

.assets-architect-making h1,
.assets-architect-making h2,
.assets-architect-making h3,
.assets-architect-making h4,
.assets-architect-making h5,
.assets-architect-making h6,
.assets-architect-making p,
.assets-architect-making div {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .assets-architect-making {
        width: 50727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }

    .assets-architect-making .elementor-widget-container img {
        height: 650px;
        width: auto;
        display: inline-block;
        vertical-align: center;
    }

    .assets-architect-making .elementor-widget-container {
        display: inline-block;
        vertical-align: top;
    }
}

.assets-architect-zobot {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .assets-architect-zobot {
        width: 10727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }

    .assets-architect-zobot .elementor-widget-container img {
        height: 500px;
        width: auto;
        display: inline-block;
        vertical-align: center;
    }

    .assets-architect-zobot .elementor-widget-container {
        display: inline-block;
        vertical-align: top;
    }
}

/* -----------------------------------------------------------------------
   Elementor elements inside asset containers
   ----------------------------------------------------------------------- */
.assets-architect > .elementor-element,
.assets-architect-works > .elementor-element,
.assets-architect-works-short > .elementor-element,
.assets-architect-works-mid > .elementor-element {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.assets-architect img,
.assets-architect-works img,
.assets-architect-works-short img,
.assets-architect-works-mid img {
    height: 100%;
    width: auto;
    display: block;
}

/* -----------------------------------------------------------------------
   Vertical scroll variant (-y)
   ----------------------------------------------------------------------- */
.content-main-architect-y {
    opacity: 1;
    overflow-y: auto;
    min-height: 510px;
    height: 510px;
}

@media (min-width: 768px) {
    .content-main-architect-y {
        margin-left: 280px;
        min-height: 580px;
        height: 80vh;
    }
}

@media (min-width: 1025px) {
    .content-main-architect-y {
        margin-left: 280px;
        min-height: 580px;
        height: 80vh;
    }
}

@media (min-height: 980px) {
    .content-main-architect-y {
        height: 82vh;
    }
}

.clearfix-architect-y {
    overflow-y: scroll;
}

@media (min-width: 768px) {
    .clearfix-architect-y {
        margin-left: -280px;
        padding-left: 280px;
    }
}

@media (min-width: 1025px) {
    .clearfix-architect-y {
        margin-left: -280px;
        padding-left: 280px;
    }
}

.assets-architect-y {
    height: 2400px;
    touch-action: pan-y;
}

.content-main-architect-items-y {
    min-height: 620px;
    height: 750px;
}

@media (min-width: 1025px) {
    .assets-architect-items-scroll-y {
        max-height: 45px !important;
        overflow: auto;
    }
}

/* -----------------------------------------------------------------------
   Both-axis scroll variant (-xy)
   ----------------------------------------------------------------------- */
.content-main-architect-xy {
    opacity: 1;
    overflow-y: auto;
    min-height: 510px;
    height: 510px;
}

@media (min-width: 768px) {
    .content-main-architect-xy {
        min-height: 550px;
        height: 550px;
    }
}

@media (min-width: 1025px) {
    .content-main-architect-xy {
        margin-left: 280px;
        min-height: 550px;
        height: 550px;
        overflow-x: visible;
    }
}

.clearfix-architect-xy {
    overflow-y: scroll;
}

@media (min-width: 1025px) {
    .clearfix-architect-xy {
        height: auto;
        overflow-x: scroll;
        margin-left: -280px;
        padding-left: 280px;
    }
}

.assets-architect-xy {
    height: 2400px;
    touch-action: pan-y;
}

@media (min-width: 1025px) {
    .assets-architect-xy {
        width: 7227px;
        touch-action: pan-x;
    }
}

.assets-architect-works-xy {
    width: 10000px;
    touch-action: pan-x;
}

.grid-content-xy {
    height: 500px;
    min-height: 600px;
}

/* -----------------------------------------------------------------------
   Scrollbars on the scroll containers
   -----------------------------------------------------------------------
   Chrome's default bar is chunky, permanently visible, and has arrow
   buttons. Firefox and Safari use overlay bars that fade out when idle.
   This makes Chrome behave the same way: a slim rounded thumb that appears
   while scrolling (or while the pointer is over the strip) and fades back
   out about a second after scrolling stops.

   The .is-scrolling class is added and removed by js/estebagel-scroll.js —
   CSS alone cannot detect that scrolling is happening.

   Colour resolves in three layers, most specific first:

     1. A site override — set --estebagel-scrollbar-thumb in WordPress
        Additional CSS (the from-wordpress.css template). Additional CSS
        loads after plugin styles, so this always wins.
     2. Auto-detection — estebagel-scroll.js measures each strip's effective
        background luminance and sets --estebagel-scrollbar-thumb-auto on it,
        so a light thumb lands on dark sites and a dark thumb on light ones.
     3. The literal fallback below: mid grey at low opacity, which reads on
        either background. Used if JS is unavailable.
   ----------------------------------------------------------------------- */
:root {
    --estebagel-scrollbar-size: 8px;
    --estebagel-scrollbar-thumb: var(--estebagel-scrollbar-thumb-auto, rgba(140, 140, 140, 0.55));
    --estebagel-scrollbar-thumb-hover: var(--estebagel-scrollbar-thumb-hover-auto, rgba(170, 170, 170, 0.85));
}

.clearfix-architect,
.clearfix-architect-google,
.clearfix-architect-xy,
.assets-architect,
.assets-architect-google,
.assets-architect-dungeon,
.assets-architect-making,
.assets-architect-zobot,
.assets-architect-items-scroll-y,
.object-view {
    /* Firefox: thin bar, thumb transparent until scrolling/hover. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

.clearfix-architect.is-scrolling,
.clearfix-architect:hover,
.clearfix-architect-google.is-scrolling,
.clearfix-architect-google:hover,
.clearfix-architect-xy.is-scrolling,
.clearfix-architect-xy:hover,
.assets-architect.is-scrolling,
.assets-architect:hover,
.assets-architect-google.is-scrolling,
.assets-architect-google:hover,
.assets-architect-dungeon.is-scrolling,
.assets-architect-dungeon:hover,
.assets-architect-making.is-scrolling,
.assets-architect-making:hover,
.assets-architect-zobot.is-scrolling,
.assets-architect-zobot:hover,
.assets-architect-items-scroll-y.is-scrolling,
.assets-architect-items-scroll-y:hover,
.object-view.is-scrolling,
.object-view:hover {
    scrollbar-color: var(--estebagel-scrollbar-thumb) transparent;
}

/* WebKit (Chrome, Safari, Edge). The track stays transparent and the thumb
   fades from transparent, so an idle strip looks like it has no bar at all. */
.clearfix-architect::-webkit-scrollbar,
.clearfix-architect-google::-webkit-scrollbar,
.clearfix-architect-xy::-webkit-scrollbar,
.assets-architect::-webkit-scrollbar,
.assets-architect-google::-webkit-scrollbar,
.assets-architect-dungeon::-webkit-scrollbar,
.assets-architect-making::-webkit-scrollbar,
.assets-architect-zobot::-webkit-scrollbar,
.assets-architect-items-scroll-y::-webkit-scrollbar,
.object-view::-webkit-scrollbar {
    height: var(--estebagel-scrollbar-size);
    width: var(--estebagel-scrollbar-size);
}

.clearfix-architect::-webkit-scrollbar-track,
.clearfix-architect-google::-webkit-scrollbar-track,
.clearfix-architect-xy::-webkit-scrollbar-track,
.assets-architect::-webkit-scrollbar-track,
.assets-architect-google::-webkit-scrollbar-track,
.assets-architect-dungeon::-webkit-scrollbar-track,
.assets-architect-making::-webkit-scrollbar-track,
.assets-architect-zobot::-webkit-scrollbar-track,
.assets-architect-items-scroll-y::-webkit-scrollbar-track,
.object-view::-webkit-scrollbar-track {
    background: transparent;
}

.clearfix-architect::-webkit-scrollbar-thumb,
.clearfix-architect-google::-webkit-scrollbar-thumb,
.clearfix-architect-xy::-webkit-scrollbar-thumb,
.assets-architect::-webkit-scrollbar-thumb,
.assets-architect-google::-webkit-scrollbar-thumb,
.assets-architect-dungeon::-webkit-scrollbar-thumb,
.assets-architect-making::-webkit-scrollbar-thumb,
.assets-architect-zobot::-webkit-scrollbar-thumb,
.assets-architect-items-scroll-y::-webkit-scrollbar-thumb,
.object-view::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
    transition: background-color 0.3s ease;
}

.clearfix-architect.is-scrolling::-webkit-scrollbar-thumb,
.clearfix-architect:hover::-webkit-scrollbar-thumb,
.clearfix-architect-google.is-scrolling::-webkit-scrollbar-thumb,
.clearfix-architect-google:hover::-webkit-scrollbar-thumb,
.clearfix-architect-xy.is-scrolling::-webkit-scrollbar-thumb,
.clearfix-architect-xy:hover::-webkit-scrollbar-thumb,
.assets-architect.is-scrolling::-webkit-scrollbar-thumb,
.assets-architect:hover::-webkit-scrollbar-thumb,
.assets-architect-google.is-scrolling::-webkit-scrollbar-thumb,
.assets-architect-google:hover::-webkit-scrollbar-thumb,
.assets-architect-dungeon.is-scrolling::-webkit-scrollbar-thumb,
.assets-architect-dungeon:hover::-webkit-scrollbar-thumb,
.assets-architect-making.is-scrolling::-webkit-scrollbar-thumb,
.assets-architect-making:hover::-webkit-scrollbar-thumb,
.assets-architect-zobot.is-scrolling::-webkit-scrollbar-thumb,
.assets-architect-zobot:hover::-webkit-scrollbar-thumb,
.assets-architect-items-scroll-y.is-scrolling::-webkit-scrollbar-thumb,
.assets-architect-items-scroll-y:hover::-webkit-scrollbar-thumb,
.object-view.is-scrolling::-webkit-scrollbar-thumb,
.object-view:hover::-webkit-scrollbar-thumb {
    background-color: var(--estebagel-scrollbar-thumb);
}

.clearfix-architect::-webkit-scrollbar-thumb:hover,
.clearfix-architect-google::-webkit-scrollbar-thumb:hover,
.clearfix-architect-xy::-webkit-scrollbar-thumb:hover,
.assets-architect::-webkit-scrollbar-thumb:hover,
.assets-architect-google::-webkit-scrollbar-thumb:hover,
.assets-architect-dungeon::-webkit-scrollbar-thumb:hover,
.assets-architect-making::-webkit-scrollbar-thumb:hover,
.assets-architect-zobot::-webkit-scrollbar-thumb:hover,
.assets-architect-items-scroll-y::-webkit-scrollbar-thumb:hover,
.object-view::-webkit-scrollbar-thumb:hover {
    background-color: var(--estebagel-scrollbar-thumb-hover);
}

/* Chrome still reserves layout space for a styled scrollbar (unlike a true
   overlay bar), so these strips give up ~8px at the bottom. That is roughly
   half the default bar, and invisible while idle. */

/* Respect a reduced-motion preference: show the thumb without the fade. */
@media (prefers-reduced-motion: reduce) {
    .clearfix-architect,
    .clearfix-architect-google,
    .clearfix-architect-xy,
    .assets-architect,
    .assets-architect-google,
    .assets-architect-dungeon,
    .assets-architect-making,
    .assets-architect-zobot,
    .assets-architect-items-scroll-y,
    .object-view {
        transition: none;
    }
    .clearfix-architect::-webkit-scrollbar-thumb,
    .clearfix-architect-google::-webkit-scrollbar-thumb,
    .clearfix-architect-xy::-webkit-scrollbar-thumb,
    .assets-architect::-webkit-scrollbar-thumb,
    .assets-architect-google::-webkit-scrollbar-thumb,
    .assets-architect-dungeon::-webkit-scrollbar-thumb,
    .assets-architect-making::-webkit-scrollbar-thumb,
    .assets-architect-zobot::-webkit-scrollbar-thumb,
    .assets-architect-items-scroll-y::-webkit-scrollbar-thumb,
    .object-view::-webkit-scrollbar-thumb {
        transition: none;
    }
}