:root{
  --bg: var(--ananke-bg, #0f1115);
  --panel: var(--ananke-panel, #151821);
  --text: var(--ananke-text, #eef3ff);
  --muted: var(--ananke-muted, #a9b4cf);
  --ring: var(--ananke-ring, #2c3756);
  --link: var(--ananke-link, #9ecbff);
  --accent: var(--ananke-accent, #c8a34e);
}

html, body { background: var(--bg); color: var(--text); }

a { color: var(--link); }

header, .site-header, nav.navbar, .ananke-header { background: var(--panel); border-bottom: 1px solid var(--ring); }

footer { color: var(--muted); }

/* Simple card grid used on homepage content */
article table{ border-collapse: collapse; margin: 1rem 0 1.25rem; min-width: min(100%, 520px); }
article th, article td{ border: 1px solid var(--ring); padding: .45rem .8rem; text-align: left; }
article thead th{ background: var(--card); color: var(--accent); }
article tbody tr:nth-child(even){ background: var(--panel); }
.grid-cards .cards{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.grid-cards .card{ display: block; background: var(--panel); border: 1px solid var(--ring); border-radius: 14px; padding: 16px 14px; text-decoration: none; color: inherit; }
.grid-cards .card:hover{ border-color: var(--ring-hover, #3c4a75); }
.grid-cards .thumb{ aspect-ratio: 3/4; background:#0b0d12; display:grid; place-items:center; border-radius:10px; overflow:hidden; margin-bottom:10px }
.grid-cards .thumb img{ max-width:100%; max-height:100%; display:block }
.grid-cards .muted{ color: var(--muted); }

/* Optional buttons/links accents */
.button, .btn, .ananke-button{ background: var(--card, #1b1f2a); border:1px solid var(--ring); color:#fff; }
.button:hover, .btn:hover, .ananke-button:hover { border-color: var(--ring-hover, #3c4a75); }

/* CloudyForms JS widget — iframe mode (panel wrapper on lodge pages) */
.cf-embed-panel {
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 14px;
  padding: 1.25rem 1.5rem 1.5rem;
  margin-top: 1.5rem;
}
.cf-embed-panel iframe {
  width: 100%;
  border: none;
  display: block;
  min-height: 480px;
}
.cf-embed-fallback {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* CloudyForms headless embed — for simple forms only (headless="true") */
[data-cloudyform] form { margin-top: 1.5rem; }
.cf-embed-panel [data-cloudyform] form { margin-top: 0; }
[data-cloudyform] .cf-field { margin-bottom: 1.25rem; }
[data-cloudyform] [data-cf-field] > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  margin-bottom: 0.3rem;
}
[data-cloudyform] input[type="radio"],
[data-cloudyform] input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}
[data-cloudyform] label,
[data-cloudyform] .cf-label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--text); }
[data-cloudyform] input,
[data-cloudyform] select,
[data-cloudyform] textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}
[data-cloudyform] input:focus,
[data-cloudyform] select:focus,
[data-cloudyform] textarea:focus {
  outline: none;
  border-color: var(--accent);
}
[data-cloudyform] button[type="submit"],
[data-cloudyform] input[type="submit"] {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #0f1115;
  cursor: pointer;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
}
[data-cloudyform] button[type="submit"]:hover,
[data-cloudyform] input[type="submit"]:hover {
  filter: brightness(1.08);
}
[data-cloudyform] [data-cf-success] { color: #7dd87d; margin-top: 1rem; }
[data-cloudyform] .cf-error,
[data-cloudyform] [data-cf-error] { color: #f87171; font-size: 0.875rem; }
