/* =============================================
   responsive-en.css - Mobile First Overrides
   for English pages (/en/) using base_eng.css
   ============================================= */

/* --- Base: Mobile (default = small screens) --- */

/* body fixed width 900px → fluid */
body {
  width: 100% !important;
  min-width: 0 !important;
}

/* Override inline float:left on images */
img[style*="float:left"],
img[style*="float: left"] {
  float: none !important;
  display: block !important;
  margin: 10px auto !important;
}

/* #content children fixed widths 720px → fluid */
#content h2,
#content p,
#content ul {
  width: 100% !important;
  max-width: 100%;
}

/* Map section inline width (aboutus) */
p[style*="width:645px"] {
  width: 100% !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

p[style*="width:645px"] img {
  float: none !important;
  max-width: 100%;
  height: auto;
}

/* #company (aboutus) */
#company {
  width: 100% !important;
  padding: 0 12px;
}

#company table th,
#company table td {
  display: block;
  width: 100% !important;
}

#company table th {
  padding-top: 10px;
}

#company img {
  margin: 20px auto !important;
  display: block;
  max-width: 100%;
}

/* Footer fixed widths */
#footnavi ul {
  float: none !important;
  width: 100% !important;
  text-align: center !important;
  padding: 10px 0 !important;
}

#copyright img {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

#copyright p {
  width: 100% !important;
  text-align: center;
}


/* =============================================
   Tablet and up (768px+)
   ============================================= */
@media screen and (min-width: 768px) {

  #company table th,
  #company table td {
    display: table-cell;
    width: auto !important;
  }
}


/* =============================================
   Desktop (950px+)
   ============================================= */
@media screen and (min-width: 950px) {

  /* Restore inline float:left images on desktop */
  img[style*="float:left"],
  img[style*="float: left"] {
    float: left !important;
    display: inline !important;
    margin-right: 20px !important;
  }

  /* Restore body width from base_eng.css */
  body {
    width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Restore #content children widths from base_eng.css */
  #content h2 {
    width: 720px !important;
  }

  #content p {
    width: 720px !important;
  }

  #content ul {
    width: 720px !important;
  }

  /* Restore map section */
  p[style*="width:645px"] {
    width: 645px !important;
    display: block;
  }

  p[style*="width:645px"] img {
    float: left !important;
  }

  /* Restore #company */
  #company {
    width: 550px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0;
  }

  #company table {
    width: 550px !important;
  }

  #company table th,
  #company table td {
    display: table-cell;
    width: auto !important;
  }

  #company img {
    margin: 50px 120px 50px 115px !important;
  }

  /* Restore footer */
  #footnavi ul {
    float: right !important;
    width: 400px !important;
    text-align: right !important;
    padding: 10px 39px 0 0 !important;
  }

  #copyright img {
    float: left !important;
    margin-left: 300px !important;
    display: inline !important;
  }

  #copyright p {
    width: auto !important;
    text-align: left;
  }
}