/* Cool Tál — custom layer on top of Tailwind (CDN). Only what utilities can't express cleanly. */

html { scroll-behavior: smooth; }

img { display: block; max-width: 100%; }

/* Curved SVG section dividers positioned at section edges */
.divider { position: absolute; left: 0; width: 100%; height: clamp(40px, 8vw, 120px); pointer-events: none; }
.divider--bottom { bottom: -1px; }
.divider--top { top: -1px; }

/* Hero background with dark overlay */
.hero-bg {
  background:
    linear-gradient(rgba(24, 47, 42, 0.55), rgba(24, 47, 42, 0.55)),
    url("assets/header_img.png") center / cover no-repeat;
}

/* Story background with heavier overlay */
.story-bg {
  background:
    linear-gradient(rgba(24, 47, 42, 0.72), rgba(24, 47, 42, 0.72)),
    url("assets/our_story_background_image.png") center / cover no-repeat;
}

/* Footer background */
.footer-bg {
  background:
    linear-gradient(rgba(24, 47, 42, 0.55), rgba(24, 47, 42, 0.55)),
    url("assets/footer_image.jpg") center / cover no-repeat;
}

/* Faint repeating Cool Tál logo watermark for detail pages */
.watermark {
  background-image: url("assets/logo.png");
  background-repeat: repeat;
  background-size: 140px;
  opacity: 0.05;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Checkbox tick for the consent box (appearance:none custom control) */
.consent-box:checked::before {
  content: "";
  width: 15px; height: 15px;
  background: var(--tw-green-dark, #182f2a);
  border-radius: 2px;
}