/* ============================================================
   MyGig HelpScout Docs Theme — v2 "Design System"
   Replaces the black & white Inter theme.
   Foundations: MyGig Design System
   - Ink neutrals (#0E0D0B, never #000) on warm paper (#FAF8F4)
   - Brand violet #6C60FF for CTAs, selection, brand moments
   - Sora (display) + Manrope (body) + JetBrains Mono (meta)
   - 12px default radius, pills for chips, stamp CTA on light
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink-0:#FAF8F4; --ink-50:#F2EFE8; --ink-100:#E5E1D7; --ink-200:#CFC9BA;
  --ink-300:#A8A294; --ink-400:#6F6A60; --ink-500:#3D3A33; --ink-700:#1F1D19; --ink-900:#0E0D0B;
  --brand-50:#F5F4FE; --brand-100:#E8E6F9; --brand-200:#DBD8FA; --brand-300:#B8B1F7;
  --brand-500:#6C60FF; --brand-700:#4B3FD9; --brand-900:#2D2580;
  --surface-0:#FFFFFF;
  --success-500:#1F8A4C; --danger-500:#D03826;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,13,11,.06),0 1px 1px rgba(14,13,11,.04);
  --sh-2:0 2px 6px rgba(14,13,11,.08),0 1px 2px rgba(14,13,11,.05);
  --sh-3:0 8px 24px rgba(14,13,11,.10),0 2px 6px rgba(14,13,11,.06);
  --sh-4:0 20px 48px rgba(14,13,11,.14),0 6px 14px rgba(14,13,11,.08);
  --sh-stamp:4px 4px 0 var(--ink-900);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ----------------------------- */
/* Base                          */
/* ----------------------------- */
html,body,input,button,select,textarea{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink-700);
}
body{ background-color:var(--ink-0); }
strong{ font-weight:700; color:var(--ink-900); }
em{ color:var(--ink-700); }

.container-fluid,
.navbar-inner{
  max-width:1234px;
  margin:0 auto;
  position:relative;
}

/* Keyboard focus — brand violet, never default blue */
:focus{ outline:none; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand-500);
  outline-offset:2px;
}

/* ----------------------------- */
/* Navbar                        */
/* ----------------------------- */
.navbar{ background:var(--ink-900); }
.navbar .navbar-inner{
  background:var(--ink-900);
  box-shadow:none;
  z-index:999;
  position:relative;
}
.navbar .brand{
  display:block;
  width:220px;
  max-width:240px;
  height:46px;
  padding:16px 0;
  background-image:url('https://d33v4339jhl8k0.cloudfront.net/docs/assets/68abf96a52c11262c1b99e50/images/68ca2f3f1581190e6e2a5cb8/MyGig-logo-blanc-sur-noir.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:left center;
  text-indent:-9999px;
  overflow:hidden;
}
.navbar .brand span{ display:none; }

.navbar .nav li a{
  font-size:15px;
  line-height:20px;
  font-weight:600;
  color:rgba(250,248,244,.72);
  transition:color .2s var(--ease);
}
.navbar .nav .active .caret{ display:none; }
.navbar .nav li a:hover,
.navbar .nav li a:focus{ color:#FFFFFF; }
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus{ color:#FFFFFF; font-weight:700; }

/* Contact button — brand violet */
#contact a{
  background-color:var(--brand-500);
  border-radius:var(--r-md);
  color:#FFFFFF !important;
  font-size:15px;
  line-height:18px;
  font-weight:700;
  padding:14px 22px 15px;
  border:none;
  transition:background .2s var(--ease);
  margin-left:15px;
}
#contact a:hover{ background-color:var(--brand-700); color:#FFFFFF !important; }

@media (min-width:769px){
  .navbar .nav{ position:absolute; right:0; left:auto; bottom:18px; margin-right:0; }
}
@media only screen and (min-width:768px) and (max-width:910px){
  .navbar .nav li a{ font-size:14px; padding:0 10px; }
  #contact a{ font-size:14px; padding:15px 16px; margin-left:0; }
}
@media only screen and (max-width:768px){
  .navbar .brand{ padding:10px 0; }
  .navbar .btn-navbar{ position:absolute; top:9px; background:var(--ink-900); border:1px solid var(--ink-500); }
  .btn-navbar .icon-bar+.icon-bar{ margin-top:5px; }
  .navbar .btn-navbar .icon-bar{
    background:#FFFFFF !important;
    box-shadow:none !important;
    width:25px !important;
    border-radius:100px !important;
  }
  .navbar .nav li a{ padding:15px 0; }
  #contact a{ margin-left:0; display:inline-block; margin-top:8px; }
}

/* ----------------------------- */
/* Hero search — ink, violet CTA */
/* ----------------------------- */
#docsSearch{
  border-bottom:0;
  padding:64px 24px 150px;
  background-color:var(--ink-900);
  background-image:none;
  margin-bottom:-80px; /* category cards overlap the hero */
}
#docsSearch h1{
  font-family:var(--font-display);
  font-size:52px;
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  color:#FFFFFF;
  max-width:680px;
  margin:auto;
  text-align:center;
}
/* Eyebrow above the headline */
#docsSearch h1:before{
  content:'MyGig support';
  display:block;
  font-family:var(--font-body);
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brand-300);
  margin-bottom:16px;
}

#searchBar{
  max-width:640px;
  margin:auto;
  padding:32px 0 0;
  position:relative;
}
#searchBar .search-query{
  height:60px;
  background-color:#FFFFFF;
  border-radius:var(--r-md);
  border:1px solid #FFFFFF;
  padding:0 130px 0 20px;
  box-shadow:var(--sh-4);
  font-size:17px;
  color:var(--ink-700);
  width:100%;
  box-sizing:border-box;
}
#searchBar button{
  color:#FFFFFF;
  font-family:var(--font-body);
  font-weight:700;
  text-shadow:none;
  background:var(--brand-500);
  border-radius:var(--r-sm);
  border:0;
  font-size:15px;
  padding:0 24px;
  height:48px;
  position:absolute;
  top:38px;
  right:6px;
  transition:background .2s var(--ease);
}
#searchBar button:hover{ background:var(--brand-700); }

::placeholder{ color:var(--ink-300) !important; }
input:focus,input[type=text]:focus{
  border:1px solid var(--brand-500) !important;
  box-shadow:none;
}

/* Search results dropdown */
#serp-dd.sb,
#serp-dd{
  border:1px solid var(--ink-100);
  border-radius:var(--r-md);
  top:150%;
  box-shadow:var(--sh-3);
  font-size:15px;
  line-height:18px;
  color:var(--ink-500);
  background:#FFFFFF;
  overflow:hidden;
}
#serp-dd .result a{ padding:12px 16px; font-size:15px; font-weight:600; color:var(--ink-700); }
#serp-dd .result>li.active,
#serp-dd .result a:hover{ background:var(--brand-50); color:var(--ink-900); }

@media only screen and (max-width:768px){
  #docsSearch{ padding:56px 24px 130px; margin-bottom:-72px; }
  #docsSearch h1{ font-size:44px; }
}
@media only screen and (max-width:500px){
  #docsSearch{ padding:48px 20px 116px; margin-bottom:-64px; }
  #docsSearch h1{ font-size:34px; line-height:1.15; }
  #searchBar{ width:100%; }
  #searchBar .search-query{ width:100%; padding:0 20px; font-size:16px; }
  #searchBar button{ position:static; margin-top:12px; width:100%; }
}

/* ----------------------------- */
/* Homepage collections          */
/* ----------------------------- */
.collection-category h2,
.collection-category h2 a,
h2{
  font-family:var(--font-display);
  font-size:26px;
  line-height:1.2;
  color:var(--ink-900);
  font-weight:700;
  letter-spacing:-.01em;
  text-align:left;
  text-decoration:none;
}
.collection-category{ margin-bottom:24px; }

/* First collection heading sits on the dark hero overlap */
#main-content .collection-category:first-of-type h2,
#main-content .collection-category:first-of-type h2 a{ color:#FFFFFF; }

/* Audience eyebrow pills — keyed off collection URLs */
.collection-category h2 a[href*='im-a-business']:before,
.collection-category h2 a[href*='im-a-worker']:before,
.collection-category h2 a[href*='legals']:before{
  display:inline-block;
  font-family:var(--font-body);
  font-size:11px;
  line-height:1;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--r-pill);
  margin-right:14px;
  vertical-align:4px;
}
.collection-category h2 a[href*='im-a-business']:before{
  content:'For businesses';
  background:var(--ink-900); color:#FFFFFF;
  border:1px solid rgba(250,248,244,.35); /* readable on the dark overlap */
}
.collection-category h2 a[href*='im-a-worker']:before{
  content:'For workers';
  background:var(--brand-500); color:#FFFFFF;
}
.collection-category h2 a[href*='legals']:before{
  content:'Legals';
  background:var(--ink-100); color:var(--ink-500);
}

.category-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:20px;
  margin-top:20px;
  margin-bottom:44px;
}
.category-list .category{
  text-align:left;
  display:block;
  border:1px solid var(--ink-100);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  margin:0;
  padding:24px;
  transition:all .2s var(--ease);
  background-image:none !important;
  background-color:var(--surface-0);
  max-width:100%;
  width:100%;
  box-sizing:border-box;
}
.category-list .category:hover{
  background-color:var(--surface-0);
  border:1px solid var(--ink-900);
  transform:translateY(-2px);
  box-shadow:var(--sh-2);
}
.category-list h3{
  font-family:var(--font-display);
  color:var(--ink-900);
  font-size:18px;
  line-height:1.3;
  font-weight:600;
  margin-bottom:14px;
}
.category-list .category .article-count{
  display:inline-block;
  background:var(--brand-100);
  color:var(--brand-900);
  font-size:12px;
  line-height:1;
  font-weight:600;
  padding:6px 11px;
  border-radius:var(--r-pill);
  text-decoration:none;
}
.category-list .category p{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-400);
  margin-top:10px;
}

@media (max-width:1170px){ .category-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .category-list{ grid-template-columns:1fr; grid-gap:14px; margin-bottom:36px; }
  h2,.collection-category h2,.collection-category h2 a{ font-size:22px; }
  .collection-category h2 a[href*='im-a-business']:before,
  .collection-category h2 a[href*='im-a-worker']:before,
  .collection-category h2 a[href*='legals']:before{
    display:block; width:fit-content; margin:0 0 10px; vertical-align:baseline;
  }
}

/* ----------------------------- */
/* Footer                        */
/* ----------------------------- */
footer{
  padding:26px 0;
  border-top:1px solid var(--ink-100);
  margin-top:64px;
  background:var(--ink-0);
}
footer p{
  margin:0;
  font-size:13px;
  line-height:28px;
  color:var(--ink-400);
  text-align:center;
}
footer p a{ color:var(--ink-400); text-decoration:underline; }
footer p a:hover{ color:var(--ink-900); }

/* ----------------------------- */
/* Interior: sidebar + content   */
/* ----------------------------- */
#searchBar.sm button .icon-search{ display:none; }

#sidebar form .search-query{
  border:1.5px solid var(--ink-100);
  background-color:var(--surface-0);
  box-shadow:none;
  border-radius:var(--r-md);
  font-size:15px;
  color:var(--ink-700);
  padding:0 16px;
  height:50px;
  margin-bottom:24px;
  background-image:none;
}
#sidebar form .search-query:focus{
  border:1.5px solid var(--brand-500) !important;
  border-radius:var(--r-md);
  box-shadow:none;
}

#sidebar .nav-list{
  background-color:var(--surface-0);
  margin-top:23px;
  margin-bottom:0;
  box-shadow:var(--sh-1);
  border-radius:var(--r-md);
  padding:22px 24px 26px;
  border:1px solid var(--ink-100);
}
#sidebar h3{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.3;
  font-weight:600;
  color:var(--ink-900);
  text-transform:none;
}
#sidebar .nav-list a{
  font-size:14.5px;
  line-height:20px;
  font-weight:500;
  color:var(--ink-500);
  padding:9px 0;
  text-decoration:none;
  transition:color .15s var(--ease);
}
#sidebar .nav-list a:hover{ color:var(--ink-900); }
#sidebar .nav-list .active a{
  color:var(--brand-900);
  font-weight:700;
  font-size:14.5px;
  line-height:20px;
  background:var(--brand-100);
  border-radius:var(--r-sm);
  padding:9px 12px;
  margin:1px -12px;
  text-decoration:none;
}

.contentWrapper{
  background:var(--surface-0);
  border-radius:var(--r-lg);
  border:1px solid var(--ink-100);
  box-shadow:var(--sh-1);
  padding:44px 48px 48px;
}
#main-content{ background:none; }

#categoryHead h1,
.contentWrapper h1{
  font-family:var(--font-display);
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--ink-900);
}

/* Category article list — rows with dividers */
.articleList{ margin-top:10px; }
.articleList li{
  font-size:16px;
  line-height:26px;
  color:var(--ink-500);
  list-style:none;
  border-top:1px solid var(--ink-50);
  padding:14px 4px;
}
.articleList li:first-child{ border-top:none; }
.articleList li a{ font-weight:600; color:var(--ink-700); }
.contentWrapper a{ color:var(--brand-700); text-decoration:underline; }
.contentWrapper a:hover{ color:var(--brand-900); text-decoration:none; }
.articleList li a{ text-decoration:none; }
.articleList li a:hover{ color:var(--brand-700); text-decoration:underline; }

/* Sort select */
#categoryHead .sort select{
  width:170px;
  height:38px;
  margin:0;
  line-height:24px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-500);
  border:1.5px solid var(--ink-100);
  border-radius:var(--r-sm);
  box-shadow:none;
  background:var(--surface-0);
}

@media (max-width:768px){
  #categoryHead .sort{ display:none; }
  #main-content{ margin:40px 0 2em; }
  #searchBar{ max-width:100%; }
  #sidebar form{ margin:40px 0 0; }
  .contentWrapper{ border-radius:var(--r-md); padding:32px 24px 44px; }
  .related{ border-radius:var(--r-md) !important; padding:40px 24px !important; }
  .related h3{ padding-left:0 !important; }
  .related ul{ margin-left:25px !important; }
}

/* ----------------------------- */
/* Article page                  */
/* ----------------------------- */
#fullArticle{ max-width:100%; margin:auto; position:relative; }

#fullArticle .admin-edit{
  color:#FFFFFF;
  display:inline-block;
  margin-bottom:22px;
  background-color:var(--ink-900);
  text-shadow:none;
  border:none;
  border-radius:var(--r-md);
  padding:13px 22px;
  font-size:15px;
  line-height:18px;
  font-weight:700;
  transition:background .2s var(--ease);
}
#fullArticle .admin-edit:hover{ background-color:var(--ink-700); }

#fullArticle .title{
  font-family:var(--font-display);
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--ink-900);
}
#fullArticle h2{
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.35;
  font-weight:600;
  color:var(--ink-900);
}
#fullArticle h3{
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.35;
  font-weight:600;
  color:var(--ink-900);
}

#fullArticle,#fullArticle p,#fullArticle ul,#fullArticle ol,#fullArticle li,
#fullArticle div,#fullArticle blockquote,#fullArticle dd,#fullArticle table{
  font-size:16px;
  line-height:1.65;
  color:var(--ink-500);
}
#fullArticle strong{ color:var(--ink-900); }

/* Callout — violet tint, no heavy left border */
#fullArticle blockquote{
  font-style:normal;
  border:1px solid var(--brand-200);
  border-left:1px solid var(--brand-200);
  border-left-width:1px;
  padding:20px 24px;
  background:var(--brand-50);
  border-radius:var(--r-md);
}

/* Code — JetBrains Mono */
pre{
  background-color:var(--ink-50);
  color:var(--ink-700);
  border:1px solid var(--ink-100);
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
}
#fullArticle pre,#fullArticle code{
  font-family:var(--font-mono);
  font-size:14px;
  line-height:22px;
  color:var(--ink-700);
}
#fullArticle code{ background:var(--ink-50); border-radius:4px; padding:1px 5px; }

#fullArticle img{
  border:1px solid var(--ink-100);
  border-radius:var(--r-md);
  padding:0;
  max-width:100%;
  height:auto;
}
#fullArticle table{ display:block; overflow-x:auto; }

/* Meta + footer of the article */
.articleFoot p,.articleFoot time{
  color:var(--ink-400);
  font-size:13px;
}
.articleFoot time{ font-family:var(--font-mono); font-size:12.5px; }

#sbContact{ color:var(--brand-700); transition:color .2s var(--ease); }
#sbContact:hover{ color:var(--brand-900); }

#fullArticle .printArticle{
  position:absolute;
  right:-3%;
  top:-25px;
  transition:.2s;
}
.icon-print{ transition:.2s; }
#fullArticle .printArticle:hover .icon-print{ color:var(--ink-900); }

@media (max-width:768px){
  #fullArticle .printArticle{ right:-14px; top:-25px; }
  #fullArticle .title{ font-size:28px; line-height:1.2; }
  #fullArticle h2{ font-size:20px; line-height:1.35; }
  .articleFoot time.lu{ float:left; }
  .contentWrapper.withRelated{ min-height:205px; padding-bottom:80px; }
}

/* ----------------------------- */
/* Related articles              */
/* ----------------------------- */
.related{
  background:var(--surface-0);
  border-radius:var(--r-lg);
  border:1px solid var(--ink-100);
  box-shadow:var(--sh-1);
  padding:40px 36px;
  margin-top:32px;
}
.related h3{
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.3;
  font-weight:600;
  color:var(--ink-900);
}
.related ul>li,
.related ul>li a{
  color:var(--brand-700);
  font-size:14.5px;
  line-height:22px;
  font-weight:500;
  text-decoration:underline;
}
.related a:hover{ color:var(--brand-900); text-decoration:none; }

/* ----------------------------- */
/* Contact modal                 */
/* ----------------------------- */
#contactModal,.abuse{
  border:1px solid var(--ink-100);
  box-shadow:var(--sh-4);
  border-radius:var(--r-xl);
  top:6%;
  background:var(--surface-0);
}
.modal-backdrop{ background:var(--ink-900); }
.modal-backdrop.in{ opacity:.55; }
.modal-body{ padding:0 40px 50px; min-height:630px; }

#contactModal h2,.abuse h2{
  padding:40px 0 15px 40px;
  border-bottom:none;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1.15;
  font-weight:700;
  color:var(--ink-900);
}

.form-horizontal .control-label{
  font-size:15px;
  line-height:24px;
  color:var(--ink-500);
}
label{
  font-size:14px;
  line-height:26px;
  font-weight:700;
  color:var(--ink-900);
}
input[type=text],
.form-horizontal textarea{
  border-radius:var(--r-md);
  border:1.5px solid var(--ink-100);
  box-shadow:none;
  background-color:var(--surface-0);
  height:42px;
  font-size:14px;
  line-height:16px;
  color:var(--ink-700);
  padding:4px 12px;
  width:95%;
}
textarea:focus,input:focus{ box-shadow:none; }
textarea:focus{ border:1.5px solid var(--brand-500); }
#contactModal input[type=file]{ height:25px; padding:18px 12px; }

/* Primary buttons — the stamp motif, on light surfaces */
#contactModal input[type=submit].btn,
button.btn,input[type=submit].btn{
  border-radius:var(--r-md);
  background-color:var(--brand-500);
  font-size:16px;
  line-height:18px;
  border:3px solid var(--ink-900);
  box-shadow:var(--sh-stamp);
  background-image:none;
  width:100%;
  height:54px;
  text-shadow:none;
  color:#FFFFFF;
  font-weight:700;
  margin-top:15px;
  transition:all .12s var(--ease);
}
#contactModal input[type=submit].btn:hover,
button.btn:hover,input[type=submit].btn:hover{
  background-color:var(--brand-500);
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink-900);
}

/* Close button */
.modal #closeBtn{ top:30px; right:30px; }
#contactModal .icon-close{
  width:18px; height:18px; opacity:.7; position:relative; right:50%;
  background:none;
}
#contactModal .icon-close:hover{ opacity:1; }

/* Error states */
#contactModal .parsley-errors-list{
  font-size:13px; margin-top:10px; color:var(--danger-500);
}
#contactModal .parsley-error:not([type=file]),
#contactForm .parsley-error:not([type=file]),
.abuse .parsley-error:not([type=file]){
  border:1.5px solid var(--danger-500);
}

/* Contact modal — mobile */
@media (max-width:600px){
  #contactModal,.abuse{ border-radius:var(--r-lg); top:2%; }
  .modal-body{ padding:0 22px 36px; min-height:0; }
  #contactModal h2,.abuse h2{ padding:28px 0 12px 22px; font-size:24px; }
  input[type=text],.form-horizontal textarea{ width:100%; box-sizing:border-box; }
  .modal #closeBtn{ top:22px; right:22px; }
}

/* ----------------------------- */
/* Legacy cleanup                */
/* ----------------------------- */
#category-150,#category-151,#category-152,#category-32,
#category-67,#category-69,#category-129,#category-70,#category-68{
  background-image:none !important;
}
/* End MyGig theme v2 */