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

:root {
  --aps-yellow: #fabd04;
  --aps-dblue: #031e3e;
  --aps-lblue: #09bbdd;
}

/* Sticky footer layout */
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

nav {
  flex-shrink: 0;
}

main {
  flex: 1;
  overflow-y: auto;
}

footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* Custom APS color classes */
.bg-aps-yellow {
  @apply bg-[#fabd04];
}

.bg-aps-dblue {
  @apply bg-[#031e3e];
}

.bg-aps-lblue {
  @apply bg-[#09bbdd];
}

.text-aps-yellow {
  @apply text-[#fabd04];
}

.text-aps-dblue {
  @apply text-[#031e3e];
}

.text-aps-lblue {
  @apply text-[#09bbdd];
}

.border-aps-yellow {
  @apply border-[#fabd04];
}

.border-aps-dblue {
  @apply border-[#031e3e];
}

.border-aps-lblue {
  @apply border-[#09bbdd];
}

/* Custom font sizes */
.text-2xs {
  font-size: 0.875rem; /* 14px - slightly smaller than xs */
  line-height: 1.25rem;
}

/* Dropdown do utilizador no header: abrir ao focar (click/teclado) */
nav li:focus-within > div {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Abrir dropdown quando o botão tiver foco (clique/teclado) */
nav li > button:focus + div,
nav li > button:active + div {
  opacity: 1 !important;
  pointer-events: auto !important;
}