/*
 * WordPresent creative system
 * Add in Appearance > Customise > Additional CSS or your child theme.
 * Designed for Astra plus the .wpr page components in this kit.
 */

:root {
  --wpr-ink: #171522;
  --wpr-paper: #fffaf1;
  --wpr-white: #ffffff;
  --wpr-purple: #5647e8;
  --wpr-purple-dark: #352aa7;
  --wpr-coral: #ff6b5f;
  --wpr-lime: #dfff67;
  --wpr-blue: #8ad8ff;
  --wpr-muted: #625e70;
  --wpr-line: #d9d2c7;
  --wpr-shadow: 0 18px 0 rgba(23, 21, 34, .10);
}

body {
  background: var(--wpr-paper);
  color: var(--wpr-ink);
}

body,
button,
input,
select,
textarea { font-family: Inter, "Segoe UI", Arial, sans-serif; }

h1, h2, h3, h4,
.site-title {
  color: var(--wpr-ink);
  font-family: "Arial Black", Inter, "Segoe UI", sans-serif;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.02;
}

/* Astra header and footer */
.ast-primary-header-bar,
.site-primary-header-wrap {
  background: rgba(255, 250, 241, .94) !important;
}

.ast-primary-header-bar {
  border-bottom: 1px solid var(--wpr-line) !important;
}

.main-header-menu > .menu-item > .menu-link {
  color: var(--wpr-ink) !important;
  font-weight: 800;
}

.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link { color: var(--wpr-purple) !important; }

.ast-builder-button-wrap .ast-custom-button,
.ast-header-button-1 .ast-custom-button {
  background: var(--wpr-ink) !important;
  border: 2px solid var(--wpr-ink) !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 var(--wpr-coral);
  color: var(--wpr-white) !important;
  font-weight: 900;
}

.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap {
  background: var(--wpr-ink) !important;
  color: #f6f0ff !important;
}

.site-footer a { color: var(--wpr-lime) !important; }

/* Page system */
.wpr {
  color: var(--wpr-ink);
  font-size: 1.04rem;
  line-height: 1.68;
  overflow: clip;
}

.wpr *, .wpr *::before, .wpr *::after { box-sizing: border-box; }
.wpr .wp-block-group { margin-block: 0; }
.wpr .wp-block-group > * { margin-block-start: 0; }
.wpr h1, .wpr h2, .wpr h3 { margin-top: 0; }
.wpr h1 { font-size: clamp(3.1rem, 9vw, 7.8rem); }
.wpr h2 { font-size: clamp(2.25rem, 6vw, 4.7rem); }
.wpr h3 { font-size: clamp(1.35rem, 2.7vw, 2rem); letter-spacing: -.035em; }
.wpr p { margin: 0 0 1rem; }
.wpr a { color: var(--wpr-purple-dark); }

.wpr-shell {
  margin-inline: auto;
  width: min(1180px, calc(100% - 42px));
}

.wpr-section { padding: 92px 0; position: relative; }
.wpr-section--white { background: var(--wpr-white); }
.wpr-section--ink { background: var(--wpr-ink); color: #f7f2ff; }
.wpr-section--ink h2, .wpr-section--ink h3, .wpr-section--ink a { color: var(--wpr-white); }
.wpr-section--purple { background: var(--wpr-purple); color: var(--wpr-white); }
.wpr-section--purple h2, .wpr-section--purple h3 { color: var(--wpr-white); }

.wpr-kicker {
  align-items: center;
  display: inline-flex;
  font-size: .78rem;
  font-weight: 900;
  gap: 10px;
  letter-spacing: .14em;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.wpr-kicker::before {
  background: var(--wpr-coral);
  border-radius: 50%;
  content: "";
  height: 11px;
  width: 11px;
}

.wpr-lead {
  color: var(--wpr-muted);
  font-size: clamp(1.12rem, 2.4vw, 1.45rem);
  max-width: 790px;
}

.wpr-section--ink .wpr-lead,
.wpr-section--purple .wpr-lead { color: #e6e0f0; }

.wpr-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.wpr-actions .theme-action-link,
.wpr-chip-list .theme-direct-content { display: contents; }
.wpr .theme-action-link,
.wpr .theme-direct-content { margin: 0; }

.wpr-btn {
  align-items: center;
  background: var(--wpr-ink);
  border: 2px solid var(--wpr-ink);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--wpr-coral);
  color: var(--wpr-white) !important;
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: 52px;
  padding: 12px 24px;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease;
}

.wpr-btn:hover,
.wpr-btn:focus { box-shadow: 2px 2px 0 var(--wpr-coral); transform: translate(3px, 3px); }

.wpr-btn--light {
  background: var(--wpr-white);
  border-color: var(--wpr-white);
  color: var(--wpr-ink) !important;
  box-shadow: 5px 5px 0 var(--wpr-lime);
}

.wpr-btn--ghost { background: transparent; color: var(--wpr-ink) !important; }

.wpr-section--ink .wpr-btn--ghost,
.wpr-section--purple .wpr-btn--ghost { border-color: var(--wpr-white); color: var(--wpr-white) !important; }

.wpr-hero {
  background:
    radial-gradient(circle at 88% 17%, rgba(223,255,103,.88) 0 8%, transparent 8.2%),
    radial-gradient(circle at 72% 72%, rgba(138,216,255,.72) 0 13%, transparent 13.2%),
    var(--wpr-paper);
  min-height: 760px;
  padding: 108px 0 96px;
  position: relative;
}

.wpr-hero-grid {
  align-items: center;
  display: grid;
  gap: 38px;
  grid-template-columns: 1.18fr .82fr;
}

.wpr-hero h1 span {
  color: var(--wpr-purple);
  display: block;
  transform: translateX(clamp(0px, 5vw, 74px));
}

.wpr-canvas {
  min-height: 520px;
  position: relative;
}

.wpr-tile {
  align-items: center;
  border: 3px solid var(--wpr-ink);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--wpr-ink);
  display: flex;
  font-family: "Arial Black", Inter, sans-serif;
  font-size: clamp(1.15rem, 2.8vw, 2rem);
  font-weight: 900;
  justify-content: center;
  min-height: 135px;
  padding: 22px;
  position: absolute;
  text-align: center;
}
.wpr-tile p { margin: 0; }

.wpr-tile:nth-child(1) { background: var(--wpr-coral); left: 0; top: 38px; transform: rotate(-7deg); width: 74%; }
.wpr-tile:nth-child(2) { background: var(--wpr-lime); right: 0; top: 194px; transform: rotate(6deg); width: 68%; }
.wpr-tile:nth-child(3) { background: var(--wpr-blue); bottom: 8px; left: 7%; transform: rotate(-2deg); width: 82%; }

.wpr-ribbon {
  background: var(--wpr-ink);
  color: var(--wpr-white);
  font-weight: 900;
  overflow: hidden;
  padding: 18px 0;
  transform: rotate(-1.2deg) scale(1.02);
}

.wpr-ribbon p { letter-spacing: .06em; margin: 0; text-align: center; text-transform: uppercase; }
.wpr-ribbon span { color: var(--wpr-lime); margin: 0 15px; }

.wpr-grid { display: grid; gap: 26px; margin-top: 42px; }
.wpr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wpr-card {
  background: var(--wpr-white);
  border: 2px solid var(--wpr-ink);
  border-radius: 22px;
  box-shadow: var(--wpr-shadow);
  padding: 32px;
}

.wpr-card:nth-child(even) { transform: translateY(20px); }
.wpr-card p { color: var(--wpr-muted); }
.wpr-card--coral { background: #fff0ec; }
.wpr-card--lime { background: #f5ffd1; }
.wpr-card--blue { background: #eaf8ff; }
.wpr-card--purple { background: #efecff; }

.wpr-card-number {
  color: var(--wpr-purple);
  display: block;
  font-family: "Arial Black", sans-serif;
  font-size: 1rem;
  margin-bottom: 36px;
}

.wpr-profile-image {
  margin: 0 0 28px;
}

.wpr-profile-image img {
  aspect-ratio: 4 / 3;
  border: 3px solid var(--wpr-ink);
  border-radius: 22px;
  display: block;
  object-fit: cover;
  width: 100%;
}

.wpr .theme-form-placeholder {
  background: #fff4cb;
  border: 2px dashed var(--wpr-ink);
  color: var(--wpr-ink);
  padding: 18px;
}

.wpr-split {
  align-items: center;
  display: grid;
  gap: 64px;
  grid-template-columns: 1fr 1fr;
}

.wpr-panel {
  background: var(--wpr-lime);
  border: 3px solid var(--wpr-ink);
  border-radius: 28px 28px 80px 28px;
  box-shadow: 12px 12px 0 var(--wpr-ink);
  padding: 42px;
  transform: rotate(1.5deg);
}

.wpr-panel--coral { background: var(--wpr-coral); border-radius: 80px 28px 28px 28px; transform: rotate(-1.5deg); }
.wpr-panel p { color: #2b2732; }

.wpr-chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.wpr-chip {
  background: var(--wpr-white);
  border: 2px solid var(--wpr-ink);
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  padding: 8px 14px;
}

.wpr-list { margin: 24px 0 0; padding-left: 1.3rem; }
.wpr-list li { margin-bottom: 11px; }

.wpr-service-row {
  align-items: start;
  border-top: 2px solid var(--wpr-ink);
  display: grid;
  gap: 28px;
  grid-template-columns: 90px 1fr 1fr;
  padding: 34px 0;
}

.wpr-service-row:last-child { border-bottom: 2px solid var(--wpr-ink); }
.wpr-service-row strong { color: var(--wpr-purple); font-size: 1.05rem; }

.wpr-price {
  background: var(--wpr-white);
  border: 3px solid var(--wpr-ink);
  border-radius: 22px;
  box-shadow: 10px 10px 0 var(--wpr-ink);
  padding: 34px;
}

.wpr-price:nth-child(2) { background: var(--wpr-lime); transform: translateY(-18px) rotate(1deg); }
.wpr-price strong { display: block; font-size: 1.65rem; margin: 16px 0; }

.wpr-quote {
  border-left: 8px solid var(--wpr-coral);
  font-family: "Arial Black", Inter, sans-serif;
  font-size: clamp(1.65rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.12;
  padding-left: 28px;
}

.wpr-contact-grid { display: grid; gap: 38px; grid-template-columns: 1.1fr .9fr; }
.wpr-contact-card {
  background: var(--wpr-white);
  border: 3px solid var(--wpr-ink);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--wpr-coral);
  padding: 38px;
}
.wpr-contact-card a { font-size: 1.12rem; font-weight: 900; }

.wpr-faq details {
  background: var(--wpr-white);
  border: 2px solid var(--wpr-ink);
  border-radius: 16px;
  margin-bottom: 14px;
  padding: 20px 24px;
}
.wpr-faq summary { cursor: pointer; font-weight: 900; }
.wpr-faq details p { color: var(--wpr-muted); margin: 14px 0 2px; }

.wpr-cta {
  background: var(--wpr-purple);
  border: 3px solid var(--wpr-ink);
  border-radius: 34px 34px 110px 34px;
  box-shadow: 14px 14px 0 var(--wpr-ink);
  color: var(--wpr-white);
  padding: 58px;
}
.wpr-cta h2 { color: var(--wpr-white); max-width: 870px; }
.wpr-cta p { color: #e8e4ff; max-width: 760px; }

/* Forms from common WordPress plugins */
.wpr input:not([type="submit"]), .wpr textarea, .wpr select,
.wpforms-container input:not([type="submit"]), .wpforms-container textarea, .wpforms-container select,
.wpcf7 input:not([type="submit"]), .wpcf7 textarea, .wpcf7 select {
  background: var(--wpr-white) !important;
  border: 2px solid var(--wpr-ink) !important;
  border-radius: 12px !important;
  color: var(--wpr-ink) !important;
  min-height: 48px;
}

.wpforms-submit, .wpcf7-submit,
.wpr input[type="submit"] {
  background: var(--wpr-ink) !important;
  border: 2px solid var(--wpr-ink) !important;
  border-radius: 999px !important;
  box-shadow: 5px 5px 0 var(--wpr-coral);
  color: var(--wpr-white) !important;
  font-weight: 900 !important;
  padding: 13px 24px !important;
}

@media (max-width: 920px) {
  .wpr-hero { min-height: auto; }
  .wpr-hero-grid, .wpr-split, .wpr-contact-grid { grid-template-columns: 1fr; }
  .wpr-canvas { min-height: 500px; margin-top: 20px; }
  .wpr-grid--4, .wpr-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpr-service-row { grid-template-columns: 60px 1fr; }
  .wpr-service-row > :last-child { grid-column: 2; }
}

@media (max-width: 620px) {
  .wpr-shell { width: min(100% - 28px, 1180px); }
  .wpr-section { padding: 64px 0; }
  .wpr-hero { padding: 76px 0 68px; }
  .wpr h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .wpr-hero h1 span { transform: none; }
  .wpr-grid--4, .wpr-grid--3, .wpr-grid--2 { grid-template-columns: 1fr; }
  .wpr-card:nth-child(even), .wpr-price:nth-child(2) { transform: none; }
  .wpr-service-row { grid-template-columns: 1fr; }
  .wpr-service-row > :last-child { grid-column: auto; }
  .wpr-canvas { min-height: 420px; }
  .wpr-tile { min-height: 115px; }
  .wpr-btn { width: 100%; }
  .wpr-panel, .wpr-cta { border-radius: 24px; padding: 32px 24px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wpr-btn { transition: none; }
}