/* Tailwind setup */

@import "tailwindcss";

/* Base styles */
@import "./base/index.css";
@import "./navigation/index.css";

/* Lineicons icon font */
@import "./fonts/lineicons.css";

/* Import *-break-out utilities (replicating the non-functional "tailwind-container-break-out" plugin) */
@import "./base/break-out.css";

/* Components */
@import "./components/index.css";

/* Blocks */
@import "./blocks/index.css";

/* Import Tailwind typography plugin */
@plugin "@tailwindcss/typography";

/* Go Ask Auntie Custom Styles */

/* Background images */
@theme {
  --background-image-hero: url('/static/img/bg-hero.png');
  --background-image-map: url('/static/img/bg-map.png');
  --background-image-pattern: url('/static/img/bg-pattern.png');
  --background-image-condom: url('/static/img/bg-condom.png');
  --background-image-wwor: url('/static/img/bg-wwor.png');
  --background-image-wwor-body: url('/static/img/bg-wwor-body.png');
}

/* Buttons - matching Auntie style */
.btn {
  @apply rounded-full border-4 border-white text-white px-8 py-2 text-center font-bold uppercase cursor-pointer transition-shadow duration-300;
}

.btn:hover {
  @apply shadow-lg;
}

.btn.bg-red {
  background-color: var(--color-red);
}

.btn.bg-navy {
  background-color: var(--color-navy);
}

.btn.bg-teal {
  background-color: var(--color-teal);
}

.btn.bg-purple {
  background-color: var(--color-purple);
}

/* Section padding - matches Auntie layout */
section {
  @apply md:px-0 px-4;
}

/* Font Passion One utility */
.font-passion-one {
  font-family: "Passion One", cursive;
}

/* Prose overrides for Auntie brand */
.prose {
  --tw-prose-body: var(--color-navy);
  --tw-prose-headings: var(--color-navy);
  --tw-prose-links: var(--color-navy);
}

.prose a:hover {
  color: var(--color-red);
}

/* Background utilities */
.bg-hero {
  background-image: var(--background-image-hero);
}

.bg-map {
  background-image: var(--background-image-map);
}

.bg-pattern {
  background-image: var(--background-image-pattern);
}

.bg-condom {
  background-image: var(--background-image-condom);
}

.bg-wwor {
  background-image: var(--background-image-wwor);
}

.bg-wwor-body {
  background-image: var(--background-image-wwor-body);
}

.bg-overlay {
  position: relative;
}

.bg-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.5;
  z-index: 0;
}

.bg-overlay > * {
  position: relative;
  z-index: 1;
}