/* MyGig HelpScout Docs Theme (Black & White) */
/* Based on uploaded SvenJobs CSS, recoded for MyGig branding.
   Key changes:
   - Primary color: #000000 (black), secondary: #FFFFFF (white)
   - Typography: Inter throughout
   - Buttons, links, focus styles aligned to monochrome palette
   - Replaced "Sven" imagery with neutral defaults
   - Navbar uses MyGig white logo asset
*/

/* ----------------------------- */
/* Typography                    */
/* ----------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --mg-black:#000000;
  --mg-black-2:#111111;
  --mg-black-3:#1B1B1B;
  --mg-white:#FFFFFF;
  --mg-grey:#565656;
  --mg-grey-2:#E5E5E5;
  --mg-border:#F1F1F1;
  --mg-bg:#FAFAFA;
  --radius:8px;
  --shadow-none:none;
}

html, body, input, button, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  font-weight: 400;
  color: var(--mg-black-3);
  background-color: var(--mg-white);
}

strong { font-weight: 800; }
em { color: var(--mg-black-3); }

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

/* ----------------------------- */
/* Navbar                        */
/* ----------------------------- */
.navbar{
  background: var(--mg-black);
}

.navbar .navbar-inner{
  background: var(--mg-black);
  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://cdn.prod.website-files.com/6707764f3133465cd72de208/672e161217ea72ac25cb9b6a_Logo%20MyGig%20white%201.webp');
  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:16px;
  line-height:20px;
  color: var(--mg-white);
  transition: color .2s ease;
}

.navbar .nav .active .caret{ display:none; }

.navbar .brand,
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus{
  color:#e8e8e8;
}

#contact a{
  background-color: var(--mg-white);
  border-radius:6px;
  color: var(--mg-black) !important;
  font-size:16px;
  line-height:18px;
  font-weight:800;
  padding:14px 23px 16px;
  border:1px solid var(--mg-white);
  transition: all .2s ease;
  margin-left:15px;
}
#contact a:hover{
  background-color: var(--mg-grey-2);
  border:1px solid var(--mg-grey-2);
  color: var(--mg-black) !important;
}

/* Navbar responsive */
@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:15px; padding:0 10px; }
  #contact a{ font-size:15px; padding:16px 16px; margin-left:0; }
}
@media only screen and (max-width:768px){
  .navbar .brand{ padding:10px 0; }
  .navbar .btn-navbar{ position:absolute; top:9px; }
  .btn-navbar .icon-bar+.icon-bar{ margin-top:5px; }
  .navbar .btn-navbar .icon-bar{
    background:#fff !important;
    box-shadow:none !important;
    width:25px !important;
    border-radius:100px !important;
  }
  .navbar .nav li a{ padding:15px 0; }
}

/* ----------------------------- */
/* Hero Search                   */
/* ----------------------------- */
#docsSearch{
  border-bottom:0;
  padding:70px 24px 120px;
  background-color: var(--mg-black);
  margin-bottom:120px;
  background-image:none;
}

#docsSearch h1{
  font-size:56px;
  line-height:64px;
  font-weight:800;
  color: var(--mg-white);
  max-width:680px;
  margin:auto;
  text-align:center;
}

#searchBar{
  max-width:650px;
  margin:auto;
  padding:24px 0;
  position:relative;
}
#searchBar .search-query{
  height:57px;
  background-color: var(--mg-white);
  border-radius: var(--radius);
  border:1px solid var(--mg-white);
  padding:24px 20px;
  box-shadow: var(--shadow-none);
  font-size:18px;
  color: var(--mg-grey);
  width:100%;
}
#searchBar button{
  color: var(--mg-white);
  font-weight:800;
  text-shadow:none;
  background: var(--mg-black);
  border-radius: var(--radius);
  border:0;
  font-size:18px;
  padding:19px 28px;
  height:57px;
  position:absolute;
  top:24px;
  right:0;
  transition: background .2s ease;
}
#searchBar button:hover{ background: var(--mg-black-2); }

::placeholder{ color: var(--mg-grey) !important; }

input:focus, input[type=text]:focus{
  border:1px solid var(--mg-black-3) !important;
  box-shadow:none;
}

:focus{ outline:none; }

#serp-dd .result a{ padding:10px 15px; font-size:16px; color:var(--mg-grey); }
#serp-dd .result>li.active,
#serp-dd .result a:hover{
  background: #f3f3f3;
  color:var(--mg-grey);
}

/* Mobile hero */
@media only screen and (max-width:500px){
  #docsSearch{ padding:64px 20px; margin-bottom:40px; }
  #docsSearch h1{ font-size:42px; line-height:50px; }
  #searchBar{ width:100%; }
  #searchBar .search-query{ width:100%; padding:22px 20px; }
}

/* ----------------------------- */
/* Categories                    */
/* ----------------------------- */
.collection-category h2,
.collection-category h2 a,
h2{
  font-size:32px;
  line-height:36px;
  color: var(--mg-black-3);
  font-weight:800;
  text-align:left;
}

.category-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:24px;
  margin-top:24px;
}

.category-list .category{
  text-align:left;
  display:block;
  border:1px solid var(--mg-border);
  border-radius: var(--radius);
  box-shadow:none;
  margin:0;
  padding:32px 24px;
  transition: all .2s ease-in-out;
  background-repeat:no-repeat;
  background-position: 24px 24px;
  background-size: 0 0; /* No background images; monochrome */
  background-color: var(--mg-bg);
  max-width:100%;
  width:100%;
}

.category-list .category:hover{
  background-color:#ffffff;
  border:1px solid var(--mg-black-3);
}

.category-list .category .article-count{
  color: var(--mg-black-3);
  font-size:16px;
  line-height:22px;
  font-weight:400;
  text-decoration: underline;
}

.category-list h3{
  color: var(--mg-black-3);
  font-size:22px;
  line-height:28px;
  font-weight:800;
  margin-bottom:8px;
}
.category-list .category p{
  font-size:16px;
  line-height:26px;
  color: var(--mg-grey);
}

/* Responsive grid */
@media (max-width:1170px){
  .category-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .category-list{ grid-template-columns:1fr; grid-gap:16px; }
}

/* ----------------------------- */
/* Footer                        */
/* ----------------------------- */
footer{
  padding:30px 0;
  border-top:1px solid var(--mg-border);
  margin-top:60px;
  background:#fff;
}
footer p{
  margin:0;
  font-size:12px;
  line-height:28px;
  color: var(--mg-grey);
  text-align:center;
}
footer p a{ color:var(--mg-grey); text-decoration: underline; }
footer p a:hover{ color: var(--mg-black-3); }

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

#sidebar form .search-query{
  border:1px solid var(--mg-border);
  background-color: var(--mg-bg);
  box-shadow:none;
  border-radius: var(--radius);
  font-size:18px;
  color: var(--mg-grey);
  padding:0 15px;
  height:56px;
  margin-bottom:30px;
  background-image:none;
}

#sidebar .nav-list{
  background-color: var(--mg-bg);
  margin-top:23px;
  margin-bottom:0;
  box-shadow:none;
  border-radius: var(--radius);
  padding:25px 28px 32px;
  border:1px solid var(--mg-border);
}

#sidebar h3{
  font-size:22px;
  line-height:28px;
  font-weight:800;
  color: var(--mg-black-3);
  text-transform:none;
}

#sidebar .nav-list .active a{
  color: var(--mg-black-3);
  font-weight:800;
  font-size:18px;
  line-height:22px;
  text-decoration:none;
}
#sidebar .nav-list a{
  font-size:18px;
  line-height:22px;
  color: var(--mg-black-3);
  padding:10px 0;
  text-decoration: underline;
}
#sidebar .nav-list a:hover{ color:#333; }

#sidebar form .search-query:focus{
  border:1px solid var(--mg-black-3);
  border-radius: var(--radius);
  box-shadow:none;
}

.contentWrapper{
  background: var(--mg-bg);
  border-radius: var(--radius);
  border:1px solid var(--mg-border);
  box-shadow:none;
  padding:50px 60px 72px;
}
#main-content{ background:none; }

#categoryHead h1,
.contentWrapper h1{
  font-size:36px;
  line-height:44px;
  font-weight:800;
  color: var(--mg-black-3);
}

.articleList li{ font-size:16px; line-height:26px; color: var(--mg-grey); }
.contentWrapper a{ color: var(--mg-black-3); text-decoration: underline; }
.contentWrapper a:hover{ color:#333; text-decoration: none; }

/* Search dropdowns */
#serp-dd.sb,
#serp-dd{
  border:1px solid var(--mg-black-3);
  border-radius: var(--radius);
  top:150%;
  box-shadow:none;
  font-size:16px;
  line-height:18px;
  color: var(--mg-grey);
  background:#fff;
}

/* Select */
#categoryHead .sort select{
  width:160px;
  height:35px;
  margin:0;
  line-height:24px;
  font-size:13px;
  color: var(--mg-grey);
  border:1px solid var(--mg-border);
  box-shadow:none;
  background:#fff;
}
@media (max-width:768px){
  #categoryHead .sort{ display:none; }
  #main-content{ margin:40px 0 2em; }
  #searchBar{ max-width:100%; }
  #sidebar form{ margin:40px 0; }
  .contentWrapper{ border-radius: var(--radius); padding:40px 24px 56px; }
  .related{ border-radius: var(--radius) !important; padding:56px 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:#fff;
  display:inline-block;
  margin-bottom:22px;
  background-color: var(--mg-black-3);
  text-shadow:none;
  border:none;
  border-radius: 10px;
  padding:14px 24px;
  font-size:16px;
  line-height:18px;
  font-weight:800;
  transition: background .2s ease;
}
#fullArticle .admin-edit:hover{ background-color:#333; }

#fullArticle .title{ font-size:36px; line-height:44px; font-weight:800; color:var(--mg-black-3); }
#fullArticle h2{ font-size:28px; line-height:40px; font-weight:800; color:var(--mg-black-3); }

#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table{
  font-size:16px;
  line-height:26px;
  color: var(--mg-grey);
}

#fullArticle strong{ color: var(--mg-black-3); }

#fullArticle blockquote{
  font-style: normal;
  border-left-color: var(--mg-black-3);
  border-width: 8px;
  padding: 28px 32px;
  background: #f3f3f3;
  border-radius: var(--radius);
}

pre{
  background-color: #EDEEEE;
  color: var(--mg-grey);
  border: 1px solid #EDEEEE;
}
#fullArticle pre, #fullArticle code{
  font-size:14px;
  line-height:22px;
  color: var(--mg-grey);
}

.articleFoot p, .articleFoot time{
  color: var(--mg-grey);
  font-size:14px;
}

#sbContact{ color: var(--mg-black-3); transition: color .2s ease; }
#sbContact:hover{ color:#333; }

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

#fullArticle img{
  border:none;
  border-radius: 16px;
  padding:0;
}

/* Mobile adjustments */
@media (max-width:768px){
  #fullArticle .printArticle{ right:-14px; top:-25px; }
  #fullArticle .title{ font-size:32px; line-height:38px; }
  #fullArticle h2{ font-size:24px; line-height:32px; }
  .articleFoot time.lu{ float:left; }
  .contentWrapper.withRelated{ min-height:205px; padding-bottom:80px; }
}

/* ----------------------------- */
/* Related Articles              */
/* ----------------------------- */
.related{
  background: var(--mg-bg);
  border-radius: var(--radius);
  border:1px solid var(--mg-border);
  box-shadow:none;
  padding:56px 36px;
  margin-top:40px;
}
.related h3{
  font-size:22px;
  line-height:28px;
  font-weight:800;
  color: var(--mg-black-3);
}
.related ul>li,
.related ul>li a{
  color: var(--mg-black-3);
  font-size:16px;
  line-height:22px;
  text-decoration: underline;
}
.related a:hover{ color:#333; text-decoration:none; }

/* ----------------------------- */
/* Contact Modal                 */
/* ----------------------------- */
#contactModal, .abuse{
  border:1px solid var(--mg-border);
  box-shadow: var(--shadow-none);
  border-radius: var(--radius);
  top:6%;
  background:#fff;
}
.modal-body{ padding: 0 40px 50px; min-height: 630px; }

#contactModal h2, .abuse h2{
  padding: 40px 0 15px 40px;
  border-bottom:none;
  font-size:28px;
  line-height:32px;
  font-weight:800;
  color: var(--mg-black-3);
}

.form-horizontal .control-label{
  font-size:16px;
  line-height:26px;
  color: var(--mg-grey);
}
input[type=text],
.form-horizontal textarea{
  border-radius: var(--radius);
  border:1px solid #CAD8E3;
  box-shadow:none;
  background-color:#fff;
  height:40px;
  font-size:14px;
  line-height:16px;
  color: var(--mg-grey);
  padding:4px 12px;
  width:95%;
}
#contactModal input[type=file]{ height:25px; padding:18px 12px; }
#contactModal input[type=submit].btn,
button.btn, input[type=submit].btn{
  border-radius: var(--radius);
  background-color: var(--mg-black-3);
  font-size:16px;
  line-height:18px;
  border:none;
  background-image:none;
  width:100%;
  height:50px;
  text-shadow:none;
  color:#FFF;
  font-weight:800;
  margin-top:15px;
  transition: background .2s ease;
}
#contactModal input[type=submit].btn:hover,
button.btn:hover, input[type=submit].btn:hover{
  background-color:#333;
}

label{
  font-size:16px;
  line-height:28px;
  font-weight:800;
  color: var(--mg-black-3);
}

textarea:focus, input:focus{ box-shadow:none; }
textarea:focus{ border:1px solid var(--mg-black-3); }

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

/* Error states */
#contactModal .parsley-errors-list{
  font-size:14px; margin-top:12px; color:#D60000;
}
#contactModal .parsley-error:not([type=file]),
#contactForm .parsley-error:not([type=file]),
.abuse .parsley-error:not([type=file]){
  border:1px solid #D60000;
}

/* ----------------------------- */
/* Clean up Sven assets          */
/* ----------------------------- */
/* Remove category background images from previous Sven theme */
#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 */