/* font-preview.css */

body 
{ font-family: Helvetica, sans-serif;
  margin: 0;
  padding: 30px;
  background: #fff;
}

label 
{ display: 
  block; 
  margin-bottom: 5px; 
}

select, button 
{ padding: 0 15px; 
  border-radius: 25px; 
  border: 1px solid #ccc; 
  font-size: 16px; 
  height: 42px; 
  display: flex; 
  align-items: center; 
  cursor: pointer;
}

select:focus, 
button:focus 
{ border-color: #666; }

.controls 
{ display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  margin-bottom: 20px; 
  gap: 20px;}


.slider-block {
  display: flex;
  flex-direction: column; /* label sopra, cursore sotto */
  align-items: flex-start; /* label allineata a sinistra */
  margin-bottom: 20px;     /* spazio tra i blocchi */
}

.slider-block label {
  margin-bottom: 10px;      /* spazio tra label e cursore */
  font-size: 14px;
  font-weight: 600;
}

.preview-container {
  margin: 0;
  padding: 0;
}

.preview-text {
  display: block;
  border: 1px solid #ccc;
  border-radius: 25px;
  padding: 15px;
  font-family: 'HrmtV';
  font-size: 32px;
  background: #fff;
  line-height: 1.2;        /* riduce spazio extra sotto il font */
  box-sizing: border-box; /* include padding e border nell’altezza */
}

.scaled-wrap {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}


/* Slider minimal */
.slider-min 
{ -webkit-appearance:none; 
  appearance:none; 
  width:200px; 
  background:transparent; 
  height:16px; 
  outline:none;}

.slider-min::-webkit-slider-runnable-track 
{ height:2px; 
  background:#000; 
  border:none; }

.slider-min::-webkit-slider-thumb 
{ -webkit-appearance:none; 
  width:16px;
  height:16px;
  border-radius:50%;
  background:#000;
  margin-top:-7px; }

.slider-min::-moz-range-track 
{ height:2px; 
  background:#000; 
  border:none; }

.slider-min::-moz-range-thumb 
{ width:16px;
  height:16px;
  border-radius:50%;
  background:#000; }

.slider-min::-moz-focus-outer 
  { border: 0; }


:root {
  --font-size: 32px; /* default desktop */
  --padding: 15px;
}

.scaled-wrap {
  width: 100%;
}

.preview-text {
  display: block;
  border: 1px solid #ccc;
  border-radius: 25px;
  padding: var(--padding);
  font-family: 'HrmtV';
  font-size: var(--font-size);
  background: #fff;
}

/* sotto 1080px: scala contenuto senza creare spazio extra */
@media screen and (max-width: 1080px) {
  :root {
    --font-size: 60%;  /* riduce dimensione font */
    --padding: 60%;    /* riduce padding */
  }
}