/* Layout of habitathours.com. Same look as the former WordPress theme
   (Astra), reduced to what the three pages use. The calculator itself is
   styled in style/style.css. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2) format("woff2");
}

:root {
  --brand: #180f79;
  --text: #625f5f;
  --line: #dddddd;
  --footer-line: #dbe8eb;
}
* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand); color: #ffffff; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { color: #191970; }
img { max-width: 100%; height: auto; }
p { margin: 0 0 1.75em; }
button, input, select, textarea { font: inherit; }
.skip { position: absolute; left: -9999em; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: #f1f1f1; padding: 15px 23px; }

/* header */
.top { background: #ffffff; border-bottom: 1px solid var(--line); padding: 16px 0; }
.top-row {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1240px; min-height: 131px; margin: 0 auto; padding: 0 20px;
}
.logo { display: block; line-height: 0; }
.logo img { width: 99px; height: 99px; }
.top-right { display: flex; align-items: center; }
.nav { display: flex; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-block; padding: 0 16px; line-height: 70px; color: var(--text); transition: color .2s linear; }
.nav a:hover, .nav a:focus { color: var(--brand); }

/* content */
.content { min-height: 1px; }
h1 {
  margin: 0;
  font-size: 65px; line-height: 1.5; font-weight: 500;
  color: var(--brand); text-transform: capitalize;
}
h3 { margin: 0; font-weight: 300; }
label { color: #020101; }
input, select, textarea {
  color: #666666; background: #fafafa;
  border: 1px solid var(--line); border-radius: 2px;
  padding: 12px; line-height: 1.5;
}
input:focus, select:focus, textarea:focus { border-style: dotted; border-color: inherit; border-width: thin; outline: none; }

/* calculator: section headers and summary button */
/* the old theme rendered these at the regular weight although it asked for 300 */
.immo_calc_collaps > h3 { font-size: 22px; font-weight: 400; line-height: 33px; letter-spacing: 2.5px; color: var(--brand); }
.immo_calc_collaps.active > h3, .immo_calc_collaps:hover > h3 { color: #ffffff; }
#immo_calc_button, .tool {
  display: inline-block;
  padding: 16px 40px;
  border: 0; border-radius: 0;
  background: transparent; color: var(--brand);
  font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 2px;
  text-transform: uppercase; text-align: center; cursor: pointer;
}
#immo_calc_button:hover, #immo_calc_button:focus, .tool:hover, .tool:focus { background: var(--brand); color: #ffffff; }
.icon-info-sign {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm1 12H7V7h2zm0-6.5H7v-2h2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm1 12H7V7h2zm0-6.5H7v-2h2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* home: the two tools side by side */
.tools { display: flex; max-width: 1140px; margin: 0 auto; padding: 10px; }
.tools > div { width: 50%; padding: 10px; }

/* footer */
.foot { border-top: 1px solid var(--footer-line); min-height: 80px; padding: 20px 0; text-align: center; }
.foot-inner { max-width: 1200px; margin: 0 auto; }
.foot a { color: var(--text); }
.foot a:hover, .foot a:focus { color: var(--brand); }

/* tablet and mobile (Astra breakpoint 921px) */
@media (max-width: 921px) {
  .top-row { min-height: 82px; }
  .logo img { width: 50px; height: 50px; }
  .nav a { line-height: 48px; padding: 0 20px; }
  h1 { font-size: 30px; }
  .foot { padding: 20px 30px; }
}
@media (max-width: 767px) {
  .tools { flex-direction: column; }
  .tools { padding: 10px 0; }
  .tools > div { width: 100%; padding: 10px 20px; }
  .tool, #immo_calc_button { font-size: 10.944px; }
  .immo_calc_input, select { font-size: 14.592px; padding: 10.944px; }
}
@media (max-width: 480px) {
  .top-row { flex-wrap: wrap; gap: 8px; }
}