/**
Theme Name: ilrosachenontace
Author: Giuseppequaresima.it
Author URI: https://giuseppequaresima.it
License: GNU General Public License v2 or later
Text Domain: ilrosachenontace
Template: astra
*/
body {font-family: 'Montserrat', sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', sans-serif; font-weight: 500;}
p{font-family: 'Montserrat', sans-serif; font-weight: 500;}
h1, h2, h3{    color:var(--ast-global-color-0); font-weight: 500;letter-spacing: 0rem;}


/* ==========================================================================
  SINGLE MATERIA
========================================================================== */

.materia-video{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    margin:40px 0;
    border-radius:12px;
    overflow:hidden;
}

.materia-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}


.single-materia .section-contenuto {
    padding: 20px 0;
}

/* ==========================================================================
   HERO SECTION
========================================================================== */

.hero-home{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    background:#f7f7f7;
    overflow:hidden;
    min-height:100dvh;
}

.hero-wrapper{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 30px;
    min-height:100dvh;
    display:grid;
    grid-template-columns:45% 55%;
    align-items:center;
    position:relative;
    z-index:10;
}

.hero-circle{
    position:absolute;
    width:38rem;
    height:38rem;
    border-radius:50%;
    right:380px;
    top:50px;
    background:#c8b2b2;
    opacity:1;
    z-index:1;
}

.hero-content{
    position:relative;
    z-index:20;
    padding-right:60px;
    left: 10rem;
    top:4rem;
}

.hero-small{
    display:block;
    margin-bottom:20px;
    font-size:18px;
    font-weight:600;
    letter-spacing:1px;
    color:#444;
}

.hero-content h1{
    margin: 0 0 0 -10px;
    line-height:.4;
    font-size:clamp(70px,7vw,125px);
    font-weight:700;
    letter-spacing: -0.3rem;
  }

    .hero-non{
        font-size:1.15em;
        font-weight:700;
        letter-spacing:-0.03em;
    }

.hero-content .black{color:#111;}
.hero-content .rose{color:#968080;}

.hero-content .white{
    color:#fff;
    text-shadow:2px 2px 8px rgba(0,0,0,.18);
}

.hero-content p{
    margin-top:35px;
    max-width:650px;
    font-size:clamp(22px,2vw,38px);
    line-height:1.25;
    font-weight:700;
    color:#222;
}

.hero-title{
    margin:0;
    font-size:clamp(70px,7vw,125px);
    font-weight:900;
    line-height:.9;
    width: 700px;
}

.hero-line{
    display:flex;
    align-items:baseline;
    gap:.25em;
    flex-wrap:nowrap;
}

.hero-line-2{margin-top:-10px;}

.hero-line span{display:block;}

.hero-image{
    position:relative;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    height:100%;
    z-index:15;
    right: 50px;
}

.hero-image img{
    display:block;
    width:60%;
    max-width:720px;
    height:auto;
}

.hero-title{
    margin:0;
    line-height:.5;
    font-size:clamp(70px,7vw,125px);
    font-weight:700;
    letter-spacing:-0.3rem;
}

.hero-title p{
    margin:0;
    font-size:clamp(40px,6vw,100px);
    line-height: .9;
    font-weight: 700;
    letter-spacing: -0.3rem;

}

.hero-title .black{
    color:#111;
}

.hero-title .rose{
    color:#968080;
}

.hero-title .white{
    color:#fff;
    text-shadow:2px 2px 8px rgba(0,0,0,.18);
}

.hero-title .hero-highlight{
    font-size:1.15em;
    font-weight:700;
    letter-spacing:-0.03em;
}

.hero-break{
    display:block;
    height:.15em;
}

/*=================================================
 IMAGE
=================================================*/

.hero-image{
    position:relative;
    height:100%;
    display:flex;
    align-items:stretch;
    justify-content:flex-end;
    z-index:15;
}

.hero-image img{
    width:100%;
    height:100%;
    object-fit:contain;      /* oppure cover */
    object-position:bottom center;
    display:block;
}

/* ==========================================================================
   SECTION QUOTE
========================================================================== */

.quote-section{
    padding: 110px 20px;
}

.quote-container{
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.quote-text{
    font-size: 30px;
    line-height: 1.08;
    font-style: italic;
    font-weight: 500;
    color: #262626;
    letter-spacing: -0.02em;
}

.quote-text p{
    margin: 0;
}

.quote-text strong,
.quote-text b{
    color: #b09a9a;
    font-weight:700;
}
.quote-author-wrapper{
    margin-top: 35px;
    text-align: right;
}

.quote-author{
    display: inline-block;
    font-size: 20px;
    font-style: italic;
    font-weight: 100;
    color: #2f2f2f;
    letter-spacing: .02em;
}

@media (max-width:1024px){

    .quote-section{
        padding:90px 30px;
    }

    .quote-text{
        font-size:42px;
    }

    .quote-author{
        font-size:24px;
    }

}

@media (max-width:768px){

    .quote-section{
        padding:70px 20px;
    }

    .quote-text{
        font-size:32px;
        line-height:1.2;
    }

    .quote-author-wrapper{
        margin-top:25px;
        text-align:center;
    }

    .quote-author{
        font-size:20px;
    }

}

@media (max-width:480px){

    .quote-text{
        font-size:26px;
    }

    .quote-author{
        font-size:18px;
    }

}

/*======================================================
 HERO FULL BACKGROUND
======================================================*/

.hero-background{

    width:100vw;
    height:100vh;

    margin-left:calc(50% - 50vw);

    position:relative;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.35);

}

.hero-container{

    position:relative;
    z-index:2;

    width:var(--ast-container-width);
    max-width:1320px;

    margin:auto;

    padding:0 30px;

    height:100%;

    display:grid;

    grid-template-columns:50% 50%;

    align-items:center;

}

.hero-column{

    min-height:1px;

}

.hero-text{

    color:#fff;

}


.hero-title{

    font-size:clamp(60px,6vw,120px);

    line-height:.9;

    font-weight:700;

    color:#fff;

}

.hero-title p{

    margin:0;

    color:#fff;

}

.hero-title strong{

    color:var(--ast-global-color-0);

}

@media(max-width:991px){

    .hero-container{

        grid-template-columns:1fr;

    }

    .hero-column:first-child{

        display:none;

    }

    .hero-text{

        text-align:center;

    }

}


/* ==========================================================================
   SECTION IMAGE + TEXT
========================================================================== */

.image-text-section{
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--background, #efefef);
    min-height: 100vh;
    overflow: hidden;
}

.image-text-container{
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}

.image-text-section.reverse .image-text-container{flex-direction: row-reverse;}

.section-title{
    margin:0 0 50px;
    line-height:.9;
    font-weight:300;
}

.section-title .line{
    display:block;
    font-size:clamp(52px,4vw,82px);
    color: var(--font-color);
    font-weight:300;
    letter-spacing:-0.04em;
}

.section-title .accent{
    color:var(--accent);
    font-weight:800;
    font-size:clamp(68px,6vw,110px);
    line-height:.85;
}

/*=================================================
 IMAGE
=================================================*/
.image-column{
    flex: 0 0 50%;
    max-width: 50%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.image-column,
.content-column{
    flex: 0 0 50%;
    max-width: 50%;
}

.image-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.image-wrapper img{
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center bottom;

    position: relative;
    z-index: 2;
}

/*=================================================
 CONTENT
=================================================*/

.content-column{
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6vw;
}

.content-column h2{
    margin: 0 0 40px;
    font-size: clamp(30px, 4vw, 40px);
    line-height: .95;
    font-weight: 300;
    color: var(--font-color);
}

.content-column h2 span{
    color: var(--accent);
    font-weight: 700;
}

.content-column h3{
    margin: 0 0 40px;
    font-size: clamp(30px, 4vw, 40px);
    line-height: .95;
    font-weight: 300;
    color: var(--font-color);
}

.content-column h3 span{
    color: var(--accent);
    font-weight: 700;
}

.description{
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.6;
    color: var(--font-color);
}

.description p{
    margin: 0;
    font-weight: 400;
    letter-spacing: -1px;
}

.description strong{
    font-weight: 700;
}

/*=================================================
 TITLE
=================================================*/

.section-title{
    margin:0 0 50px;
    line-height:1;
    letter-spacing:-0.04em;
}

.section-title h2{
    margin:0;
    line-height:.9;
    letter-spacing:-0.04em;
}

.section-title h3{
    margin:0;
    line-height:.9;
    letter-spacing:-0.04em;
}


.section-title .light{
    font-size:1em;
    font-weight:300;
    color:#202020;
}

.section-title .accent{
    font-size:1.5em;
    font-weight:800;
    color:var(--ast-global-color-0);
}

.section-title p{
    margin:0;
}

/* parole evidenziate */

.section-title span{
    color:var(--accent);
    font-size:1.35em;
    font-weight:800;
    line-height:.85;
}

/* eventuale testo piccolo */

.section-title small{
    display:block;
    font-size:.55em;
    font-weight:300;
    line-height:1.1;
}

/* grassetto */

.section-title strong{
    font-weight:800;
}


.section-button{
    margin-top:40px;
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border: solid 2px var(--accent);
    color:var(--accent);
    border-radius:999px;
    text-decoration:none;
    font-weight:600;
    transition:.3s ease;
}

.btn-primary:hover{
      border: solid 2px var(--accent);
      color:var(--accent);
      opacity:.8;
}


/*=================================================
 RESPONSIVE
=================================================*/
@media (max-width:991px){

    .image-text-container{
        flex-direction: column;
        min-height: auto;
    }

    .image-text-section.reverse .image-text-container{
        flex-direction: column;
    }

    .image-column,
    .content-column{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .image-column{
        height: 60vh;
        min-height: 60vh;
    }

    .content-column{
        padding: 60px 30px;
        text-align: center;
    }

    .content-column h2{
        font-size: 46px;
    }

    .description{
        font-size: 20px;
    }
}

@media (max-width:576px){

    .image-column{
        height: 50vh;
        min-height: 50vh;
    }

    .content-column{
        padding: 40px 20px;
    }

    .content-column h2{
        font-size: 36px;
    }

    .description{
        font-size: 18px;
    }
}


/* ===================================================
SECTION CONTENUTO
=================================================== */

.section-contenuto{
    width:100vw;
    margin-left:calc(50% - 50vw);
    background:var(--background-color);
    padding:100px 0;
    position:relative;
}

.section-contenuto__wrapper{
    width: var(--ast-container-width);
    max-width: 1100px;
    margin:0 auto;
    padding-left:var(--ast-container-default-xlg-padding, 20px);
    padding-right:var(--ast-container-default-xlg-padding, 20px);
}

.section-contenuto__small{
    display:inline-block;
    margin-bottom:18px;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:var(--ast-global-color-0);
    font-weight:600;
}

.section-contenuto__title{
    margin:0 0 50px;
    font-size:clamp(22px,3vw,35px);
    line-height:1;
    font-weight:500;
}

.section-contenuto__text{
    font-size:20px;
    font-weight: 500;
    line-height:1.5;
    text-align:justify;
    color:#333;
}

.section-contenuto__text p{
    margin-bottom:25px;
}

.section-contenuto__text h2{
    font-size:30px;
    margin:80px 0 25px;
}

.section-contenuto__text h3{
    font-size:26px;
    margin:0px;
    font-weight: 700;
}

.section-contenuto__text ul,
.section-contenuto__text ol{
    margin:32px 0;
    padding-left:40px;
}

.section-contenuto__text li{
    margin-bottom:18px;
}

.section-contenuto__text blockquote{
    margin:70px 0;
    padding:40px 50px;
    border-left:6px solid var(--ast-global-color-0);
    background:#fff;
    border-radius:16px;
    font-size:34px;
    line-height:1.5;
    font-style:italic;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.section-contenuto__text strong{
    color:var(--ast-global-color-0);
}

.section-contenuto__text a{
    color:var(--ast-global-color-0);
    text-decoration:none;
}

.section-contenuto__text img{
    width:100%;
    height:auto;
    border-radius:20px;
    margin:50px 0;
}

@media(max-width:991px){

    .section-contenuto{
        padding:90px 0;
    }

    .section-contenuto__wrapper{
        padding:0 25px;
    }

    .section-contenuto__title{
        font-size:48px;
    }

    .section-contenuto__text{
        font-size:22px;
    }

    .section-contenuto__text blockquote{
        font-size:26px;
        padding:30px;
    }

}



/* ==========================================================================
   SECTION CARDS
========================================================================== */

.section-cards {
    width:100vw;
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:60px 0;
    overflow:hidden;
    position:relative;
}

/* contenitore Astra */
.section-cards-inner{
    width:var(--ast-container-width);
    max-width:1100PX;
    margin:auto;
}

.cards-header{
    max-width:900px;
    margin:0 auto 70px;
    text-align:center;
}

.cards-title{
    font-size:clamp(16px,3vw,30px);
    line-height: 0;
    font-weight: 500;
    text-align: center;
    color:#333333;
}



.cards-description{
      font-size: 20px;
      line-height: 1.5;
      padding: 30px 0;
      font-weight: 500;
}

.cards-container{
    display:grid;
    gap:40px;
}

.columns-2{grid-template-columns:repeat(2,1fr);}
.columns-3{grid-template-columns:repeat(3,1fr);}
.columns-4{grid-template-columns:repeat(4,1fr);}

.card-item{
    background:#fff;
    padding:40px;
    border-radius:25px;
    transition:.4s ease;
    font-weight: 500;
    line-height: 1.5;
    font-size:20px;
}


.card-item p{
      font-size: 16px;
      line-height: 1.5em;
      font-weight: 500;
}


.card-item h3{
    color:var(--ast-global-color-0);
    font-weight: 700;
    margin-bottom: 20px;

}

.card-item:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.card-link{
    display:block;
    height:100%;
    text-decoration:none;
    color:inherit;
}

@media(max-width:768px){

    .section-cards{
        width:100%;
        margin-left:0;
    }

    .section-cards-inner{
        width:90%;
    }

    .cards-container{
        grid-template-columns:1fr;
    }
}




/*=========================================
SECTION MUSIC
=========================================*/
.section-music{
    padding:80px 0;
}

.music-container{
    max-width:1300px;
    margin:0 auto;
    padding:0;
}

.music-card{
    display:flex;
    gap:40px;
    align-items:stretch;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.music-video{
    width:100%;
    position:relative;
    aspect-ratio:16/9;
    background:#000;
}

.music-video iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.music-content{
    width:100%;
    padding:0 50px 30px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.music-card {
    background: #977f803b;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
}

a.music-tag {
    color: var(--ast-global-color-3);
    font-size:12px;
    font-weight: 500;
    text-transform: uppercase;


}

.music-text{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

.music-separator{
    margin:0 10px;
    color:#999;
    font-weight:400;
}

.music-tag{
    text-decoration:none;
}

.music-tag:hover{
    text-decoration:underline;
}


.music-action {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.music-action .song-sheet-button {
    appearance: none;
    border: 0;
    padding: 14px 24px;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.music-action .song-sheet-button:hover {
    transform: translateY(-2px);
    opacity: 0.85;
    color: #fff;
}

@media(max-width:900px){

    .music-card{
        flex-direction:column;
    }

    .music-video,
    .music-content{
        width:100%;
    }

    .music-content{
        padding:30px;
    }
}


/* =========================================
   SECTION BRANO E ACCORDI
========================================= */

.section-song-sheet {
    width: 100%;
    padding:
    0px;

}

.song-sheet-container {
    margin: 0 auto;
}

.song-sheet-card {
    background: #ffffff;
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}


/* HEADER */

.song-sheet-header {
    margin-bottom: 35px;
    text-align: center;
}

.song-sheet-title {
    margin: 0 0 10px;
    font-size: 34px;
    line-height: 1.2;
}

.song-sheet-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #777;
    font-size: 16px;
}

.song-sheet-separator {
    opacity: 0.5;
}


/* CONTENUTO */

.song-sheet-content {
    margin-bottom: 40px;
}

.song-sheet-text {
    font-family: monospace;
    font-size: 16px;
    line-height: 1.8;
    white-space: normal;
    color: #222;
}

.song-sheet-text p {
    margin: 0 0 18px;
}



/* PULSANTI */

.song-sheet-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.song-sheet-button {
    appearance: none;
    border: 0;
    padding: 14px 24px;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.song-sheet-button:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}

.song-sheet-icon {
    margin-right: 8px;
}

.song-sheet-print-footer{
    display:none;
}



/* MOBILE */

@media (max-width: 768px) {

    .section-song-sheet {
        padding: 50px 15px;
    }

    .song-sheet-card {
        padding: 30px 20px;
        border-radius: 15px;
    }

    .song-sheet-title {
        font-size: 26px;
    }

    .song-sheet-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .song-sheet-actions {
        flex-direction: column;
    }

    .song-sheet-button {
        width: 100%;
    }

}



/* =========================================
   STAMPA
========================================= */

@media print {

    body * {
        visibility: hidden;
    }

    #brano-accordi-section,
    #brano-accordi-section * {
        visibility: visible;
    }

    #brano-accordi-section {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 0;
        background: #fff;
    }

    .song-sheet-container {
        max-width: 100%;
    }

    .song-sheet-card {
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .song-sheet-actions {
        display: none !important;
    }

    .song-sheet-title {
        color: #000;
        font-size: 24px;
    }

    .song-sheet-meta {
        color: #000;
    }

    .song-sheet-text {
        color: #000;
        font-size: 12pt;
        line-height: 1.5;
    }

    .song-sheet-print-footer{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:35px;
        border-top:1px solid #ccc;
        padding-top:15px;
        margin-top:40px;
        font-size:13px
        color:#444;
    }

    .song-sheet-print-logo img{
        width:140px;
        height:auto;
        display:block;
        box-shadow: none !important;
        filter: none !important;
        -webkit-filter: none !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
    }
    .song-sheet-print-site,
    .song-sheet-print-mail{
        white-space:nowrap;
        font-weight:600;
    }
}


/* ==========================================================================
   DESKTOP XL
========================================================================== */

@media (min-width:1600px){

.hero-wrapper{max-width:1500px;}

.hero-circle{
width:1200px;
height:1200px;
right:-250px;
}

.hero-image img{max-width:820px;}

}


/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width:1024px){

.hero-home{
min-height:auto;
}

.hero-wrapper{
grid-template-columns:1fr;
text-align:center;
gap:50px;
padding:80px 30px;
min-height:auto;
}

.hero-content{
padding-right:0;
max-width:760px;
margin:auto;
}

.hero-content p{
margin-left:auto;
margin-right:auto;
}

.hero-circle{
width:700px;
height:700px;
right:50%;
top:250px;
transform:translateX(50%);}

.hero-image{justify-content:center;}
.hero-image img{max-width:520px;}

}


/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width:768px){

.hero-wrapper{
padding:60px 20px;
gap:30px;
}

.hero-content h1{
font-size:52px;
line-height:.95;
}

.hero-content p{
font-size:24px;
}

.hero-small{
font-size:16px;
}

.hero-circle{
width:420px;
height:420px;
top:260px;
right:50%;
transform:translateX(50%);
opacity:.25;
}

.hero-image img{
max-width:340px;
}

}