/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Root size that all rem values follow: 1rem = 18px at default browser
     settings. A percentage (not px) so the visitor's font-size preference
     still scales the whole site. */
  font-size: 112.5%;
}
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}
body {
  margin: 0;
}
h1 {
  font-size: 2rem;
  margin: 0.67em 0;
}
#header h1 {
  margin: 0 0;
}
h2 {
  font-size: 1.5rem;
  margin: 0.83em 0;
}
h3 {
  font-size: 1.17rem;
  margin: 1em 0;
}
h4 {
  font-size: 1rem;
  margin: 1.33em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
nav ul,
nav ol {
  list-style: none;
  padding: 0;
}
img {
  border: 0;
}
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}
button,
input {
  line-height: normal;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
button[disabled],
input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
* {
  margin: 0;
  padding: 0;
}
body {
  font-family:
    Georgia, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Baskerville,
    serif;
  /* 1rem matches the root size: 18px at default browser settings. */
  font-size: 1rem;
  line-height: 1.8;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: disc;
  margin-left: 0.55rem;
}
a {
  text-decoration: none;
}
a:hover,
a:active,
a:focus {
  text-decoration: underline;
}
em {
  font-style: italic;
}
p,
li,
dl,
dt {
  margin: 0.35rem 0;
  line-height: 1.8;
}
dd {
  margin-left: 2.5rem;
}
h1 {
  font-size: 1.6rem;
}
h2 {
  font-size: 1.45rem;
}
h3 {
  font-size: 1.3rem;
}
h4 {
  font-size: 1.2rem;
}
#site-name,
#site-slogan {
  font-family:
    Georgia, "Palatino Linotype", "Book Antiqua", "URW Palladio L", Baskerville,
    serif;
}
#page-wrapper {
  margin: 0;
  padding: 0;
}
#page {
  padding: 0;
}
#main-wrapper {
  width: 100%;
  position: relative;
}
#content {
  /* Content column: centered with breathing room on each side, full
     width on small screens. */
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.node {
  border-radius: 8px;
}
#header {
  padding: 0px;
  display: block;
  border-style: solid;
  border-width: 0 0 1px 0;
  overflow: hidden;
}
#header-watermark {
  margin: 0;
  /* Soft white glow over the header's linear gradient. Replaces the old
     pat-6.png watermark image, saving a request. */
  background-image: radial-gradient(
    ellipse 55% 130% at 50% 30%,
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 70%
  );
  background-repeat: no-repeat;
  background-position: top center;
  /* Mobile base: the search box wraps onto its own full-width row beneath
     the site name and slogan. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1.25rem;
}
div#site_logo {
  padding-right: 1.5rem;
}
#name-and-slogan {
  padding: 0;
}
#site-name a,
#header h1 a,
#header h1 a:link,
#header h1 a:visited {
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  font-size: 1.5rem;
}
#site-slogan {
  font-weight: normal;
  font-style: italic;
  margin-bottom: 0.3rem;
  margin-top: 0.55rem;
  font-size: 0.85rem;
}
.page-title {
  /* Full-width bar; text sits a comfortable margin from the edges,
     matching the nav above it. */
  padding: 0.55rem 2rem;
  font-size: 1.45rem;
  margin: 0 0 0.55rem 0;
}
@media only screen and (min-width: 768px) {
  .page-title {
    /* A sliver of air so the nav doesn't look welded to the title bar. */
    margin-top: 2px;
  }
}
#content .block h2 {
  padding: 0.3rem;
  font-size: 1.35rem;
}
.node {
  margin: 0;
  padding: 0.85rem 0.65rem 0.55rem 0.8rem;
  margin-bottom: 0.55rem;
  border-style: solid;
  border-width: 1px;
}
#content .node h2 {
  padding: 0px;
  background: transparent;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.5rem;
}
.node ul,
.node ol {
  padding-left: 1rem;
}
/* ID selector so this beats the generic input.form-text width below. */
#header-searchbox input[type="search"] {
  height: 24px;
  /* Mobile base: fill the search box's full-width row. */
  width: 100%;
  color: #555555;
  margin: 0px;
  border: solid 1px #aaa;
  border-bottom-color: #ddd;
  border-right-color: #ddd;
  margin-top: 1px;
  background: #fff url(/themes/custom/mayo/images/search.png) no-repeat 2px
    center;
  padding: 0px 4px 0px 4px;
  padding-left: 24px;
  box-sizing: border-box;
  max-width: 100%;
}
#header-searchbox {
  /* Mobile base: own row beneath the site name, full width. */
  width: 100%;
  padding: 0.75rem 0 0 0;
}
@media only screen and (min-width: 768px) {
  /* Tablet and up: everything on one row, search pinned to the far end. */
  #header-watermark {
    flex-wrap: nowrap;
    padding: 2rem 2.5rem;
  }
  #site-name a,
  #header h1 a,
  #header h1 a:link,
  #header h1 a:visited {
    font-size: 2.25rem;
  }
  #site-slogan {
    font-size: 1.4rem;
  }
  #header-searchbox {
    width: auto;
    margin-left: auto;
    align-self: flex-start;
    padding: 8px;
  }
  #header-searchbox input[type="search"] {
    width: 13rem;
  }
}
.pushbutton,
button,
.form-submit {
  margin: 2px;
  padding: 2px 10px;
  color: #555555;
  cursor: pointer;
  font-size: 1rem;
  border: solid 1px #888888;
  background: #fff url(/themes/custom/mayo/images/button.gif) repeat-x center;
}
.pushbutton:hover,
button:hover,
.form-submit:hover {
  color: #111111;
  border: solid 1px #666666;
  background: #fff url(/themes/custom/mayo/images/button-o.gif) repeat-x center;
}
label {
  display: block;
  font-weight: bold;
}
#content {
  margin: 0;
  width: 100%;
}
#content img {
  max-width: 100%;
  height: auto;
}
input.form-text {
  /* Mobile base: nearly full width so fields are easy to tap. */
  width: 95%;
}
@media only screen and (min-width: 768px) {
  input.form-text {
    width: 75%;
  }
}
/* Nav and page title band, sitting between the header banner and the
   main content. */
#navband {
  margin-top: 1rem;
}
/* Mobile base: hamburger toggle button. It starts life with the hidden
   attribute; JS removes that, so without JavaScript there is no button
   and the menu stays open as a plain list. */
.nav-toggle {
  display: flex;
  align-items: center;
  /* Big enough to tap comfortably (Apple's 44px guideline). */
  min-height: 44px;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: #fefefe;
  background: #a46b34;
}
/* The hamburger icon: the span is the middle bar, its two pseudo-
   elements are the top and bottom bars. */
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #fefefe;
}
.nav-toggle-icon {
  position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-icon::before {
  top: -7px;
}
.nav-toggle-icon::after {
  top: 7px;
}
/* When JS is running, the menu is collapsible on mobile: closed unless
   the button's aria-expanded says otherwise. Without JS the button stays
   hidden and .js-nav is never added, so the menu stays open. On desktop
   these are overridden by the min-width: 901px rules below, which always
   show the menu. */
.js-nav .menu-bart {
  display: none;
}
.js-nav .nav-toggle[aria-expanded="true"] + .menu-bart {
  display: block;
}
#navband .menu-bart {
  font-size: 1rem;
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}
#navband .menu-item {
  margin: 0;
  padding: 0;
}
#navband .menu-bart a {
  color: #fefefe;
  background: #a46b34;
  display: block;
  text-decoration: none;
  text-shadow: 0 1px #eee;
  /* Mobile base: square edges; the radius arrives with the tab look
     at the desktop breakpoint below. */
  border-radius: 0;
  margin: 0.2rem 0;
  padding: 0.9em 0 0.9em 0.55rem;
  transition: background-color 0.2s ease-in-out;
}
#navband .menu-bart a:hover,
#navband .menu-bart a:focus {
  background: #7d5027;
}
#navband .menu-bart a:active {
  background: #6b4520;
}
@media all and (min-width: 901px) {
  /* Desktop: nav sits in a row, margin matching the page title text. */
  #navband nav {
    padding: 0 2rem;
  }
  /* The hamburger is a mobile-only control; the menu is always visible
     on desktop. */
  .nav-toggle {
    display: none;
  }
  #navband .menu-bart {
    /* Items in a row on desktop. */
    display: flex;
  }
  #navband .menu-item {
    margin: 0 2px 0 0;
  }
  #navband .menu-item:first-child {
    /* Optically line the first item up with the page title text below. */
    margin-left: -1em;
  }
  #navband .menu-bart a {
    padding: 0.7em 1em;
    margin-bottom: 0;
    /* Tabs: rounded on top, flush with the title bar on the bottom. */
    border-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 1.1rem;
  }
}
.menu-item {
  padding-top: 0.2em;
  margin: 0;
}
form {
  margin: 0;
  padding: 0;
}
label {
  display: table;
  font-weight: bold;
}
label[for] {
  cursor: pointer;
}
input,
textarea,
select {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
}
input {
  margin: 2px 0;
  padding: 4px;
  max-width: 100%;
  box-sizing: border-box;
}
input,
textarea {
  /* Mobile base: 1rem (18px here) so iOS Safari doesn't zoom in on focus. */
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  input,
  textarea {
    font-size: 0.9rem;
  }
}
textarea {
  line-height: 1.5;
}
textarea.form-textarea,
select.form-select {
  padding: 4px;
}
input.form-text,
input.form-tel,
input.form-email,
input.form-url,
input.form-search,
input.form-file,
input.form-number,
input.form-color,
textarea.form-textarea,
select.form-select {
  border: 1px solid #ccc;
  color: #3b3b3b;
}
input.form-submit:hover,
input.form-submit:focus {
  background: #dedede;
}
.form-item label {
  font-size: 1rem;
}
.form-actions {
  padding-top: 10px;
}
/* Mobile base: full-width fields are easier to tap. The 75% width for
   roomier screens arrives at the tablet breakpoint below. */
.contact-form #edit-name,
.contact-form #edit-mail,
.contact-form #edit-subject {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
}
.contact-form #edit-message {
  width: 100%;
  /* So its 75% desktop width matches the text fields exactly, padding
     included. */
  box-sizing: border-box;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
@media only screen and (min-width: 768px) {
  .contact-form #edit-name,
  .contact-form #edit-mail,
  .contact-form #edit-subject,
  .contact-form #edit-message {
    width: 75%;
  }
}
#edit-actions input {
  margin-right: 0.6em;
}
.form-textarea-wrapper textarea {
  display: block;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
body,
#page-wrapper {
  background-color: #ffffff;
  color: #3b3b3b;
}
body.overlay {
  background-color: #ffffff;
  color: #3b3b3b;
}
#page,
.menu-item--active-trail a {
  background-color: #ffffff;
}
#header {
  background-color: #536d88;
  background-image: linear-gradient(to right, #536d88, #334150);
  border-color: #ffffff;
}
a.visited,
a {
  color: #b52e1c;
}
a:hover,
a:focus {
  color: #ac2610;
}
a:active {
  color: #ac2610;
}
.node {
  background-color: #ffffff;
  border-color: #ffffff;
}
.node h2 {
  border-color: #cccccc;
}
.page-title {
  background-color: #a46b34;
  color: #f0f0f0;
}
#content .node h2 {
  background-color: transparent;
  color: #3b3b3b;
}
#header #name-and-slogan,
#header #name-and-slogan a {
  color: #ffffff;
}

/* Modern layout helpers replacing the old layout <table>s.

   Mobile base: the row stacks vertically, and the text always comes
   first regardless of where the media sits in the source. On desktop
   the source order decides left/right, so a page that wants its image
   on the left (forsale) puts the media div first, and one that wants
   it on the right (ecovillages) puts it second. */
.layout-row {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.layout-row__media {
  /* On mobile the media drops below the text. */
  order: 2;
  display: flex;
  flex-direction: column;
}

.layout-row__media img {
  display: block;
  margin: 0 0 0.5em;
  max-width: 100%;
  height: auto;
}

.layout-row__body {
  /* On mobile the text stays on top. */
  order: 1;
  min-width: 0;
}

@media all and (min-width: 901px) {
  /* Desktop: side by side, in whatever order the source has them. */
  .layout-row {
    flex-direction: row;
    align-items: flex-start;
  }

  .layout-row__media {
    order: 0;
    flex: 0 0 auto;
  }

  .layout-row__body {
    order: 0;
    flex: 1 1 0;
  }
}

.layout-row__media.media-grid {
  flex-direction: row;
}

.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
  align-items: flex-start;
}

/* Spec lists (mosaic/35): bold the term so label and value read clearly. */
dt {
  font-weight: bold;
}

/* Image alignment classes, so content can use Markdown images with
   {.align-right} etc. instead of raw <img> tags. Mirrors what the old
   align/hspace attributes did.

   Below the desktop breakpoint: no floating. A floated image squeezes
   the text beside it into a thin column that is painful to read, so the
   image sits on its own line, centered, and never wider than the
   screen. The float arrives at the same 901px breakpoint as the
   desktop nav, keeping the two in sync. */
.align-right,
.align-left {
  display: block;
  float: none;
  margin: 0 auto 1em;
  max-width: 100%;
  height: auto;
}

.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media all and (min-width: 901px) {
  /* Only float images once the desktop layout kicks in: if the viewport
     is narrow enough to show the hamburger menu, there isn't room for
     text to wrap comfortably around an image. */
  .align-right {
    float: right;
    margin: 0 0 1em 1em;
  }

  .align-left {
    float: left;
    margin: 0 1em 1em 0;
  }
}