/* ===================== RESET & BASE ===================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f0eeee;
    color: #333;
    line-height: 1.5;
}
a { color: #0000EE; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===================== HEADER ===================== */
.site-header {
    border-bottom: 1px solid #bbb;
}
.nav-bar {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0;
    gap: 25px;
}
.nav-bar a {
    color: #2c5282;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 10px;
}
.nav-bar a:hover { color: #555; }
.logo-wrap {
    text-align: center;
    padding: 25px 15px 10px;
    font-size: 32px;
    color: gray;
}
.logo-vocabol {
    color: #e67e22;
}
.tagline {
    text-align: center;
    color: #aaa;
    font-size: 14px;
    margin-bottom: 25px;
    padding: 0 20px;
}

/* ===================== SEARCH ===================== */
.search-bar {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background: #f0eeee;
    padding: 10px 0;
    border-bottom: 1px solid #bbb;
}
.search-bar .search-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5px;
    display: flex;
    gap: 8px;
}
.search-section input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
}
.btn {
    padding: 10px 18px;
    border: none;
    border-radius: 3px;
    background: #e67e22;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.btn:hover { background: #d35400; }
.btn-secondary { background: #e67e22; }
.btn-icon { display: inline; }
.btn-text { display: inline; }

.search-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 101;
    max-height: 400px;
    overflow-y: auto;
    padding: 0 5px;
}
.search-bar { position: relative; }
.sug-group {
    padding: 6px 12px;
    background: #f5f5f5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
}
.sug-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    color: #333;
    font-size: 15px;
}
.sug-item:hover { background: #f9f9f9; text-decoration: none; }
.sug-lang {
    display: inline-block;
    min-width: 26px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-align:center;
}
.sug-lang-first {
    background: #d4d4d4;
}
.sug-lang-sec {
    background: #9a9898;
}

/* ===================== LANGUAGE SWITCHER ===================== */
.lang-switch {
    position: absolute;
    top: 10px;
    right: 15px;
}
.lang-switch select {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #fff;
}

/* ===================== MAIN ===================== */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px 40px;
}

/* ===================== WORD PAGE ===================== */
.word-header {
    margin: 20px 0 15px;
}
.word-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.word-title {
    font-size: 22px;
    font-weight: 700;
}
.homograph {
    border-top: 1px dashed #ddd;
    padding-top: 15px;
    margin-top: 15px;
}
.word-intro {
    margin: 20px 0;
    color: #777;
    line-height: 1.6;
}
.word-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.words-list .word-icon {
    width: 20px;
    height: 20px;
}
.word-ipa {
    color: #888;
    font-size: 15px;
    font-family: Georgia, serif;
}
.word-hyphen {
    color: #888;
    font-size: 15px;
    font-family: Georgia, serif;
}

/* Audio player button */
.audio-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e67e22;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.audio-btn::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
    margin-left: 2px;
}
.audio-btn:hover { background: #d35400; }

.translations {
    margin: 10px 0 20px 32px;
    list-style: disc;
    color: #333;
}
.translations li { margin-bottom: 3px; }

.section-title {
    color: #888;
    font-size: 18px;
    font-weight: 400;
    margin: 25px 0 10px;
}

.synonyms-list {
    margin-left: 32px;
    list-style: disc;
    color: #0000EE;
}
.synonyms-list li { margin-bottom: 4px; }

/* Phrases table */
.phrases-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.phrases-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}
.phrases-table td:first-child {
    width: 30px;
    padding-left: 0;
}
.phrases-table .phrase-it {
    color: #0000EE;
    font-weight: 600;
    cursor: pointer;
}
.phrases-table .phrase-tr {
    color: #555;
    text-align: right;
}

.sinonimi-groups {
    font-size: 1.05em;
    line-height: 1.8;
}
.sinonimi-groups a.sinonimo {
    color: #2c5282;
    text-decoration: none;
    border-bottom: 1px dotted #2c5282;
}
.sinonimi-groups a.sinonimo:hover {
    border-bottom: 1px solid #2c5282;
}
.sinonimi-groups span.sinonimo-text {
    color: #718096; /* grigio: parola non nel vocabolario */
}


/* ===================== CATEGORY PAGE ===================== */
.category-header {
    margin: 20px 0;
}
.category-title {
    font-size: 20px;
    color: gray;
    margin-bottom: 5px;
}
.category-desc {
    color: #777;
    font-size: 14px;
}

.words-list {
    list-style: none;
    margin-top: 15px;
}
.words-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 10px;
}
.words-list .w-parola {
    color: #0000EE;
    font-weight: 600;
    min-width: 140px;
}
.words-list .w-ipa {
    color: #888;
    font-family: Georgia, serif;
    font-size: 14px;
    min-width: 100px;
}
.words-list .w-tr {
    color: #333;
    font-size: 14px;
}

/* ===================== HOME ===================== */
.home-search {
    text-align: center;
    margin: 40px 0;
}
.home-search .search-section {
    justify-content: center;
}
.home-categories {
    margin-top: 30px;
}
.home-categories h2 {
    font-size: 18px;
    color: #888;
    margin-bottom: 15px;
    font-weight: 400;
}
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.cat-grid a {
    display: block;
    padding: 10px 14px;
    background: #f5f5f5;
    border-radius: 4px;
    color: #0000EE;
    border: 1px solid #e0e0e0;
}
.cat-grid a:hover { background: #eee; }

/* ===================== PAGINATION ===================== */
.pagination {
    margin-top: 20px;
    text-align: center;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}
.pagination a { color: #0000EE; }
.pagination span { background: #f5f5f5; color: #888; }

/* ===================== 404 ===================== */
.not-found {
    text-align: center;
    padding: 60px 15px;
}
.not-found h1 { font-size: 48px; color: #ccc; margin-bottom: 10px; }
.not-found p { color: #888; margin-bottom: 20px; }

/* ===================== FOOTER ===================== */
.site-footer {
    text-align: center;
    padding: 20px;
    color: #aaa;
    font-size: 12px;
    border-top: 1px solid #eee;
    margin-top: 40px;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
}
.footer-links a {
    color: #888;
    font-size: 12px;
}
.footer-links a:hover { color: #555; }

.page-title {
    font-size: 24px;
    font-weight: 700;
    margin: 20px 0 15px;
    color: #333;
}
.static-content {
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}
.static-content ul {
    margin: 10px 0 20px 20px;
    list-style: disc;
}
.static-content li { margin-bottom: 4px; }

/* ===================== COOKIE BANNER ===================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
    z-index: 1000;
}
.cookie-banner-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.cookie-banner p {
    flex: 1;
    font-size: 13px;
    color: #555;
    margin: 0;
}
.cookie-banner a {
    color: #0000EE;
    text-decoration: underline;
}
.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 600px) {
    .nav-bar { gap: 12px; }
    .search-section { flex-wrap: wrap; }
    .search-bar .search-section { flex-wrap: nowrap; }
    .search-section input { width: 100%; }
    .search-bar .search-section input { width: auto; flex: 1; }
    .btn-text { display: none; }
    .words-list li { flex-wrap: wrap; }
}
/* ===================== BREADCRUMB ===================== */
/* Struttura base del container */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
}

/* Stile dei singoli elementi */
.breadcrumb-item {
  display: flex;
  align-items: center;
  color: #6c757d;
}

/* Separatore inserito tramite pseudoelemento ::after */
.breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
}

/* Stile dei link */
.breadcrumb-item a {
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* Elemento attivo (pagina corrente) */
.breadcrumb-item.active {
  color: gray;
}

/* ===================== WORD CLOUD ===================== */
.word-cloud-section {
    margin-top: 30px;
}
.word-cloud-container {
    padding: 10px 0;
}
.word-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}
.word-cloud-item {
    display: inline-block;
    text-decoration: none;
    color: #2c5282;
    transition: transform 0.3s ease, color 0.2s ease;
    will-change: transform;
}
.word-cloud-item:hover {
    text-decoration: underline;
}
/* ===================== LINKS ===================== */
.links-list {
  list-style-type: none; 
  padding: 0;      
  margin: 0;       
}
/* ================ BACK TO TOP BUTTON ================ */
#back-to-top {
  position: fixed;
  z-index: 999;
  display: none;
  text-align: center;
  background: #e67e22;
  padding: 15px;
  cursor: pointer;
  border: 0;
  color: white;
  border-radius: 5px;
  text-decoration: none;
  right: 20px;
  bottom: 80px;
}

/* ===================== SHOP / AFFILIATE PRODUCTS ===================== */
.shop-intro {
    max-width: 700px;
    color: #555;
    margin-bottom: 20px;
}
.sponsored-label {
    font-size: 1.1rem;
    font-weight: normal;
    color: #333;
    margin: 0 0 6px;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin: 10px 0 20px;
}
.product-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0;
    background: #f3f3f3;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.product-image {
    width: 100%;
    margin-bottom: 10px;
}
.product-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    display: block;
    aspect-ratio: 3/4;
}
.product-info {
    padding: 5px 10px;
}
.product-title {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 8px;
    line-height: 1.3;
    color: #1a0dab;
    display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-title:hover{
    text-decoration:underline;
}
.product-shop {
    font-size: 0.8rem;
    color: #666;
    margin-top: auto;
}
.product-card:hover,
.product-card:focus {
    text-decoration: none;
}

.affiliate-disclosure {
    font-size: 12px;
    color: #aaa;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.shop-recommendations {
    margin-top: 30px;
}
.shop-recommendations .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.shop-recommendations .product-title {
    font-size: 0.85rem;
}
.shop-recommendations .product-shop {
    font-size: 0.75rem;
}

/* ===================== CONTACT FORM ===================== */
.contact-form-wrap {
    max-width: 600px;
    margin: 30px 0;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-input,
.contact-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}
.contact-textarea {
    resize: vertical;
}
.contact-submit {
    align-self: flex-start;
    padding: 10px 24px;
    font-size: 1rem;
    color: #fff;
    background: #e67e22;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.contact-submit:hover {
    background: #d35400;
}
.contact-honeypot {
    display: none;
}
.contact-success {
    color: #2ecc71;
}
.contact-error {
    color: #e74c3c;
}
.contact-privacy {
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
}



@media (prefers-color-scheme: dark) {
  /* Invert all elements on the body while attempting to not alter the hue substantially. */
  body {
    filter: invert(100%) hue-rotate(180deg);
  }

  /* Workarounds and optical adjustments. */

  /*
     Firefox workaround: Set the background colour for the html
     element separately because, unlike other browsers, Firefox
     doesn’t apply the filter to the root element’s background.
  */
  html {
    background-color: #111;
  }

  /* Do not invert media (revert the invert). */
  img, video, iframe, svg {
    filter: invert(100%) hue-rotate(180deg);
  }

  /*
    Videos running fullscreen are no longer affected by the
    filter on the body so we need to also unset the
    revert we applied earlier so we’re left with no filter again.
   */
  video:fullscreen {
    filter: none;
  }

  /* Improve contrast on icons. */
  .icon {
    filter: invert(15%) hue-rotate(180deg);
  }

  /* Re-enable code block backgrounds. */
  pre {
    filter: invert(6%);
  }

  /* Improve contrast on list item markers. */
  li::marker {
    color: #666;
  }
}