/*
Theme Name: PONCK child
Template: Impreza
Version: 1.0
Author:	PONCK | The Web Company
Theme URI: https://ponck.nl/
Author URI: https://ponck.nl/
*/

/*Add your own styles here:*/

/* Luxe arrow-right knop */
.btn-arrow-right {
  position: relative;
  overflow: hidden;
  padding-right: 2.1em !important; /* pijl dichter bij tekst */
  transition: letter-spacing 1s ease, color 0.8s ease, background-color 0.8s ease;
  letter-spacing: 0.015em; /* subtiele basisafstand */
}

/* Font Awesome pijl */
.btn-arrow-right::after {
  content: "\f178"; /* long arrow right */
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 1.0em; /* dichter bij tekst */
  transform: translateY(-50%) translateX(0);
  display: inline-block;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease;
  opacity: 0.9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform;
}

/* Hover: rustige, elegante beweging */
.btn-arrow-right:hover,
.btn-arrow-right:focus-visible {
  letter-spacing: 0.01em; /* minimale spreiding voor luxe effect */
}

.btn-arrow-right:hover::after,
.btn-arrow-right:focus-visible::after {
  transform: translateY(-50%) translateX(6px); /* kleinere, trage slide */
  opacity: 1;
}

/* Respecteer voorkeuren voor minder animatie */
@media (prefers-reduced-motion: reduce) {
  .btn-arrow-right,
  .btn-arrow-right::after {
    transition: none !important;
  }
}

/* == Logo header transformeren naar tekst == */
/* === PONCK Logo → Tekst morph (volledige CSS) =========================== */
.ponck-logo-morph {
  position: relative;
  display: inline-block;
  line-height: 0;
}

/* Container fungeert als “ankerpunt” voor morph */
.ponck-logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 120px;                 /* logo-hoogte */
  overflow: hidden;
  width: var(--logo-w, auto);    /* startbreedte = logobreedte (via JS gezet) */
  transition: width .8s ease;    /* breedte animeren van logo → tekst */
}

/* LAAG 1: het logo (img) */
.ponck-logo-img {
  position: relative;
  display: block;
  height: 100% !important;
  width: auto;
  object-fit: contain;
  transform-origin: center;
  transition: transform .8s ease, opacity .8s ease, filter .8s ease;
  will-change: transform, opacity, filter;
  z-index: 2;                    /* boven de tekst in beginstaat */
  pointer-events: none;
}

/* wrapper mag boven alles uitsteken */
.ponck-logo-morph {
  position: relative;
  z-index: 20;
}

/* container zelf: géén padding meer, logo blijft groot */
.ponck-logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 120px;                 /* jouw logobreedte/hoogte blijft leidend */
  overflow: visible;
  width: var(--logo-w, auto);
  transform: translateY(14px);   /* laat geheel iets onder de header uitsteken */
  margin-bottom: -14px;          /* compenseert de verschuiving */
  transition:
    width .8s ease,
    transform .3s ease;
}

/* === Label-blok achter het logo ===================== */
.ponck-logo-link::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* rechthoek rond het logo, iets groter dan het logo zelf */
  inset: -16px -24px -20px -24px; 
  /* top negatief → bovenkant “loopt uit het scherm / header” */
  background: #ffffff;
  border-radius: 0px;                        /* jouw gewenste afronding */
  box-shadow: 0 10px 25px rgba(0,0,0,0.16);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}

/* --- mobiele correctie --- */
@media (max-width: 950px) {
  .ponck-logo-morph {
    margin-left: 1rem; /* verplaatst het hele blok (logo + label) */
  }

  .ponck-logo-link {
    transform: translateY(10px);
    margin-bottom: -10px;
  }

  .ponck-logo-link::before {
    inset: -14px -24px -18px -24px; /* behoudt originele label-afmetingen */
  }
}

/* zorg dat Impreza niet alles afkapt */
.l-header .w-logo {
  overflow: visible;
}

/* === Morph state: label weghalen ==================== */
body.header-scrolled .ponck-logo-link {
  transform: translateY(0);
  margin-bottom: 0;
}

body.header-scrolled .ponck-logo-link::before {
  opacity: 0;
  transform: translateY(-10px);
  box-shadow: none;
}


/* LAAG 2: de tekst */
.ponck-logo-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Champagne & Limousines', sans-serif;
  font-size: 42px;               /* afstemmen op jouw logo */
  letter-spacing: .3px;
  color: #2b3463;                /* jouw gewenste kleur */
  white-space: nowrap;
  opacity: 0;
  transform: scale(.9) translateY(5px);
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
  z-index: 1;
}

/* === Scroll state (class komt op <body> via JS) ========================== */
body.header-scrolled .ponck-logo-link {
  width: var(--text-w, var(--logo-w)); /* naar tekstbreedte schakelen */
}

body.header-scrolled .ponck-logo-img {
  opacity: 0;
  transform: scale(.85) translateY(-10px);
  filter: blur(.5px);
}

body.header-scrolled .ponck-logo-text {
  opacity: 1;
  transform: scale(1) translateY(0);
  z-index: 3;
}

/* === Impreza compat: voorkom dat thema je heights forceert =============== */
.l-header .w-logo img { height: auto; }

/* === Responsive tuning ==================================================== */
@media (max-width: 1024px) {
  .ponck-logo-link { height: 80px; }
  .ponck-logo-text { font-size: 36px; }
}
@media (max-width: 600px) {
  .ponck-logo-link { height: 64px; }
  .ponck-logo-text { font-size: 30px; }
}

/* Na elke h1 een liggend streepje als detail ====*/
/* Basis voor alle H1's overal */
h1 {
  position: relative;
  padding-bottom: 1rem !important;
  margin-bottom: 1.8rem !important;
  line-height: 1em !important;
  overflow: hidden;
}

/* Alleen de streepstijl */
h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background-color: #c1a172;
  transition: width 1s ease;
}

h1.loaded::after {
  width: 110px;
}

@media (max-width: 768px) {
  h1.loaded::after {
    width: 70px; /* korter streepje op tablets en mobiel */
  }
}

/* contact icons kleur + grootte aanpassen */
.w-contacts-item:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #c1a172 !important;
  font-size: 14px;
   box-shadow: none !important; /* schaduw uitgeschakeld */
}