/*
Theme Name: Gallery
Theme URI: https://wordpress.org/
Author: Gallery
Description: Minimal block theme. Jost for titles and navigation, Lora for body. Block styles load only for blocks on the page.
Requires at least: 6.4
Tested up to: 7.1.3
Requires PHP: 7.4
Version: 1.0.0
Text Domain: gallery
*/

/* Jost Fallbacks */
@font-face {
  font-family: 'jost-fallback-apple';
  src: local('Helvetica Neue'), local('Helvetica');
  size-adjust: 88.5%;
  ascent-override: 106%;
  descent-override: 36%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'jost-fallback-windows';
  src: local('Arial');
  size-adjust: 88.71%;
  ascent-override: 107%;
  descent-override: 37.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'jost-fallback-android';
  src: local('sans-serif-condensed');
  size-adjust: 92%;
  ascent-override: 105%;
  descent-override: 35%;
}

/* Lora Fallbacks */
@font-face {
  font-family: 'lora-fallback-desktop';
  src: local('Georgia');
  size-adjust: 103.85%;
  ascent-override: 100.6%;
  descent-override: 27.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'lora-fallback-android';
  src: local('Noto Serif'), local('serif');
  size-adjust: 101%;
  ascent-override: 98%;
  descent-override: 25%;
  line-gap-override: 0%;
}

body {
    padding-top: var(--wp--custom--header-height, 6rem);
    overflow-x: hidden;
}

footer {
    margin-block-start: 0;
}

/* Push footer down by setting main size, required on short pages */
main {
    margin-block-start: 2.5rem;
    margin-block-end: 2.5rem;
    min-height: calc(100dvh - var(--wp--custom--header-height, 100px) - 5rem - var(--wp--custom--footer-height, 2.65rem));
}
body.admin-bar main {
    min-height: calc(100dvh - 32px - var(--wp--custom--header-height, 100px) - 5rem - var(--wp--custom--footer-height, 2.65rem));
}
body.home main {
    margin-block-end: 0;
    min-height: calc(100dvh - var(--wp--custom--header-height, 100px) - 2.5rem - var(--wp--custom--footer-height, 2.65rem));
}
.wp-block-css-image-carousel.alignfull .image-carousel-slide img {
    height: calc(100dvh - var(--wp--custom--header-height, 100px) - 2.5rem - var(--wp--custom--footer-height, 2.65rem));
}
body.home.admin-bar main {
    min-height: calc(100dvh - 32px - var(--wp--custom--header-height, 100px) - 2.5rem - var(--wp--custom--footer-height, 2.65rem));
}
body.home.admin-bar main .wp-block-css-image-carousel.alignfull .image-carousel-slide img {
    height: calc(100dvh - 32px - var(--wp--custom--header-height, 100px) - 2.5rem - var(--wp--custom--footer-height, 2.65rem));
}

/* Mobile */
@media screen and (max-width: 782px) {
    main {
        margin-block-start: .5rem;
        margin-block-end: .5rem;
        min-height: calc(100dvh - var(--wp--custom--header-height, 100px) - 1rem - var(--wp--custom--footer-height, 2.65rem));
    }
    body.admin-bar main {
        min-height: calc(100dvh - 46px - var(--wp--custom--header-height, 100px) - 1rem - var(--wp--custom--footer-height, 2.65rem));
    }
    body.home main {
        min-height: calc(100dvh - var(--wp--custom--header-height, 100px) - .5rem - var(--wp--custom--footer-height, 2.65rem));
    }
    .wp-block-css-image-carousel.alignfull .image-carousel-slide img {
        height: calc(100dvh - var(--wp--custom--header-height, 100px) - .5rem - var(--wp--custom--footer-height, 2.65rem));
    }
    body.home.admin-bar main {
        min-height: calc(100dvh - 46px - var(--wp--custom--header-height, 100px) - .5rem - var(--wp--custom--footer-height, 2.65rem));
    }
    body.home.admin-bar main .wp-block-css-image-carousel.alignfull .image-carousel-slide img {
        height: calc(100dvh - 46px - var(--wp--custom--header-height, 100px) - .5rem - var(--wp--custom--footer-height, 2.65rem));
    }
}


/* navigation text & icon spacing */
.site-header .wp-block-group {
    gap: 0.5rem !important;
}

.site-header,
.wp-block-template-part[slug="header"] .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: var(--wp--preset--color--base);
    /* Use 'translate' for optimal GPU hardware acceleration */
    transition: translate 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    translate: 0 0;
}

/* When JS detects scrolling down, slide it up out of frame */
body.header-hidden .site-header,
body.header-hidden .wp-block-template-part[slug="header"] .site-header {
    translate: 0 -100%;
}

/* Admin bar: push fixed header down below the admin bar */
body.admin-bar .site-header,
body.admin-bar .wp-block-template-part[slug="header"] .site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header,
    body.admin-bar .wp-block-template-part[slug="header"] .site-header {
        top: 46px !important;
    }
    body.admin-bar main {
        min-height: calc(100vh - 11rem - 81px);
    }
}


/* WooCommerce Product Grid */
.wc-block-product-template__responsive {
    grid-gap: var(--wp--preset--spacing--70);
}
@media screen and (min-width: 782px) {
    .wc-block-product-template__responsive.columns-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--wp--preset--spacing--70) !important;
    }
}

.woocommerce-account .wp-block-post-title,
.woocommerce-account main .woocommerce,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
    max-width: var(--wp--style--global--content-size);
}


/* WooCommerce Account Navigation */
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
    padding: 0;
    margin-bottom: 1px;
}
.woocommerce-account .woocommerce {
    margin-top: 1rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: .5rem .5rem;
    background-color: var(--wp--preset--color--secondary);
}
.woocommerce-account .addresses .title .edit {
    float: none;
}

/* WooCommerce Account Login Page */
.woocommerce-account .woocommerce-form.woocommerce-form-login.login {
    max-width: 100%;
}
/* Target desktop */
@media screen and (min-width: 782px) {
    .woocommerce-account .woocommerce-form.woocommerce-form-login.login {
        max-width: 47%;
    }
}


/* Smooth transition for buttons state on hover. */
.wp-element-button,
a.wp-element-button,
.wc-block-components-button,
.wc-block-mini-cart__footer-cart {
    transition: color 500ms ease, background-color 500ms ease, border-color 500ms ease !important;
}

/* Keep buttons visible on hover. */
.wp-element-button:hover, 
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce a.added_to_cart:hover {
    color: var(--wp--preset--color--base) !important;
    border-color: var(--wp--preset--color--contrast) !important;
    background-color: var(--wp--preset--color--contrast) !important;
}

/* Keep Outline buttons visible on hover. */
.wp-element-button.is-style-outline:hover,
.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer-cart:hover *,
.wc-block-mini-cart__footer-cart:focus,
.wc-block-mini-cart__footer-cart:focus * {
    color: var(--wp--preset--color--contrast) !important;
    border-color: var(--wp--preset--color--contrast) !important;
    background-color: var(--wp--preset--color--secondary) !important;
}

/* Fix font issues on buttons. */
.wp-element-button, 
.wp-block-button__link {
    font-family: initial !important;
    background-color: #32373c !important;
}
.wp-element-button.is-style-outline {
    color: #32373c !important;
    outline: 2px solid currentColor;
    outline-offset: -1px;
}
.wc-block-components-button:not(.is-link) .wc-block-components-button__text {
    background-color: transparent !important;
}



/* Erases the core 200px hover rule completely */
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:not(.open-on-click):focus-within > .wp-block-navigation__submenu-container {
    min-width: 0 !important;
    min-width: max-content !important; /* Makes the box wrap cleanly around your text string width */
    width: auto !important;
}

/* Strip all padding entirely from the inner dropdown ul list container box */
.wp-block-navigation .wp-block-navigation__submenu-container {
    padding: 0 !important;
}

.wp-block-navigation .wp-block-social-link,
.wc-block-customer-account__link,
.wc-block-cart-link {
    color: var(--wp--preset--color--contrast) !important;
    /* outline: 1px red dashed; */
}

.wp-block-navigation .wp-block-social-link-anchor {  
    padding: .5rem;
}

/* Target desktop */
@media screen and (min-width: 782px) {

    .wp-block-navigation__responsive-container-content .wp-block-navigation-item a:hover {
        color: #000;
        text-decoration: underline;
    }
    
    /* Give the links inside the dropdown box their own separate padding layout */
    .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding: 0.25rem 1.5rem !important;
    }

    /* Submenu styling */
    .wp-block-navigation__submenu-container {
        background-color: var(--wp--preset--color--base) !important;
        color: inherit;
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item {
        color: var(--wp--preset--color--contrast);
    }
    .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
        background-color: var(--wp--preset--color--secondary);
    }
    .wp-block-navigation-submenu .wp-block-navigation-item.wp-block-navigation-link {
        margin: 0;
    }
    .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
        margin-left: -1.5rem;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .12), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .16);
    }
    .wp-block-navigation-submenu .wp-block-navigation-item.wp-block-navigation-link a {
        padding: inherit 1.5rem;
        margin: 0 !important;
    }

}


/* Target mobile */
@media screen and (max-width: 782px) {

    .wp-block-navigation__responsive-container-close svg {
        margin-right: 1.15rem;
        margin-top: 2rem;
    }

    /* ensure parent is flex columns and target nav to force menu order '999' to push the nav menu to end */
    .site-header div {
        flex-direction: row;
    }
    .site-header div nav {
        order: 999; 
    }

    /* Mobile Navigation */
    .wp-block-navigation__responsive-container.is-menu-open {
        height: 100vh;
    }
    .wp-block-navigation__responsive-container.is-menu-open svg {
        fill: var(--wp--preset--color--base) !important;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {    
        font-size: var(--wp--preset--font-size--x-large);
    }

    .wp-block-navigation__submenu-container {
        gap: 1.5rem !important;
    }
    .wp-block-navigation-link,
    .wp-social-link {
        padding: 0.5rem 1rem !important;
    }
    .wp-block-navigation-submenu > .wp-block-navigation-item__content .wp-block-navigation-item__label {
        opacity: 0.5;
    }
    .wp-block-navigation-item__content {
        padding: 0 !important;
    }

}




.wc-block-components-notice-banner {
    border-width: 0 0 0 5px !important;
    border-radius: 0;
    padding: 1rem;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25); */
}
.wc-block-components-notice-banner:focus-visible {
    outline: none !important;
}
.wc-block-components-notice-banner.is-success {
    background-color: #eff9f1;
    border-color: #4ab866;
}
.wc-block-components-notice-banner.is-info {
    background-color: #deebff;
    border-color: #3880e9;
}
.wc-block-components-notice-banner.is-error {
    background-color: #fcf0f0;
    border-color: #cc1818;
}
.wc-block-components-notice-banner.is-success>svg {
    scale: 2;
    fill: #4ab866;
}
.wc-block-components-notice-banner.is-info>svg {
    scale: 2;
    fill: #3880e9;
}
.wc-block-components-notice-banner.is-error>svg {
    scale: 1.5;
    fill: #cc1818;
}
.wc-block-components-notice-banner__content a.wc-forward:hover {
    background-color: transparent !important;
    color: var(--wp--preset--color--contrast) !important;
}
.wc-block-components-notice-banner>svg {
    background-color: transparent !important;
    fill: inherit;
}


.wc-block-product .wp-block-woocommerce-product-price {
    width: 50%;
    float: left;
    margin-bottom: 0 !important;
}
.wc-block-product .wc-block-components-product-price.wc-block-grid__product-price {
    outline: solid 1px #000;
    padding: .65rem 0;
}
.wp-block-button.wc-block-components-product-button > span {
    position: relative;
    width: 100%;
}
.woocommerce a.added_to_cart {
    position: absolute;
    width: 200%;
    margin: 0 0 0 -100%;
    text-align: center;
}
.woocommerce a.added_to_cart:hover {
    background-color: transparent !important;
    color: var(--wp--preset--color--contrast) !important;
}
.wp-block-button.wc-block-components-product-button {
    gap: 0;
}
.wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
    white-space: nowrap;
}
.wp-element-button.wc-block-components-product-button__button,
.wp-block-button__link.wp-element-button.wc-block-components-product-button__button  {
    width: 100%;
    border-radius: 0;
    margin-bottom: 0 !important;
    padding-top: calc(0.667em + 0px);
    padding-right: calc(1.333em + 0px);
    padding-bottom: calc(0.667em + 0px);
    padding-left: calc(1.333em + 0px);
}
.wc-block-product-template__responsive.columns-3.wc-block-product-template.wp-block-woocommerce-product-template.wp-block-woocommerce-product-template-is-layout-flow {
    margin-bottom: 0 !important;
}
.wp-block-woocommerce-product-details {
    display: none;
}


/* 1. Set the cell container to a row layout and center its items vertically */
td.wc-block-order-confirmation-totals__product {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* 2. Format the PHP-rendered image to remain on the left and never warp */
.wc-custom-order-thumb {
    order: -1 !important; /* Forces the image to the far left position */
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    margin: 0 .75rem 0 0 !important;
}

/* 3. Keep the name string and quantity cleanly bound inline together */
.wc-block-order-confirmation-totals__product-name {
    display: inline-flex !important;
    align-items: center !important;
}




/* Button over Carousel: Wrapper Group + Absolute Position
1. In the editor, add a core Group block (or Stack block).
2. Inside that Group block, insert your Custom Image Carousel block first.
3. Right underneath it (still inside the Group block), insert your Custom Button block.
4. Select the parent Group block. Expand the Advanced tab in the right sidebar panel and 
   add this to the Additional CSS Class(es) field: carousel-wrapper.  */

/* 1. Establish the boundary coordinate box */
.carousel-wrapper {
    position: relative; /* Restricts the absolute button to stay inside this group */
}

/* 2. Float the button over the carousel */
.carousel-wrapper .abs-modal-trigger {
    position: absolute;
    z-index: 10;        /* Ensures the button stays stacked on top of the sliding images */
    
    /* Position controls: Adjust these values to place it exactly where you want */
    bottom: 2rem;       /* Distances it from the bottom edge */
    left: 50%;          /* Moves it horizontally halfway across */
    transform: translateX(-50%); /* Perfectly centers the button horizontally */

    border-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--base) !important;

    padding: .6rem 1.8rem;
    font-size: var(--wp--preset--font-size--large);
    white-space: nowrap;
}