/* ============================================================
   RAPTURE Photography — shared settings and dark theme

   Light mode intentionally has no theme overrides here. The
   existing page styles remain the source of truth for light mode.
============================================================ */

/* ── Settings control ─────────────────────────────────────── */

.site-settings {
  position: relative;
  z-index: 260;
  flex: 0 0 auto;
  margin-left: 1.25rem;
}

.site-settings__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-light);
  transition: color 0.2s ease, opacity 0.2s ease;
}

.site-settings__toggle:hover,
.site-settings__toggle:focus-visible {
  color: var(--color-accent);
}

html[data-theme="dark"] .site-settings__toggle {
  color: #C9D9E8 !important;
}

.site-settings__toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.site-settings__toggle:hover,
.site-settings__toggle:focus-visible,
.site-settings__toggle[aria-expanded="true"] {
  color: #4a7fb5;
}

.site-settings__toggle:focus-visible,
.site-settings__close:focus-visible,
.site-settings__switch:focus-visible {
  outline: 2px solid rgba(74, 127, 181, 0.35);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-settings__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(19rem, calc(100vw - 2rem));
  padding: 1.15rem 1.2rem 1.25rem;
  color: #1e2329;
  background: #EDF5FD;
  border: 1px solid #d6e4f0;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(30, 35, 41, 0.1);
}

.site-settings__panel[hidden] {
  display: none;
}

.site-settings__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #d6e4f0;
}

.site-settings__title {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-settings__close {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5a6472;
  font-size: 1.25rem;
  line-height: 1;
}

.site-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
}

.site-settings__row-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.site-settings__row-title {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.site-settings__row-note {
  color: #5a6472;
  font-size: 0.7rem;
  line-height: 1.45;
}

.site-settings__row-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5a6472;
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-settings__row-link:hover,
.site-settings__row-link:focus-visible {
  color: #0D2642;
}

html[data-theme="dark"] .site-settings__row-link {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .site-settings__row-link:hover,
html[data-theme="dark"] .site-settings__row-link:focus-visible {
  color: var(--color-text);
}

.site-settings__switch {
  position: relative;
  flex: 0 0 auto;
  width: 3.15rem;
  height: 1.8rem;
  padding: 0.2rem;
  border: 0;
  border-radius: 999px;
  background: #66717D;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.site-settings__switch[aria-checked="true"] {
  background: #34C759;
}

.site-settings__switch-knob {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #F6F9FC;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.site-settings__switch[aria-checked="true"] .site-settings__switch-knob {
  transform: translateX(1.35rem);
}

/* ── Shared dark palette ──────────────────────────────────── */

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body {
  color: #DDEBFA !important;
  background: #0D2642 !important;
}

/* Main-page variables feed the existing light-mode design without
   changing its layout, spacing, photography, or animations. */
html[data-theme="dark"] {
  --bg-top: #0D2642;
  --bg-bottom: #0D2642;
  --color-text: #DDEBFA;
  --color-text-light: #AFC2D6;
  --color-text-muted: #AFC2D6;
  --color-accent: #C9D9E8;
  --color-divider: #2B4661;
  --color-polaroid-bg: #F6F9FC;
}

html[data-theme="dark"] .nav,
html[data-theme="dark"] .gallery-nav,
html[data-theme="dark"] .location-nav,
html[data-theme="dark"] .info-nav,
html[data-theme="dark"] .highlights-nav,
html[data-theme="dark"] .photo-nav {
  background: #0D2642 !important;
  border-color: #2B4661 !important;
}

html[data-theme="dark"] .mobile-menu {
  background: #0D2642 !important;
}

html[data-theme="dark"] .nav__logo,
html[data-theme="dark"] .nav__link,
html[data-theme="dark"] .mobile-menu__link,
html[data-theme="dark"] .gallery-nav__brand,
html[data-theme="dark"] .gallery-nav__back,
html[data-theme="dark"] .location-nav__brand,
html[data-theme="dark"] .location-nav__back,
html[data-theme="dark"] .info-nav__brand,
html[data-theme="dark"] .info-nav__back,
html[data-theme="dark"] .highlights-nav__brand,
html[data-theme="dark"] .highlights-nav__back,
html[data-theme="dark"] .photo-nav__brand,
html[data-theme="dark"] .photo-nav__back,
html[data-theme="dark"] .hero__title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .about__signature,
html[data-theme="dark"] .gallery-hero__title,
html[data-theme="dark"] .location-hero__title,
html[data-theme="dark"] .highlights-hero__title,
html[data-theme="dark"] .info-hero__title,
html[data-theme="dark"] .info-content h2,
html[data-theme="dark"] .photo-details__price,
html[data-theme="dark"] .photo-details__title,
html[data-theme="dark"] .photo-not-found h1 {
  color: #DDEBFA !important;
}

html[data-theme="dark"] .hero__subtitle,
html[data-theme="dark"] .about__text p,
html[data-theme="dark"] .gallery-hero__subtitle,
html[data-theme="dark"] .location-hero__count,
html[data-theme="dark"] .location-hero__note,
html[data-theme="dark"] .highlights-hero__subtitle,
html[data-theme="dark"] .info-hero__subtitle,
html[data-theme="dark"] .info-content p,
html[data-theme="dark"] .info-content li,
html[data-theme="dark"] .photo-details__meta-label,
html[data-theme="dark"] .photo-details__license,
html[data-theme="dark"] .photo-details__agreement,
html[data-theme="dark"] .photo-not-found p,
html[data-theme="dark"] .catalog-empty,
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer__links a,
html[data-theme="dark"] .gallery-footer p,
html[data-theme="dark"] .gallery-footer__links a,
html[data-theme="dark"] .location-footer p,
html[data-theme="dark"] .location-footer__links a,
html[data-theme="dark"] .info-footer p,
html[data-theme="dark"] .info-footer__links a,
html[data-theme="dark"] .highlights-footer p,
html[data-theme="dark"] .highlights-footer__links a,
html[data-theme="dark"] .photo-footer p,
html[data-theme="dark"] .photo-footer__links a,
html[data-theme="dark"] .footer-verse p {
  color: #AFC2D6 !important;
}

/* Failed-image placeholder tile (see .catalog-photo-unavailable) */
html[data-theme="dark"] .catalog-photo-unavailable {
  color: #AFC2D6 !important;
}

html[data-theme="dark"] .nav__search-toggle,
html[data-theme="dark"] .nav__hamburger span,
html[data-theme="dark"] .mobile-menu__close,
html[data-theme="dark"] .location-list__item,
html[data-theme="dark"] .scroll-more__word,
html[data-theme="dark"] .scroll-more__arrow {
  color: #C9D9E8 !important;
}

html[data-theme="dark"] .nav__hamburger span {
  background-color: #C9D9E8 !important;
}

html[data-theme="dark"] .hero__polaroid,
html[data-theme="dark"] .polaroid,
html[data-theme="dark"] .photo-figure,
html[data-theme="dark"] .community-card__figure {
  background: #F6F9FC !important;
}

/* Community photographer-selection page (galleries/community.html) —
   uses the same dark palette tiers as the existing gallery pages. */
html[data-theme="dark"] .community-hero__brand-word,
html[data-theme="dark"] .community-hero__brand-symbol,
html[data-theme="dark"] .community-card__name {
  color: #DDEBFA !important;
}

html[data-theme="dark"] .community-hero__brand-symbol {
  stroke: #DDEBFA;
}

html[data-theme="dark"] .community-hero__question,
html[data-theme="dark"] .community-card__view {
  color: #AFC2D6 !important;
}

html[data-theme="dark"] .community-loading {
  color: #AFC2D6 !important;
}

html[data-theme="dark"] .community-divider {
  border-color: #2B4661 !important;
}

html[data-theme="dark"] .portfolio-search-panel {
  background: #142F4C !important;
  border-color: #2B4661 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .portfolio-search__input,
html[data-theme="dark"] .portfolio-search__clear {
  background: #132E4A !important;
  border-color: #496681 !important;
  color: #DDEBFA !important;
}

html[data-theme="dark"] .portfolio-search__input::placeholder,
html[data-theme="dark"] .portfolio-search__result-meta,
html[data-theme="dark"] .portfolio-search__status,
html[data-theme="dark"] .portfolio-search__empty {
  color: #AFC2D6 !important;
}

html[data-theme="dark"] .site-settings__panel {
  color: #DDEBFA;
  background: #142F4C;
  border-color: #2B4661;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .site-settings__heading {
  border-color: #2B4661;
}

html[data-theme="dark"] .site-settings__close,
html[data-theme="dark"] .site-settings__row-note {
  color: #AFC2D6;
}

html[data-theme="dark"] .gallery-hero__rule,
html[data-theme="dark"] .gallery-divider,
html[data-theme="dark"] .gallery-footer,
html[data-theme="dark"] .location-hero__rule,
html[data-theme="dark"] .location-divider,
html[data-theme="dark"] .location-footer,
html[data-theme="dark"] .info-hero__rule,
html[data-theme="dark"] .info-divider,
html[data-theme="dark"] .info-footer,
html[data-theme="dark"] .highlights-hero__rule,
html[data-theme="dark"] .highlights-divider,
html[data-theme="dark"] .highlights-footer,
html[data-theme="dark"] .photo-details__rule,
html[data-theme="dark"] .photo-footer {
  border-color: #2B4661 !important;
}

html[data-theme="dark"] .info-content a,
html[data-theme="dark"] .photo-details__license a,
html[data-theme="dark"] .photo-not-found a {
  color: #C9D9E8 !important;
}

html[data-theme="dark"] .photo-btn--download {
  background-color: #142F4C;
  color: #DDEBFA;
  border-color: #496681;
}

html[data-theme="dark"] .photo-btn--download:disabled,
html[data-theme="dark"] .photo-btn--print {
  color: #AFC2D6;
  border-color: #2B4661;
}

html[data-theme="dark"] .photo-details__checkout-note {
  color: #AFC2D6;
  background-color: #142F4C;
  border-color: #2B4661;
}

html[data-theme="dark"] .location-list__item:hover,
html[data-theme="dark"] .location-list__item:active {
  color: #C9D9E8 !important;
}

body.theme-transition,
body.theme-transition .nav,
body.theme-transition .gallery-nav,
body.theme-transition .location-nav,
body.theme-transition .info-nav,
body.theme-transition .highlights-nav,
body.theme-transition .photo-nav,
body.theme-transition .mobile-menu,
body.theme-transition .portfolio-search-panel,
body.theme-transition .site-settings__panel,
body.theme-transition .photo-figure {
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

/* The existing mobile nav keeps its search control on the right;
   the new settings control sits just beyond it. */
@media (max-width: 1200px) {
  .nav .site-settings {
    position: absolute;
    right: 1.5rem;
    margin-left: 0;
  }

  .nav .nav__search-toggle {
    right: 4.25rem;
  }
}

@media (max-width: 768px) {
  .site-settings__panel {
    width: min(19rem, calc(100vw - 1.5rem));
  }
}