/*
  Blue  : #5887DA
  Orange: #E08433
  Green : #80BC00
  Yellow: #FFB600

  Brighter blue in P3: #3e81f4
*/

/* ==== General ================================================================================= */

html {
  /* Keep the scroll bar visible on all pages, so that the header layout stays
  the same when the user moves from one page to another.*/
  overflow-y: scroll;
}

body {
  font-family: "LatoWeb", Sans-Serif;
  margin: 0;
  font-size: 18px;
  background-color: white;
  font-weight: 400; /* Regular is 400. */

  /* Sticky footer (see https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ ). */
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

main {
  /* For the sticky footer. */
  flex: 1;
}

h1 {
  font-family: "LatoWeb", Sans-Serif;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.15;
  margin-top: 18px;
  margin-bottom: 18px;
  /* Shift to improve optical alignment. A value of -3.5px would make letters like "R" more flush
  with paragraphs below, but letters like "A" would then look too far left. */
  transform: translate(-2.5px, 0px);
}

h2 {
  font-size: 35px;
  font-weight: 400;
  margin-top: 0px;
  margin-bottom: 12px;
  /* Shift to improve optical alignment. */
  text-indent: -1px;
  line-height: 1.2;
}

h3 {
  font-size: 28px;
  font-weight: 400;
  margin: 0px 0 8px 0;
}

p {
  margin: 0px 0 18px 0;
}

div.onecoltext p {
  max-width: 750px;
}

p.beforelist {
  margin: 0px 0 10px 0;
}

ul {
  margin: 10px 0 10px 0;
}

:root {
  /* The dominant page width on very wide monitors. I used to set this one to 1300px. Some wider
  designs use around 1450. But I decided to use the same width as is used for
  max-width-sidebyside. This very wide format also improves the visual balance against the
  hero background. */
  --ultorg-max-width: 1600px;
  /* The max page width used in text-next-to-figure sections. */
  --ultorg-max-width-sidebyside: 1600px;
  /* The max page width used when text is displayed in a single column. */
  --ultorg-max-width-onecol: 1300px;
  /* Allow smaller margins for narrow viewports. */
  --ultorg-min-margin: calc(min(max(30px, 8vw), 100px));
}

.limitwidth {
  max-width: var(--ultorg-max-width);
  margin: 0 auto 0 auto;
}

.minmargin {
   margin: 0 var(--ultorg-min-margin) 0 var(--ultorg-min-margin);
}

a.cta-button {
  color: white;
  background-color: #3e81f4;
  text-decoration: none;
  font-size: 18px;
  border-radius: 10px;
  /* It seems the top/bottom padding needs to be uneven for the text to look vertically centered
  here. */
  padding: 5px 25px 7px 25px;
  white-space: nowrap;
}

a.cta-button:hover {
  color: white;
  background-color: #4292ff;
}

a.cta-button:focus {
  background-color: #4292ff;
  /* I considered unsetting this for consistency with form buttons, but it seems more accessible to
  keep focus indications consistent between links outside of forms. And for links, the focus
  indication is not shown during the mouse press (unlike for buttons), at least on Chrome. */
  /*outline: unset;*/
}

a {
  text-decoration: underline;
  color: #0040ff;
}

a:hover {
  color: #3e81f4;
}

/* ==== Menu Bar =================================================================================== */

header {
  top: 0px;
  background-color: white;
}

/* Avoid showing a sticky header e.g. in landscape mode on a small iPhone
screen. */
@media (min-height: 600px) {
  header {
    position: sticky;
    z-index: 1;
  }
}

/* Activated when not scrolled fully up, in style.js. */
header.with-shadow {
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
}

#main-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

#main-menu > ul {
  padding: 18px 0 20px 0;
}

li#main-menu-logo {
  padding: 0 30px 0 0;
}

li#main-menu-logo img {
  display: block;
  /* Shift to improve optical alignment. */
  padding-left: 1px;
}

li#main-menu-firstright {
  margin-left: auto;
}

div#main-menu-links a {
  text-decoration: none;
  color: black;
  padding: 15px 15px 15px 15px;
}

div#main-menu-links li.active-item a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #c0c0c0;
  text-underline-offset: 4px;
}

div#main-menu-links a:hover {
  background: #f3f3f3;
}

/* Override for narrow mobile screens. */
@media all and (max-width: 800px) {
  div#main-menu-links > ul {
    flex-direction: column;
  }

  li#main-menu-logo {
    padding: 0 10px 0 0;
  }

  #main-menu > ul {
    justify-content: space-between;
    padding: 5px 0 12px 0;
  }

  li#main-menu-firstright {
    margin-left: 10px;
  }

  div#main-menu-links a {
    padding: 0;
  }
}

/* ==== Hero ==================================================================================== */

:root {
  /* The first constant is the actual width of the background image art. The second constant is
  either the height of the background image art or the maximum crop-from-bottom to permit. (Must be
  updated if the aspect ratio of the background image is changed.) */
  --ultorg-background-aspect: calc(3300 / 1320);
  --ultorg-desired-hero-height: calc(100vh - 340px);
  --ultorg-background-width: calc(max(var(--ultorg-max-width), min(2200px, 100vw,
      /* Adjustment for the case where the viewport is wide but short, to avoid cutting off the
      lamp/screen part of the background art. */
      1.5 * var(--ultorg-desired-hero-height) * var(--ultorg-background-aspect))));
  /* Center the background horizontally, except when the window is very narrow, in which case we
  use a manually selected crop at the right of the image. */
  --ultorg-background-pos-right: calc(max(50%, var(--ultorg-background-width) * -0.105));
  --ultorg-background-height: calc(var(--ultorg-background-width) / var(--ultorg-background-aspect));
  --ultorg-minimum-hero-padding-top: 30px;
  --ultorg-minimum-hero-padding-bottom: 30px;
}

#herotext-parent {
  /* Center the herotext div (child of herotext-parent) vertically, so that we can use a calculated
  value for min-height to expand the hero area on large displays. */
  display: flex;
  flex-direction: row;
  align-items: center;
  /* This padding works as a minimum, when the min-height yields a very small value. */
  padding: var(--ultorg-minimum-hero-padding-top) 0 var(--ultorg-minimum-hero-padding-bottom) 0;
  min-height: calc(min(var(--ultorg-desired-hero-height), 800px,
    var(--ultorg-background-height)
    - var(--ultorg-minimum-hero-padding-top)
    - var(--ultorg-minimum-hero-padding-bottom)));
}

div.hero {
  background-image: url("images/hero_optimized.jpg");
  background-size: var(--ultorg-background-width);
  background-repeat: no-repeat;
  background-position: bottom 0px right var(--ultorg-background-pos-right);
  background-color: #dadadc;
}

.herotext {
  /* Use 53% rather than 50% to avoid the text getting too close to the table corner in the
  background image at certain viewport sizes. */
  margin: 0 53% 0 0;
  /* This width can be adjusted slightly to encourage better text breaking. */
  max-width: 650px;
}

/* For medium-width viewports, add a gradient on the left side of the hero area, to avoid the text
becoming illegible when it overlaps with the wood panels or desk corner in the background. The
cutoff value was found by experimentation (though it is some sort of function of all the other
background positioning/scaling expressions). */
@media all and (max-width: 1450px) {
  #hero-gradient {
    background: linear-gradient(.25turn, #dadadc, rgba(218, 218, 220, 0.63) 50%, rgba(218, 218, 220, 0) 60%);
    background-size: var(--ultorg-background-width);
    background-position: bottom 0px right var(--ultorg-background-pos-right);
  }
}

/* For narrow-width viewports, also add a gradient from top to bottom. */
@media all and (max-width: 1100px) {
  .herotext {
    margin: 0 0 450px 0;
  }

  div.hero {
    background-size: cover;
    background-position: bottom 0px right 0px;
  }

  #hero-gradient {
    /* Include a slight darkening at the very top, to provide some contrast
    against the header. */
    background: linear-gradient(.5turn, rgba(240, 240, 240, 0.8) 0%, rgba(250, 250, 250, 0.8) 15px, rgba(255, 255, 255, 0.5) 35%, rgba(255, 255, 255, 0) 45%);
  }
}

/* Switch to a cropped, lower-quality version of the hero image for very narrow
screens. It's likely a cell phone. The cutoff has been tuned to avoid changing
the resulting crop of the image in "cover" mode. */
@media all and (max-width: 650px) {
  div.hero {
    background-image: url("images/hero_optimized_port.jpg");
    background-size: cover;
    background-position: bottom 0px right 0px;
  }
}

.hero h1 {
  font-family: "LatoWebHeroSubset", "LatoWeb", Sans-Serif;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 21px 0;
  /* Hand-tweak the optical alignment for the specific letters in this heading. */
  transform: translate(-1px, 0px);
}

.hero p {
  font-weight: 400;
  font-size: 21px;
}

.hero p.cta {
  margin: 30px 0 15px 0;
  text-align: right;
}

.hero p.binspecs {
  text-align: right;
  font-size: 16px;
  color: #444444;
  line-height: 1.3;
  margin: 0;
}

/* ==== Connectors ============================================================================== */

div.connectors ul {
  list-style: none;
  display: flex;
  column-gap: 13px;
  row-gap: 13px;
  justify-content: space-between;
  align-items: center;
  margin: 15px auto 0px auto;
  flex-wrap: wrap;
  padding: 0;
  max-width: var(--ultorg-max-width-onecol);
}

@media all and (max-width: 1100px) {
  /* Balance connector icons better on wrap. */
  div.connectors ul {
    max-width: 500px;
  }
}

div.connectors li {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

div.connectors h3 {
  font-size: 21px;
  font-weight: 600;
  text-align: center;
  margin: 15px 0 15px 0;
}

div.connectors p {
  text-align: center;
  margin: 15px auto 10px auto;
  padding: 0;
  max-width: var(--ultorg-max-width-onecol);
}

/* ==== Features ================================================================================ */

div.text-with-figure {
  display: flex;
  justify-content: flex-start;
  column-gap: var(--ultorg-min-margin);
  /* Set a row-gap as well, for the wrapped case. */
  row-gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
  /* The max-width on the overall text-with-figure is used to restrict the effective maximum width
  of a text column next to a figure. The max-width that is set directly on figure-text ends up
  applying in the wrapped case only. */
  max-width: var(--ultorg-max-width-sidebyside);
  --ultorg-features-vertical-margin: calc(max(30px, min(7vh, 70px)));
  /* Center the text/figure combination once max-width is reached. */
  margin: var(--ultorg-features-vertical-margin) auto var(--ultorg-features-vertical-margin) auto;
}

div.feature {
  /* Use padding instead of margin, so that the background gets extended. Setting 1px for the
  top/bottom padding ensures that the margin from text-with-figure does not get collapsed. */
  padding: 1px var(--ultorg-min-margin)
           1px var(--ultorg-min-margin);
}

div.feature.alternating {
  background-color: #f2f2f2;
}

div.feature.alternating div.text-with-figure {
  flex-direction: row-reverse;
}

div.figure-text {
  flex-grow: 1;
  flex-basis: 350px;
  /* This limit prevents text columns from getting too wide in the wrapped case. See the comment on
  max-width in text-with-figure. Resizing looks nice when this value the same as flex-basis in
  div.figure, though it's not really required. */
  max-width: 700px;
}

div.figure {
  flex-grow: 2;
  flex-shrink: 0;
  flex-basis: 700px;
  /* Screen recordings were made at 1920x1200 with 200% HiDPI scaling, and then cropped by some
  amount. Some static figures were taken at higher resolutions, still at 200% HiDPI scaling. */
  max-width: 960px;
  margin: 0;
  max-width: var(--ultorg-max-width);
  /* The layout will wrap at flex-basis first, and then shrink if necessary. */
  flex-shrink: 1;
}

div.figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Used if video elements are used instead of iframe embeds. */
div.figure video {
  max-width: 100%;
  display: block;
}

div.text-with-figure > div.video-embed {
  max-width: 100%;
  display: block;
}

img.h2icon {
  transform: scale(0.6) translate(-6px, 0px);
  transform-origin: top left;
  margin-bottom: -26px;
}

/* ==== Final CTA =============================================================================== */

div.final-cta {
  margin: 30px 0 30px 0;
  padding: 80px 0 80px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}

div.final-cta p {
  max-width: 580px;
}

/* ==== Footer ================================================================================== */

/* Ideally I'd get rubber-band scrolling to show the right background color on Apple devices. But
there's no reliable way to have a different scroll background at the top and the bottom of the
page. And white is better for sideways accidental scrolling anyway. */
footer {
  background: #3d3d3d;
  margin-top: 50px;
  padding: 60px 0 60px 0;
}

footer {
  color: white;
  /* font-size: 16px; */
  line-height: 30px;
}

footer a {
  text-decoration: none;
  color: white;
}

footer a:hover {
  text-decoration: underline;
  color: white;
}

#footer-columns {
  list-style: none;
  display: flex;
  align-items: flex-start;
  column-gap: 60px;
  padding: 0;
}

li#footer-logo {
  /* Add some top padding to improve alignment with adjacent text. */
  padding-top: 6px;
  /* Shift to improve optical alignment. */
  padding-left: 1px;
}

li#footer-logo img {
  display: block;
}

li#footer-firstright {
  margin-left: auto;
}

div#footer-links > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Override for narrow mobile screens. */
@media all and (max-width: 800px) {
  #footer-columns {
    flex-direction: column;
    row-gap: 20px;
    align-items: center;
    justify-content: center;
  }

  li#footer-logo {
    padding: 0;
  }

  li#footer-firstright {
    margin: 0;
  }

  footer {
    padding: 20px 0 20px 0;
    line-height: normal;
  }
}

/* ==== Signup ================================================================================== */

p.hidden {
  display: none;
}

/* See https://stackoverflow.com/questions/2460100/remove-the-complete-styling-of-an-html-button-submit */
button {
  cursor: pointer;
  outline: unset;
  text-decoration: none;
  background: none;
  background-color: #3e81f4;
  color: white;
  font: inherit;
  font-size: 18px;
  border: none;
  border-radius: 10px;
  padding: 5px 25px 7px 25px;
  white-space: nowrap;
  margin-top: 30px;
}

button:hover {
  background-color: #4292ff;
}

button:focus {
  background-color: #4292ff;
}

/* See https://css-tricks.com/styling-texty-inputs-only/ . But just name each type explicitly. */
input[type=text], input[type=email], textarea {
  font: inherit;
  outline: unset;
  border-radius: 0px;
  border: solid #c0c0c0 1px;
  padding: 4px 8px 4px 8px;
  margin: 0;
  background: white;
  color: black;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
  border: solid #3e81f4 1px;
  outline: solid #3e81f4 2px;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

div.signup-question label {
  margin-bottom: 4px;
}

div.signup-question {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

div.submit {
  display: flex;
  justify-content: flex-end;
}

div.submit button {
  min-width: 150px;
  width: 50%;
}

div.signup-question-fullname {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
  margin: 0;
}

/* ==== Resources =============================================================================== */

div.resource-section {
  margin-top: 30px;
  margin-bottom: 62px;
  max-width: 1200px;
}

/* Don't include the 62.5% padding thing here; it's generated by YouTube and
Video as a trick to maintain the iframe's aspect ratio, which may be specific
to each video. */
div.resource-section > div.video-embed {
  margin: 36px 0 18px 0;
}

span.h2-bibtex {
  font-size: 18px;
  font-weight: 400;
}