/* Western Terrace Apartments branding for DocuSeal (wtapt.orionsy.com).
   Loaded from layouts/_head_tags before DocuSeal's own CSS, so theme overrides
   use html[data-theme] to outrank DocuSeal's :root variables. */

@font-face {
  font-family: "Marcellus";
  src: url("/wt/marcellus.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* daisyUI theme variables (HSL triplets).
   teal #377388, deep teal #1E4652, snow #F5F8F8 */
html[data-theme="docuseal"] {
  --n: 195 43% 38%;
  --nf: 195 45% 30%;
  --nc: 0 0% 100%;
  --p: 190 25% 88%;
  --pf: 190 25% 80%;
  --pc: 194 46% 22%;
  --b1: 180 18% 97%;
  --b2: 186 16% 93%;
  --b3: 188 14% 88%;
  --bc: 194 46% 22%;
  --rounded-btn: .6rem;
  --btn-text-case: capitalize;
}

:focus-visible {
  outline: 2px solid #F26B27;
  outline-offset: 2px;
}

.wt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Signed-out landing page ---------- */

/* The landing renders inside DocuSeal's app layout; let it run edge to edge
   and drop the navbar, since the page carries its own logo. */
body:has(.wt-landing) > nav { display: none; }
body:has(.wt-landing) > main { max-width: none; margin: 0; padding: 0; }

.wt-landing {
  --wt-teal: #377388;
  --wt-deep: #1E4652;
  --wt-snow: #F5F8F8;
  --wt-sand: #C8A47E;
  display: grid;
  grid-template-areas: "photo" "panel" "footer";
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--wt-snow);
  color: var(--wt-deep);
}

.wt-photo {
  grid-area: photo;
  margin: 0;
  height: 34vh;
  min-height: 200px;
  overflow: hidden;
}

.wt-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.wt-panel {
  grid-area: panel;
  padding: clamp(28px, 6vw, 72px) clamp(22px, 6vw, 72px) clamp(32px, 5vw, 56px);
  background-color: var(--wt-teal);
  /* fine diagonal texture, as on the property's own banner */
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 7px);
  color: #fff;
}

.wt-logo { display: block; max-width: 100%; }

.wt-headline {
  font-family: "Marcellus", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: .005em;
  max-width: 17ch;
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.wt-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 34em;
  margin: 1.1rem 0 0;
  color: rgb(255 255 255 / .9);
}

.wt-steps {
  list-style: none;
  counter-reset: wt-step;
  margin: 2rem 0 0;
  padding: 0;
  max-width: 34em;
}

.wt-steps li {
  counter-increment: wt-step;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  padding: .85rem 0;
  border-top: 1px solid rgb(255 255 255 / .22);
  line-height: 1.5;
}

.wt-steps li:last-child { border-bottom: 1px solid rgb(255 255 255 / .22); }

.wt-steps li::before {
  content: counter(wt-step);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: lining-nums;
  color: var(--wt-sand);
}

.wt-office {
  margin-top: 2rem;
  line-height: 1.5;
}

.wt-office p { margin: 0 0 .6rem; }

.wt-office a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / .45);
  text-underline-offset: .2em;
}

.wt-office a[href^="tel:"] {
  font-family: "Marcellus", Georgia, serif;
  font-size: 1.5rem;
  text-decoration: none;
}

.wt-footer {
  grid-area: footer;
  padding: 1.5rem clamp(22px, 6vw, 72px) 2rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--wt-deep);
}

.wt-footer p { margin: 0 0 .5rem; }

.wt-footer a {
  color: var(--wt-teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.wt-attribution {
  margin-top: 1rem;
  font-size: .75rem;
  color: rgb(30 70 82 / .7);
}

.wt-attribution > div { text-align: left; padding: 0; }

@media (min-width: 960px) {
  .wt-landing {
    grid-template-columns: minmax(440px, 46%) 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "panel photo" "footer photo";
  }
  .wt-photo {
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    align-self: start;
  }
  .wt-photo img { object-position: 50% 50%; }
  .wt-footer { background: var(--wt-snow); }
}