/* ===========================================================================
   Mesh America — Library (BookStack) brand skin · Phase 1
   ---------------------------------------------------------------------------
   Applied via Settings → Customization → Custom HTML head content.
   Light mode only (dark-mode left stock): everything color-sensitive is
   scoped to html:not(.dark-mode). BookStack v26.03 class/var names.
   Tokens mirror foundations/tokens (navy #29487b, red #d31a18, steel greys).
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ---- 1. BookStack variable overrides ----------------------------------- */
:root {
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html:not(.dark-mode) {
  --color-primary: #29487b;
  --color-primary-light: rgba(41, 72, 123, 0.12);
  --color-link: #29487b;
  /* Entity colors: TJ's existing semantic scheme, snapped to brand tokens
     (was shelf #d21615 / book #1b3e67 / chapter #f69f23 / page #71c122) */
  --color-bookshelf: #d31a18;   /* brand red 600 */
  --color-book: #1a3560;        /* navy 800 */
  --color-chapter: #ac6202;     /* brand amber */
  --color-page: #07630b;        /* brand green */
  --color-page-draft: #667085;  /* grey 600 */
}

/* ---- 2. Header: white kit bar (replaces the colored BookStack header) ---
   BookStack: .primary-background { background-color: var(--color-primary) !important } */
html:not(.dark-mode) #header.primary-background {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
html:not(.dark-mode) #header .logo-text { color: #1a1a1a !important; font-weight: 800; letter-spacing: -0.015em; }
html:not(.dark-mode) #header a, html:not(.dark-mode) #header .svg-icon { color: #475467 !important; fill: #475467 !important; }
html:not(.dark-mode) #header a:hover { color: #29487b !important; }
html:not(.dark-mode) #header .links a { font-weight: 600; font-size: 14px; }
html:not(.dark-mode) #header .search-box input {
  background: #f8f9fb; border: 1px solid #d7dbe2; border-radius: 8px; color: #1a1a1a;
}
html:not(.dark-mode) #header .search-box input:focus {
  border-color: #29487b; box-shadow: 0 0 0 3px rgba(41, 72, 123, 0.35); outline: none;
}
html:not(.dark-mode) #header .search-box button .svg-icon { fill: #667085; }
html:not(.dark-mode) #header .dropdown-menu { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.10); }
html:not(.dark-mode) .mobile-menu-toggle { color: #475467; fill: #475467; }

/* ---- 3. Cards (shelves/books grids, generic .card panels) --------------- */
html:not(.dark-mode) .grid-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  overflow: hidden;
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 120ms cubic-bezier(0.4, 0, 0.2, 1), border-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
html:not(.dark-mode) .grid-card:hover {
  transform: translateY(-3px);
  border-color: #d7dbe2;
  box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
  text-decoration: none;
}
html:not(.dark-mode) .grid-card-content h2 { font-weight: 800; letter-spacing: -0.015em; }
html:not(.dark-mode) .card {
  border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
html:not(.dark-mode) .card .card-title { font-weight: 800; letter-spacing: -0.015em; }

/* ---- 4. Buttons ---------------------------------------------------------- */
.button { border-radius: 12px; font-weight: 600; }
html:not(.dark-mode) .button:not(.outline) { background-color: #29487b; border-color: #29487b; }
html:not(.dark-mode) .button:not(.outline):hover { background-color: #1f3f6e; border-color: #1f3f6e; }
html:not(.dark-mode) .button.outline { border-color: #d7dbe2; color: #1f3f6e; }
html:not(.dark-mode) .button.outline:hover { background: #f0f4ff; border-color: #29487b; }

/* ---- 5. Content typography ----------------------------------------------- */
html:not(.dark-mode) .page-content { color: #475467; line-height: 1.65; }
html:not(.dark-mode) .page-content h1, html:not(.dark-mode) .page-content h2,
html:not(.dark-mode) .page-content h3, html:not(.dark-mode) .page-content h4,
html:not(.dark-mode) h1.break-text, html:not(.dark-mode) .content h1 {
  color: #1a1a1a; font-weight: 800; letter-spacing: -0.015em;
}
html:not(.dark-mode) .page-content a { color: #29487b; font-weight: 600; }
html:not(.dark-mode) .page-content blockquote { border-inline-start: 3px solid #29487b; background: #f8f9fb; border-radius: 6px; }
html:not(.dark-mode) .page-content code, html:not(.dark-mode) .page-content pre { background: #f8f9fb; border: 1px solid #eff1f5; border-radius: 6px; }

/* ---- 6. Entity lists, sidebar, breadcrumbs ------------------------------- */
html:not(.dark-mode) .entity-list-item { border-radius: 8px; }
html:not(.dark-mode) .entity-list-item:hover { background: #f8f9fb; text-decoration: none; }
html:not(.dark-mode) .entity-list-item-name { font-weight: 700; }
html:not(.dark-mode) .sidebar-page-nav .current-heading { color: #29487b; font-weight: 700; }
html:not(.dark-mode) .sidebar-page-nav-bullet { background: #29487b !important; }
html:not(.dark-mode) .breadcrumbs .text-button:hover { color: #29487b; }
html:not(.dark-mode) .tri-layout-container .tri-layout-right-contents h5,
html:not(.dark-mode) .tri-layout-left-contents h5 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: #667085; }

/* ---- 7. Forms (login, search filters) ------------------------------------ */
html:not(.dark-mode) input[type='text'], html:not(.dark-mode) input[type='email'],
html:not(.dark-mode) input[type='password'], html:not(.dark-mode) input[type='search'],
html:not(.dark-mode) select, html:not(.dark-mode) textarea {
  border: 1px solid #d7dbe2; border-radius: 8px; font-family: var(--font-body); color: #1a1a1a;
}
html:not(.dark-mode) input:focus, html:not(.dark-mode) select:focus, html:not(.dark-mode) textarea:focus {
  border-color: #29487b; box-shadow: 0 0 0 3px rgba(41, 72, 123, 0.35); outline: none;
}
html:not(.dark-mode) label { font-weight: 600; color: #475467; }

/* ---- 8. Notifications, tags, pagination ---------------------------------- */
html:not(.dark-mode) .notification { border-radius: 12px; border: 1px solid #e5e7eb; box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.10); }
html:not(.dark-mode) .tag-item { border-radius: 999px; }
html:not(.dark-mode) .pagination .page-link:hover { color: #29487b; background: #f0f4ff; }

/* ===========================================================================
   Phase 2 — website kit header (site bar) + kit footer
   Markup: theme/meshamerica/layouts/parts/header.blade.php + footer.blade.php
   =========================================================================== */

/* ---- Site bar (kit header) ----------------------------------------------- */
.ma-sitebar { background: #ffffff; border-bottom: 1px solid #e5e7eb; font-family: var(--font-body); }
.ma-sitebar__inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 28px; }
.ma-sitebar__logo { display: inline-flex; flex: none; }
.ma-sitebar__logo img { height: 34px; width: auto; display: block; }
.ma-sitebar__nav { display: flex; gap: 22px; margin-right: auto; }
.ma-sitebar__nav a { position: relative; display: inline-flex; align-items: center; height: 64px; font-size: 14px; font-weight: 600; color: #475467; text-decoration: none; white-space: nowrap; }
.ma-sitebar__nav a:hover { color: #29487b; }
.ma-sitebar__nav a.is-active { color: #1a1a1a; }
.ma-sitebar__nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 12px; height: 3px; border-radius: 2px; background: #d31a18; }
.ma-sitebar__actions { display: flex; gap: 10px; flex: none; }
.ma-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 12px; border: 1px solid transparent; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important; cursor: pointer; }
.ma-btn--accent { background: #d31a18; border-color: #d31a18; color: #ffffff !important; }
.ma-btn--accent:hover { background: #a61412; border-color: #a61412; color: #ffffff !important; }
.ma-btn--navy { background: #29487b; border-color: #29487b; color: #ffffff !important; }
.ma-btn--navy:hover { background: #1f3f6e; border-color: #1f3f6e; color: #ffffff !important; }
@media (max-width: 980px) {
  .ma-sitebar__nav { display: none; }
}
@media (max-width: 560px) {
  .ma-sitebar__actions { display: none; }
}

/* Library toolbar (BookStack header) sits under the site bar: tighten it */
html:not(.dark-mode) #header .logo-image { height: 28px; width: auto; }

/* ---- Kit footer ----------------------------------------------------------- */
.ma-footer { background: #122544; font-family: var(--font-body); margin-top: 0; }
.ma-footer__inner { max-width: 1080px; margin: 0 auto; padding: 48px 24px 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.ma-footer__brand img { height: 34px; width: auto; display: block; }
.ma-footer__brand p { color: #a5adbc; font-size: 14px; line-height: 1.5; margin: 14px 0 0; max-width: 26ch; }
.ma-footer__head { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8a9bb8; margin: 0 0 10px; }
.ma-footer__col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.ma-footer__col a { color: #d7dbe2; font-size: 14px; font-weight: 400; text-decoration: none; }
.ma-footer__col a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.ma-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 18px max(24px, calc((100% - 1032px) / 2)) 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ma-footer__bottom p { margin: 0; font-size: 13px; color: #8a9bb8; }
.ma-footer__bottom a { color: #d7dbe2; text-decoration: none; }
.ma-footer__bottom a:hover { color: #fff; text-decoration: underline; }
.ma-footer__social { display: flex; gap: 14px; }
.ma-footer__social a { color: #a5adbc; display: inline-flex; }
.ma-footer__social a:hover { color: #ffffff; }
@media (max-width: 900px) { .ma-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ma-footer__inner { grid-template-columns: 1fr; } }