/* ==========================================================================
   VIEWPORT-BASED SCALING (Desktop Zoom Effect)
   Makes content scale proportionally when resizing window on desktop.
   The --viewport-zoom CSS variable is set by JavaScript.
   ========================================================================== */

/* Apply zoom to all main areas on desktop including header */
@media screen and (min-width: 769px) {
  /* Header areas */
  .region-top-bar,
  .region-header,
  header[role="banner"],
  /* Main content areas */
  main,
  .layout-content,
  .region-content,
  .main-content,
  .view-content,
  .views-view-responsive-grid,
  /* Footer */
  footer,
  .region-footer {
    zoom: var(--viewport-zoom, 1);
  }
  
  /* Fallback for Firefox (doesn't support zoom) - use transform */
  @supports not (zoom: 1) {
    .region-top-bar,
    .region-header,
    header[role="banner"],
    main,
    .layout-content,
    .region-content,
    .main-content,
    .view-content,
    .views-view-responsive-grid,
    footer,
    .region-footer {
      transform: scale(var(--viewport-zoom, 1));
      transform-origin: top center;
    }
  }
}