:root {
  --paw-ink: #22301e;
  --paw-ink-deep: #1a2618;
  --paw-body: #4a5748;
  --paw-muted: #5f6a57;
  --paw-label: #765f2e;
  --paw-sage: #7c8c6b;
  --paw-rose: #9f554a;
  --paw-rose-hover: #93473e;
  --paw-champagne: #e3c79a;
  --paw-parchment: #f0e7d5;
  --paw-cream: #faf4e8;
  --paw-cream-tint: #efe4d0;
  --paw-line: #e4d8c3;
  --paw-on-dark: #f4ecdc;
  --paw-shadow: 0 1rem 2.75rem rgba(34, 48, 30, 0.08);
}

html {
  background: var(--paw-parchment);
}

body {
  background: var(--paw-parchment);
  color: var(--paw-body);
}

.wp-site-blocks {
  isolation: isolate;
  min-height: 100vh;
  /* Do not make the page wrapper a clipped scroll container. It prevents
   * normal mouse-wheel scrolling in some browser/WordPress preview contexts. */
  overflow: visible;
  position: relative;
}

.wp-site-blocks::before,
.wp-site-blocks::after {
  border-radius: 50%;
  content: "";
  filter: blur(2rem);
  opacity: 0.38;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.wp-site-blocks::before {
  background: radial-gradient(circle, rgba(124, 140, 107, 0.32) 0, rgba(124, 140, 107, 0) 68%);
  height: min(44rem, 66vw);
  left: -20rem;
  top: 18rem;
  width: min(44rem, 66vw);
}

.wp-site-blocks::after {
  background: radial-gradient(circle, rgba(166, 90, 79, 0.19) 0, rgba(227, 199, 154, 0.12) 38%, rgba(240, 231, 213, 0) 72%);
  bottom: -22rem;
  height: min(50rem, 72vw);
  right: -23rem;
  width: min(50rem, 72vw);
}

.paw-site-header,
.paw-site-footer,
.paw-main-surface,
.paw-card,
.paw-callout {
  position: relative;
  z-index: 1;
}

.paw-site-header {
  background: var(--paw-cream);
  border-bottom: 1px solid var(--paw-line);
}

.paw-brand__link {
  align-items: center;
  color: var(--paw-ink);
  display: inline-flex;
  font-family: var(--wp--preset--font-family--garden-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 600;
  gap: 0.65rem;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.paw-rings {
  display: inline-flex;
  height: 1.35rem;
  position: relative;
  width: 1.75rem;
}

.paw-rings::before,
.paw-rings::after {
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  content: "";
  height: 0.95rem;
  position: absolute;
  top: 0.18rem;
  width: 0.95rem;
}

.paw-rings::before {
  color: var(--paw-ink);
  left: 0.08rem;
}

.paw-rings::after {
  color: var(--paw-rose);
  right: 0.08rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--paw-body);
  font-weight: 650;
  text-decoration: none;
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--paw-ink);
}

.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-bottom: 2px solid var(--paw-rose);
  padding-bottom: 0.35rem;
}

.wp-block-button__link,
button.wp-element-button,
input[type="submit"] {
  min-height: 2.75rem;
}

.wp-block-button__link:hover,
button.wp-element-button:hover,
input[type="submit"]:hover {
  background-color: var(--paw-rose-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--paw-ink);
  color: var(--paw-on-dark);
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--paw-sage);
  outline-offset: 3px;
}

.paw-eyebrow {
  color: var(--paw-label);
  font-family: var(--wp--preset--font-family--garden-sans);
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.paw-muted {
  color: var(--paw-muted);
}

.paw-card {
  background: var(--paw-cream);
  border: 1px solid var(--paw-line);
  border-radius: var(--wp--custom--radius--large);
  box-shadow: var(--paw-shadow);
}

.paw-card > :first-child,
.paw-callout > :first-child {
  margin-top: 0;
}

.paw-card > :last-child,
.paw-callout > :last-child {
  margin-bottom: 0;
}

.paw-main-surface {
  background: rgba(250, 244, 232, 0.96);
}

.paw-decision-grid > .wp-block-column {
  display: flex;
}

.paw-decision-grid > .wp-block-column > .paw-card {
  height: 100%;
  width: 100%;
}

.paw-hero {
  background: var(--paw-ink-deep);
  color: var(--paw-on-dark);
  overflow: hidden;
  position: relative;
}

.paw-hero::before,
.paw-hero::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.paw-hero::before {
  background-image:
    linear-gradient(90deg, rgba(18, 32, 20, 0.96) 0%, rgba(18, 32, 20, 0.86) 36%, rgba(18, 32, 20, 0.56) 62%, rgba(18, 32, 20, 0.32) 100%),
    image-set(
      url("../images/paw-home-hero-botanical-hero-1344.avif") type("image/avif") 1x,
      url("../images/paw-home-hero-botanical-hero-1344.webp") type("image/webp") 1x
    );
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover;
  inset: 0;
  opacity: 1;
}

.paw-hero::after {
  background: radial-gradient(ellipse at center, rgba(166, 90, 79, 0.25), rgba(227, 199, 154, 0.1) 42%, rgba(26, 38, 24, 0) 72%);
  border-radius: 50%;
  bottom: -20rem;
  filter: blur(1.3rem);
  height: 44rem;
  left: 42%;
  opacity: 0.6;
  width: 44rem;
}

.paw-hero .wp-block-group {
  position: relative;
  z-index: 1;
}

.paw-hero .paw-eyebrow {
  color: var(--paw-champagne);
}

.paw-hero .paw-muted {
  color: var(--wp--preset--color--on-dark);
}

.paw-hero .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--paw-on-dark);
  color: var(--paw-on-dark);
}

.paw-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--paw-on-dark);
  color: var(--paw-ink-deep);
}

.paw-hero-heading {
  max-width: 13ch;
}

/*
 * Decorative media fields deliberately sit beneath functional content. They
 * are CSS backgrounds with no semantic meaning, so they do not receive alt
 * text or alter the page's reading order. Each page remains usable if the
 * media cannot load.
 */
body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface::before,
body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface::after {
  background-image:
    linear-gradient(90deg, rgba(250, 244, 232, 0.48), rgba(250, 244, 232, 0.12)),
    var(--paw-page-art);
  background-position: center, var(--paw-page-art-position, center);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: clamp(12rem, 22vw, 18rem);
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface::before {
  opacity: var(--paw-page-art-opacity, 0.3);
}

body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface::after {
  background-image:
    linear-gradient(180deg, rgba(250, 244, 232, 0.88), rgba(250, 244, 232, 0.18)),
    var(--paw-page-art);
  background-position: center, var(--paw-page-art-bottom-position, right bottom);
  bottom: 0;
  height: clamp(8rem, 15vw, 13rem);
  opacity: var(--paw-page-art-bottom-opacity, 0.2);
  top: auto;
}

body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface > * {
  position: relative;
  z-index: 1;
}

body.home .paw-main-surface::before,
body.home .paw-main-surface::after {
  display: none;
}

body.paw-page-tools {
  --paw-page-art: image-set(
    url("../images/paw-tools-planning-hero-1344.avif") type("image/avif") 1x,
    url("../images/paw-tools-planning-hero-1344.webp") type("image/webp") 1x
  );
  --paw-page-art-position: right center;
}

body.paw-page-dashboard {
  --paw-page-art: image-set(
    url("../images/paw-dashboard-subtle-header-hero-1344.avif") type("image/avif") 1x,
    url("../images/paw-dashboard-subtle-header-hero-1344.webp") type("image/webp") 1x
  );
  --paw-page-art-opacity: 0.22;
}

body.paw-page-budget,
body.paw-guide-realistic-wedding-budget {
  --paw-page-art: image-set(
    url("../images/paw-guide-budget-frame-card-900.avif") type("image/avif") 1x,
    url("../images/paw-guide-budget-frame-card-900.webp") type("image/webp") 1x
  );
}

body.paw-page-checklist,
body.paw-guide-wedding-planning-checklist-timeline {
  --paw-page-art: image-set(
    url("../images/paw-guide-checklist-route-card-900.avif") type("image/avif") 1x,
    url("../images/paw-guide-checklist-route-card-900.webp") type("image/webp") 1x
  );
}

body.paw-page-guests,
body.paw-guide-wedding-guest-list-venue-capacity {
  --paw-page-art: image-set(
    url("../images/paw-guide-guests-capacity-card-900.avif") type("image/avif") 1x,
    url("../images/paw-guide-guests-capacity-card-900.webp") type("image/webp") 1x
  );
}

body.paw-page-vendors,
body.paw-guide-wedding-vendor-booking-order {
  --paw-page-art: image-set(
    url("../images/paw-vendor-decision-balance-card-900.avif") type("image/avif") 1x,
    url("../images/paw-vendor-decision-balance-card-900.webp") type("image/webp") 1x
  );
}

.paw-featured-callout {
  overflow: hidden;
}

.paw-featured-callout::before {
  background-image:
    linear-gradient(90deg, rgba(239, 228, 208, 0.98) 0%, rgba(239, 228, 208, 0.82) 58%, rgba(239, 228, 208, 0.16) 100%),
    image-set(
      url("../images/paw-dashboard-subtle-header-hero-1344.avif") type("image/avif") 1x,
      url("../images/paw-dashboard-subtle-header-hero-1344.webp") type("image/webp") 1x
    );
  background-position: center, right center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.paw-featured-callout > * {
  position: relative;
  z-index: 1;
}

.paw-callout {
  background: var(--paw-cream-tint);
  border: 1px solid var(--paw-line);
  border-radius: var(--wp--custom--radius--large);
}

.paw-site-footer {
  background: var(--paw-ink-deep);
  color: var(--wp--preset--color--on-dark);
}

.paw-site-footer a {
  color: var(--wp--preset--color--on-dark);
}

.paw-site-footer .wp-block-navigation-item__content {
  color: var(--wp--preset--color--on-dark);
}

.paw-site-footer .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--champagne);
}

.paw-footer-brand {
  color: var(--paw-on-dark);
}

.paw-footer-brand .paw-rings::before {
  color: var(--paw-on-dark);
}

.paw-footer-brand .paw-rings::after {
  color: var(--paw-champagne);
}

.wp-block-post-featured-image img {
  border-radius: var(--wp--custom--radius--medium);
  height: auto;
}

@media (max-width: 781px) {
  .paw-site-header__inner {
    gap: 0.75rem;
  }

  .paw-site-header__actions {
    flex: 0 0 auto;
    gap: 0.5rem;
  }

  .paw-site-header__actions .wp-block-button__link {
    padding-inline: 0.5rem;
    white-space: nowrap;
  }

  .paw-site-header .wp-block-group.alignwide {
    align-items: center;
  }

  .paw-site-header .paw-brand__link {
    flex: 0 1 auto;
    font-size: 1.15rem;
    gap: 0.55rem;
    min-width: 0;
    white-space: nowrap;
  }

  .paw-site-header .paw-rings {
    flex: 0 0 1.75rem;
    min-width: 1.75rem;
  }

  .paw-hero-heading {
    max-width: 100%;
  }

  .paw-hero::before {
    background-image:
      linear-gradient(160deg, rgba(18, 32, 20, 0.96) 0%, rgba(18, 32, 20, 0.78) 48%, rgba(18, 32, 20, 0.42) 100%),
      image-set(
        url("../images/paw-home-hero-botanical-hero-768.avif") type("image/avif") 1x,
        url("../images/paw-home-hero-botanical-hero-768.webp") type("image/webp") 1x
      );
    background-position: center, right center;
    opacity: 1;
  }

  body.paw-page-tools,
  body.home,
  body.paw-page-dashboard,
  body.paw-page-budget,
  body.paw-page-checklist,
  body.paw-page-guests,
  body.paw-page-vendors,
  body.paw-guide-realistic-wedding-budget,
  body.paw-guide-wedding-planning-checklist-timeline,
  body.paw-guide-wedding-guest-list-venue-capacity,
  body.paw-guide-wedding-vendor-booking-order {
    --paw-page-art-opacity: 0.18;
    --paw-page-art-bottom-opacity: 0.14;
  }

  body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface::before {
    height: clamp(9rem, 28vw, 12rem);
  }

  body:is(.home, .paw-page-tools, .paw-page-dashboard, .paw-page-budget, .paw-page-checklist, .paw-page-guests, .paw-page-vendors, .paw-guide-realistic-wedding-budget, .paw-guide-wedding-planning-checklist-timeline, .paw-guide-wedding-guest-list-venue-capacity, .paw-guide-wedding-vendor-booking-order) .paw-main-surface::after {
    height: clamp(6rem, 20vw, 9rem);
  }

  .paw-featured-callout::before {
    background-image:
      linear-gradient(180deg, rgba(239, 228, 208, 0.94) 0%, rgba(239, 228, 208, 0.72) 72%, rgba(239, 228, 208, 0.3) 100%),
      image-set(
        url("../images/paw-dashboard-subtle-header-hero-768.avif") type("image/avif") 1x,
        url("../images/paw-dashboard-subtle-header-hero-768.webp") type("image/webp") 1x
      );
    background-position: center, center bottom;
  }

  body.paw-page-tools {
    --paw-page-art: image-set(
      url("../images/paw-tools-planning-hero-768.avif") type("image/avif") 1x,
      url("../images/paw-tools-planning-hero-768.webp") type("image/webp") 1x
    );
  }

  body.paw-page-dashboard {
    --paw-page-art: image-set(
      url("../images/paw-dashboard-subtle-header-hero-768.avif") type("image/avif") 1x,
      url("../images/paw-dashboard-subtle-header-hero-768.webp") type("image/webp") 1x
    );
  }

  body.paw-page-budget,
  body.paw-guide-realistic-wedding-budget {
    --paw-page-art: image-set(
      url("../images/paw-guide-budget-frame-card-600.avif") type("image/avif") 1x,
      url("../images/paw-guide-budget-frame-card-600.webp") type("image/webp") 1x
    );
  }

  body.paw-page-checklist,
  body.paw-guide-wedding-planning-checklist-timeline {
    --paw-page-art: image-set(
      url("../images/paw-guide-checklist-route-card-600.avif") type("image/avif") 1x,
      url("../images/paw-guide-checklist-route-card-600.webp") type("image/webp") 1x
    );
  }

  body.paw-page-guests,
  body.paw-guide-wedding-guest-list-venue-capacity {
    --paw-page-art: image-set(
      url("../images/paw-guide-guests-capacity-card-600.avif") type("image/avif") 1x,
      url("../images/paw-guide-guests-capacity-card-600.webp") type("image/webp") 1x
    );
  }

  body.paw-page-vendors,
  body.paw-guide-wedding-vendor-booking-order {
    --paw-page-art: image-set(
      url("../images/paw-vendor-decision-balance-card-600.avif") type("image/avif") 1x,
      url("../images/paw-vendor-decision-balance-card-600.webp") type("image/webp") 1x
    );
  }

  .wp-site-blocks::before {
    left: -28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
