/* =========================================================================
   Campaign mechanics (ticket 17).

   Dressed in the house tokens the child theme already publishes (charcoal
   ink, ivory canvas, sand blocks, stone rules, Manrope, 2px corners, the
   label tier for small lines). One file, five small parts:

   .nn-campaign-window   the dates of the page it sits on
   .nn-campaign__mark    the dashed "to be set" / "sample dates" mark
   .nn-campaign-pieces   the campaign page's grid of reduced pieces
   .nn-campaign-banner            the dated banner strip, top of the page
   .nn-calendar          the one-page Promotion calendar
   .nn-campaign-ownerbar the thin bar only the owner sees
   ========================================================================= */

/* 1. The window line on a campaign page */

.nn-campaign-window {
  --nnc-ink: var(--color-charcoal, #20201F);
  --nnc-stone: var(--color-stone, #A79D91);
  --nnc-sand: var(--color-sand, #E8E1D6);
  --nnc-ivory: var(--color-ivory, #F4F1EA);
  --nnc-muted: #6B655D;

  max-width: 58ch;
  margin: 0 0 34px;
  font-family: var(--font-body, Manrope, sans-serif);
  color: var(--nnc-ink);
}

.nn-campaign-window__overline {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--nnc-muted);
}

.nn-campaign-window__dates {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nn-campaign-window__state {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--nnc-muted);
}

.nn-campaign-window--after .nn-campaign-window__dates {
  color: var(--nnc-muted);
}

/* 2. The two marks: "to be set" and "sample dates" */

.nn-campaign__mark {
  display: inline-block;
  max-width: 52ch;
  margin: 14px 0 0;
  padding: 6px 10px;
  border: 1px dashed var(--color-stone, #A79D91);
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: #6B655D;
}

.nn-campaign__empty {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.6;
  color: #6B655D;
}

/* 3. The campaign page's grid */

.nn-campaign-pieces {
  margin-block-start: 4px;
  margin-block-end: 8px;
}

/* 4. The dated banner strip */

.nn-campaign-banner {
  margin: 0;
  padding: 0;
  background-color: var(--color-sand, #E8E1D6);
  border-block-end: 1px solid var(--color-stone, #A79D91);
  font-family: var(--font-body, Manrope, sans-serif);
  color: var(--color-charcoal, #20201F);
}

.nn-campaign-banner__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding: 9px 20px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.nn-campaign-banner__inner .elementor-element,
.nn-campaign-banner__inner > .elementor {
  max-width: 100%;
}

.nn-campaign-banner__inner p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.nn-campaign-banner__inner p a,
.nn-campaign-banner__inner a {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.nn-campaign-banner__inner p a:hover,
.nn-campaign-banner__inner a:hover {
  text-decoration-thickness: 2px;
}

/* The banner page's own containers lose their page-sized padding inside a
   strip: the strip sets the rhythm, the design keeps the type. */
.nn-campaign-banner__inner .e-con,
.nn-campaign-banner__inner .e-div-block {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

.nn-campaign-banner__inner .e-con > .e-con-inner,
.nn-campaign-banner__inner > .e-con > .e-con-inner {
  padding: 0 !important;
  gap: 0 !important;
}

/* 5. The Promotion calendar */

.nn-calendar {
  --nnc-ink: var(--color-charcoal, #20201F);
  --nnc-stone: var(--color-stone, #A79D91);
  --nnc-sand: var(--color-sand, #E8E1D6);
  --nnc-muted: #6B655D;

  margin-block-start: 8px;
  font-family: var(--font-body, Manrope, sans-serif);
  color: var(--nnc-ink);
}

.nn-calendar__year {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nnc-muted);
}

.nn-calendar__table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 26px;
  font-size: 13px;
  line-height: 1.5;
}

.nn-calendar__table th {
  padding: 0 12px 10px 0;
  border: 0;
  border-block-end: 1px solid var(--nnc-stone);
  text-align: start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nnc-muted);
  white-space: nowrap;
}

.nn-calendar__table td {
  padding: 12px 12px 12px 0;
  border: 0;
  border-block-end: 1px solid var(--nnc-sand);
  vertical-align: top;
}

.nn-calendar__table tr > *:first-child {
  border-inline-start: 0;
}

.nn-calendar__table tr > *:last-child {
  border-inline-end: 0;
}

.nn-calendar__table td:last-child,
.nn-calendar__table th:last-child {
  padding-inline-end: 0;
}

.nn-calendar__what {
  font-weight: 600;
}

.nn-calendar__sample {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 6px;
  border: 1px dashed var(--nnc-stone);
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--nnc-muted);
  white-space: nowrap;
}

.nn-calendar__edit {
  display: inline-block;
  margin-inline-start: 6px;
  font-size: 11px;
  color: var(--nnc-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nn-calendar__state {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nnc-ink);
}

.nn-calendar__state--after {
  color: var(--nnc-muted);
}

.nn-calendar__state--before {
  color: var(--nnc-muted);
}

.nn-calendar__note {
  margin: 0 0 8px;
  max-width: 68ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--nnc-muted);
}

/* Tables on a phone: one block per window, the labels in front of the values */

@media (max-width: 767px) {
  .nn-calendar__table,
  .nn-calendar__table thead,
  .nn-calendar__table tbody,
  .nn-calendar__table tr,
  .nn-calendar__table th,
  .nn-calendar__table td {
    display: block;
    width: 100%;
  }

  .nn-calendar__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nn-calendar__table tr {
    padding: 14px 0;
    border-block-end: 1px solid var(--nnc-sand);
  }

  .nn-calendar__table td {
    padding: 0 0 4px;
    border: 0;
  }

  .nn-calendar__table td[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nnc-muted);
  }

  .nn-campaign-window__dates {
    font-size: 18px;
  }

  .nn-campaign-banner__inner {
    padding: 8px 16px;
    font-size: 11px;
  }

  .nn-campaign-banner__inner p {
    font-size: 11px;
  }
}

/* 6. The owner's bar, only on a page shoppers cannot see */

.nn-campaign-ownerbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 9999;
  padding: 10px 16px;
  background-color: #20201F;
  color: #F4F1EA;
  font-family: var(--font-body, Manrope, sans-serif);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.nn-campaign-ownerbar a {
  color: #F4F1EA;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 7. The sale flag

   The house never shouts a reduction with a badge: the struck-through old
   price beside the current one already says it, in the house colours. The
   shop's own badge is painted in a colour outside the six roles, so it is
   taken off the piece page the same way the grids already take it off. */
.single-product .onsale,
.woocommerce div.product span.onsale {
  display: none !important;
}