/* CSS Variables for easy theming */
:root {
  --body-bg-color: #f8f8f8;
  --primary-bg: #000000;
  --text-header-footer-color: #fff;
  --text-hover-bg: #fff;
  --text-hover-color: #000000;
  --menu-click-hold-color: red;
  --font-family: 'IBM Plex Mono', monospace;

  --font-size-company-logo-desktop: 28px;
  --font-size-company-logo-mobile: 28px;
  --font-size-menu-desktop: 17px;
  --font-size-menu-mobile: 17px;
  --font-size-body-desktop: 15.5px;
  --font-size-body-mobile: 15.5px;
  --font-size-footer-desktop: 13.5px;  
  --font-size-footer-mobile: 13.5px;
  --font-size-hamburger-menu-mobile: 32px;

  --font-weight-company-logo-desktop: 400;
  --font-weight-company-logo-mobile: 400;
  --font-weight-menu-desktop: 300;
  --font-weight-menu-mobile: 300;
  --font-weight-body-desktop: 300;
  --font-weight-body-mobile: 300;
  --font-weight-footer-desktop: 300;
  --font-weight-footer-mobile: 300;
  --font-weight-hamburger-menu-mobile: 300;

  --menu-height:27px;
  --footer-height: 20px;
  --menu-transition-time: background-color 1s, color 1s;
}

/* Global box-sizing and resets */
*, *::before, *::after {
  box-sizing: border-box;
}

/*Add click and drag text effects*/
::selection {
  background-color: var(--menu-click-hold-color); /* black background */
  color: #fff;           /* white text */
}
::-webkit-selection {
  background-color: var(--menu-click-hold-color);
  color: #fff;
}

html, body, main, p, .typewriter {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}


html, body {
  margin: 0;
  padding: 0;
}


html {
  height: 100%;
  width: 100%;
  overflow-x: hidden; /* prevent sideways scroll */
  font-family: var(--font-family);
}

body {
  min-height: 100%;              /* ensures body stretches full screen */
  width: 100%;
  display: flex;
  flex-direction: column;        /* stack content + footer */
  font-size: var(--font-size-body-desktop);
  font-weight: var(--font-weight-body-desktop);
  line-height: 1.5;
  background: var(--primary-bg); /* main site background */
}

/* Header wrapper */
.header-wrapper {
  width: 100%;
  z-index: 1000;
  margin-top: 10px;
}

  /* Header bar */
  .header-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

    /* Adjust Home button font weight and size */
    .company-logo {
      transition: var(--menu-transition-time);
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;   /* center text vertically */
      padding-top: 0px;
      padding-left: 18px;
      padding-right: 18px;
      padding-bottom: 5px;
      font-weight: var(--font-weight-company-logo-desktop);
      font-size: var(--font-size-company-logo-desktop);
      color: var(--text-header-footer-color);
    }

    /* Menu container */
    .menu-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 21px;
      /* width: 100%; */
      /* max-height: var(--header-height);
      transition: max-height 4s ease; */
      overflow: hidden;
      flex-wrap: wrap; /* allow wrapping when expanded */
    }

    /* Shared flex centering for menu buttons and items */
    .menu-item {
      display: flex;
      align-items: center;
      white-space: nowrap;
      border: none;
      cursor: pointer;
      color: var(--text-header-footer-color);
      text-decoration: none;
      padding: 10px 15px;
      height: var(--menu-height);
      font-size: var(--font-size-menu-desktop);
      font-weight: var(--font-weight-menu-desktop);
      transition: var(--menu-transition-time);
      text-align: center;
      justify-content: center;  /* center text and content */
      
      cursor: pointer; /* important for iOS touch */
      -webkit-tap-highlight-color: transparent; /* optional: remove highlight on tap */
    }

    /* Hover/focus effects */
    .menu-item:hover,
    .menu-item:focus,
    .company-logo:hover,
    .company-logo:focus,
    .menu-toggle-btn:hover,
    .menu-toggle-btn:focus {
      color: var(--text-hover-color);
      background-color: var(--text-hover-bg);
      outline: none;
    }

    /*On click effect*/
    .menu-item:active,
    .menu-item.active:active,
    .company-logo:active,
    .menu-toggle-btn:active{
        background-color: var(--menu-click-hold-color);
    }

    .menu-item.active{
      color: var(--text-hover-color);
      background-color: var(--text-hover-bg);
    }

/*OK*/
/* Main body area */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 0;
  width: 100%;
  margin: 0;
  background-color: var(--body-bg-color);
  padding-top: 5%;
  padding-bottom: 10%;
  padding-left: 11%;
  padding-right: 11%;
  
  
}

  p {
  margin: 0;
  text-align: left;
  padding: 0;
  text-align: center;
  
  }
  a {
    text-decoration: none;
    color: red;
  }

  .typewriter-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin-top: 115px;
  align-items: center;
  
  } 

  .typewriter p{
    margin:0;
    
  }

  /* Base typewriter styling */
  .typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    position: relative; /* needed for ::after cursor */
    color: black;
    
  }

/* OK */
/* Footer styling */
.footer {
  width: 100%;
  min-height: var(--footer-height);
  background-color: var(--primary-bg);
  color: var(--text-header-footer-color);
  padding: 2px;
  margin: 0;
  height: auto;
  box-sizing: border-box;
  font-size: var(--font-size-footer-desktop);
  font-weight: var(--font-weight-footer-desktop);
  display: flex;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  /*margin-bottom: -2px;*/
} 
.footer a {
  color: var(--text-header-footer-color);
  text-decoration: none; /* optional: removes underline */
  justify-content: center;
  text-align: center;
}

.footer a:hover {
  text-decoration: underline; /* optional: adds underline on hover */
}

.contact-info {
  display: none;
}

.footer:hover .contact-info {
  display: inline;
}

/************************************************* 
*************************************************
Small screen / mobile adjustments 
*************************************************
**************************************************/

/*Hamburger for mobile */
.menu-toggle-btn {
  display: none; /* hidden by default, shown on mobile */
  font-size: var(--font-size-hamburger-menu-mobile);
  font-weight: var(--font-weight-hamburger-menu-mobile);
  background: none;
  border: none;
  color: var(--text-header-footer-color);
  cursor: pointer;
  user-select: none;
  align-items: center;   /* center text vertically */
  justify-content: center;
  padding-bottom: 5px;
}

@media (max-width: 750px) {

  .company-logo{
    /* width: 100%; */
    font-size: var(--font-size-company-logo-mobile);
    font-weight: var(--font-weight-company-logo-mobile);
  }

    /* Shows the hamburger on mobile devices only, hides it otherwise */
  .menu-toggle-btn {
    display: flex;
  }

  /* Hide menu container by default and adjust margins */
  .menu-container {
    display: none;
    flex-direction: column;
    margin-top: 0px;
    max-height: none; /* remove max-height on mobile */
    overflow: visible; /* allow full expansion */
  }

  /* Show menu container when active */
  .menu-container.active {
    display: flex;
    max-height: 500px; /* set large enough to show all menu items */
  }

  .menu-item {
    width: 100%;
    font-size: var(--font-size-menu-mobile);
    font-weight: var(--font-weight-menu-mobile);
  }

  body {
    font-size: var(--font-size-body-mobile);
    font-weight: var(--font-weight-body-mobile);
  }

  /* Footer centered on mobile */
  .footer {    
    font-size: var(--font-size-footer-mobile);
    font-weight: var(--font-weight-footer-mobile);
  }
  
}