/* ============================================================
   CHEF DANIE
   CHEF PLACEMENT
============================================================ */


/* ============================================================
   PAGE
============================================================ */

.placement-page {
  background: var(--cream-light);
  color: var(--ink);
}


/* ============================================================
   HEADER
============================================================ */

.placement-page .site-header {
  color: var(--cream);

  background: rgba(7, 16, 12, 0.97);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}


.placement-page .site-header.scrolled {
  background: rgba(7, 16, 12, 0.97);
}


.placement-page .brand {
  color: var(--cream);
}


.placement-page .main-nav a {
  color: rgba(248, 245, 239, 0.78);
}


.placement-page .main-nav a:hover {
  color: var(--cream);
}


.placement-page .main-nav .nav-active {
  color: var(--gold-light);
}


.placement-page .main-nav .nav-active::after {
  width: 100%;
}


.placement-page .header-cta {
  color: var(--cream);

  border-color: rgba(213, 192, 150, 0.7);
}


/* ============================================================
   MAIN
============================================================ */

.placement-main {
  min-height: 100vh;

  padding:
    190px
    var(--page-padding)
    130px;

  background: var(--cream-light);
}


/* ============================================================
   INTRO
============================================================ */

.placement-intro {
  width: min(920px, 100%);

  margin: 0 auto 70px;

  text-align: center;
}


.placement-kicker {
  margin: 0 0 25px;

  color: #707a67;

  font-size: 8px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.25em;
}


.placement-intro h1 {
  margin: 0;

  font-family: var(--serif);

  font-size: clamp(62px, 6vw, 100px);
  font-weight: 400;

  line-height: 0.95;

  letter-spacing: -0.05em;
}


.placement-subtitle {
  width: min(510px, 100%);

  margin: 28px auto 0;

  color: rgba(17, 19, 15, 0.58);

  font-size: 12px;
  font-weight: 300;

  line-height: 1.8;
}


/* ============================================================
   MAIN GREEN BOX
============================================================ */

.placement-box {
  width: min(1120px, 100%);

  margin: 0 auto;

  background: var(--green-rich);

  color: var(--cream);

  border: 1px solid rgba(190, 164, 109, 0.28);
}


/* ============================================================
   TABS
============================================================ */

.placement-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;

  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}


.placement-tab {
  position: relative;

  min-height: 76px;

  padding: 0 30px;

  background: transparent;

  color: rgba(242, 238, 229, 0.48);

  border: 0;

  cursor: pointer;

  font-family: var(--serif);

  font-size: 18px;
  font-weight: 400;

  transition:
    color 0.3s ease,
    background 0.3s ease;
}


.placement-tab:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}


.placement-tab::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -1px;

  width: 0;
  height: 1px;

  background: var(--gold-light);

  transform: translateX(-50%);

  transition: width 0.3s ease;
}


.placement-tab:hover {
  color: var(--cream);
}


.placement-tab.active {
  color: var(--cream);
}


.placement-tab.active::after {
  width: 80px;
}


/* ============================================================
   PANELS
============================================================ */

.placement-panel {
  padding: 65px 70px 72px;
}


.placement-panel[hidden] {
  display: none;
}


.placement-form-intro {
  margin-bottom: 58px;
}


.placement-form-intro h2 {
  margin: 0;

  font-family: var(--serif);

  font-size: clamp(38px, 4vw, 58px);
  font-weight: 400;

  line-height: 1;

  letter-spacing: -0.035em;
}


.placement-form-intro p {
  width: min(470px, 100%);

  margin: 17px 0 0;

  color: rgba(242, 238, 229, 0.55);

  font-size: 11px;
  font-weight: 300;

  line-height: 1.75;
}


/* ============================================================
   FORM GRID
============================================================ */

.placement-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  column-gap: 50px;
  row-gap: 38px;
}


.placement-field {
  position: relative;
}


.placement-field-full {
  grid-column: 1 / -1;
}


/* ============================================================
   LABELS
============================================================ */

.placement-field label {
  display: block;

  margin-bottom: 10px;

  color: rgba(242, 238, 229, 0.48);

  font-size: 7px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.17em;
}


/* ============================================================
   INPUTS
============================================================ */

.placement-field input,
.placement-field select,
.placement-field textarea {
  width: 100%;

  padding: 9px 0 14px;

  background: transparent;

  color: var(--cream);

  border: 0;
  border-bottom: 1px solid rgba(242, 238, 229, 0.28);

  border-radius: 0;

  outline: none;

  font-family: var(--serif);

  font-size: 17px;
  font-weight: 400;

  transition: border-color 0.25s ease;
}


.placement-field input:focus,
.placement-field select:focus,
.placement-field textarea:focus {
  border-bottom-color: var(--gold-light);
}


.placement-field input::placeholder,
.placement-field textarea::placeholder {
  color: rgba(242, 238, 229, 0.24);
}


.placement-field textarea {
  min-height: 125px;

  resize: vertical;

  line-height: 1.55;
}


/* ============================================================
   SELECT
============================================================ */

.placement-field select {
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  font-family: var(--sans);

  font-size: 12px;

  color-scheme: dark;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--gold-light) 50%
    ),
    linear-gradient(
      135deg,
      var(--gold-light) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 7px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  padding-right: 30px;
}


.placement-field select option {
  background: var(--green-rich);

  color: var(--cream);
}


/* ============================================================
   DATE
============================================================ */

.placement-field input[type="date"] {
  color-scheme: dark;

  font-family: var(--sans);

  font-size: 12px;
}


/* ============================================================
   FILE UPLOAD
============================================================ */

.file-upload {
  min-height: 64px;

  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  border-bottom: 1px solid rgba(242, 238, 229, 0.28);

  cursor: pointer;
}


.file-upload input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  overflow: hidden;
}


.file-upload > span:first-of-type {
  color: rgba(242, 238, 229, 0.48);

  font-family: var(--serif);

  font-size: 15px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.file-upload-action {
  flex: 0 0 auto;

  color: var(--gold-light);

  font-size: 7px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.17em;
}


/* ============================================================
   SUBMIT
============================================================ */

.placement-submit-row {
  grid-column: 1 / -1;

  margin-top: 25px;

  padding-top: 28px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  border-top: 1px solid rgba(242, 238, 229, 0.15);
}


.placement-submit-row p {
  max-width: 360px;

  margin: 0;

  color: rgba(242, 238, 229, 0.39);

  font-size: 8px;

  line-height: 1.6;
}


.placement-submit {
  min-width: 225px;
  height: 56px;

  padding: 0 23px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--cream);

  color: var(--green-deep);

  border: 1px solid var(--cream);

  cursor: pointer;

  font-size: 8px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.17em;

  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}


.placement-submit span:last-child {
  color: var(--green-rich);

  font-size: 18px;

  transition: transform 0.3s ease;
}


.placement-submit:hover {
  background: var(--gold-light);

  border-color: var(--gold-light);
}


.placement-submit:hover span:last-child {
  transform: translateX(5px);
}


/* ============================================================
   STATUS
============================================================ */

.placement-status {
  grid-column: 1 / -1;

  min-height: 18px;

  color: var(--gold-light);

  font-size: 9px;

  line-height: 1.5;
}


/* ============================================================
   FOOTER
============================================================ */

.placement-page .footer {
  background: #09120e;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 760px) {


  /* HEADER */

  .placement-page .main-nav {
    background: var(--green-deep);
  }


  /* PAGE */

  .placement-main {
    padding:
      140px
      20px
      80px;
  }


  /* INTRO */

  .placement-intro {
    margin-bottom: 48px;
  }


  .placement-intro h1 {
    font-size: 57px;
  }


  .placement-subtitle {
    width: 300px;

    font-size: 11px;
  }


  /* BOX */

  .placement-box {
    width: 100%;
  }


  /* TABS */

  .placement-tab {
    min-height: 66px;

    padding: 0 15px;

    font-size: 15px;
  }


  /* PANEL */

  .placement-panel {
    padding: 45px 22px 50px;
  }


  .placement-form-intro {
    margin-bottom: 44px;
  }


  .placement-form-intro h2 {
    font-size: 40px;
  }


  /* FORM */

  .placement-form {
    grid-template-columns: 1fr;

    gap: 31px;
  }


  .placement-field-full {
    grid-column: auto;
  }


  /* SUBMIT */

  .placement-submit-row {
    grid-column: auto;

    margin-top: 15px;

    flex-direction: column;
    align-items: stretch;
  }


  .placement-submit {
    width: 100%;
  }


  .placement-status {
    grid-column: auto;
  }

}