/* Override the theme's responsive font size scaling */
:root {
  /* Set a fixed base font size for all screens */
  --md-typeset-font-size: 14px; 
}

.md-grid {
    /* Sets the maximum width to the size of the viewport on small screens */
    max-width: 100vw;
}

/* === Custom Logo and Header Styling === */

/* Set the background color of the entire header */
.md-header {
    background-color: #142F5A; /* Replace with the HEX code of your desired background color */
                             /* Example: For your current 'slate' scheme, this is typically a deep grey/blue grey.
                                You can use an online color picker tool on your logo to get the exact HEX code. */
    height: 120px;
}

.md-header__inner {
    /* Ensures the header wrapper itself takes up the full available width */
    max-width: 100%;
}
/* --- Center the Logo Horizontally and Vertically --- */

.md-content,
.md-content__inner {
    padding-top: 0 !important;
    width: 850px;
}
.md-content__inner h1:first-child {
    margin-top: 0;
    padding-top: 0 !important;
}

.md-content h1, 
.md-content h2, 
.md-content h3{
    /* Replace #FFC107 with your desired HEX color code */
    color: #E0A465; 
    font-weight: bold;
    margin-top: 30px;    /* Extra space BEFORE the H1 */
    margin-bottom: 15px;
}

.mb-sm {
    margin-bottom: 0rem !important; /* Adjust this value (e.g., 0.5rem or 8px) */
}

.mt-lg {
    margin-top: 0rem !important; /* Adds space above the final paragraph */
}

/* Target the header container that holds the logo */
.md-header__inner {
    /* Center the contents (logo container) horizontally */
    justify-content: center;
}

/* Hide the site name/title next to the logo (since you only want the logo) */
.md-header__title {
    /* Create the necessary space on the left */
    margin-left: 20rem; /* Keeps your logo block away from the edge */
    margin-right: 40rem;
}

/* The social links are usually injected near the header nav or as a standalone option */
.md-header-nav,
.md-header__option {
    /* Ensures the right-side elements don't shrink */
    flex-shrink: 0; 
}

/* Ensure social icons are visible (from previous steps) */
.md-header__option > .md-social {
    display: flex !important;
}

.md-sidebar--secondary {
    display: none !important; /* Use !important to override theme styles */
}

/* --- Control the Logo Image Size --- */
/* Target the logo container and center the image inside it */
.md-header__button.md-logo {
    /* Ensure the container takes the full height of the header */
    height: 100%;
    
    /* Center the logo image inside its own button container */
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering (if needed) */
}

/* Target the logo image itself and set its desired size */
.md-header__button.md-logo img {
    height: 100px;  /* Make the logo bigger. ADJUST THIS VALUE (e.g., 60px, 100px) */
    width: auto;   /* Maintain aspect ratio */
    object-fit: contain;
}

/* If you also want to remove the site name text and only show the logo */
.md-header__title {
    display: none;
}

/* Move navigation tabs to the right */
.md-tabs__list {
  justify-content: flex-end !important;
}

/* Optional: Adjust tab spacing */
.md-tabs__item {
  margin-left: 1rem;
}

/* If site name is showing on the left, this adds space */
.md-tabs {
  justify-content: space-between;
}

/* Make site name bigger */
.md-header__title {
  font-size: 14px !important;  /* Adjust size as needed */
  font-weight: 700;            /* Make it bold */
}

/* Tag setup */
.tag-container {
    display: flex;
    align: center;
    gap: 8px; /* Space between tags */
    font-size: 14px;
    margin-bottom: 8px;
}
.tag {
    background-color: #e6e6fa; /* Light purple */
    color: #142F5A;
    padding: 4px 12px;
    border-radius: 16px; /* Pill shape */
    font-size: 14px;
    font-weight: 500;
}

a.tag {
    /* Set the background color */
    background-color: #142F5A !important; 
    /* Set the text color for contrast */
    color: #ffffff !important; 
    /* Remove any default text decorations for links */
    text-decoration: none; 
    /* Ensure the link behaves like a block element for the padding/style to apply */
    display: inline-block; 
}

/* Optional: Adjust on mobile */
@media screen and (max-width: 76.1875em) {
  .md-header__title {
    font-size: 14px !important;
  }
}

/* --- Center the Footer Text --- */
.md-footer-meta__inner {
    /* Set the parent container of the copyright text to use Flexbox */
    display: flex; 
    /* Center the contents (the copyright div) horizontally */
    justify-content: center;
}

/* --- Style the Copyright Text (Make it Smaller) --- */
.md-footer-copyright {
    /* Center the text itself within its container */
    text-align: center;
    /* Reduce the font size (14px is a common size for footers) */
    font-size: 13px; 
    /* You may also adjust font-weight if desired */
    /* font-weight: 300; */
}

/* --- Styling for Profile Image and Text Layout --- */

/* 1. Flexbox Container */
.profile-header-flex {
    display: flex; /* Enables flex layout */
    align-items: flex-start; /* Aligns items to the top (important for text placement) */
    gap: 25px; /* Adds space between the image and the text */
    margin-bottom: 0em; /* Space below the image/intro text block */
    flex-direction: row-reverse;
}

/* 2. Image Container (to control its width and prevent shrinking) */
.profile-image-container {
    flex-shrink: 0; /* Prevents the image from shrinking */
    text-align: center;
    margin: 0; /* Resetting the figure's default margin */
}

/* 3. Text Container (to allow it to fill remaining space) */
.profile-text {
    flex-grow: 1; /* Allows the text to take up the rest of the available width */
}

/* 4. Responsive Breakpoint (VERY IMPORTANT) */
/* On small screens (like mobile), stack the image and text vertically */
@media screen and (max-width: 700px) {
    .profile-header-flex {
        align-items: center; /* Centers items when stacked */
        flex-direction: row-reverse;
    }
}

/* Target screens wider than 1220px (a common breakpoint for wide screens) */
@media screen and (min-width: 76.25em) {
    /* Targets screens wider than the standard tablet breakpoint (approx. 1220px) */
    .md-main__inner {
        max-width: 850px; /* Example: 90rem is 1440px (16px * 90) */
        /* You can choose any fixed value (e.g., 70rem, 1000px, 65%) */
    }
    .md-grid {
        max-width: 61rem; /* Increase from the default (e.g., 61rem) */
    }
    :root {
    --md-typeset-font-size: 14px; /* Keep it the same as the smaller screen setting */
  }
}

@media screen and (min-width: 90em) {
    /* Targets very wide screens (approx. 1440px) */
    .md-grid {
        max-width: 61rem; /* Even wider for large monitors */
    }
}