/*
Theme Name: EOS Theme
Theme URI: http://emeraldoakstudios.co.uk/
Template: hello-elementor
Author: Daz
Author URI: http://dazariath.com
Description: A child theme for the Hello Elementor theme
Version: 1.0.0.1764177594
Updated: 2025-11-26 17:19:54

*/


/* Import parent theme styles */
@import url("../hello-elementor/style.css");

/* ========================================
   EOS HERO 3D CANVAS - WORDPRESS STYLES
   ======================================== */
/* Camera Z-position CSS Variables - Adjust these to control model distance on different screens */
:root {
  --camera-z-mobile: 300;   /* Mobile phones (< 480px) - further back to fit model */
  --camera-z-tablet: 150;   /* Tablets (481px - 768px) - moderate distance */
  --camera-z-desktop: 0;    /* Desktop (> 768px) - default close position */
}

/* Base Canvas Styles - EOS Hero 3D Background */
.eos-hero-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: -1 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile Portrait (most phones) */
@media (max-width: 768px) and (orientation: portrait) {
  .eos-hero-canvas {
    /* Reduce height for mobile - leaves space for content */
    height: 60vh !important;
    width: 100vw !important;
    top: 0 !important;
  }
}

/* Mobile Landscape (phones rotated) */
@media (max-width: 768px) and (orientation: landscape) {
  .eos-hero-canvas {
    /* Full screen for landscape mobile */
    height: 100vh !important;
    width: 100vw !important;
    top: 0 !important;
  }
}

/* Tablet Portrait */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  .eos-hero-canvas {
    /* Slightly reduced for tablet portrait */
    height: 75vh !important;
    width: 100vw !important;
  }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .eos-hero-canvas {
    /* Full height for tablet landscape */
    height: 100vh !important;
    width: 100vw !important;
  }
}

/* Desktop and larger screens */
@media (min-width: 1025px) {
  .eos-hero-canvas {
    /* Full viewport for desktop */
    height: 100vh !important;
    width: 100vw !important;
  }
}

/* ========================================
   WORDPRESS CONTENT ADJUSTMENTS
   ======================================== */

/* Make sure WordPress content stays above the 3D canvas */
.site-main,
.site-content,
article,
.entry-content,
.post,
.page,
.elementor,
.elementor-section {
  position: relative !important;
  z-index: 1 !important;
  background: transparent;
}

/* Add some padding to mobile content when canvas is reduced */
@media (max-width: 768px) {
  .site-main,
  .site-content {
    padding-top: 2rem;
    /*min-height: 150vh; /* Ensure scrollable content */
  }
}

/* Hello Elementor specific adjustments */
.site-header {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
}

.site-footer {
  position: relative !important;
  z-index: 2 !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
}

/* Ensure Elementor sections are transparent by default */
.elementor-section .elementor-background-overlay {
  opacity: 0.1 !important;
}