/*
 * MY AGELESS ZONE BANNER - CORE IMPLEMENTATION
 * TARGET: Global Custom CSS Editor
 */

/* Design Notes:
   To implement the 'AgeLess Journey landing page, there are 3 elements
		1) Underlying background texture, set in primary section (CSS Class: AgeLessJourney)
		2) An SVG image, which contains most of the visual elements of the 'Map' (CSS Class: AgeLessMapSVG),
		   which is loaded in a Native Zoho Image Container, to enable proper rendering. It is embedded
		   in a column element (CSS Class AgeLessMap)
		3) Interactive elements like buttons, videos, and photos, that are generated in a 
		   Code Snippet (CSS Class: AgeLessMapCode) so they can be positioned properly to
 		   overlay the 'Map'. The snippet code is in Manage.Code Snippets, while the actual
		   code block is a native Zoho Code Module, which provides the parent reference
 		   necessary to 'anchor' the elements in the correct place on the map
		 * Primary Column Element set to 'Sticky' in designer


/* --- GLOBAL VARIABLES --- */
:root {
  --ageless-white-border: #FFFFFF;
  --ageless-shadow: rgba(0, 0, 0, 0.4);
  --ageless-orange: #FF7F50;
  --ageless-dark-orange: #E66A42;
}

/* --- Set Correct Scaling for tablet, phone, small browser windows */
@media screen and (max-width:992px) {
  .AgeLessJourney {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: repeat -y !important;
   }
}

/* --- Configure Object Defaults and Positioning --- */
.AgeLessJourney { 
    /* This is primary container, and displays the background map texture */
    padding: 0 !important; 
    margin: 0 !important;
    /*background-color: #F0F0F0; /* Sidebar Color: CHANGE THIS */
    /*background-image: Linked directly in Designer, could load via url('YOUR_TILED_BACKGROUND_URL.jpg'); */ 
    background-repeat: repeat-y;
    background-size: 1280px auto; 
    background-position: center top; 
}

.AgeLessMap {
    /* This is the container where MAP elements from SVG file 
       loaded into Image Container with CSS Class AgeLessMapSVG
       Testing was done with direct loading of file, but did not work as well */
    position: relative; 
    min-height: 800px; /* Maintain height */
    max-width: 1280px auto ;
    margin: 0 auto !important; 
    padding: 0 !important;
    
}

/* Adjust Positioning of SVG Image */
/*.AgeLessMapSVG {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}
*/

/* Serves as primary anchor for positioning interactive elements
   NOTE: Enabling this code, changes position of element in visual designer
   May need to be commented out temporarily, to enable access to AgeLessMapSVG image box
*/
/*
.AgeLessMapCode {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 40;
    padding: 0 !important;
}*/


/****************************************************************
Code to configure and position the elements created in AgeLessMapCode snippet
(See Manage.Code Snippets)
This elements need to have their precise location determined to be overlayed with the
'Map': GIMP can use a BMP of the design file to provide relative cooridinates of the 
positioning in % reference of absolute, which will need to be coded here to position each element
correctly in the 'Map'
*/

.AgeLessMapButton {
    /* POSITION: Use GIMP % */
    position: absolute !important; 
    bottom: 5% !important;
    left: 50% !important;
    transform: translateX(-50%); /* Ensures button centers on 50% mark */
    z-index: 30;
}
/* Style the native Zoho Button - UI handles color/size, code handles effects */
.AgeLessMapButton a, .AgeLessMapButton button {
    box-shadow: 0 4px 6px var(--ageless-shadow);
    transition: all 0.2s ease;
}
.AgeLessMapButton a:hover {
    background-color: var(--ageless-dark-orange) !important;
    transform: translateY(2px);
}