/* Seil Coffee — site styles (reset + responsive + interaction states)
   Design tokens/components come from _ds/. This file only adds the glue that
   the Claude Design runtime used to handle in JS. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--brown-900);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
::selection { background: var(--seil-gold); color: var(--seil-blue); }
@keyframes seilFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }

/* Buttons that act as navigation/scroll triggers */
[data-nav] { cursor: pointer; }

/* Scroll-reveal: hidden until observed (JS adds .is-visible) */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- Responsive: replicate the runtime's <880px layout collapse --- */
@media (max-width: 880px) {
  [data-grid], [data-cards], [data-foot], [data-formrow],
  [data-product], [data-form], [data-layout] {
    grid-template-columns: 1fr !important;
  }
  /* coffee alternating rows: image first, copy second when stacked */
  [data-product] [data-media] { order: 1 !important; }
  [data-product] [data-text]  { order: 2 !important; }
  /* wholesale summary shouldn't stick when stacked */
  [data-aside] { position: static !important; }
  #navlinks { display: none !important; }
  #burger  { display: flex !important; }
  /* footer fixed pixel width in the mockup -> fluid */
  footer > div[style*="width: 1110px"] { width: 100% !important; height: auto !important; }
}
/* footer inner block used a fixed 1110x305 canvas size in the mockup */
footer > div[style*="width: 1110px"] { width: 100% !important; height: auto !important; }

/* Mobile menu overlay (JS toggles display) */
#mobilemenu { }

/* Form success toast/state */
.seil-form-status {
  font-family: var(--font-body);
  font-size: 15px;
  margin-top: 14px;
  min-height: 20px;
}
.seil-form-status[data-state="ok"]  { color: var(--green-600, #2c7d66); }
.seil-form-status[data-state="err"] { color: #b23b3b; }
.seil-form-status[data-state="sending"] { color: var(--text-muted); }

/* Disabled submit look (wholesale below MOQ) driven by JS via [disabled] */
button[disabled] { opacity: .5; cursor: not-allowed; }

/* Form fields (Contact) — matches the design's field styling */
.seil-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text-strong);
  margin-bottom: 7px;
}
.seil-field {
  width: 100%;
  background: var(--surface-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: .9375rem;
  color: var(--text-body);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.seil-field:focus {
  border-color: var(--seil-blue);
  box-shadow: 0 0 0 3px rgba(13,70,120,.12);
}
textarea.seil-field { resize: vertical; }

/* Textareas/inputs inherit the body font (inline-styled fields set no font-family) */
input, textarea, select, button { font-family: var(--font-body); }

/* About page: hills image card goes full-bleed and flush under the hero on
   mobile (desktop keeps the framed card beside the text). */
@media (max-width: 880px) {
  .about-media-sec { padding-top: 0 !important; }
  .about-hills-wrap { width: 100vw; margin-left: calc(50% - 50vw); }
  .about-hills-card {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Pre-footer sunset band: shorter with a smaller sun on mobile */
@media (max-width: 880px) {
  .footer-hills { height: 150px !important; }
  .footer-sun { width: 58px !important; height: 58px !important; top: 20px !important; }
}