/* The header uses the same palette as the selected website theme. */
.site-shell[data-theme] .site-header {
  background: var(--theme-gradient);
  border-bottom: 2px solid var(--orange);
  color: #fff;
  box-shadow: 0 6px 22px #15264124;
}
.site-shell[data-theme="default"] .site-header {
  background: linear-gradient(108deg, #102b56 0%, #18478a 76%, #8b3e23 100%);
}
.site-header > div > a > img { background: #fff; border-radius: 10px; padding: 5px; }
.site-shell .site-header > div > a .text-slate-900 { color: #fff; }
.site-shell .site-header > div > a .text-slate-500 { color: #e7edfa; }
.site-shell .site-header > div > nav a { color: #fff; }
.site-shell .site-header > div > nav a:hover,
.site-shell .site-header > div > nav a[aria-current="page"] { background: #ffffff29; color: #fff; }
.site-shell[data-theme] .site-header .header-cta { background: #fff; color: var(--brand-dark); box-shadow: none; }
.site-shell[data-theme] .site-header .header-cta:hover { background: var(--theme-soft); }
.site-header #menuToggle { color: #fff; border-color: #ffffff73; }

.home-showcase { margin-bottom: 28px; }
.home-showcase + .quick-links { margin-top: 0; }
.home-carousel { position: relative; isolation: isolate; }
.carousel-stage { position: relative; aspect-ratio: 16 / 5; overflow: hidden; background: var(--theme-hero); touch-action: pan-y pinch-zoom; }
.carousel-frame { position: absolute; inset: 0; }
.carousel-slide-link { display: block; width: 100%; height: 100%; }
.carousel-slide-link:focus-visible { outline-offset: -4px; }
.carousel-frame picture { display: block; width: 100%; height: 100%; }
.carousel-frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel-arrow, .carousel-playback {
  --carousel-button-fill: rgb(255 255 255 / 52%);
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--carousel-button-fill);
  color: #26364f;
  box-shadow: 0 2px 10px #15264124;
}
.carousel-arrow { top: 50%; translate: 0 -50%; }
.carousel-prev { left: clamp(8px, 1.6vw, 30px); }
.carousel-next { right: clamp(8px, 1.6vw, 30px); }
.carousel-playback { bottom: clamp(5px, 1.25vw, 24px); right: clamp(8px, 1.6vw, 30px); }
.carousel-arrow:focus-visible, .carousel-playback:focus-visible {
  --carousel-button-fill: rgb(255 255 255 / 96%);
  border-radius: 50%;
  color: var(--brand);
}
@media (hover: hover) {
  .carousel-arrow:hover, .carousel-playback:hover {
    --carousel-button-fill: rgb(255 255 255 / 96%);
    color: var(--brand);
  }
}
.site-shell .carousel-controls button > .ui-icon {
  width: 18px;
  height: 18px;
  margin: 0;
  stroke-width: 2;
}
/* Balance the open edge of the left chevron against its point. */
.site-shell .carousel-prev > .ui-icon { translate: -0.2px 0; }
.carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: clamp(5px, 1.25vw, 24px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  max-width: calc(100% - 116px);
  overflow-x: auto;
  border-radius: 24px;
  padding-inline: 4px;
  background: #14223a8f;
}
.carousel-indicators button { flex: 0 0 24px; height: 44px; display: grid; place-items: center; }
.carousel-indicators button[aria-current="true"] { flex-basis: 32px; }
.carousel-indicators button::before { content: ''; width: 8px; height: 8px; background: #fff; border-radius: 12px; }
.carousel-indicators button[aria-current="true"]::before { width: 24px; background: var(--orange); outline: 1px solid #fff; }
.carousel-indicators button:focus-visible { outline-offset: -3px; }
.carousel-play,
[data-paused="true"] .carousel-pause { display: none; }
[data-paused="true"] .carousel-play { display: inline-block; }
.carousel-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.showcase-placeholder {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  min-height: 320px;
  padding: clamp(24px, 4vw, 52px) max(24px, calc((100% - 1176px) / 2));
  background: var(--theme-hero);
  color: var(--brand-dark);
}
.showcase-placeholder:not(:has(img)) { grid-template-columns: 1fr; }
.showcase-placeholder h1 { font-size: clamp(26px, 3.4vw, 46px); font-weight: 600; line-height: 1.4; }
.showcase-placeholder p { margin-top: 12px; color: var(--muted); }
.showcase-placeholder img { max-height: 280px; width: 100%; object-fit: contain; }

.slide-admin-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.slide-admin-toolbar p, .slide-admin-help, .slide-admin-card p { font-size: 13px; color: var(--muted); }
.slide-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.slide-admin-card, .slide-admin-empty, .slide-admin-form { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.slide-admin-card > img, .slide-admin-preview { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: contain; background: var(--surface); }
.slide-admin-card-body { padding: 18px; overflow-wrap: anywhere; }
.slide-admin-card h2 { font-size: 17px; margin-bottom: 5px; }
.slide-admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.slide-admin-card .slide-admin-actions a, .slide-admin-card .slide-admin-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--brand); }
.slide-admin-card .slide-admin-actions button { color: #a4233b; }
.slide-admin-card .slide-admin-actions a:hover, .slide-admin-card .slide-admin-actions button:hover { background: var(--surface); }
.slide-state { color: #596b82; }
.slide-state.is-visible { color: #16683f; }
.slide-admin-empty { padding: 42px 20px; text-align: center; color: var(--muted); }
.slide-admin-empty > .ui-icon { width: 32px; height: 32px; color: var(--brand); margin-bottom: 10px; }
.slide-admin-form { max-width: 760px; padding: clamp(16px, 4vw, 32px); }
.slide-admin-form > label { display: block; margin-top: 18px; }
.slide-admin-form > .slide-admin-check { display: flex; align-items: center; gap: 8px; }
.slide-admin-help { margin-top: 7px; }
.slide-admin-preview { border-radius: 10px; }
.slide-admin-mobile-preview { width: 120px; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: var(--surface); margin-top: 8px; }

.slide-detail { padding-block: clamp(24px, 5vw, 56px); }
.slide-detail-back { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 14px; }
.slide-detail-back:hover { text-decoration: underline; }
.slide-detail header { margin-block: 20px; }
.slide-detail h1 { color: var(--brand-dark); font-size: clamp(26px, 4vw, 44px); overflow-wrap: anywhere; }
.slide-detail-picture, .slide-detail-picture img { display: block; width: 100%; }
.slide-detail-picture { overflow: hidden; border-radius: var(--radius); background: var(--theme-hero); }
.slide-detail-picture img { max-height: 560px; object-fit: contain; }
.slide-detail-copy { margin-block: 24px; padding: clamp(18px, 4vw, 34px); border: 1px solid var(--theme-border); border-radius: var(--radius); background: #fff; }
.slide-detail-copy h2 { color: var(--brand-dark); font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.slide-detail-copy .article-content { white-space: pre-wrap; line-height: 1.9; }
.slide-detail > .button { margin-top: 16px; }

@media (max-width: 767px) {
  .home-carousel.has-mobile-art .carousel-stage { aspect-ratio: 1; }
  .home-carousel:not(.has-mobile-art) .carousel-playback { right: 52px; }
  .home-carousel:not(.has-mobile-art) .carousel-indicators { max-width: calc(100% - 192px); }
  .carousel-arrow, .carousel-playback { background: transparent; box-shadow: none; isolation: isolate; }
  .carousel-arrow::before, .carousel-playback::before { content: ''; position: absolute; inset: 7px; background: var(--carousel-button-fill); border-radius: 50%; z-index: -1; transition: background-color .18s ease; }
  .carousel-indicators { background: linear-gradient(transparent 22%, #14223a9c 22% 78%, transparent 78%); }
  .showcase-placeholder { grid-template-columns: 1fr; gap: 12px; padding-inline: 20px; }
  .showcase-placeholder img { max-height: 160px; }
  .showcase-placeholder .eyebrow { margin-bottom: 12px; }
  .showcase-placeholder .hero-actions { margin-top: 18px; }
}