/* Walmsburg Castle – adjustable homepage header image.
   This file only controls the existing composite hero image. */

:root {
  --wc-hero-size: 100%;
  --wc-hero-x: 50%;
  --wc-hero-y: 50%;
}

.full-hero.modern-hero.arc-hero {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  /* Same ratio as the supplied 1672×941 image so the default view is not cropped. */
  aspect-ratio: 1672 / 941 !important;
  overflow: hidden !important;
  background: #10283c !important;
}

.full-hero.modern-hero.arc-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  background-image: url('/images/walmsburg-header-final-20260930.png') !important;
  background-position: var(--wc-hero-x) var(--wc-hero-y) !important;
  background-repeat: no-repeat !important;
  background-size: var(--wc-hero-size) auto !important;
  background-color: #10283c !important;
  pointer-events: none !important;
}

/* The composite image already contains dogs, headline, intro and buttons. */
.full-hero.modern-hero.arc-hero > .hero-background,
.full-hero.modern-hero.arc-hero > .hero-darken,
.full-hero.modern-hero.arc-hero > .modern-hero-layout,
.full-hero.modern-hero.arc-hero > .portrait-source-note,
.full-hero.modern-hero.arc-hero > .hero-image-note {
  display: none !important;
}

/* Admin-only editor UI injected by header-adjustable-image-20260930.js */
#wc-header-edit-button {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 100000;
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  background: #12284a;
  color: #fff;
  font: 700 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.20);
  cursor: pointer;
}
#wc-header-edit-button:hover { filter: brightness(1.08); }
#wc-header-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7,22,39,.64);
  backdrop-filter: blur(6px);
}
#wc-header-editor {
  width: min(920px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 20px;
  padding: 22px;
  background: #fff;
  color: #12284a;
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
  font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
}
#wc-header-editor h2 { margin: 0 0 6px; font-size: 1.35rem; }
#wc-header-editor p { margin: 0 0 18px; color: #5f6f84; line-height: 1.5; }
#wc-header-editor-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  border-radius: 14px;
  background-color: #10283c;
  background-image: url('/images/walmsburg-header-final-20260930.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: 50% 50%;
  border: 1px solid #d7e0e8;
}
.wc-header-control-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}
.wc-header-control {
  display: grid;
  gap: 7px;
  min-width: 0;
  font-weight: 700;
  font-size: .92rem;
}
.wc-header-control output { font-weight: 500; color: #65758c; }
.wc-header-control input[type="range"] { width: 100%; }
.wc-header-editor-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 20px;
}
.wc-header-editor-actions button {
  border: 0;
  border-radius: 999px;
  padding: 11px 17px;
  font: 800 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor: pointer;
}
.wc-header-editor-actions .wc-primary { background: #12284a; color: #fff; }
.wc-header-editor-actions .wc-secondary { background: #fff; color: #12284a; border: 1px solid #bcc9d5; }
#wc-header-editor-status { min-height: 1.35em; margin: 12px 0 0; font-size: .9rem; }
#wc-header-editor-status.error { color: #9b2c23; }
#wc-header-editor-status.ok { color: #27653b; }

@media (max-width: 720px) {
  .wc-header-control-grid { grid-template-columns: 1fr; }
  #wc-header-editor { padding: 17px; }
  #wc-header-edit-button { left: 10px; bottom: 72px; }
}


/* Clickable areas over the two breed buttons that are part of the composite header image.
   Their pixel positions are recalculated by JS whenever the header image is zoomed or moved. */
.wc-hero-image-link {
  position: absolute;
  z-index: 8;
  display: block;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  font-size: 0;
  text-decoration: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.wc-hero-image-link:focus-visible {
  outline: 3px solid rgba(255,255,255,.96);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(18,40,74,.55);
}