/*
 * BAS Gallery Publisher styles: the submit form, the access request form
 * and the public gallery renderer. Every design value comes from the BAS
 * tokens file (https://bas.org.in/assets/css/tokens.css) through
 * var(--bas-...). The plugin loads that file as the "bas-tokens" style.
 */

/* Submit page (WordPress page 47). */

body.page-id-47 {
  background: var(--bas-bg);
}

body.page-id-47 .entry-header {
  border-bottom: 0;
  margin: var(--bas-space-6) auto var(--bas-space-4);
  max-width: var(--bas-width-text);
  padding: 0 var(--bas-pad-page);
}

body.page-id-47 .entry-title {
  color: var(--bas-heading);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-3xl);
  font-weight: var(--bas-weight-bold);
  letter-spacing: 0;
  line-height: var(--bas-leading-tight);
  margin: 0;
}

body.page-id-47 .entry-content {
  margin-top: 0;
}

body.page-id-47 .site-main {
  padding-top: 0;
}

body.page-id-47 .entry-content > .bas-gallery-publisher {
  max-width: var(--bas-width-text) !important;
}

/* Submit and access request forms. */

.bas-gallery-publisher {
  color: var(--bas-text);
  font-family: var(--bas-font-sans);
  margin: 0 auto var(--bas-space-7);
  max-width: var(--bas-width-text);
  padding: 0 var(--bas-pad-page);
}

.bas-gallery-publisher * {
  box-sizing: border-box;
}

.bas-gallery-publisher__panel {
  background: var(--bas-surface);
  border: 1px solid var(--bas-rule);
  border-radius: var(--bas-radius-lg);
  box-shadow: var(--bas-shadow-card);
  overflow: hidden;
}

.bas-gallery-publisher__intro {
  border-bottom: 1px solid var(--bas-rule);
  padding: var(--bas-space-5);
}

.bas-gallery-publisher__intro h2 {
  color: var(--bas-heading);
  font-size: var(--bas-text-2xl);
  font-weight: var(--bas-weight-bold);
  letter-spacing: 0;
  line-height: var(--bas-leading-tight);
  margin: 0 0 var(--bas-space-2);
}

.bas-gallery-publisher__intro p {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin: 0;
}

.bas-gallery-publisher__notice {
  background: var(--bas-code-bg);
  border-left: 4px solid var(--bas-link);
  border-radius: var(--bas-radius-md);
  color: var(--bas-text);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin: 0 0 var(--bas-gap-flow);
  padding: var(--bas-space-3) var(--bas-pad-card);
}

.bas-gallery-publisher__error {
  border-left-color: var(--bas-danger);
}

.bas-gallery-publisher__success {
  border-left-color: var(--bas-success);
}

.bas-gallery-publisher__grid {
  display: grid;
  gap: var(--bas-space-5);
  padding: var(--bas-space-5);
}

.bas-gallery-publisher__section {
  border: 0;
  border-top: 1px solid var(--bas-rule);
  display: grid;
  gap: var(--bas-gap-group);
  margin: 0;
  padding: var(--bas-space-5) 0 0;
}

.bas-gallery-publisher__section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.bas-gallery-publisher__section legend {
  color: var(--bas-heading);
  font-size: var(--bas-text-md);
  font-weight: var(--bas-weight-semibold);
  padding: 0 var(--bas-space-2) 0 0;
}

.bas-gallery-publisher__field label {
  color: var(--bas-text);
  display: block;
  font-size: var(--bas-text-sm);
  font-weight: var(--bas-weight-semibold);
  margin-bottom: var(--bas-gap-tight);
}

.bas-gallery-publisher__field input[type="text"],
.bas-gallery-publisher__field input[type="email"],
.bas-gallery-publisher__field input[type="file"],
.bas-gallery-publisher__field input[type="tel"],
.bas-gallery-publisher__field select,
.bas-gallery-publisher__field textarea {
  background: var(--bas-control-bg);
  border: 1px solid var(--bas-control-border);
  border-radius: var(--bas-radius-md);
  color: var(--bas-control-text);
  font: inherit;
  font-size: var(--bas-text-md);
  line-height: var(--bas-leading-snug);
  max-width: 100%;
  min-height: var(--bas-control-h);
  padding: var(--bas-space-2) var(--bas-space-3);
  width: 100%;
}

.bas-gallery-publisher__field input[type="file"] {
  padding: var(--bas-space-2) 0;
}

.bas-gallery-publisher__field select {
  appearance: auto;
}

.bas-gallery-publisher__field textarea {
  min-height: calc(2 * var(--bas-control-h) + var(--bas-space-3));
  resize: vertical;
}

.bas-gallery-publisher__field input:focus,
.bas-gallery-publisher__field select:focus,
.bas-gallery-publisher__field textarea:focus {
  border-color: var(--bas-focus-border);
  box-shadow: var(--bas-shadow-focus);
  outline: none;
}

.bas-gallery-publisher__honeypot {
  display: none !important;
}

.bas-gallery-publisher__hint {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin-top: var(--bas-gap-tight);
}

.bas-gallery-publisher__section[data-bas-ap-section] .bas-gallery-publisher__field[hidden],
.bas-gallery-publisher__field--legacy,
.bas-gallery-publisher__preview[hidden] {
  display: none;
}

.bas-gallery-publisher__preview {
  align-items: center;
  background: var(--bas-media-bg);
  border: 1px solid var(--bas-rule);
  border-radius: var(--bas-radius-lg);
  display: flex;
  flex-direction: column;
  margin: var(--bas-gap-group) 0 0;
  max-width: 420px;
  overflow: hidden;
}

.bas-gallery-publisher__preview img,
.bas-gallery-publisher__thumb {
  background: var(--bas-media-bg);
  display: block;
  height: auto !important;
  max-height: 280px;
  max-width: 100%;
  object-fit: contain;
  width: auto !important;
}

.bas-gallery-publisher__thumb {
  max-width: min(100%, 420px);
}

.bas-gallery-publisher__preview figcaption {
  align-self: stretch;
  background: var(--bas-surface);
  color: var(--bas-muted);
  font-size: var(--bas-text-xs);
  line-height: var(--bas-leading-snug);
  margin: 0;
  overflow-wrap: anywhere;
  padding: var(--bas-space-2) var(--bas-space-3);
}

.bas-gallery-publisher__actions {
  align-items: center;
  border-top: 1px solid var(--bas-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bas-gap-related);
  margin-top: 0;
  padding-top: var(--bas-space-5);
}

.bas-gallery-publisher__meta {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
}

.bas-gallery-publisher-admin table {
  width: 100%;
}

.bas-gallery-admin-footer {
  display: none;
}

/*
 * Controls. One recipe: a size and a variant.
 *   Sizes: default (40 px), small (32 px). Segments fill a 32 px shell.
 *   Variants: primary (filled BAS blue), secondary (blue tint),
 *   ghost (outline only).
 */

.bas-gallery-publisher__button,
.bas-public-gallery__open,
.bas-public-gallery__submit-link,
.bas-public-gallery__edit-link,
.bas-public-gallery__wp-menu summary {
  align-items: center;
  border-radius: var(--bas-radius-md);
  box-shadow: none !important;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  gap: var(--bas-gap-tight);
  justify-content: center;
  line-height: var(--bas-leading-tight);
  text-decoration: none !important;
}

/* Default size, primary variant: the submit button of a form. */
.bas-gallery-publisher__button {
  background: var(--bas-button-bg) !important;
  border: 1px solid var(--bas-button-border) !important;
  color: var(--bas-button-text) !important;
  font-size: var(--bas-text-md);
  font-weight: var(--bas-weight-semibold);
  min-height: var(--bas-control-h);
  padding: 0 var(--bas-control-px);
}

.bas-gallery-publisher__button:hover,
.bas-gallery-publisher__button:focus {
  background: var(--bas-button-hover-bg) !important;
  color: var(--bas-button-text) !important;
  outline: none;
}

.bas-gallery-publisher__button:focus-visible {
  box-shadow: var(--bas-shadow-focus) !important;
}

.bas-gallery-publisher__button:disabled {
  cursor: wait;
  opacity: 0.65;
}

/* Small size: card and toolbar controls. */
.bas-public-gallery__open,
.bas-public-gallery__submit-link,
.bas-public-gallery__edit-link,
.bas-public-gallery__wp-menu summary {
  font-size: var(--bas-text-sm);
  font-weight: var(--bas-weight-semibold);
  min-height: var(--bas-control-h-sm);
  padding: 0 var(--bas-control-px-sm);
}

/* Secondary variant. */
.bas-public-gallery__open,
.bas-public-gallery__submit-link,
.bas-public-gallery__wp-menu summary {
  background: var(--bas-button-secondary-bg) !important;
  border: 1px solid var(--bas-button-secondary-border) !important;
  color: var(--bas-button-secondary-text) !important;
}

.bas-public-gallery__open:hover,
.bas-public-gallery__open:focus,
.bas-public-gallery__submit-link:hover,
.bas-public-gallery__submit-link:focus,
.bas-public-gallery__wp-menu summary:hover,
.bas-public-gallery__wp-menu summary:focus,
.bas-public-gallery__wp-menu[open] summary {
  background: var(--bas-button-secondary-hover-bg) !important;
  color: var(--bas-button-secondary-text) !important;
  outline: none;
}

/* Ghost variant. */
.bas-public-gallery__edit-link {
  background: transparent;
  border: 1px solid var(--bas-button-secondary-border);
  color: var(--bas-button-secondary-text);
}

.bas-public-gallery__edit-link:hover,
.bas-public-gallery__edit-link:focus {
  background: var(--bas-button-secondary-hover-bg);
  color: var(--bas-button-secondary-text);
  outline: none;
}

.bas-public-gallery__open:focus-visible,
.bas-public-gallery__submit-link:focus-visible,
.bas-public-gallery__edit-link:focus-visible,
.bas-public-gallery__wp-menu summary:focus-visible {
  box-shadow: var(--bas-shadow-focus) !important;
}

.bas-public-gallery__submit-link[aria-disabled="true"] {
  cursor: default;
  opacity: 0.72;
  pointer-events: none;
}

/* Segmented controls: one active segment, set with aria-pressed. */
.bas-gallery-publisher__level-toggle,
.bas-public-gallery__view-toggle {
  align-items: stretch;
  background: var(--bas-segment-bg);
  border: 1px solid var(--bas-segment-border);
  border-radius: var(--bas-radius-pill);
  display: inline-flex;
  gap: var(--bas-space-hairline);
  height: var(--bas-control-h-sm);
  max-width: 100%;
  padding: var(--bas-space-hairline);
}

.bas-gallery-publisher__level-toggle {
  width: max-content;
}

.bas-gallery-publisher__level-button,
.bas-public-gallery__view-button {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--bas-radius-pill);
  box-shadow: none !important;
  color: var(--bas-segment-text) !important;
  cursor: pointer;
  font: inherit;
  font-size: var(--bas-text-xs);
  font-weight: var(--bas-weight-regular);
  line-height: var(--bas-leading-tight);
  margin: 0;
  min-height: 0;
  padding: 0 var(--bas-control-px-sm);
  text-decoration: none !important;
}

.bas-gallery-publisher__level-button:hover,
.bas-gallery-publisher__level-button:focus,
.bas-public-gallery__view-button:hover,
.bas-public-gallery__view-button:focus {
  color: var(--bas-segment-text-hover) !important;
  outline: none;
}

.bas-gallery-publisher__level-button:focus-visible,
.bas-public-gallery__view-button:focus-visible {
  box-shadow: var(--bas-shadow-focus) !important;
}

.bas-gallery-publisher__level-button[aria-pressed="true"],
.bas-public-gallery__view-button[aria-pressed="true"] {
  background: var(--bas-segment-active-bg) !important;
  box-shadow: none !important;
  color: var(--bas-segment-active-text) !important;
}

/* Public gallery. */

.bas-public-gallery {
  color: var(--bas-text);
  font-family: var(--bas-font-sans);
  margin: var(--bas-gap-section) 0 var(--bas-space-7);
}

.bas-public-gallery * {
  box-sizing: border-box;
}

.bas-public-gallery__toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bas-gap-related);
  justify-content: flex-start;
  margin: 0 auto var(--bas-gap-group);
  max-width: var(--bas-width-page);
}

.bas-public-gallery__toolbar-spacer {
  flex: 1 1 auto;
}

.bas-public-gallery__wp-menu {
  margin-left: auto;
  position: relative;
}

.bas-public-gallery__wp-menu summary {
  list-style: none;
  user-select: none;
}

.bas-public-gallery__wp-menu summary::-webkit-details-marker {
  display: none;
}

.bas-public-gallery__wp-menu summary::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  content: "";
  display: inline-block;
  margin-top: var(--bas-space-hairline);
}

.bas-public-gallery__wp-menu-panel {
  background: var(--bas-surface);
  border: 1px solid var(--bas-rule);
  border-radius: var(--bas-radius-lg);
  box-shadow: var(--bas-shadow-menu);
  display: grid;
  gap: var(--bas-space-hairline);
  min-width: 220px;
  padding: var(--bas-gap-tight);
  position: absolute;
  right: 0;
  top: calc(100% + var(--bas-space-1));
  z-index: 20;
}

.bas-public-gallery__wp-menu-item {
  background: transparent;
  border: 0;
  border-radius: var(--bas-radius-sm);
  color: var(--bas-text);
  display: block;
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-tight);
  padding: var(--bas-space-2);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.bas-public-gallery__wp-menu-item:hover,
.bas-public-gallery__wp-menu-item:focus {
  background: var(--bas-button-secondary-bg);
  color: var(--bas-button-secondary-text);
  outline: none;
  text-decoration: none;
}

.bas-public-gallery__wp-menu-item[aria-disabled="true"] {
  color: var(--bas-muted);
  cursor: default;
  pointer-events: none;
}

.bas-public-gallery__admin-note {
  align-items: center;
  color: var(--bas-muted);
  display: inline-flex;
  flex-wrap: wrap;
  font-size: var(--bas-text-sm);
  gap: var(--bas-gap-related);
  line-height: var(--bas-leading-snug);
  margin-left: auto;
}

.bas-public-gallery__grid {
  align-items: start;
  display: grid;
  gap: var(--bas-gap-cards);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0 auto;
  max-width: var(--bas-width-page);
}

.bas-public-gallery--thumbnail-mode .bas-public-gallery__grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.bas-public-gallery .bas-public-gallery__card {
  background-color: var(--bas-surface);
  border: 1px solid var(--bas-rule);
  border-radius: var(--bas-radius-lg);
  box-shadow: var(--bas-shadow-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.bas-public-gallery__image-button {
  background: var(--bas-media-bg) !important;
  border: 0;
  cursor: zoom-in;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

.bas-public-gallery__image {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.bas-public-gallery__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--bas-gap-group);
  padding: var(--bas-pad-card);
}

.bas-public-gallery--thumbnail-mode .bas-public-gallery__body {
  display: none;
}

.bas-public-gallery__type {
  color: var(--bas-muted);
  font-size: var(--bas-text-xs);
  font-weight: var(--bas-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bas-public-gallery__title {
  color: var(--bas-heading);
  font-size: var(--bas-text-lg);
  font-weight: var(--bas-weight-bold);
  line-height: var(--bas-leading-tight);
  margin: 0;
}

.bas-public-gallery__summary {
  color: var(--bas-text);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin: 0;
}

.bas-public-gallery__quick {
  border-top: 1px solid var(--bas-rule);
  display: none;
  gap: var(--bas-gap-related);
  margin: 0;
  padding-top: var(--bas-gap-group);
}

.bas-public-gallery--metadata-visible .bas-public-gallery__quick {
  display: grid;
}

.bas-public-gallery__quick div,
.bas-public-gallery__meta div {
  display: grid;
  gap: var(--bas-gap-tight);
}

.bas-public-gallery__quick dt,
.bas-public-gallery__meta dt {
  color: var(--bas-muted);
  font-size: var(--bas-text-xs);
  font-weight: var(--bas-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bas-public-gallery__quick dd,
.bas-public-gallery__meta dd {
  color: var(--bas-text);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin: 0;
  overflow-wrap: anywhere;
}

/* Tags: read-only pills. No hover state, so they do not look like buttons. */
.bas-public-gallery__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bas-gap-related);
  margin-top: auto;
}

.bas-public-gallery__tag {
  background: var(--bas-tag-bg);
  border: 1px solid var(--bas-tag-border);
  border-radius: var(--bas-radius-pill);
  color: var(--bas-tag-text);
  display: inline-block;
  font-size: var(--bas-text-xs);
  line-height: var(--bas-leading-tight);
  padding: var(--bas-space-1) var(--bas-space-2);
}

.bas-public-gallery__card-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bas-gap-related);
  margin-top: 0;
}

.bas-public-gallery__open {
  align-self: flex-start;
}

.bas-public-gallery__detail-actions {
  margin-top: var(--bas-gap-group);
}

.bas-public-gallery__description {
  color: var(--bas-text);
  font-size: var(--bas-text-md);
  line-height: var(--bas-leading-body);
  margin: 0 0 var(--bas-gap-flow);
}

.bas-public-gallery__meta {
  display: grid;
  gap: var(--bas-gap-group);
  margin: 0;
}

.bas-public-gallery__detail .bas-public-gallery__meta dd {
  color: var(--bas-text);
}

.bas-public-gallery__empty {
  color: var(--bas-muted);
  font-size: var(--bas-text-md);
}

@media (min-width: 780px) {
  .bas-gallery-publisher__section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bas-gallery-publisher__section legend,
  .bas-gallery-publisher__level-toggle,
  .bas-gallery-publisher__field--wide,
  .bas-gallery-publisher__field--image,
  .bas-gallery-publisher__field--caption,
  .bas-gallery-publisher__field--description,
  .bas-gallery-publisher__field--ap_equipment,
  .bas-gallery-publisher__field--ap_capture_details,
  .bas-gallery-publisher__field--ap_processing_notes,
  .bas-gallery-publisher__field--ap_technical_notes {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  body.page-id-47 .entry-header {
    margin-top: var(--bas-space-5);
  }

  body.page-id-47 .entry-title {
    font-size: var(--bas-text-2xl);
  }

  .bas-gallery-publisher__intro,
  .bas-gallery-publisher__grid {
    padding: var(--bas-pad-card);
  }

  .bas-public-gallery__toolbar {
    align-items: flex-start;
  }

  .bas-public-gallery__view-toggle {
    max-width: 100%;
  }

  .bas-public-gallery__wp-menu {
    margin-left: 0;
  }

  .bas-public-gallery__wp-menu-panel {
    left: 0;
    right: auto;
  }

  .bas-public-gallery__grid {
    grid-template-columns: 1fr;
  }

  .bas-public-gallery--thumbnail-mode .bas-public-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}