/* =====================================================================
   elm-ricerca.css  (13/10/2026)
   RICERCA INTERNA del portale: lente nella barra alta (desktop), pannello
   di ricerca (<dialog>) e pagina risultati /{lng}/cerca|search|suche|recherche.
   La lente dell'header MOBILE NON sta qui: l'header mobile e' isolato in
   elm-mobile-nav.css (sezione 9, unica aggiunta autorizzata da Andrea).

   Classi .ric-* e .ricerca-page (niente .elm-*: isolamento header mobile).
   Colori: SOLO token di guidelines.css o colori gia' usati dalle sezioni
   del sito (fonte scritta accanto). Testi mai sotto i 12px. Campi a 16px+
   (iOS non zooma). NB: mai la sequenza slash-asterisco dentro un commento.
   ===================================================================== */

[hidden].ric-tutti,
.ric-dialog [hidden],
.ricerca-page [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   1) LENTE NELLA BARRA ALTA (desktop, >= 992px; sotto la barra e' nascosta
      dal tema/elm-mobile-nav). Testo bianco come il resto della barra, che
      sta sempre sopra l'hero scuro. Il selettore lungo + !important serve a
      battere ".hotale-top-bar-right-social a { color:#808080 !important }"
      scritto nella MasterPage.
   --------------------------------------------------------------------- */
.ric-barra-destra {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}
.hotale-top-bar-right-social a.ric-apri-barra {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 15px 0 13px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: var(--r-pill);
    color: #fff !important;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: background-color .2s ease, border-color .2s ease;
}
.hotale-top-bar-right-social a.ric-apri-barra i { font-size: 14px; line-height: 1; }
.hotale-top-bar-right-social a.ric-apri-barra:hover,
.hotale-top-bar-right-social a.ric-apri-barra:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .7);
    color: #fff !important;
}
.hotale-top-bar-right-social a.ric-apri-barra:focus-visible {
    outline: 2px solid var(--gold-lt);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   2) PANNELLO (<dialog> modale: sta nel top layer, sopra anche il logo
      mobile fisso a z-index 99999; Esc e trappola del focus sono del browser)
      Il <dialog> copre tutto lo schermo ed e' trasparente: un clic fuori
      dal riquadro arriva al dialog stesso e lo chiude (elm-ricerca.js).
   --------------------------------------------------------------------- */
html.ric-aperta body { overflow: hidden; }   /* solo body: vedi log 12/10 (b), con html il #cnav sticky salta */

.ric-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    overflow: hidden;
}
.ric-dialog[open] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.ric-dialog::backdrop {
    background: rgba(24, 20, 15, .56);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.ric-dialog ::selection { background: var(--gold-lt); color: var(--ink); }

.ric-box {
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100% - 32px));
    max-height: calc(100% - 13vh - 24px);
    margin-top: 13vh;
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: 0 28px 70px rgba(24, 20, 15, .30), 0 3px 10px rgba(24, 20, 15, .12);
    overflow: hidden;
}

/* Un solo movimento: il riquadro entra dall'alto mentre il velo si scurisce */
.ric-dialog[open] .ric-box { animation: ricEntra .22s cubic-bezier(.16, 1, .3, 1); }
.ric-dialog[open]::backdrop { animation: ricVelo .22s ease-out; }
@keyframes ricEntra { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes ricVelo { from { opacity: 0; } }

/* Campo */
.ric-campo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 8px 0 20px;
    min-height: 66px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.ric-campo-ic { color: var(--gold-dk); font-size: 20px; line-height: 1; flex: 0 0 auto; }
.ric-campo input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 64px;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.1875rem;          /* 19px */
    font-weight: 400;
    caret-color: var(--cta-red);
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}
/* Il focus lo segnala la riga intera (:focus-within sotto): niente contorno arancio globale sul campo */
.ric-campo input[type="search"]:focus,
.ric-campo input[type="search"]:focus-visible { outline: none !important; border: 0; box-shadow: none; }
.ric-campo input[type="search"]::placeholder { color: var(--ink-lt); opacity: 1; }
.ric-campo input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Focus del campo: filetto oro sotto tutta la riga (il campo e' l'unico controllo all'apertura) */
.ric-dialog .ric-campo:focus-within { box-shadow: inset 0 -2px 0 var(--gold); }

.ric-chiudi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-lt);
    font-size: 18px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ric-chiudi:hover { background: var(--sand); color: var(--ink); }
.ric-chiudi:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Caricamento: filo oro che scorre sotto il campo (solo se la risposta tarda) */
.ric-campo.is-carico::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 30%;
    background: var(--gold);
    animation: ricCarico 1s ease-in-out infinite;
}
@keyframes ricCarico { from { left: -30%; } to { left: 100%; } }

/* Corpo scorrevole */
.ric-corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sand-dk) transparent;
}
.ric-corpo::-webkit-scrollbar { width: 8px; }
.ric-corpo::-webkit-scrollbar-thumb { background: var(--sand-dk); border-radius: 8px; }

.ric-msg { margin: 0; padding: 22px 22px 24px; color: var(--ink-md); font-size: .9375rem; line-height: 1.55; }

/* Stato vuoto: invito + esempi */
.ric-vuoto { padding: 20px 22px 24px; }
.ric-vuoto-t { margin: 0 0 14px; color: var(--ink-md); font-size: .9375rem; line-height: 1.55; }
.ric-esempi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ric-esempi-l { margin-right: 4px; color: var(--ink-lt); font-size: .8125rem; }
.ric-esempio {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--ink-md);
    font-family: var(--font-body);
    font-size: .875rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ric-esempio:hover { border-color: var(--gold); color: var(--ink); background: var(--ivory); }
.ric-esempio:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Lista risultati del pannello */
.ric-lista { list-style: none; margin: 0; padding: 8px; }
.ric-opz { margin: 0; }
.ric-voce {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
}
.ric-voce:hover,
.ric-opz.is-attiva .ric-voce { background: var(--sand); color: var(--ink); }
.ric-opz.is-attiva .ric-voce { box-shadow: inset 0 0 0 1px var(--sand-dk); }

/* Tessera: miniatura o icona su velo del colore della sezione */
.ric-ic,
.ric-img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--r-badge);
    overflow: hidden;
}
.ric-ic {
    --ric-c: var(--gold-dk);
    --ric-bg: rgba(201, 169, 107, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ric-bg);
    color: var(--ric-c);
    font-size: 20px;
    line-height: 1;
}
.ric-img { background: var(--sand); }
.ric-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Toni: Dormire e Mangiare = token di guidelines.css */
.ric-ic[data-o="hotel"] { --ric-c: var(--hotel); --ric-bg: var(--hotel-mid); }
.ric-ic[data-o="camp"]  { --ric-c: var(--camp);  --ric-bg: var(--camp-mid); }
.ric-ic[data-o="apt"]   { --ric-c: var(--apt);   --ric-bg: var(--apt-mid); }
.ric-ic[data-o="res"]   { --ric-c: var(--res);   --ric-bg: var(--res-mid); }
.ric-ic[data-o="age"]   { --ric-c: var(--age);   --ric-bg: var(--age-mid); }
.ric-ic[data-o="agri"]  { --ric-c: var(--agri);  --ric-bg: var(--agri-mid); }
.ric-ic[data-o="rist"]  { --ric-c: var(--rist);  --ric-bg: var(--rist-mid); }
.ric-ic[data-o="azi"]   { --ric-c: var(--azi);   --ric-bg: var(--azi-mid); }
.ric-ic[data-o="ric"]   { --ric-c: var(--ric);   --ric-bg: var(--ric-mid); }
.ric-ic[data-o="vini"]  { --ric-c: var(--vini);  --ric-bg: var(--vini-mid); }
.ric-ic[data-o="erb"]   { --ric-c: var(--erb);   --ric-bg: var(--erb-mid); }
/* Altre sezioni: colori delle loro pagine (non hanno ancora token globali) */
.ric-ic[data-o="mare"]     { --ric-c: #0e6b8a; --ric-bg: rgba(14, 107, 138, .12); }  /* Spiagge-Isola-Elba --c-sea */
.ric-ic[data-o="luogo"]    { --ric-c: #8a5e1a; --ric-bg: rgba(184, 134, 47, .15); }  /* Luoghi --c-lu-dk su --c-lu */
.ric-ic[data-o="comune"]   { --ric-c: #0e7a6e; --ric-bg: rgba(14, 122, 110, .12); }  /* Scopri --sc-teal */
.ric-ic[data-o="cosafare"] { --ric-c: #c04f00; --ric-bg: rgba(224, 90, 0, .12); }    /* Cosa Fare --sp-or-dk su --sp-or */
.ric-ic[data-o="news"]     { --ric-c: #2d6b96; --ric-bg: rgba(45, 107, 150, .12); }  /* Organizza --inf */
.ric-ic[data-o="evento"]   { --ric-c: #a8324a; --ric-bg: rgba(168, 50, 74, .12); }   /* Eventi --tc */
.ric-ic[data-o="oro"]      { --ric-c: var(--gold-dk); --ric-bg: rgba(201, 169, 107, .18); }

.ric-testo { flex: 1 1 auto; min-width: 0; }
.ric-t {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.ric-t mark {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    box-shadow: inset 0 -.36em 0 rgba(201, 169, 107, .38);
}
.ric-m {
    display: block;
    margin-top: 3px;
    font-size: .8125rem;          /* 13px */
    line-height: 1.35;
    color: var(--ink-lt);
}
.ric-freccia {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--ink-xs);
    font-size: 16px;
    transition: transform .15s ease, color .15s ease;
}
.ric-voce:hover .ric-freccia,
.ric-opz.is-attiva .ric-freccia { color: var(--gold-dk); transform: translateX(2px); }

/* Piede: tutti i risultati */
.ric-tutti {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 0 22px;
    border-top: 1px solid var(--line);
    background: var(--ivory);
    color: var(--ink);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}
.ric-tutti:hover { color: var(--gold-dk); background: var(--warm); }
.ric-tutti:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ric-tutti i { font-size: 16px; }

/* Telefono: pannello a tutto schermo */
@media (max-width: 767.98px) {
    .ric-box {
        width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .ric-campo { min-height: 60px; padding-left: 16px; padding-top: env(safe-area-inset-top, 0); }
    .ric-campo input[type="search"] { height: 58px; font-size: 1.0625rem; }   /* 17px */
    .ric-lista { padding: 6px; }
    .ric-voce { padding: 10px; }
    .ric-tutti { padding-bottom: env(safe-area-inset-bottom, 0); }
    .ric-dialog[open] .ric-box { animation-name: ricVelo; }
}

/* ---------------------------------------------------------------------
   3) PAGINA RISULTATI (App_Page/Ricerca/Ricerca.aspx)
   Hero = #page-hero standard ma basso (la pagina serve a leggere i
   risultati, non a introdurli) e nella tinta neutra di Chi siamo: la
   ricerca non appartiene a nessuna sezione.
   --------------------------------------------------------------------- */
#page-hero.hero-ricerca .ph-bg { background: linear-gradient(155deg, #12100c 0%, #2b241a 48%, #54432a 100%); }
#page-hero.hero-ricerca .ph-h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 1.3rem; text-wrap: balance; overflow-wrap: anywhere; }
#page-hero.hero-ricerca .ph-h1 em { color: var(--gold); }
#page-hero.hero-ricerca .breadcrumb-nav a:hover { color: var(--gold); }
@media (min-width: 992px) {
    #page-hero.hero-ricerca { min-height: 0; padding-top: 200px; }
    #page-hero.hero-ricerca .ph-inner { padding-bottom: 2.8rem; }
}

.ric-form--pagina { max-width: 760px; }
.ric-form--pagina .ric-campo {
    min-height: 62px;
    padding: 0 7px 0 18px;
    border: 0;
    border-radius: var(--r-btn);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}
.ric-form--pagina .ric-campo:focus-within { box-shadow: 0 14px 34px rgba(0, 0, 0, .28), 0 0 0 3px var(--gold); }
.ric-form--pagina .ric-campo input[type="search"] { height: 60px; font-size: 1.125rem; }
.ric-form--pagina .ric-invia { flex: 0 0 auto; min-height: 48px; padding: 0 22px; }

/* #main-content (destinazione dello skip-link) ha regole globali da pagina listing
   (griglia 260px + contenuto, max 1400): qui serve una colonna semplice. */
.ricerca-page #main-content.ric-main {
    display: block;
    max-width: none;
    margin: 0;
    padding: 40px 0 88px;
    grid-template-columns: none;
    gap: 0;
    background: #fff;
}
/* Stessa colonna dell'hero (.ph-inner: 1400px, padding 2rem): risultati allineati
   a sinistra sotto titolo e campo, larghezza di lettura 880px. */
.ricerca-page .ric-wrap { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.ricerca-page .ric-wrap > * { max-width: 880px; }

.ric-conteggio { margin: 0 0 16px; color: var(--ink-md); font-size: .9375rem; }
.ric-conteggio strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.ric-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line);
}
.ric-filtro {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: #fff;
    color: var(--ink-md);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ric-filtro:hover { border-color: var(--gold); color: var(--ink); }
.ric-filtro:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ric-filtro-n { color: var(--ink-lt); font-size: .75rem; font-variant-numeric: tabular-nums; }
.ric-filtro.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ric-filtro.is-on .ric-filtro-n { color: rgba(255, 255, 255, .78); }

.ric-lista--pagina { padding: 0; }
.ric-lista--pagina .ric-riga { margin: 0; }
.ric-lista--pagina .ric-riga + .ric-riga { border-top: 1px solid var(--line); }
.ric-lista--pagina .ric-voce { align-items: flex-start; gap: 18px; padding: 18px 10px; border-radius: 0; }
.ric-lista--pagina .ric-voce:hover { background: var(--ivory); }
.ric-lista--pagina .ric-voce:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ric-lista--pagina .ric-ic,
.ric-lista--pagina .ric-img { width: 64px; height: 64px; border-radius: 10px; }
.ric-lista--pagina .ric-ic { font-size: 26px; }
.ric-lista--pagina .ric-t { font-size: 1.1875rem; line-height: 1.3; }
.ric-lista--pagina .ric-m { margin-top: 4px; font-size: .8125rem; }
.ric-e {
    display: block;
    max-width: 68ch;
    margin-top: 7px;
    color: var(--ink-md);
    font-size: .9375rem;
    line-height: 1.55;
}
.ric-lista--pagina .ric-freccia { align-self: center; }

.ric-limite { margin: 18px 0 0; color: var(--ink-lt); font-size: .8125rem; }

.ricerca-page .ric-altri {
    display: inline-flex;
    margin: 28px 0 0;
    background: #fff;
    color: var(--ink);
    border-color: var(--ink);
}
.ricerca-page .ric-altri:hover,
.ricerca-page .ric-altri:focus-visible { background: var(--ink); color: #fff; }

/* Nessun risultato / nessuna ricerca */
.ric-h2 {
    margin: 0 0 .6rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.ric-testo-p { margin: 0 0 1.4rem; max-width: 62ch; color: var(--ink-md); font-size: 1rem; line-height: 1.65; }
.ric-sezioni { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ric-sezioni li { border-bottom: 1px solid var(--line); }
.ric-sez {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}
.ric-sez:hover { background: var(--ivory); color: var(--ink); }
.ric-sez:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ricerca-page .ric-intro .ric-esempi { margin-top: 4px; }

@media (max-width: 767.98px) {
    .ricerca-page #main-content.ric-main { padding: 28px 0 72px; }
    .ricerca-page .ric-wrap { padding: 0 1rem; }
    .ric-form--pagina .ric-campo { min-height: 56px; padding: 0 5px 0 14px; }
    .ric-form--pagina .ric-campo input[type="search"] { height: 54px; font-size: 1.0625rem; }
    .ric-form--pagina .ric-invia { min-height: 44px; padding: 0 14px; }
    .ric-lista--pagina .ric-voce { gap: 14px; padding: 16px 4px; }
    .ric-lista--pagina .ric-ic,
    .ric-lista--pagina .ric-img { width: 52px; height: 52px; }
    .ric-lista--pagina .ric-ic { font-size: 22px; }
    .ric-lista--pagina .ric-t { font-size: 1.0625rem; }
    .ric-lista--pagina .ric-freccia { display: none; }
    .ric-e { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ric-dialog[open] .ric-box,
    .ric-dialog[open]::backdrop { animation: none; }
    .ric-campo.is-carico::after { animation: none; left: 0; width: 100%; opacity: .5; }
    .ric-freccia { transition: none; }
}