/* Mortar HelpScout Docs theme — generated from mortar-docs-custom-code.html (repo root). Edit THERE, re-split, re-upload. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");
  :root {
    --m-ink: #1e1e1e;
    --m-ink-muted: rgba(30,30,30,.65);
    --m-surface: #f8f8f8;
    --m-card: #ffffff;
    --m-cream: #f6ede2;
    --m-lime: #a3ee7c;
    --m-green: #1f4638;      /* te-papa — header/hero surface */
    --m-green-mid: #28765a;  /* brand — links, active states */
    --m-line: rgba(30,30,30,.10);
    --m-divider: rgba(30,30,30,.08);
    --m-r-control: 14px; --m-r-panel: 20px; --m-r-chip: 10px;
    --m-font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  }
  html, body { overflow-x: hidden; max-width: 100%; }
  body { background: var(--m-surface); color: var(--m-ink);
    font-family: var(--m-font); -webkit-font-smoothing: antialiased; }

  /* ---- Navbar: flat te-papa green, white wordmark, lime Contact pill ---- */
  #mainNav.navbar .navbar-inner { background: var(--m-green); border-bottom: none;
    box-shadow: none; filter: none; min-height: 72px; overflow: visible; }
  #mainNav .container-fluid { display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 72px; }
  #mainNav .brand { position: static; flex: 0 0 auto; display: inline-block;
    width: 132px; height: 34px; margin: 0 auto 0 2px; padding: 0;
    background: url("https://cdn.prod.website-files.com/68cba6b742d96113c1970bc1/68d4c5bb087b830e3d3f2610_logo-white.png") no-repeat left center;
    background-size: contain; text-indent: -9999px; overflow: hidden; }
  #mainNav .btn-navbar { display: none; }
  #mainNav .nav-collapse, #mainNav .nav-collapse.collapse {
    flex: 0 0 auto; float: none; width: auto; display: block !important; height: auto !important;
    overflow: visible; visibility: visible; }
  #mainNav .nav { display: flex; margin: 0; }
  #mainNav .nav > li { display: none; }              /* hide the 7 collection links */
  #mainNav .nav > li#contact { display: block; }     /* keep Contact — lime pill */
  #mainNav .nav > li#contact > a { background: var(--m-lime); color: var(--m-green);
    font-family: var(--m-font); font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
    text-shadow: none; line-height: 22px; padding: 11px 20px; border-radius: var(--m-r-control); }
  #mainNav .nav > li#contact > a:hover { background: #b7f294; color: var(--m-green); }

  /* ---- Search hero: continuous green canvas with the header ---- */
  #docsSearch { background: var(--m-green); padding: 72px 24px 88px; text-align: center;
    box-sizing: border-box; min-height: 380px;
    visibility: hidden; animation: m-docs-show 0s .9s forwards; }
  @keyframes m-docs-show { to { visibility: visible; } }
  .m-hero-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--m-lime);
    font-family: var(--m-font); font-size: 14px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; margin: 0 0 20px; }
  .m-hero-kicker .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--m-lime);
    flex: 0 0 auto; display: inline-block; }
  .m-hero-title { color: #ffffff; font-family: var(--m-font); font-weight: 700;
    font-size: 43px; line-height: 1.1; letter-spacing: -0.05em; margin: 0 0 18px; }
  .m-hero-sub { color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.5;
    letter-spacing: -0.02em; margin: 0 auto 36px; max-width: 620px; }
  /* Search pill — white, concentric radii (14 control + 8 padding = 22), lime submit */
  #docsSearch #searchBar { max-width: 720px; margin: 0 auto; display: flex; align-items: center;
    background: var(--m-card); border-radius: 22px; padding: 8px;
    box-shadow: 0 24px 60px rgba(15,35,28,.45), 0 4px 24px rgba(30,30,30,.08);
    position: relative; }
  #docsSearch .search-query { flex: 1 1 auto !important; width: auto !important; border: none;
    box-shadow: none; background: transparent; font-family: var(--m-font); font-size: 17px;
    letter-spacing: -0.02em; color: var(--m-ink); padding: 13px 8px 13px 46px; margin: 0;
    height: auto; min-width: 0; }
  #docsSearch #serp-dd { position: absolute; left: 8px; right: 8px; top: calc(100% + 6px);
    text-align: left; }
  #docsSearch .search-query::placeholder { color: rgba(30,30,30,.45); }
  #docsSearch .search-query:focus { outline: none; box-shadow: none; }
  #docsSearch #searchBar > .icon-search, #docsSearch #searchBar:before {
    content: ""; position: absolute; left: 22px; top: 50%; width: 18px; height: 18px;
    transform: translateY(-50%); background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1e1e' stroke-opacity='.4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
  #docsSearch #searchBar button[type="submit"] { flex: 0 0 auto; margin-left: auto; align-self: center;
    position: static !important; top: auto !important; right: auto !important; bottom: auto !important;
    background: var(--m-lime); color: var(--m-green);
    border: none; border-radius: var(--m-r-control); height: 50px; padding: 0 24px;
    font-family: var(--m-font); font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
    text-shadow: none; box-shadow: none; transition: background .15s ease; }
  #docsSearch #searchBar button[type="submit"]:hover { background: #b7f294; }
  #docsSearch #searchBar button[type="submit"] .icon-search { display: none; }

  /* ---- Homepage collection cards ---- */
  #contentArea { padding-top: 40px; }
  #contentArea .threeCol [class*="span"], .collection-category, .category {
    background: var(--m-card); border: 1px solid var(--m-line); border-radius: var(--m-r-panel);
    padding: 24px 26px; margin-bottom: 24px;
    transition: box-shadow .15s ease, transform .15s ease; }
  #contentArea .threeCol [class*="span"]:hover {
    box-shadow: 0 4px 24px rgba(30,30,30,.10); transform: translateY(-2px); }
  #contentArea h2, #contentArea h3 { color: var(--m-ink); font-family: var(--m-font);
    font-weight: 700; letter-spacing: -0.03em; }

  /* ---- Links: brand green ---- */
  a, #contentArea a, #fullArticle a { color: var(--m-green-mid); text-decoration: none; }
  a:hover, #contentArea a:hover, #fullArticle a:hover { color: var(--m-green); text-decoration: underline; }

  /* ---- Injected breadcrumb + back link ---- */
  .m-breadcrumb { display: block !important; width: 100% !important; max-width: none !important;
    float: none !important; clear: both; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 13px; letter-spacing: -0.01em; color: var(--m-ink-muted); margin: 0 0 20px; padding: 0; }
  .m-breadcrumb a, .m-breadcrumb .sep, .m-breadcrumb span { display: inline !important; float: none !important;
    width: auto !important; vertical-align: baseline; white-space: nowrap; }
  .m-breadcrumb a { color: var(--m-ink-muted); }
  .m-breadcrumb a:hover { color: var(--m-ink); }
  .m-breadcrumb .sep { margin: 0 8px; color: rgba(30,30,30,.3); }
  .m-back { display: inline-block; margin-top: 32px; font-size: 14px; font-weight: 600; }

  /* ---- Article card + typography ---- */
  #main-content .contentWrapper { background: var(--m-card); border: 1px solid var(--m-line);
    border-radius: var(--m-r-panel); padding: 32px 40px; }
  #fullArticle { max-width: 760px; }
  #fullArticle h1.title { font-family: var(--m-font); font-weight: 700;
    letter-spacing: -0.04em; line-height: 1.15; font-size: 31px; color: var(--m-ink); }
  #fullArticle h2 { margin-top: 1.8em; padding-top: .7em; border-top: 1px solid var(--m-divider);
    font-family: var(--m-font); font-size: 20px; font-weight: 700;
    letter-spacing: -0.03em; color: var(--m-ink); }
  #fullArticle p, #fullArticle li { font-size: 16px; line-height: 1.6; color: var(--m-ink); }
  #fullArticle ol li, #fullArticle ul li { margin-bottom: .4em; }
  #fullArticle strong { color: var(--m-ink); }
  #fullArticle table { border: 1px solid var(--m-line); border-radius: var(--m-r-chip);
    border-collapse: separate; border-spacing: 0; overflow: hidden; }
  #fullArticle th { background: var(--m-surface); }
  #fullArticle th, #fullArticle td { border-bottom: 1px solid var(--m-divider); padding: 8px 12px; }

  /* ---- Sidebar + injected side navigation ---- */
  #sidebar .search-query { border: 1px solid var(--m-line); border-radius: var(--m-r-chip);
    font-family: var(--m-font); }
  .m-sidenav { margin-top: 22px; }
  .m-sidenav-title { font-family: var(--m-font); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--m-ink-muted); margin: 0 0 10px; }
  .m-sidenav ul { list-style: none; margin: 0; padding: 0; }
  .m-sidenav li { margin: 0 0 2px; }
  .m-sidenav a { display: block; padding: 7px 10px; border-radius: var(--m-r-chip); font-size: 14px;
    letter-spacing: -0.01em; color: var(--m-ink-muted); line-height: 1.35; }
  .m-sidenav a:hover { background: rgba(30,30,30,.05); color: var(--m-ink); text-decoration: none; }
  .m-sidenav a.current { background: rgba(163,238,124,.28); color: var(--m-green); font-weight: 700; }

  /* ---- Buttons / contact ---- */
  .btn-primary, .contactUs .btn { background: var(--m-green); border: none; border-radius: var(--m-r-control);
    font-family: var(--m-font); font-weight: 700; letter-spacing: -0.02em;
    text-shadow: none; box-shadow: none; color: #fff; }
  .btn-primary:hover, .contactUs .btn:hover { background: #16352a; }

  footer.center { color: var(--m-ink-muted); padding: 32px 0; }
  footer.center a { color: var(--m-ink-muted); }

  @media (max-width: 767px) {
    #mainNav .container-fluid { padding: 0 16px; }
    #docsSearch { padding: 44px 20px 52px; min-height: 340px; }
    .m-hero-title { font-size: 30px; }
    #docsSearch #searchBar button[type="submit"] { padding: 0 18px; }
    #main-content .contentWrapper { padding: 22px 18px; }
    #contentArea .threeCol [class*="span"] { margin-left: 0; }
  }