/* Global styles */
body {
    font-family: Arial, sans-serif;
    background-color: #df7373;
    color: white;
    margin: 0;
    padding: 0;
}

.container {
    text-align: left; /* Change to left align all text in the container */
    padding: 20px;
}

h1 {
    font-size: 3em;
    color: white;
}

h2 {
    font-size: 2em;
    color: white;
}

.buttons {
    margin: 20px 0;
}

/* Regular button styles */
.button-container {
	display: flex;
	flex-direction: column;
	align-items: left;
	gap: 10px;
}

/* Regular buttons */
.button {
    display: inline-flex; /* Aligns image and text in one row */
    align-items: center; /* Vertically centers the image with the text */
    padding: 15px 30px;
    font-size: 1.2em;
    color: white;
    background-color: #cc444b;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 10px;
}

.button:hover {
    background-color: #cc444b;
}

/* Icon inside buttons */
.button img {
    width: 20px;
    height: 20px;
    margin-right: 8px; /* Space between icon and text */
}

.button i {
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
}

/* Link styles */
a {
    color: #960018; /* Light gray */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #da5552; /* Light purple */
    text-decoration: underline;
}

/* Tabs styles */
.tab-container {
	display: flex;
	justify-content: center;
	gap: 10px;
}

/* Style the tab buttons separately */
.tab button {
    background-color: #f1f1f1;
    color: black;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: 0.3s;
    display: inline-block; /* Important: Ensures tab buttons behave like inline elements */
}

/* Hover effect for tab buttons */
.tab button:hover {
    background-color: #ddd;
}

/* Active tab button */
.tab button.active {
    background-color: #cc444b;
    color: white;
    font-weight: bold;
}

/* Tab content */
.tabcontent {
    display: none;
    padding: 20px;
    border: 1px solid #ccc;
    margin-top: 10px;
    background-color: #cc444b;
}

/* Active tab content */
.tabcontent.active {
    display: block;
}

ul {
    list-style-position: inside; /* Moves bullet closer to the text */
    padding-left: 0; /* Removes default indentation */
}

li {
    margin-bottom: 5px; /* Adjusts the space between each list item */
    padding-left: 10px; /* Adjust if you want more space between the bullet and the text */
}

/* For smaller screens */
@media (max-width: 768px) {
    iframe {
        height: 70vh; /* Adjust height for mobile view */
    }
}

/* For larger screens */
@media (min-width: 769px) {
    iframe {
        height: 90vh; /* Adjust height for desktop view */
    }
}

.site-footer {
    background-color: #df7373; /* Matches your dark purple background */
    color: white; /* Light color for better readability */
    padding: 20px;
    text-align: left; /* Change to left align footer text */
    font-size: 0.9em;
    border-top: 1px solid #da5552; /* Slight border for separation */
    margin-top: 30px; /* Space between the content and footer */
}

.site-footer p {
    margin: 5px 0; /* Adds some spacing between lines */
}

.footer-link {
    color: #960018; /* Light blue color for the link */
    text-decoration: none;
    font-weight: bold;
}

.footer-link:hover {
    color: #da5552; /* Light purple on hover */
    text-decoration: underline;
}

/* Centered Pokemon Image in White Bordered Box */
.pokemon-image-box {
    background-color: white;
    border: 2px solid #cc444b;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    max-width: 125px;
    margin: 0 0 20px 0; /* Remove auto for left alignment */
    height: 125px; /* Set a fixed height to allow vertical centering */
}

.pokemon-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
}

/* Light Purple Box for Moves and Info */
.pokemon-info-box,
.pokemon-moves-box {
    background-color: white; /* Light purple */
    border: 2px solid #cc444b;
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0; /* Change to remove horizontal centering */
    width: 90%; /* Width remains the same */
    max-width: 600px; /* Max width for the boxes */
    color: #2a3439;
    font-size: 1em;
    display: flex;               /* Use flexbox layout */
    justify-content: space-between; /* Space out items horizontally */
    align-items: center;         /* Center align items vertically */
}

/* Column for Fast Attacks and Charged Attacks */
.moves-column {
    flex: 1;                    /* Allow columns to grow equally */
    margin: 0 5px;             /* Margin between columns */
    text-align: center;         /* Center align text within each column */
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
    .pokemon-info-box,
    .pokemon-moves-box {
        max-width: 100%;      /* Use full width */
        font-size: 0.85em;    /* Reduce font size */
        padding: 5px;         /* Reduce padding */
        flex-direction: row;   /* Maintain horizontal alignment on small screens */
    }

    .moves-column {
        margin: 5px 0;        /* Adjust margin for spacing */
        text-align: center;    /* Center align text in each column */
    }
}

/* Navigation bar styles */
.nav-buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allows buttons to wrap to the next row when needed */
}

.nav-button {
    padding: 10px 20px;
    background-color: #cc444b; /* Purple color */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    white-space: nowrap; /* Prevents text from wrapping within buttons */
}

/* Hover effect for buttons */
.nav-button:hover {
    background-color: #cc444b; /* Darker purple on hover */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .nav-buttons {
        justify-content: flex-start; /* Keeps buttons aligned to the left in each row */
        gap: 5px; /* Adjust gap between buttons when wrapping */
    }

    .nav-button {
        padding: 8px 16px; /* Slightly smaller padding for small screens */
        font-size: 0.9em; /* Slightly smaller font size for better fit */
    }
}

.guide-listing {
    display: grid;
    gap: 10px;
    padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    justify-items: center;
}

/* Style the guide box links */
.guide-box {
    background-color: #cc444b; /* Red background */
    border: 2px solid #960018; /* Dark red border */
    border-radius: 8px;
    padding: 10px;
    width: 100%; /* Full width of the grid cell */
    max-width: 100px;
    text-align: center;
    box-sizing: border-box;
    color: #f2e5ff; /* Text color */
    text-decoration: none; /* Remove underline from links */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 150px; /* Fixed height to ensure consistency */
    transition: transform 0.2s; /* Add a hover effect */
}

.guide-box:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    background-color: #b33d44; /* Darker background on hover */
}

/* Image styling */
.guide-image {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Title styling with responsive font-size */
.guide-title {
    font-size: clamp(0.7em, 1vw, 1em); /* Dynamically scales based on name length */
    margin-top: 8px;
    max-width: 90%; /* Ensures the title doesn’t overflow the box */
    white-space: nowrap; /* Prevents single words from breaking onto multiple lines */
    overflow: hidden; /* Hide any overflow text */
    text-overflow: ellipsis; /* Adds "..." if a title is still too long */
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .guide-listing {
        grid-template-columns: repeat(3, minmax(90px, 1fr)); /* Ensures 3 per row on small screens */
    }
}

/* Unavailable guide box styling */
.guide-box-unavailable {
    background-color: #757575; /* Grey background for unavailable guides */
    border: 2px solid #4d4d4d; /* Dark grey border */
    color: #cfcfcf; /* Light grey text */
    cursor: not-allowed; /* Changes cursor to indicate non-clickable */
    pointer-events: none; /* Makes the box non-interactive */
    transform: none; /* Disables hover effect */
    text-align: center;
    align-items: center;
}

.results-container {
    margin-top: 20px;!important
}
.format-container {
    border: 1px solid #960018 !important;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #cc444b !important;
}
.format-container h3 {
    margin-top: 0;
    color: #333;
}