/* HyTrans design tokens + fonts (Step 3 patch) */
@font-face {
  font-family: 'Acumin Pro';
  src: url("../fonts/AcuminPro-Light-G8zvs6U.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url("../fonts/AcuminPro-Regular-x25rxYO.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url("../fonts/AcuminPro-Medium-lhcJAYH.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ExtraCondensed family (note: Regular weight is not present in provided font pack) */
@font-face {
  font-family: 'Acumin Pro ExtraCondensed';
  src: url("../fonts/AcuminProExtraCond-Bold--ePTZW4.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro ExtraCondensed';
  src: url("../fonts/AcuminProExtraCond-BoldItalic-u9nmtv3.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro ExtraCondensed';
  src: url("../fonts/AcuminProExtraCond-Semibold-u9Z6DpS.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro ExtraCondensed';
  src: url("../fonts/AcuminProExtraCond-SemiboldItalic-WGRWavS.woff2") format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro ExtraCondensed';
  src: url("../fonts/AcuminProExtraCond-Black-TqpSh56.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro ExtraCondensed';
  src: url("../fonts/AcuminProExtraCond-BlackItalic-ke0fIMJ.woff2") format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --hyt-blue: #14539B;
  --hyt-red:  #D50C1A;
  --hyt-gray: #CCC9C8;
  --hyt-black:#000000;
  --hyt-white:#FFFFFF;

  --hyt-font-base: 'Acumin Pro', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hyt-font-cond: 'Acumin Pro ExtraCondensed', 'Acumin Pro', system-ui, sans-serif;
}

.hyt-page { font-family: var(--hyt-font-base); }

/* Auth hero */
.hyt-auth-hero__media{
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #000;
}
.hyt-auth-hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* ensure we don't tint the photo */
  filter: none;
}
.hyt-auth-hero__overlay{
  position:absolute;
  inset:0;
  /* only top gradient, not full blue tint */
  background: linear-gradient(180deg, rgba(20,83,155,.32) 0%, rgba(20,83,155,0) 45%);
  pointer-events:none;
}
.hyt-auth-hero__logo{
  position:absolute;
  left: 18px;
  top: 16px;
  z-index: 2;
}
.hyt-auth-hero__cut{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 86px;
  background: var(--hyt-white);
  /* V-cutout */
  clip-path: polygon(0 0, 44% 0, 50% 36%, 56% 0, 100% 0, 100% 100%, 0 100%);
}

/* Layout */
.hyt-container{
  width: min(520px, calc(100% - 48px));
  margin: 0 auto;
}
.hyt-auth{
  background: var(--hyt-white);
  padding: 22px 0 28px;
}

/* Title (Bold Italic 40, left aligned, black) */
.hyt-title{
  margin: 0 0 16px;
  font-family: var(--hyt-font-cond);
  font-size: 40px;
  font-style: italic;
  font-weight: 700;
  color: var(--hyt-black);
  text-align: left;
}

/* Labels / inputs */
.hyt-label{
  display:block;
  margin: 14px 0 6px;
  font-family: var(--hyt-font-cond);
  font-weight: 600;
  font-size: 18px;
  color: var(--hyt-black);
}
.hyt-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hyt-blue); /* 1pt */
  outline: none;
  background: #fff;
  color: var(--hyt-black);
  font-family: var(--hyt-font-base); /* best match for "Regular" */
  font-size: 25px;
  line-height: 1.1;
}
.hyt-input::placeholder{ color: rgba(0,0,0,.35); }
.hyt-input:focus{
  box-shadow: 0 0 0 3px rgba(20,83,155,.18);
}

/* Links */
.hyt-link{
  font-family: var(--hyt-font-cond);
  font-weight: 300;
  font-size: 17.5px;
  color: var(--hyt-black);
  text-decoration: none;
}
.hyt-link:hover{ text-decoration: underline; }

/* Buttons */
.hyt-actions{
  display:flex;
  gap: 14px;
  margin-top: 18px;
}
.hyt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  padding: 12px 14px;
  min-height: 46px;
  text-decoration:none;
  cursor:pointer;
  border: 0;
  font-family: var(--hyt-font-cond);
  font-weight: 700; /* Bold */
  font-size: 25px;
  line-height: 1;
}
.hyt-btn--primary{
  background: var(--hyt-red);
  color: var(--hyt-white);
}
.hyt-btn--secondary{
  background: var(--hyt-gray);
  color: var(--hyt-white);
}

/* Basic alert */
.hyt-alert{
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-family: var(--hyt-font-base);
}
.hyt-alert--warning{
  border: 1px solid #F26C21;
  background: rgba(242,108,33,.10);
  color: var(--hyt-black);
}

.hyt-form__row{ margin-top: 10px; }


/* ------------------------------
   Overrides for existing ht-* markup (app.css)
   So we can keep the current partials but still match the design fonts/sizes.
   ------------------------------ */

.ht-page, .ht-mobile { font-family: var(--hyt-font-base); }

.ht-auth__title{
  font-family: var(--hyt-font-cond);
  font-size: 40px;
  font-style: italic;
  font-weight: 700; /* Bold */
  color: var(--hyt-black);
  text-align: left;
}

.ht-input{
  border: 1px solid var(--hyt-blue); /* 1pt */
  border-radius: 14px;
  font-family: var(--hyt-font-base);
  font-size: 25px;
  color: var(--hyt-black);
}

.ht-btn{
  border-radius: 14px;
  font-family: var(--hyt-font-cond);
  font-weight: 700; /* Bold */
  font-size: 25px;
}

.ht-auth-hero__gradient{
  /* reduce the heavy blue tint */
  background: linear-gradient(180deg, rgba(20,83,155,.32) 0%, rgba(20,83,155,0) 45%);
}
/* ------------------------------
   Home (dashboard after login) – Page 2
   ------------------------------ */

.ht-app-hero--home{
  padding: 24px 24px 0;
  align-items: flex-start;
  gap: 18px;
}
.ht-app-hero--home .ht-app-hero__logo{
  height: clamp(56px, 7vw, 120px);
  width: auto;
}
.ht-app-hero--home .ht-app-hero__photo{
  height: 155px;
  max-width: 520px;
  border-radius: 22px;
  background-size: cover;
  background-repeat: no-repeat;
  /* Arrow / pijl uitsparing */
  -webkit-clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%);
}

/* Home tiles */
.ht-home{
  padding: 18px 24px 28px;
}
.ht-home__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px));
  gap: 34px;
  justify-content: center;
  margin-top: 54px;
  margin-bottom: 44px;
}
.ht-home-tile{
  height: 190px;
  background: var(--hyt-blue);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.ht-home-tile__icon{
  font-size: 70px;
  color: #fff;
  line-height: 1;
}
.ht-home-tile__img{
  width: 78px;
  height: 78px;
  display: block;
  filter: brightness(0) invert(1); /* maak logo wit */
}
.ht-home-tile__label{
  font-family: var(--hyt-font-cond);
  font-weight: 700; /* Bold */
  font-size: 25px;
  color: #fff;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* Get in touch outline button */
.ht-btn-outline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 26px;
  border: 1px solid var(--hyt-red); /* 1pt */
  background: transparent;
  color: var(--hyt-black);
  font-family: var(--hyt-font-cond);
  font-weight: 700;
  font-size: 25px;
  text-decoration: none;
}