/* Hero-specific styles */

/* Source Sans Pro Font */
@font-face {
  font-family: "Source Sans Pro";
  src:
    url("/fonts/source-sans-pro-v23-latin-400.woff2") format("woff2"),
    url("/fonts/source-sans-pro-v23-latin-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans Pro";
  src:
    url("/fonts/source-sans-pro-v23-latin-700.woff2") format("woff2"),
    url("/fonts/source-sans-pro-v23-latin-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lora Font */
@font-face {
  font-family: "Lora";
  src:
    url("/fonts/lora-v32-latin-600.woff2") format("woff2"),
    url("/fonts/lora-v32-latin-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* DK Crayon Crumble Font */
@font-face {
  font-family: "DK Crayon Crumble";
  src: url("/fonts/DkCrayonCrumble-ddll.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font-graphik {
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
}

.font-crayon {
  font-family: "DK Crayon Crumble", cursive;
}

.base-font-size {
  font-size: var(--font-size) !important;
  font-family: var(--font-family);
  line-height: var(--line-height);
  margin-bottom: var(--paragraph-spacing);
}

.letter-section {
  padding-left: var(--space-letter-padding);
  padding-right: var(--space-letter-padding);
}

/* Mobile Styles */
@media (max-width: 768px) {
  /* Navigation - Simple mobile layout */
  nav {
    height: auto !important;
    min-height: 60px;
  }

  nav .h-full {
    height: auto !important;
    flex-direction: column !important;
    padding: 0.75rem 1rem !important;
    position: relative !important;
  }

  /* Logo - smaller and centered */
  nav .flex-1 {
    flex: none !important;
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  nav .flex.items-center {
    padding: 0 !important;
  }

  nav img {
    height: 2.5rem !important;
  }

  nav .text-4xl {
    font-size: 1.5rem !important;
    margin-left: 0.5rem !important;
  }

  /* Hide the decorative line on mobile */
  nav .absolute.h-px {
    display: none !important;
  }

  /* Navigation links - stack vertically, centered */
  nav .absolute.right-7 {
    position: static !important;
    width: 100%;
    justify-content: center;
    margin: 0.25rem 0;
    gap: 1rem !important;
  }

  nav .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0 !important;
  }

  /* Hero image - reduce height */
  .h-\[500px\] {
    height: 250px !important;
  }

  /* Hero headline - smaller text */
  .text-xx-large {
    font-size: 1.75rem !important;
  }

  .py-8 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .pb-large {
    padding-bottom: 1rem !important;
  }

  /* Remove excessive padding on mobile */
  .px-xxx-large {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Two columns to one column */
  .grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Reduce gap between sections */
  .gap-xx-large {
    gap: 1.5rem !important;
  }

  /* Section padding */
  .py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Headings - smaller on mobile */
  .text-4xl {
    font-size: 1.75rem !important;
    line-height: 2rem !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
    line-height: 1.75rem !important;
  }

  /* Classes grid - single column on mobile */
  .lg\:grid-cols-4,
  .md\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Newsletter form - stack on mobile */
  footer .flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  footer .flex.gap-3 input {
    width: 100% !important;
  }

  footer .flex.gap-3 button {
    width: 100% !important;
  }
}