/* ===============================
   Light Mode Custom Colors
================================== */
[data-md-color-scheme="Light"] {
    --md-primary-fg-color: #268A8C;
    --md-primary-bg-color: #FFFFFF;
    --md-accent-fg-color: #00BFA5;     /* Teal */
    --md-default-bg-color: #FFFFFF;
    --md-default-fg-color: #212121;    /* Dark gray for text */
    --md-code-bg-color: #F5F5F5;
    --md-code-fg-color: #263238;
    --md-border-color: #E0E0E0;
}

/* ===============================
   Dark Mode Custom Colors
================================== */
[data-md-color-scheme="dark"] {
    --md-primary-fg-color: #7986CB;     /* Indigo soft */
    --md-accent-fg-color: #00DAC6;      /* Teal soft */
    --md-default-fg-color: #E0E0E0;     /* Light text */
    --md-default-bg-color: #000000;     /* Soft dark, not pure black */
    --md-code-bg-color: #2E2E2E;
    --md-code-fg-color: #ECEFF1;
}

/* Change site name color */
.md-header__title {
  color: #E0E0E0 !important;
}

/* Remove bold and reduce size of Site Name */
.md-header__topic:first-child {
  font-weight: 400 !important; /* Normal font */
  font-size: 0.95rem !important; /* Slightly smaller size */
}



/* ===============================
   Custom color for the site name in the header
================================== */
.md-header .md-logo {
  color: var(--md-primary-fg-color, #268A8C) !important; /* Set site name color */
}

/* Optional: For better visibility, you can also style the link in the header */
.md-header .md-logo a {
  color: var(--md-primary-fg-color, #268A8C) !important;
  font-weight: bold;
  text-decoration: none;  /* Optional: Remove any underline */
}


/* ===============================
   Custom Logo Size Override
================================== */
.md-header .md-logo {
    display: block !important;             /* Make sure it's treated as a block element */
    max-width: 100% !important;            /* Prevent overflowing */
    width: 75px !important;               /* Force width to 550px */
    height: auto !important;               /* Maintain aspect ratio */
    margin: 10px auto !important;          /* Center the logo with spacing */
    padding: 0 !important;                 /* Remove any padding */
}

.md-header .md-logo img {
    width: 100% !important;                /* Set width to 100% of the parent container */
    height: auto !important;               /* Maintain aspect ratio */
    object-fit: contain !important;        /* Make sure the logo fits without stretching */
    max-width: 100% !important;            /* Prevent any overflow */
}

/* ===============================
   Tile container
================================== */
.tile-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-evenly;
    margin-top: 40px;
    position: relative;
}

/* ===============================
   Individual tile styles
================================== */
.doc-tile {
    width: 220px; /* Adjusted width for a compact look */
    height: 180px; /* Reduced height for compact design */
    text-align: center;
    background: var(--md-default-bg-color, #ffffff); /* Use theme variable for background color */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); /* Light shadow */
    border: 1px solid var(--md-border-color, #e0e0e0); /* Use theme variable for border */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden; /* Prevent text from overflowing */
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    margin-bottom: 20px;
    height: auto; /* Allow height to adjust based on content */
}

/* ===============================
   Link styling in tiles
================================== */
.doc-tile a {
    text-decoration: none;
    color: var(--md-primary-fg-color, #333); /* Use theme color for text */
    display: block;
    height: 100%; /* Ensure the entire tile is clickable */
    overflow: hidden; /* Prevent overflow */
}

.doc-tile h2 {
    font-size: 35px;
    margin-top: 10px;
}

.doc-tile h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
}

.doc-tile p {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 10px;
}

/* ===============================
   Hover effect on tiles
================================== */
.doc-tile:hover {
    transform: translateY(-10px);
}

/* ===============================
   Ensuring responsiveness on smaller screens
================================== */
@media (max-width: 768px) {
    .doc-tile {
        width: 100%;
    }
}