/*
  Stream Catcher skin for the NAOCA viewer plugin (/events and /list).

  NAOCA ships a light Bootstrap theme and injects Vue scoped styles at
  runtime, so every rule here is prefixed with #naoca-plugin to outrank
  `.class[data-v-xxx]`. !important is only used where NAOCA itself uses it
  or sets an inline style.

  The live stream player and its comments render inside a cross-origin
  iframe with a transparent background and fixed grey text. That is why the
  plugin sits on a light parchment card rather than the dark page: it keeps
  the iframe readable. Nothing inside that iframe can be styled from here.
*/

:root {
  --sc-ink: #0b0a08;
  --sc-parchment: #eae2d4;
  --sc-taupe: #93887a;
  --sc-amber: #f19a38;
  --sc-paper: #f3eee5;
  --sc-paper-raised: #fbf8f2;
  --sc-text: #1c1a16;
  --sc-muted: #6b6258;
  --sc-link: #9a5412;
  --sc-line: rgba(11, 10, 8, 0.1);
  --sc-radius: clamp(20px, 2.2vw, 30px);
  --sc-display: "Plein", Arial, sans-serif;
  --sc-sans: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.sc-plugin-surface {
  max-width: 1152px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 32px);
  background: var(--sc-paper);
  color: var(--sc-text);
  border-radius: var(--sc-radius);
}

#naoca-plugin,
#naoca-plugin .n-btn,
#naoca-plugin .n-form-control,
#naoca-plugin .n-lead {
  font-family: var(--sc-sans);
  color: var(--sc-text);
}

#naoca-plugin { background: transparent; }
#naoca-plugin a { color: var(--sc-link); }
#naoca-plugin a:hover { color: var(--sc-ink); }
#naoca-plugin .n-plugin-version { display: none; }
#naoca-plugin .n-bg-light { background-color: transparent !important; }

/* Buttons ----------------------------------------------------------- */

#naoca-plugin .n-btn-outline-primary,
#naoca-plugin .n-btn-outline-secondary {
  color: var(--sc-ink);
  border: 1px solid var(--sc-ink);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.875rem;
  background: transparent;
}
#naoca-plugin .n-btn-outline-primary:hover,
#naoca-plugin .n-btn-outline-primary:focus,
#naoca-plugin .n-btn-outline-secondary:hover {
  color: var(--sc-parchment);
  background: var(--sc-ink);
  border-color: var(--sc-ink);
  box-shadow: none;
}
#naoca-plugin .n-btn-outline-primary.disabled,
#naoca-plugin .n-btn-outline-primary:disabled {
  color: var(--sc-muted);
  border-color: var(--sc-line);
  background: transparent;
}
#naoca-plugin .n-btn:focus-visible { outline: 2px solid var(--sc-amber); outline-offset: 2px; }

/* Event page: memorial header ---------------------------------------- */

#naoca-plugin .n-client-container { padding: 0; }

/* The forest banner is NAOCA's organisation wallpaper. The plugin sets it
   inline as a 1.4MB PNG; this self-hosted WebP copy (80KB) replaces it, and the
   gradient keeps the name legible. If the wallpaper changes in NAOCA's
   dashboard, re-export it to /naoca-wallpaper.webp. */
#naoca-plugin .n-client-header-container {
  background-color: var(--sc-ink) !important;
  background-image:
    linear-gradient(90deg, rgba(11, 10, 8, 0.72) 0%, rgba(11, 10, 8, 0.45) 55%, rgba(11, 10, 8, 0.2) 100%),
    url("/naoca-wallpaper.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: calc(var(--sc-radius) - 8px);
  overflow: hidden;
}
#naoca-plugin .n-client-header {
  background: none;
  text-shadow: none;
  padding: clamp(24px, 4vw, 48px);
}
#naoca-plugin .n-client-profile-picture > img,
#naoca-plugin .n-client-profile-picture-placeholder > img {
  width: clamp(140px, 18vw, 200px);
  min-width: 0;
  height: clamp(140px, 18vw, 200px);
  object-fit: cover;
  border: 2px solid rgba(241, 154, 56, 0.7);
  box-shadow: 0 0 0 6px rgba(234, 226, 212, 0.06);
  background-color: #1a1814;
}
#naoca-plugin .n-client-name-container { padding-left: clamp(0px, 2vw, 16px) !important; }
#naoca-plugin .n-client-name {
  font-family: var(--sc-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sc-parchment);
  text-shadow: 0 2px 16px rgba(11, 10, 8, 0.55);
}
#naoca-plugin .n-client-date-range {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234, 226, 212, 0.85);
  text-shadow: 0 1px 10px rgba(11, 10, 8, 0.8);
}
/* Narrow screens stack the header centred, over the brightest part of the forest. */
@media (max-width: 767px) {
  #naoca-plugin .n-client-header-container {
    background-image:
      linear-gradient(rgba(11, 10, 8, 0.55), rgba(11, 10, 8, 0.55)),
      url("/naoca-wallpaper.webp") !important;
  }
}
#naoca-plugin .n-client-header .n-btn.n-rounded-circle {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent !important;
  border: 1px solid rgba(234, 226, 212, 0.3) !important;
  box-shadow: none !important;
  color: var(--sc-parchment) !important;
}
#naoca-plugin .n-client-header .n-btn.n-rounded-circle:hover { border-color: var(--sc-amber) !important; color: var(--sc-amber) !important; }

/* Event page: tabs --------------------------------------------------- */

#naoca-plugin .n-tab-selection {
  gap: 4px;
  padding: 12px 0 0;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sc-line) !important;
}
#naoca-plugin .n-tab-selection button {
  min-width: 0;
  padding: 12px 20px 14px;
  font-size: 15px;
  color: var(--sc-muted);
  border-radius: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
#naoca-plugin .n-tab-selection button:hover { color: var(--sc-ink); }
#naoca-plugin .n-tab-selection button.n-active {
  color: var(--sc-ink);
  border-bottom-color: var(--sc-amber);
}
#naoca-plugin .n-tab-selection { background: transparent !important; }
#naoca-plugin .n-tab-selection-toggle { background: transparent; }
#naoca-plugin .n-tab-selection-toggle button { color: var(--sc-ink); }

/* Below 768px NAOCA stacks the tabs into a collapsible menu. */
@media (max-width: 767.98px) {
  #naoca-plugin .n-tab-selection { padding-top: 0; }
  #naoca-plugin .n-tab-selection button {
    width: 100%;
    text-align: left;
    padding: 14px 4px;
    border-bottom: 1px solid var(--sc-line);
    margin-bottom: 0;
  }
  #naoca-plugin .n-tab-selection button.n-active {
    border-bottom-color: var(--sc-line);
    box-shadow: inset 3px 0 0 var(--sc-amber);
    padding-left: 14px;
  }
}

#naoca-plugin .n-tab-content { padding-top: 24px; }
#naoca-plugin .n-tab-content .n-p-3 { padding: 0 !important; }

/* Event page: service details --------------------------------------- */

#naoca-plugin .n-lead {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-muted);
}
#naoca-plugin .n-service-venue {
  background: var(--sc-paper-raised);
  border: 1px solid var(--sc-line);
  border-radius: 16px;
  box-shadow: none;
  padding: 16px 8px 8px;
}
#naoca-plugin .n-venue-map {
  border: 0;
  border-radius: 12px;
}
#naoca-plugin .n-venue-map-get-directions a { color: var(--sc-link); font-size: 14px; }
#naoca-plugin .n-service-venue-title {
  font-family: var(--sc-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--sc-ink);
}
#naoca-plugin .n-service-venue-name { font-size: 15px; font-weight: 600; }
#naoca-plugin .n-service-venue-address { font-size: 15px; color: var(--sc-muted); }
#naoca-plugin .n-service-venue-datetime * { font-size: 15px; }
#naoca-plugin .n-service-venue-datetime small { font-size: 13px; color: var(--sc-muted); }
#naoca-plugin .n-service-venue-calendar {
  width: 80px;
  border: 1px solid var(--sc-ink);
  border-radius: 12px;
  overflow: hidden;
}
#naoca-plugin .n-service-venue-calendar-day {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink);
  background: var(--sc-paper-raised);
}
#naoca-plugin .n-service-venue-calendar-date {
  font-family: var(--sc-display);
  font-weight: 700;
  background: var(--sc-ink);
  color: var(--sc-parchment);
}

/* Event page: live stream frame -------------------------------------- */

#naoca-plugin #embed-live-stream-iframe-container {
  border-radius: 16px;
  overflow: hidden;
}

/* Event page: guest book -------------------------------------------- */

#naoca-plugin .condolences .n-card {
  background: var(--sc-paper-raised);
  border: 1px solid var(--sc-line);
  border-radius: 16px;
  box-shadow: none;
}
#naoca-plugin .condolence-container .n-lead {
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sc-text);
}

/* Modals (share, guest book editor, report) -------------------------- */

#naoca-plugin .n-modal-content {
  border: 0;
  border-radius: 20px;
  background: var(--sc-paper-raised);
}
#naoca-plugin .n-modal-title {
  font-family: var(--sc-display);
  font-weight: 700;
  font-size: 20px;
}
#naoca-plugin .n-form-control {
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  background: #fff;
}
#naoca-plugin .n-form-control:focus {
  border-color: var(--sc-amber);
  box-shadow: 0 0 0 3px rgba(241, 154, 56, 0.2);
}

/* List page ---------------------------------------------------------- */

#naoca-plugin.client-list .n-input-group { gap: 8px; }
#naoca-plugin.client-list .n-input-group .n-form-control {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px !important;
  border-right: 1px solid var(--sc-line) !important;
}
#naoca-plugin.client-list .n-input-group-append .n-btn { border-radius: 999px !important; height: 44px; padding: 0 22px; }

#naoca-plugin .n-profile-card {
  background: var(--sc-paper-raised);
  border: 1px solid var(--sc-line);
  border-radius: 16px;
  box-shadow: none;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
#naoca-plugin .n-profile-card:hover {
  transform: translateY(-2px);
  border-color: rgba(241, 154, 56, 0.7);
  box-shadow: none;
}
#naoca-plugin .n-profile-card .n-profile-picture img {
  width: 96px !important;
  height: 96px !important;
  border: 2px solid rgba(241, 154, 56, 0.55);
  box-shadow: none;
}
#naoca-plugin .n-profile-card .n-client-name {
  font-family: var(--sc-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--sc-ink);
}
#naoca-plugin .n-profile-card .n-client-aka { color: var(--sc-muted); }
#naoca-plugin .n-profile-card .n-client-dates {
  margin-top: 6px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-muted);
}

@media (prefers-reduced-motion: reduce) {
  #naoca-plugin .n-profile-card,
  #naoca-plugin .n-profile-card:hover { transition: none; transform: none; }
}