/* DIAVENE layout fixes (loaded for every theme) */

/* About: image on the left, the whole text block (kicker, title, intro, paragraphs) on the right */
@media (min-width: 901px){
  #about > .container{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;align-items:start}
  #about > .container > .text-center{grid-column:2;grid-row:1;text-align:start!important;margin:0!important;align-self:end}
  #about > .container > .text-center .section-title,
  #about > .container > .text-center .section-subtitle{margin-left:0!important;margin-right:0!important;max-width:none!important;text-align:start!important}
  #about > .container > .text-center .section-title{margin-top:6px!important}
  #about > .container > .text-center .section-subtitle{margin-bottom:22px!important}
  #about > .container > .about-grid{display:contents}
  #about > .container > .about-grid > div:first-child{grid-column:1;grid-row:1 / span 2;align-self:center}
  #about > .container > .about-grid > div:last-child{grid-column:2;grid-row:2;align-self:start}
  #about > .container > *:not(.text-center):not(.about-grid){grid-column:1 / -1}
}

/* About on phones/tablets: image first, then text, full width */
@media (max-width: 900px){
  #about .about-grid{grid-template-columns:1fr!important;gap:24px!important}
  #about .about-grid img{max-width:520px;display:block;margin:0 auto}
}

/* Header on desktop:
   row 1 = logo (left) + quote buttons + language switcher (right)
   row 2 = section links spread across the full width */
@media (min-width: 993px){
  header > .container{flex-wrap:wrap!important;row-gap:12px!important;align-items:center!important;justify-content:flex-start!important}
  header .nav-menu{display:contents!important}
  header .logo{order:0;margin-right:auto!important}
  header .nav-menu > a.nav-builder-highlight{order:1;margin-left:14px!important;flex:0 0 auto!important}
  header .nav-menu > .language-selector{order:2;margin-left:16px}
  header > .container::after{content:"";order:3;flex-basis:100%;height:0}
  .hero{padding-top:150px!important}
  header{padding:14px 0 10px!important}
  header .logo{height:auto!important;min-height:0!important;padding:0!important}
  header .logo img{width:150px!important;height:46px!important;max-height:none!important;object-fit:cover!important;object-position:center!important}
  header .nav-menu > a.nav-builder-highlight{padding:8px 18px!important;min-height:0!important;line-height:1.2!important;font-size:11px!important}
  header .nav-menu > .language-selector .lang-btn{padding:6px 12px!important}
  header .nav-menu > a:not(.nav-builder-highlight){order:4;flex:1 1 auto;text-align:center;
    font-size:15px!important;letter-spacing:.08em!important;padding:4px 6px 6px!important;margin:0!important;line-height:1.2!important;white-space:nowrap}
}
@media (min-width: 993px) and (max-width: 1300px){
  header .nav-menu > a:not(.nav-builder-highlight){font-size:12.5px!important;letter-spacing:.02em!important;padding:4px 3px 6px!important}
}
@media (min-width: 993px) and (max-width: 1080px){
  header .nav-menu > a:not(.nav-builder-highlight){font-size:11.5px!important;letter-spacing:0!important}
}

/* 901–992px: the original site showed the mobile menu permanently open here.
   Use the hamburger menu like on phones, with light colours. */
@media (min-width: 901px) and (max-width: 992px){
  .hamburger-btn{display:block!important}
  header .nav-menu:not(.show){display:none!important}
  header .nav-menu.show{display:flex!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #e7e2d9!important;box-shadow:0 18px 30px rgba(35,42,52,.10)!important}
  header .nav-menu a:not(.nav-builder-highlight){color:#20242d!important}
}