/* style.css */
/*
Theme Name: Kurt Arrigo Photography 2025
*/






@font-face {
    font-family: 'FMedium';
    src: url('fonts_fedra/FedraSansPro-Medium.woff2') format('woff2'),
        url('fonts_fedra/FedraSansPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FNormal';
    src: url('fonts_fedra/FedraSansPro-Normal.woff2') format('woff2'),
        url('fonts_fedra/FedraSansPro-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FLight';
    src: url('fonts_fedra/FedraSansPro-Light.woff2') format('woff2'),
        url('fonts_fedra/FedraSansPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FBook';
    src: url('fonts_fedra/FedraSansPro-Book.woff2') format('woff2'),
        url('fonts_fedra/FedraSansPro-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FBold';
    src: url('fonts_fedra/FedraSansPro-Bold.woff2') format('woff2'),
        url('fonts_fedra/FedraSansPro-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body, html{
    font-family: 'FLight';
    overflow-x: hidden;
}
.fB{
    font-family: 'FNormal';
    float: left;
    margin-right: 10px;
}

.site-header {
    padding: 20px;
    padding-top: 3px;
    position: fixed;
    width: 100%;
/*    background: white;*/

    z-index: 100;
}

.menu-container {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*hide firefox outline bounding box*/
#portfolio-grid:focus, #portfolio-grid::active, .gallery-grid{
    outline: revert !important;
    outline-offset: revert !important;
    -moz-outline-radius: revert !important;
    box-shadow: revert !important;
    outline: 0 none !important;
    user-select: none !important;
}

:-moz-focusring,
:focus,
button::-moz-focus-inner,
:-moz-focusring *,
:focus * {
    outline: revert !important;
    outline-offset: revert !important;
    -moz-outline-radius: revert !important;
    box-shadow: revert !important;
}
:where(textarea),
:where(input[type="text"],input[type="search"],input[type="password"],input[type="url"],.wpcf7 input[type="email"]){
  appearance: none;
  border-style: solid;
  outline: none;
    font-family: 'FLight';
    font-size: 16px;
    line-height: 30px;
    border: none;
    background: #eaeaea;
}
.wpcf7-form-control{
    font-family: 'FLight';
    font-size: 16px;
    line-height: 30px;
    width: 100%;
}
.wpcf7-response-output{
    padding: 2px;
}
.wpcf7-submit.has-spinner{
    width: auto;
}



.menu-container::-webkit-scrollbar {
    display: none;
}

.main-menu,
.sub-menu {
    display: flex;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-branding h1 a{
    text-decoration: none !important;
    color: #333;
}
.site-branding h1{
    font-size: 20px;
}
.site-footer{
    font-size: 12px;
    text-transform: uppercase;
    padding-left: 20px;
    opacity: 1;

    position: fixed;
  bottom: 0;
  left: 25px;  /* Or specific value like "50%" and then use transform:translateX(-50%) to center */
  width: 100%;
  text-align: left;
  padding: 0px 0;
  z-index: 100;
}

.menu-top-left{
    text-transform: uppercase;
    font-size: 12px;
    position: fixed;
    float: right;
    top: 25px;
    right: 20px;
}

.main-menu li,
.sub-menu li{
    margin: 5px 0px;
    margin-right: 0px;
  margin-left: revert-layer;
  margin-right: 20px;
  text-transform: uppercase;
}

.main-menu a,
.sub-menu a {
    text-decoration: none;
    color: #333;
}

.current-menu-item > a {
    font-family: 'FNormal';
/*    text-decoration: underline;*/
}
.current-page-ancestor{
    font-family: 'FNormal';
/*    text-decoration: underline;*/
}

.intro-container{
    max-width: 50vw;
    height: 100%;
    font-family: 'FLight';
    font-size: 16px;
    line-height: 25px;
/*    text-transform: uppercase;*/
/*    margin-top: -20px;*/
    text-align: start;
}
.intro-container p{
    margin-top: 0px;
    margin-left: 20px;
}

.coltext2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

/* Gallery Grid */
.gallery-grid_horizontal {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 70vh;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
/*    margin-left: -10px;*/
/*    margin-top: 80px;*/
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 10px;
}/* Gallery Grid */


.gallery-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 80vh;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    margin-left: 0px;
    margin-top: 120px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 10px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: 0;

    scroll-behavior: smooth;
}

.gallery-grid.video {
    margin-left: 20px;
}

*{
    scroll-behavior: smooth;
}

.gallery-grid__ {
    display: flex;
    /* flex-direction: row; */
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    /* overflow-x: auto; */
    max-width: 100vw;
    overflow-y: auto;
    padding: 20px;
    margin-top: 120px;
    /* margin-left: -10px; */
    /* margin-top: 80px; */
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 10px;
}

.gallery-grid > *:first-child {
    margin-left: -10px !important;
    opacity: 0.8;
}

.gallery-grid::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    position: relative;
    flex: 0 0 auto;
    min-height: 250px;
    height: 26vh;
/*    min-width: 400px;*/
}
.gallery-item.video {
    position: relative;
    flex: 0 0 auto;
    min-height: 250px;
    height: 70vh;
    min-width: 80vw;

}

.gallery-item img {
    height: 100%;
    width: 30vw;
    display: block;
    object-fit: cover;

}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s;
    font-family: 'FLight';
}
.gallery-overlay h2{
    font-size: 16px;
    text-transform: uppercase;
    font-family: 'FLight';
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

#lg-counter, .lg-sub-html{
    text-transform: uppercase;
    font-size: 13px !important;
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
    padding: 5vw;
    border-radius: 10px;

}
.links, .links a{
    text-decoration: none !important;
    color: inherit;
}
.mobile_info{
    display: none;
}

.scroll-left {
    margin-left: 0px;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: -5px;
    opacity: 1;
    cursor: pointer;
}

.scroll-left {
    margin-left: 0px;
    font-size: 14px;
    text-transform: uppercase;
    /* margin-top: 0px; */
    opacity: 1;
    cursor: pointer;
    position: relative;
    background: white;
    padding: 5px;
    padding-left: 10px;
    width: 160px;
    font-size: 12px;
    top: 2px;
    border-radius: 10px;
    color: white !important;
    background: black !important;
    transition: opacity 0.5s ease-out;
}


.nostyle, .noStyle {
    text-decoration: none !important;
    color: inherit;
}
.extraSpace{
    margin-left: 20px;
}
.hide, hide{
    display: none !important;
}
fL, .fL{
    float: left !important;

}
.mL{
    margin-right: 10px;
}
#lg-share-googleplus, #lg-share-pinterest{
    display: none !important;
}
#lg-share{
    display: none;
}


@media (max-width: 950px) {
    .mobile_info{
        display: block;
    }
    .menu-top-left {
        top: 10px;
        /* right: 10px; */
        text-align: right;
        margin-right: 25px;
        }
    .site-header{
        margin-top: -10px;
        padding: 10px;
/*        background: white;*/
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.8); /* Fallback */
          backdrop-filter: blur(10px); /* For modern browsers */
          webkit-backdrop-filter: blur(10px); /* Safari support */

    }
    .gallery-grid {
        padding: 10px;
    }
    .gallery-item img{
        width: 91vw;
    }
    .lg-outer #lg-share {
        display: none !important;
    }
    body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
        padding: 2vw;
        border-radius: 10px;
    }
    #lg-counter {
        padding-left: 10px;
        padding-top: 12px;
    }
    .small-text-menu{
        font-size: 9px;
        text-transform: uppercase;
        opacity: .5;
    }
    .coltext2 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    }
    .site-footer {
        left: 20px;
        bottom: -10px;
    }

    .intro-container {
        max-width: 91vw;
    }


    .sub-menu, .main-menu{
            scroll-snap-type: x mandatory;
/*            animation: scrollTicker 20s linear infinite;*/
            animation: ticker 30s linear infinite;
        }

    .sub-menu:hover, .main-menu:hover {
      animation-play-state: paused; /* Pause animation on hover */
    }

    @keyframes ticker {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

}