/*
 * Nye Eventyr site blocks — base styles.
 *
 * Served as-is from /_ne/blocks.{hash}.css on the customer site's own host.
 *
 * Blocks are styled only through the --ne-* properties below, so one block
 * looks at home in any template. Each falls back to a --ne-theme-* property a
 * template may set (Orchestra's design tokens, later), and from there to
 * inheriting the page's own font and colour — so a block dropped into a
 * template that sets nothing still takes on its typography.
 */
[data-ne-block] {
  --ne-accent: var(--ne-theme-accent, currentColor);
  --ne-accent-contrast: var(--ne-theme-accent-contrast, #ffffff);
  --ne-text: var(--ne-theme-text, inherit);
  --ne-muted: var(--ne-theme-muted, color-mix(in srgb, currentColor 65%, transparent));
  --ne-surface: var(--ne-theme-surface, transparent);
  --ne-border: var(--ne-theme-border, color-mix(in srgb, currentColor 20%, transparent));
  --ne-font-body: var(--ne-theme-font-body, inherit);
  --ne-font-heading: var(--ne-theme-font-heading, inherit);
  --ne-radius: var(--ne-theme-radius, 8px);
  --ne-gap: var(--ne-theme-gap, 1rem);

  box-sizing: border-box;
  color: var(--ne-text);
  font-family: var(--ne-font-body);
}

[data-ne-block] *,
[data-ne-block] *::before,
[data-ne-block] *::after {
  box-sizing: inherit;
}

/* Text only for screen readers: announcements, labels a design shows as icons. */
[data-ne-block] .ne-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;
}


/*
 * Nye Eventyr site blocks — forms.
 *
 * The success and error lines the form runtime (and the no-JS fallback)
 * puts next to a form. The form itself keeps the template's styling: these
 * rules touch only what the runtime and the field editor add, and take the
 * page's own font.
 */
.ne-form__message {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border-left: 4px solid currentColor;
  font: inherit;
  line-height: 1.5;
}

.ne-form__message--success {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}

.ne-form__message--error {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

.ne-form__message:focus {
  outline: none;
}

/*
 * What the editor's field editor adds to a form (resources/js/form-markup.js).
 * A template's own fields keep its styling; these cover a field added to a
 * form with nothing to copy, and are drawn from the template's theme
 * variables so they follow the site's palette.
 */

/* A template field the customer took off the form; kept for its scripts. */
form [data-ne-removed] {
  display: none !important;
}

.ne-consent {
  margin: 0.75rem 0;
  font-size: 0.875em;
  line-height: 1.5;
  opacity: 0.75;
}

.ne-form-note {
  margin: 1.25rem 0 0.5rem;
  font-weight: 600;
}

.ne-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.ne-field__label {
  padding: 0;
  font-weight: 600;
  font-size: 0.95em;
}

.ne-field__control {
  box-sizing: border-box;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-input-border, color-mix(in srgb, currentColor 25%, transparent));
  border-radius: var(--radius, 6px);
  background: var(--color-surface, #ffffff);
  color: var(--color-text, inherit);
  font: inherit;
}

.ne-field__control:focus {
  border-color: var(--color-accent, currentColor);
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 1px;
}

.ne-field__control::placeholder {
  color: var(--color-placeholder, color-mix(in srgb, currentColor 50%, transparent));
}

textarea.ne-field__control {
  min-height: 8rem;
  resize: vertical;
}

.ne-field__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: normal;
  cursor: pointer;
}

.ne-field__option input {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-accent, auto);
}

/*
 * The editor's "Skjemaer" blocks (resources/js/editor-form-blocks.js): a
 * section around one of the forms above. Spacing, surfaces, fonts and the
 * button come from the template's theme variables (the --color-*, --font-*
 * and size contract every template declares), with plain fallbacks.
 */
.ne-form-block {
  padding: var(--section-padding, 4rem) var(--outer-padding, 1.5rem);
  background: var(--color-bg, transparent);
  color: var(--color-text, inherit);
}

.ne-form-block__inner {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--card-padding, 2rem);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface, transparent);
}

.ne-form-block__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading, inherit);
  line-height: 1.2;
}

.ne-form-block__intro {
  margin: 0 0 1.5rem;
  color: var(--color-muted, inherit);
}

.ne-field__required {
  color: var(--color-error, currentColor);
}

.ne-form__submit {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: var(--radius, 6px);
  /* The template's call-to-action pair: chosen by the template to contrast. */
  background: var(--color-cta-bg, #1f2937);
  color: var(--color-cta-text, #ffffff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}

.ne-form__submit:hover {
  filter: brightness(1.15);
}

.ne-form__submit:active {
  filter: brightness(0.95);
}

.ne-form__submit:focus-visible {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

.ne-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The newsletter block: the address and the button on one line. */
.ne-form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.ne-form--inline .ne-field {
  flex: 1 1 16rem;
  margin: 0;
}


/*
 * Nye Eventyr site blocks — booking.
 *
 * The picker in the Timebestilling and Møtebooking blocks
 * (resources/js/site-blocks/booking.js): services, a month of days, and the
 * free times of the day picked. Drawn from the template's theme variables
 * like the form blocks; what is chosen uses the template's call-to-action
 * pair, which the template picked to contrast.
 */
.ne-booking {
  position: relative;
  margin: 0 0 1.5rem;
}

/* What the editor canvas shows: the picker itself only runs on the site. */
.ne-booking__placeholder {
  margin: 0;
  padding: 1.25rem;
  border: 2px dashed var(--color-input-border, color-mix(in srgb, currentColor 25%, transparent));
  border-radius: var(--radius-md, 10px);
  color: var(--color-muted, inherit);
  text-align: center;
}

/* Holds the chosen time; the browser's own "required" check speaks for it. */
.ne-booking__value {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Announcements for screen readers: what was picked, how many times are free. */
.ne-booking__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ne-booking__step {
  min-width: 0;
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.ne-booking__heading {
  margin: 0 0 0.6rem;
  padding: 0;
  font-weight: 600;
}

.ne-booking__note {
  margin: 0.5rem 0;
  color: var(--color-muted, inherit);
}

.ne-booking__services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.6rem;
}

.ne-booking__service,
.ne-booking__day,
.ne-booking__time,
.ne-booking__nav {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ne-booking__service {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-input-border, color-mix(in srgb, currentColor 25%, transparent));
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface, transparent);
  text-align: left;
}

.ne-booking__service[aria-pressed="true"] {
  border-color: var(--color-accent, currentColor);
  box-shadow: 0 0 0 1px var(--color-accent, currentColor);
  background: var(--color-accent-light, var(--color-surface, transparent));
}

.ne-booking__service-name {
  font-weight: 600;
}

.ne-booking__service-details,
.ne-booking__service-description {
  font-size: 0.9em;
  color: var(--color-muted, inherit);
}

.ne-booking__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 24rem;
  margin: 0 0 0.5rem;
}

.ne-booking__month-name {
  font-weight: 600;
}

.ne-booking__nav {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-input-border, color-mix(in srgb, currentColor 25%, transparent));
  border-radius: 999px;
  background: var(--color-surface, transparent);
  font-size: 1.25rem;
  line-height: 1;
}

.ne-booking__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  max-width: 24rem;
}

.ne-booking__weekday {
  padding: 0.25rem 0;
  font-size: 0.8em;
  color: var(--color-muted, inherit);
  text-align: center;
}

.ne-booking__day {
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--radius, 6px);
  background: var(--color-accent-light, color-mix(in srgb, currentColor 8%, transparent));
  font-weight: 600;
}

.ne-booking__day:disabled {
  background: transparent;
  color: var(--color-placeholder, color-mix(in srgb, currentColor 40%, transparent));
  font-weight: normal;
  cursor: default;
}

.ne-booking__times-step {
  margin-top: 1rem;
}

.ne-booking__times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ne-booking__time {
  min-width: 4.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-input-border, color-mix(in srgb, currentColor 25%, transparent));
  border-radius: var(--radius, 6px);
  background: var(--color-surface, transparent);
  font-variant-numeric: tabular-nums;
}

.ne-booking__day[aria-pressed="true"],
.ne-booking__time[aria-pressed="true"] {
  border-color: transparent;
  background: var(--color-cta-bg, #1f2937);
  color: var(--color-cta-text, #ffffff);
}

.ne-booking__day:focus-visible,
.ne-booking__time:focus-visible,
.ne-booking__service:focus-visible,
.ne-booking__nav:focus-visible {
  outline: 2px solid var(--color-accent, currentColor);
  outline-offset: 2px;
}

.ne-booking__chosen {
  margin: 0.85rem 0 0;
  font-weight: 600;
}

.ne-booking__turnstile {
  margin: 0 0 1rem;
}