/*
 * NAMKC Youth Website - Responsive Styles
 * Media queries for tablet, desktop, and large desktop breakpoints
 * Mobile-first approach: base styles are mobile, enhancements added for larger screens
 */

/* ============================
   TABLET BREAKPOINT (768px+)
   ============================ */

@media (min-width: 768px) {

  /* --- Header & Navigation --- */

  .site-header .container {
    min-height: var(--nav-height-desktop);
  }

  .site-logo {
    font-size: 1.75rem;
  }

  .site-logo-img {
    height: 50px;
  }

  /* --- Hero Section --- */

  .hero {
    padding: calc(var(--spacing-3xl) * 1.5) 0;
  }

  .hero-title {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1.5rem;
  }

  /* --- Cards --- */

  .card-content {
    padding: var(--card-padding-desktop);
  }

  /* --- Forms --- */

  .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  .form-row .form-group {
    margin-bottom: 0;
  }

  /* --- Footer --- */

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- Buttons --- */

  .btn {
    padding: var(--button-padding-y-desktop) var(--button-padding-x-desktop);
    font-size: 1.125rem;
  }

  .btn-small {
    padding: 10px 24px;
    font-size: var(--font-size-body);
  }

  .btn-large {
    padding: 18px 48px;
    font-size: 1.25rem;
  }

}

/* ============================
   DESKTOP BREAKPOINT (1024px+)
   ============================ */

@media (min-width: 1024px) {

  /* --- Header & Navigation --- */

  /* Hide mobile navigation toggle */
  .nav-toggle {
    display: none;
  }

  /* Desktop navigation layout */
  .primary-nav {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .primary-nav ul {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .primary-nav a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
  }

  .primary-nav a:hover,
  .primary-nav a.active {
    background-color: rgba(255, 255, 255, 0.15);
  }

  /* Hide nav overlay on desktop */
  .nav-overlay {
    display: none;
  }

  /* --- Hero Section --- */

  .hero {
    padding: calc(var(--spacing-3xl) * 2) 0;
  }

  .hero-title {
    font-size: 3.5rem;
  }

  .hero-subtitle {
    font-size: 1.75rem;
  }

  /* --- Layout --- */

  section {
    padding: var(--spacing-3xl) 0;
  }

  /* --- Footer --- */

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-2xl);
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  /* --- Two Column Layout --- */

  .two-column {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }

  .two-column.reverse {
    grid-template-columns: 1fr 2fr;
  }

  /* --- Content Layouts --- */

  .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-xl);
  }

  /* --- Forms --- */

  .form-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
  }

  .form-actions .btn {
    width: auto;
    min-width: 200px;
  }

  /* --- Cards in Grid --- */

  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }

  .card-grid.two-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid.four-cols {
    grid-template-columns: repeat(4, 1fr);
  }

}

/* ============================
   LARGE DESKTOP BREAKPOINT (1440px+)
   ============================ */

@media (min-width: 1440px) {

  /* --- Hero Section --- */

  .hero-title {
    font-size: 4rem;
  }

  .hero-subtitle {
    font-size: 2rem;
  }

  /* --- Large Container Padding --- */

  .container {
    padding-left: var(--spacing-2xl);
    padding-right: var(--spacing-2xl);
  }

  /* --- Footer --- */

  .footer-content {
    grid-template-columns: repeat(4, 1fr);
  }

}

/* ============================
   PRINT STYLES
   ============================ */

@media print {

  /* Hide non-essential elements */
  .site-header,
  .site-footer,
  .nav-toggle,
  .primary-nav,
  .btn,
  .social-link {
    display: none !important;
  }

  /* Optimize for printing */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  /* Ensure content is visible */
  section {
    page-break-inside: avoid;
  }

  .card {
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }

  /* Show URLs for links */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

}

/* ============================
   REDUCED MOTION
   ============================ */

@media (prefers-reduced-motion: reduce) {

  /* Disable animations for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation: none;
    border-top-color: var(--color-primary);
  }

}

/* ============================
   HIGH CONTRAST MODE
   ============================ */

@media (prefers-contrast: high) {

  /* Enhance contrast for users who need it */
  .btn-primary,
  .btn-cta {
    border-width: 3px;
  }

  .card {
    border-width: 2px;
    border-color: var(--color-border-dark);
  }

  .form-input,
  .form-select,
  .form-textarea {
    border-width: 2px;
  }

}

/* ============================
   DARK MODE (Future Enhancement)
   ============================ */

@media (prefers-color-scheme: dark) {

  /*
   * Dark mode styles can be added here in future
   * Currently using light theme only for brand consistency
   *
   * Example implementation:
   * :root {
   *   --color-bg-primary: #1a1a1a;
   *   --color-text-primary: #ffffff;
   *   etc.
   * }
   */

}

/* ============================
   LANDSCAPE ORIENTATION (Mobile)
   ============================ */

@media (max-width: 767px) and (orientation: landscape) {

  /* Adjust hero for landscape mobile */
  .hero {
    padding: var(--spacing-xl) 0;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  /* Adjust navigation height */
  .site-header .container {
    min-height: 56px;
  }

  .primary-nav {
    padding-top: 56px;
  }

}

/*
 * DEVELOPER NOTES:
 *
 * Breakpoint Strategy:
 * - Mobile (< 768px): Base styles in main.css and components.css
 * - Tablet (768px - 1023px): Two-column layouts, larger text
 * - Desktop (1024px+): Three-column layouts, horizontal nav, enhanced spacing
 * - Large (1440px+): Maximum container width, four-column layouts
 *
 * Navigation Transformation:
 * - Mobile: Hamburger menu with slide-in navigation
 * - Desktop: Horizontal navigation in header
 * - Smooth transition between states
 *
 * Accessibility Features:
 * - Print styles for documentation
 * - Reduced motion support for motion-sensitive users
 * - High contrast mode enhancements
 * - Dark mode placeholder for future implementation
 *
 * Grid Layouts:
 * - Cards automatically adjust columns: 1 → 2 → 3 → 4
 * - Use .card-grid with .two-cols or .four-cols to override
 * - Content layouts include sidebar options
 *
 * Testing:
 * - Test at 320px (small mobile)
 * - Test at 768px (tablet)
 * - Test at 1024px (desktop)
 * - Test at 1440px+ (large desktop)
 * - Test in landscape orientation on mobile
 * - Test with "Reduce Motion" enabled
 * - Test print layout
 */