/* 
Theme Name: Studio Dottor Ariano
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Tema custom per Studio Dottor Ariano
Author: Digiko
Author URI: https://digiko.it/
Template: hello-elementor
Version: 2.0.0
Text Domain: studiodottorariano
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

p {
    margin-block-end: 0rem;
}

strong {
	font-weight:500;
}

strong.strong--accent {
  background-color: #f3f5f8 !important;
  padding: 0.1em 0.3em !important;
  font-weight: 500 !important;
}

/* =========================================
   BASE LISTE (ul/ol)
   ========================================= */
:where(ul, ol){
  margin: 0;
  padding: 0;
  padding-block-end: 12px !important; /* spazio finale costante */
}

/* =========================================
   1) ELENCO PUNTATO SEMPLICE (.custom-list)
   ========================================= */
ul.custom-list{
  list-style: none;
  margin: 0;
  padding: 0;
  padding-block-end: 12px !important;

  /* variabili */
  --dot: 8px;
  --gap: 12px;
  --dot-color: #FF8A28;

  /* tipografia forzata */
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  line-height: 1.6em;
}
ul.custom-list *{
  font: inherit;
  line-height: inherit;
  color: inherit;
}

ul.custom-list li{ margin: 0; }

/* Caso A: LI con un figlio */
ul.custom-list li > :first-child{
  position: relative;
  padding-left: calc(var(--dot) + var(--gap));
}
ul.custom-list li > :first-child::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: var(--dot); height: var(--dot);
  background: var(--dot-color);
  border-radius: 50%;
  margin-top: calc((1lh - var(--dot)) / 2);
}

/* Caso B: LI con solo testo */
ul.custom-list li:not(:has(> *)){
  position: relative;
  padding-left: calc(var(--dot) + var(--gap));
}
ul.custom-list li:not(:has(> *))::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: var(--dot); height: var(--dot);
  background: var(--dot-color);
  border-radius: 50%;
  margin-top: calc((1lh - var(--dot)) / 2);
}

/* Fallback senza supporto 'lh' */
@supports not (margin-top: calc(1lh - 1px)){
  ul.custom-list li > :first-child::before,
  ul.custom-list li:not(:has(> *))::before{
    top: .6em; transform: translateY(-50%); margin-top: 0;
  }
}

/* =========================================
   2) ELENCO NUMERATO STANDARD (ol SEMPLICE)
   - tipografia 18/1.6 forzata su contenitore e figli
   ========================================= */
ol{
  padding-inline-start: 0;
  list-style-position: inside;  /* numero allineato al testo */
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.6em !important;
}
ol *{
  font: inherit !important;
  line-height: inherit !important;
  color: inherit;
}

ol > li{ margin: 0; }
ol > li::marker{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

@media (max-width: 600px){
  ol{ padding-inline-start: 0; }
}

/* =========================================
   3) ELENCO NUMERATO "SPECIALE" (.ol-index)
   ========================================= */
ol.ol-index{
  counter-reset: item;
  margin: 0;
  padding: 0;
  padding-block-end: 12px !important;

  /* tipografia coerente */
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.6em !important;
}
ol.ol-index > li{
  list-style: none;
  counter-increment: item;
  position: relative;
  margin: 0 0 12px 0;
  padding: 10px 12px 10px 48px;
  background: #f9f9fb;
  border-radius: 12px;
  transition: box-shadow .2s ease, background .2s ease;
}
ol.ol-index > li::before{
  content: counter(item);
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #FF8A28; color: #fff;
  font-weight: 700; font-size: 12px; line-height: 1;
}
ol.ol-index > li a{
  color: inherit; text-decoration: none; outline: none;
}
ol.ol-index > li:hover{
  background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
ol.ol-index > li a:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,138,40,.35);
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce){
  ol.ol-index > li{ transition: none; }
}
@media (max-width: 600px){
  ol.ol-index > li{ padding: 12px 48px; }
  ol.ol-index > li::before{ left: 14px; width: 24px; height: 24px; font-size: 14px; }
}