/* Core article containers */
.entry-content,
.post-content,
.gh-content,
.ghost-content, /* keep for safety on older posts */
.content-framed {
  contain: none !important;
  content-visibility: visible !important;
  overflow: visible !important;
}

/* If theme uses data-no-overflow, force it to allow ads */
.ghost-content[data-no-overflow],
.gh-content[data-no-overflow]{
  overflow: visible !important;
  contain: none !important;
  content-visibility: visible !important;
}

/* Ensure parents don't clip ad iframes */
.content-framed,
.post-main,
.max-w-content {
  overflow: visible !important;
}

/* Prevent clipping + allow full-width iframes inside article */
.gh-content,
.article-body,
.js-article-body { overflow: visible !important; }

.in-article-anchor iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.sidebar { height: auto; position: sticky; top: 5rem; }

.post-shell{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:1024px){
  .post-shell{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
  .post-aside{position:sticky;top:6rem}
}
.post-main{min-width:0}

#toc-card .toc-list ul{margin:0;padding:0}
#toc-card .toc-list li{margin:.25rem 0;line-height:1.5}
#toc-card .toc-list > ul{list-style: disc; padding-left: 1.25rem;}
#toc-card .toc-list > ul > li > ul{list-style: circle; padding-left: 1.1rem;}
#toc-card .toc-list .toc-level-3 > a{font-size:.95em; opacity:.9}
#toc-card .toc-list a{text-decoration:none;border-bottom:1px dashed transparent}
#toc-card .toc-list a:hover{border-bottom-color:currentColor}
#toc-card .toc-details>summary{list-style:none}
#toc-card .toc-details>summary::-webkit-details-marker{display:none}
#toc-card .toc-details>summary::after{content:'▾';float:right;transition:transform .2s}
#toc-card .toc-details[open]>summary::after{transform:rotate(180deg)}
@media (max-width:640px){#toc-card{padding:.75rem}}

.post-template .ads-disclaimer,
.post-template .prose .ads-disclaimer{
  font-size:.80em; line-height:1.45; font-style:italic; color:#555;
  margin:0 0 12px; padding:0 0 10px; border-bottom:1px solid #e5e5e5;
}
.post-template .ads-disclaimer a{ font-style:normal; text-decoration:underline; text-underline-offset:2px; }
html[data-color-scheme="dark"] .post-template .ads-disclaimer{ color:#bbb; border-bottom-color:#333; }

.post-template .content-framed{ border:0; padding-left:0; padding-right:0 }
@media (max-width:640px){
  .post-template .post-shell{ padding-left:0!important; padding-right:0!important }
  .post-template .post-main > .max-w-content{ max-width:none!important; width:100% }
  .post-template .gh-content.prose{ max-width:none; width:100%; padding-left:0; padding-right:0 }
  .post-template .content-framed{ border:0; padding-left:0; padding-right:0 }
}
@media (min-width:1024px){
  .post-template .content-framed{
    border-left:1px solid var(--brd,#e5e5e5);
    border-right:1px solid var(--brd,#e5e5e5);
    padding-left:12px; padding-right:12px
  }
  html[data-color-scheme="dark"] .post-template .content-framed{ border-color:#333 }
}

@media (max-width:640px){
  .post-template .ads-disclaimer{ margin-left:12px!important; margin-right:12px!important }
  .post-template #toc-card{ margin-left:12px!important; margin-right:12px!important }
}

@media (max-width:640px){
  .post-template .post-aside{ padding-left:12px; padding-right:12px }
}

@media (max-width:640px){
  .home-template [data-sidebar-subscribe]{ display:none!important }
}

@media (max-width:640px){
  .home-template h2.uppercase.font-semibold.text-sm.mb-2:has(+ [data-sidebar-subscribe]){ display:none!important }
}

[data-color-scheme="dark"] [data-logo-list] { filter: invert(1); }

p + ul {
  margin-top: 0;
}

/* ===== More news block ===== */

.news-more {
  margin: 18px 0 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.news-more__label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

.news-more__list {
  margin: 0;
  padding-left: 18px;
}

.news-more__item {
  margin: 6px 0;
  line-height: 1.35;
}

/* ===== Link styling with strong selectors ===== */

.prose .news-more__link,
.entry-content .news-more__link,
.post-content .news-more__link {
  color: inherit !important;
  text-decoration-line: underline;
  text-decoration-thickness: 0.8px !important;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  -webkit-text-fill-color: currentColor;
}

.prose .news-more__link:hover,
.entry-content .news-more__link:hover,
.post-content .news-more__link:hover {
  text-decoration-thickness: 1.4px !important;
}

/* ===== Smart related guides block ===== */

.related-guides {
  margin: 18px 0 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.related-guides__label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .7;
}

.related-guides__list {
  margin: 0;
  padding-left: 18px;
}

.related-guides__item {
  margin: 6px 0;
  line-height: 1.35;
}

/* Strong selectors so theme prose styles don't override */

.prose .related-guides__link,
.entry-content .related-guides__link,
.post-content .related-guides__link {
  color: inherit !important;
  text-decoration-line: underline;
  text-decoration-thickness: 0.8px !important;
  text-underline-offset: 2px;
  text-decoration-color: currentColor;
  -webkit-text-fill-color: currentColor;
}

.prose .related-guides__link:hover,
.entry-content .related-guides__link:hover,
.post-content .related-guides__link:hover {
  text-decoration-thickness: 1.4px !important;
}

/* Hide the dynamically generated favicon Ghost loads */
.kg-bookmark-icon {
    display: none;
}

/* Align metadata nicely */
.kg-bookmark-metadata {
    display: flex;
    align-items: center;
}

/* Insert a static icon instead of Ghost-generated ones */
.kg-bookmark-metadata::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-image: url("/assets/images/icon/ico.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.google-news-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: inherit !important;
  text-decoration: underline;
}

.google-news-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}

/* Column: one label for the whole set, then a dividing line */
.spon-col{margin:0 0 1.5rem}
.spon-heading{
  margin:0 0 .75rem;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.55;
  padding-bottom:.5rem;
  border-bottom:1px solid #e5e7eb;
}

/* Each ad is a card. The whole card is the link. */
.spon{
  display:block;
  text-decoration:none!important;
  color:inherit;
  padding:16px;
  margin:0 0 20px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  transition:box-shadow .08s ease;
}
.spon:last-child{margin-bottom:0}
.spon:hover{box-shadow:0 6px 20px rgba(0,0,0,.06)}

/* Icon and title share a line */
.spon-head{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-bottom:.4rem;
}
.spon-icon{
  width:18px;height:18px;
  margin-top:.15rem;
  flex-shrink:0;
  object-fit:contain;
  border-radius:3px;
  display:block;
}
.spon-title{font-weight:600;line-height:1.35;font-size:15px;color:#111827}

/* Description below */
.spon-text{
  display:block;
  font-size:13.5px;
  line-height:1.5;
  color:#6b7280;
}

/* Plain image banner, if you ever use one */
.spon img.spon-banner{width:100%;height:auto;border-radius:8px;display:block}

@media (max-width:640px){
  .spon{padding:12px;margin-bottom:14px}
  .spon-title{font-size:14.5px}
  .spon-text{font-size:13px}
}

html[data-color-scheme="dark"] .spon{background:#0b0b0c;border-color:#1f2937}
html[data-color-scheme="dark"] .spon-title{color:#f3f4f6}
html[data-color-scheme="dark"] .spon-text{color:#9ca3af}
html[data-color-scheme="dark"] .spon-heading{border-bottom-color:#1f2937}

/* Article pages wrap the sidebar in .post-aside, which the theme makes sticky.
   The homepage has no such wrapper, so without this its sidebar scrolls away.
   align-self:flex-start matters: a flex child stretches to full row height by
   default, and a full-height element has nowhere to stick to. */
@media (min-width:1024px){
  [data-latest-posts] aside{
    position:sticky;
    top:6rem;
    align-self:flex-start;
  }
}

/* The theme pads the header 16px top and bottom on mobile, 24px on desktop.
   With a tall logo that makes the sticky bar quite deep. Trim as needed. */
header > div{
  padding-top:.5rem;
  padding-bottom:.5rem;
}
@media (min-width:768px){
  header > div{
    padding-top:.75rem;
    padding-bottom:.75rem;
  }
}

/* Three columns of boxes, same look as the sidebar sponsor cards. */
.tagx-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width:640px){ .tagx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tagx-grid{ grid-template-columns:repeat(3,1fr); } }

.tagx{
  display:block;
  text-decoration:none!important;
  color:inherit;
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  transition:box-shadow .08s ease;
}
.tagx:hover{box-shadow:0 6px 20px rgba(0,0,0,.06)}
.tagx:hover .tagx-title{text-decoration:underline;text-underline-offset:2px}

.tagx-title{
  display:block;
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  color:#111827;
  margin-bottom:.3rem;
}

/* Description clamped to exactly two lines, with an ellipsis */
.tagx-text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13.5px;
  line-height:1.5;
  color:#6b7280;
}

html[data-color-scheme="dark"] .tagx{background:#0b0b0c;border-color:#1f2937}
html[data-color-scheme="dark"] .tagx-title{color:#f3f4f6}
html[data-color-scheme="dark"] .tagx-text{color:#9ca3af}

/* The theme scales the headline to 72px on wide screens, where "The Italy
   Travel Hub by The Traveler" wraps to two lines and leaves the right side
   empty. 60px fits on one line in the 1080px content column. */
@media (min-width:1280px){
  [data-hero-headline]{ font-size:3.75rem; line-height:1.08; text-wrap:normal; }
}

[data-color-scheme="dark"] [data-logo-list] { filter: invert(1); }

:root { --backtotop-offset: 30vh; } /* ~30% above bottom on desktop */
  @media (max-width: 640px) { :root { --backtotop-offset: 26vh; } } /* higher on mobile */

  #floating-toc { all: unset; }
  /* Hidden until scrolled */
  #floating-toc details.fltoc {
    display: none;
    position: fixed;
    right: 16px; /* mobile & small screens use viewport right */
    bottom: var(--backtotop-offset);
    z-index: 2147483647; margin: 0;
  }
  #floating-toc details.fltoc.show { display: block; }

  /* On desktop, override horizontal position via JS (left: Xpx) */
  @media (min-width: 1024px) {
    #floating-toc details.fltoc.fltoc--content-anchor {
      right: auto; /* JS sets left */
      left: 16px;  /* fallback */
    }
  }

  /* White circular arrow button (matches your old Back-to-Top) */
  #floating-toc .fltoc__btn {
    list-style: none;
    width: 44px; height: 44px; border-radius: 9999px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff; color: #000;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; line-height: 1; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    outline-offset: 2px;
  }
  html[data-color-scheme="dark"] #floating-toc .fltoc__btn {
    background:#111; color:#eee; border-color: rgba(255,255,255,.16);
  }

  /* Slide-up panel above the button */
  #floating-toc .fltoc__panel {
    position: fixed;
    right: 16px; /* mobile default */
    bottom: calc(var(--backtotop-offset) + 64px);
    width: min(92vw, 420px);
    max-height: 60vh; overflow: auto;
    background: #fff; border: 1px solid #e6e6e6;
    border-radius: 12px; padding: 10px 10px 12px 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
  }
  html[data-color-scheme="dark"] #floating-toc .fltoc__panel { background:#0b0b0b; border-color:#333; }

  /* On desktop, align panel horizontally with the button (use left) */
  @media (min-width: 1024px) {
    #floating-toc .fltoc__panel.fltoc__panel--content { right: auto; left: 16px; }
  }

  #floating-toc .fltoc__hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  #floating-toc .fltoc__title { font-size:14px; color:#111; font-weight:600; }
  html[data-color-scheme="dark"] #floating-toc .fltoc__title { color:#eee; }

  #floating-toc .fltoc__close {
    border:0; background:#f4f4f4; color:#333; font-size:14px; border-radius:8px; padding:4px 8px; cursor:pointer;
  }
  html[data-color-scheme="dark"] #floating-toc .fltoc__close { background:#1a1a1a; color:#ddd; }

  #floating-toc .fltoc__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:6px; }
  #floating-toc .fltoc__link {
    display:block; font-size:13px; text-align:center; padding:8px; border:1px solid #ddd;
    border-radius:8px; background:#fafafa; color:#0056b3; text-decoration:none;
  }
  html[data-color-scheme="dark"] #floating-toc .fltoc__link { background:#111; border-color:#2a2a2a; color:#93c5fd; }
  #floating-toc .fltoc__link[data-level="3"] { opacity:.9; font-size:12.5px; }

  #floating-toc .fltoc__safe { height: calc(8px + env(safe-area-inset-bottom, 0)); }