/*
Theme Name:  Frigotel
Theme URL: https://www.frigotel.it
Version:     1.0.5
Author:      Frigotel
Text Domain: frigotel

Description: Tema custom Frigotel.
*/

/**
 * FRIGOTEL MAIN STYLESHEET
 * Primary entry point for theme styles and global resets.
 */

/* =========================================================
   GLOBAL RESET & OVERFLOW PREVENTION
========================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip; /* Prevent horizontal scroll at the root without breaking position: sticky */
    position: relative;
    -webkit-text-size-adjust: 100%;
}

img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   HEADER STYLING
   Note: Visual appearance (colors, transparency) is managed 
   in components.css. This section handles structural positioning.
========================================================= */

/**
 * Enforces the fixed position of the main header.
 * Uses !important to override dynamic WordPress/Gutenberg styles.
 */
header#site-header.site-header {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: var(--z-navbar);
}

/**
 * WordPress Admin Bar Integration
 * Adjusts header offset when the admin bar is present for desktop and mobile.
 */
body.admin-bar header#site-header.site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    /* Pins admin bar to prevent layout gaps during mobile scrolling */
    #wpadminbar {
        position: fixed !important;
    }

    /* Adjusts offset for the taller mobile admin bar */
    body.admin-bar header#site-header.site-header {
        top: 46px !important;
    }
}

/**
 * Gestione dinamica dell'altezza header e spaziatura contenuto
 */
header#site-header.site-header {
    height: var(--header-height);
    z-index: var(--z-navbar);
}

/* Applica lo spazio al main-content delegandolo ai figli per permettere agli sfondi di arrivare a cima pagina */
#main-content {
    padding-top: 0 !important;
}

/* Integrazione con WordPress Admin Bar */
body.admin-bar #main-content {
    padding-top: 0 !important;
}

/* =========================================================
   GUTENBERG FULL-WIDTH BLOCKS
   Allows full-bleed blocks to extend edge-to-edge
========================================================= */

.wp-block-generate-container {
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   PROGRESSIVE ENHANCEMENT & FALLBACKS
   
   These elements are initially hidden via animations.css to allow
   GSAP to trigger entry animations. This section ensures content
   visibility if JavaScript/GSAP fails to load.
========================================================= */

/**
 * Fade-up animation fallback
 * If GSAP doesn't run, content should still be visible
 */
.anim-fade-up,
.product-visual,
.product-card,
.hero-subtitle {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* =========================================================
   UTILITY & OVERRIDES
========================================================= */

/**
 * Ensure proper spacing around container blocks
 * (Prevents layout shifts with Gutenberg)
 */
.wp-block-generate-container + .wp-block-generate-container {
    margin-top: var(--space-2xl);
}

/**
 * Responsive container adjustments
 */
@media (max-width: 768px) {
    .wp-block-generate-container {
        padding-left: var(--container-padding) !important;
        padding-right: var(--container-padding) !important;
    }
}

/* =========================================================
   ACCESSIBILITY
   Respect system preferences for motion
========================================================= */

/**
 * Reduce motion for users with vestibular motion sensitivities.
 * (Redundant with animations.css but kept for fail-safe accessibility)
 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}