/* ==========================================================================
   MessageHQ site components
   Built on top of css/tokens.css. Mirrors the MessageHQ Design System's
   Header, Footer, Button, Icon, ServiceCard, ArticleCard, CTABlock,
   VoiceCallout and Field components.
   ========================================================================== */

body{overflow-x:hidden}

.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}

.icon{display:inline-block;flex:0 0 auto;vertical-align:middle}
.icon--text{vertical-align:-0.15em}

/* ---------------------------------------------------------------- Header */
.mhq-header{position:sticky;top:0;z-index:20;background:var(--surface-ground);border-bottom:1px solid var(--hairline)}
.mhq-header__inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-s) var(--gutter);display:flex;align-items:center;gap:var(--space-l);flex-wrap:wrap}
.mhq-header__logo{display:flex;align-items:center;gap:var(--space-12);text-decoration:none;flex:0 0 auto}
.mhq-header__logo:hover{text-decoration:none}
.mhq-header__logo img{width:40px;height:40px;display:block}
.mhq-header__logo span{font-weight:var(--fw-black);font-size:20px;line-height:1;letter-spacing:-0.02em;color:var(--text-heading);font-family:var(--font-sans)}
.mhq-header__nav{display:flex;gap:var(--space-m);margin-left:auto;flex-wrap:wrap}
.mhq-header__nav a{font:var(--fw-medium) var(--fs-subtext)/1.2 var(--font-sans);color:var(--text-body);opacity:.72;padding-bottom:2px;border-bottom:1px solid transparent;text-decoration:none}
.mhq-header__nav a:hover{opacity:1;color:var(--text-body);text-decoration:none;border-bottom-color:var(--hairline)}
.mhq-header__nav a[aria-current="page"]{opacity:1;border-bottom-color:var(--trim)}
.mhq-header__cta{flex:0 0 auto}
@media (max-width:900px){
  .mhq-header__nav{order:3;width:100%;margin-left:0;gap:var(--space-s) var(--space-m)}
}

/* ---------------------------------------------------------------- Footer */
.mhq-footer{border-top:1px solid var(--hairline);padding:var(--space-l) 0 var(--space-32)}
.mhq-footer__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);display:flex;flex-wrap:wrap;gap:var(--space-m);align-items:flex-start;justify-content:space-between}
.mhq-footer__brand{display:grid;gap:var(--space-12)}
.mhq-footer__brand strong{font-weight:var(--fw-black);font-size:18px;line-height:1;letter-spacing:-0.02em;color:var(--text-heading);font-family:var(--font-sans)}
.mhq-footer__brand a{font:var(--fw-regular) var(--fs-subtext)/1.4 var(--font-sans)}
.mhq-footer__nav{display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-m);max-width:520px}
.mhq-footer__nav a{font:var(--fw-regular) var(--fs-subtext)/1.4 var(--font-sans);opacity:.78}
.mhq-footer__meta{display:grid;gap:var(--space-12);justify-items:start}
.mhq-footer__linkedin{display:inline-flex;align-items:center;gap:8px;font:var(--fw-regular) var(--fs-subtext)/1.4 var(--font-sans)}
.mhq-footer__copyright{font:var(--fw-regular) var(--fs-subtext)/1.4 var(--font-sans);color:var(--text-muted)}
.mhq-footer__fluff-row{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter) 32px;display:flex;justify-content:flex-end}
.mhq-footer__fluff{display:inline-flex;align-items:center;gap:8px;font:var(--fw-regular) 16px/1.4 var(--font-sans);color:var(--text-body);text-decoration:none}
.mhq-footer__fluff-chip{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;background:var(--mhq-blood);color:var(--mhq-bone);flex:0 0 auto}

/* ---------------------------------------------------------------- Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);font-weight:var(--fw-bold);font-size:16px;line-height:1;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:var(--transition-interactive);border:0;border-radius:var(--radius-button);box-sizing:border-box;font-family:var(--font-sans);background:none}
.btn:hover{text-decoration:none}
.btn-primary{padding:14px 24px;background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn-primary:hover{background:var(--btn-primary-bg-hover);color:var(--btn-primary-fg-hover)}
.btn-lg{font-size:18px;padding:18px 32px}
.btn-secondary{padding:14px 0;background:transparent;color:var(--btn-secondary-fg);border-radius:0}
.btn-secondary:hover{color:var(--btn-secondary-fg);text-decoration:underline;text-underline-offset:4px}
.btn-outline{padding:13px 23px;background:transparent;color:var(--trim);border:1px solid var(--trim)}
.btn-outline:hover{background:var(--trim);color:var(--surface-ground);text-decoration:none}
.btn-full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------------------ ServiceCard */
.service-card{display:flex;flex-direction:column;gap:var(--space-s);padding:var(--space-32);border:1px solid var(--hairline);border-radius:var(--radius-card);background:transparent;text-decoration:none;color:var(--text-body);transition:var(--transition-interactive)}
.service-card:hover{border-color:var(--trim);text-decoration:none;color:var(--text-body)}
.service-card h3{font-weight:var(--fw-bold);font-size:24px;line-height:1.2;letter-spacing:var(--ls-heading)}
.service-card p{font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);color:var(--text-muted)}
.service-card__link{margin-top:auto;padding-top:var(--space-xs);display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-bold);font-size:var(--fs-subtext);color:var(--text-heading)}
.service-card:hover .service-card__link{text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------- ArticleCard */
.article-card{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-m);border:1px solid var(--hairline);border-radius:var(--radius-card);text-decoration:none;color:var(--text-body);transition:var(--transition-interactive)}
.article-card:hover{border-color:var(--trim);text-decoration:none;color:var(--text-body)}
.article-card__meta{display:flex;align-items:center;gap:var(--space-12)}
.article-card__tag{font-weight:var(--fw-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;background:var(--accent-fill);color:var(--text-on-accent);padding:4px 8px;border-radius:var(--radius-field)}
.article-card__date{font:var(--fw-medium) var(--fs-subtext)/1.4 var(--font-sans);color:var(--text-muted)}
.article-card h3{font-weight:var(--fw-bold);font-size:21px;line-height:1.25;letter-spacing:var(--ls-heading)}
.article-card p{font:var(--fw-regular) var(--fs-subtext)/1.4 var(--font-sans);color:var(--text-muted)}
.article-card__cta{margin-top:auto;padding-top:var(--space-xs);display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-bold);font-size:var(--fs-subtext-sm);color:var(--text-heading)}
.article-card:hover .article-card__cta{text-decoration:underline;text-underline-offset:4px}

/* --------------------------------------------------------------- CTABlock */
.cta-block{padding:var(--section-pad) 0;border-top:1px solid var(--hairline)}
.cta-block__inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);display:flex;flex-wrap:wrap;gap:var(--space-l);align-items:center;justify-content:space-between}
.cta-block h2{max-width:18ch;letter-spacing:var(--ls-heading-tight)}
.cta-block__actions{display:flex;align-items:center;gap:var(--space-m);flex-wrap:wrap}

/* ------------------------------------------------------------ VoiceCallout */
.voice-callout{border:1px solid var(--trim);border-left:3px solid var(--trim);border-radius:var(--radius-card);padding:var(--space-32);display:grid;gap:var(--space-s)}
.voice-callout__label{font-weight:var(--fw-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.voice-callout__body{font-size:var(--fs-body-lg);line-height:var(--lh-body-loose);display:grid;gap:var(--space-s)}

/* ------------------------------------------------------------------ Field */
.field{display:grid;gap:var(--space-xs)}
.field__label{font:var(--fw-medium) var(--fs-subtext)/1.4 var(--font-sans);color:var(--text-body)}
.field__required{color:var(--text-muted)}
.field__control{width:100%;font:var(--fw-regular) var(--fs-subtext)/1.4 var(--font-sans);color:var(--text-body);background:transparent;border:var(--border-field);border-radius:var(--radius-field);padding:var(--space-14);box-sizing:border-box;transition:var(--transition-interactive)}
.field__control:invalid[data-touched]{border-color:var(--alert)}
textarea.field__control{resize:vertical}
.field__hint{font:var(--fw-regular) var(--fs-subtext-sm)/1.4 var(--font-sans);color:var(--text-muted)}
.field__error{font:var(--fw-regular) var(--fs-subtext-sm)/1.4 var(--font-sans);color:var(--alert);display:none}

/* ------------------------------------------------------------ Question Hub accordion */
.qa-group{border-top:1px solid var(--hairline)}
.qa-item{border-bottom:1px solid var(--hairline)}
.qa-item__trigger{width:100%;display:flex;align-items:center;gap:var(--space-s);padding:var(--space-m) 0;background:transparent;border:0;cursor:pointer;text-align:left;font:var(--fw-bold) 24px/1.35 var(--font-sans);color:var(--text-heading)}
.qa-item__trigger span{flex:1;min-width:0}
.qa-item__panel{display:none;padding:0 0 var(--space-m);max-width:62ch}
.qa-item__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s)}
.qa-item__panel li{border-top:1px solid var(--hairline);padding-top:var(--space-s);font-size:var(--fs-body-lg);line-height:1.5;color:var(--text-muted)}
.qa-item.is-open .qa-item__panel{display:block}
.qa-item__icon-plus{display:inline-block}
.qa-item__icon-minus{display:none}
.qa-item.is-open .qa-item__icon-plus{display:none}
.qa-item.is-open .qa-item__icon-minus{display:inline-block}

/* ------------------------------------------------------------ Articles Hub */
.article-cat{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-32);border:1px solid var(--hairline);border-radius:var(--radius-card);color:var(--text-body);text-decoration:none;min-width:0;transition:var(--transition-interactive)}
.article-cat:hover{border-color:var(--trim);text-decoration:none;color:var(--text-body)}
.article-cat__badge{display:none;align-self:flex-start;font-weight:var(--fw-bold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;background:var(--accent-fill);color:var(--text-on-accent);padding:4px 8px;border-radius:var(--radius-field)}
.article-cat.is-active .article-cat__badge{display:inline-flex}
.article-cat h3{font-weight:var(--fw-semibold);font-size:28px;line-height:1.15;letter-spacing:var(--ls-heading);color:var(--text-heading)}
.article-cat p{font:var(--fw-medium) 16px/1.5 var(--font-sans);color:var(--text-muted)}
.article-cat__cta{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-bold);font-size:16px;color:var(--text-heading)}
.article-card[hidden],.article-cat[hidden]{display:none}

/* ------------------------------------------------------------------ Misc */
.eyebrow{font-weight:var(--fw-bold);font-size:var(--fs-eyebrow);line-height:1.2;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.hairline-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-s)}
.hairline-list li{border-top:1px solid var(--hairline);padding-top:var(--space-s);font-size:var(--fs-body-lg);line-height:1.4;color:var(--text-heading)}
.form-sent{margin:0;font-size:var(--fs-body-lg);color:var(--text-heading);display:none}
.form-sent.is-visible{display:block}
.form-error{margin:0;font-size:var(--fs-body-lg);color:var(--alert);display:none}
.form-error.is-visible{display:block}
form.is-hidden{display:none}