/*
 * Emeraude chrome: header, navigation rail, mobile drawer, footer.
 */

/* ---- Header ---------------------------------------------------------- */

.em-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  padding: 18px var(--em-gutter);
  background: var(--em-white);
  border-bottom: 1px solid var(--em-rule);
}

.em-header__inner {
  max-width: var(--em-max);
  margin: 0 auto;
  /* display: grid; */
  /* grid-template-columns: 1fr auto 1fr; */
  align-items: center;
  transition: margin-left var(--em-rail-speed) var(--em-ease);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.em-menu-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: start;
  background: none;
  border: none;
  color: var(--em-ink);
  cursor: pointer;
  padding: 8px 0;
  font-size: var(--em-size-small);
  font-weight: 600;
  letter-spacing: var(--em-track-label);
  text-transform: uppercase;
  transition: color .2s;
  width:146px;
}

.em-menu-toggle:hover { color: var(--em-link); }

.em-menu-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.em-menu-toggle__bars span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

.em-header__logo {
  justify-self: center;
  display: flex;
  align-items: center;
}

.em-header__logo img {
  /* height: 68px; */
  height: 88px;
  width: auto;
  display: block;
}

.em-header__cta {
  justify-self: end;
  white-space: nowrap;
  font-size: var(--em-size-small);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--em-white);
  background: var(--em-button);
  padding: 13px 24px;
  border-radius: var(--em-radius-sm);
  transition: background .2s;
}

.em-header__cta:hover {
  background: var(--em-button-hover);
  color: var(--em-white);
}

/* The header is fixed, so the page needs its height back or every page's
   first element sits underneath it. The mockup does this with a spacer div;
   padding on main is the same thing without an empty element. */
.em-main { padding-top: var(--em-header-h); }

/* ---- Navigation rail -------------------------------------------------
   Opened by the MENU control. Pushes page content right at wide widths,
   overlays it below 1100px, per PROJECT-BRIEF.md section 8.1. */

.em-rail {
  position: fixed;
  left: 0;
  top: var(--em-header-h);
  bottom: 0;
  width: var(--em-rail-w);
  z-index: 5;
  background: var(--em-white);
  border-right: 1px solid var(--em-rule);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--em-rail-speed) var(--em-ease), visibility 0s linear var(--em-rail-speed);
}

/* "pinned" is the rail's resting state on every page but the front one, set in
   header.php. Above 1100px it draws the same rail the MENU control opens, so
   the interior pages carry their navigation at all times. It is put back below
   1100px, where the rail stops pushing the content across: see the two
   breakpoints further down. */
.em-rail[data-open='true'],
.em-rail[data-open='pinned'] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--em-rail-speed) var(--em-ease), visibility 0s;
}

body[data-rail='open'] .em-shell,
body[data-rail='pinned'] .em-shell { padding-left: var(--em-rail-w); }
body[data-rail='open'] header.em-header,
body[data-rail='pinned'] header.em-header {padding-left: calc(var(--em-rail-w) + var(--em-gutter)); }

/* .em-rail[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--em-rail-speed) var(--em-ease), visibility 0s;
}

body[data-rail='open'] .em-shell { padding-left: var(--em-rail-w); }
@media(min-width:921px){
  body[data-rail='open'] header.em-header {padding-left: calc(var(--em-rail-w) + var(--em-gutter)); }
} */


.em-rail__search { padding: 0 22px 18px; }

.em-rail__search-field {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--em-panel);
  border: 1px solid rgba(26, 31, 28, .12);
  border-radius: var(--em-radius-sm);
  padding: 11px 14px;
}

.em-rail__search-field svg {
  flex: none;
  color: var(--em-muted);
}

.em-rail__search-field input {
  background: none;
  border: none;
  outline: none;
  color: var(--em-ink);
  font-family: var(--em-font);
  font-size: 13.5px;
  width: 100%;
}

.em-rail__search-field:focus-within {
  outline: 2px solid var(--em-accent);
  outline-offset: 0;
}

.em-rail__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px;
  margin: 0;
  list-style: none;
}

/* The category line is a link plus a chevron button side by side. The wash,
   the radius and the current-page marker belong to the row, so they cover the
   whole line the way they did when the chevron was still inside the link. */
.em-rail__row {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--em-radius-sm);
  transition: background .15s;
}

.em-rail__row:hover {
  background: var(--em-accent-wash);
}

.em-rail__row.is-current {
  background: rgba(95, 142, 46, 0.1);
}

.em-rail__row.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--em-accent);
}

.em-rail__cat {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
  padding: 12px 6px 12px 14px;
  border: none;
  background: none;
  color: var(--em-ink);
  font-family: var(--em-font);
  font-size: var(--em-size-nav);
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: color .15s;
}

.em-rail__row.is-current .em-rail__cat {
  font-weight: 600;
  color: var(--em-link);
}

.em-rail__cat-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.em-rail__cat-icon {
  width: 26px;
  height: 26px;
  flex: none;
}

/* The chevron is its own control beside the link, so the link stays a plain
   destination. On a desktop it points at that destination and never turns:
   the rail is a flat list of pages, not an accordion, and nav.js takes the
   button out of the tab order there. */
.em-rail__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 12px 14px 12px 8px;
  border: none;
  background: none;
  color: var(--em-muted);
  cursor: pointer;
}

/* The span the categories with nothing to open get is decoration only. */
span.em-rail__chev { pointer-events: none; }

.em-rail__row.is-current .em-rail__chev { color: var(--em-accent); }

.em-rail__sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 8px 51px;
  margin: 0;
  list-style: none;
}

/* display:flex above out-specifies the user agent's [hidden] rule, so a search
   result list would never actually hide again without this. Same for any other
   element here given a display value alongside a hidden attribute. */
.em-rail__sub[hidden],
.em-rail__panel[hidden],
.em-rail__group[hidden],
[data-rail-item][hidden],
.em-rail__empty[hidden],
.em-rail__scrim[hidden] {
  display: none;
}

.em-rail__sub a {
  display: block;
  font-size: var(--em-size-small-plus);
  line-height: 1.4;
  color: var(--em-muted);
  padding: 5px 0;
}

.em-rail__sub a:hover { color: var(--em-link); }

/* The category's own line and its sections' lines belong to the phone drawer,
   where a category opens on them. The desktop rail shows the section names
   alone, under a search, exactly as before. */
.em-rail__desc,
.em-rail__item-desc { display: none; }

.em-rail__empty {
  padding: 18px 24px;
  font-size: var(--em-size-small-plus);
  line-height: 1.55;
  color: var(--em-muted);
}

.em-rail__empty strong {
  display: block;
  color: var(--em-ink);
  margin-bottom: 6px;
}

.em-rail__scrim {
  position: fixed;
  inset: 0;
  z-index: 67;
  background: rgba(26, 31, 28, .3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--em-rail-speed) var(--em-ease), visibility 0s linear var(--em-rail-speed);
}

/* ---- Footer ---------------------------------------------------------- */

.em-footer {
  background: var(--em-footer);
  color: var(--em-footer-text);
  padding: 88px var(--em-gutter) 44px;
}

.em-footer__inner {
  max-width: var(--em-max);
  margin: 0 auto;
}

.em-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 88px;
  flex-wrap: wrap;
}

.em-footer__brand { max-width: 320px; }

.em-footer__logo {
  display: inline-flex;
  align-items: center;
  background: var(--em-white);
  border-radius: var(--em-radius-card);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.em-footer__logo img {
  width: 158px;
  height: auto;
  display: block;
}

.em-footer__tagline {
  font-size: var(--em-size-small-plus);
  line-height: 1.6;
  color: rgba(242, 244, 243, .5);
  margin-bottom: 30px;
}

.em-footer__label {
  font-size: var(--em-size-eyebrow);
  font-weight: 600;
  letter-spacing: var(--em-track-label);
  text-transform: uppercase;
  color: var(--em-footer-dim);
  margin-bottom: 20px;
}

.em-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.em-footer__contact .em-footer__label { margin-bottom: 4px; }

.em-footer__contact address,
.em-footer__contact a {
  font-size: 13.5px;
  line-height: 1.55;
  font-style: normal;
  color: var(--em-footer-body);
}

.em-footer__contact a:hover { color: var(--em-chart-light); }

.em-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 56px;
}

.em-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.em-footer__col a { color: var(--em-footer-link); }
.em-footer__col a:hover { color: var(--em-chart-light); }

/* The phone footer's flat destination list. Hidden while the three columns
   are on, which is every width above the drawer breakpoint. */
.em-footer__nav { display: none; }

.em-footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.em-footer__nav a { color: var(--em-footer-link); }
.em-footer__nav a:hover { color: var(--em-chart-light); }

.em-footer__base {
  border-top: 1px solid var(--em-footer-rule);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: var(--em-size-small);
  color: var(--em-footer-dim);
  flex-wrap: wrap;
}

.em-footer__base p,
.em-footer__base span{
  margin-bottom: 0px;
  color:rgba(242, 244, 243, 0.4) !important;
}
.em-footer__base .em-placeholder-note { color: var(--em-footer-faint); }

.em-footer__base a{
  color:var(--em-footer-link) !important;
}
.em-footer__base a:hover{
  color:var(--em-chart-light) !important;
}

/* ---- Rail overlays instead of pushing below 1100px ------------------- */

@media (max-width: 1100px) {
  body[data-rail='open'] .em-shell { padding-left: 0; }
  body[data-rail='open'] .em-header__inner { margin-left: 0; }

  /* Below this width the rail overlays the page instead of pushing it, so the
     resting "pinned" state stands down and the rail is opened by the MENU
     control alone, as it is on the front page. nav.js reads the same width. */
  .em-rail[data-open='pinned'] {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--em-rail-speed) var(--em-ease), visibility 0s linear var(--em-rail-speed);
  }

  body[data-rail='pinned'] .em-shell { padding-left: 0; }
  body[data-rail='pinned'] header.em-header { padding-left: var(--em-gutter); }

  body[data-rail='open'] .em-rail__scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--em-rail-speed) var(--em-ease), visibility 0s;
  }
}

/* ---- Mobile, at and below the mockup's 920px breakpoint -------------- */

@media (max-width: 920px) {
  :root {
    --em-gutter: var(--em-gutter-mobile);
    /* --em-header-h: 72px; */
    --em-size-hero: 33px;
    --em-size-heading: 26px;
    --em-size-display: 34px;
    --em-size-page-hero: 25px;
    --em-size-page-heading: 27px;
    --em-size-cta-compact: 21px;
    --em-size-standfirst: 17px;
    --em-size-body: 15.5px;
    --em-size-lead: 17px;
    --wp--preset--font-size--lead: 17px;
    --em-size-card-lead: 17px;
  }

  .em-header { padding: 14px var(--em-gutter); }
  .em-header__logo img { height: 42px; }
  .em-header__cta { padding: 11px 16px; font-size: 10.5px; }
  .em-header__cta-tail { display: none; }
  .em-menu-toggle__label { display: none; }
}

/* Below 360px the header still has to stay on one line, or it grows taller
   than the offset reserved for it and the page slides underneath. */
@media (max-width: 359px) {
  .em-header__cta {
    padding: 10px 12px;
    font-size: 10px;
    letter-spacing: .12em;
  }
}

@media (max-width: 920px) {

  /* The mobile drawer, measured from the mockup's own "Mobile drawer"
     screen: full bleed, the mark and a close glyph on top, the search field,
     a ruled list of destinations, and the contact button on the foot. */

  .em-rail {
    width: 100%;
    top: 0;
    z-index: 100;
    padding: 0;
    border-right: none;
  }

  .em-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--em-gutter) 8px;
    border-bottom: none;
    margin-bottom: 0;
  }

  .em-rail__head-logo img { width: 112px; }

  .em-rail__close {
    background: none;
    border: none;
    color: var(--em-ink);
    font-size: 24px;
    font-weight: 300;
    line-height: .8;
    padding: 6px 0 6px 12px;
    cursor: pointer;
  }

  .em-rail__search { padding: 12px var(--em-gutter) 14px; }

  .em-rail__search-field { padding: 12px 14px; }

  .em-rail__search-field input { font-size: 14px; }

  .em-rail__list { padding: 0 var(--em-gutter) 20px; }

  /* Each destination is ruled off from the next, which is what separates the
     drawer from the desktop rail's unruled list. */
  .em-rail__group { border-bottom: 1px solid var(--em-rule); }

  .em-rail__cat {
    padding: 17px 8px 17px 2px;
    color: var(--em-ink);
    font-size: 16px;
  }

  /* The chevron's own tap target, which the thumb has to be able to hit
     without catching the link beside it: roughly 42 by 48, taken out of the
     empty run between the category name and the gutter. */
  .em-rail__chev { padding: 17px 4px 17px 24px; }

  /* The rows are uniform in the drawer: no wash, and no current-page rule
     down the side. aria-current still carries the meaning. */
  .em-rail__row { border-radius: 0; }

  .em-rail__row:hover { background: none; }

  .em-rail__row.is-current { background: none; }

  .em-rail__row.is-current .em-rail__cat { font-weight: 400; color: var(--em-ink); }

  .em-rail__row.is-current::before { display: none; }

  .em-rail__row.is-current .em-rail__chev { color: var(--em-muted); }

  .em-rail__cat-label { gap: 14px; }

  .em-rail__cat-icon { width: 28px; height: 28px; }

  /* An opened category, as the mockup draws it: the category line, then one
     card per section. */
  .em-rail__panel { padding: 2px 2px 18px; }

  .em-rail__desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--em-muted);
    margin-bottom: 12px;
  }

  .em-rail__sub {
    gap: 8px;
    padding: 0;
  }

  .em-rail__sub a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 15px;
    border: 1px solid var(--em-rule);
    border-radius: 6px;
    background: var(--em-panel);
    transition: border-color .15s, background .15s;
  }

  .em-rail__sub a:hover {
    border-color: rgba(95, 142, 46, .5);
    background: var(--em-white);
  }

  .em-rail__item-name {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--em-ink);
  }

  .em-rail__item-desc {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: var(--em-muted);
  }

  /* The chevron turns as the category opens, and the category's own name
     takes the accent while it is the one open. */
  .em-rail__chev { transition: transform .2s; }

  [data-rail-group][data-expanded='true'] .em-rail__chev {
    /* transform: rotate(90deg); */
  }
  [data-rail-group][data-expanded='true'] .em-rail__chev svg{
  transform: rotate(90deg);
  }
  [data-rail-group][data-expanded='true'] .em-rail__cat,
  [data-rail-group][data-expanded='true'] .em-rail__chev {
    color: var(--em-link);
  }

  [data-rail-group][data-expanded='true'] .em-rail__cat { font-weight: 600; }

  .em-rail__empty { padding: 18px 2px; }

  .em-rail__foot {
    display: block;
    padding: 14px var(--em-gutter) 22px;
    border-top: 1px solid var(--em-rule);
  }

  body[data-rail='open'] { overflow: hidden; }
  body[data-rail='open'] .em-shell { padding-left: 0; }
  body[data-rail='open'] .em-header__inner { margin-left: 0; }

  .em-section { padding-block: 60px; }

  /* The phone footer, as the mockup draws it: the mark, the tagline, the
     seven destinations, then the contact details behind a rule. The three
     columns of sub-sections are a desktop shape and are put away here. */
  .em-footer { padding: 52px var(--em-gutter) 30px; }
  .em-footer__top { gap: 0; margin-bottom: 0; }
  .em-footer__cols { display: none; }
  .em-footer__nav { display: block; margin-bottom: 26px; }

  .em-footer__logo {
    padding: 14px 16px;
    margin-bottom: 20px;
  }

  .em-footer__logo img { width: 124px; }

  .em-footer__tagline {
    font-size: 12.5px;
    margin-bottom: 26px;
  }

  .em-footer__brand { max-width: none; }

  .em-footer__contact {
    gap: 7px;
    padding-top: 22px;
    border-top: 1px solid var(--em-footer-rule);
  }

  /* The mockup drops the CONTACT label on a phone: the address speaks for
     itself under the rule. It stays in the markup for a screen reader. */
  .em-footer__contact .em-footer__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .em-footer__base {
    flex-direction: column;
    gap: 12px;
    border-top: none;
    padding-top: 20px;
  }
}

/* The rail head close control and the foot contact button only exist in the
   mobile drawer. The desktop rail is search plus the list, nothing else. */
.em-rail__head,
.em-rail__foot { display: none; }

.em-rail__head-logo img {
  height: auto;
  display: block;
}

.em-rail__cta {
  display: flex;
  justify-content: center;
  background: var(--em-button);
  color: var(--em-white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 0;
  border-radius: var(--em-radius-sm);
  transition: background .2s;
}

.em-rail__cta:hover {
  background: var(--em-button-hover);
  color: var(--em-white);
}

/* Both are restored here, after the rule above that hides them, because a
   media query adds no specificity: the later declaration is what wins. */
@media (max-width: 920px) {
  .em-rail__head { display: flex; }
  .em-rail__foot { display: block; }
}


.em-footer__base p,
.em-footer__base span{
    color:rgba(242, 244, 243, 0.4) !important;
    line-height: 1.1;
}
.em-footer__contact p,
.em-footer__contact a{
    line-height: 1.1;
}
.em-footer__links{
    line-height: 1.1;
}
.em-footer__label{
    color:rgba(242, 244, 243, 0.4);
    line-height: 1.1;
}
.admin-bar .em-rail .em-rail__search{
    margin-top:32px;
}
/* ---- Back to top -----------------------------------------------------
   The round control the mockup floats in the bottom right of every route.
   Every value measured from the bundle, which draws it identically at 1440
   and at 375.

   The resting state is the hidden one. nav.js adds em-top--on past 600px of
   scroll, which is the bundle's own threshold. */

.em-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  background: var(--em-white);
  border: 1px solid var(--em-rule-strong);
  box-shadow: 0 8px 24px rgba(26, 31, 28, .14);
  color: var(--em-accent);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .22s, transform .22s, visibility .22s, background .16s, color .16s;
}

.em-top--on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.em-top:hover {
  background: var(--em-panel);
  color: var(--em-link-hover);
}

/* Two borders of a square turned 45 degrees, which is how the bundle draws
   the chevron. The negative margin sets it on the button's optical centre
   rather than its geometric one. */
.em-top__chevron {
  display: block;
  width: 16px;
  height: 16px;
  border-left: 2.2px solid;
  border-top: 2.2px solid;
  transform: rotate(45deg);
  margin-bottom: -5px;
}

/* The mobile drawer is full width and sits above this. Taking the control
   away while the drawer is open keeps it off the drawer and out of the tab
   order behind it. */
body[data-rail='open'] .em-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}



@media(max-width:920px){
    .em-header__logo img{
        /* height:45px; */
        height:67px;
    }
    .em-main {
        padding-top: var(--em-header-h);
    }
    .em-header {
        padding: 12px var(--em-gutter);
    }
    .em-header__cta{
        padding:10px 14px;
        letter-spacing: 0.14em;
        line-height: 1;
    }
    .em-rail__search-field svg{
      transform:scale(1.4);
    }
    .em-footer__contact address, .em-footer__contact a{font-size:13px;}
    .em-menu-toggle{width:88.5px;}
}