/* ------------------------------------------------------------------
   The Mooring Place — house styles.
   Namespaced .mp-* so nothing here collides with the template CSS.
   Palette is taken from the template: brick #7A3630, olive #BFBC80,
   mint #C5E6D4, body text #6b6b6b, cream #e7e1bf.
   ------------------------------------------------------------------ */

:root {
  --mp-brick:   #7A3630;
  --mp-brick-d: #6F403C;
  --mp-olive:   #BFBC80;
  --mp-mint:    #C5E6D4;
  --mp-ink:     #6b6b6b;
  --mp-dark:    #2b3a42;
  --mp-cream:   #e7e1bf;
  --mp-rule:    rgba(122, 54, 48, .18);
  --mp-wash:    #f7f5f1;
}

/* ---------- shared bits ---------- */

.mp-btn {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid var(--mp-brick);
  background: var(--mp-brick);
  color: #fff !important;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background .25s, color .25s;
  line-height: 1.2;
}
.mp-btn:hover, .mp-btn:focus { background: var(--mp-brick-d); border-color: var(--mp-brick-d); color: #fff !important; }

.mp-btn--ghost { background: transparent; color: var(--mp-brick) !important; }
.mp-btn--ghost:hover, .mp-btn--ghost:focus { background: var(--mp-brick); color: #fff !important; }

.mp-btn--link {
  background: transparent; border-color: transparent;
  color: var(--mp-ink) !important; text-decoration: underline; padding: 14px 12px;
}
.mp-btn--link:hover { background: transparent; color: var(--mp-brick) !important; }

.mp-btn--book { padding: 16px 34px; }

/* ---------- top bar (inside the template's top sidebar) ---------- */

.mp-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
}
.mp-topbar__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 16px; }
.mp-topbar__contact a { text-decoration: none; color: var(--mp-ink) !important; }
.mp-topbar__contact a:hover { color: var(--mp-brick) !important; }
.mp-topbar__contact i { color: var(--mp-brick); margin-right: 5px; }

.mp-badge {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--mp-brick);
  color: var(--mp-brick);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mp-topline { font-size: 16px; margin-top: 14px; }

/* ---------- editorial helpers ---------- */

.mp-num {
  display: block;
  font-family: 'Staatliches', sans-serif;
  font-size: 15px;
  letter-spacing: .28em;
  color: var(--mp-olive);
  margin-bottom: 8px;
}

.mp-lede { font-size: 21px; line-height: 1.6; color: var(--mp-dark); }

.mp-rule { border: 0; border-top: 1px solid var(--mp-rule); margin: 46px 0; }

.mp-coords {
  font-family: 'Staatliches', sans-serif;
  letter-spacing: .16em;
  font-size: 15px;
  color: var(--mp-olive);
}

.mp-note {
  border-left: 3px solid var(--mp-olive);
  padding: 4px 0 4px 20px;
  margin: 26px 0;
  font-size: 17px;
}

/* ---------- pictures ---------- */

.mp-figure { margin: 0 0 26px; }
.mp-figure img { display: block; width: 100%; height: auto; }
.mp-figure figcaption {
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--mp-ink);
  padding-top: 8px;
}

/* ---------- feature tiles ---------- */

.mp-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 30px 0 10px; }

.mp-tile { background: var(--mp-wash); display: flex; flex-direction: column; }
.mp-tile img { display: block; width: 100%; height: 190px; object-fit: cover; }
.mp-tile__body { padding: 22px 24px 26px; flex: 1 1 auto; display: flex; flex-direction: column; }
.mp-tile h3 { color: var(--mp-brick); margin-bottom: .5em; }
.mp-tile p { font-size: 16px; margin-bottom: 14px; }
.mp-tile a.mp-more { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--mp-brick) !important; font-size: 15px; letter-spacing: .05em; }
.mp-tile a.mp-more:hover { text-decoration: underline; }

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

.mp-room {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: 30px;
  padding: 34px 0;
  border-top: 1px solid var(--mp-rule);
}
.mp-room:first-of-type { border-top: 0; }
.mp-room img { display: block; width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
.mp-room h3 { color: var(--mp-brick); margin-bottom: .35em; font-size: 24px; font-family: 'Staatliches', sans-serif; letter-spacing: .02em; }
.mp-room__meta {
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mp-olive);
  font-weight: 700;
  margin-bottom: 14px;
}
.mp-room__price { font-family: 'Staatliches', sans-serif; font-size: 26px; color: var(--mp-dark); }
.mp-room__price small { font-family: 'Raleway', sans-serif; font-size: 14px; color: var(--mp-ink); letter-spacing: .04em; }
.mp-room ul { list-style: none; padding: 0; margin: 16px 0; }
.mp-room ul li { margin: 0 0 6px; padding-left: 18px; position: relative; font-size: 16px; }
.mp-room ul li:before { content: "—"; position: absolute; left: 0; color: var(--mp-olive); }
.mp-room__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }

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

.mp-table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; font-size: 16px; }
.mp-table th, .mp-table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--mp-rule); vertical-align: top; }
.mp-table th { color: var(--mp-brick); font-weight: 700; white-space: nowrap; width: 34%; }

/* ---------- statistics ---------- */

.mp-stats {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--mp-rule);
  margin: 34px 0;
}
.mp-stat { background: #fff; padding: 26px 18px; text-align: center; }
.mp-stat b {
  display: block;
  font-family: 'Staatliches', sans-serif;
  font-size: 42px;
  line-height: 1;
  color: var(--mp-brick);
  font-weight: 400;
}
.mp-stat span { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-top: 9px; }

/* ---------- offers ---------- */

.mp-offer { border: 1px solid var(--mp-rule); padding: 28px 30px; margin: 0 0 24px; }
.mp-offer h3 { color: var(--mp-brick); margin-bottom: .3em; }
.mp-offer__from { font-family: 'Staatliches', sans-serif; font-size: 28px; color: var(--mp-dark); }
.mp-offer__from small { font-family: 'Raleway', sans-serif; font-size: 14px; letter-spacing: .04em; color: var(--mp-ink); }
.mp-offer ul { list-style: none; padding: 0; margin: 14px 0; }
.mp-offer ul li { padding-left: 18px; position: relative; margin-bottom: 6px; font-size: 16px; }
.mp-offer ul li:before { content: "·"; position: absolute; left: 4px; color: var(--mp-olive); font-weight: 700; }
.mp-offer__fine { font-size: 14px; color: var(--mp-ink); }

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

.mp-card { background: var(--mp-wash); padding: 20px 20px 22px; margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.mp-card h3 { font-size: 17px; color: var(--mp-brick) !important; margin-bottom: .6em; }
.mp-card p { margin: 0 0 12px; }
.mp-card a { color: var(--mp-brick) !important; text-decoration: none; }
.mp-card a:hover { text-decoration: underline; }
.mp-card__foot { font-size: 14px; margin-top: 14px; }
.mp-card--quiet { background: #fff; border: 1px solid var(--mp-rule); }

/* ---------- bottom strip ---------- */

.mp-strip {
  display: grid;
  gap: 18px 30px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  font-size: 15px;
  padding: 6px 0 4px;
}
.mp-strip__k {
  display: block;
  font-family: 'Staatliches', sans-serif;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--mp-olive);
  margin-bottom: 4px;
}

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

.mp-foot { display: grid; gap: 26px 40px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 30px 0 10px; }
.mp-foot h4 { font-family: 'Staatliches', sans-serif; font-size: 19px; letter-spacing: .06em; color: var(--mp-brick); margin-bottom: .6em; font-weight: 400; }
.mp-foot ul { list-style: none; padding: 0; margin: 0; }
.mp-foot li { margin: 0 0 7px; }
.mp-foot a { text-decoration: none; }
.mp-foot a:hover { text-decoration: underline; }
.mp-foot p { font-size: 15px; margin-bottom: 12px; }

.mp-foot__legal { border-top: 1px solid var(--mp-rule); padding: 22px 0 30px; font-size: 13px; line-height: 1.65; color: var(--mp-ink); }
.mp-foot__legal p { margin-bottom: 10px; }

/* ---------- enquiry form ---------- */

.mp-form { margin: 24px 0 10px; }
.mp-form__row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 18px; }
.mp-form label { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--mp-brick); margin-bottom: 6px; }
.mp-form input[type="text"],
.mp-form input[type="email"],
.mp-form input[type="tel"],
.mp-form input[type="date"],
.mp-form input[type="number"],
.mp-form select,
.mp-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(107,107,107,.45);
  background: rgba(107,107,107,.03);
  color: var(--mp-ink);
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 12px 13px;
  border-radius: 2px;
}
.mp-form textarea { min-height: 140px; resize: vertical; }
.mp-form input:focus, .mp-form select:focus, .mp-form textarea:focus {
  outline: 0; border-color: var(--mp-brick); box-shadow: 0 0 5px rgba(122,54,48,.3);
}
.mp-form__check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 13px; font-size: 15px; }
.mp-form__check input { margin-top: 5px; flex: 0 0 auto; }
.mp-form__check label { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mp-ink); font-size: 15px; margin: 0; }
.mp-form__hp { position: absolute; left: -9999px; }
.mp-form__submit { margin-top: 16px; }

.mp-msg { padding: 16px 20px; margin: 0 0 26px; font-size: 16px; border-left: 4px solid var(--mp-olive); background: var(--mp-wash); }
.mp-msg--bad { border-left-color: var(--mp-brick); }

/* ---------- age gate ---------- */

.mp-gate {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(43, 58, 66, .96);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.mp-gate[hidden] { display: none; }
.mp-gate__box { background: #fff; max-width: 560px; padding: 40px 38px 34px; text-align: center; }
.mp-gate__box[hidden] { display: none; }
.mp-gate__mark {
  font-family: 'Staatliches', sans-serif;
  font-size: 22px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mp-olive); margin-bottom: 18px;
}
.mp-gate h2 { color: var(--mp-brick); font-size: 30px; margin-bottom: .5em; }
.mp-gate p { font-size: 16px; margin-bottom: 20px; color: var(--mp-ink); }
.mp-gate__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.mp-gate__fine { font-size: 13px; margin: 22px 0 0; letter-spacing: .04em; }

/* ---------- cookie banner ---------- */

.mp-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  background: #fff;
  border-top: 3px solid var(--mp-brick);
  box-shadow: 0 -6px 24px rgba(0,0,0,.14);
  padding: 20px 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  font-size: 15px; line-height: 1.5;
}
.mp-cookie[hidden] { display: none; }
.mp-cookie__text { flex: 1 1 320px; color: var(--mp-ink); }
.mp-cookie__text a { color: var(--mp-brick); }
.mp-cookie__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-cookie__buttons .mp-btn { padding: 11px 20px; font-size: 13px; }
.mp-cookie__settings { flex: 1 1 100%; border-top: 1px solid var(--mp-rule); padding-top: 16px; }
.mp-cookie__settings[hidden] { display: none; }
.mp-cookie__opt { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; }
.mp-cookie__opt input { margin-top: 4px; }

/* ---------- heading scale ----------
   The template sets the fixed title at 140px, which suited the three short
   words the donor design was drawn around. Our name and page titles are
   longer and the heading lives in a 25%-wide fixed column, so above 1280px
   we scale with the viewport the same way the template already does below it. */

@media only screen and (min-width: 1281px) {
  .cm-templates-heading .cm-templates-heading__title,
  .cm-templates-heading .cm-templates-heading__title span { font-size: 2.9vw !important; line-height: .95 !important; }
  .cm-templates-heading .cm-templates-heading__subtitle,
  .cm-templates-heading .cm-templates-heading__subtitle span { font-size: 1.4vw !important; letter-spacing: .02em; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .mp-room { grid-template-columns: 1fr; }
  .mp-topbar { flex-direction: column; align-items: flex-start; }
}

/* Below 1024px the template parks its navigation bar at the foot of the
   screen; sit the cookie banner on top of it rather than over it. */
@media (max-width: 1023px) {
  .mp-cookie { bottom: 75px; }
}

@media (max-width: 620px) {
  .mp-gate__box { padding: 30px 22px 26px; }
  .mp-gate h2 { font-size: 24px; }
  .mp-offer { padding: 22px 20px; }
  .mp-cookie { padding: 16px 18px; }
}