/* PontiacChieftain MyBB Theme Layer
   Load AFTER MyBB global.css
*/

/* =========================
   Theme variables
========================= */
:root{
  --pc-bg: #f6f7fb;
  --pc-surface: #ffffff;
  --pc-surface-2: #f2f4f8;
  --pc-text: #111827;
  --pc-muted: #6b7280;
  --pc-border: rgba(17,24,39,.10);
  --pc-shadow: 0 10px 25px rgba(17,24,39,.10);
  --pc-shadow-sm: 0 6px 14px rgba(17,24,39,.08);
  --pc-red: #c8102e;
  --pc-red-2: #a10d25;

  /* MAIN WIDTH CONTROL (match your homepage container width) */
  --pc-max: 1100px;

  --pc-pad: 16px;

  /* Content breathing room (top/bottom inside the main content area) */
  --pc-content-pad-top: 18px;
  --pc-content-pad-bottom: 28px;
}

html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
  color: var(--pc-text);
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(200,16,46,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(15,42,88,.08), transparent 60%),
    var(--pc-bg);
}

/* Global links (site-wide) */
a{ color: #1f2937; }
a:hover{ color: #a10d25; }

/* =========================
   Main container (rounded shell)
========================= */
#container{
  width:100%;
  max-width: var(--pc-max);
  margin: 16px auto 44px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  box-shadow: var(--pc-shadow);
  overflow:hidden;
  padding: 0;
}
@media (max-width: 560px){
  #container{ margin: 10px auto 26px; border-radius: 12px; }
}

/* =========================
   MyBB inner wrappers
   (controls perceived content width + padding)
========================= */
#content > .wrapper,
#panel .wrapper,
#header .wrapper{
  width: 100%;
  max-width: var(--pc-max);
  margin: 0 auto;
  padding-left: var(--pc-pad);
  padding-right: var(--pc-pad);
  box-sizing: border-box;
}

/* IMPORTANT:
   Put vertical breathing room on the wrapper (NOT #content),
   because MyBB/other rules often zero out #content padding. */
#content > .wrapper{
  padding-top: var(--pc-content-pad-top) !important;
  padding-bottom: var(--pc-content-pad-bottom) !important;
}

/* Keep MyBB from adding its own padding that fights the wrapper */
#content{
  padding: 0 !important;
}

/* =========================
   Common MyBB UI cleanup
========================= */
.tborder,
.trow1, .trow2,
.thead, .tcat,
.navigation,
.quick_jump,
.post,
.post.classic{
  border-color: var(--pc-border) !important;
}

.thead, .tcat{
  background: rgba(200,16,46,.08) !important;
  color: #111827 !important;
}
.thead a, .tcat a{ color: #111827 !important; }

/* =========================
   Buttons + inputs
========================= */
input.button,
a.button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent !important;
  background: var(--pc-red) !important;
  color: #fff !important;
  font-weight: 800;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow: 0 3px 10px rgba(17,24,39,.14);
}
input.button:hover,
a.button:hover,
input[type="submit"]:hover{
  background: var(--pc-red-2) !important;
}

input.textbox, textarea, select,
input[type="text"], input[type="password"], input[type="search"], input[type="email"]{
  border-radius: 12px !important;
  border: 1px solid rgba(17,24,39,.18) !important;
  padding: 11px 12px !important;
  outline:none;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(200,16,46,.65) !important;
  box-shadow: 0 0 0 4px rgba(200,16,46,.14) !important;
}

/* =========================
   Header/logo
========================= */
.pc-header{ padding: 14px 0 6px; }
.pc-header-inner{
  max-width: var(--pc-max);
  margin: 0 auto;
  padding: 0 var(--pc-pad);
  text-align:center;
}
.pc-logo-link{ display:inline-block; }
.site-logo{ display:block; max-width:100%; height:auto; margin:0 auto; }

/* =========================
   Nav (match your main site)
========================= */
.pc-nav{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--pc-border);
  border-bottom: 1px solid var(--pc-border);
}
.pc-nav-inner{
  max-width: var(--pc-max);
  margin: 0 auto;
  padding: 10px var(--pc-pad);
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.pc-nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid var(--pc-border);
  background:#fff;
  cursor:pointer;
}
.pc-burger{
  display:block;
  width:18px; height:2px;
  background:var(--pc-text);
  margin:0 auto;
  position:relative;
}
.pc-burger::before,.pc-burger::after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:2px;
  background:var(--pc-text);
}
.pc-burger::before{ top:-6px; }
.pc-burger::after{ top:6px; }

.pc-nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  flex: 1 1 auto;
}

/* Pill link base */
.pc-nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 10px;
  font-size: 18px;
  line-height: 1.8;
  border-radius: 999px;
  font-weight: 700;
  border:1px solid transparent;
  background: transparent;
  cursor:pointer;
  text-decoration:none;
}

/* FORCE nav text to stay black (fixes MyBB turning these blue) */
.pc-nav .pc-nav-link,
.pc-nav .pc-nav-link:visited,
.pc-nav .pc-nav-link:hover,
.pc-nav .pc-nav-link:active{
  color:#1f2937 !important;
  text-decoration:none !important;
}

.pc-nav-link:hover{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.10);
}

.pc-nav-link.is-active{
  background: rgba(200,16,46,.10);
  border-color: rgba(200,16,46,.25);
  color: var(--pc-red-2) !important;
}

/* Dropdown caret */
.pc-caret{
  display:inline-block;
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid currentColor;
  opacity:.7;
}

/* Dropdown container */
.pc-has-submenu{ position:relative; }
.pc-submenu{
  list-style:none;
  margin: 8px 0 0;
  padding: 8px;
  position:absolute;
  left:0; top:100%;
  min-width: 220px;
  background:#fff;
  border:1px solid var(--pc-border);
  border-radius:14px;
  box-shadow: var(--pc-shadow-sm);
  display:none;
  z-index: 9999;
}
.pc-has-submenu.is-sub-open > .pc-submenu{ display:block; }

/* Submenu links: keep black, not blue */
.pc-submenu-link{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  color:#1f2937 !important;
}
.pc-submenu-link:hover{
  text-decoration:none;
  background: rgba(17,24,39,.06);
}

/* IMPORTANT: MyBB often shrinks BUTTON text.
   Decode Tools is a <button>, so force it to match the other pills. */
.pc-nav button.pc-nav-link,
.pc-nav button.pc-submenu-toggle{
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
  font-weight: 700 !important;

  padding: 10px 10px !important;
  color:#1f2937 !important;
}

/* Nav search */
.pc-nav-search{
  display:flex;
  align-items:center;
  gap:8px;
}
.pc-nav-search input{
  width: 220px;
  max-width: 38vw;
  padding: 8px 12px !important;
  border-radius: 999px !important;
}
.pc-nav-search button{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--pc-red);
  color:#fff;
  font-weight:800;
}

/* Mobile nav */
@media (max-width: 820px){
  .pc-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .pc-nav-list{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding: 10px 0 2px;
  }
  .pc-nav.is-open .pc-nav-list{ display:flex; }
  .pc-submenu{
    position:static;
    margin:6px 0 0;
    box-shadow:none;
  }
}

/* =========================
   MyBB header cleanup (optional)
   (keeps leftover default menu from showing if it still outputs)
========================= */
#header { padding: 0 !important; background: transparent !important; border: 0 !important; }
#logo { padding: 0 !important; margin: 0 !important; }
.menu, #panel .menu, #header .menu { display:none !important; }

/* =========================
   Footer (kept as-is)
========================= */
.pc-footer{
  border-top: 1px solid var(--pc-border);
  background: rgba(255,255,255,.92);
}
.pc-footer-inner{
  max-width: var(--pc-max);
  margin: 0 auto;
  padding: 18px var(--pc-pad);
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 820px){
  .pc-footer-inner{ grid-template-columns: 1fr; }
}
.pc-footer-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
  color: var(--pc-red-2);
}
.pc-footer-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 8px;
}
.pc-footer-nav a{
  text-decoration:none;
  font-weight:700;
  color:#1f2937;
}
.pc-footer-nav a:hover{ color:#a10d25; text-decoration:underline; }

.pc-footer-pickers{ display:grid; gap: 10px; }
.pc-footer-picker select,
.pc-footer-picker .textbox{ width: 100%; }

.pc-legal{
  border-top: 1px solid var(--pc-border);
  padding: 12px var(--pc-pad);
}
.pc-legal-row{
  max-width: var(--pc-max);
  margin: 0 auto;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  font-size: 13px;
  color: var(--pc-muted);
}
.pc-legal a{ color: var(--pc-muted); }
.pc-legal a:hover{ color: var(--pc-red-2); }

.pc-footer-bottomlinks{
  max-width: var(--pc-max);
  margin: 10px auto 0;
  padding: 0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}
.pc-footer-bottomlinks li a{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--pc-border);
  text-decoration:none;
  font-weight:700;
  color: var(--pc-text);
  background: rgba(17,24,39,.03);
}
.pc-footer-bottomlinks li a:hover{
  background: rgba(200,16,46,.08);
  border-color: rgba(200,16,46,.20);
}
/* Utility bar (welcome/login/logout + portal/search/memberlist/calendar/help) */
.pc-panel-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Make the panel bar dark like your idea */
#panel .upper{
  background: #111827 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Ensure text is readable */
#panel .upper, #panel .upper a{
  color: #fff !important;
}

/* Right side links */
.pc-panel-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

/* Make MyBB’s injected menu <li> match our style */
.pc-panel-links li a{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none !important;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
}
.pc-panel-links li a:hover{
  background: rgba(200,16,46,.20);
  border-color: rgba(200,16,46,.35);
}

/* Keep welcome block from pushing everything */
.pc-panel-left{
  min-width: 260px;
}

/* Mobile: stack neatly */
@media (max-width: 820px){
  .pc-panel-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .pc-panel-left{ min-width: 0; }
  .pc-panel-links{ justify-content:flex-start; }
}
/* Welcome bar left/right layout */
.pc-welcome-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}

/* Right-side links */
.pc-welcome-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

/* Make them pill-style in the black bar */
.pc-welcome-links li a{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration:none !important;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:#fff !important;
}

.pc-welcome-links li a:hover{
  background: rgba(200,16,46,.20);
  border-color: rgba(200,16,46,.35);
}

/* Ensure all text in the bar stays readable */
#panel .upper,
#panel .upper a{
  color:#fff !important;
}