/* ==========================================================================
   Morrow Workplace Studio — Shared Stylesheet
   Used by every page. Edit here to update styling site-wide.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #252525; }
h1, h2, h3, .font-display { font-family: 'Fraunces', serif; }

/* Blueprint corner registration marks — signature motif */
.plan-mark { position: relative; }
.plan-mark::before,
.plan-mark::after { position: absolute; width: 22px; height: 22px; pointer-events: none; content: ''; }
.plan-mark::before { top: -10px; left: -10px; border-top: 1.5px solid #C96C4A; border-left: 1.5px solid #C96C4A; }
.plan-mark::after { bottom: -10px; right: -10px; border-bottom: 1.5px solid #C96C4A; border-right: 1.5px solid #C96C4A; }

.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(21,35,49,0.15), transparent);
}

/* Navigation underline */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%;
  height: 1px;
  background: #C96C4A;
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }

/* Buttons */
.btn-primary {
  background: #C96C4A;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover { background: #B15A3A; transform: translateY(-1px); }

.btn-outline {
  border: 1px solid #152331;
  color: #152331;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline:hover { background: #152331; color: #fff; }

/* Focus states */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #C96C4A;
  outline-offset: 3px;
}

.fade-img { background: #DED6C8; }

/* Services page: service rows */
.service-row { transition: background 0.2s ease; }
.service-row:hover { background: rgba(169,183,160,0.12); }
.service-block { border-top: 1px solid rgba(21,35,49,0.15); }

/* FAQ accordions (Services, Contact) */
details.faq-item summary { cursor: pointer; list-style: none; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.2s ease; }

/* Insights: topic pills */
.topic-pill {
  border: 1px solid rgba(21,35,49,0.2);
  color: #152331;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.topic-pill:hover { background: #152331; color: #fff; border-color: #152331; }

/* Light-background form fields (Contact, Insights newsletter) */
.field-light label { color: #152331; }
.field-light input, .field-light select, .field-light textarea {
  background: #fff;
  border: 1px solid rgba(21,35,49,0.25);
  color: #152331;
}
.field-light input::placeholder, .field-light textarea::placeholder { color: rgba(21,35,49,0.4); }
.field-light input:focus, .field-light select:focus, .field-light textarea:focus { border-color: #C96C4A; outline: none; }

/* Article template */
.article-body p { margin-bottom: 1.5rem; line-height: 1.8; color: #252525; }
.article-body h2 { font-family: 'Fraunces', serif; font-size: 1.75rem; color: #152331; margin-top: 2.5rem; margin-bottom: 1rem; }
.article-body h3 { font-family: 'Fraunces', serif; font-size: 1.35rem; color: #152331; margin-top: 2rem; margin-bottom: 0.75rem; }
.article-body ul { margin-bottom: 1.5rem; padding-left: 1.25rem; list-style: disc; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.7; }
.article-body figure { margin: 2rem 0; }
.article-body figcaption { font-size: 0.85rem; color: rgba(37,37,37,0.55); margin-top: 0.5rem; }

.toc-link { display: block; padding: 0.4rem 0; color: rgba(21,35,49,0.7); border-left: 2px solid transparent; padding-left: 1rem; transition: border-color 0.2s ease, color 0.2s ease; }
.toc-link:hover { border-color: #C96C4A; color: #152331; }

/* Mobile menu */
#mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary:hover { transform: none; }
}