/* ==========================================================================
   Landingspagina Kantoorinrichting Advies
   Wordt uitsluitend op /nl/kantoorinrichting-advies/ en
   /fr/conseils-en-amenagement-de-bureaux/ ingeladen - zie
   snippets/head.rain. Alle selectors staan onder .advies-page zodat er
   niets uitlekt naar de rest van de shop.
   ========================================================================== */

.advies-page {
  /* Kleuren uit het theme (style.css): --accent-text is het goud voor tekst
     en knopvlakken (4,8:1 op wit), --accent alleen voor randen en decoratie
     (2,87:1, te licht voor tekst). */
  --a-black: var(--black, #1f1f1f);
  --a-dark: var(--dark_grey, #282828);
  --a-gold: #a69955;
  --a-gold-text: var(--accent-text, #7d7340);
  --a-sand: #f7f5ef;
  --a-grey: #f7f7f7;
  --a-muted: #5f5f5f;
  --a-line: rgba(31, 31, 31, .1);
  --a-section: var(--generalSpacing, 80px);
  --a-gutter: 30px;
  --a-max: 1560px;
  --a-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%237d7340' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color: var(--a-black);
  font-size: 16px;
  line-height: 1.75;
}

/* Layout helpers
   ========================================================================== */
.advies-inner {
  width: 100%;
  max-width: var(--a-max);
  margin: 0 auto;
  padding-left: var(--a-gutter);
  padding-right: var(--a-gutter);
}

.advies-inner--narrow {
  max-width: 960px;
}

.advies-section {
  padding-top: var(--a-section);
  padding-bottom: var(--a-section);
}

/* Ankerdoelen krijgen focus na het scrollen (zie het script in
   advies-textpage.rain); alleen bij toetsenbordgebruik een focusrand. */
.advies-page [tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0;
}

.advies-breadcrumbs .breadcrumbs {
  margin: 20px 0;
}

/* Kop en voet boven en onder een raster */
.advies-head {
  max-width: 780px;
  margin: 0 auto 50px;
  text-align: center;
}

.advies-foot {
  margin-top: 50px;
  text-align: center;
}

/* Rich text uit textpage.content
   ========================================================================== */
.advies-rte > *:first-child {
  margin-top: 0;
}

.advies-rte > *:last-child {
  margin-bottom: 0;
}

.advies-rte p {
  margin: 0 0 1.1em;
}

.advies-rte h1,
.advies-rte h2,
.advies-rte h3,
.advies-rte h4 {
  margin: 0 0 .55em;
  color: inherit;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}

.advies-rte h1 {
  font-size: 44px;
}

.advies-rte h2 {
  font-size: 34px;
}

.advies-rte h3 {
  font-size: 20px;
}

.advies-rte h4 {
  font-size: 17px;
}

.advies-rte strong,
.advies-rte b {
  font-weight: 700;
}

.advies-rte a {
  color: var(--a-gold-text);
  text-decoration: underline;
}

.advies-rte a:hover {
  text-decoration: none;
}

/* Een lijst is op deze pagina altijd een rij vinkjes. */
.advies-rte ul {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
}

.advies-rte ul li {
  position: relative;
  margin-bottom: .55em;
  padding-left: 34px;
}

.advies-rte ul li:before {
  content: '';
  position: absolute;
  top: .2em;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(166, 153, 85, .16) var(--a-check) center / 16px no-repeat;
}

/* Knoppen: een alinea met alleen een link (zie snippets/advies-macros.rain).
   Volgt de .btn van het theme. Een tweede knop direct erna wordt een
   omlijnde variant en komt ernaast te staan. */
.advies-rte .advies-button {
  display: inline-block;
  margin: 10px 12px 0 0;
  vertical-align: top;
}

.advies-rte .advies-button > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 10px 35px;
  border: 1px solid var(--a-gold-text);
  background: var(--a-gold-text);
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}

.advies-rte .advies-button > a:hover,
.advies-rte .advies-button > a:focus {
  border-color: var(--a-black);
  background: var(--a-black);
  color: #fff;
}

.advies-rte .advies-button + .advies-button > a {
  border-color: var(--a-black);
  background: transparent;
  color: var(--a-black);
}

.advies-rte .advies-button + .advies-button > a:hover,
.advies-rte .advies-button + .advies-button > a:focus {
  background: var(--a-black);
  color: #fff;
}

/* Hero
   ========================================================================== */
.advies-hero {
  position: relative;
  background: var(--a-sand);
  overflow: hidden;
}

.advies-hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
}

.advies-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.advies-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 580px;
  padding: 80px 0;
}

.advies-hero--media .advies-hero__content {
  width: 50%;
  padding-right: 70px;
}

.advies-hero__content p {
  font-size: 18px;
}

/* De vinkjes in de hero in twee kolommen */
.advies-hero__content ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  margin: 10px 0 24px;
}

.advies-hero__content ul li {
  margin: 0;
  font-weight: 700;
}

/* Intro
   ========================================================================== */
.advies-intro {
  text-align: center;
}

.advies-intro .advies-rte p {
  font-size: 18px;
}

/* Stappen
   ========================================================================== */
.advies-steps__list {
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advies-step {
  position: relative;
  flex: 1 1 0;
  text-align: center;
}

.advies-step__circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  margin: 0 auto 30px;
  border: 2px solid var(--a-gold);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 8px var(--a-sand);
  line-height: 1;
}

.advies-step__label {
  color: var(--a-gold-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.advies-step__number {
  margin-top: 6px;
  font-size: 44px;
  font-weight: 700;
}

/* De eerste stap is waar de bezoeker begint: die staat vol in het goud. */
.advies-step:first-child .advies-step__circle {
  border-color: var(--a-gold-text);
  background: var(--a-gold-text);
  color: #fff;
}

.advies-step:first-child .advies-step__label {
  color: #fff;
}

.advies-step__body {
  max-width: 320px;
  margin: 0 auto;
  color: var(--a-muted);
}

.advies-step__body h3,
.advies-step__body h4 {
  color: var(--a-black);
}

/* Pijl naar de volgende stap: een stippellijn (:before) met een punt
   (:after), van rand tot rand tussen twee cirkels. De maten rekenen met de
   cirkel van 128px, 14px witruimte en de gap van 40px tussen de stappen. */
.advies-step:not(:last-child):before,
.advies-step:not(:last-child):after {
  content: '';
  position: absolute;
}

.advies-step:not(:last-child):before {
  top: 63px;
  left: calc(50% + 78px);
  width: calc(100% - 116px);
  border-top: 2px dashed var(--a-gold);
}

.advies-step:not(:last-child):after {
  top: 58px;
  left: calc(150% - 50px);
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--a-gold);
  border-right: 2px solid var(--a-gold);
  transform: rotate(45deg);
}

/* Adviesformulier
   ========================================================================== */
.advies-form {
  background: var(--a-sand);
}

.advies-form__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: center;
}

.advies-form__card {
  padding: 50px;
  border-top: 4px solid var(--a-gold);
  background: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .07);
}

.advies-form__intro {
  margin-bottom: 30px;
}

/* Het formulier komt uit snippets/form-advice.rain en is gemaakt om
   gecentreerd op 70% breedte te staan. Hier vult het de kaart. */
.advies-form__card .advice-form {
  max-width: 100%;
  margin: 0;
  padding-top: 0;
}

/* Beeld + tekst
   ========================================================================== */
.advies-media__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.advies-media__figure {
  margin: 0;
}

.advies-media__figure img {
  display: block;
  width: 100%;
  height: auto;
}

section.advies-media:nth-of-type(even) .advies-media__figure {
  order: 2;
}

/* Kaarten
   ========================================================================== */
.advies-cards {
  background: var(--a-grey);
}

.advies-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.advies-card {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.advies-card__body {
  flex: 1;
  padding: 34px 32px;
  color: var(--a-muted);
}

.advies-card__body h3,
.advies-card__body h4 {
  color: var(--a-black);
  font-size: 18px;
}

/* Een kaart zonder beeld krijgt een vinkje als beeldmerk. */
.advies-card:not(.advies-card--media) .advies-card__body:before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: rgba(166, 153, 85, .16) var(--a-check) center / 26px no-repeat;
}

.advies-card__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 220px;
  margin: 0;
  padding: 24px;
  border-bottom: 1px solid var(--a-line);
}

/* Productbeelden op wit: in hun geheel tonen, niet bijsnijden. */
.advies-card__figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.advies-card--media .advies-card__body {
  text-align: center;
}

/* In een kaart is een losse link een tekstlink met pijl, geen knop. */
.advies-card .advies-rte .advies-button {
  display: block;
  margin: 0;
}

.advies-card .advies-rte .advies-button > a,
.advies-card .advies-rte .advies-button + .advies-button > a {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--a-gold-text);
  font-weight: 700;
  letter-spacing: inherit;
  text-transform: none;
}

.advies-card .advies-rte .advies-button > a:after {
  content: "\eb48";
  margin-left: 4px;
  font-family: 'boxicons';
  font-size: 1.3em;
  font-weight: normal;
  transition: transform .15s ease-in-out;
}

.advies-card .advies-rte .advies-button > a:hover:after {
  transform: translateX(5px);
}

/* Projecten
   ========================================================================== */
.advies-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.advies-project {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  background: #fff;
  color: var(--a-black);
  text-decoration: none;
  transition: box-shadow .2s ease-in-out;
}

.advies-project:hover,
.advies-project:focus {
  color: var(--a-black);
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
}

.advies-project__figure {
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: var(--a-grey);
}

.advies-project__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease-in-out;
}

.advies-project:hover .advies-project__figure img {
  transform: scale(1.04);
}

.advies-project__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 28px 30px;
}

.advies-project__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.advies-project__text {
  display: -webkit-box;
  margin: 0 0 18px;
  overflow: hidden;
  color: var(--a-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.advies-project .text-link {
  margin-top: auto;
}

/* Veelgestelde vragen
   ========================================================================== */
.advies-questions {
  background: var(--a-sand);
}

.advies-questions__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.advies-question {
  border: 1px solid var(--a-line);
  background: #fff;
  transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.advies-question.is-open {
  border-color: var(--a-gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .06);
}

.advies-question__heading {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.advies-question__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 24px 28px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--a-black);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.advies-question__toggle:focus-visible {
  outline: 2px solid var(--a-gold-text);
  outline-offset: -2px;
}

.advies-question__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  transition: color .2s ease-in-out;
}

.advies-question__toggle:hover .advies-question__title {
  color: var(--a-gold-text);
}

/* Plus die een min wordt, in een gouden cirkel die bij open vol kleurt */
.advies-question__icon {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--a-gold);
  border-radius: 50%;
  transition: background .2s ease-in-out, border-color .2s ease-in-out;
}

.advies-question__icon::before,
.advies-question__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--a-gold-text);
  transition: transform .25s ease-in-out, background .2s ease-in-out;
}

.advies-question__icon::after {
  transform: rotate(90deg);
}

.advies-question.is-open .advies-question__icon {
  border-color: var(--a-gold-text);
  background: var(--a-gold-text);
}

.advies-question.is-open .advies-question__icon::before,
.advies-question.is-open .advies-question__icon::after {
  background: #fff;
}

.advies-question.is-open .advies-question__icon::after {
  transform: rotate(0deg);
}

/* Het openschuiven gebeurt in het script in snippets/advies-textpage.rain:
   dat zet tijdelijk een hoogte in pixels, waarna deze transitie het werk doet.
   De padding zit op __text, zodat hoogte 0 ook echt niets laat zien. */
.advies-question__body {
  overflow: hidden;
  transition: height .34s cubic-bezier(.33, 0, .2, 1), opacity .26s ease-in-out;
}

.advies-question__text {
  padding: 0 88px 26px 28px;
  color: var(--a-muted);
}

/* Afsluitende CTA
   ========================================================================== */
.advies-cta {
  background: var(--a-dark);
  color: rgba(255, 255, 255, .82);
}

.advies-cta__grid {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.advies-cta__grid--aside {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: center;
  max-width: none;
  text-align: left;
}

.advies-cta .advies-rte h2,
.advies-cta .advies-rte h3,
.advies-cta .advies-rte h4 {
  color: #fff;
}

.advies-cta .advies-rte a {
  color: #fff;
}

.advies-cta .advies-rte .advies-button > a {
  border-color: var(--a-gold);
  background: var(--a-gold);
  color: var(--a-black);
}

.advies-cta .advies-rte .advies-button > a:hover,
.advies-cta .advies-rte .advies-button > a:focus,
.advies-cta .advies-rte .advies-button + .advies-button > a:hover,
.advies-cta .advies-rte .advies-button + .advies-button > a:focus {
  border-color: #fff;
  background: #fff;
  color: var(--a-black);
}

.advies-cta .advies-rte .advies-button + .advies-button > a {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

.advies-cta__aside {
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
}

/* Uitzondering op de .advies-page-scope: de footer staat buiten de pagina.
   Die heeft standaard een witte marge bovenaan, wat een witte balk geeft
   tussen het donkere slotblok en de footer. Dit bestand wordt alleen op
   deze pagina ingeladen, dus geen andere pagina raakt dit. */
#footer.block-margin-top {
  margin-top: 0;
}

/* Responsive
   ========================================================================== */
@media (max-width: 1199px) {
  .advies-page {
    font-size: 15px;
  }

  .advies-rte h1 {
    font-size: 38px;
  }

  .advies-rte h2 {
    font-size: 30px;
  }

  .advies-hero__content p,
  .advies-intro .advies-rte p {
    font-size: 17px;
  }

  .advies-form__grid,
  .advies-media__grid,
  .advies-cta__grid--aside {
    gap: 50px;
  }

  .advies-form__card {
    padding: 40px 34px;
  }

  .advies-steps__list {
    gap: 24px;
  }

  /* Pijl opnieuw berekend voor de gap van 24px */
  .advies-step:not(:last-child):before {
    width: calc(100% - 132px);
  }

  .advies-step:not(:last-child):after {
    left: calc(150% - 66px);
  }
}

@media (max-width: 991px) {
  .advies-rte h1 {
    font-size: 32px;
  }

  .advies-rte h2 {
    font-size: 27px;
  }

  /* Hero: beeld boven, tekst eronder */
  .advies-hero__media {
    position: static;
    width: auto;
    height: 340px;
  }

  .advies-hero__content,
  .advies-hero--media .advies-hero__content {
    width: auto;
    min-height: 0;
    padding: 40px 0 50px;
  }

  /* Stappen onder elkaar: cirkel links, tekst rechts, pijl omlaag */
  .advies-steps__list {
    flex-direction: column;
    gap: 36px;
    max-width: 640px;
    margin: 0 auto;
  }

  .advies-step {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 24px;
    align-items: start;
    text-align: left;
  }

  .advies-step__circle {
    width: 88px;
    height: 88px;
    margin: 0;
    box-shadow: 0 0 0 6px var(--a-sand);
  }

  .advies-step__label {
    font-size: 10px;
  }

  .advies-step__number {
    margin-top: 4px;
    font-size: 30px;
  }

  .advies-step__body {
    max-width: none;
    margin: 0;
    padding-top: 12px;
  }

  .advies-step:not(:last-child):before {
    top: 104px;
    left: 43px;
    width: 0;
    height: calc(100% - 82px);
    border-top: 0;
    border-left: 2px dashed var(--a-gold);
  }

  .advies-step:not(:last-child):after {
    top: calc(100% + 6px);
    left: 38px;
    transform: rotate(135deg);
  }

  .advies-form__grid,
  .advies-media__grid,
  .advies-cta__grid--aside {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  section.advies-media:nth-of-type(even) .advies-media__figure {
    order: 0;
  }

  .advies-cards__grid,
  .advies-projects__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .advies-head {
    margin-bottom: 36px;
  }

  .advies-foot {
    margin-top: 36px;
  }
}

@media (max-width: 767px) {
  .advies-page {
    --a-gutter: 15px;
  }

  .advies-rte h1 {
    font-size: 28px;
  }

  .advies-rte h2 {
    font-size: 24px;
  }

  .advies-hero__media {
    height: 240px;
  }

  .advies-hero__content p,
  .advies-intro .advies-rte p {
    font-size: 16px;
  }

  .advies-hero__content ul {
    grid-template-columns: 1fr;
  }

  /* Knoppen op mobiel over de volle breedte en onder elkaar */
  .advies-rte .advies-button {
    display: block;
    margin-right: 0;
  }

  .advies-rte .advies-button > a {
    display: flex;
    width: 100%;
    min-height: 50px;
    padding: 10px 20px;
  }

  .advies-card .advies-rte .advies-button > a,
  .advies-card .advies-rte .advies-button + .advies-button > a {
    display: inline-flex;
    width: auto;
  }

  .advies-form__card {
    padding: 30px 20px;
  }

  .advies-cards__grid,
  .advies-projects__grid {
    grid-template-columns: 1fr;
  }

  .advies-card__body {
    padding: 28px 24px;
  }

  .advies-cta__aside {
    padding: 28px 24px;
  }

  .advies-question__toggle {
    gap: 16px;
    padding: 20px;
  }

  .advies-question__title {
    font-size: 16px;
  }

  .advies-question__icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .advies-question__text {
    padding: 0 20px 22px;
  }
}