@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@600;700;800&display=swap');
/* =====================================================================
   ClinchWorks brand layer for the Shagen client theme
   Loaded AFTER theme.css. theme.css stays vendor-original.
   Palette: orange #F26B21 / near-black #1D1D1F; fonts Poppins/Inter
   ===================================================================== */
:root {
  --brand-primary:      #1D1D1F;  /* near-black */
  --brand-primary-dark: #111113;  /* top bar */
  --brand-accent:       #F26B21;  /* orange */
  --brand-accent-dark:  #C2541A;  /* orange for text on white (4.6:1) */
  --brand-header-bg:    #FFFFFF;  /* logo requires a light header */
}

body, input, select, textarea { font-family: 'Inter', 'PT Sans', Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#header ul#nav li, .btn, .button { font-family: 'Poppins', 'Inter', Arial, sans-serif; }

body                       { background: var(--brand-primary); }
.topbar                    { background: var(--brand-primary-dark); }
#footer                    { background: var(--brand-primary); }
#footer .social-icons ul li a:hover { color: var(--brand-accent); }

a:link, a:visited          { color: var(--brand-accent-dark); }
a:hover, a:focus           { color: var(--brand-primary); }
.topbar a:link, .topbar a:visited,
#footer a:link, #footer a:visited { color: #E8E8EA; }
.topbar a:hover, #footer a:hover  { color: var(--brand-accent); }

#header                    { background: var(--brand-header-bg); color: var(--brand-primary);
                             border-bottom: 3px solid var(--brand-accent); }
#header #logo img          { max-height: 56px; width: auto; max-width: 100%; }
#header .nav-toggle        { color: var(--brand-primary); }
#header ul#nav li a:link,
#header ul#nav li a:visited { color: var(--brand-primary); }
#header ul#nav li a:hover,
#header ul#nav li a.active  { color: var(--brand-accent-dark); }

#landing_page .lead-info   { background: var(--brand-primary) url(../images/hero.jpg) center / cover no-repeat; }
#landing_page .lead-info a:link,
#landing_page .lead-info a:visited { color: #FFFFFF; text-decoration: underline; }

#landing_page .ticket_action .action-cover span { background: var(--brand-accent); }
#landing_page .ticket_action .action-cover .front-page-button a.green,
#landing_page .ticket_action .action-cover .front-page-button a.blue {
  background: var(--brand-primary); }
#landing_page .ticket_action .action-cover .front-page-button a.green:hover,
#landing_page .ticket_action .action-cover .front-page-button a.blue:hover {
  background: var(--brand-accent-dark); color: #FFFFFF; }

#landing_page .kb-home-search { background: var(--brand-primary); }
#landing_page .kb-home-search .search-form .form-group .btn { background: var(--brand-accent-dark); }
#landing_page .front-page .category-name { color: var(--brand-accent-dark); }
.kb-box-cover ul#kb li h4 span.faded     { color: var(--brand-accent-dark); }

#ticketInfo .ticket-info-title { background: var(--brand-primary); }
.progress-bar                  { background-color: var(--brand-accent); }

.btn-primary, .btn-primary:visited {
  background-color: var(--brand-primary); border-color: var(--brand-primary); color: #FFFFFF; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--brand-accent-dark); border-color: var(--brand-accent-dark); color: #FFFFFF; }

@media screen and (max-width: 767px) {
  #header ul#nav li             { border-bottom: 1px solid #E5E7EB; }
  #header ul#nav li:first-child { border-top: 1px solid #E5E7EB; }
}