/*
Theme Name: North Pole Post
Description: Festive one-product block theme for the Santa Pack plugin: Santa red, pine and gold on snow paper, with the same fonts as the letters. The front page is the sales page.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: north-pole-post
*/

/* Candy-cane stripe on top of every page. */
.npp-header {
  border-top: 6px solid transparent;
  border-image: repeating-linear-gradient(45deg, #b3121f 0 14px, #ffffff 14px 28px) 6;
}

/* Hero: soft snowfall dots behind the headline. */
.npp-hero {
  background-image:
    radial-gradient(circle at 12% 30%, rgba(201, 162, 39, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 18%, rgba(31, 107, 58, 0.14) 0 4px, transparent 5px),
    radial-gradient(circle at 68% 76%, rgba(179, 18, 31, 0.12) 0 3px, transparent 4px),
    radial-gradient(circle at 28% 84%, rgba(31, 107, 58, 0.12) 0 2px, transparent 3px);
  background-size: 220px 180px;
}
.npp-kicker {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem !important;
  color: #1f6b3a;
}
.npp-trust {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  color: #1f6b3a;
}
.npp-trust span { white-space: nowrap; margin: 0 0.5em; }

/* Sample pages: look like paper on a table. */
.npp-sample img {
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(43, 33, 24, 0.18);
  transform: rotate(-1.5deg);
  transition: transform 0.2s ease;
}
.npp-sample:nth-child(2) img { transform: rotate(1deg); }
.npp-sample:nth-child(3) img { transform: rotate(-0.5deg); }
.npp-sample img:hover { transform: rotate(0) scale(1.02); }
.npp-sample figcaption { display: none; }
/* The samples are real pages, so mark them: nobody named Emma gets a free printable.
   The word is sized from the image's own width (container units), so it stays on one line whether
   the image is in a narrow three-across row or full width on a phone. */
.npp-sample .wp-block-image { position: relative; container-type: inline-size; }
.npp-sample .wp-block-image::after {
  content: "SAMPLE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  font: 700 clamp(1.25rem, 4vw, 3rem) Georgia, serif;
  font-size: 19cqi;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: rgba(179, 18, 31, 0.22);
  pointer-events: none;
}
@media (max-width: 781px) {
  /* Columns stack here; keep the sample pages postcard-sized. */
  .npp-sample .wp-block-image { max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* How it works: numbered gold circles. */
.npp-step-num {
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  margin: 0 auto 0.5rem !important;
  border-radius: 50%;
  background: #c9a227;
  color: #fff;
  font-family: "Mountains of Christmas", Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
}

.npp-guarantee h2 { color: #fff !important; }
.npp-script { font-family: "Dancing Script", cursive; font-weight: 700; }

.wp-block-details summary { font-weight: 700; cursor: pointer; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wp-block-details[open] summary { margin-bottom: 0.5rem; color: #b3121f; }

.npp-footer a { color: inherit; }
.npp-footer .npp-links a { margin: 0 0.6em; white-space: nowrap; }

/* Keep sticky preview clear of the admin bar. */
.admin-bar .sp-preview { top: 52px; }

@media (prefers-reduced-motion: reduce) {
  .npp-sample img { transition: none; }
}