/* ==========================================================
   APICAL HORTICULTURE — brand overrides
   Loaded AFTER styles.css, so anything here wins.
   Kept separate so hand edits in styles.css are never lost.
   ========================================================== */

:root {
  --blush: #F2E2E0;   /* soft red, for light section bands */
}

/* Beige rather than white as the resting background */
body { background: var(--cream, #F6F3EA); }

/* Soft-red band, alternates with the cream one */
.band-blush { background: var(--blush); }
.band-blush .eyebrow { color: #9A3F3B; }

/* ---------- LOGO (Peter's request: double size) ---------- */

.site-header .brand img { max-height: 116px !important; height: 116px !important; border-radius: 2px; }
.site-header .wrap { padding-top: 1.1rem; padding-bottom: 1.1rem; }

@media (max-width: 900px) {
  .site-header .brand img { max-height: 74px !important; height: 74px !important; }
}
@media (max-width: 480px) {
  .site-header .brand img { max-height: 58px !important; height: 58px !important; }
}

/* ---------- PHOTO HERO ----------
   Homepage banner. The green wash keeps the white text legible
   over the flowers and ties the photo to the brand colours. */

.hero-photo {
  position: relative;
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 58, 38, .93) 0%,
    rgba(15, 58, 38, .82) 42%,
    rgba(30, 92, 61, .52) 100%
  );
}

.hero-photo > .wrap { position: relative; z-index: 1; }

@media (max-width: 767px) {
  /* Narrow screens: the text column covers most of the frame,
     so darken further rather than letting it fight the photo. */
  .hero-photo::before {
    background: linear-gradient(
      180deg,
      rgba(15, 58, 38, .92) 0%,
      rgba(15, 58, 38, .86) 100%
    );
  }
}

/* ---------- PHOTOGRAPHS ---------- */

.sqs-block-image img, .grid-2 img, .band-photo { border-radius: 2px; }

/* Full-width photo sitting above a section heading */
.band-photo {
  width: 100%;
  height: clamp(180px, 26vw, 320px);
  object-fit: cover;
  margin-bottom: 3rem;
}

/* Portrait photos in two-column rows shouldn't tower over the text */
.grid-2 img {
  max-height: 560px;
  width: 100%;
  object-fit: cover;
}