/* =========================================================================
   Hero layouts – Exeen header redesign (SHM 2026-11-04)
   Figma: "[NEW] Header" (page 1582:2248)
   - ._hero-nocard  (acf/hero-primary, hero_layout = nocard_v1 | nocard_v2)
   - .nhero--card-v2 (acf/block-home-hero, nhero_tayout = card_v2)
   - body.has-hero-card : header colours on the white hero
   ========================================================================= */

:root {
  --hero-blue: #17384d;
  --hero-blue-2: #347793;
  --hero-green: #c7d64f;
  --hero-grey: #8295aa;
  --hero-ff-title: 'Ryker', sans-serif;
  --hero-ff-text: 'Silka', sans-serif;
}

/* -------------------------------------------------------------------------
   Breadcrumb inside the hero (Yoast)
   ------------------------------------------------------------------------- */
._hero-breadcrumb,
._hero-breadcrumb a,
._hero-breadcrumb span {
  font-family: var(--hero-ff-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-decoration: none;
}

._hero-breadcrumb > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

._hero-breadcrumb .breadcrumb_last {
  font-weight: 700;
}

._hero-breadcrumb.breadc_wh,
._hero-breadcrumb.breadc_wh a,
._hero-breadcrumb.breadc_wh span {
  color: #fff;
}

._hero-breadcrumb.breadc_dk,
._hero-breadcrumb.breadc_dk span {
  color: var(--hero-blue);
}

._hero-breadcrumb.breadc_dk a {
  color: var(--hero-grey);
}

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

@media (min-width: 1024px) {
  ._hero-breadcrumb.breadc_dk a {
    color: var(--hero-blue);
  }
}

/* -------------------------------------------------------------------------
   NO CARD (V1: blue + W, V2: blue + photo right)
   ------------------------------------------------------------------------- */
._hero-nocard {
  position: relative;
  overflow: hidden;
  background-color: var(--hero-blue);
  color: #fff;
  min-height: 466px;
  padding: 116px 0 120px;
  display: block;
}

._hero-nocard--v2 {
  min-height: 549px;
  padding-bottom: 190px;
}

._hero-nocard__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

._hero-nocard__content {
  max-width: 689px;
}

._hero-nocard .nhero_breadcrumb {
  margin-bottom: 12px;
}

._hero-nocard__toptitle {
  display: block;
  margin-bottom: 8px;
}

._hero-nocard__title {
  font-family: var(--hero-ff-title);
  font-weight: 700;
  font-size: 30px;
  line-height: 36px;
  color: #fff;
  margin: 0;
}

/* [EXEEN-HERO 2026-11-06] some titles contain spacing helpers made for the old header
   (e.g. FAQ, Scenario: <span class="block mt-32">…</span>): neutralise them in the new header */
._hero-nocard__title [class*="mt-"],
._hero-nocard__title [class*="pt-"] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

._hero-nocard__subtitle,
._hero-nocard__text,
._hero-nocard__text p {
  font-family: var(--hero-ff-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}

._hero-nocard__subtitle,
._hero-nocard__text {
  margin: 20px 0 0;
  max-width: 628px;
}

._hero-nocard__text p {
  margin: 0 0 0.75em;
}

._hero-nocard__text p:last-child {
  margin-bottom: 0;
}

._hero-nocard__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 24px;
}

/* W mark (V1) – Figma 1769:8783 (mobile) / 1690:35458 (desktop) */
._hero-nocard__w {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 36.9%;
  top: 342px;
  width: 78.7%;
  aspect-ratio: 307 / 186;
  background: url('../img/hero/w-nocard-mobile.svg') center / contain no-repeat;
  transform: rotate(-15deg);
}

/* Photo (V2) – Figma 1860:116072 (mobile) / 1690:4147 + 1831:42515 (desktop) */
._hero-nocard__media {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: 0;
  height: 385px;
  overflow: hidden;
}

._hero-nocard__img {
  position: absolute;
  right: -12%;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
}

._hero-nocard__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #17384d 44.1%, rgba(23, 56, 77, 0.687) 57.03%, rgba(23, 56, 77, 0) 73.65%);
}

@media (min-width: 768px) {
  ._hero-nocard__title {
    font-size: 40px;
    line-height: 46px;
  }

  ._hero-nocard__subtitle,
  ._hero-nocard__text,
  ._hero-nocard__text p {
    font-size: 16px;
    line-height: 26px;
  }
}

@media (min-width: 1024px) {
  ._hero-nocard,
  ._hero-nocard--v2 {
    /* Figma 1741:4748: logo box 18–78, breadcrumb at 130 → 52px box gap (≈56px visually); site logo box bottom is at 110px (top bar + nav) */
    min-height: 571px;
    padding: 162px 0 72px;
  }

  ._hero-nocard__inner {
    padding-left: calc(1rem + 42px);
  }

  ._hero-nocard__content {
    max-width: min(689px, 58%);
  }

  ._hero-nocard .nhero_breadcrumb {
    margin-bottom: 26px; /* Figma 34px box gap; 26px compensates the Ryker line-height so the glyphs sit where Figma shows them */
  }

  ._hero-nocard__title {
    font-size: 52px;
    line-height: 58px;
  }

  /* Figma child-page frames (1831:42514 …): title column 460px → 3 lines next to the photo */
  ._hero-nocard--v2 ._hero-nocard__title {
    max-width: 460px;
  }

  ._hero-nocard__subtitle,
  ._hero-nocard__text,
  ._hero-nocard__text p {
    font-weight: 500;
    font-size: 18px;
    line-height: 30px;
  }

  ._hero-nocard__subtitle,
  ._hero-nocard__text {
    margin-top: 8px;
  }

  ._hero-nocard__w {
    left: 59.7%;
    top: 177px;
    width: 44.2%;
    aspect-ratio: 636 / 384;
    background-image: url('../img/hero/w-nocard-desktop.svg');
    transform: rotate(14.9deg);
  }

  ._hero-nocard__media {
    left: 12px;
    right: 0;
    top: 0;
    bottom: auto;
    height: clamp(400px, 39.72vw, 572px);
  }

  ._hero-nocard__img {
    right: 0;
    top: 0;
    bottom: auto;
    object-position: right top;
  }

  ._hero-nocard__fade {
    background: linear-gradient(90.1deg, #17384d 35.56%, rgba(29, 70, 96, 0.812) 55.39%, rgba(53, 130, 179, 0) 81.91%);
  }
}

/* 1024–1279: less room next to the photo – smaller title, narrower text column */
@media (min-width: 1024px) and (max-width: 1279px) {
  ._hero-nocard__title {
    font-size: 44px;
    line-height: 50px;
  }

  ._hero-nocard--v2 ._hero-nocard__content {
    max-width: 54%;
  }

  ._hero-nocard--v2 ._hero-nocard__title {
    max-width: 420px;
  }

  ._hero-nocard__media {
    height: clamp(380px, 36vw, 572px);
  }
}

@media (min-width: 1440px) {
  ._hero-nocard__content {
    max-width: 689px;
  }
}

/* -------------------------------------------------------------------------
   CARD V2 (white background, illustration right, category cards)
   Figma 1614:60754 (desktop) / 1860:114925 (mobile)
   ------------------------------------------------------------------------- */
.page .nhero.nhero--card-v2,
.nhero.nhero--card-v2 {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  color: var(--hero-blue);
  min-height: 0;
  padding: 116px 0 12px;
}

.nhero--card-v2 ._layer_nhero_content {
  position: relative;
  z-index: 2;
}

.nhero-card {
  position: relative;
}

.nhero-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.nhero-card__text .nhero_breadcrumb {
  margin-bottom: 15px;
}

.nhero-card__title {
  font-family: var(--hero-ff-title);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: -0.6px;
  color: var(--hero-blue);
  margin: 0;
}

.nhero-card__title span {
  color: var(--hero-blue-2);
}

.nhero-card__desc,
.nhero-card__desc p {
  font-family: var(--hero-ff-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 18.5px;
  color: var(--hero-blue);
}

.nhero-card__desc {
  margin-top: 15px;
}

.nhero-card__desc p {
  margin: 0 0 0.75em;
}

.nhero-card__desc p:last-child {
  margin-bottom: 0;
}

/* illustration */
.nhero-card__media {
  position: relative;
  margin: 24px -1rem 0;
  padding: 0 20px;
  overflow: visible; /* the section clips the W bleed; never clip the illustration */
}

.nhero-card__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* green W behind the illustration – Figma 1860:114985 (mobile) / 1614:60755 (desktop) */
.nhero-card__w {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  right: -3px;
  bottom: 10%;
  width: 94.4%;
  aspect-ratio: 368 / 222;
  background: url('../img/hero/w-card-mobile.svg') center / contain no-repeat;
}

.nhero-card__w-left {
  display: none;
}

/* category cards */
.nhero-card__services {
  position: relative;
  margin-top: 0;
  padding: 12px 0 0;
}

/* Figma 1860:114989: portrait vector 175.875×335.863 rotated -90° so it fills
   the landscape box left -58.14 / top 34.95 / 335.86×175.88 of the 350×201 card grid.
   Unrotated box with the same centre (109.79, 122.89): left 21.85 (6.24%), top -45.04,
   width 175.88 (50.25%). +12px = padding-top of .nhero-card__services. */
.nhero-card__w-grid {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 6.24%;
  top: -33px;
  width: 50.25%;
  aspect-ratio: 175.875 / 335.863;
  background: url('../img/hero/w-card-grid-mobile.svg') center / 100% 100% no-repeat;
  transform: rotate(-90deg);
  transform-origin: center;
}

.nhero-card__services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.nhero-card__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background-color: var(--hero-blue);
  color: #fff;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s ease;
}

.nhero-card__item:hover,
.nhero-card__item:focus-visible {
  background-color: var(--hero-blue-2);
  color: #fff;
}

.nhero-card__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nhero-card__item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* [EXEEN-HERO 2026-11-06] older site icons (dark lines for light backgrounds) on pages like Chi siamo /
   Ricarica il tuo veicolo: render them white on the dark card. Figma icons (hero-icon-*.svg) keep their colours. */
.nhero-card__item-icon img:not([src*="hero-icon-"]) {
  filter: brightness(0) invert(1);
}

.nhero-card__item-title {
  font-family: var(--hero-ff-text);
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  color: #fff;
  margin: 0;
}

.nhero-card__item-arrow {
  display: none;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .page .nhero.nhero--card-v2,
  .nhero.nhero--card-v2 {
    /* Figma: 71px between the logo bottom and the breadcrumb; site logo bottom is at 110px */
    min-height: 710px;
    padding: 181px 0 24px;
  }

  /* no category cards on the page: do not reserve their height */
  .page .nhero.nhero--card-v2:not(:has(.nhero-card__services)),
  .nhero.nhero--card-v2:not(:has(.nhero-card__services)) {
    min-height: 0;
    padding-bottom: 40px;
  }

  /* the small left W belongs to the cards row (Figma 1614:69936) */
  .nhero--card-v2:not(:has(.nhero-card__services)) .nhero-card__w-left {
    display: none;
  }

  .nhero-card__grid {
    grid-template-columns: minmax(0, 535px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .nhero-card__text .nhero_breadcrumb {
    margin-bottom: 24px;
  }

  .nhero-card__title {
    font-size: 52px;
    line-height: 58px;
    letter-spacing: 0;
  }

  .nhero-card__desc,
  .nhero-card__desc p {
    font-size: 18px;
    line-height: 30px;
  }

  .nhero-card__desc {
    margin-top: 24px;
  }

  .nhero-card__media {
    margin: -90px 0 0;
    padding: 0;
    overflow: visible;
    max-width: 758px;
    justify-self: end;
  }
}

@media (min-width: 1280px) {
  /* Figma: illustration 758px wide, ends 63px from the right edge (container is 1248px) */
  .nhero-card__media {
    margin-right: -48px;
  }
}

@media (min-width: 1024px) {

  .nhero-card__w {
    right: auto;
    bottom: auto;
    left: 9.5%;
    top: 8%;
    width: 103%;
    aspect-ratio: 779 / 470;
    background-image: url('../img/hero/w-card-desktop.svg');
  }

  .nhero-card__w-left {
    display: block;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    /* [EXEEN-HERO 2026-11-06] Figma 1614:69936: x -32 of the 1440 frame (i.e. from the viewport edge,
       not from the container), bottom 12px below the cards row, 137×285 – anchored to the cards so a
       longer description never runs into it */
    left: calc((100% - 100vw) / 2 - 2.22vw);
    top: auto;
    bottom: -12px;
    width: min(137px, 9.52vw);
    aspect-ratio: 137 / 285;
    background: url('../img/hero/w-card-left.svg') center / contain no-repeat;
  }

  .nhero-card__grid {
    position: relative;
    z-index: 1;
  }

  .nhero-card__services {
    margin-top: 40px;
    padding: 0;
    z-index: 3;
  }

  .nhero-card__w-grid {
    display: none;
  }

  .nhero-card__services-grid {
    display: flex;
    gap: 8px;
    max-width: 1281px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
  }

  .nhero-card__item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 73px;
    padding: 14px 16px;
    border-radius: 12px;
    text-align: left;
  }

  .nhero-card__item-icon {
    width: 36px;
    height: 36px;
  }

  .nhero-card__item-title {
    flex: 1 1 0;
    min-width: 0;
    font-weight: 600;
    line-height: 15px;
  }

  .nhero-card__item-arrow {
    display: block;
  }
}

/* -------------------------------------------------------------------------
   Logged-in users only (body.admin-bar): the theme moves the WP admin bar to
   the bottom and pulls the page up (body margin-top -46px up to 782px, -32px
   above) while the fixed site nav stays on top → the hero needs the same
   extra top padding, otherwise logo and breadcrumb overlap. Visitors unaffected.
   ------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .admin-bar ._hero-nocard,
  .admin-bar .nhero.nhero--card-v2 {
    padding-top: 162px; /* 116 + 46 */
  }
}

@media (min-width: 783px) and (max-width: 1023px) {
  .admin-bar ._hero-nocard,
  .admin-bar .nhero.nhero--card-v2 {
    padding-top: 148px; /* 116 + 32 */
  }
}

@media (min-width: 1024px) {
  .admin-bar ._hero-nocard {
    padding-top: 194px; /* 162 + 32 */
  }

  .admin-bar .nhero.nhero--card-v2 {
    padding-top: 213px; /* 181 + 32 */
  }
}

/* -------------------------------------------------------------------------
   Site header on the white "Card V2" hero: dark logo + dark menu at the top
   (same look as the sticky state, without waiting for the scroll)
   ------------------------------------------------------------------------- */
.has-hero-card .nheader:not(.nsticky) .n-navigation::before {
  background: none;
}

/* [EXEEN-HERO 2026-11-06] pages on the default template also load frontend.min.css, which paints a
   dark gradient on #nav-dsk: remove it on the white card hero (sticky state unchanged) */
.has-hero-card .nheader:not(.nsticky) #nav-dsk {
  background-image: none;
}

.has-hero-card .nheader:not(.nsticky) .nlogo .logo_sm_white {
  visibility: hidden;
  opacity: 0;
}

.has-hero-card .nheader:not(.nsticky) .nlogo .logo_sm_light {
  visibility: visible;
  opacity: 1;
}

.has-hero-card .nheader:not(.nsticky) ._menu-dsk .menu-item a {
  color: var(--hero-blue);
}

.has-hero-card .nheader:not(.nsticky) ._menu-dsk .menu-item.menu-item-has-children > a::before {
  background-image: var(--icon-v-d-accent) !important;
}