/*
Theme Name: Divi Child
Description: Child theme for Divi
Author: Lars Larsson
Template: Divi
Version: 1.0.0
*/

@import url("../Divi/style.css");

/* Fjällkartan responsive styles */
.fjallkartan-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fjallkartan-fullwidth {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .fjallkartan-wrapper,
  .fjallkartan-fullwidth {
    height: 400px !important;
    min-height: 400px;
  }
}

@media (max-width: 480px) {
  .fjallkartan-wrapper,
  .fjallkartan-fullwidth {
    height: 350px !important;
    min-height: 350px;
  }
}

/* Ensure map controls are accessible on mobile */
.fjallkartan-wrapper iframe,
.fjallkartan-fullwidth iframe {
  min-height: 350px;
}

/* Full-screen map between header and footer */
.fjallkartan-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}

/* Account for Divi header */
body.et_fixed_nav .fjallkartan-fullscreen {
  top: var(--et-admin-bar-height, 0px);
  padding-top: var(--et_fixed_header_height, 80px);
}

/* Account for Divi footer */
.fjallkartan-fullscreen {
  padding-bottom: var(--et_footer_height, 60px);
}

/* Dynamic header height calculation */
body.et_fixed_nav #main-header.et-fixed-header ~ * .fjallkartan-fullscreen {
  padding-top: 80px; /* Default Divi header height */
}

/* Mobile header adjustments */
@media (max-width: 980px) {
  body.et_fixed_nav .fjallkartan-fullscreen {
    padding-top: 60px; /* Mobile header height */
  }
}

/* Alternative: Calculate header height dynamically */
.fjallkartan-viewport {
  width: 100vw;
  height: calc(100vh - var(--header-height, 80px) - var(--footer-height, 60px));
  margin-left: calc(50% - 50vw);
  position: relative;
}

/* Hide Divi page content when full-screen map is active */
.fjallkartan-page #main-content > .container {
  display: none;
}

.fjallkartan-page .fjallkartan-fullscreen {
  display: block;
}

/* Direct integration styles */
.fjallkartan-direct-container {
  position: relative;
  width: 100%;
  height: 400px; /* Default height for regular embed */
  min-height: 400px;
}

.fjallkartan-direct-container[data-fullscreen="true"] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  /* Height will be calculated by JavaScript to fit between header and footer */
  min-height: 400px;
}

.fjallkartan-direct-container[data-fullscreen="true"] #map {
  width: 100% !important;
  height: 100% !important;
}

/* Fullscreen container setup - keep footer visible */
.fjallkartan-fullscreen-page #main-content {
  display: flex !important;
  flex-direction: column !important;
}

.fjallkartan-fullscreen-page .fjallkartan-direct-container[data-fullscreen="true"] {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure OpenLayers controls work properly in WordPress */
.fjallkartan-direct-container .ol-viewport {
  position: relative !important;
}

.fjallkartan-direct-container .ol-overlaycontainer-stopevent {
  position: absolute !important;
}

/* Mobile adjustments - only for regular containers, not fullscreen */
@media (max-width: 768px) {
  .fjallkartan-direct-container:not([data-fullscreen="true"]) {
    height: 400px !important;
    min-height: 400px;
  }
  
  /* Fullscreen mobile fixes */
  .fjallkartan-direct-container[data-fullscreen="true"] {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    /* Height will be calculated by JavaScript to show footer */
    min-height: 300px !important;
  }
}

@media (max-width: 480px) {
  .fjallkartan-direct-container:not([data-fullscreen="true"]) {
    height: 350px !important;
    min-height: 350px;
  }
}

/* Additional mobile fixes for fullscreen */
@media screen and (max-width: 768px) {
  /* Keep footer visible but remove extra spacing */
  .fjallkartan-fullscreen-page #main-footer {
    margin-bottom: 0 !important;
  }
  
  /* Ensure map container takes full remaining space */
  .fjallkartan-direct-container[data-fullscreen="true"] #map {
    height: 100% !important;
    width: 100% !important;
  }
  
  /* Fix potential Divi mobile menu issues */
  .fjallkartan-fullscreen-page.et_mobile_menu_opened .fjallkartan-direct-container[data-fullscreen="true"] {
    z-index: 999999 !important;
  }
}

/* Ensure proper map sizing within container */
.fjallkartan-direct-container[data-fullscreen="true"] #map {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}