/* 
* === MEDIA QUERIES === *
* How this all works:
* 1. cry
* 2. This media.css file centralizes all media queries for every .html and .php file, 
* ensuring responsive design across all device resolutions.
* All @media screen and max-width rules for every class and id are managed here for consistency and easier maintenance.
* - Place only media query-related selectors here; design-specific styles belong in their respective CSS files.
* - If duplicate class or id names occur, rename the newer selector to be more specific.
* - It is recommended to use a plugin such a Live Preview, Five Server or similar to see real-time changes.
* 3. cry some more * 
*/

@media screen and (max-width: 1600px) {
  .HeroIntro h1 {
    width: 75%;
  }
}

/* Is this really necessary?
@media screen and (max-width: 1200px) {
  .HeroIntro h1 {
    width: 50%;
    font-size: 4rem;
  }

  .HeroIntro p {
    width: 50%;
    font-size: 0.9rem;
  }

  #AboutMeText {
    width: 100%;
  }

  .InfoSection {
    width: 100%;
    flex-direction: column;
  }

  .BoxImage {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }

  #LaptopLogo {
    width: 15%;
  }
} */

@media screen and (max-width: 560px) {
  /* Header */
  .Navbar,
  .LeftNavPart,
  .RightNavPart a {
    font-size: smaller;
    margin: 0px;
  }

  .LeftNavPart,
  .RightNavPart,
  #LogoName {
    display: flex;
    flex-direction: column;
    width: 50%;
  }

  #LaptopLogo {
    width: 15%;
  }

  /* Homepage Content */
  /* fixme: Nor HeroIntro h1 or HeroTitle Works. Fix this later */
  .HeroIntro h1 {
    font-size: xx-small;
    /* ? Debugging */
    color: red;
    margin: 0px;
  }
  /* ? Debugging */
  .HeroTitle {
    font-size: xx-small;
    color: red;
    margin: 0px;
  }

  .HeroIntro p {
    width: 90%;
    font-size: 0.85rem;
    margin: 0 auto;
    bottom: 10%;
  }

  .Tagline {
    font-size: 0.85rem;
  }

  .InfoSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .InfoSection > div,
  .InfoSection > img {
    width: 100%;
  }

  #AboutMeText h1,
  #AboutMeText p {
    font-size: smaller;
    width: 100%;
    margin: 0 auto;
  }

  #ShowcaseSection {
    margin: 0 auto;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  #ShowcaseText {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  #LargerHeader {
    font-size: 1.2rem;
  }

  #LargerParagraph {
    font-size: 0.8rem;
  }

  .wrapper {
    width: 90%;
    margin: 0 auto;
  }

  /* Contact Page */

  /* Contact Section Title vertical alignment */
  .ContactSectionTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
  }
  .ContactSectionTitle > div,
  .ContactSectionTitle > img {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    display: block;
  }

  .ContactSectionTitle img {
    width: 500px !important;
  }

  /* Footer Responsive Improvements */
  .UpperFooter {
    width: 100%;
    margin: 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    display: flex;
    gap: 0.5rem;
    text-align: center;
    padding: 6px 0;
  }

  #FooterLogo {
    width: 12%;
    min-width: 32px;
    max-width: 40px;
    margin: 0;
    display: flex;
    justify-content: flex-start;
  }
  #FooterLogo img {
    width: 100%;
    max-width: 32px;
    height: auto;
    margin: 0 2px;
  }

  #FooterLinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    margin: 0;
  }
  .NavLink {
    font-size: 0.8rem;
    padding: 0 4px;
    margin: 0 2px;
  }

  #FooterSocials {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
    width: auto;
    margin: 0;
  }
  #FooterSocials a {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    transition: background 0.2s;
    margin: 0 2px;
  }
  #FooterSocials a:active {
    background: #e0e0e0;
  }
  #FooterSocials img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  /* Fixed bug: 
  On Mobile Devices, there is this empty 
  space on the right side of the Navbar.*/
  .LowerFooter {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 0.7rem;
    width: 90%;
  }

  .FooterLink {
    margin-bottom: 0.25rem;
  }

  .FooterDisclosure {
    font-size: 0.75rem;
    margin: 0.1rem 0;
    display: block;
  }
}