/*
 Theme Name:   In Banchina
 Theme URI:    https://francescoraucci.it
 Description:  In Banchinatheme
 Author:       Francesco Raucci
 Author URI:   https://francescoraucci.it
 Template:     generatepress
 Version:      0.1
*/

/* ========== BUTTON SYSTEM ========== */
:root{
    --fr-btn-radius: 24px;
    --fr-btn-pad-y: 12px;
    --fr-btn-pad-x: 30px;
    --fr-btn-font: 500;
    --fr-primary:var(--accent,#00497a);
    --fr-primary-contrast:#fff;
    --fr-secondary:#d2edff;
    --fr-secondary-contrast:#0a4a7a;
    --fr-tertiary:var(--global-color-9,#0a4a7a);
    --fr-tertiary-contrast:#fff;
    --fr-quarterly:var(--global-color-10,#8CD2FF);
    --fr-quarterly-contrast:var(--accent,#00497a);
    --fr-s6: clamp(28px, 3.5vw, 84px);
    /* Font size scale (fluid, no media queries) */
    --fr-text-xs: clamp(12px, 0.9vw, 13px);
    --fr-text-sm: clamp(14px, 1.1vw, 15px);
    --fr-text-base: clamp(16px, 1.4vw, 17px);
    --fr-text-md: clamp(18px, 1.6vw, 20px);
    --fr-text-lg: clamp(22px, 2.2vw, 26px);
    --fr-text-xl: clamp(28px, 3vw, 36px);
    --fr-text-2xl: clamp(36px, 4vw, 48px);
}
/* =========================
   FONT SIZE UTILITIES (GP safe)
========================= */
.fr-text-xs{ font-size: var(--fr-text-xs); }
.fr-text-sm{ font-size: var(--fr-text-sm); }
.fr-text-base{ font-size: var(--fr-text-base); }
.fr-text-md{ font-size: var(--fr-text-md); }
.fr-text-lg{ font-size: var(--fr-text-lg); }
.fr-text-xl{ font-size: var(--fr-text-xl); }
.fr-text-2xl{ font-size: var(--fr-text-2xl); }

.fr-title-hero{ font-size: var(--fr-text-2xl); }
.fr-title-section{ font-size: var(--fr-text-xl); }
.fr-title-card{ font-size: var(--fr-text-lg); }
.fr-text-lead{ font-size: var(--fr-text-md); }


.fr-ol-ver{
    list-style: none;
    padding: 0;
    margin: 3rem 0;
}
.fr-ol-ver li {
    display: grid;
    grid-template-columns: 42px auto;
    column-gap: 30px;
    justify-items: start;
    align-items: center;
    font-size: 20px;
    margin:0 0 2.5rem;
}
.fr-ol-ver li::before {
    counter-increment: list-item;
    content: counter(list-item);
    background-color: #d2edff;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    text-align: center;
    line-height: 56px;
    color: #0a4a7a;
    font-size: 32px;
}

.fr-ol-ver-with-anchor {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fr-ol-ver-with-anchor li {
    display: grid;
    grid-template-columns: 36px auto;
    column-gap: 20px;
    justify-items: start;
    align-items: center;
    margin-bottom: .5rem;
}
.fr-ol-ver-with-anchor li:last-child{
    margin-bottom: 0;
}
.fr-ol-ver-with-anchor li {
    color: inherit;
    background-color: transparent;
    border: unset;
    line-height: 24px;
}
.fr-ol-ver-with-anchor li::before {
    content: url("./assets/img/anchor-right-light.svg");
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #0a4a7a;
    font-size: 32px;
    display: inline-block;
}


main section{
    padding-block: clamp(36px, 5vw, 72px);
}

.fr-section{
    padding-block: var(--fr-s6);
}
.fr-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: var(--fr-btn-pad-y) var(--fr-btn-pad-x);
    border-radius: var(--fr-btn-radius);
    border: 1px solid transparent;
    font-weight: var(--fr-btn-font);
    line-height: 1;
    text-decoration:none;
    cursor:pointer;
    transition: transform .08s ease, opacity .12s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fr-btn:active{ transform: translateY(1px); }

.fr-btn--primary{
    background: var(--fr-primary);
    color: var(--fr-primary-contrast);
}
.fr-btn--secondary{
    background: var(--fr-secondary);
    color: var(--fr-secondary-contrast);
}
.fr-btn--ghost{
    background: transparent;
    border-color: var(--fr-border);
    color: var(--fr-text);
}
    .fr-btn--ghost:is(:hover, :focus){
    background-color: transparent;
    border-color: var(--fr-border);
    color: var(--fr-text);
}
.fr-btn--sm{ --fr-btn-pad-y:10px; --fr-btn-pad-x:14px; font-size:14px; }
.fr-btn--lg{ --fr-btn-pad-y:14px; --fr-btn-pad-x:20px; font-size:16px; }

.fr-btn:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.fr-btn:active{
    transform: translateY(0);
    filter: brightness(.98);
}

/* Focus accessibile (keyboard) */
.fr-btn:focus-visible{
    outline: 3px solid rgba(13,110,253,.35);
    outline-offset: 3px;
}

.fr-btn-with-anchor {
    line-height: 36px;
}
/*.fr-btn-with-anchor::before {
    content: url("./assets/img/anchor-right-light.svg");
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #0a4a7a;
    font-size: 32px;
    display: inline-block;
    margin-right: 10px;
}*/
.inside-article a.fr-btn--darkstrip,
.fr-btn--darkstrip{
color: var(--fr-quarterly);
}
#page{ }
/* ========== MAIN-NAVIGATION ========== */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    text-decoration: underline;
}
/* ========== TOP-BAR ========== */

.top-bar {
    background-color: transparent;
}
.top-bar #menu-menu-top li a {
    text-decoration: none;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-transform: uppercase;
}

.top-bar #menu-menu-top li.current-menu-item a{
    color: #d2edff;
    text-decoration: underline;
}

.top-bar #menu-menu-top li a::before {
    content: url("./assets/img/anchor-right.svg");
    height: 24px;
    width: 24px;
    line-height: 24px;
    display: inline-block;
    background-color: #8cd2ff;
    padding: 0 6px;
    border-radius: 24px;
    margin-right: 8px;
}
.top-bar #menu-menu-top li:hover a::before,
.top-bar #menu-menu-top li.current-menu-item a::before {
    background-color: #d2edff;
}
.top-bar #menu-menu-top li a:hover{
    color: #d2edff;
}

/* ========== WOO BUTTONS -> FR BUTTON SYSTEM ========== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce input#submit,
.woocommerce a.add_to_cart_button{
    border-radius: var(--fr-btn-radius);
    padding: var(--fr-btn-pad-y) var(--fr-btn-pad-x);
    font-weight: var(--fr-btn-font);
    color: var(--fr-primary-contrast) !important;
}

/* Primary look per CTA principali */
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order{
    background: var(--fr-primary);
    color: var(--fr-primary-contrast);
    border: 1px solid transparent;
}


/* Focus accessibile */
.fr-btn:focus-visible{
    outline: 3px solid rgba(13,110,253,.35);
    outline-offset: 3px;
}

.fr-container{
    max-width:1200px;
    margin:0 auto;
    padding:20px 40px;
}


li.ancor-right a::before {
    content: url("./assets/img/anchor-right.svg");
    height: 28px;
    width: 28px;
    line-height: 28px;
    display: inline-block;
    background-color: #8cd2ff;
    padding: 2px 6px;
    border-radius: 28px;
    margin-right: 8px;
}
li.ancor-right:hover a::before{
    background-color: #d2edff;
}

.footer-widget-1 img{ width: 200px; height: auto}
.footer-widget-2 {
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: right;
}
.footer-widget-2 li{ display: inline-block; padding: 10px 0 0 15px}
.footer-widget-2 li a{ text-decoration: none}

body._home header{ position: absolute}

/* =========================
   Parallax semplice (no JS)
   ========================= */

.ib-parallax {
    /* Imposta l’immagine da HTML o con una classe dedicata (vedi sotto) */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    /* Il “trucco” del parallax (desktop) */
    background-attachment: fixed;

    /* Spazio verticale della sezione */
    min-height: auto;

    /* Per contenuti sovrapposti */
    position: relative;
    display: flex;
    align-items: center;
}

/* Overlay opzionale per migliorare il contrasto testo */
.ib-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35); /* regola opacità a piacere */
    pointer-events: none;
}

.ib-parallax > * {
    position: relative; /* sopra l’overlay */
}

/* Form Styles */
.lead-form {}
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.role-selector {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}
.role-option {
    flex: 1;
    text-align: center;
    border: 2px solid #ddd;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
}
.role-option input { display: none; }
.role-option.selected {
    border-color: var(--color-primary);
    background-color: #eef4ff;
    color: var(--color-primary);
}

.page-template-page-generic .entry-title {
    text-align: center;
    margin-top: var(--ib-space-7);
}

/*.site-footer{
    margin-top: var(--ib-space-7);
}*/

/* ========== 2FA AUTH ========== */
.ib-auth__container{max-width:920px;margin:0 auto;padding:24px}
.ib-grid--2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:860px){.ib-grid--2col{grid-template-columns:1fr}}
.ib-card{border:1px solid rgba(0,0,0,.12);border-radius:16px;background:#fff}
.ib-card--pad{padding:18px}
.ib-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:rgba(0,0,0,.04);padding:10px 12px;border-radius:12px;word-break:break-all}
.ib-code--small{font-size:12px}
.ib-form{display:grid;gap:12px}
.ib-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.18)}
.ib-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;border:0;cursor:pointer}
.ib-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
@media(max-width:600px){.ib-codes{grid-template-columns:1fr}}
.ib-codes__item{border:1px dashed rgba(0,0,0,.25);border-radius:14px;padding:12px;text-align:center;font-weight:700;letter-spacing:1px}
.ib-auth__alert--error{color:#b00020}
.ib-muted{opacity:.72;font-size:14px}
.ib-qr__img{max-width:260px;width:100%;height:auto;border-radius:14px;border:1px solid rgba(0,0,0,.08);padding:10px;background:#fff}


/* Fallback mobile (iOS/Android): disattiva fixed per evitare glitch */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
    .ib-parallax {
        background-attachment: scroll;
    }
    .site-header .header-image {
        width: 240px;
    }
}
.ol-howworks{
    list-style: none;
    padding: 0;
    margin: 3rem 0;

}
.ol-howworks li+li{

}
.ol-howworks li {
    display: grid;
    grid-template-columns: 42px auto;
    column-gap: 30px;
    justify-items: start;
    align-items: center;
    font-size: 20px;
    margin-bottom: 2.5rem;
}
.ol-howworks  li::before {
    counter-increment: list-item;
    content: counter(list-item);
    background-color: #d2edff;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    text-align: center;
    line-height: 56px;
    color: #0a4a7a;
    font-size: 32px;

}
     /*
      * inBanchina — pagina "Come funziona"
      * Stile scoped: non forza font-family, eredita la tipografia del tema.
      * Palette ricavata dal logo positivo InBanchina: blu #084878.
      */

 .ib-how-page {
     --ib-blue: #084878;
     --ib-blue-dark: #063a60;
     --ib-blue-soft: #eef6fb;
     --ib-border: rgba(8, 72, 120, .16);
     --ib-text-soft: rgba(18, 32, 44, .72);
     --ib-radius: 22px;
     --ib-space-xl: clamp(3.25rem, 6vw, 6rem);
     --ib-space-lg: clamp(2.25rem, 4vw, 4rem);
     --ib-space-md: clamp(1.25rem, 2.4vw, 2rem);
     font-family: inherit;
 }

.ib-how-page > * {
    box-sizing: border-box;
}

.ib-how-page .ib-how-hero,
.ib-how-page .ib-how-section,
.ib-how-page .ib-how-final {
    /*padding-top: var(--ib-space-xl);
    padding-bottom: var(--ib-space-xl);*/
}

.ib-how-page .ib-how-hero {
    position: relative;
    overflow: hidden;
    padding: 0
}

.ib-how-page .ib-how-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /*background:
            radial-gradient(circle at 12% 20%, rgba(8,72,120,.10), transparent 34%),
            linear-gradient(180deg, rgba(8,72,120,.05), rgba(255,255,255,0));*/
}

.ib-how-page .ib-how-hero > * {
    position: relative;
}

.ib-how-page .ib-how-eyebrow {
    margin-bottom: .75rem;
    color: var(--ib-blue);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ib-how-page .ib-how-lead {
    max-width: 760px;
    color: var(--ib-text-soft);
    font-size: clamp(1.12rem, 1.6vw, 1.35rem);
    line-height: 1.65;
}

.ib-how-page .ib-how-paths {
    margin-top: var(--ib-space-md);
    gap: 1rem;
}

.ib-how-page .ib-how-path {
    border: 1px solid var(--ib-border);
    border-radius: var(--ib-radius);
    padding: clamp(1.25rem, 2.2vw, 1.8rem);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(4px);
}

.ib-how-page .ib-how-path h3 {
    margin-top: 0;
}

.ib-how-page .ib-how-path p {
    color: var(--ib-text-soft);
}

.ib-how-page .ib-how-section {
    border-bottom: 1px solid var(--ib-border);
}

.ib-how-page .ib-how-section--muted {
    /*background: linear-gradient(180deg, rgba(8,72,120,.035), rgba(8,72,120,.015));*/
}

.ib-how-page .ib-how-section-title {
    max-width: 860px;
}

.ib-how-page .ib-how-section-title p {
    color: var(--ib-text-soft);
    font-size: 1.06rem;
    line-height: 1.7;
}

.ib-how-page .ib-how-steps {
    margin-top: var(--ib-space-md);
    gap: 1.25rem;
}

.ib-how-page .ib-how-step {
    height: 100%;
    border-left: 3px solid var(--ib-blue);
    border-radius: 0 var(--ib-radius) var(--ib-radius) 0;
    padding: 1.25rem 1.25rem 1.35rem;
    background: #fff;
    box-shadow: 0 16px 40px rgba(8,72,120,.07);
}

.ib-how-page .ib-how-step .ib-how-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.3rem;
    height: 2.3rem;
    margin-bottom: .85rem;
    border-radius: 999px;
    background: var(--ib-blue);
    color: var(--fr-primary-contrast);
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
}

.ib-how-page .ib-how-step h3 {
    margin-top: 0;
    margin-bottom: .4rem;
    font-size: clamp(1.1rem, 1.6vw, 1.28rem);
}

.ib-how-page .ib-how-step p {
    margin-bottom: 0;
    color: var(--ib-text-soft);
    line-height: 1.6;
}

.ib-how-page .ib-how-faq {
    margin-top: var(--ib-space-lg);
}

.ib-how-page .ib-how-faq-title {
    margin-bottom: 1rem;
}

.ib-how-page details.ib-how-faq-item {
    border-top: 1px solid var(--ib-border);
    padding: 1rem 0;
}

.ib-how-page details.ib-how-faq-item:last-child {
    border-bottom: 1px solid var(--ib-border);
}

.ib-how-page details.ib-how-faq-item summary {
    cursor: pointer;
    color: var(--ib-blue-dark);
    font-weight: 700;
    line-height: 1.45;

}

.ib-how-page details.ib-how-faq-item p {
    color: var(--ib-text-soft);
    padding-left:14px;
    margin-top: 15px
}

.ib-how-page .ib-how-cta {
    margin-top: var(--ib-space-md);
    border-radius: var(--ib-radius);
    padding: clamp(1.35rem, 2.5vw, 2rem);
    background: var(--ib-blue-soft);
    border: 1px solid var(--ib-border);
}

.ib-how-page .ib-how-cta h3 {
    margin-top: 0;
    color: var(--ib-blue-dark);
}

.ib-how-page .wp-block-button__link {
    border-radius: 999px;
    padding: .86rem 1.35rem;
    font-weight: 700;
}

.ib-how-page .wp-block-button .wp-block-button__link {
    background: var(--ib-blue);
    color: #fff;
}

.ib-how-page .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--ib-blue);
    color: var(--ib-blue);
    background: transparent;
}

.ib-how-page .ib-how-final {
    text-align: center;
}

.ib-how-page .ib-how-final p {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    color: var(--ib-text-soft);
}

@media (max-width: 781px) {
    .ib-how-page .ib-how-hero,
    .ib-how-page .ib-how-section,
    .ib-how-page .ib-how-final {
        
    }

    .ib-how-page .ib-how-step {
        border-left-width: 4px;
    }

    .ib-how-page .ib-how-final {
        text-align: left;
    }
}