/*
Theme Name: Sassi Rossi
Theme URI: https://sassirossi.it
Author: Hotel Ristorante Sassi Rossi
Description: Tema a blocchi per l'Hotel Ristorante Sassi Rossi, Crandola Valsassina. Atmosfera montana: abete, granito, roccia rossa.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: sassi-rossi
*/

/* Intestazione */
.sr-topbar a{text-decoration:none}
.sr-topbar a:hover{text-decoration:underline}
.sr-header{border-bottom:1px solid var(--wp--preset--color--pietra)}
.sr-header .wp-block-navigation-item.is-cta>a{background:var(--wp--preset--color--roccia);color:#fff;padding:.55em 1.1em;border-radius:2px}
.sr-header .wp-block-navigation-item.is-cta>a:hover{background:var(--wp--preset--color--abete)}

/* Cresta di montagna sotto hero e titoli pagina */
.sr-hero,.sr-pagehead{position:relative;isolation:isolate;overflow:hidden;background:var(--wp--preset--color--abete) url(assets/contours.svg) center/cover no-repeat}
.sr-hero::after,.sr-pagehead::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-1px;height:clamp(56px,9vw,130px);background:var(--wp--preset--color--nebbia);-webkit-mask:url(assets/ridge.svg) bottom/100% 100% no-repeat;mask:url(assets/ridge.svg) bottom/100% 100% no-repeat}
.sr-hero{padding-bottom:clamp(110px,16vw,220px)!important}
.sr-pagehead{padding-bottom:clamp(90px,12vw,170px)!important}
.sr-hero>*,.sr-pagehead>*{position:relative;z-index:1}
.sr-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;max-width:14ch}
.sr-hero .wp-block-button.is-style-outline .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.6)}

/* Cartelli sentiero per le distanze */
.sr-cartelli{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.sr-cartelli li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 2.2rem .8rem 1.1rem;background:var(--wp--preset--color--neve);color:var(--wp--preset--color--granito);border:0;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);font-weight:600}
.sr-cartelli li span{color:var(--wp--preset--color--roccia);font-family:var(--wp--preset--font-family--alegreya);font-weight:700;font-size:1.25rem}
.sr-cartelli li:nth-child(even){background:var(--wp--preset--color--abete);color:var(--wp--preset--color--nebbia);margin-left:1.5rem;padding:.8rem 1.1rem .8rem 2.2rem;clip-path:polygon(20px 0,100% 0,100% 100%,20px 100%,0 50%)}
.sr-cartelli li:nth-child(even) span{color:#fff}

/* Sezioni */
.sr-newsletter{background:var(--wp--preset--color--abete);color:var(--wp--preset--color--nebbia)}
.sr-newsletter a{color:#fff}
.sr-footer a{color:var(--wp--preset--color--nebbia);text-decoration:none}
.sr-footer a:hover{text-decoration:underline}
.wp-block-media-text .wp-block-media-text__media img{border-radius:2px}

:focus-visible{outline:3px solid var(--wp--preset--color--roccia);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Pannello prenotazione */
.sr-prenota-wrap{position:relative;z-index:2;margin-top:calc(-1 * clamp(2.5rem,6vw,5rem))!important}
.sr-prenota{border-top:4px solid var(--wp--preset--color--roccia);box-shadow:0 22px 44px -26px rgba(15,25,20,.55)}
.sr-prenota h2{margin-top:0}
@media (max-width:781px){.sr-prenota{padding-left:1.25rem!important;padding-right:1.25rem!important}}

/* Testate con foto */
.sr-pagehead--foto{background-size:cover!important;background-position:center!important;padding-top:clamp(4rem,9vw,7rem)!important}
.sr-pagehead--hotel{background-image:linear-gradient(rgba(30,51,40,.72),rgba(30,51,40,.55)),url(assets/testata-hotel.jpg)!important;background-position:center 60%!important}
.sr-pagehead--ristorante{background-image:linear-gradient(rgba(30,51,40,.7),rgba(30,51,40,.5)),url(assets/testata-ristorante.jpg)!important}
.sr-pagehead--servizi{background-image:linear-gradient(rgba(30,51,40,.72),rgba(30,51,40,.55)),url(assets/testata-servizi.jpg)!important}