/* ========= @font-face (14 font) ========= */
@font-face {
    font-family: 'Font4';
    src: url('../fonts/Font 4.ttf') format('truetype');
}
@font-face {
    font-family: 'Font8';
    src: url('../fonts/Font 8.ttf') format('truetype');
}
@font-face {
    font-family: 'Font12';
    src: url('../fonts/Font 12.ttf') format('truetype');
}
@font-face {
    font-family: 'Font16';
    src: url('../fonts/Font 16.ttf') format('truetype');
}
@font-face {
    font-family: 'Font20';
    src: url('../fonts/Font 20.ttf') format('truetype');
}
@font-face {
    font-family: 'Font24';
    src: url('../fonts/Font 24.ttf') format('truetype');
}
@font-face {
    font-family: 'Font28';
    src: url('../fonts/Font 28.ttf') format('truetype');
}
@font-face {
    font-family: 'Font32';
    src: url('../fonts/Font 32.ttf') format('truetype');
}
@font-face {
    font-family: 'Font36';
    src: url('../fonts/Font 36.ttf') format('truetype');
}
@font-face {
    font-family: 'Font40';
    src: url('../fonts/Font 40.ttf') format('truetype');
}
@font-face {
    font-family: 'Font44';
    src: url('../fonts/Font 44.ttf') format('truetype');
}
@font-face {
    font-family: 'Font48';
    src: url('../fonts/Font 48.ttf') format('truetype');
}
@font-face {
    font-family: 'Font52';
    src: url('../fonts/Font 52.otf') format('opentype');
}
@font-face {
    font-family: 'Font56';
    src: url('../fonts/Font 56.ttf') format('truetype');
}


/* ========= BASE ========= */
body {
    font-family: 'Font40', sans-serif;
    background-color: #ffffff;
    padding: 0;
    margin: 0;
}

/* ========= HEADER A DUE COLONNE ========= */
.sticky-header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    padding: 20px 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;

    max-width: 1000px;
    margin: 0 auto;
}

.header-logo {
    flex: 0 0 auto;
}
.logo {
    max-height: 60px;
    display: block;
}

.lang-right select {
  margin-top: 12px;
  padding: 6px;
  font-size: 1rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}


.header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.header-content h1 {
    margin: 0;
    font-size: 1.8rem;
    text-align: left;
    color: #AA829F;
}
.header-content label {
    margin-top: 10px;
    font-size: 1rem;
    text-align: left;
}
.header-content input {
    margin-top: 5px;
    font-size: 1.1rem;
    height: 60px;
    padding: 12px 16px;
    background-color: #D8BFD2;
    border: none;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

/* ========= TABELLA ========= */
.table-container {
    padding: 0 20px;
    display: flex;
    justify-content: center;
}
table {
    width: 100%;
    max-width: 1000px;
    border-collapse: collapse;
    margin-top: 30px;
    table-layout: fixed;
}
th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
    vertical-align: middle;
    font-family: 'Font40', sans-serif;
}

th {
    background-color: #f9f9f9;
}

th.font-number-col,
td:first-child {
    width: 120px;
    word-wrap: break-word;
    white-space: normal;
}

.font-preview {
    font-size: 1.8rem;
    word-wrap: break-word;
    font-family: inherit;
}

/* ========= FONT LABEL STYLE ========= */
.font-label {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.font-circle {
    display: inline-block;
    background-color: #b289a3;
    color: #ffffff;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-size: 1rem;
}

/* ========= MOBILE / TABLET ========= */
@media screen and (max-width: 768px) {
    .sticky-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 16px;
    }

    .header-content h1,
    .header-content label {
        text-align: center;
    }

    .table-container {
        padding: 0 10px;
        overflow-x: auto;
    }

    table {
        max-width: 650px;
    }

    th, td {
        padding: 8px;
        font-size: 0.9rem;
    }

    th.font-number-col,
    td:first-child {
        width: 110px;
    }

    .font-preview {
        font-size: 1.3rem;
    }
}

.contact-box {
  background-color: #AA829F;
  color: white;
  font-family: 'Font40', sans-serif;
  display: flex;
  align-items: center;
  padding: 20px 30px;
  border-radius: 4px;
  max-width: 1000px;
  margin: 40px auto 60px;
  box-sizing: border-box;
}
.contact-icon {
  flex-shrink: 0;
  margin-right: 20px;
}
.contact-text {
  font-size: 1.1rem;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .contact-box {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .contact-icon {
    margin: 0 0 15px 0;
  }
}


/* ========= SCALING PER FONT ========= */
.font-preview[data-font="Font4"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font8"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font12"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font16"] { transform: scale(0.9); transform-origin: left center; }
.font-preview[data-font="Font20"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font24"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font28"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font32"] { transform: scale(1.8); transform-origin: left center; }
.font-preview[data-font="Font36"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font40"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font44"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font48"] { transform: scale(1.5); transform-origin: left center; }
.font-preview[data-font="Font52"] { transform: scale(1); transform-origin: left center; }
.font-preview[data-font="Font56"] { transform: scale(1); transform-origin: left center; }


/* Esagono con clip-path */
  -webkit-clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
          clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: #b184a2; /* tono mauve */
  color: #ffffff;
  font-weight: 900;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0px;
  text-transform: uppercase;
  position: relative;
  padding: 0;
  box-shadow: inset 0 0 0 8px #ffffff; /* bordo interno bianco */
}
@media (max-width: 640px){
  .hex-badge{
    --hex-size: 44px;
    font-size: 20px;
    box-shadow: inset 0 0 0 6px #ffffff;
  }
}
/* Centra meglio il testo su Safari/Firefox */
.hex-badge::before{ content: ""; }


/* ===== Hex badge with image background ===== */
.hex-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  background-image:url('../img/exagon.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  color:#a8809d;
  font-weight:900;
  font-size:20px;
  line-height:1;
  letter-spacing:0px;
  text-transform:uppercase;
  user-select:text;
}
@media (max-width: 640px){
  .hex-badge{ font-size:20px; }
}
/* Se serve una versione compatta in alcune tabelle */
.hex-badge.sm{
  width:51px;
  height:51px;
  font-size:20px;
}


/* === Font Code column header and cells === */
th#col-font {
  color: #a8809d;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  border-right: none;
  text-align: center;
}
td.font-code-cell {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  border-right: none;
  text-align: center;
}