/*
 * CSS for both editor and front-end.
 */

/* Button */
.is-style-elisen-photography-flat-button .wp-block-button__link,
.is-style-elisen-photography-flat-button .wp-block-button__link:active,
.is-style-elisen-photography-flat-button .wp-block-button__link:focus,
.is-style-elisen-photography-flat-button .wp-block-button__link:hover,
.is-style-elisen-photography-flat-button .wp-block-button__link:visited {
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    margin-top: 0
}

/* Box shadow */
.is-style-elisen-photography-box-shadow {
    box-shadow: var(--wp--preset--shadow--natural)
}

/* List */
.is-style-elisen-photography-list-underline li {
    border-bottom: 1px solid
}
.is-style-elisen-photography-list-underline ul {
    border-top: 1px solid
}
.is-style-elisen-photography-list-underline ul li {
    border: none
}
details.is-style-elisen-photography-plus>summary {
    list-style-type: "+ "
}
details[open].is-style-elisen-photography-plus>summary {
    list-style-type: "- "
}
details.is-style-elisen-photography-plus>summary::marker {
    font-family: var(--wp--preset--font-family--monospace);
    font-size: 1em;
    font-weight: 700
}

/* WooCommerce */
.wc-block-grid .wc-block-grid__product-onsale,
.wc-block-grid__product-image .wc-block-grid__product-onsale,
.woocommerce span.onsale {
    background-color: var(--wp--preset--color--primary);
    border: none;
    border-radius: 100%;
    color: var(--wp--preset--color--contrast);
    font-size: 1rem;
    height: 3.7rem;
    line-height: 3.236;
    text-align: center;
    text-transform: capitalize;
    width: 3.7rem
}
.woocommerce div.product .stock {
    color: var(--wp--preset--color--primary)
}

/* Latest posts */
.wp-block-latest-posts li {
    margin-bottom: 40px;
}

.entry-content a {
  text-decoration: underline;
}
a:where(:not(.wp-element-button)):hover {
    text-decoration: underline;
}

.elisen-portfolio {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero — percorso pages (see patterns/hidden-page.php) */
.elisen-hero--route .wp-block-cover__image-background {
    object-position: center 45%;
}

/* The overlay is light here, so the title needs its own scrim to stay legible. */
.elisen-hero--route .elisen-hero-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 24px rgba(0, 0, 0, 0.55);
}

/*
 * Portrait photos are shown whole, with the sides filled by a blurred, zoomed
 * copy of the same photo (background-image injected per-request from
 * functions.php). Swap that ::before rule for `background: #000` to get plain
 * black bars instead.
 */
.elisen-hero--portrait {
    /*
     * As tall as the viewport minus the site header, so the whole photo is
     * visible without scrolling. !important: the cover prints min-height inline.
     */
    min-height: calc(100vh - 15rem) !important;
    overflow: hidden;
}

.elisen-hero--portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
    /* scale() pushes the blur's soft edges out of view. */
    transform: scale(1.15);
    filter: blur(40px) brightness(0.55);
}

/*
 * Photo and backdrop both stay at z-index 0, so paint order follows the DOM:
 * ::before, then the photo, then the dim overlay and the title (z-index: auto).
 */
.elisen-hero--portrait .wp-block-cover__image-background {
    object-fit: contain;
    object-position: center;
    z-index: 0;
}

@media (max-width: 781px) {
    /* !important: the cover block prints min-height inline. */
    .elisen-hero--route {
        min-height: 55vh !important;
    }
    /* A portrait photo in a portrait viewport crops fine: no bars needed. */
    .elisen-hero--portrait {
        min-height: 70vh !important;
    }
    .elisen-hero--portrait::before {
        display: none;
    }
    .elisen-hero--portrait .wp-block-cover__image-background {
        object-fit: cover;
    }
    .elisen-hero--route .elisen-hero-title {
        font-size: var(--wp--preset--font-size--x-large);
        letter-spacing: 1px;
    }
}

.elisen-percorsi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: var(--wp--preset--spacing--50, 2rem);
    align-items: start;
}

.elisen-portfolio .elisen-hover-effect {
    position: relative;
    overflow: hidden;
    background: #18a367;
    max-width: 480px;
    max-height: 330px;
    margin: auto;
}

.elisen-portfolio .elisen-hover-effect p {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
}

.elisen-portfolio .elisen-portfolio-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 3em;
}

.elisen-portfolio .elisen-portfolio-content h2 {
    padding-top: 15%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

.elisen-portfolio .elisen-hover-effect img, 
.elisen-portfolio .elisen-hover-effect h2 {
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
}

.elisen-portfolio .elisen-hover-effect .wp-block-button__link.wp-element-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.elisen-portfolio .elisen-portfolio-content::before, 
.elisen-portfolio .elisen-portfolio-content::after {
    position: absolute;
    content: '';
    opacity: 0;
}

.elisen-portfolio .elisen-portfolio-content::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.elisen-portfolio .elisen-portfolio-content::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

.elisen-portfolio .elisen-hover-effect img, 
.elisen-portfolio .elisen-portfolio-content::before, 
.elisen-portfolio .elisen-portfolio-content::after, 
.elisen-portfolio .elisen-hover-effect p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.elisen-portfolio .elisen-hover-effect:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.elisen-portfolio .elisen-hover-effect:hover .elisen-portfolio-content::after, 
.elisen-portfolio .elisen-hover-effect:hover h2, 
.elisen-portfolio .elisen-hover-effect:hover p, 
.elisen-portfolio .elisen-hover-effect:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.elisen-portfolio .elisen-hover-effect:hover .elisen-portfolio-content::before, 
.elisen-portfolio .elisen-hover-effect:hover .elisen-portfolio-content::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.elisen-portfolio .elisen-hover-effect:hover h2, 
.elisen-portfolio .elisen-hover-effect:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.elisen-portfolio .elisen-hover-effect:hover .elisen-portfolio-content::after, 
.elisen-portfolio .elisen-hover-effect:hover h2, 
.elisen-portfolio .elisen-hover-effect:hover p, 
.elisen-portfolio .elisen-hover-effect:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

@media screen and (max-width: 500px) {
    .elisen-portfolio .elisen-portfolio-content h2 {
        padding-top: 5%;
    }
}

/* Strava is not a core social service, so its brand colour is not in the
   block library stylesheet. Icon itself is swapped in inc/filters.php. */
.wp-block-social-links:not(.is-style-logos-only) .wp-social-link.wp-social-link-strava {
    background-color: #fc4c02;
    color: #fff;
}

.wp-block-social-links.is-style-logos-only .wp-social-link.wp-social-link-strava {
    color: #fc4c02;
}

/* Google Form embed (pagina Iscrizione).

   Il documento è cross-origin: non se ne può leggere l'altezza da JS, quindi
   l'iframe va dimensionato a mano. L'altezza qui sotto NON è una stima: il
   modulo è stato misurato (8 domande, pagina unica, 1596px con il card di
   Google a 640px fissi). Il valore tiene un margine sopra quello misurato in
   modo che il form entri per intero e non compaia lo scroll interno: a
   scorrere è la pagina, non l'iframe.

   Sotto i 640px il card si restringe, le etichette vanno a capo e il form si
   allunga: da lì in giù serve più altezza.

   Verificato a schermo: con questa altezza il browser non disegna la barra
   interna. Lo scroll dell'iframe resta comunque abilitato di proposito: se un
   domani il modulo si allunga (domande aggiunte, etichette che vanno a capo),
   ricompare una barra — sgradevole ma recuperabile. Bloccarlo con
   scrolling="no" taglierebbe invece il fondo del form, e lì c'è il tasto
   Invia: si perderebbero iscrizioni senza accorgersene.

   Se vengono aggiunte domande al modulo, rialzare questi valori. */
.elisen-form-embed {
    margin-block: var(--wp--preset--spacing--50);
}

.elisen-form-embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 1700px;
    border: 0;
}

@media screen and (max-width: 640px) {
    .elisen-form-embed iframe {
        height: 2150px;
    }
}

/* Percorsi announced but not open yet — see elisen_photography_suspended_routes()
   in inc/percorsi.php. The card keeps its hover behaviour so the description is
   still readable; what it loses is the invisible full-card link, so there is
   nothing to click. */
.elisen-portfolio .elisen-percorso-suspended {
    cursor: default;
}

.elisen-portfolio .elisen-percorso-suspended img {
    filter: grayscale(0.55) brightness(0.85);
}

.elisen-portfolio .elisen-percorso-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Above .elisen-portfolio-content, which covers the whole card on hover. */
    z-index: 1001;
    padding: 0.55em 1em;
    background: #d81f2a;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

/* Same warning beside the name in the Percorsi dropdown. */
.wp-block-navigation .elisen-nav-soon {
    display: inline-block;
    margin-left: 0.6em;
    color: #d81f2a;
    font-weight: 700;
    /* The menu sets wide tracking for its uppercase labels; at this size it
       would break the phrase up. */
    letter-spacing: 0;
    white-space: nowrap;
}

.wp-block-navigation .wp-block-navigation-item__content[aria-disabled="true"] {
    cursor: default;
    opacity: 0.75;
}

/* The menu link is a flex container, so the notice — which must not break
   mid-phrase — competes with the name for width and squeezes "Busacca del
   Passone" onto three lines. Keeping the whole entry on one line instead lets
   the submenu size itself to fit. Scoped to suspended entries so the wrapping
   of the other, untouched names stays as it was. */
.wp-block-navigation .wp-block-navigation-item__content[aria-disabled="true"] {
    white-space: nowrap;
}