/*
 * island.css — the frame of an island's own page (template-parts/island.php).
 *
 * The detail view inside it is the plugin's and keeps the plugin's stylesheet
 * (wildisland-map/assets/css/detail.css). This file sets only what the theme owns: the padding of
 * the content area, the heading and the way back, all at the values of the single post, because
 * the legacy site has no island page to measure and the post is the closest page it has.
 *
 * The breakpoints stand as numbers in the @media rules, not as tokens: CSS does not resolve
 * custom properties in media queries.
 */

/* The same pair of values as the post head, and the same shorthand for the reason given there:
 * the token holds vertical and horizontal padding and only works inside `padding`. */
.wi-island__body {
  padding: var(--wi-post-padding-block);
}

/* Two classes, the house rule — and the margin below is the post title's own token. */
.wi-island .wi-island__title {
  margin-top: 0;
  margin-bottom: var(--wi-post-title-space);
}

/* The second line inside the heading, one step down, as the plugin's panel sets it. */
.wi-island .wi-island__subtitle {
  display: block;
  padding-top: 5px;
  font-size: 0.6em;
  font-weight: var(--wi-font-weight-light);
}

/*
 * The plugin starts its right-hand column 60px lower, to clear the close button of the map's
 * panel. On the page there is no close button, and the sub-map belongs level with the flag.
 * Three classes against the plugin's two.
 */
.wi-island .wildisland-detail .wildisland-detail__aside {
  margin-top: 0;
}

/* The way back, sized like the post's "Back". */
.wi-island__back {
  margin-top: var(--wi-post-content-space);
  margin-bottom: 0;
}

.wi-island__back .wi-button {
  min-width: 135px;
  font-size: var(--wi-post-meta-size);
  text-align: center;
}

/* 1100px: halved padding, as on the post. */
@media only screen and (max-width: 1100px) {
  .wi-island__body {
    padding: var(--wi-post-padding-block-narrow);
  }
}

@media only screen and (max-width: 991px) {
  .wi-island .wi-island__title {
    margin-bottom: var(--wi-space-heading-narrow);
  }
}