/* technologyWise responsive.css
   Revised fluid version
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

/* Let text and controls shrink with their containers. */
body,
p,
li,
a,
address,
label,
legend,
h1,
h2 {
  overflow-wrap: anywhere;
}

img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button,
fieldset {
  max-width: 100%;
  min-width: 0;
}

fieldset {
  min-inline-size: 0;
}

/*
   The old global.css uses a 740px wrapper, a 200px navigation
   column and a fixed 500px main column.

   Keep the same general desktop arrangement, but let the main
   column shrink continuously with the wrapper.
*/
#wrapper {
  width: calc(100% - 24px);
  max-width: 740px;
  margin: 10px auto;
}

#wrapper > * {
  min-width: 0;
}

/* Give every page's logo one predictable intrinsic size.
   max-width then makes it shrink whenever the screen requires it. */
#wrapper img.left {
  width: 322px;
  max-width: 100%;
  height: auto;
}

/* Fluid replacements for the fixed desktop widths in global.css. */
#main,
#heading {
  width: calc(100% - 220px);
  max-width: none;
}

#secondhead {
  width: calc(100% - 220px);
  max-width: none;
}

#examples p {
  width: calc(100% - 220px);
  max-width: none;
}

#navigation {
  width: 200px;
  max-width: 200px;
}

/*
   At this width the two desktop columns become cramped.
   Reconfigure the page into one column.
*/
@media (max-width: 640px) {
  #wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 12px 16px;
  }

  #wrapper img.left {
    float: none;
    display: block;
    width: min(322px, 100%);
    height: auto;
    margin: 0 0 12px auto;
    padding: 0;
  }

  #heading,
  #secondhead,
  #main,
  #navigation,
  #examples p {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  #heading,
  #secondhead {
    margin-top: 0;
  }

  #main {
    margin-top: 10px;
  }

  #navigation {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dotted #808000;
  }

  #navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
  }

  #navigation li {
    margin: 0;
    min-width: 0;
  }

  #navigation a {
    display: inline-block;
    padding: 4px 0;
  }

  .academy-main,
  .academy-form,
  .academy-summary,
  .form-row,
  .choice-list {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .academy-form input[type="text"],
  .academy-form input[type="email"],
  .academy-form input[type="tel"],
  .academy-form select,
  .academy-form textarea,
  .academy-form button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Very narrow phones only need slightly tighter page padding.
   Typography stays consistent, so text wrapping does not jump here. */
@media (max-width: 360px) {
  #wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }
}