@charset "utf-8";

/* ==========================================================================
   lesliescott.ca — classic skin
   ---------------------------------------------------------------------------
   An original stylesheet that reproduces the look of the previous site: the
   RE/MAX red, the banner strip, the breadcrumb bar, the red-headed panels and
   the icon stat tiles.

   This is written from scratch. It does not include, extend or depend on the
   previous vendor's stylesheets, class names or JavaScript. The colours and
   metrics below were measured from the old pages so the result matches:

     brand red        #ed3929   (hover #d12112, border #e92514)
     footer           #404040 background, #ccc text, #fff links
     stat tile        1px #e1e6ef border, 50px tall, 40x48 red icon block
     body type        Roboto / Open Sans

   No modal, dialog or overlay is styled here. By design.
   ========================================================================== */

:root {
  --red: #ed3929;
  --red-dark: #d12112;
  --red-border: #e92514;
  --charcoal: #404040;
  --ink: #333;
  --muted: #777;
  --line: #ddd;
  --tile-line: #e1e6ef;
  --wash: #f5f5f5;
  --paper: #fff;
}

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

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

body {
  margin: 0;
  font-family: Roboto, "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }

a { color: var(--red); text-decoration: none; }
a:hover, a:focus { color: var(--red-dark); text-decoration: underline; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.2; margin: 0 0 12px; color: var(--ink); }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; margin-top: 28px; }
h4 { font-size: 17px; margin-top: 20px; }

p { margin: 0 0 12px; }
small { font-size: 85%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.small { font-size: 12px; }
.lead { font-size: 17px; font-weight: 300; }
.pull-left { float: left; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* One column system, used by .grid and by the .intro blocks. The width rules
   for .col-* must come after the 100% default or they lose the cascade at
   equal specificity. */
.grid, .intro { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.grid > *, .intro > * { padding: 0 15px; width: 100%; }
.intro { margin-bottom: 24px; }

@media (min-width: 768px) {
  .col-4  { width: 33.3333%; }
  .col-5  { width: 41.6667%; }
  .col-6  { width: 50%; }
  .col-7  { width: 58.3333%; }
  .col-8  { width: 66.6667%; }
  .col-12 { width: 100%; }
}

/* ------------------------------------------------------------- masthead -- */

.masthead { padding-top: 18px; }
.masthead .grid { align-items: center; }
.banner img { display: block; width: 100%; }

.social { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; }
/* Scoped to the masthead. Unscoped, this pushed the footer's icons to the far
   right of their column and stranded the heading on its own. */
@media (min-width: 768px) { .masthead .social { justify-content: flex-end; margin-top: 0; } }
.social a:first-child { margin-left: 0; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 8px;
  background: var(--charcoal); color: #fff; border-radius: 1px;
  transition: background .2s ease;
}
.social a:hover { background: var(--red); color: #fff; }
.social svg { width: 16px; height: 16px; fill: currentColor; }

.masthead hr { margin: 18px 0 0; }

/* ------------------------------------------------------------------ nav -- */

.navbar { position: relative; margin: 10px 0 20px; border-bottom: 1px solid var(--line); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line); border-radius: 2px;
  padding: 8px 12px; margin: 6px 0; cursor: pointer;
  font: inherit; color: var(--ink);
}
.nav-toggle svg { width: 16px; height: 16px; fill: currentColor; }

.nav { list-style: none; margin: 0; padding: 0; display: none; }
.nav.is-open { display: block; }

.nav > li > a,
.nav > li > .drop-toggle {
  display: block; width: 100%; text-align: left;
  padding: 12px 15px;
  color: var(--ink); text-transform: uppercase;
  font-size: 13px; letter-spacing: .02em;
  background: none; border: 0; border-top: 1px solid var(--line);
  font-family: inherit; cursor: pointer;
}
.nav > li > a:hover, .nav > li > .drop-toggle:hover { background: var(--wash); text-decoration: none; }
.nav > li.active > a, .nav > li.active > .drop-toggle { background: var(--red); color: #fff; }

.caret {
  display: inline-block; width: 0; height: 0; margin-left: 6px;
  vertical-align: middle;
  border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

.drop-menu { list-style: none; margin: 0; padding: 0; display: none; background: var(--wash); }
.dropdown.open > .drop-menu { display: block; }
.drop-menu > li > a {
  display: block; padding: 10px 15px 10px 30px;
  color: var(--ink); font-size: 13px;
  border-top: 1px solid var(--line);
}
.drop-menu > li > a:hover { background: var(--line); text-decoration: none; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav { display: flex; }
  .nav > li { position: relative; }
  .nav > li > a, .nav > li > .drop-toggle {
    width: auto; border-top: 0; padding: 16px 18px;
  }
  .drop-menu {
    position: absolute; top: 100%; left: 0; z-index: 20;
    min-width: 230px; background: var(--paper);
    border: 1px solid var(--line); border-top: 2px solid var(--red);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .12);
  }
  .drop-menu > li > a { padding: 9px 16px; border-top: 0; }
}

/* ------------------------------------------------------------- crumbs --- */

.crumbs { background: var(--wash); border-bottom: 1px solid var(--line); }
.crumbs .wrap { padding-top: 18px; padding-bottom: 18px; }
.crumbs h1 { margin: 0 0 6px; font-size: 28px; }
.crumb-trail { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.crumb-trail li { display: inline; }
.crumb-trail li + li::before { content: "/"; padding: 0 8px; color: var(--line); }

/* ------------------------------------------------------------- content -- */

.content { padding: 30px 0 40px; }

/* ------------------------------------------------------------- panels --- */

.panel {
  margin-bottom: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.panel__head {
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.panel__body { padding: 15px; }

.panel--red { border-color: var(--red); }
.panel--red > .panel__head {
  color: #fff; background: var(--red); border-color: var(--red);
}
.panel--red > .panel__head small { color: rgba(255, 255, 255, .85); display: block; font-weight: 400; }

/* -------------------------------------------------------- the stat tile -- */
/* 1px #e1e6ef border, 50px tall, 40x48 red icon block — as the old site had */

.stat {
  display: flex; align-items: stretch;
  border: 1px solid var(--tile-line);
  min-height: 50px;
  margin-bottom: 10px;
}
.stat:last-child { margin-bottom: 0; }
.stat__icon {
  flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  margin-right: 10px;
}
.stat__icon svg { width: 18px; height: 18px; fill: currentColor; }
.stat__text { padding: 5px 8px 5px 0; align-self: center; }
.stat__value { font-size: 16px; line-height: 1.25; }
.stat__label { text-transform: uppercase; font-weight: bold; font-size: 11px; color: var(--muted); }

/* -------------------------------------------------------------- tables -- */

.table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.table th, .table td {
  padding: 7px 8px; text-align: left; vertical-align: top;
  border-top: 1px solid var(--line); font-size: 13px;
}
.table thead th { border-top: 0; border-bottom: 2px solid var(--line); font-weight: 500; }
.table tr:first-child td { border-top: 0; }

/* --------------------------------------------------------------- cards -- */

.card {
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--paper); margin-bottom: 22px;
  transition: border-color .2s ease;
  height: calc(100% - 22px);
  display: flex; flex-direction: column;
}
.card:hover { border-color: var(--red); }
.card img { width: 100%; display: block; }
.card__body { padding: 12px 14px 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
.card__body h4 { margin: 0 0 6px; font-size: 16px; }
.card__body p { font-size: 13px; color: var(--muted); }
.card__body .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-block; cursor: pointer;
  padding: 8px 16px; margin: 0 4px 6px 0;
  font-size: 14px; line-height: 1.5;
  border: 1px solid transparent; border-radius: 2px;
  background: var(--wash); color: var(--ink);
  font-family: inherit;
}
.btn:hover, .btn:focus { text-decoration: none; background: var(--line); color: var(--ink); }
.btn--primary {
  color: #fff; background: var(--red); border-color: var(--red-border);
}
.btn--primary:hover, .btn--primary:focus { color: #fff; background: var(--red-dark); border-color: var(--red-dark); }
.btn--sm { padding: 5px 11px; font-size: 12px; }
.btn--block { display: block; width: 100%; text-align: center; margin-right: 0; }

/* --------------------------------------------------------------- forms -- */

.field { margin-bottom: 15px; }
.field > label { display: block; margin-bottom: 5px; font-weight: 500; font-size: 13px; }
/* Match every text-like input rather than enumerating types — an explicit
   list silently missed type=email when the contact form gained one. */
.field input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.field select, .field textarea {
  display: block; width: 100%;
  padding: 7px 10px; font: inherit; font-size: 14px;
  color: var(--ink); background: var(--paper);
  border: 1px solid #ccc; border-radius: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--red); outline: 0;
}
.field textarea { min-height: 140px; resize: vertical; }
.field .hint { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.check { margin-bottom: 10px; font-size: 14px; }
.check input { margin-right: 7px; }
.alert-note { color: var(--red-dark); font-size: 13px; margin: 10px 0 0; }

/* ------------------------------------------------------- two-col intro -- */

.intro img { margin: 0 0 12px; border: 1px solid var(--line); }

/* The featured photo is portrait (3:4). Letting it fill its column is what
   makes it read as the lead image rather than a thumbnail beside the text. */
.feature .intro img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------- sampled neighbourhoods */
/* The home page carries every neighbourhood card but shows three. site.js
   shuffles the order on load; with JavaScript off the first three show. */

.hood-sample > *:nth-child(n+4) { display: none; }

/* ------------------------------------------------------- listing cards -- */

.listing-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 22px;
  transition: border-color .2s ease;
}
.listing-card__photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--wash); }
.listing-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.listing-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 14px; }
.listing-card:hover { text-decoration: none; color: var(--ink); border-color: var(--red); }
.listing-card__price {
  font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--red);
}
.listing-card__addr { font-size: 17px; font-weight: 500; margin-top: 6px; }
.listing-card__area { font-size: 14px; color: var(--muted); }
.listing-card__spec {
  font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.listing-card__mls {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--muted); margin-top: 8px;
  text-transform: uppercase; letter-spacing: .05em;
}
.listing-card__go { color: var(--red); font-weight: 500; }
.listing-card:hover .listing-card__go { text-decoration: underline; }

/* Even padding on all four sides. The content used to sit 5px from the edge
   of the tinted panel, so the text read as defining the block rather than
   sitting inside it. */
.feature { background: var(--wash); padding: clamp(22px, 4vw, 48px); margin: 0 0 30px; }

/* .intro carries a -15px side margin that its columns' 15px padding cancels,
   so a column only gains room above 15px - hence 32, not 17. */
@media (min-width: 768px) {
  .feature .intro > .col-7 { padding-right: 32px; }
}

/* The last child's bottom margin would otherwise eat into the panel's
   bottom padding and leave the block looking lopsided. */
.feature .intro { margin-bottom: 0; }
.feature .intro > * > *:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- footer -- */

.footer {
  margin-top: 30px;
  border-top: 3px solid var(--red);
  padding: 34px 0 26px;
  color: #c8ccd0; background: var(--charcoal); font-size: 14px;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--red); }

.footer .heading {
  text-transform: uppercase; font-size: 11px; letter-spacing: .12em;
  color: #9aa0a6; margin: 0 0 14px; font-weight: 500;
}

/* identity block */
.footer__name {
  font-size: 18px; font-weight: 500; color: #fff;
  letter-spacing: .01em; margin: 0 0 2px;
}
.footer__role { margin: 0 0 14px; color: #c8ccd0; }
.footer__addr { margin: 0; color: #9aa0a6; font-size: 13px; line-height: 1.7; }

/* labelled contact rows, so the numbers line up instead of running on */
.footer__contact { list-style: none; margin: 0; padding: 0; }
.footer__contact li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0; border-top: 1px solid #4d4d4d;
}
.footer__contact li:first-child { border-top: 0; padding-top: 0; }
.footer__contact span {
  flex: 0 0 46px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9aa0a6;
}
.footer__contact a { word-break: break-word; }

/* the call to action that fills what used to be dead space */
.footer__cta { margin: 0 0 10px; color: #fff; font-size: 15px; line-height: 1.45; }
.footer__follow { margin-top: 26px; }

.footer .social { margin-top: 0; }
.footer .social a { background: #555; margin: 0 8px 8px 0; }
.footer .social a:hover { background: var(--red); }

.footer-bar {
  background: #333; color: #8b9096; font-size: 12px;
  padding: 16px 0;
}
.footer-bar a { color: #c8ccd0; }
.footer-bar a:hover { color: #fff; }
.footer-bar ul { list-style: none; margin: 0; padding: 0; }
.footer-bar li { display: inline; }
.footer-bar li + li::before { content: "·"; padding: 0 8px; }
.footer-bar p { margin: 0 0 10px; }
/* the trademark notice is long; a measure stops it spanning the full width */
.footer-bar__legal { max-width: 78rem; line-height: 1.65; }
/* credit + visit counter: quieter than the rest of the bar */
.footer-bar p.footer-bar__meta { color: #6f747a; font-size: 11px; }
.footer-bar__meta a { color: #8b9096; }
.footer-bar__hits::before { content: "·"; padding: 0 8px; }

/* Stacked columns need their own separation; without it the address runs
   straight into the next heading. */
.footer .grid > * { margin-bottom: 30px; }
.footer .grid > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .footer .grid > * { margin-bottom: 0; }
  .footer-bar__legal { max-width: 72%; }
  .footer-bar .grid > :last-child { text-align: right; }
}

/* --------------------------------------------------------------- print -- */

@media print {
  .masthead, .navbar, .footer, .footer-bar, .crumbs { display: none; }
  body { font-size: 12pt; }
}

/* ---------------------------------------------------------- form status -- */
/* Inline, never a dialog. */

.form-status {
  border-left: 4px solid var(--red);
  background: var(--wash);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.form-status strong { display: block; font-size: 16px; margin-bottom: 4px; }
.form-status p { margin: 0; font-size: 13px; color: var(--muted); }
.form-status--ok { border-left-color: #2e7d48; }
.form-status--bad { border-left-color: var(--red); }

.field-error {
  display: block; margin-top: 5px;
  font-size: 12px; color: var(--red-dark);
}