/* =========================================
   SYNTAX NEURAL | KEMET TOURS USA 
   File: KemetTours.css
   Matrix: Flexbox DOM Formatting (Hierarchical)
========================================= */

:root {
    --kemet-black: #5b4b44;
    --kemet-brown-dark: #642d15;
    --kemet-brown-light: #8eaedf;
    --kemet-beige: #d7e2ea;
}

* {
    /* --- 2. BOX MODEL --- */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#ihab-deployment-matrix {
    /* --- 1. LAYOUT --- */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* --- 2. BOX MODEL --- */
    min-height: 100vh;
    padding: 2rem 0;
    padding-top:  120px !important; /* !important ensures override */

    /* --- 3. VISUALS --- */
    /* linear-gradient(Angle/Direction, Color1 Stop%, Color2 Stop%, Color3 Stop%) */
    background: linear-gradient(135deg, var(--kemet-black) 0%, var(--kemet-brown-dark) 35%, var(--kemet-beige) 100%);

    /* --- 4. TYPOGRAPHY --- */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--kemet-beige);
}

#ihab-container {
    /* --- 1. LAYOUT --- */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
       

    /* --- 2. BOX MODEL --- */
    width: 95%;
    max-width: 900px;
    padding: 0.9rem;
 
    /* --- 3. VISUALS --- */
    background-color: #642d15;
    border: 2px solid var(--kemet-brown-light);
    border-radius: 12px;
    /* box-shadow: X-offset Y-offset Blur-Radius Spread-Radius Color */
    box-shadow: 0px 15px 30px rgba(249, 244, 198, 0.7);
    backdrop-filter: blur(50px);
}

/* Headers */
#phoenix-header {
    /* --- 2. BOX MODEL --- */
    padding-bottom: 1.5rem;

    /* --- 3. VISUALS --- */
    border-bottom: 1px solid var(--kemet-brown-dark);

    /* --- 4. TYPOGRAPHY --- */
    text-align: center;
}

#kemet-main-title {
    /* --- 2. BOX MODEL --- */
    margin-bottom: 0.5rem;

    /* --- 4. TYPOGRAPHY --- */
    font-size: 3rem;
    letter-spacing: 1rem 0.5px;
    text-transform: uppercase;
    color: var(--kemet-beige);
    /* text-shadow: X-offset Y-offset Blur-Radius Color */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

#kemet-subtitle {
    /* --- 4. TYPOGRAPHY --- */
    font-size: 1.2rem;
    color: var(--kemet-brown-light);
}

/* Media Zone */
#media-flex-box {
    /* --- 1. LAYOUT --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    /* --- 2. BOX MODEL --- */
    width: 100%;
}

#tio-video, #dodge-map {
    /* --- 1. LAYOUT --- */
    display: block; /* Ensure they are block elements so margin auto works */

    /* --- 2. BOX MODEL --- */
    width: 70%;
    margin: 0 auto; /* forces the browser to calculate equal space on left and right */
    
    /* --- 3. VISUALS --- */
    background-color: var(--kemet-black);
    border: 2px solid var(--kemet-brown-light);
    border-radius: 6px;
    /* box-shadow: X-offset Y-offset Blur-Radius Color */
   
    /* box-shadow: 0 0 [Blur-Radius] [Spread-Radius] [Color] */
    box-shadow: 0 0 20px 2px rgba(246, 198, 23, 0.6);
}

/* Section Formatting */
#who-we-are-section {
    /* --- 1. LAYOUT --- */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    /* --- 2. BOX MODEL --- */
    min-width: 90%;
    margin: 20px;
    padding: 2rem;

    /* --- 3. VISUALS --- */
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--kemet-brown-dark);
    border-radius: 8px;
    box-shadow: 0 0 20px 2px rgba(246, 198, 23, 0.6);
}

#section-title-who {
    /* --- 2. BOX MODEL --- */
    margin-bottom: 1rem;

    /* --- 4. TYPOGRAPHY --- */
    font-size: 1.8rem;
    color: var(--kemet-beige);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Accordions */
details {
    /* --- 3. VISUALS --- */
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--kemet-brown-dark);
    border-left: 4px solid var(--kemet-brown-light);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

details[open] {
    /* --- 3. VISUALS --- */
    border-left-color: var(--kemet-beige);
}

summary {
    /* --- 2. BOX MODEL --- */
    padding: 1rem;

    /* --- 3. VISUALS --- */
    background-color: var(--kemet-black);
    cursor: pointer;
    list-style: none;

    /* --- 4. TYPOGRAPHY --- */
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--kemet-beige);
}

summary::-webkit-details-marker {
    /* --- 1. LAYOUT --- */
    display: none;
}

summary:hover {
    /* --- 3. VISUALS --- */
    background-color: var(--kemet-brown-dark);
}

.lang-content {
    /* --- 2. BOX MODEL --- */
    padding: 1.5rem;

    /* --- 3. VISUALS --- */
    background-color: rgba(13, 9, 7, 0.9);
    border-top: 1px solid var(--kemet-brown-dark);

    /* --- 4. TYPOGRAPHY --- */
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Footer */
#syntax-footer {
    /* --- 2. BOX MODEL --- */
    padding-top: 1.5rem;

    /* --- 3. VISUALS --- */
    border-top: 1px solid var(--kemet-brown-dark);

    /* --- 4. TYPOGRAPHY --- */
    text-align: center;
}

#footer-note {
    /* --- 4. TYPOGRAPHY --- */
    font-size: 0.85rem;
    color: var(--kemet-brown-light);
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* Space out each form row and make elements block-level for separation */
form div {
    margin-bottom: 15px;
}

/* Force labels to sit nicely above or apart from the input */
form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Make text boxes wider and give them clean padding */
form input[type="text"] {
    width: 100%;
    max-width: 500px;
    padding: 8px 12px;
    box-sizing: border-box;
}

/* ==================================================
   PATCH V1.0: FIXED TOOLBAR OVERRIDES 
   Appending to bypass legacy container flow
================================================== */

#top-toolbar {
    /* --- 1. LAYOUT --- */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;

    /* --- 2. BOX MODEL --- */
    width: 100%;
    min-height: 60px;
    /* --- 3. VISUALS --- */
    background-color:#7a3417;
    border-bottom: 1px solid var(--kemet-brown-light);
    margin-bottom: 0.1px;
    padding : 0.1px;
}

#toolbar-buttons {
    /* --- 1. LAYOUT --- */
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; /* Centers them */
    align-items: center;     /* Vertically aligns them */
    gap: 10vw;               /* THIS IS THE DISTANCE BETWEEN THEM */


    /* --- 2. BOX MODEL --- */
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
}

#status-console ,#status-console-Urgent {
    /* --- 1. LAYOUT --- */
    display: flex;
    align-items: center;

    /* --- 2. BOX MODEL --- */
    width: 100%;
    min-height: 12px;    /* CHANGED: Allows vertical growth */
    padding: 0.5px 1rem;

    /* --- 3. VISUALS --- */
   background: rgba(0, 0, 0, 0.4);

    /* --- 4. TYPOGRAPHY --- */
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--kemet-beige);
    line-height: 1.4;    /* Adds slight vertical space between wrapped lines */
    
    /* [ACTIVE EXAMPLE: Elastic Multiline Wrap] */
    white-space: normal; /* Ensures default wrapping is active */
    
    /* [DIMMED EXAMPLE: Rigid Single-Line Truncation] */
    /* white-space: nowrap; */ /* 1. Forbid the \n line break */
    /* overflow: hidden; */    /* 2. Hide any text that pushes past the right edge */
    
    /* 3. Add '...' to the end to indicate cut-off data (Needs overflow: hidden to work) */
    text-overflow: ellipsis;
}



/* ==================================================
   ANIMATION MATRIX | KEMET TOURS USA
   Logic: Status Console & Interactive Elements
================================================== */

/* 1. STATUS CONSOLE: Slide-in logic */
.scrolling-text {
    /* 
       Short-hand: Name | Duration | Timing | Iterations | Fill Mode
       'ease-out': Decelerates as it hits the stop point.
       '1': Runs once.
       'forwards': Locks in place at 100% keyframe.
    */
    animation: attention-pulse 2s ease-out 1 forwards; 
}

/* 2. INTERACTIVE ELEMENTS: Pulse/Attention logic */
.attention-pulse {
    /* 
       This can be applied to buttons or icons to grab user attention.
       'infinite' ensures the effect loops continuously.
    */

        /* Required: Transform only works on elements with a layout box */
    display: inline-block; 
   /* animation: pulse 2s ease-in-out infinite;*/
    animation: Ihabian_Animation 2s ease-in-out infinite;
}


/* ==================================================
   IHABIAN_ANIMATION REGISTRY
   Use this library to cue behaviors to any element.
   To activate, call the name in your animation property:
   animation: [Name] [Duration] [Timing] [Iteration];
================================================== */





/* The Scroll Engine: Pushes element from screen-right into view */
@keyframes scroll-left {
    0%   { transform: translateX(100vw); } 
    100% { transform: translateX(0); }    
}

/* The Pulse Engine: Zoom-in/Zoom-out effect */
@keyframes pulse {
    0%   { transform: scale(1); }    /* Normal state */
    50%  { transform: scale(1.1); }  /* Zoomed in (1.2 is 20% larger; 3.5 was likely breaking your layout) */
    100% { transform: scale(1); }    /* Back to normal */
}

@keyframes Ihabian_Animation {
   0%, 100% { box-shadow: 0 0 5px rgba(68, 227, 153, 0.5); }
    50%      { box-shadow: 0 0 20px 5px rgba(68, 227, 153, 0.8); }
}
    /* 1. SCROLL-LEFT: Smooth entry from off-screen */
    /* Use: animation: Ihabian_Animation 2s ease-out 1 forwards; */
    /* 0%   { transform: translateX(100vw); } 
    100% { transform: translateX(0); }  */

    /* 2. PULSE: Subtle breathing/glowing effect */
    /* Use: animation: Ihabian_Animation 2s ease-in-out infinite; */
    /*
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
    */

    /* 3. SHAKE: Useful for error states or alerts */
    /* Use: animation: Ihabian_Animation 0.5s ease-in-out infinite; */
    /*
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
    */

    /* 4. FADE-IN: Smooth appearance */
    /* Use: animation: Ihabian_Animation 1.5s ease-in 1 forwards; */
    /*
    0%   { opacity: 0; }
    100% { opacity: 1; }
    */



    /* 5. ROTATE: Perfect for loading spinners or branding icons */
    /* Use: animation: Ihabian_Animation 3s linear infinite; */
    /*
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    */

    /* 6. FLIP-HORIZONTAL: High-impact transition for buttons/cards */
    /* Use: animation: Ihabian_Animation 1s ease-in-out 1; */
    /*
    0%   { transform: perspective(400px) rotateY(0deg); }
    100% { transform: perspective(400px) rotateY(180deg); }
    */

    /* 7. GLOW-PULSE: A professional 'Neon' breathing effect */
    /* Use: animation: Ihabian_Animation 2s ease-in-out infinite; */
    /*
    0%, 100% { box-shadow: 0 0 5px rgba(68, 227, 153, 0.5); }
    50%      { box-shadow: 0 0 20px 5px rgba(68, 227, 153, 0.8); }
    */

    /* 8. BOUNCE: Playful attention-grabber for footer or notes */
    /* Use: animation: Ihabian_Animation 1s ease infinite; */
    /*
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
    */













.nav-btn {
    /* --- 2. BOX MODEL --- */
    min-width: auto;     /* Forces all buttons to be AT LEAST this wide */
    max-width: 10vw; 
    padding: 0.6rem 0.2px;
   /* 2. Set them to grow/shrink equally */
    flex: 1 1 0px; 
    
    /* --- 3. VISUALS --- */
    background-color: var(--kemet-brown-dark);
    border: 1px solid var(--kemet-brown-light);
    border-radius: 4px;
    cursor: pointer;

    /* --- 4. TYPOGRAPHY --- */
    color: #FFD700;
    font-weight: bold;
    text-align: center;  /* Keeps the text centered inside */
    text-transform: uppercase;
/*    white-space: wrap;     Prevents the text inside the button from wrapping */



    /* Font size will never be smaller than 0.5rem, 
       never larger than 1rem, 
       and will fluidly scale based on viewport width (vw) */
    font-size: clamp(0.5rem, 2vw, 1rem); 
    
    overflow: hidden;         /* Clip the text if it absolutely cannot fit */
    text-overflow: ellipsis;  /* Show '...' if the text is cut off */
}

.toolbar-logo {
    /* --- 2. BOX MODEL --- */
    max-height: 50px; /* Constrains vertical growth to fit the 90px toolbar */
    max-width: 80px; /* Prevents the logo from pushing buttons out of the way */
    
    width: auto;      /* Allows dynamic scaling */
    height: auto;     /* Allows dynamic scaling */
        /* box-shadow: 0 0 [Blur-Radius] [Spread-Radius] [Color] */
    box-shadow: 0 0 5px 2px var(--kemet-beige);

    border-radius: 4px;
    border: 15px;
    /* --- 3. VISUALS --- */
    object-fit: contain; /* CRITICAL: Forces the image to scale proportionally without distortion */

    animation: pulse 8s ease-in-out infinite;
}

/*-------------------------------------------------------------------*/

/* THE PARENT: The Layout Controller */


/* THE CHILDREN: The Objects Being Manipulated */



/* THE PARENT: The Layout Controller */
.flex-lab {

    /* --- 1. THE IGNITION --- */
    display: flex; 

    /* --- 2. THE AXIS (Direction of flow) --- */
    /* Options: 
       row (default, horizontal left-to-right)
       column (vertical top-to-bottom)
       row-reverse (horizontal right-to-left)
       column-reverse (vertical bottom-to-top) 
    */
    flex-direction: row; 

    /* --- 3. MAIN-AXIS ALIGNMENT (Horizontal, if direction is row) --- */
    /* Options: 
       flex-start (pack to the left side)
       center (pack tightly into the middle)
       flex-end (pack to the right side)
       space-between (push outer blocks to the far edges, space middle evenly)
       space-evenly (mathematically equal space between and around all blocks) 
    */
    justify-content: space-evenly; 

    /* --- 4. CROSS-AXIS ALIGNMENT (Vertical, if direction is row) --- */
    /* Options: 
       stretch (default, blocks stretch to touch top and bottom of the container)
       center (blocks sit exactly in the vertical middle)
       flex-start (blocks align to the top ceiling)
       flex-end (blocks drop to the bottom floor) 
    */
    align-items: center; 

    /* --- 5. COLLISION CONTROL --- */
    /* Options: 
       nowrap (default, shrink the blocks if they run out of width)
       wrap (if a block hits the right wall, drop it to a new line) 
    */
    flex-wrap: wrap; 

    /* --- 6. SPACING --- */
    /* This only dictates the empty space injected between blocks, not outer margins */
    gap: 2rem; 

    
    /* ---  VISUALS --- */
    background-color: var(--kemet-black);



    /* --- LABORATORY Borders --- */
    border: 3px dashed var(--kemet-brown-light); 
    border-radius: 4px;
    cursor: pointer;
    min-height: 300px; /* Gives the container vertical room so you can test align-items */
    padding: 10px;     
;     

  





}

/* THE CHILDREN: The Objects Being Manipulated */
.test-block {
    /* ---  TYPOGRAPHY --- */
    
    color: #5e240b;

        /* Font size will never be smaller than 0.5rem, 
       never larger than 1rem, 
       and will fluidly scale based on viewport width (vw) */
    font-size: clamp(0.5rem, 2vw, 1rem); 
    font-weight: bold;
    text-align: center;  /* Keeps the text centered inside */
    text-transform: uppercase;
    min-width: 400px; /* Adjust this to whatever width you want your box to hold */
    display: inline-block;
    /* optional: add a border or background so it looks like a clean status box */
/*    white-space: wrap;     Prevents the text inside the button from wrapping */

/* This tells the block: "You are allowed to grow, 
       but don't hog more than 30% of the total row space." */
    /*flex: 1 1 30%; 
    
    /* This prevents the text from making the block wider than 30% */
   /* max-width: 30%;
 
    overflow: hidden;         /* Clip the text if it absolutely cannot fit */
    text-overflow: ellipsis;  /* Show '...' if the text is cut off */
    background-color: var(--kemet-beige);
   

    padding: 20px 40px; /* Internal cushion */
    margin: 0;          /* Kills the browser's hidden H1 default margin */
    border: 2px solid white;
    border-radius: 6px;
    /* box-shadow: X-offset Y-offset Blur-Radius Color */
   
    /* box-shadow: 0 0 [Blur-Radius] [Spread-Radius] [Color] */
    box-shadow: 0 0 20px 2px rgba(246, 198, 23, 0.6);
}