/* Add this to the very top of your CSS file */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;       /* Tells body to be at least as tall as the screen */
    display: flex;
    flex-direction: column;  /* Stack content on top of footer */
    font-family: 'Inter';
}

h2 {
    font-family: 'Inter';
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

h3 {
    font-family: 'Inter';
    font-weight: 600;
    font-size: 23px;
    color: #696969;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

/* Nav & Links */

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 15px 20px; /* Added some side padding */
    gap: 40px;          /* Reduced gap between the groups and the logo */
    border-bottom: 1px solid #ddd;
}

nav a { color: black !important; text-decoration: none; text-transform: none; font-weight: 400; }

.nav-group {
    display: flex;
    gap: 25px;
} 

/* Everything below this will now start working again! */

/* Sections Styling */
.hero, .content-block {
    display: flex;
    padding: 60px 10%;
    gap: 50px;
    align-items: center;
}
.hero-image {
    flex: 1;
    height: 350px;       /* Keeps the same height as your old gray box */
    object-fit: cover;   /* This is the magic: it crops the photo to fit without squishing it */
    border-radius: 4px;
    display: block;
}

.content-block.reverse { flex-direction: row-reverse; }

.hero-text { flex: 1.5; font-size: 36px; font-weight: 700; line-height: 1.1; }
.text-side { flex: 1; }

.gray-box { background-color: #D9D9D9; height: 350px; flex: 1; border-radius: 4px; }
.gray-box.small { height: 250px; }

.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: #D9D9D9; /* Matches your gray boxes */
    color: black !important;   /* Keeps text black, not purple */
    text-decoration: none !important;
    font-weight: 700;          /* Bold for the button text */
    font-size: 14px;
    border-radius: 0px;
    transition: background 0.3s ease;
}

/* Optional: Darkens slightly when you hover over it */
.btn:hover {
    background-color: #cccccc;
}
/* Container for the middle sections */
.section-container {
    display: flex;
    flex-direction: column;
    gap: 100px; /* Increased gap to make the page feel longer and cleaner */
    padding: 80px 0;
}

/* Base style for the content blocks */
.content-block {
    display: flex;
    align-items: center;
    padding: 0 10%;
    gap: 60px;
}

/* This flips the order for the Brainstorming Hub */
.content-block.reverse {
    flex-direction: row-reverse;
}

/* Styles for the text next to the boxes */
.text-side {
    flex: 1;
}

.text-side h2 {
    font-size: 28px;
    margin: 10px 0;
}

/* The button styling */
.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    background-color: #D9D9D9;
    color: black !important;
    text-decoration: none !important;
    font-weight: 700;
    border: 1px solid #999;
    border-radius: 4px;
}

/* Smaller gray boxes for these sections */
.gray-box.small {
    height: 280px;
    flex: 1;
    background-color: #D9D9D9;
    border-radius: 4px;
    }
    
    /*brainstorm hub page*/
    /* The Modal (background) */
.modal {
  display: none; /* This is the line that makes it a popup! */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
    background: white;
    margin: 2% auto;      /* Reduced margin to give more room */
    padding: 20px;
    width: 90%;           /* Make it wider for the board */
    max-height: 90vh;     /* Limits the height to 90% of the screen */
    overflow-y: auto;     /* THIS ENABLES SCROLLING */
    border-radius: 8px;
    position: relative;
}

.close-button {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.hub-box {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* Centers the button horizontally */
    justify-content: center;
    text-align: center;     /* Centers the text */
    margin: 60px auto;      /* The 'auto' centers the whole box on the page */
    width: 100%;            /* Ensures it takes up the full width to find the center */
}

.hub-box h3 {
    font-size: 42px;         /* Making the words even bigger as requested */
    margin-bottom: 30px;
    width: 100%;
}

.hub-box .btn {
    background-color: #4BF34B; 
    color: white;
    padding: 18px 40px;      /* Bigger, more 'Mission-Ready' button */
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: inline-block;   /* Ensures padding behaves correctly */
}

.hub-box .btn:hover {
    background-color: #1b5e20; /* Darkens slightly when you hover over it */
}

/*Rules page*/
/* This is the magic part that centers the text and adds 'side margins' */
.rules-wrapper {
    max-width: 850px;      /* Standard reading width */
    margin: 50px auto;     /* Centers it and moves it down from the nav */
    padding: 0 40px;       /* Extra gap so it never touches the edge */
    text-align: left;      /* Standard document alignment */
}

.rules-title {
    font-size: 48px;
    margin-bottom: 8px;
    font-weight: 700;
}

.rules-subtitle {
    font-size: 20px;
    color: #666;
    margin-bottom: 40px;
}

/* Spacing out the headers like a Doc */
.rules-list h2 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 15px;
}

/* Making the bullet points clean and spaced out */
.rules-list ul {
    padding-left: 25px;
    line-height: 1.8;      /* Adds breathing room between lines */
    font-size: 19px;
}

.rules-list li {
    margin-bottom: 10px;   /* Space between bullet points */
}
.rules-list li {
    font-size: 20px;       /* This makes the text larger */
    line-height: 1.6;      /* Adds a little space between the lines so they don't look crowded */
    margin-bottom: 12px;   /* Adds space between each individual rule */
}

/*Projects page*/

.projects-header {
    margin-top: 20px;
    margin-bottom: 40px; /* No gap under the text */
    margin-left: 110px;
    font-family: 'Inter';
}

.projects-container {
    display: grid;
    grid-template-columns: repeat(3, 275px); 
    gap: 30px; 
    justify-content: center; 
    margin-top: 0px; /* Low gap from the Projects: title */
    margin-bottom: 80px;
}

.project-card {
    background-color: #56B956;
    width: 275px;       /* Fill the grid column */
    max-width: 275px;  /* But don't get too giant */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    color: black;
    font-weight: regular;
}

.project-card:hover {
    transform: scale(1.05); /* Gives a little "pop" when you hover */
    background-color: #4BF34B;
}

.project-card p {
    font-family: 'Inter';
    font-size: 18px;
    color: black;
    margin: 0;
}

/* This targets the 4th card to center it under the middle of the first row */
.center-card {
    grid-column: 2; 
}

.content-wrapper {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto; 
    padding: 40px 0;
}
#password-popup {
    display: none; /* Keep this */
    position: fixed; /* Ensures it floats in the middle when open */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Put it on top of everything only when active */
}

/* Super Lion */
.lion-title {
    text-align: center;
    margin-top: 40px;
    font-size: 32px;
}

.lion-subtitle {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.mission-box {
    max-width: 800px;
    margin: 0 auto 40px auto;
    line-height: 1.6;
    text-align: left;
}

.entry-field, .security-note {
    background-color: #D9D9D9; /* The gray from your Figma design */
    padding: 20px;
    width: 60%;
    max-width: 600px;
    margin: 15px auto;
    text-align: center;
    font-weight: bold;
}

.security-note {
    font-weight: normal;
    font-size: 14px;
    color: #444;
}
input[type="text"] {
    padding: 10px;
    width: 80%;
    border: 1px solid #999;
    border-radius: 4px;
    margin-bottom: 10px;
}

button {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #555;
}

/* P13 page */
.security-note {
    transition: all 0.3s ease;
}

/* --- Project Page Styles --- */

.terminal-body {
    background-color: #111;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
}

.project-box {
    border: 2px solid #00ff00;
    padding: 20px;
    margin: 50px auto;
    max-width: 800px;
    background: rgba(0, 255, 0, 0.05);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2);
}

.status-bar {
    background: #00ff00;
    color: black;
    padding: 5px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.terminal-hr {
    border: 0;
    border-top: 1px solid #00ff00;
}

.secure-notes {
    border: 1px dashed #00ff00;
    padding: 15px;
    margin-top: 20px;
}

.back-btn {
    color: #00ff00;
    text-decoration: none;
    border: 1px solid #00ff00;
    padding: 8px 15px;
    display: inline-block;
    margin-top: 25px;
    transition: 0.3s;
}

.back-btn:hover {
    background: #00ff00;
    color: black;
}

/*Files Page*/

/* --- Files Grid System --- */

.file-grid {
    display: grid;
    /* This makes boxes fill the row and wrap automatically */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 25px;
    padding: 20px;
    margin-top: 20px;
}

.file-card {
    background-color: #d9d9d9; /* The gray from your drawing */
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    border: 1px solid #bcbcbc;
    transition: 0.3s;
}

.file-card:hover {
    background-color: #cccccc;
    transform: translateY(-3px);
}

.file-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.file-name {
    font-family: sans-serif;
    font-weight: bold;
    color: #222;
    margin-bottom: 20px;
}

.file-btn {
    display: inline-block;
    text-decoration: none;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
}

.view-btn {
    background-color: #555; /* A slightly different gray for view-only */
}

.file-btn:hover {
    background-color: #00ff00; /* Turns Ranger Green on hover */
    color: black;
}

/*Dashboard*/
.welcome-container {
    text-align: left; /* Moves everything left */
    padding: 40px 10% 20px 10%; /* Adds 10% padding on the sides for a clean look */
}

#welcome-text {
    font-size: 32px;
    font-weight: bold;
    color: #222;
    margin-bottom: 15px;
    font-family: 'Inter', sans-serif; /* Or your preferred clean font */
}

.notif-bubble {
    display: inline-flex; /* Keeps it only as wide as the text */
    align-items: center;
    background-color: #fff0f0; 
    border: 1px solid #ff4d4d;
    padding: 6px 16px;
    border-radius: 50px;
    gap: 12px;
}

.notif-bubble span {
    color: #cc0000;
    font-weight: bold;
    font-size: 14px;
}

.chat-btn {
    background-color: #ff4d4d; /* Bright Red */
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.chat-btn:hover {
    background-color: #cc0000;
    transform: scale(1.05);
}

.projects-section {
    padding: 10px 10% 40px 10%;
}

.projects-section h3 {
    font-size: 18px;
    margin-bottom: 20px;
    color: #555;
}

.card-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allows cards to wrap to next line if there are many */
}
/* Container for the files */
.file-grid-layout {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 15px;
}

/* Specific styling for the File Rectangles ONLY */
.mission-file-card {
    width: 130px;
    height: 180px;
    background-color: #D9D9D9; /* Matching your Figma grey */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px 5px;
    text-align: center;
    border: 1px solid #ccc;
}

.mission-file-card p {
    font-size: 11px;
    font-weight: bold;
    margin: 5px 0;
    color: #333;
}

.mission-view-btn {
    background-color: #444;
    color: white;
    text-decoration: none;
    font-size: 10px;
    padding: 6px 12px;
    border-radius: 4px;
    width: 70%;
}

/* Add this to your style.css */
.projects-section, .files-section {
    padding: 10px 10%; /* Matches the 10% left-margin of your Welcome text */
    text-align: left;
}

.card-grid, .file-grid-layout {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: flex-start; /* Keeps them in a nice row starting from the left */
}

footer {
    background-color: #D9D9D9;
    width: 100%;             /* Now it will work because it's outside the wrapper */
    padding: 30px 0;
    text-align: center;
    margin-top: auto;        /* Pushes it to the bottom of the screen */
    font-size: 12px;
    color: #333;
}

footer p {
    margin: 0;
    font-family: 'Inter';
}