/*
 * Site notices: the notification bar under the header, the pop-up, and the
 * vacation note on the thank-you page (functions/site-notices.php).
 *
 * Loaded as its own small file rather than through the Tailwind bundle, so the
 * component can ship without rebuilding dist/theme-styles.css.
 */

.wr-notice-bar {
   background: var(--color-accent-tint, #EFE9DD);
   border-bottom: 1px solid var(--color-line, #E8E5DE);
   color: var(--color-ink, #1A1A1A);
}

.wr-notice-bar__text {
   max-width: 72rem;
   margin: 0 auto;
   padding: 0.6rem 1rem;
   font-size: 0.875rem;
   line-height: 1.4;
   text-align: center;
   text-wrap: balance;
}

.wr-notice-bar__link {
   margin-left: 0.35rem;
   color: var(--color-accent-d, #B81F1F);
   font-weight: 600;
   text-decoration: underline;
   text-underline-offset: 2px;
   white-space: nowrap;
}

.wr-popup {
   /* Tailwind's preflight sets margin: 0 on everything, and a native <dialog>
      centres itself with margin: auto, so it landed top-left. Pin it. */
   position: fixed;
   inset: 0;
   margin: auto;
   height: fit-content;
   max-height: calc(100dvh - 2rem);
   overflow-y: auto;
   width: min(26rem, calc(100vw - 2rem));
   padding: 1.75rem 1.5rem 1.5rem;
   border: 0;
   border-radius: 14px;
   background: var(--color-surface, #FFFFFF);
   color: var(--color-ink, #1A1A1A);
   box-shadow: 0 24px 60px rgba(26, 26, 26, 0.22);
}

.wr-popup::backdrop {
   background: rgba(26, 26, 26, 0.45);
}

.wr-popup__close {
   position: absolute;
   top: 0.5rem;
   right: 0.6rem;
   width: 2.25rem;
   height: 2.25rem;
   border: 0;
   background: none;
   color: inherit;
   font-size: 1.6rem;
   line-height: 1;
   cursor: pointer;
}

.wr-popup__title {
   margin: 0 1.5rem 0.75rem 0;
   font-size: 1.25rem;
   line-height: 1.3;
}

.wr-popup__body {
   font-size: 0.95rem;
   line-height: 1.55;
}

.wr-popup__body p {
   margin: 0 0 0.75rem;
}

.wr-popup__ok {
   display: block;
   width: 100%;
   margin-top: 1rem;
   padding: 0.8rem 1rem;
   border: 0;
   border-radius: 999px;
   background: var(--color-red, #EE3333);
   color: #FFFFFF;
   font-weight: 600;
   cursor: pointer;
}

.wr-popup__ok:hover {
   background: var(--color-accent-d, #B81F1F);
}

.wr-popup__close:focus-visible,
.wr-popup__ok:focus-visible,
.wr-notice-bar__link:focus-visible {
   outline: 2px solid var(--color-accent-d, #B81F1F);
   outline-offset: 2px;
}

.wr-vacation-note {
   margin: 0 0 1.5rem;
   padding: 1rem 1.15rem;
   border: 1px solid #F1C9B8;
   border-radius: 10px;
   background: #FDF1EC;
}

.wr-vacation-note p {
   margin: 0.35rem 0 0;
}

@media (prefers-reduced-motion: no-preference) {
   .wr-popup[open] {
      animation: wr-popup-in 0.22s ease-out;
   }
   @keyframes wr-popup-in {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
   }
}