/* =========================================================
   Alaska Fishing Company — component styles
   Design language: real Ketchikan working-charter photography,
   deep water navy, aluminum-hull neutrals, buoy-red accent.
   Mobile first. No animation-heavy effects.
   ========================================================= */

:root {
  --afc-navy: #16324a;
  --afc-navy-dark: #0e2233;
  --afc-channel: #3d6b8e;
  --afc-accent: #c94f2b;
  --afc-accent-dark: #a83f20;
  --afc-mist: #f1f4f6;
  --afc-ink: #1d2c36;
  --afc-muted: #54646f;
  --afc-line: #d7dee3;
  --afc-radius: 10px;
  --afc-shadow: 0 2px 14px rgba(14, 34, 51, 0.10);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body { -webkit-font-smoothing: antialiased; }

/* Visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--afc-channel);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--afc-navy);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0; color: #fff; }

/* =========================
   Header / navigation
   ========================= */

.afc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--afc-line);
}

.afc-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.afc-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--afc-navy);
  min-width: 0;
}
.afc-logo img {
  height: 56px;
  width: auto;
  display: block;
}
.afc-logo__text { display: none; }

/* Nav */
.afc-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--afc-line);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-weight: 600;
  color: var(--afc-navy);
  cursor: pointer;
}
.afc-nav__toggle .bars {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.afc-nav__toggle .bars::before,
.afc-nav__toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.afc-nav__toggle .bars::before { top: -6px; }
.afc-nav__toggle .bars::after { top: 6px; }

.afc-nav {
  display: none;
}
.afc-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--afc-line);
  box-shadow: var(--afc-shadow);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.afc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1rem 1rem;
}
.afc-nav li { margin: 0; }

.afc-nav a,
.afc-nav .afc-nav__sub-toggle {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.25rem;
  font-weight: 600;
  color: var(--afc-navy);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--afc-mist);
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
}

.afc-nav .afc-nav__sub-toggle::after {
  content: "";
  display: inline-block;
  margin-left: 0.45rem;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.afc-nav .afc-nav__sub-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg) translateY(-2px);
}

.afc-nav .sub-menu {
  display: none;
  padding: 0 0 0.4rem 1rem;
}
.afc-nav li.is-open > .sub-menu { display: block; }
.afc-nav .sub-menu a { font-weight: 500; color: var(--afc-ink); }

.afc-nav__cta { margin-top: 0.85rem; }
.afc-nav__cta a {
  display: inline-block;
  width: auto;
  background: var(--afc-accent);
  color: #fff !important;
  border: 0;
  border-radius: 6px;
  padding: 0.7rem 1.4rem;
  font-weight: 700;
}
.afc-nav__cta a:hover { background: var(--afc-accent-dark); }

/* Desktop nav */
@media (min-width: 980px) {
  .afc-nav__toggle { display: none; }
  .afc-nav,
  .afc-nav.is-open {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
    max-height: none;
  }
  .afc-nav > ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
  }
  .afc-nav > ul > li { position: relative; }
  .afc-nav a,
  .afc-nav .afc-nav__sub-toggle {
    border: 0;
    width: auto;
    padding: 0.6rem 0.75rem;
    font-size: 0.97rem;
    white-space: nowrap;
  }
  .afc-nav a:hover,
  .afc-nav .afc-nav__sub-toggle:hover { color: var(--afc-accent); }
  .afc-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--afc-line);
    border-radius: 8px;
    box-shadow: var(--afc-shadow);
    padding: 0.4rem;
    z-index: 90;
  }
  .afc-nav .sub-menu a {
    padding: 0.55rem 0.75rem;
    border-radius: 5px;
    white-space: nowrap;
  }
  .afc-nav .sub-menu a:hover { background: var(--afc-mist); color: var(--afc-navy); }
  .afc-nav__cta { margin: 0 0 0 0.5rem; }
}

/* =========================
   Layout bands
   ========================= */

.afc-band { padding: clamp(2.75rem, 6vw, 4.5rem) 0; }
.afc-band--tight { padding: clamp(1.75rem, 4vw, 2.75rem) 0; }
.afc-band--mist { background: var(--afc-mist); }
.afc-band--navy { background: var(--afc-navy-dark); color: #fff; }
.afc-band--navy h2, .afc-band--navy h3, .afc-band--navy p { color: #fff; }
.afc-band--navy a:not(.wp-block-button__link) { color: #cfe0ec; }

/* Uses the darker red: at 0.8rem the lighter accent falls under the 4.5:1
   contrast minimum against the mist band background. */
.afc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.8rem !important;
  color: var(--afc-accent-dark);
}
.afc-band--navy .afc-eyebrow { color: #f0906c; }

/* =========================
   Hero (core cover block)
   ========================= */

.afc-hero { min-height: min(78vh, 640px); }
/* Keep photo subjects in frame when covers crop: faces and fish sit in the
   upper-middle band of most AFC photos. Home hero boat sits left of center. */
.afc-hero .wp-block-cover__image-background { object-position: 45% 50%; }
/* Interior banners crop hard on wide screens. These focal modifiers keep each
   photo's subject inside the visible band; see also the height clamp below. */
.afc-hero--page .wp-block-cover__image-background { object-position: 50% 30%; }
.afc-hero--focus-top .wp-block-cover__image-background { object-position: 50% 8%; }
.afc-hero--focus-portrait .wp-block-cover__image-background { object-position: 50% 22%; }
.afc-hero--focus-center .wp-block-cover__image-background { object-position: 50% 50%; }
.afc-hero .wp-block-cover__inner-container { max-width: 1180px; margin: 0 auto; }
.afc-hero h1 {
  color: #fff;
  max-width: 17ch;
  text-shadow: 0 2px 18px rgba(14, 34, 51, 0.45);
}
.afc-hero p {
  color: #f0f4f7;
  max-width: 52ch;
  font-size: 1.15rem;
  text-shadow: 0 1px 10px rgba(14, 34, 51, 0.5);
}
/* Height scales with width: a fixed short banner on a wide screen becomes an
   extreme letterbox that crops a 4:3 photo by ~70% and cuts off faces. */
.afc-hero--page { min-height: clamp(300px, 34vw, 640px); }

/* Split interior banner on wider screens: text on a solid panel, photo beside
   it. A full-bleed band is ~3:1, which no 4:3 or portrait photo survives; a
   half-width panel is ~1.7:1 and shows ~80% of the frame, so subjects stay
   whole. Below 900px this reverts to the standard overlay banner. */
@media (min-width: 900px) {
  .afc-hero--page {
    position: relative;
    display: flex;
    align-items: center;
    /* core cover centers its flex child; the text panel must sit hard left */
    justify-content: flex-start;
    background-color: var(--afc-navy-dark);
    /* Photo panel is 38% wide and the band is 28.5vw tall, so the cell lands at
       4:3, the native shape of most AFC photos. They fill it without cropping. */
    min-height: max(320px, 28.5vw);
  }
  .afc-hero--page > .wp-block-cover__background { display: none; }
  .afc-hero--page > .wp-block-cover__image-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 38%;
    height: 100%;
  }
  .afc-hero--page > .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 62%;
    max-width: none;
    margin: 0;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 5rem);
  }
  /* constrained layout centers children by default; left-align them in the panel */
  .afc-hero--page > .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; }
  /* Portrait source photos need a taller cell to keep angler and fish together. */
  .afc-hero--focus-portrait { min-height: max(400px, 34vw); }
  /* Solid panel behind the text, so the shadow is no longer doing any work. */
  .afc-hero--page h1,
  .afc-hero--page p { text-shadow: none; }
}

/* Buttons: outline style on dark */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
/* Outline on light backgrounds */
.afc-outline-navy.is-style-outline .wp-block-button__link {
  border-color: var(--afc-navy);
  color: var(--afc-navy);
}
.afc-outline-navy.is-style-outline .wp-block-button__link:hover {
  background: var(--afc-navy);
  color: #fff;
}

/* =========================
   Charter cards
   ========================= */

.afc-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .afc-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .afc-cards--4 { grid-template-columns: repeat(4, 1fr); } .afc-cards--3 { grid-template-columns: repeat(3, 1fr); } }

.afc-card {
  background: #fff;
  border: 1px solid var(--afc-line);
  border-radius: var(--afc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(14, 34, 51, 0.06);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.afc-card:hover { box-shadow: var(--afc-shadow); transform: translateY(-2px); }
.afc-card figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.afc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.afc-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.afc-card__body h3 { margin: 0; font-size: 1.2rem !important; }
.afc-card__body h3 a { text-decoration: none; color: var(--afc-navy); }
.afc-card__body h3 a::after { content: ""; position: absolute; inset: 0; }
.afc-card { position: relative; }
.afc-card__body p { margin: 0; color: var(--afc-muted); font-size: 0.97rem; }
.afc-card__more {
  margin-top: auto;
  font-weight: 700;
  color: var(--afc-accent);
  font-size: 0.95rem;
}

/* Featured (Full-Day) treatment */
.afc-card--featured { border: 2px solid var(--afc-accent); }
.afc-card--featured .afc-card__flag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  background: var(--afc-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  z-index: 2;
}

/* =========================
   Full-day feature band
   ========================= */

.afc-feature {
  border-left: 5px solid var(--afc-accent);
  background: #fff;
  border-radius: 0 var(--afc-radius) var(--afc-radius) 0;
  box-shadow: var(--afc-shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* =========================
   Lists / notes / tables
   ========================= */

ul.afc-check { list-style: none; padding-left: 0; }
ul.afc-check li {
  padding-left: 1.9rem;
  position: relative;
  margin-bottom: 0.55rem;
}
ul.afc-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 0.55em;
  height: 0.95em;
  border-right: 3px solid var(--afc-accent);
  border-bottom: 3px solid var(--afc-accent);
  transform: rotate(40deg);
}

.afc-note {
  background: var(--afc-mist);
  border-left: 4px solid var(--afc-channel);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  font-size: 0.97rem;
}

.afc-stat { text-align: center; }
.afc-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: var(--afc-navy);
  line-height: 1.1;
}
.afc-stat span { color: var(--afc-muted); font-size: 0.95rem; }

/* Rates table: scrolls inside its own container on narrow screens
   instead of stretching the page. */
.afc-rates .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.afc-rates table { border-collapse: collapse; width: 100%; min-width: 540px; }
.afc-rates th, .afc-rates td {
  border: 1px solid var(--afc-line);
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
}
.afc-rates thead th { background: var(--afc-navy); color: #fff; border-color: var(--afc-navy); }
.afc-rates tbody tr:nth-child(even) { background: var(--afc-mist); }
.afc-rates .price { font-weight: 800; color: var(--afc-navy); white-space: nowrap; }

/* FAQ (core details block) */
.afc-faq details {
  border: 1px solid var(--afc-line);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 0.75rem;
  background: #fff;
}
.afc-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--afc-navy);
  padding: 1rem 1.25rem;
  list-style-position: outside;
}
.afc-faq details[open] summary { border-bottom: 1px solid var(--afc-mist); }
.afc-faq details > :not(summary) { padding: 0.35rem 1.25rem; }
.afc-faq details > :last-child { padding-bottom: 1.1rem; }

/* =========================
   Gallery
   ========================= */

.afc-gallery .wp-block-image img,
.wp-block-gallery.afc-gallery img {
  border-radius: 8px;
}

/* All AFC photo galleries: the /gallery/ page and the species galleries at the
   foot of the salmon, halibut and combo pages.
   Multi-column masonry instead of the core flex grid: the source photos mix
   portrait and landscape, and a uniform grid can only square them up by
   cropping the fish out. Columns let every photo keep its own shape.
   Single column under 600px so photos read full size on a
   phone, where the banner always sits behind the headline. */
body .wp-block-gallery.afc-gallery {
  display: block !important;
  column-gap: 1rem !important;
}
body .wp-block-gallery.afc-gallery > figure.wp-block-image {
  display: block;
  width: 100% !important;
  margin: 0 0 1rem;
  break-inside: avoid;
}
body .wp-block-gallery.afc-gallery > figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
@media (min-width: 600px) {
  body .wp-block-gallery.afc-gallery { column-count: 2; }
}
@media (min-width: 782px) {
  body .wp-block-gallery.afc-gallery { column-count: 3; }
}

/* =========================
   Inquiry form (rendered by afc-core)
   ========================= */

.afc-form {
  background: #fff;
  border: 1px solid var(--afc-line);
  border-radius: var(--afc-radius);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--afc-shadow);
}
.afc-form .afc-form__row { margin-bottom: 1.1rem; }
.afc-form .afc-form__grid {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .afc-form .afc-form__grid { grid-template-columns: 1fr 1fr; } }
.afc-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--afc-navy);
  font-size: 0.95rem;
}
.afc-form .required { color: var(--afc-accent); }
.afc-form input[type="text"],
.afc-form input[type="email"],
.afc-form input[type="tel"],
.afc-form input[type="date"],
.afc-form input[type="number"],
.afc-form input[type="time"],
.afc-form select,
.afc-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid #b9c5cd;
  border-radius: 6px;
  font: inherit;
  color: var(--afc-ink);
  background: #fff;
}
.afc-form textarea { min-height: 120px; resize: vertical; }
.afc-form .afc-form__hint { font-size: 0.85rem; color: var(--afc-muted); margin-top: 0.25rem; }
.afc-form fieldset {
  border: 1px solid var(--afc-line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0 0 1.1rem;
}
.afc-form fieldset legend { font-weight: 700; color: var(--afc-navy); padding: 0 0.4rem; }
.afc-form button[type="submit"] {
  background: var(--afc-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  border: 0;
  border-radius: 6px;
  padding: 0.9rem 2rem;
  cursor: pointer;
}
.afc-form button[type="submit"]:hover { background: var(--afc-accent-dark); }
.afc-form__cruise[hidden] { display: none; }
.afc-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  height: 1px;
  overflow: hidden;
}
.afc-form__success {
  background: #eef7ee;
  border: 1px solid #bfdcbf;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.afc-form__error {
  background: #fbeeea;
  border: 1px solid #e6c3b8;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* =========================
   Breadcrumbs (afc-core)
   ========================= */

.afc-breadcrumbs {
  font-size: 0.85rem;
  color: var(--afc-muted);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.8rem 1rem 0;
}
.afc-breadcrumbs a { color: var(--afc-muted); text-decoration: none; }
.afc-breadcrumbs a:hover { color: var(--afc-navy); text-decoration: underline; }
.afc-breadcrumbs .sep { margin: 0 0.4rem; }

/* =========================
   Posts / articles
   ========================= */

.afc-article-header { padding: 2.5rem 0 0.5rem; }
.afc-article-meta { color: var(--afc-muted); font-size: 0.9rem; }
.single .wp-block-post-featured-image img { border-radius: var(--afc-radius); }

.afc-post-list .wp-block-post {
  border-bottom: 1px solid var(--afc-line);
  padding: 1.5rem 0;
}

/* =========================
   Footer
   ========================= */

.afc-footer {
  background: var(--afc-navy-dark);
  color: #c3d0da;
  font-size: 0.95rem;
}
.afc-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1rem 2rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .afc-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.afc-footer h2 {
  color: #fff;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.9rem;
}
.afc-footer ul { list-style: none; margin: 0; padding: 0; }
.afc-footer li { margin-bottom: 0.5rem; }
.afc-footer a { color: #c3d0da; text-decoration: none; }
.afc-footer a:hover { color: #fff; text-decoration: underline; }
.afc-footer__brand img {
  height: 74px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 0.9rem;
}
.afc-footer__brand p { margin: 0 0 0.5rem; }
.afc-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 0.5rem;
}
.afc-footer__legal-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.1rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #8fa2b0;
}

/* =========================
   Misc
   ========================= */

.afc-404 { text-align: center; padding: 5rem 1rem; }

@media (max-width: 480px) {
  .afc-logo img { height: 46px; }
}

@media (max-width: 600px) {
  /* Tall hero + landscape photo crops hard on phones; shorter works better */
  .afc-hero { min-height: min(66vh, 540px); }
  .afc-hero--page { min-height: 300px; }
}

/* Side gutters on small screens: constrained layout centers content but
   provides no lateral padding, so text otherwise touches the screen edge. */
@media (max-width: 781px) {
  .afc-band > :where(:not(.alignfull)) {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .wp-block-cover__inner-container > * {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* Mid-width desktops: the text column is taller here, which would squeeze the
   photo cell into a portrait shape and clip the sides. Give the photo more width. */
@media (min-width: 900px) and (max-width: 1400px) {
  .afc-hero--page > .wp-block-cover__image-background { width: 46%; }
  .afc-hero--page > .wp-block-cover__inner-container { width: 54%; box-sizing: border-box; }
}

/* Two-column content sections. A tall portrait photo used to stretch the row
   and leave the text column trailing a tall band of whitespace. Capping the
   photo height (width follows, so nothing is cropped) and centering the
   columns splits any remaining space evenly instead of dumping it below.
   Desktop only: below 782px the columns stack and photos run full width. */
@media (min-width: 782px) {
  .afc-band .wp-block-columns { align-items: center; }
  .afc-band .wp-block-columns .wp-block-image img {
    max-height: 440px;
    max-width: 100%;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
  .afc-band .wp-block-column:has(.wp-block-image + .wp-block-image) .wp-block-image img {
    max-height: 300px;
  }
}

/* Homepage hero scrim. A flat dim over the whole photo forces the headline onto
   the busiest part of the image and mutes the photo everywhere. A left-to-right
   gradient instead gives the text solid contrast on the left while the photo
   stays clean on the right, which also means the hero works with almost any
   photo. Desktop only; narrow screens keep the flat dim (no room for a panel). */
@media (min-width: 782px) {
  .afc-hero:not(.afc-hero--page) > .wp-block-cover__background.has-background-dim {
    opacity: 1;
    background-color: transparent !important;
    background-image: linear-gradient(90deg,
      rgba(14, 34, 51, 0.93) 0%,
      rgba(14, 34, 51, 0.85) 42%,
      rgba(14, 34, 51, 0.40) 70%,
      rgba(14, 34, 51, 0.10) 100%);
  }
  /* WP constrained layout centers children with margin: auto !important, so
     matching that weight is the only way to left-align them. */
  .afc-hero:not(.afc-hero--page) > .wp-block-cover__inner-container > * {
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 620px;
  }
  .afc-hero:not(.afc-hero--page) h1 { max-width: 15ch; }
  .afc-hero:not(.afc-hero--page) p { max-width: 46ch; }
}

/* Nudge the hero photo right so the boat clears the headline. The photo fills
   the frame exactly, so there is no horizontal slack to shift; widening the
   image box past 100% and anchoring it left pushes the subject rightward.
   Costs some sharpness and top/bottom framing on very wide monitors, which is
   acceptable only because this source photo is low-resolution to begin with. */
@media (min-width: 782px) {
  .afc-hero:not(.afc-hero--page) > .wp-block-cover__image-background {
    width: 122%;
    left: 0;
    right: auto;
  }
}

/* Photo rows: a deliberate wide row of images below text. Lift the sidebar
   height caps so each photo fills its column; the column split is chosen per
   row so mixed portrait/landscape pairs land at the same height. */
body .afc-band .wp-block-columns.afc-photo-row { align-items: flex-start; }
body .afc-band .wp-block-columns.afc-photo-row .wp-block-image img {
  max-height: none;
  width: 100%;
  height: auto;
}

/* Rates table on small screens. A 4-column table cannot fit a phone, and the
   horizontal scroll it used to need hid the Notes column, which is where the
   two-person minimum lives. Under 600px each row becomes a labelled card. */
@media (max-width: 599px) {
  body .afc-rates .wp-block-table { overflow-x: visible; }
  body .afc-rates table { min-width: 0; width: 100%; border-collapse: separate; border-spacing: 0; }
  body .afc-rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body .afc-rates table, body .afc-rates tbody, body .afc-rates tr, body .afc-rates td { display: block; }
  body .afc-rates tbody tr {
    background: #fff;
    border: 1px solid var(--afc-line);
    border-radius: var(--afc-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--afc-shadow);
  }
  body .afc-rates tbody td { border: 0; padding: 0.3rem 0; }
  body .afc-rates tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--afc-muted);
    margin-bottom: 0.1rem;
  }
  body .afc-rates tbody td.price { font-size: 1.25rem; font-weight: 700; color: var(--afc-navy); }
}