/*
 * LAYOUT SYSTEM — Zevivo Website
 * ============================================================
 * Unified Layout & Spacing System
 * 
 * This system decouples the fixed header height from page layouts.
 * It uses CSS variables to dynamically manage the offset required
 * by the fixed header, ensuring that changes to the logo or header
 * height do not break page layouts or obscure breadcrumbs.
 * ============================================================
 */

:root {
  /* 
   * Header Height Tokens
   * These values represent the total height of the fixed header.
   * Desktop: 170px (77px top + 93px main) — measured 2026-05-13
   * Mobile: ~68px (mobile header)
   */
  --header-height-desktop: 170px;
  --header-height-mobile: 68px;
  
  /* Active header height based on viewport */
  --header-height: var(--header-height-desktop);
  
  /* 
   * Hero Section Padding Tokens
   * Base padding + header offset
   */
  --hero-padding-top-base: 70px;
  --hero-padding-top: calc(var(--header-height) + var(--hero-padding-top-base));
  
  /* Carousel offset */
  --carousel-margin-top: var(--header-height);
}

@media (max-width: 991.98px) {
  :root {
    --header-height: var(--header-height-mobile);
  }
}

/* ============================================================
   GLOBAL LAYOUT UTILITIES
   ============================================================ */

/* 
 * Apply this class to any hero section that sits under the fixed header.
 * It automatically applies the correct padding-top based on the viewport.
 */
.layout-hero-offset {
  padding-top: var(--hero-padding-top) !important;
}

/* 
 * Apply this class to the homepage carousel to offset it below the header.
 */
.layout-carousel-offset {
  margin-top: var(--carousel-margin-top) !important;
}

/* 
 * Apply this class to the body element on mobile to offset the fixed mobile header.
 */
.layout-body-offset {
  padding-top: var(--header-height) !important;
}