@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Sans:wght@400;500;600&display=swap');

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

@layer base {
  html {
    background-color: theme('colors.pt-blue.400');
    scroll-behavior: smooth;
  }
  /* Neutralise any theme container constraints */
  .page-wrapper {
    max-width: none;
    padding-inline: 0;
  }
  /* Hide Olivero/theme chrome we don't use */
  .site-header,
  .sticky-header-toggle,
  .social-bar {
    display: none !important;
  }
}

@layer components {
  /* Mobile nav: max-height slide can't be expressed with utilities alone */
  @media (max-width: calc(theme('screens.md') - 1px)) {
    #rpt-main-nav {
      flex: none;
      position: static;
      order: 10;
      width: 100%;
      background: #fff;
      border-top: 1px solid theme('colors.gray.200');
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.3s ease, opacity 0.25s ease;
    }
    #rpt-main-nav.is-open {
      max-height: 500px;
      opacity: 1;
    }
    #rpt-main-nav ul {
      flex-direction: column;
      align-items: stretch;
    }
  }

  /* Hamburger open-state animation */
  .rpt-header__hamburger[aria-expanded="true"] span:nth-child(1) {
    width: 100% !important;
    transform: translateY(10px) rotate(45deg);
  }
  .rpt-header__hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .rpt-header__hamburger[aria-expanded="true"] span:nth-child(3) {
    width: 100% !important;
    transform: translateY(-10px) rotate(-45deg);
  }
}