/* ==========================================================================
   Scottoiler brand skin for PHPKB 9.5
   Loaded last from theme-css.php, so it overrides PHPKB's default theme.
   Colours taken from www.scottoiler.com (ScottoilerFlaer theme); fonts are free Google Fonts.
   ========================================================================== */

/* Headings use Schibsted Grotesk (free, Google Fonts) - the closest free match to
   scottoiler.com's licensed Founders Grotesk. Loaded from theme-css.php. */

:root{
 --so-yellow:#fbde4b; --so-teal:#108480; --so-teal-dark:#0c6663; --so-black:#000; --so-text:#4c4c4c;
 /* PHPKB theme variables */
 --theme-color:#000000; --theme-text-color:#4c4c4c;
 --header-text-color:#ffffff; --header-text-hover-color:#fbde4b;
 --header-btn-bg-color:#fbde4b; --header-btn-text-color:#000000; --header-btn-hover-color:#e9c92f;
 --links-text-color:#4c4c4c; --links-hover-color:#108480;
 --btn-bg-color:#108480; --btn-text-color:#ffffff; --btn-hover-color:#0c6663;
 --toggle-btn-bg-color:#108480; --toggle-btn-text-color:#ffffff;
 --theme-panel-color:#f4f4f4; --theme-panel-border-color:#e3e3e3;
 --article-h1-color:#000; --article-h2-color:#000; --article-h3-color:#000; --article-h4-color:#000;
}

/* Typography */
body,button,input,select,textarea,.tooltip,.popover{font-family:Inter,Helvetica,Arial,sans-serif!important}
body{color:var(--so-text)}
h1,h2,h3,.masthead h1,.cat-title,.subscribe-title,.card-header,.panel-heading,.section-title,.so-subcats-title{font-family:"Schibsted Grotesk",Inter,Helvetica,Arial,sans-serif!important;font-weight:800!important;letter-spacing:0}
a{color:var(--so-teal)}
a:hover,a:focus{color:var(--so-teal-dark)}

/* Header bar + hanging yellow logo block */
.nav-absolute,.nav-fixed,.mainnav{background:#000!important}
.mainnav{height:90px;min-height:90px;border:0!important;box-shadow:none!important}
.mainnav .container{align-items:center;height:90px}
.mainnav .navbar-brand{background:transparent;padding:0!important;margin:0!important;align-self:flex-start;position:relative;z-index:20;line-height:0;box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* Square Scottoiler logo (images/scottoiler-logo-square.jpg), hanging below the 90px bar like scottoiler.com */
.mainnav .navbar-brand img{height:130px!important;width:auto!important;max-height:none!important;display:block}
.mainnav .dl-menu{margin-top:0}
.mainnav .dl-menu > li > a,.mainnav .dl-menu > li > a span{color:#fff!important;background:transparent!important;font-weight:400;font-size:17px}
.mainnav .dl-menu > li > a span{border:0!important;box-shadow:none!important}
.mainnav .dl-menu > li > a:hover span,.mainnav .dl-menu > li.active > a span{color:var(--so-yellow)!important}

/* Search hero */
.search-section,.home-search,.single-masthead{background:#111 linear-gradient(180deg,#000 0%,#1a1a1a 100%)!important}
.home-search .masthead{padding-top:150px;padding-bottom:60px}
.masthead h1{color:#fff!important;font-size:46px}
.search-desc{color:#ccc!important;font-weight:400}
.searchbox .search-field{border-radius:0!important;border:0!important}
.searchbox #search_btn{background:var(--so-teal)!important;color:#fff!important;border-radius:0!important}
.home-search a{color:var(--so-yellow)!important}

/* Content */
.badge,.badge-primary,.badge-info{background:var(--so-teal)!important;color:#fff!important;border-radius:0}
.btn,.form-control{border-radius:0!important}
.btn-primary,.btn-success,.btn-info{background:var(--so-teal)!important;border-color:var(--so-teal)!important;color:#fff!important;font-weight:700}
.btn-primary:hover,.btn-success:hover,.btn-info:hover{background:var(--so-teal-dark)!important;border-color:var(--so-teal-dark)!important}
.card,.panel{border-radius:0!important}
.card-header,.panel-heading{background:#f4f4f4!important;color:#000!important;font-size:20px}
.nav-tabs .nav-link.active,.nav-tabs .active > a{border-top:3px solid var(--so-teal)!important;color:#000!important}

/* Footer */
footer{background:#000!important;color:#ccc!important;padding-top:40px}
footer .subscribe-title{color:#fff!important;font-size:26px}
footer p{color:#ccc}
footer a{color:#fff}
.so-footer{background:#000;color:#ccc;border-top:1px solid #222;padding:22px 0 28px;font-size:14px}
.so-footer a{color:#fff;text-decoration:none;margin-right:18px}
.so-footer a:hover{color:var(--so-yellow)}
.so-footer .so-addr{margin-top:10px;color:#999}
.scroll-top{background:var(--so-teal)!important;color:#fff!important}

/* Tablet / phone */
@media (max-width:1048px){
 .mainnav,.mainnav .container{height:70px;min-height:70px}
 .mainnav .navbar-brand{padding:0!important;margin-left:44px!important}
 .mainnav .navbar-brand img{height:70px!important}
 .home-search .masthead{padding-top:110px}
 .masthead h1{font-size:32px}
 .so-footer a{display:inline-block;margin-bottom:6px}
}

/* Sub-category tiles on category pages (category.php) */
.so-subcats{margin:6px 0 30px}
.so-subcats-title{font-size:26px;color:#000;margin:0 0 16px}
.so-subcats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.so-subcat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:#fff;border:1px solid #e3e3e3;border-left:4px solid var(--so-yellow);color:#000!important;font-weight:600;text-decoration:none!important;transition:border-color .15s,background .15s}
.so-subcat:hover,.so-subcat:focus{border-color:var(--so-teal);border-left-color:var(--so-teal);background:#f4f4f4}
.so-subcat-name{line-height:1.3}
.so-subcat-count{flex:none;min-width:30px;padding:2px 8px;background:var(--so-teal);color:#fff;font-size:13px;font-weight:700;text-align:center}
@media (max-width:575px){.so-subcats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Mobile / tablet burger menu: dark panel instead of white (white text was invisible) */
@media (max-width:1048px){
 .mainnav .dl-menuwrapper{top:70px!important}
 .mainnav .dl-menuwrapper ul,.mainnav .dl-menu,.mainnav .dl-menu .lg-submenu{background:#111!important;box-shadow:0 10px 24px rgba(0,0,0,.45)!important;border:0!important}
 .mainnav .dl-menuwrapper li{border-bottom:1px solid #2a2a2a!important;background:transparent!important}
 .mainnav .dl-menuwrapper li:last-child{border-bottom:0!important}
 .mainnav .dl-menuwrapper li > a,.mainnav .dl-menuwrapper li > a span{color:#fff!important;background:transparent!important}
 .mainnav .dl-menuwrapper li > a:hover,.mainnav .dl-menuwrapper li > a:focus,.mainnav .dl-menuwrapper li.active > a{background:#1f1f1f!important}
 .mainnav .dl-menuwrapper li > a:hover,.mainnav .dl-menuwrapper li > a:hover span,.mainnav .dl-menuwrapper li > a:focus span,.mainnav .dl-menuwrapper li.active > a,.mainnav .dl-menuwrapper li.active > a span{color:var(--so-yellow)!important}
 .mainnav .dl-menuwrapper li.active > a{box-shadow:inset 4px 0 0 var(--so-yellow)!important}
 .mainnav .dl-menuwrapper .dl-back > a{color:#ccc!important}
 .mainnav .dl-menuwrapper li > a.nav-btn{background:var(--so-teal)!important;color:#fff!important;border-color:var(--so-teal)!important}
}