/**
 * YOUNG.Hospitality — styles for the parts the backend added.
 *
 * Loaded after the site stylesheet, and written to look like it was always
 * there: same variables, same rhythm, same restraint. Nothing here restyles the
 * original design; it only dresses the elements that did not exist before —
 * form states, the consent checkbox, the cookie notice, and the long-form pages
 * the server renders (privacy, brand detail, news detail).
 */

/* -------------------------------------------------------------- honeypot -- */
/* Present for a bot, invisible and unreachable for a person. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------- form details -- */

.field .opt {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
  color: rgba(26, 19, 16, .4);
  margin-left: 6px;
}

.field input[type="file"] {
  font-size: 13.5px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: rgba(26, 19, 16, .7);
}
.field input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line-2);
  color: var(--cocoa);
  padding: 9px 15px;
  margin-right: 14px;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.field.consent label.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(26, 19, 16, .72);
  cursor: pointer;
}
.field.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid var(--line-2);
  background: none;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.field.consent input[type="checkbox"]:checked {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f3ede3' stroke-width='2.2'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") no-repeat center / 12px;
  border-color: var(--ink);
}
.field.consent a { text-decoration: underline; text-underline-offset: 3px; }

/* validation */
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: #8a2c2c; }
.field.has-error label { color: #8a2c2c; }
.field-error {
  font-size: 12.5px;
  color: #8a2c2c;
  letter-spacing: .01em;
  margin-top: -2px;
}

/* status lines under the contact form and in the footer */
#contactStatus { display: none; transition: color .3s; }
#contactStatus.is-ok { color: var(--cocoa); }
#contactStatus.is-error { color: #8a2c2c; }
#contactStatus.is-busy { color: rgba(26, 19, 16, .45); }

.nl-status { transition: color .3s; }
.nl-status.is-ok { color: var(--tan); }
.nl-status.is-error { color: #d99b9b; }

.sub input:disabled, .sub button:disabled { opacity: .5; cursor: default; }
.sub button { transition: color .3s; }
.sub button:hover:not(:disabled) { color: var(--cream); }

/* -------------------------------------------------------------- long form -- */
/* Legal texts, brand stories and full news articles. */

.prose {
  max-width: 74ch;
  font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.75;
  color: rgba(26, 19, 16, .82);
}
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose .lead {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.6em;
}
.prose h3 {
  font-family: var(--body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cocoa);
  margin: 2.6em 0 1em;
  padding-top: 1.5em;
  border-top: 1px solid var(--line);
}
.prose h4 {
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  margin: 2em 0 .7em;
  color: var(--ink);
}
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.1em; }
.prose li { margin-bottom: .6em; padding-left: .3em; }
.prose li::marker { color: var(--tan); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tan); }
.prose a:hover { text-decoration-color: var(--cocoa); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: rgba(121, 81, 60, .09);
  padding: 2px 6px;
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: .95em; }
.prose th, .prose td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cocoa); font-weight: 500; }

/* cards used as links (news detail, related brands, the 404 grid) */
a.card, a.pillar { display: block; color: inherit; }
a.pillar { text-decoration: none; transition: transform .5s var(--ease), background .5s var(--ease); }
a.pillar:hover { transform: translateY(-3px); }
a.card h3 { transition: color .3s; }
a.card:hover h3 { color: var(--cocoa); }

/* --------------------------------------------------------- cookie notice -- */

.yh-cookie {
  position: fixed;
  left: max(16px, calc(var(--pad) / 2));
  right: max(16px, calc(var(--pad) / 2));
  bottom: 18px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 18px 26px;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--ink);
  color: rgba(255, 254, 252, .74);
  padding: 17px 22px;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  box-shadow: 0 18px 50px rgba(26, 19, 16, .22);
}
.yh-cookie.in { opacity: 1; transform: none; }
.yh-cookie.gone { opacity: 0; transform: translateY(14px); }
.yh-cookie p { margin: 0; max-width: 74ch; }
.yh-cookie a { color: var(--tan); text-decoration: underline; text-underline-offset: 3px; }
.yh-cookie a:hover { color: var(--cream); }
.yh-cookie button {
  flex: none;
  background: none;
  border: 1px solid rgba(255, 254, 252, .3);
  color: var(--cream);
  font-family: inherit;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 22px;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.yh-cookie button:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

@media (max-width: 640px) {
  .yh-cookie { left: 12px; right: 12px; bottom: 12px; padding: 15px 17px; font-size: 13px; }
  .yh-cookie button { width: 100%; }
}

/* ------------------------------------------------------------ site banner -- */

.yh-banner {
  position: relative;
  z-index: 60;
  background: var(--cocoa);
  color: var(--cream);
  text-align: center;
  padding: 11px 20px;
  font-size: 12.5px;
  letter-spacing: .06em;
}
.yh-banner a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ small print -- */

@media (prefers-reduced-motion: reduce) {
  .yh-cookie { transition: none; }
  a.pillar:hover { transform: none; }
}

@media print {
  #pre, .yh-cookie, header#hdr, footer, .marq { display: none !important; }
  .page { display: block !important; }
  .prose { max-width: none; color: #000; }
}