/**
 * BODY SLEEP MIND — WELLNESS BACKGROUND SYSTEM
 * Single unified stylesheet
 */

/* ============================================================
   1. GLOBAL BACKGROUND (DNA + Light Green Gradient)
   ============================================================ */
/* BODY SLEEP MIND — Spa/Lotus Background */

body {
 /*experiments*/
 /*background-image: url("https://bodysleepmind.com/wp-content/uploads/2026/01/sauce_bowels_palm_trans_bg.png");*/
 /* background-image: url("https://bodysleepmind.com/wp-content/uploads/2026/01/pepples_palm_white_bg.png");*/
 background-image: url("https://bodysleepmind.com/wp-content/uploads/2026/01/pepples_palm_beige_bg.png");
  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/**********fully white in mobile mode****************/
@media (max-width: 600px) {
    body {
		background-image:none;		
		background-color: #white !important;
		}
	}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box; 
    box-shadow: none !important;
    
	/*experiments*/
	/* background: linear-gradient(to bottom right, #fff, #ff) !important;//white to white*/
	/*background: none !important;*/
	/*background-color: #f5e9d8 !important;/*beige*/
	background-color: #white !important;
                              
    border-radius: 0px !important;
    font-family: 'Segoe UI', sans-serif;
    color: #004d40;
    border-left: orange solid 5px !important;
}

/**********fully white in mobile mode****************/
@media (max-width: 600px) {
    .container {		
		background-color: white !important;
		}
	}
	
	
/*=================================================================================================================	
	
EXPERIMENTS TO STYLE_BSM ---the following are all just experiments-> foundation styling (style_bsm) on success 

==================================================================================================================*/
h1 {
    font-family: 'Arial', sans-serif !important;
    font-size: 1.7em;
    color: #2f8813;
    border-bottom: 3px solid #2f8813;
    padding-bottom: 10px;
    margin-top: 10px;
}

.view-btn {
    background-color: #37a00f !important;
    background-image: url(/wp-content/themes/tt24child/icons/view.svg);
}





/* ============================================================
   2. TRANSPARENCY FIX FOR WORDPRESS BLOCKS
   ============================================================ */
.wp-block-cover,
.wp-block-cover__background,
.wp-block-group,
.site-content,
.wp-site-blocks,
.is-layout-flex,
.is-layout-flow {
    background: transparent !important;
}

.wp-block-cover__image-background {
    display: none !important;
}


/* ============================================================
   3. FRONT-PAGE MARGINS (Cleaner)????????????? nah---cant be applied to protected pages
   ============================================================ */
body.home :where(.is-layout-flow) > :first-child,
body.front-page :where(.is-layout-flow) > :first-child {
  margin-top: 0;
  margin-inline: 50px !important;
}

body.home :where(.is-layout-flow) > :last-child,
body.front-page :where(.is-layout-flow) > :last-child {
  margin-bottom: 100px;
  margin-inline: 50px !important;
}

/* ============================================================
   Global Menu (style_bodyglobal.css) - RECTANGLE FIX
   ============================================================ */

/* A. CONTAINER TRANSPARENCY */
.wp-block-navigation, 
.wp-block-navigation__container, 
.is-responsive.items-justified-right {
    background-color: transparent !important;
    border: none !important;
}

/* B. LOGIC FLIP (Logged In vs Out) */
body:not(.logged-in) .wp-block-navigation-item:nth-child(4),
body:not(.logged-in) .wp-block-navigation-item:nth-child(5),
body:not(.logged-in) .wp-block-navigation-item:nth-child(6) {
    display: none !important;
}
body.logged-in .wp-block-navigation-item:nth-child(1),
body.logged-in .wp-block-navigation-item:nth-child(2),
body.logged-in .wp-block-navigation-item:nth-child(3) {
    display: none !important;
}

/* C. SHARED PILL BASE (Desktop Buttons) */
.wp-block-navigation-item__content.wp-block-navigation-item__content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.8rem !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
}

/* D. SECONDARY BUTTONS */
.wp-block-navigation-item:nth-child(1) .wp-block-navigation-item__content,
.wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__content {
    border: 2px solid #1b4d3e !important;
    color: #1b4d3e !important;
    background: transparent !important;
}

/* E. LIME HERO BUTTONS */
.wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content,
.wp-block-navigation-item:nth-child(6) .wp-block-navigation-item__content {
    background-color: #D7FD8C !important;
    color: #1b4d3e !important;
    box-shadow: 0 4px 15px rgba(27, 77, 62, 0.2) !important;
    border: none !important;
}

/* F. MINIMALIST LINKS */
.wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content,
.wp-block-navigation-item:nth-child(5) .wp-block-navigation-item__content {
    color: #1b4d3e !important;
    background: transparent !important;
}

/* G. HOVER LOGIC */
.wp-block-navigation-item__content:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.05);
}

/* ================================================================================
     MOBILE MENUS: THE RECTANGLE HAMBURGER
================================================================================ */

/* 1. THE TRIGGER BUTTON (The Rectangle) */
.wp-block-navigation__responsive-container-open {
    background-color: transparent !important;
    border: 2px solid #1b4d3e !important; /* Forest Green Border */
    padding: 10px 14px !important;        /* Big Padding */
    border-radius: 0px !important;        /* RECTANGLE (Sharp Edges) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important; /* Ensures it feels clickable */
}

/*header background that wouldnt take in the template design*/
.wp-block-group.is-layout-flex.wp-block-group-is-layout-flex {
    background-color:#f8e1b0 !important;
}


/* Icon Color Logic */
.wp-block-navigation__responsive-container-open svg {
    fill: #1b4d3e !important;
    width: 24px !important;
    height: 24px !important;
}

/* 2. THE DRAWER (When Open) */
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
    background-color: white !important;
    padding: 20px !important;
}

/* 3. DRAWER LINKS */
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open a {
    color: #1b4d3e !important;
    font-weight: bold !important;
    display: block !important;
    margin-left: 10% !important;
    text-decoration: none !important;
    font-size: 1.2rem !important;
}

/* 4. DESKTOP VISIBILITY RULE */
/* Strict Hide Hamburger on Desktop (>600px) */
/* We do NOT hide the container on mobile via CSS anymore, 
   we let the WP Block handle the swap to ensure clickability works. */

@media (min-width: 601px) {
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}