/* OVELITHUB long-form content styling.
   Makes the SEO content blocks sit inside the theme's visual system:
   centred section headings, a readable measure for prose, and a table of
   contents card that matches the theme's card treatment. */

.ovh-prose > .o21-shell,
.ovh-hub-block > .o21-shell,
.ovh-cs-block > .o21-shell{ display:block; }

/* ---- section heading ---------------------------------------------- */
.ovh-prose > .o21-shell > h2,
.ovh-hub-block > .o21-shell > h2,
.ovh-cs-block > .o21-shell > h2{
  max-width:900px;
  margin:0 auto 30px;
  text-align:center;
  color:var(--o21-ink,#071427);
  font-size:clamp(2rem,3.2vw,3.45rem);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.005em;
  text-wrap:balance;
}

/* ---- prose --------------------------------------------------------- */
.ovh-prose > .o21-shell > p,
.ovh-hub-block > .o21-shell > p,
.ovh-cs-block > .o21-shell > p{
  max-width:760px;
  margin:0 auto 20px;
  color:var(--o21-muted,#5B6C86);
  font-size:1.05rem;
  line-height:1.78;
}
.ovh-prose > .o21-shell > p:last-child,
.ovh-hub-block > .o21-shell > p:last-child,
.ovh-cs-block > .o21-shell > p:last-child{ margin-bottom:0; }

.ovh-prose > .o21-shell > p a,
.ovh-hub-block > .o21-shell > p a,
.ovh-cs-block > .o21-shell > p a{
  color:var(--o21-blue,#0269D0);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  font-weight:600;
}
.ovh-prose > .o21-shell > p a:hover,
.ovh-hub-block > .o21-shell > p a:hover,
.ovh-cs-block > .o21-shell > p a:hover{ color:var(--o21-pink,#F80A62); }

/* a lead paragraph keeps the theme's own centred treatment */
.ovh-cs-block > .o21-shell > p.o21-svc-lead{ max-width:820px; }

@media (max-width:1023px){
  .ovh-prose > .o21-shell > h2,
  .ovh-hub-block > .o21-shell > h2,
  .ovh-cs-block > .o21-shell > h2{ text-align:left; }
}
/* ---- lists / card grids inside long-form blocks --------------------- */
/* The theme renders <ul> as a full-bleed 3-up card grid. Inside a
   long-form block that fights the 760px reading measure, so the grid is
   pulled back onto the same column as the prose around it. */
.ovh-prose > .o21-shell > .o21-svc-cards,
.ovh-hub-block > .o21-shell > .o21-svc-cards,
.ovh-cs-block > .o21-shell > .o21-svc-cards{
  max-width:760px;
  width:100%;
  margin:0 auto 22px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.ovh-prose > .o21-shell > .o21-svc-cards > *,
.ovh-hub-block > .o21-shell > .o21-svc-cards > *,
.ovh-cs-block > .o21-shell > .o21-svc-cards > *{ margin:0; width:auto; }

.ovh-prose > .o21-shell > ul,
.ovh-prose > .o21-shell > ol,
.ovh-hub-block > .o21-shell > ul,
.ovh-hub-block > .o21-shell > ol,
.ovh-cs-block > .o21-shell > ul,
.ovh-cs-block > .o21-shell > ol{
  max-width:760px;
  margin:0 auto 22px;
  padding-left:1.15em;
  color:var(--o21-muted,#5B6C86);
  font-size:1.05rem;
  line-height:1.78;
}
.ovh-prose > .o21-shell > ul > li,
.ovh-hub-block > .o21-shell > ul > li,
.ovh-cs-block > .o21-shell > ul > li{ margin:0 0 8px; }

/* ---- sub-headings --------------------------------------------------- */
.ovh-prose > .o21-shell > h3,
.ovh-hub-block > .o21-shell > h3,
.ovh-cs-block > .o21-shell > h3{
  max-width:760px;
  margin:34px auto 12px;
  color:var(--o21-ink,#071427);
  font-size:1.28rem;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.003em;
}

/* ---- inline links: quieter than the theme default ------------------- */
.ovh-prose > .o21-shell > p a,
.ovh-hub-block > .o21-shell > p a,
.ovh-cs-block > .o21-shell > p a,
.ovh-prose > .o21-shell > ul a,
.ovh-hub-block > .o21-shell > ul a,
.ovh-cs-block > .o21-shell > ul a{
  font-weight:500;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(2,105,208,.42);
}
.ovh-prose > .o21-shell > p a:hover,
.ovh-hub-block > .o21-shell > p a:hover,
.ovh-cs-block > .o21-shell > p a:hover{
  text-decoration-color:currentColor;
}

/* ---- service lead ---------------------------------------------------
   The lead under the hero is a standfirst, not body copy: a narrower
   measure keeps it to three or four lines, and slightly larger type gives
   it a role of its own instead of reading as an unstyled paragraph. */
.o21-svc-intro .o21-svc-lead{
  max-width:820px;
  margin:0 auto;
  font-size:clamp(1.08rem,1.35vw,1.25rem);
  line-height:1.62;
  color:var(--o21-muted,#5B6C86);
  text-wrap:pretty;
}
@media (max-width:1023px){
  .o21-svc-intro .o21-svc-lead{ text-align:left; }
}