/* Melsa Wellbeing custom overrides. Loaded last on both pages.
   Shared design tokens and responsive layouts live in site.css.

   Example brand adjustments:
   :root {
     --olive: #66702a;
     --coral: #b23f51;
     --cream: #faf8f1;
   }
*/

/* Navigation stays available when JavaScript is disabled. */
@media (max-width: 600px) {
  html:not(.js) .header-inner { flex-wrap: wrap; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .main-nav {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0 15px;
    box-shadow: none;
    border: 0;
    gap: 4px 20px;
  }
  html:not(.js) .main-nav .button { margin: 0; }
}

/* Coral accents and olive tones from the supplied Melsa Wellbeing logo.
   Text uses deeper shades to retain contrast on the light background. */
:root {
  --coral:#b23f51;
  --peach:#f6d5d5;
}

/* The full stacked logo keeps its original proportions and clear space. */
.brand { width:212px; height:133px; }
.header-inner { min-height:153px; }
@media (max-width: 1100px) { .brand { width:190px; height:119px; } .header-inner { min-height:139px; } }
@media (max-width: 600px)  { .brand { width:160px; height:100px; } .header-inner { min-height:118px; } }

/* Placeholder while contact details are withheld. */
.contact-pending { opacity:.85; }
.footer-links .contact-pending { display:flex; align-items:center; font-size:12px; min-height:37px; color:#e0e4d9; }
.contact-link.is-pending { cursor:default; }
.contact-link.is-pending strong { color:var(--muted); font-style:italic; }
.contact-link.is-pending:hover strong { text-decoration:none; }

/* 404 page */
.not-found { padding:110px 0 130px; text-align:center; }
.not-found .eyebrow-code { font-family:var(--serif); font-size:clamp(72px,14vw,150px); line-height:1; color:var(--coral); margin:0 auto 10px; }
.not-found h1 { margin:0 auto 18px; max-width:820px; }
.not-found p { margin:0 auto 34px; max-width:520px; color:var(--muted); }
.not-found-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width: 600px) { .not-found { padding:70px 0 90px; } }

/* Keep the footer name clear on the dark olive surface. */
.footer-name { display:inline-flex; flex-direction:column; gap:8px; }
.footer-name .footer-wordmark { color:var(--cream); }
.footer-name .footer-descriptor {
  font:700 11px/1.4 var(--sans);
  letter-spacing:3px;
  text-transform:uppercase;
  color:#ddce76;
}