/* OnsiteHub — Brand System v2.1 tokens
 * These are the in-code source of truth for the code components.
 * Names mirror what we'll register as Webflow Variables later, so the
 * components inherit the site's values when present and fall back to these.
 *
 * Fonts (Quicksand, Montserrat, JetBrains Mono) are loaded by the Webflow site
 * itself — we only reference the families here, never @import them. */

:host {
  /* Primary */
  --oh-cadmium: #ffec00; /* signature yellow — accent only, ~10% coverage */
  --oh-sun-soft: #fff7a8; /* tint: backgrounds, hover washes */

  /* Dark surface (replaces black) */
  --oh-adriatic: #0e5b7a;

  /* Neutrals — warm, replace pure black/white */
  --oh-paper: #faf6ec;
  --oh-cream: #f4eddf;
  --oh-stone: #dcd7cc;
  --oh-mist: #d7d4cc;
  --oh-slate: #6b6b72;
  --oh-charcoal: #2a2a2e;
  --oh-ink: #0e0e10; /* text only — never a surface */

  /* Supporting */
  --oh-olive: #6f8f3a;
  --oh-terracotta: #d96b3f;

  /* Type */
  --oh-font-display: "Quicksand", system-ui, sans-serif; /* headings */
  --oh-font-body: "Montserrat", system-ui, sans-serif; /* body */
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace; /* tags/labels */
}

/* Matches the Resources Hub card + CTA-button styling:
 * cream surface, 2px ink border, hard offset shadow, cadmium button. */

.gf-card {
  background: var(--oh-cream, #f4eddf);
  border: 2px solid var(--oh-ink, #0e0e10);
  border-radius: 16px;
  box-shadow: 6px 6px var(--oh-ink, #0e0e10);
  padding: 28px 26px;
}

.gf-header {
  font-family: var(--oh-font-display, "Quicksand", sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--oh-ink, #0e0e10);
  margin: 0 0 20px;
}

.gf-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gf-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--oh-font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oh-slate, #6b6b72);
}

.gf-input {
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-size: 16px;
  color: var(--oh-ink, #0e0e10);
  background: #fff;
  border: 2px solid var(--oh-ink, #0e0e10);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gf-input:focus {
  outline: none;
  border-color: var(--oh-adriatic, #0e5b7a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--oh-adriatic, #0e5b7a) 18%, transparent);
}

.gf-input:disabled {
  background: var(--oh-paper, #faf6ec);
  border-color: var(--oh-stone, #dcd7cc);
  color: var(--oh-slate, #6b6b72);
  cursor: not-allowed;
}

/* Cadmium button with hard offset shadow — mirrors .rh-cta-btn on the hub */
.gf-submit {
  appearance: none;
  cursor: pointer;
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--oh-ink, #0e0e10);
  background: var(--oh-cadmium, #ffec00);
  border: 2.5px solid var(--oh-ink, #0e0e10);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 4px;
  box-shadow: 0 5px var(--oh-ink, #0e0e10);
  transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.15s ease;
}

.gf-submit:hover:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px var(--oh-ink, #0e0e10);
}

.gf-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: 0 5px var(--oh-stone, #dcd7cc);
}

.gf-error {
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-size: 14px;
  color: var(--oh-terracotta, #d96b3f);
  margin: 0;
}

.gf-successWrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.gf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--oh-cadmium, #ffec00);
  border: 2px solid var(--oh-ink, #0e0e10);
  color: var(--oh-ink, #0e0e10);
  font-size: 22px;
  font-weight: 700;
}

.gf-successHeading {
  font-family: var(--oh-font-display, "Quicksand", sans-serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--oh-ink, #0e0e10);
  margin: 0;
}

.gf-successMsg {
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--oh-slate, #6b6b72);
  margin: 0;
}

.gf-downloadBtn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--oh-ink, #0e0e10);
  background: var(--oh-cadmium, #ffec00);
  border: 2.5px solid var(--oh-ink, #0e0e10);
  border-radius: 12px;
  padding: 13px 20px;
  margin-top: 4px;
  box-shadow: 0 5px var(--oh-ink, #0e0e10);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.gf-downloadBtn:hover {
  transform: translateY(3px);
  box-shadow: 0 2px var(--oh-ink, #0e0e10);
}

/* Matches the Resources Hub page (/resources-2) visual language:
 * Paper surface, cream cards with 2px ink borders + hard offset shadows,
 * cadmium accents, Quicksand headings, Montserrat body, JetBrains Mono tags. */

.rd-root {
  display: block;
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 24px 96px;
  background-color: var(--oh-paper, #faf6ec);
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  color: var(--oh-ink, #0e0e10);
}

/* --- Hero --- */
.rd-hero {
  max-width: 760px;
  margin: 0 0 44px;
}

.rd-tag {
  display: inline-block;
  font-family: var(--oh-font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oh-ink, #0e0e10);
  background-color: var(--oh-cadmium, #ffec00);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

.rd-title {
  font-family: var(--oh-font-display, "Quicksand", sans-serif);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: normal;
  color: var(--oh-ink, #0e0e10);
  margin: 0 0 16px;
}

.rd-lead {
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--oh-slate, #6b6b72);
  margin: 0;
}

/* --- Layout --- */
.rd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}

.rd-main {
  min-width: 0;
}

.rd-description {
  margin: 0 0 32px;
}

.rd-section {
  margin: 0 0 36px;
}

.rd-h2 {
  font-family: var(--oh-font-display, "Quicksand", sans-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--oh-ink, #0e0e10);
  margin: 0 0 16px;
}

/* --- Rich text (light-DOM w-richtext is projected via slot; the site's
 * global rich-text styles handle inner p/ul/li typography) --- */
.rd-richtext {
  font-family: var(--oh-font-body, "Montserrat", sans-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--oh-ink, #0e0e10);
}

.rd-richtext ::slotted(.w-richtext) {
  font-size: 17px;
  line-height: 1.65;
}

/* --- Document preview: cream card, ink border, hard offset shadow --- */
.rd-previewWrap {
  border: 2px solid var(--oh-ink, #0e0e10);
  border-radius: 16px;
  overflow: hidden;
  background: var(--oh-cream, #f4eddf);
  box-shadow: 6px 6px var(--oh-ink, #0e0e10);
}

.rd-preview {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Sticky form column --- */
.rd-aside {
  min-width: 0;
}

.rd-formSticky {
  position: sticky;
  top: 96px;
}

/* --- Responsive (mirrors the hub breakpoints) --- */
@media (max-width: 860px) {
  .rd-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .rd-formSticky {
    position: static;
  }
  .rd-aside {
    order: -1;
  }
  .rd-root {
    padding: 48px 20px 64px;
  }
}