/* Advision 2026: single-post article layout.
   Covers two rendering paths on this site:
   1) Posts with no post-specific Elementor build (the normal case) render
      through the Elementor Theme Builder "Single Post" template (id 4154),
      which already includes the shared breadcrumb+title component (id
      3226, also used by the Privacy/Cookie policy pages), a featured-image
      widget, post-info (author/date), then the post content. Its colors
      pointed at orphaned global color ids that no longer exist in the
      active kit (same root cause as the policy pages - see adv-policy.css),
      so title/breadcrumb rendered white-on-white and links/headings fell
      back to a generic pink (#cc3366) instead of the site's own palette.
   2) The one post built with its own custom Elementor content ("Sorridere
      di piacere", id 4150) had no breadcrumb/title/featured-image at all
      and the same unstyled-link/heading issue - fixed by inserting the
      same shared hero component + a featured-image widget at the top of
      its own Elementor data, and tagging its body widgets with the
      .adv-article-body / .adv-article-featured-image classes below so
      they get identical treatment to path (1).
   Colors/fonts follow the site's 2026 kit (Ink #1B1B1B, accent yellow
   #ffde45, Rubik for headings, Questrial for body copy). */

/* --- shared breadcrumb + title component (Elementor template 3226) --- */
/* The page's own top-level section wrapping this shared component carries
   its original (often left-only, e.g. 15%) Elementor padding, which throws
   off the %-based full-bleed centering trick below since it makes the
   component's containing block asymmetric relative to the real viewport.
   :has() lets this be neutralized generically, on whichever page/template
   embeds the component, without hardcoding each page's own section id. */
.elementor-top-section:has(.elementor-element-a138f3f){
  padding-left:0 !important;
  padding-right:0 !important;
}
/* The column's own widget-wrap around the template widget carries
   Elementor's default 10px top padding, and the bar section itself
   carries a default 20px top margin - together they left a ~30px white
   gap between the fixed header and the black bar. Both are neutralized
   here (the :has() form is used because the wrap's own element id is not
   stable - it differs per page the template is embedded on). */
.elementor-widget-wrap:has(.elementor-element-a138f3f){
  padding-top:0 !important;
}
.elementor-element-a138f3f{
  background-color:#1B1B1B !important;
  padding:48px 20px !important;
  margin-top:0 !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  box-sizing:border-box !important;
}
.elementor-element-a138f3f .elementor-column,
.elementor-element-a138f3f .elementor-container{
  justify-content:center !important;
}
.elementor-element-f3cbaba{
  max-width:900px;
  margin:0 auto !important;
  padding:0 20px !important;
  text-align:center !important;
  align-items:center !important;
}
.elementor-element-efcf5d7,
.elementor-element-efcf5d7 .elementor-widget-container,
.elementor-element-efcf5d7 a{
  color:rgba(255,255,255,.7) !important;
  font-family:'Rubik', sans-serif !important;
  font-size:13px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
  justify-content:center !important;
}
.elementor-element-efcf5d7 a:hover{ color:#ffde45 !important; }
.elementor-element-efcf5d7 .elementor-breadcrumbs__item:last-child,
.elementor-element-efcf5d7 span[itemprop="name"]:last-of-type{ color:#ffde45 !important; }
.elementor-element-def5931,
.elementor-element-def5931 .elementor-heading-title{
  color:#FFFFFF !important;
  font-family:'Rubik', sans-serif !important;
  font-weight:700 !important;
  text-align:center !important;
  margin-top:14px;
}
@media (max-width:767px){
  .elementor-element-a138f3f{ padding:36px 16px !important; }
}

/* --- article featured image (reused on both rendering paths above) --- */
.adv-article-featured-image{
  display:block;
  max-width:1000px;
  margin:0 auto !important;
}
.adv-article-featured-image .elementor-widget-container{
  display:flex;
  justify-content:center;
}
.adv-article-featured-image img{
  width:100%;
  height:auto;
  max-height:520px;
  object-fit:cover;
  display:block;
  border-radius:6px;
  margin:40px 0 0;
}
@media (max-width:767px){
  .adv-article-featured-image img{ margin-top:24px; max-height:320px; }
}

/* --- article meta (author / date, shown under the featured image) --- */
.adv-article-meta{
  max-width:1000px;
  margin:18px auto 0 !important;
  display:flex;
  justify-content:center;
}
.adv-article-meta,
.adv-article-meta .elementor-icon-list-text{
  font-family:'Rubik', sans-serif !important;
  font-size:13px !important;
  color:#8a8a8a !important;
  letter-spacing:.02em;
}
.adv-article-meta .elementor-icon-list-icon i{ color:#c9c9c9 !important; }
.adv-article-meta .elementor-icon-list-items{ justify-content:center; }

/* --- article body: readable, centered column --- */
.adv-article-body{
  display:block;
  max-width:760px;
  margin:0 auto !important;
  padding:48px 24px 64px;
  box-sizing:border-box;
  font-family:'Questrial', sans-serif !important;
  font-size:17px !important;
  line-height:1.8 !important;
  color:#3d3d3d !important;
}
.adv-article-body p,
.adv-article-body ul,
.adv-article-body ol,
.adv-article-body blockquote,
.adv-article-body figure,
.adv-article-body .wp-block-gallery{
  margin:0 0 22px;
}
.adv-article-body h1,
.adv-article-body h2,
.adv-article-body h3,
.adv-article-body h4,
.adv-article-body h5{
  font-family:'Rubik', sans-serif !important;
  font-weight:700 !important;
  color:#1B1B1B !important;
  margin:40px 0 18px;
  line-height:1.3;
}
.adv-article-body h2{ font-size:28px !important; }
.adv-article-body h3{ font-size:22px !important; }
.adv-article-body h3 a{ text-decoration:none !important; }
.adv-article-body h4{ font-size:18px !important; }
.adv-article-body ul,
.adv-article-body ol{ padding-left:22px; }
.adv-article-body li{ margin-bottom:8px; }
.adv-article-body img{
  max-width:100%;
  height:auto;
  border-radius:6px;
  display:block;
  margin:8px auto 24px;
}
.adv-article-body blockquote{
  margin:32px 0;
  padding:18px 24px;
  border-left:3px solid #ffde45;
  background:rgba(255,222,69,.08);
  font-style:italic;
  color:#1B1B1B !important;
}
.adv-article-body a{
  color:#1B1B1B !important;
  text-decoration:underline !important;
  text-decoration-color:#ffde45 !important;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.adv-article-body a:hover{ color:#ffde45 !important; }
.adv-article-body .gallery,
.adv-article-body .elementor-widget-gallery .elementor-image-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin:8px 0 22px;
}
.adv-article-body .gallery img,
.adv-article-body .elementor-widget-gallery img{ margin:0; width:100%; height:100%; object-fit:cover; }

.adv-article-pagination{
  margin-top:8px;
  font-family:'Rubik', sans-serif;
  font-size:14px;
}
.adv-article-tags{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.08);
  font-family:'Rubik', sans-serif;
  font-size:14px;
  color:#888;
}
.adv-article-tags a{ color:#1B1B1B; }
.adv-article-tags a:hover{ color:#ffde45; }

@media (max-width:767px){
  .adv-article-body{ font-size:16px !important; padding-left:20px; padding-right:20px; }
}

/* --- template 4154 (theme-builder "Single Post"): loosen its own fixed
   padding now that the image/meta/content widgets center themselves via
   max-width + auto margins above. --- */
.elementor-element-b1e1cf1{
  padding:56px 20px 20px !important;
}
/* Bottom CTA ("Conosciamoci meglio davanti ad un caffe") section: its own
   mobile padding is already symmetric (3%/3%), but the in-between tablet
   width (768-1024px, still a stacked/mobile-style layout on this site)
   falls back to the desktop value (15% left / 3% right), leaving an
   uneven side margin there. Forced symmetric up to the same 1024px cutoff
   used everywhere else on the site for "non-desktop". */
@media (max-width:1024px){
  .elementor-element-28e29ea{
    padding-left:3% !important;
    padding-right:3% !important;
  }
}
@media (max-width:767px){
  .elementor-element-b1e1cf1{ padding:32px 16px 16px !important; }
}