@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
:root {
  /*  Colors 
      ======================================== */
  --color-lightness-lowest-percentage: 90%;

  --color-primary-hue: 0;
  --color-primary-saturation: 0%;
  --color-primary-lightness: 27%;
  --color-primary-factor: calc((var(--color-lightness-lowest-percentage) - var(--color-primary-lightness)) / 4);
  --color-primary-highest-contrast: var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness);
  --color-primary-high-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + var(--color-primary-factor));
  --color-primary-medium-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + (var(--color-primary-factor) * 2));
  --color-primary-low-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + (var(--color-primary-factor) * 3));
  --color-primary-lowest-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + (var(--color-primary-factor) * 4));

  --color-secondary-hue: 25;
  --color-secondary-saturation: 13%;
  --color-secondary-lightness: 30%;
  --color-secondary-factor: calc((var(--color-lightness-lowest-percentage) - var(--color-secondary-lightness)) / 4);
  --color-secondary-highest-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) var(--color-secondary-lightness);
  --color-secondary-high-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + var(--color-secondary-factor));
  --color-secondary-medium-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + (var(--color-secondary-factor) * 2));
  --color-secondary-low-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + (var(--color-secondary-factor) * 3));
  --color-secondary-lowest-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + (var(--color-secondary-factor) * 4));

  --color-tertiary-hue: 0;
  --color-tertiary-saturation: 0%;
  --color-tertiary-lightness: 20%;
  --color-tertiary-factor: calc(100% - var(--color-tertiary-lightness)) / 4;
  --color-tertiary-highest-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) var(--color-tertiary-lightness);
  --color-tertiary-high-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + var(--color-tertiary-factor));
  --color-tertiary-medium-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + (var(--color-tertiary-factor) * 2));
  --color-tertiary-low-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + (var(--color-tertiary-factor) * 3));
  --color-tertiary-lowest-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + (var(--color-tertiary-factor) * 4));

  --color-anchor-main-text: var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness);  /* unchanged in dark mode*/

  --color-highlight-hue: 60;
  --color-highlight-saturation: 100%;
  --color-highlight-lightness: 83%;
  --color-highlight: var(--color-highlight-hue) var(--color-highlight-saturation) var(--color-highlight-lightness);


  /*  Fonts 
      ======================================== */
  --text-font-stack: "Verdana", sans-serif;
  --headers-font-stack: "Garamond", "EB Garamond", serif;


  /*  Graphics 
      ======================================== */
  --logo-image: url('/assets/images/branding/howard_beale_agency_logo_primary.svg');
  --icon-right-arrow: url('/assets/images/arrow-right-short-svgrepo-com.svg');
  --icon-burger-menu: url('/assets/images/burger-menu-svgrepo-com.svg');
  --icon-close-x: url('/assets/images/close-x-svgrepo-com.svg');
  --icon-external-link: url('/assets/images/external-link-svgrepo-com.svg');


  /*  Sizing
      ======================================== */
  --base-size: min(1rem, 2vw);

  --page-margin: calc(var(--base-size) * 4);

  --icon-width: 1em;
  --icon-height: 1em;
  --icon-gap: .125em;

  --touch-target-min-size: 24px;


  /*  Shadows
      ======================================== */
  --shadow-color: 0 0% 10%;
  --shadow-intensity: 0;

  /* Drop shadow - box */
  /* Using rem to maintain consistent size that is not based on the container font size. */
  --drop-shadow-box-offset-x-1: 0px;
  --drop-shadow-box-offset-y-1: min(.0625rem, .25vw);
  --drop-shadow-box-blur-1: min(.125rem, .5vw);
  --drop-shadow-box-spread-1: 0px;

  --drop-shadow-box-offset-x-2: 0px;
  --drop-shadow-box-offset-y-2: min(.125rem, .5vw);
  --drop-shadow-box-blur-2: min(.375rem, 1.5vw);
  --drop-shadow-box-spread-2: min(.125rem, .5vw);

  --drop-shadow-box: 
    hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .3)) var(--drop-shadow-box-offset-x-1) var(--drop-shadow-box-offset-y-1) var(--drop-shadow-box-blur-1) var(--drop-shadow-box-spread-1), 
    hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .15)) var(--drop-shadow-box-offset-x-2) var(--drop-shadow-box-offset-y-2) var(--drop-shadow-box-blur-2) var(--drop-shadow-box-spread-2);
  
  --drop-shadow-box-height: calc(
    var(--drop-shadow-box-offset-y-1) +
    var(--drop-shadow-box-blur-1) +
    var(--drop-shadow-box-spread-1) +
    var(--drop-shadow-box-offset-y-2) +
    var(--drop-shadow-box-blur-2) +
    var(--drop-shadow-box-spread-2)
  );
  
  /* Drop shadow filter for text */
  --drop-shadow-filter-text: hsl(var(--shadow-color)) min(.25rem, 1vw) min(.25rem, 1vw) min(.25rem, 1vw);


  /*  Animations
      ======================================== */
  --transition-timing-fcn-01: cubic-bezier(0.4, 0, 0.2, 1);
}


@media screen and (prefers-color-scheme: dark) {
  :root {
    --color-primary-lowest-contrast: var(--color-primary-hue) var(--color-primary-saturation) var(--color-primary-lightness);
    --color-primary-low-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + var(--color-primary-factor));
    --color-primary-high-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + (var(--color-primary-factor) * 3));
    --color-primary-highest-contrast: var(--color-primary-hue) var(--color-primary-saturation) calc(var(--color-primary-lightness) + (var(--color-primary-factor) * 4));

    --color-secondary-lowest-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) var(--color-secondary-lightness);
    --color-secondary-low-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + var(--color-secondary-factor));
    --color-secondary-high-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + (var(--color-secondary-factor) * 3));
    --color-secondary-highest-contrast: var(--color-secondary-hue) var(--color-secondary-saturation) calc(var(--color-secondary-lightness) + (var(--color-secondary-factor) * 4));

    --color-tertiary-lowest-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) var(--color-tertiary-lightness);
    --color-tertiary-low-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + var(--color-tertiary-factor));
    --color-tertiary-high-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + (var(--color-tertiary-factor) * 3));
    --color-tertiary-highest-contrast: var(--color-tertiary-hue) var(--color-tertiary-saturation) calc(var(--color-tertiary-lightness) + (var(--color-tertiary-factor) * 4));

    --color-anchor-main-text: var(--color-secondary-hue) 100% 85%;

    --color-highlight-lightness: 2%;

    --shadow-intensity: .1;
  }
}


/*  HTML/Root
    ======================================== */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    overflow-wrap: break-word;
}




/*  BODY
    ======================================== */
body {
  --body-background-color: 0 0% 100%; /* white */
  --body-text-color: 0 0% 0%; /* black */
  --body-font-size: 1rem;

  background-color: hsl(var(--body-background-color));

  font-family: var(--text-font-stack);
  font-size: var(--body-font-size);
  color: hsl(var(--body-text-color));
}

@media screen {
  body {
    --body-background-color:  var(--color-tertiary-lowest-contrast);
    --body-text-color: var(--color-tertiary-highest-contrast);

    margin: 0;
    padding: 0;
  }
}

@media print {
  body {
    --body-font-size: 12pt;

    margin: 1cm;
    padding: 0;

    background: none;

    font-family: sans-serif;
  }
}




/*  APPLICATION CONTAINER
    ============================= */
@media screen {
  #app-container {
    /* Allow for "sticky" footer to bottom of pages with little content.
       Top margin of footer-main set to auto to push to the bottom of its container. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
}




/*  MAIN
    ============================= */
@media screen {
  main {
    padding: calc( 4 * var(--base-size));
    min-height: 60svh;
  }
}

@media screen and (min-width: 65em) {
  main {
    padding-left: calc( 10 * var(--base-size));
    padding-right: calc( 10 * var(--base-size));
  }
}




/*  HEADINGS
    ============================= */
h1,
h2 {
  --heading-decor-size: .1em;

  margin: 0;
  padding: 0 0 calc(4 * var(--heading-decor-size)) 0;
  border-bottom: calc(var(--heading-decor-size) / 4) solid hsl(var(--color-secondary-low-contrast));
  
  font-family:  var(--headers-font-stack);
  font-size: clamp(2em, 0.571em + 3.81vw, 4em);
  font-weight: normal;
  letter-spacing: 0;
  color: hsl(var(--color-primary-highest-contrast));
  text-transform: none;

  position: relative;
}

h1::after,
h2::after {
  content: '';
  position: absolute;
  bottom: var(--heading-decor-size);
  left: 0;

  display: block;
  width: min(3em, 35%);
  /* Use border instead of background color on the container to allow for printing */
  border-bottom: var(--heading-decor-size) solid hsl(var(--color-secondary-highest-contrast));
}


h2 {
  margin-top: 1.25em;
}


h3 {
  margin: 1em 0 .5em 0;
  padding: 0;
  font-family: var(--text-font-stack);
  font-size: clamp(1.25em, 0.893em + 0.952vw, 1.75em);
  font-weight: normal;
  letter-spacing: 0;
  color: hsl(var(--color-secondary-highest-contrast));
  text-transform: uppercase;
}

h2 + section h3 {
  margin-top: .5em;
}




/*  PARAGRAPH
    ============================= */
p {
  margin: 1em 0 0 0;
  padding: 0;
}

@media screen {
  p {
    line-height: 2em;
    text-rendering: optimizeLegibility;
  }
}




/*  ANCHOR
    ============================= */
a {
  position: relative;

  text-decoration: underline;
  text-underline-offset: .25em;
  font-weight: 600;

  &:link {
    color: hsl(var(--color-anchor-main-text));
  }

  &:visited {
    color: currentColor;
  }

  &:hover,
  &:active,
  &:focus {
    color: hsl(var(--color-anchor-main-text));
    text-decoration: none;
  }
}

@media screen {
  a {
    /* prevent long link text from overflowing its container */
    max-width: 100%;

    /* apply minimum size for touch screens if anchor is not inline */
    min-width: var(--touch-target-min-size);
    min-height: var(--touch-target-min-size);
  }

  /* Display external link icon. */
  /* a[href^="http"]::after { */
  a[target="_blank"]::after {
    content: "\00a0"; /* include nbsp to allow icon to go to the next line to avoid horizontal overflow */

    margin-left: var(--icon-gap);
    padding-left: calc(var(--icon-width) / 2);

    background-color: currentColor;
    mask-image: var(--icon-external-link), linear-gradient(transparent, transparent);
    mask-size: var(--icon-width);
    mask-position: center;
    mask-repeat: no-repeat;
  }
}

@media print {
  a {
    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      color: hsl(var(--body-text-color));
      text-decoration: underline;
      text-underline-offset: initial;
    }
  }

  /* Display href attribute next to anchor text. */
  a::after {
    content: " [" attr(href) "]";
  }
}


/*  ANCHOR - With image
    ============================= */
/* Align anchor height with descendant image height instead of line height. */
a:has(img) {
  display: inline-grid;
  grid-auto-rows: min-content;
  grid-auto-columns: minmax(0, 1fr); /* Allow column width to be narrower than its content to allow for 'overflow-wrap: break-word.' */
}




/*  IMAGE
    ============================= */
img {
  max-width: 100%;
}




/*  UNORDERED LIST
    ============================= */
ul {
  list-style-type: square;
  padding-inline-start: 1em;
}

li {
  line-height: 2em;
}




/*  TABLE
    ============================= */
table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: var(--base-size) 0;
}

@media screen and (max-width: 47.98em) {
  table {
    display: block;
    border: none;
  }

  table caption,
  table tbody, 
  table th, 
  table tr, 
  table td {
    display: block;
    width: 100%;
    text-align: center;
  }

  table thead {
    display: none;
  }
}


/*  TABLE - Header
    ============================= */
table th {
  padding: .25em;
  background-color: hsl(var(--color-secondary-low-contrast));
  border-bottom: .0625em solid hsl(var(--color-secondary-low-contrast));
  
  font-size: smaller;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
}


/*  TABLE - Body - Row
    ============================= */
table tbody tr {
  border-bottom: .0625em solid hsl(var(--color-secondary-high-contrast));
}

table tbody tr:nth-of-type(2n) {
  background-color: hsl(var(--color-secondary-lowest-contrast));
}

@media screen and (max-width: 47.98em) {
  table tbody tr {
    border-width: .0625em;
    border-style: solid;
    border-color: hsl(var(--color-secondary-medium-contrast));
  }

  table tbody tr:not(:last-of-type) {
    margin-bottom: 1em;
  }
}


/*  TABLE - Body - Data
    ============================= */
table tbody td {
  padding: .25em;
  vertical-align: top;
}


/*  TABLE - Body - Data - Image
    ============================= */
table tbody td img { 
  width: 10em;
  height: 10em;
  object-fit: cover;
}

@media print {
  table tbody td img {
    width: 2cm;
    height: 2cm;
  }
}








/*  ----------------- COMPONENTS -----------------  */


/*  Component - Anchor Primary
    ============================= */
@media screen {
  a.anchor-primary {
    display: inline-block;
    margin: 0;
    padding: min(.5em, 4vw) min(1em, 8vw);
  
    font-family: var(--headers-font-stack);
    font-size: clamp(1rem, 0.821rem + 0.476vw, 1.25rem);
    line-height: clamp(1rem, 0.643rem + 0.952vw, 1.5rem);
    letter-spacing: .0625em;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;

    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      text-decoration: none;
      transition: background-color 500ms ease-in-out, color 300ms ease-in-out, box-shadow 300ms ease-in-out;
    }
  
    &:link,
    &:visited {
      background-color: hsl(var(--color-primary-highest-contrast));
      color: hsl(var(--color-tertiary-lowest-contrast));
    }

    &:hover,
    &:active,
    &:focus {
      background-color: hsl(var(--color-tertiary-low-contrast));
      color: hsl(var(--color-primary-highest-contrast));
      box-shadow: inset 0 min(1.125em, 3vw) min(2.25em, 6vw) max(-1.125em, -3vw) hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .3)), 0 min(0.25em, .75vw) min(0.3125em, 1vw) hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .5));
    }
  }
}




/*  Component - Anchor Secondary
    ============================= */
@media screen {
  a.anchor-secondary {
    --anchor-secondary-decor-size: 1.5em;

    /* Allow for word wrap/break word by setting minimum size of 0 on anchor text */
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) calc(var(--anchor-secondary-decor-size) * 1.25);
    align-items: center;
    gap: calc(var(--anchor-secondary-decor-size) / 4);

    margin: 0;
    padding: 0 .5em 0 0;
  
    color: hsl(var(--color-anchor-main-text));
    font-family: var(--text-font-stack);
    font-size: .9em;
    font-weight: 600;
    text-transform: capitalize;
  
    &:link,
    &:visited,
    &:hover,
    &:active,
    &:focus {
      background-color: transparent;
      text-decoration: none;
    }
  }

  /* Decorative image */
  a.anchor-secondary::after {
    content: '';
    width: var(--anchor-secondary-decor-size);
    height: var(--anchor-secondary-decor-size);

    background-color: currentColor;
    mask-image: var(--icon-right-arrow), linear-gradient(transparent, transparent);
    mask-size: var(--anchor-secondary-decor-size);
    mask-position: center;
    mask-repeat: no-repeat;
  }

  /* Decorative image active anchor transformation */
  a.anchor-secondary:hover::after,
  a.anchor-secondary:active::after,
  a.anchor-secondary:focus::after {
    transform: translateX(.5em);
  }

  /* Decorative image active anchor transition */
  a.anchor-secondary::after,
  a.anchor-secondary:hover::after,
  a.anchor-secondary:active::after,
  a.anchor-secondary:focus::after {
    transition: transform 500ms ease-out;
  }
}




/*  Component - Navigation Main
    ============================= */
.nav-main {
  --size-nav-main-font: 1em;
  --size-nav-main-padding: calc(var(--size-nav-main-font) / 2);
}

@media screen {
  .nav-main {
    margin: 0; 
    padding: var(--size-nav-main-padding);
  }
}


@media print {
  .nav-main {
    display: none;
  }
}


/*  Component - Navigation Main -
    Anchor List
    ============================= */
.nav-main ul {
  font-family: var(--headers-font-stack);
  font-size: var(--size-nav-main-font);
  /* letter-spacing: .0625em; */
  letter-spacing: 0;
  text-transform: uppercase; 

  margin: 0;
  padding: 0;
  list-style-type: none;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: calc(2 * var(--size-nav-main-font));
  row-gap: calc(var(--size-nav-main-font) / 4);

  /**
   * Disable pointer events on the gaps between the navigation links
   * by disabling pointer events on the container, and enabling
   * pointer events on the child elements in the container.
   */
  pointer-events: none;
  > * {
    pointer-events: auto;
  }

  li {
    margin: 0;
    padding: 0;
    line-height: normal;
    min-width: 0;
  }

  a {
    color: hsl(var(--body-text-color));
    text-decoration: none;
    
    transition-property: color;
    transition-timing-function: var(--transition-timing-fcn-01);
    transition-duration: 800ms;
  }
  
  /**
  * Active nav link item functionality that highlights the
  * hovered/active/focused link in the list of links.
  * Hovering/focusing on the ul element lightens the color
  * of every anchor element within the ul element.  
  * If a specific anchor element is hovered/active/focused,
  * that anchor element's color is changed to the default
  * anchor color.
  */
  &:hover,
  &:focus-within {
    a 
    {
      color: hsl(var(--color-tertiary-medium-contrast));

      &:hover,
      &:active,
      &:focus
      {
        color: hsl(var(--body-text-color));
      }
    }
  }
}




/*  Component - Navigation Breadcrumb
    ============================= */
@media screen {
  .nav-breadcrumb {
    font-size: .9em;
  }

  .nav-breadcrumb ul {
    margin: 0 0 1em 0;
    list-style-type: none;
    padding-inline-start: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .nav-breadcrumb li {
    margin: 0;
    padding: 0;
    line-height: normal;
  }
}

@media print {
  .nav-breadcrumb {
    display: none;
  }
}




/*  Component - Business Contact -
    Address - Name
    ============================= */
.business-contact__address__name {
  font-weight: 600;
}

/*  Component - Business Contact -
    Telecom
    ============================= */
.business-contact__telecom {
  margin-top: 1em;
}

/*  Component - Business Contact -
    Telecom - Anchors
    ============================= */
@media print {
  .business-contact__telecom a {
    font-weight: normal;
    text-decoration: none;

    &::after {
      content: '';
    }
  }
}




/*  Component - Property
    ============================= */
.property {
  --size-property-preview-width: min(20rem, 100%);
  --size-property-preview-height: min(20rem, max(45vw, 45svh));
  --size-property-status-spacing: .625em;
}

@media screen {
  .property {
    position: relative;

    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
}


/*  Component - Property - Direct
    Children
    ============================= */
@media screen {
  .property > * {
    padding: 0 var(--base-size);
  }
}


/*  Component - Property - Preview
    ============================= */
@media screen {
  .property__preview {
    width: 100%;
    height: var(--size-property-preview-height);
    padding: 0;
  }
}


/*  Component - Property - Preview -
    Image
    ============================= */
@media screen {
  .property__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/*  Component - Property - Type
    ============================= */
@media screen {
  .property__type {
    font-family: var(--text-font-stack);
    /* font-size: .85em; */
    letter-spacing: 0;
    color: hsl(var(--color-primary-highest-contrast));
    text-transform: capitalize;
  }
}


/*  Component - Property - Location
    ============================= */
@media screen {
  .property__location {
    font-family: var(--text-font-stack);
    letter-spacing: 0;
    color: hsl(var(--color-secondary-highest-contrast));
    font-size: 1.25em;
    text-transform: uppercase;
  }
}


/*  Component - Property - Status
    ============================= */
@media screen {
  .property__status.new,
  .property__status.open-house,
  .property__status.under-contract,
  .property__status.sold {
    padding: calc(var(--size-property-status-spacing) / 2);
    border-radius: .25em;
    font-size: .75em;
    text-transform: uppercase;
    color: hsl(var(--color-tertiary-highest-contrast));
  }
}

@media screen and (min-width: 20em) {
  .property__status.new,
  .property__status.open-house,
  .property__status.under-contract,
  .property__status.sold {
    position: absolute;
    top: 0;
    left: 0;

    width: auto;
    max-width: calc(100% - (var(--size-property-status-spacing) * 2));
    max-height: calc(3em + (var(--size-property-status-spacing) * 2));;
    overflow: auto;

    background-color: hsl(var(--color-tertiary-lowest-contrast) / .75);

    margin: var(--size-property-status-spacing);
    
    text-align: left;
  }
}




/*  Component - Properties Matrix
    ============================= */
.matrix.properties {
  --size-matrix-property-width: min(20rem, 100%);
  --size-matrix-property-preview-height: min(20rem, max(45vw, 45svh));
}


/*  Component - Properties Matrix -
    Headers
    ============================= */
@media screen {
  .matrix.properties caption,
  .matrix.properties thead {
      display: none;
  }
}


/*  Component - Properties Matrix -
    Matrix Data
    ============================= */
@media screen {
  .matrix.properties .matrix-data {
    display: block;
  }
}


/*  Component - Properties Matrix -
    Matrix Data - Property
    ============================= */
@media screen {
  .matrix.properties .matrix-data .property {
    border: none;
    background: none;
  }
}


/*  Component - Properties Matrix -
    Matrix Data - Addendum
    ============================= */
.matrix.properties .properties-addendum {
  border: none;
  background: none;
}

@media screen {
  .matrix.properties .properties-addendum {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}


/*  Component - Properties Matrix -
    Matrix Data - Addendum - Message
    ============================= */
@media screen {
  .matrix.properties .properties-addendum__message {
    font-family: var(--headers-font-stack);
    font-size: clamp(1.5em, 0.786em + 1.905vw, 2.5em);
    line-height: clamp(1.5em, 0.786em + 1.905vw, 2.5em);
  }
}




/*  Component - Sold Properties
    Matrix - Matrix Data
    ============================= */
@media screen {
  .matrix.properties.sold .matrix-data {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--size-matrix-property-width));
    gap: calc(2 * var(--base-size));
    justify-content: center;
  }
}


/*  Component - Sold Properties 
    Matrix - Matrix Data - 
    Property - Direct Children
    ============================= */
@media screen {
  .matrix.properties.sold .matrix-data .property > * {
    text-align: left;
    padding: 0;
  }
}


/*  Component - Sold Properties -
    Matrix - Matrix Data - 
    Property - Preview
    ============================= */
@media screen {
  .matrix.properties.sold .matrix-data .property .property__preview {
    height: var(--size-matrix-property-preview-height);
    padding-bottom: calc(var(--base-size) / 2);
  }
}

/*  Component - Sold Properties -
    Matrix - Matrix Data - 
    Property - Type
    ============================= */
@media screen {
  .matrix.properties.sold .matrix-data .property .property__type {
    font-size: .85em;
  }
}




/*  Component - Current Properties 
    Matrix
    ============================= */
.matrix.properties.current {
  --size-matrix-property-width: min(25rem, 60vw);
  --size-matrix-property-preview-height: min(20rem, 50vw);
}

/*  Component - Current Properties
    Matrix - Matrix Data
    ============================= */
@media screen {
  .matrix.properties.current .matrix-data {
    display: flex;
    flex-direction: column;
    gap: calc(2 * var(--base-size));
  }
}


/*  Component - Current Properties
    Matrix - Matrix Data - Property
    ============================= */
@media screen {
  .matrix.properties.current .matrix-data .property {
    background-color: hsl(var(--color-secondary-lowest-contrast) / .5);
    padding: 0 0 var(--base-size) 0;
    /* border-radius: calc(var(--base-size) / 2); */
  }
}

@media screen and (min-width: 64em) and (min-height: 40em) {
  .matrix.properties.current .matrix-data .property {
    width: calc(100% - (var(--size-matrix-property-width) / 2));
    min-height: calc(var(--size-matrix-property-preview-height) + var(--base-size));
    margin-left: calc(var(--size-matrix-property-width) / 2);
    padding-left: calc((var(--size-matrix-property-width) / 2) + var(--base-size));
    text-align: left;
  }
}


/*  Component - Current Properties
    Matrix - Matrix Data - Property -
    Preview
    ============================= */
@media screen and (min-width: 64em) and (min-height: 40em) {
  .matrix.properties.current .matrix-data .property .property__preview {
    position: absolute;
    top: var(--base-size);
    left: calc(-1 * (var(--size-matrix-property-width) / 2));
    width: var(--size-matrix-property-width);
    height: calc(var(--size-matrix-property-preview-height) - var(--base-size));
    padding: 0;

    box-shadow: hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .5)) min(0.1875rem, .75vw) min(0.1875rem, .75vw) min(0.625rem, 2.5vw) ;
  }
}


/*  Component - Current Properties
    Matrix - Matrix Data - Property -
    Location
    ============================= */
@media screen {
  .matrix.properties.current .matrix-data .property .property__location {
    padding-top: var(--base-size);
  }
}


/*  Component - Current Properties
    Matrix - Matrix Data - Property -
    Location - Direct Children
    ============================= */
.matrix.properties.current .matrix-data .property .property__location > * {
  display: block;
}


/*  Component - Current Properties
    Matrix - Matrix Data - Property -
    Status
    ============================= */
@media screen and (min-width: 64em) and (min-height: 40em) {
  .matrix.properties.current .matrix-data .property .property__status {
    top: var(--base-size);
    left: calc(-1 * (var(--size-matrix-property-width) / 2));
    max-width: calc(var(--size-matrix-property-width) - var(--base-size));
  }
}


/*  Component - Current Properties
    Matrix - Matrix Data - Property -
    URL
    ============================= */
@media screen {
  .matrix.properties.current .matrix-data .property .property__url {
    padding-top: var(--base-size);
  }
}




/*  Component - Property Figures
    ============================= */
.figures-property {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, min(20em, 100%));
  grid-auto-rows: min(20em, max(45svh, 45vw));
  gap: calc(var(--base-size) / 2);
  justify-content: center;
}

@media (min-width: 64em), print {
  .figures-property {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 6em;
  }

  .figures-property > * {
    grid-column: span 3;
    grid-row: span 3;
  
    /* figures 1-3 */
    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
      grid-row: span 4;
      grid-column: span 4;
    }
  }
}

@media print {
  .figures-property {
    grid-auto-rows: 1cm;
  }
}


/*  Component - Property Figures -
    Figure
    ============================= */
.figures-property figure {
  margin: 0;
  padding: 0;
}


/*  Component - Property Figures -
    Figure - Image
    ============================= */
.figures-property figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/*  Component - Property Figures -
    Figure - Caption
    ============================= */
.figures-property figure figcaption {
  display: none;
}






/*  ----------------- LAYOUTS -----------------  */

/*  Layout - Header Main
    ============================= */
#header-main {
  width: 100%;
  margin: 0 auto; 
  padding: 0;
}

@media screen {
  #header-main {
    display: flex;
    flex-direction: column-reverse;

    box-shadow: hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .1)) 0 min(0.25rem, 1vw) min(1.875rem, 7.5vw);
  }
}

@media print {
  #header-main {
    margin-bottom: .5cm;
  }
}


/*  Layout - Header Main - Anchor
    ============================= */
@media print {
  #header-main a::after {
    content: '';
  }
}


/*  Layout - Header Main -
    Branding
    ============================= */
#header-main .branding {
  text-align: center;
}

@media screen {
  #header-main .branding {
    padding: var(--base-size);
    
  }
}


/*  Layout - Header Main -
    Branding - Logo
    ============================= */
.branding .logo {
  display: inline-block;
  position: relative;

  width: min(25em, 65vw);
  height: min(4em, 10vw);
}

@media print {
  #header-main .branding .logo {
    width: 8cm;
  }
}


/*  Component - Branding - Logo -
    Image replacement
    ============================= */
@media screen {
  /* Change logo  color using mask */
  .branding .logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: hsl(var(--color-secondary-highest-contrast));
    mask-image: var(--logo-image), linear-gradient(transparent, transparent);
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
  }
}


/*  Component - Branding - Logo -
    Image
    ============================= */
.branding .logo img {
  width: 100%;
  height: 100%;
}

@media screen {
  /* Logo image replacement mask displayed instead of image */
  .branding .logo img {
    display: none;
  }
}


/*  Layout - Header Main - Main
    Navigation
    ============================= */
#header-main .nav-main {
  --icon-show-menu-width: max(1em, var(--touch-target-min-size));
  --icon-show-menu-height: max(1em, var(--touch-target-min-size));
}

@media screen {
  #header-main .nav-main {
    position: relative;
    background-color: hsl(var(--color-secondary-low-contrast));
  }
}

@media screen and (max-width: 47.98em) {
  /* Maximum menu container height with scrolling for overflow */
  #header-main .nav-main {
    max-height: 50svh;
    overflow: auto;
  }
}


/*  Layout - Header Main - Main
    Navigation - List
    ============================= */
@media screen {
  #header-main .nav-main .nav-main_links {
    justify-content: center;

    a {
      display: inline-block;
      color: hsl(var(--color-secondary-highest-contrast));
      font-family: var(--text-font-stack);
      font-size: .8em;
      text-transform: capitalize;
      transition-property: color, border-color;

      border-width: 0 0 .125em 0;
      border-style: solid;
      border-radius: .25em;
      border-color: transparent;
    }

    &:hover,
    &:focus-within {
      a {
        color: hsl(var(--color-secondary-medium-contrast));

        &:hover,
        &:active,
        &:focus {
          color: hsl(var(--color-secondary-highest-contrast));
          border-color: currentColor;
        }
      }
    }
  }
}

@media screen and (max-width: 47.98em) {
  /* Hide menu list of links when show/hide menu checkbox is not checked */
  #header-main #nav-main_menu-checkbox:not(:checked) ~ .nav-main_links {
    display: none;
  }

  /* Show menu list of links when show/hide menu checkbox is checked */
  #header-main #nav-main_menu-checkbox:checked ~ .nav-main_links {
    display: flex;
    margin-top: .5em;
    row-gap: .5em;
  }
}


/*  Layout - Header Main - Main
    Navigation - List - Items
    ============================= */
@media screen and (max-width: 47.98em) {
  #header-main .nav-main .nav-main_links li {
    flex: 1 0 100%;
    text-align: center;
  }
}


/*  Layout - Header Main - Main
    Navigation - List - Items -
    Anchors
    ============================= */
/* Indicate current page in header main menu */
#page-home #header-main .nav-main .nav-main_links > li a[href="/index.html"],
#page-office-info #header-main .nav-main .nav-main_links > li a[href="/officeinformation.html"],
#page-neighborhoods #header-main .nav-main .nav-main_links > li a[href="/neighborhoods.html"],
#page-current-listings #header-main .nav-main .nav-main_links > li a[href="/properties/index.html"],
#page-property #header-main .nav-main .nav-main_links > li a[href="/properties/index.html"],
#page-recently-sold #header-main .nav-main .nav-main_links > li a[href="/properties/sold.html"] {
  border-color: currentColor;
}


/*  Layout - Header Main - Main
    Navigation - Menu Checkbox
    ============================= */
#header-main #nav-main_menu-checkbox {
  display: none;
}

@media screen and (max-width: 47.98em) {
  #header-main #nav-main_menu-checkbox {
    display: block;
    width: var(--icon-show-menu-width);
    height: var(--icon-show-menu-height);

    position: absolute;
    top: var(--size-nav-main-padding);
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    opacity: 0;

    cursor: pointer;
    margin: 0 auto;
  }
}


/*  Layout - Header Main - Main
    Navigation - Menu Checkbox Label
    ============================= */
#header-main .nav-main_menu-checkbox-label {
  display: none;
}

@media screen and (max-width: 47.98em) {
  #header-main .nav-main_menu-checkbox-label {
    display: block;
    margin: 0 auto;

    position: relative;

    width: var(--icon-show-menu-width);
    height: var(--icon-show-menu-height);

    color: hsl(var(--color-secondary-highest-contrast));

    cursor: pointer;
  }

  /* Focus outline displayed when show/hide menu checkbox is focused */
  #header-main #nav-main_menu-checkbox:focus ~ .nav-main_menu-checkbox-label {
    outline: .0625em solid;
    border-radius: .25em;
  }
}


/*  Layout - Header Main - Main
    Navigation - Menu Checkbox 
    Label - Show/Hide Menu Icon
    ============================= */
@media screen and (max-width: 47.98em) {
  /* 'Burger' icon/button displayed when show/hide menu checkbox is unchecked */
  #header-main .nav-main_menu-checkbox-label:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: currentColor;
    mask-image: var(--icon-burger-menu), linear-gradient(transparent, transparent);
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
  }

  /* Close icon/button displayed when show/hide menu checkbox is checked */
  #header-main #nav-main_menu-checkbox:checked ~ .nav-main_menu-checkbox-label::after {
    mask-image: var(--icon-close-x), linear-gradient(transparent, transparent);
  }
}




/*  Layout - Footer Main
    ============================= */
@media screen {
  #footer-main {
    --footer-main-padding: calc(2 * var(--base-size));
    
    font-family: var(--headers-font-stack);
    font-size: 1.2em;
    color: hsl(var(--color-secondary-highest-contrast));
    display: flex;
    flex-direction: column;

    padding: var(--footer-main-padding);
  
    /* Top margin set to auto to push the footer to the bottom of its container.
       Container app-container implemented with flex box to allow for this implementation. */
    margin-top: auto;

    background-color: hsl(var(--color-secondary-lowest-contrast));
  }
}

@media screen and (min-width: 64em) {
  #footer-main {
    display: grid;
    grid-template-rows: repeat(3, min-content);
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
  }

  #footer-main > *:nth-child(2) {
    grid-row: 1 / span 1;
    grid-column: 1 / span 5;
  }

  #footer-main > *:nth-child(3) {
    grid-row: 2 / span 1;
    grid-column: 1 / span 3;
    align-self: center;
  }

  #footer-main > *:nth-child(4) {
    grid-row: 2 / span 1;
    grid-column: 4 / span 2;
    align-self: center;
  }

  #footer-main > *:nth-child(5) {
    grid-row: 3 / span 1;
    grid-column: 1 / span 5;
  }
}

@media print {
  #footer-main {
    break-inside: avoid;
  }
}


/*  Layout - Footer Main - Heading
    ============================= */
@media screen {
  #footer-main h2 {
    display: none;
  }
}


/*  Layout - Footer Main - Anchors
    ============================= */
#footer-main a:not(.contact-callout a) {
  text-underline-offset: unset;
  font-weight: normal;
}

@media screen {
  #footer-main a:not(.contact-callout a) {
    color: hsl(var(--color-secondary-highest-contrast));
  }
}

@media print {
  #footer-main a {
    text-decoration: none;
    font-weight: normal;  /* Included so contact-callout anchors are normal weight. */
  }

  #footer-main a::after {
    content: '';
  }
}


/*  Layout - Footer Main - Contact
    ============================= */
@media screen {
  #footer-main .contact {
    padding: calc(2 * var(--footer-main-padding));
    text-align: center;
  }
}

@media screen and (min-width: 64em) {
  #footer-main .contact {
    text-align: left;
  }
}


/*  Layout - Footer Main - Contact -
    Heading
    ============================= */
@media screen {
  #footer-main .contact h3 {
    display: none;
  }
}

/*  Layout - Footer Main - Contact -
    Business Contact - Address - Name
    ============================= */
@media screen {
  #footer-main .contact .business-contact__address__name {
    display: block;
    font-size: larger;
    font-weight: normal;
    text-transform: uppercase;
  }
}


/*  Layout - Footer Main - Contact
    Callout
    ============================= */
@media screen {
  #footer-main .contact-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: calc(2 * var(--footer-main-padding));
    margin-bottom: var(--footer-main-padding);
    position: relative;
    z-index: 0;
  }
}


/*  Layout - Footer Main - Contact
    Callout - Background
    ============================= */
@media screen {
  #footer-main .contact-callout::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--footer-main-padding));
    left: calc(-1 * var(--footer-main-padding));
    z-index: -1;
    width: calc(100% + (2 * var(--footer-main-padding)));
    height: calc(100% + (2 * var(--footer-main-padding)));
    background-color: hsl(var(--color-primary-highest-contrast));
  }
}


/*  Layout - Footer Main - Contact
    Callout - Copy
    ============================= */
@media screen {
  #footer-main .contact-callout p {
    color: hsl(var(--color-primary-lowest-contrast));
    
    font-size: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
    line-height: clamp(1.5rem, 0.786rem + 1.905vw, 2.5rem);
    font-weight: normal;
    letter-spacing: 0;
    text-align: center;

    margin: 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: min-content min-content;
    row-gap: 1em;
  }
}

@media screen and (min-width: 80em) {
  #footer-main .contact-callout p {
    width: 50%;
  }
}
  

/*  Layout - Footer Main - Contact
    Callout - Copy - Anchor Primary
    ============================= */
@media screen {
  #footer-main .contact-callout p .anchor-primary {
    border: .0625em solid currentColor;
    box-shadow: none;
    width: max-content;
    justify-self: center;
  }
}


/*  Layout - Footer Main - 
    Navigation Main
    ============================= */
@media screen {
  #footer-main .nav-main {
    padding: calc(2 * var(--footer-main-padding));
  }
}


/*  Layout - Footer Main - 
    Navigation Main - List
    ============================= */
@media screen {
  #footer-main .nav-main ul {
    gap: 1em;
    padding: 1.5em 0;
    border-top: .0625em solid hsl(var(--color-secondary-highest-contrast));
    border-bottom: .0625em solid hsl(var(--color-secondary-highest-contrast));
  
    &:hover,
    &:focus-within {
      a 
      {
        color: hsl(var(--color-secondary-medium-contrast));

        &:hover,
        &:active,
        &:focus
        {
          color: hsl(var(--color-secondary-highest-contrast));
        }
      }
    }
  }
}

@media screen and (min-width: 64em) {
  #footer-main .nav-main ul {
    padding: 0 1.5em;
    border-top: none;
    border-bottom: none;
    border-left: .0625em solid hsl(var(--color-secondary-highest-contrast));
  }
}


/*  Layout - Footer Main - 
    Navigation Main - List - List
    Item
    ============================= */
@media screen {
  #footer-main .nav-main ul li {
    flex: 1 0 100%;
    text-align: center;
  }
}

@media screen and (min-width: 64em) {
  #footer-main .nav-main ul li {
    text-align: left;
  }
}


/*  Layout - Footer Main - Copyright
    ============================= */
#footer-main .copyright {
  font-size: .85em;
}

@media screen {
  #footer-main .copyright {
    margin-top: var(--footer-main-padding);
    text-align: center;
  }
}

@media print {
  #footer-main .copyright {
    margin-top: .5cm;
  }
}






/*  ----------------- PAGES -----------------  */


/*  --------- HOME ---------  */

/*  Page - Home - Heading
    ============================= */
@media screen and (min-width: 64em) and (min-height: 40em) {
  #page-home h1 {
    float: left;
    width: 30%;
    margin-right: calc(4 * var(--base-size));
    margin-bottom: calc(4 * var(--base-size));
  }
}


/*  Page - Home - Intro - Heading
    ============================= */
#page-home .intro h2 {
  display: none;
}


/*  Page - Home - Current Properties
    ============================= */
@media screen {
  #page-home .properties-current {
    clear: left;
  }
}


/*  Page - Home - Current Properties
    Heading
    ============================= */
@media screen and (min-width: 64em) {
  #page-home .properties-current h2 {
    text-align: right;
  }

  #page-home .properties-current h2::after {
    left: auto;
    right: 0;
  }
}




/*  --------- OFFICE INFO ---------  */

/*  Page - Office Info - Main - 
    Contact - Heading
    ============================= */
#page-office-info main .contact h2 {
  display: none;
}


/*  Page - Office Info - Main - 
    Contact - Business Contact
    ============================= */
#page-office-info main .contact .business-contact {
  margin-top: var(--base-size);
  line-height: 1.5em;
}


/*  Page - Office Info - Main - 
    Contact - Business Contact - 
    Driving Directions Anchor
    ============================= */
#page-office-info .contact .business-contact .driving-directions-anchor {
  margin-top: 1em;
}

@media print {
  #page-office-info .contact .business-contact .driving-directions-anchor {
    display: none;
  }
}


/*  Page - Office Info - Associates
    List
    ============================= */
#page-office-info .associates ul {
  list-style-type: none;
  margin: 0;
  padding-inline-start: 0;
}




/*  --------- NEIGHBORHOODS ---------  */

/*  Page - Neighborhoods
    ============================= */
@media screen and (min-width: 64em) and (min-height: 40em) {
  #page-neighborhoods main {
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 25em 1fr;
    column-gap: calc(4 * var(--base-size));
  }

  #page-neighborhoods main > :nth-child(1) {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
  }

  #page-neighborhoods main > :nth-child(2) {
    display: contents;
  }

  #page-neighborhoods main > :nth-child(2) > :nth-child(2) {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
  }

  #page-neighborhoods main > :nth-child(2) > :nth-child(3) {
    grid-row: 1 / span 2;
    grid-column: 2 / span 1;
    padding-top: 0;
    align-self: start;
  } 
}


/*  Page - Neighborhoods - 
    Neighborhoods Serviced
    ============================= */
@media screen {
  #page-neighborhoods .neighborhoods-serviced {
    padding-top: var(--base-size);
  }
}

/*  Page - Neighborhoods - 
    Neighborhoods Serviced - Heading
    ============================= */
#page-neighborhoods .neighborhoods-serviced h2 {
  display: none;
}


/*  Page - Neighborhoods - 
    Neighborhoods Serviced - 
    Neighborhoods List
    ============================= */
@media screen {
  #page-neighborhoods .neighborhoods-serviced ul {
    list-style-type: none;
    padding-inline-start: 0;
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));

    gap: calc(2 * var(--base-size));
    margin: 0;
  }
}


/*  Page - Neighborhoods - 
    Neighborhoods Serviced - 
    Neighborhoods List - List Item -
    Anchor Primary
    ============================= */
@media screen {
  #page-neighborhoods .neighborhoods-serviced ul li a.anchor-primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: min-content;
    justify-content: center;

    /* Add space for external link icon, and hide overflow created by icon */
    /* padding-right: var(--icon-width);
    overflow: hidden; */
    
    font-variant: small-caps;
    text-transform: none;

    box-shadow: hsl(var(--shadow-color) / calc(var(--shadow-intensity) + .5)) 0px min(1.5625rem, 6vw) min(1.25rem, 5vw) max(-1.25rem, -5vw);

    &:link,
    &:visited {
      background-color: hsl(var(--color-secondary-highest-contrast));
      color: hsl(var(--color-secondary-lowest-contrast));
    }

    &:hover,
    &:active,
    &:focus {
      background-color: hsl(var(--color-secondary-lowest-contrast));
      color: hsl(var(--color-secondary-highest-contrast));
    }
  }
}


/*  Page - Neighborhoods - 
    Neighborhoods Serviced - 
    Neighborhoods List - List Item -
    Anchor Primary - URL
    ============================= */
@media screen {
  #page-neighborhoods .neighborhoods-serviced ul a.anchor-primary::before {
    content: attr(href)"\00a0";  /* include nbsp for screen reader link display */
    font-family: var(--text-font-stack);
    font-size: .7em;
    letter-spacing: normal;
    font-variant: normal;
    text-transform: lowercase;
    font-style: italic;

    grid-row: 2;
  }
}


/*  Page - Neighborhoods - 
    Neighborhoods Serviced - 
    Neighborhoods List - List Item -
    Anchor Primary - External Link 
    Icon
    ============================= */
@media screen {
  /* #page-neighborhoods .neighborhoods-serviced ul a.anchor-primary::after {
    position: absolute;
    top: 0;
    right: 0;

    width: var(--icon-width);
    height: var(--icon-height);

    margin: 0;
    padding: 0;
  } */
}






/*  --------- PROPERTY ---------  */

/*  Page - Properties
    ============================= */
#page-property main h2 {
  display: none;
}

#page-property .property-overview__type {
  font-family: var(--text-font-stack);
  font-size: larger;
  letter-spacing: 0;
  color: hsl(var(--color-secondary-highest-contrast));
  text-transform: uppercase;
}

#page-property .property-overview__status {
  margin: var(--base-size) 0 0 0;
  font-family: var(--text-font-stack);
  font-size: .9em;
  font-weight: 600;
  text-transform: uppercase;
}

#page-property .property-description {
  margin: var(--base-size) 0;
}


@media screen {
  #page-property .property-overview {
    background-color: hsl(var(--color-secondary-lowest-contrast));
    padding: var(--base-size);
  }

  #page-property .property-description {
    padding-left: var(--base-size);
    padding-right: var(--base-size);
  }
}



/*  ----------------- SPECIAL FUNCTIONALITY -----------------  */

/*  Visually Hidden
    ============================= */
#header-main .nav-main_menu-checkbox-label__text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}