/**
 * @file
 * IPI Singapore Theme - Global Styles
 * Works alongside Tailwind CSS utilities
 */

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
  --ipi-primary: #0066cc;
  --ipi-primary-dark: #004d99;
  --ipi-primary-light: #3399ff;
  --ipi-secondary: #00a651;
  --ipi-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ipi-font-heading: 'Plus Jakarta Sans', var(--ipi-font-primary);
}

/* ============================================
   Base Reset
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ipi-font-primary);
  margin: 0;
  padding: 0;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ipi-font-heading);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================
   Drupal Admin Adjustments
   ============================================ */
.toolbar-fixed body.toolbar-tray-open.toolbar-vertical {
  margin-left: 0;
}

/* Hide Drupal contextual links padding in frontend */
.contextual-region {
  position: relative;
}

/* ============================================
   Button Styles
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: var(--ipi-primary);
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--ipi-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background-color: transparent;
  color: var(--ipi-primary);
  border: 2px solid var(--ipi-primary);
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--ipi-primary);
  color: white;
}

/* ============================================
   Remove JSX-style class artifacts
   ============================================ */
[class*="jsx-"] {
  /* Reset any JSX styles that might interfere */
}

/* ============================================
   Image handling
   ============================================ */
img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   Form Element Resets
   ============================================ */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ============================================
   Focus States for Accessibility
   ============================================ */
:focus-visible {
  outline: 2px solid var(--ipi-primary);
  outline-offset: 2px;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
  .no-print {
    display: none !important;
  }
}