/* -----------------------------------------------------------
   MindLab Consulting — frontend refresh layer
   Loaded AFTER style.css on every public page.

   Purpose:
   1. Design tokens derived from the existing brand
      (deep navy + magenta, Poppins body / Excon display).
   2. Fluid, readable long-form typography for blog articles
      (replaces the per-page `p { font-size: x-large }` hacks
      that broke mobile reading).
   3. Utilities that replace recurring inline styles.
   4. Small mobile and accessibility fixes.

   Naming: `ml-` prefix for everything introduced by this layer.
------------------------------------------------------------ */

:root {
  /* Brand palette (named, single source of truth) */
  --ml-notte: #00224f;              /* page background (existing) */
  --ml-abisso: #000823;             /* deep sections (existing) */
  --ml-magenta: #e4007e;            /* brand accent (existing) */
  --ml-orchidea: #ff7ac1;           /* light magenta tint: inline emphasis on dark bg */
  --ml-carta: #e9edf5;              /* long-form body text */
  --ml-nebbia: #9db2d1;             /* secondary text, meta, captions */
  --ml-velo: rgba(157, 178, 209, 0.16); /* hairlines and dividers */

  /* Fluid type scale for long-form reading: 17px -> 19px */
  --ml-prose-size: clamp(1.0625rem, 0.97rem + 0.45vw, 1.1875rem);
  --ml-prose-lh: 1.75;
  /* Comfortable reading measure (~66ch at 19px) */
  --ml-measure: 46rem;
}

/* -----------------------------------------------------------
   Utilities (replace recurring inline styles in the markup)
------------------------------------------------------------ */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.fw-bold     { font-weight: 700; }

/* Content illustration inside an article: centered block image.
   Replaces `class="cover-bg-img" style="padding: 4em;"`. */
.ml-figure {
  display: block;
  width: min(100%, 40rem);
  height: auto;
  margin: clamp(1.75rem, 5vw, 3.25rem) auto;
  border-radius: 10px;
}

/* Small uppercase label (breadcrumb / kicker above titles) */
.ml-eyebrow {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ml-nebbia);
}
.ml-eyebrow a {
  color: inherit;
  transition: color 0.25s ease;
}
.ml-eyebrow a:hover { color: var(--ml-orchidea); }

/* -----------------------------------------------------------
   Menu overlay + footer
   (colors previously forced with inline styles on every page)
------------------------------------------------------------ */

#site_menu_header .nav__info .sm-title-block,
#site_menu_header .nav-social .sm-title-block {
  color: var(--ml-magenta);
}
#site_menu_header .container-content p,
#site_menu_header .container-content a {
  color: #fff;
}
#site_menu_header .nav__info .dsn-def-btn .dsn-btn {
  display: inline-flex;
}

#site_menu_header .custom-logo,
#dsn_footer .custom-logo {
  max-width: 150px;
}
/* The wordmark was undersized next to 95px hero titles */
@media only screen and (min-width: 992px) {
  #site_menu_header .custom-logo {
    max-width: 230px;
  }
  #dsn_footer .custom-logo {
    max-width: 180px;
  }
}

/* Menu overlay: consistent rhythm instead of scattered mt-30 */
#site_menu_header .container-content {
  gap: 32px;
  margin-top: 48px;
}
#site_menu_header .container-content .nav-social,
#site_menu_header .container-content .nav__info.mt-30 {
  margin-top: 0;
}
#site_menu_header .nav__info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#site_menu_header .nav__info .nav-content.mt-30 {
  margin-top: 0;
}
#site_menu_header .container-content .sm-title-block {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#site_menu_header .container-content p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
#site_menu_header .container-content .links {
  margin-bottom: 4px;
}
/* Social links: compact row instead of a tall stacked list */
#site_menu_header .nav-social-inner ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}
#site_menu_header .nav-social-inner li {
  margin: 0;
  width: auto;
}
@media only screen and (max-width: 991px) {
  /* The overlay centers its text on small screens: follow suit */
  #site_menu_header .nav-social-inner ul {
    justify-content: center;
  }
}
#site_menu_header .container-content hr {
  border: 0;
  border-top: 1px solid var(--ml-velo);
  margin: 0 0 24px;
}

/* -----------------------------------------------------------
   Footer: clear hierarchy and even spacing between blocks
------------------------------------------------------------ */

#dsn_footer .footer-content .d-grid {
  row-gap: 44px;
  column-gap: 40px;
}

/* Column titles: quiet uppercase labels, consistent distance */
#dsn_footer .subtitle {
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

#dsn_footer .menu-footer-menu-container .menu li {
  margin-bottom: 10px;
}
#dsn_footer .menu-footer-menu-container .menu a {
  font-size: 14px;
  letter-spacing: 2px;
}

#dsn_footer .col-contact p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
}
#dsn_footer .col-contact p:last-child {
  margin-bottom: 0;
}
#dsn_footer .col-contact strong {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ml-magenta);
  margin-bottom: 3px;
}
#dsn_footer .col-contact a { color: #fff; }

#dsn_footer .col-address p {
  font-size: 15px;
  line-height: 1.7;
}

#dsn_footer .dsn-socials {
  gap: 14px;
}

/* Closing CTA: scale down gracefully on phones */
#dsn_footer .title-h2 {
  font-size: clamp(26px, 6.5vw, 40px);
  line-height: 1.2;
}

#dsn_footer .footer-bottom {
  margin-top: 50px;
  padding-top: 24px;
  padding-bottom: 24px;
}
#dsn_footer .footer-bottom p {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--ml-nebbia);
}
@media only screen and (max-width: 767px) {
  #dsn_footer .footer-content .d-grid {
    row-gap: 36px;
  }
}

/* -----------------------------------------------------------
   Long-form prose
   Applies to:
   - static article/service sections (.about-section)
   - the dynamic article body (#article-text, filled by article.js)
------------------------------------------------------------ */

/* Base paragraph: fluid size, relaxed leading, capped measure */
#article-text p,
#page_wrapper .about-section p {
  font-size: var(--ml-prose-size);
  line-height: var(--ml-prose-lh);
  color: var(--ml-carta);
  overflow-wrap: break-word;
}

/* Center the reading column when text sits directly in a wide
   container (full-width sections after the intro grid). */
#article-text > *,
#page_wrapper .about-section > .container > p,
#page_wrapper .about-section > .container > ul,
#page_wrapper .about-section > .container > ol,
#page_wrapper .about-section > .container > h2,
#page_wrapper .about-section > .container > h3,
#page_wrapper .about-section > .container > h4,
#page_wrapper .about-section > .container > h5 {
  max-width: var(--ml-measure);
  margin-left: auto;
  margin-right: auto;
}
#article-text > .ml-figure,
#page_wrapper .about-section > .container > .ml-figure {
  max-width: min(100%, 40rem);
}

/* Vertical rhythm between blocks (replaces scattered <br> gaps) */
#article-text p + p,
#page_wrapper .about-section > .container > p + p {
  margin-top: 1.1em;
}

/* Inline emphasis: light magenta reads better than pure brand
   magenta on the navy background (was `b { color: #e4007e }`) */
#article-text b, #article-text strong,
#page_wrapper .about-section b,
#page_wrapper .about-section strong {
  color: var(--ml-orchidea);
  font-weight: 600;
}

/* Links inside prose */
#article-text a,
#page_wrapper .about-section p a {
  color: var(--ml-orchidea);
  text-decoration: underline;
  text-decoration-color: var(--ml-magenta);
  text-underline-offset: 3px;
}

/* Lists: square magenta markers (template idiom), no manual "•" */
#article-text ul, #article-text ol,
#page_wrapper .about-section ul,
#page_wrapper .about-section ol {
  padding-left: 1.35em;
  margin-top: 1em;
  margin-bottom: 1em;
}
#article-text ul li,
#page_wrapper .about-section ul li {
  list-style: square;
}
#article-text ol li,
#page_wrapper .about-section ol li {
  list-style: decimal;
}
#article-text li,
#page_wrapper .about-section li {
  font-size: var(--ml-prose-size);
  line-height: 1.6;
  color: var(--ml-carta);
  margin-block: 0.45em;
  padding-left: 0.35em;
}
#article-text li::marker,
#page_wrapper .about-section li::marker {
  color: var(--ml-magenta);
}

/* Headings inside the article body */
#article-text h2, #article-text h3, #article-text h4,
#page_wrapper .about-section > .container > h2,
#page_wrapper .about-section > .container > h3,
#page_wrapper .about-section > .container > h4 {
  color: #fff;
  letter-spacing: 1px;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  line-height: 1.25;
}
#article-text h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }
#article-text h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }
#article-text h4 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); }

#article-text blockquote {
  margin: 1.75em auto;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 2px solid var(--ml-magenta);
  color: var(--ml-nebbia);
  font-style: italic;
}

#article-text img {
  display: block;
  max-width: min(100%, 40rem);
  height: auto;
  margin: clamp(1.75rem, 5vw, 3.25rem) auto;
  border-radius: 10px;
}

/* -----------------------------------------------------------
   Signature: the lede
   First paragraph opens larger, brighter, with a magenta
   "synaptic thread" fading down its left edge.
------------------------------------------------------------ */

#article-text > p:first-of-type,
#page_wrapper .about-section:first-of-type .box-left > p:first-of-type {
  font-size: clamp(1.2rem, 1.05rem + 0.75vw, 1.45rem);
  line-height: 1.6;
  color: #fff;
  font-weight: 300;
  padding-left: clamp(0.9em, 2.5vw, 1.2em);
  border-left: 2px solid var(--ml-magenta);
  border-image: linear-gradient(180deg, var(--ml-magenta) 0%, rgba(228, 0, 126, 0) 90%) 1;
}
#article-text > p:first-of-type b,
#article-text > p:first-of-type strong,
#page_wrapper .about-section:first-of-type .box-left > p:first-of-type b,
#page_wrapper .about-section:first-of-type .box-left > p:first-of-type strong {
  color: var(--ml-orchidea);
  font-weight: 500;
}

/* -----------------------------------------------------------
   Typography normalization (uniform scale, no dated effects)
------------------------------------------------------------ */

/* Drop the hard text shadows the template stamps on titles */
.title-block,
.title-index {
  text-shadow: none;
}

/* One voice for every small label/eyebrow across the site */
.sub-heading,
.sm-title-block,
.section-title .description {
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* Section headings: fluid, consistent everywhere */
.title-h2 {
  font-size: clamp(28px, 2.2vw + 14px, 40px);
  line-height: 1.2;
  letter-spacing: 1.5px;
}

/* Buttons: uniform label treatment */
.dsn-def-btn .title-btn {
  font-size: 14px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* Home slider copy */
.main-slider .slide-content .description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ml-carta);
}

/* Card captions sit on busy artwork: keep a scrim for
   legibility, drop the dated hard offset shadow */
p.section_description {
  font-size: 15px;
  line-height: 1.65;
  background-color: rgba(0, 8, 35, 0.8);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: none;
}

/* -----------------------------------------------------------
   Hero intro paragraphs (page headers)
------------------------------------------------------------ */

#dsn_header .intro-title p:not(.ml-eyebrow) {
  font-size: var(--ml-prose-size);
  line-height: 1.7;
  color: var(--ml-carta);
  max-width: 40rem;
}
#dsn_header .intro-title p + p:not(.ml-eyebrow) {
  margin-top: 0.9em;
}
#dsn_header .intro-title p b,
#dsn_header .intro-title p strong {
  color: var(--ml-orchidea);
  font-weight: 600;
}

/* -----------------------------------------------------------
   Dynamic article page (article.html)
------------------------------------------------------------ */

.ml-article-wrap {
  display: block;
  width: 100%;
}

.ml-article-title {
  color: var(--ml-magenta);
  font-size: clamp(26px, 3.2vw + 14px, 44px);
  line-height: 1.2;
  letter-spacing: 1px;
  margin-top: 10px;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ml-nebbia);
}
.article-meta i {
  color: var(--ml-magenta);
  margin-right: 8px;
}
.article-meta .ml-20 { margin-left: 0; } /* gap handles spacing */

/* -----------------------------------------------------------
   Blog cards (blog.html)
   The container carried an inline `height: 100% !important`
   inside an auto-height parent, so cards were clipped to 0px.
   Enforce a plain responsive grid instead.
------------------------------------------------------------ */

#blog-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  height: auto !important;
}
@media only screen and (min-width: 768px) {
  #blog-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* Card height: was a fixed 70vh, far too tall on phones */
#blog-list.box-image-normal .box-image-bg {
  height: clamp(260px, 45vh, 420px);
}
@media only screen and (min-width: 768px) {
  #blog-list.box-image-normal .box-image-bg {
    height: clamp(320px, 55vh, 520px);
  }
}

/* Neutralize isotope: it absolutely-positions the cards (stacking them at
   0,0 and collapsing the container to height:0). Force them back into the
   CSS grid flow. !important beats isotope's inline styles, incl. on resize. */
#blog-list .grid-item {
  width: auto;
  max-width: none;
  margin: 0;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

#blog-list .dsn-item-post {
  border-radius: 10px;
}

.dsn-post-type-cards .post-content {
  padding: clamp(20px, 3.5vw, 40px);
}
.dsn-post-type-cards .post-title {
  font-size: clamp(18px, 1.1rem + 0.9vw, 24px);
  line-height: 1.35;
  letter-spacing: 1px;
}

#blog-list > p {
  font-size: var(--ml-prose-size);
  color: var(--ml-nebbia);
  grid-column: 1 / -1;
}

/* -----------------------------------------------------------
   Mobile fixes
------------------------------------------------------------ */

@media only screen and (max-width: 767px) {
  /* Hero titles: never touch the viewport edges */
  #dsn_header .title {
    font-size: clamp(30px, 8.4vw, 47px);
    line-height: 1.18;
    letter-spacing: 1px;
  }

  /* Long-form blocks breathe a little closer on small screens */
  :root {
    --ml-prose-lh: 1.7;
  }
}

/* -----------------------------------------------------------
   Quality floor: keyboard focus + reduced motion
------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ml-orchidea);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------
   Map (Leaflet) — brand-matched dark style
   Replaces the Google Maps embed on the contact page.
------------------------------------------------------------ */

/* Rectangular, compact map (overrides the template's .hv-80 = 80vh) */
.map-custom.ml-map,
.map-custom.hv-80.ml-map {
  height: 440px;
  z-index: 0;
  background-color: var(--ml-abisso);
}
@media only screen and (max-width: 767px) {
  .map-custom.ml-map,
  .map-custom.hv-80.ml-map {
    height: 300px;
  }
}

/* Navy tint over the dark open basemap so it reads as brand navy
   (bright enough to keep streets and labels legible) */
.ml-map .leaflet-tile {
  filter: brightness(1.62) contrast(0.85) sepia(0.45) hue-rotate(188deg) saturate(1.6);
}

/* Zoom controls */
.ml-map .leaflet-bar a {
  background-color: var(--ml-notte);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.ml-map .leaflet-bar a:hover {
  background-color: var(--ml-magenta);
  color: #fff;
}
.ml-map .leaflet-bar {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 8, 35, 0.5);
}

/* Attribution */
.ml-map .leaflet-control-attribution {
  background: rgba(0, 8, 35, 0.72);
  color: var(--ml-nebbia);
  font-size: 11px;
}
.ml-map .leaflet-control-attribution a { color: var(--ml-orchidea); }

/* Brand pin: subtle drop + drop-in animation */
.ml-map-pin svg {
  display: block;
  filter: drop-shadow(0 5px 6px rgba(0, 8, 35, 0.55));
  transform-origin: 50% 100%;
  animation: ml-pin-drop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
@keyframes ml-pin-drop {
  0% { transform: translateY(-14px) scale(0.85); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Popup */
.ml-map .leaflet-popup-content-wrapper {
  background: var(--ml-notte);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 8, 35, 0.6);
}
.ml-map .leaflet-popup-content { margin: 14px 18px; line-height: 1.6; }
.ml-map .leaflet-popup-content strong { color: var(--ml-orchidea); }
.ml-map .leaflet-popup-tip { background: var(--ml-notte); }
.ml-map .leaflet-popup-close-button { color: var(--ml-nebbia); }
.ml-map .leaflet-popup-close-button:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .ml-map-pin svg { animation: none; }
}

/* -----------------------------------------------------------
   Home — "Il Metodo" (3-step process)
------------------------------------------------------------ */

.ml-method__lead {
  font-size: var(--ml-prose-size);
  line-height: 1.7;
  color: var(--ml-nebbia);
  max-width: 34rem;
}

.ml-method__grid {
  gap: 24px;
}

.ml-step {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 34px);
  border: 1px solid var(--ml-velo);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(157, 178, 209, 0.05), rgba(0, 8, 35, 0.15));
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ml-step::before {
  /* magenta thread down the left edge, echoing the article lede */
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  background: linear-gradient(180deg, var(--ml-magenta), rgba(228, 0, 126, 0));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.ml-step:hover {
  transform: translateY(-6px);
  border-color: rgba(228, 0, 126, 0.45);
  box-shadow: 0 18px 40px rgba(0, 8, 35, 0.45);
}
.ml-step:hover::before { opacity: 1; }

.ml-step__num {
  display: block;
  font-family: var(--heading-font, "Poppins"), sans-serif;
  font-size: clamp(2.6rem, 2rem + 2.5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(228, 0, 126, 0.55);
  margin-bottom: 20px;
}
.ml-step:hover .ml-step__num {
  color: var(--ml-magenta);
  -webkit-text-stroke: 1.5px var(--ml-magenta);
}
.ml-step__title {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 12px;
}
.ml-step__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ml-nebbia);
  margin: 0;
}

/* -----------------------------------------------------------
   Home — "Approfondimenti" (blog teaser cards)
------------------------------------------------------------ */

.ml-insights__grid { gap: 28px; }

.ml-insight {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 8, 35, 0.25);
  border: 1px solid var(--ml-velo);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ml-insight:hover {
  transform: translateY(-6px);
  border-color: rgba(228, 0, 126, 0.4);
  box-shadow: 0 18px 40px rgba(0, 8, 35, 0.5);
}
.ml-insight__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ml-abisso);
}
.ml-insight__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ml-insight:hover .ml-insight__media img { transform: scale(1.06); }

.ml-insight__body {
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.ml-insight__cat {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ml-magenta);
}
.ml-insight__title {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: 0.3px;
  color: #fff;
  margin: 0;
  transition: color 0.3s ease;
}
.ml-insight:hover .ml-insight__title { color: var(--ml-orchidea); }
.ml-insight__more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ml-nebbia);
}
.ml-insight__more i {
  margin-left: 6px;
  transition: transform 0.3s ease;
}
.ml-insight:hover .ml-insight__more { color: #fff; }
.ml-insight:hover .ml-insight__more i { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .ml-step, .ml-insight, .ml-insight__media img, .ml-insight__more i { transition: none; }
}

/* -----------------------------------------------------------
   Honeypot field (contact form): visually hidden, off-screen.
   Not display:none (some bots skip that); still non-focusable.
------------------------------------------------------------ */
.ml-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}