/* Sea Quest: contact page only (load after reset.css and styles.css) */

.contact-panel {
  display: grid;
  gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 3);
  border-radius: 0.5rem;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

@media (min-width: 48rem) {
  .contact-panel { grid-template-columns: 3fr 2fr; }
}

.contact-panel h1,
.contact-panel h2 {
  color: var(--color-text-on-dark);   /* default heading color is teal, invisible here */
}

.contact-panel h2 {
  margin-top: calc(var(--space) * 1.5);
  font-size: 1.125rem;
}

.contact-panel__info h2:first-child {
  margin-top: 0;
}

.contact-panel__info h2 {
  font-size: 1rem;
}

.contact-panel__info p,
.contact-panel__info address {
  font-size: 0.875rem;
  line-height: 1.5;
}

.contact-panel__info > :not(h2) {
  padding-left: 1rem;
}

.contact-panel a {
  color: var(--color-text-on-dark);
}

.contact-panel a:hover {
  color: var(--color-accent);
}

.contact-panel address {
  font-style: normal;
}

.contact-panel__media img {
  width: 100%;
  border-radius: 0.5rem;
}

/* QR code: bottom-right of the info block */
.contact-panel__info {
  display: flex;
  flex-direction: column;
}

.qr {
  align-self: flex-end;        
  margin: auto 0 0;            
  padding-left: 0;             
  display: flex;               
  flex-direction: column;      
  align-items: center;         
}

.qr img {
  display: block;
  width: 96px;
  height: auto;
}

.qr figcaption {
  margin-top: 0.5rem;          
  font-size: 0.75rem;
}

.qr a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}