@import './header-style.css';
@import './what-we-do-cards-style.css';
@import './form-style.css';
@import './game-zone-style.css';
@import './footer-style.css';
@import './game-resources-style.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- Reusable General-Use Animations and Styles --- */

/* --- Buttons --- */
.page-button {
  @apply text-center h-[55px] font-bold rounded-lg border-2 border-black shadow-[4px_4px_0px_black] ease-in duration-300;
}

.blue-button {
  @apply bg-[#087BB4] hover:bg-[#0C587D] text-white;
}

.orange-button {
  @apply bg-[#FE892A] hover:bg-[#D6711F] text-[#0D0C0C];
}

.page-button-flex {
  @apply flex mobile:flex-col justify-center items-center text-center my-10;
}

/* --- Pattern: White bg with grey crossed-lines --- */
.bg-cross-lines {
  @apply bg-white bg-[linear-gradient(to_right,#e0e0e0_1px,transparent_1px),linear-gradient(to_bottom,#e0e0e0_1px,transparent_1px)] bg-[size:24px_24px];
}

/* --- Hover: Slight zoom in animation --- */
.hover-zoom-in:hover {
  @apply scale-105 transition duration-500;
}

/* --- Typography --- */
.page-header-accent {
  /* Small, grey, CAPS text above page-header */
  @apply uppercase text-[14px] font-[500] mobile:w-auto text-center tracking-[3.6px] mb-4 text-[#6E777C] font-semibold;
}

.page-header {
  @apply text-center text-4.5xl tablet:text-[32px] mobile:text-[24px] mobile:text-center font-[400] py-5;
}

.page-text {
  @apply text-body text-xl mobile:text-[16px] leading-7;
}

/* --- Currently, reused in policy pages --- */
.page-subheader {
  @apply font-semibold text-primary-color text-lg mt-8 mb-2;
}

/* --- Links --- */
.page-link {
  @apply text-primary-color hover:underline hover:underline-offset-4;
}
