/*
 * Layout + responsive rules for the Highliner block theme.
 *
 * The original ~2008 template was a fixed 990px, two-column desktop layout with
 * the menu in a right column and image slices for the frame. The single biggest
 * modernization is making that fluid and mobile-first: on phones the sidebar
 * stacks below the content instead of sitting in a narrow right rail.
 */

/* ── Page shell ──────────────────────────────────────────────────────────────── */
/* Clip overflow at the outermost block wrapper. The sidebar fish logo displays
   at its natural size and overflows its narrow column; this keeps that (and any
   other overflow) from causing horizontal scroll. */
.wp-site-blocks {
  overflow: hidden;
  padding: 1rem 0;
}

/* ── Header banner ─────────────────────────────────────────────────────────── */
.site-header__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Accessibility: keep the site-title in the DOM for SEO/screen readers but hide
   it visually, since the banner graphic already shows the site name. Standard
   WordPress screen-reader-text pattern (block themes don't always ship it). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* ── Site shell: content column (header+content+footer) left, sidebar right ──── */
/* This top-level split matches the original template, where the sidebar (#menue)
   sat beside the whole stack — header, content, AND footer — not just the
   content. WordPress renders columns side-by-side by default and stacks them at
   its own small breakpoint (782px). We nudge the stack point wider so the narrow
   sidebar never gets cramped, and align the columns to the top. */
.site-shell.wp-block-columns {
  align-items: flex-start;
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 860px) {
  .site-shell.wp-block-columns {
    flex-wrap: wrap;
  }
  .site-shell.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
  .site-shell.wp-block-columns > .site-shell__aside {
    margin-top: 2rem;
  }
}

/* ── Sidebar (right column) ──────────────────────────────────────────────────── */
.site-sidebar {
  text-align: left;
}
.site-sidebar .wp-block-navigation {
  font-size: var(--wp--preset--font-size--medium);
}
.site-sidebar .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--contrast);
}
.site-sidebar__decor {
  position: relative;
}
.site-sidebar__decor img {
  max-width: 100%;
  height: auto;
  opacity: 0.9;
}
/* Layer the two decorative graphics: the fish/kelp logo is pulled up so it
   tucks partly behind the bubbles gif, and the bubbles sit on top.
   Scoped under .site-sidebar (specificity 0,2,0) so the negative margin beats
   WordPress's generated flex rule `.is-layout-flex > :is(*, div){margin:0}`
   (specificity 0,1,1), which otherwise zeroes flex-child margins. */
.site-sidebar .site-sidebar__bubbles {
  z-index: 2;
}
.site-sidebar .site-sidebar__fish {
  margin-top: -10rem;
  z-index: 1;
}
/* The fish/kelp logo displays at its natural size, overflowing the narrow
   sidebar column, rather than being constrained to the column width. Overrides
   the .site-sidebar__decor img { max-width: 100% } rule above; scoped to beat
   it and WordPress's flex/image layout rules. */
.site-sidebar .site-sidebar__fish img {
  max-width: none;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.site-footer__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── FareHarbor "Book Now" floating button ───────────────────────────────────── */
/* The button is injected page-level on wp_footer (functions.php) with the
   FareHarbor fh-kit class `fh-fixed--bottom`, which the plugin's fh-kit
   stylesheet positions fixed to the bottom of the viewport. These rules are a
   safety net so it stays fixed, bottom-right, visible, and above page content
   even before/without the kit CSS — matching the old site's floating button. */
a.fh-fixed--bottom {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  z-index: 9999;
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border: 2px solid #fff;
  border-radius: 6px;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

/* ── Legacy migrated content niceties ─────────────────────────────────────────── */
/* Old bodies frequently used <table> and fixed-size inline images for layout. */
.wp-block-post-content table {
  max-width: 100%;
  border-collapse: collapse;
}
.wp-block-post-content img {
  max-width: 100%;
  height: auto;
}