MediaWiki:Common.css: Difference between revisions

Latest revision as of 18:19, 27 March 2026

/* ─────────────────────────────────────────────────────────────
   Global look & feel
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700&display=swap');

html, body, .mw-body, p, ul, ol, dl, li {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-weight: 500 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'EB Garamond', Garamond, serif !important;
  font-weight: 700 !important;
}

/* Ribbon header + dark nav text */
.p-navbar {
  background: url('/images/ribbon.png') center/cover no-repeat !important;
}
.p-navbar,
.p-navbar .nav-link,
.p-navbar .navbar-tool-link,
.p-navbar .navbar-more-tools,
.p-navbar .mw-list-item a,
.p-navbar .dropdown-menu a { color: #000 !important; }
.p-navbar .nav-link:hover,
.p-navbar .nav-link:focus { color: #333 !important; }

/* Sidebar section header size */
#p-Artifact-types .mw-portlet-heading { font-size: 1.25em !important; font-weight: 700 !important; }

/* Footer: hide MW icons, add custom image */
.footer-icons { display: none !important; }
#footer { position: relative; }
#footer::after {
  content: ""; position: absolute; right: 20px; bottom: 10px;
  width: 120px; height: 40px; background: url('/images/image.png') center/contain no-repeat;
}
#footer .mw-logo-icon { width: 50px; height: auto; margin-right: 10px; }

/* “Artifact preview” component */
.artifact-preview {
  display: grid; grid-template-columns: 200px 1fr; gap: .75em;
  margin: 2em 0; padding: .75em 1em;
  border: 1px solid rgba(0,0,0,.2); border-radius: 6px; background: #fafafa;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.artifact-thumb img { display:block; width:100%; height:auto; border-radius:4px; }
.artifact-text h3 { margin:0 0 .4em; font-size:1.25em; border-bottom:1px solid #ccc; padding-bottom:.2em; }
@media (max-width: 600px){ .artifact-preview { grid-template-columns: 1fr; } }
.artifact-more { margin-top:.75em; }
.artifact-more a { font-weight:500; text-decoration:none; }
.artifact-more a:hover { text-decoration:underline; }

/* Navigation tweaks + icon color */
#mw-navigation .p-Artifacts-of-Capitalism-toggle { font-size:1.3rem !important; font-weight:800 !important; }
#p-Artifacts-of-Capitalism .mw-portlet-heading,
#p-Artifacts-of-Capitalism h3 { font-size:1.25em !important; font-weight:700 !important; line-height:1.2 !important; }
.mw-ui-icon, .mw-ui-icon:before, .mw-ui-icon svg, .icon, .icon svg { color:#000 !important; fill:#000 !important; opacity:1 !important; }

/* Hide “Special pages” anywhere it sneaks in */
a.n-specialpages[href*="Special:SpecialPages"],
#p-specialpages, li#n-specialpages, li#t-specialpages, li#pt-specialpages { display:none !important; }

/* Optional: hide personal tools when logged out if you add .anonymous on <body> somewhere */
body.anonymous .cmln-personal-tools,
body.anonymous #pt-userpage,
body.anonymous #pt-logout { display:none !important; }

/* ─────────────────────────────────────────────────────────────
   Auth pages (Special:UserLogin & Special:CreateAccount)
   ─────────────────────────────────────────────────────────────
   Goal: one centered card, fields with proper side gutters.
   These selectors match what your pages actually render:
   .mw-special-Userlogin / .page-Special_UserLogin
   .mw-special-Createaccount / .page-Special_CreateAccount
   ───────────────────────────────────────────────────────────── */

/* Background & type */
.mw-special-Userlogin,
.page-Special_UserLogin,
.mw-special-Createaccount,
.page-Special_CreateAccount {
  background: #f4efe4 url('/images/parchment.jpg') repeat !important;
  font-family: 'EB Garamond', Garamond, serif !important;
}

/* Let parchment show through common wrappers */
.mw-special-Userlogin .mw-page-container,
.mw-special-Userlogin .mw-content-container,
.mw-special-Userlogin .mw-body,
.page-Special_UserLogin .mw-page-container,
.page-Special_UserLogin .mw-content-container,
.page-Special_UserLogin .mw-body,
.mw-special-Createaccount .mw-page-container,
.mw-special-Createaccount .mw-content-container,
.mw-special-Createaccount .mw-body,
.page-Special_CreateAccount .mw-page-container,
.page-Special_CreateAccount .mw-content-container,
.page-Special_CreateAccount .mw-body { background: transparent !important; }

/* Hide the “benefits/stats” right column entirely */
.mw-special-Createaccount .mw-createacct-benefits,
.page-Special_CreateAccount .mw-createacct-benefits,
.mw-special-Createaccount .mw-createacct-help,
.page-Special_CreateAccount .mw-createacct-help { display:none !important; }

/* Center the card; comfortable width & padding */
.mw-special-Userlogin .mw-htmlform,
.page-Special_UserLogin .mw-htmlform,
.mw-special-Createaccount .mw-htmlform,
.page-Special_CreateAccount .mw-htmlform {
  max-width: 820px !important;
  margin: 3rem auto !important;
  padding: 24px 28px !important;
  background: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
}

/* Desktop: crush any Bootstrap grid so we’re single-column */
@media (min-width: 768px){
  .mw-special-Userlogin .row,
  .page-Special_UserLogin .row,
  .mw-special-Createaccount .row,
  .page-Special_CreateAccount .row { display:block !important; margin:0 !important; }

  .mw-special-Userlogin [class^="col-"], .mw-special-Userlogin [class*=" col-"],
  .page-Special_UserLogin  [class^="col-"], .page-Special_UserLogin  [class*=" col-"],
  .mw-special-Createaccount [class^="col-"], .mw-special-Createaccount [class*=" col-"],
  .page-Special_CreateAccount [class^="col-"], .page-Special_CreateAccount [class*=" col-"] {
    float:none !important; flex:0 0 100% !important; max-width:100% !important; width:100% !important;
    padding-left:0 !important; padding-right:0 !important;
  }
}

/* Nuke OOUI inner width clamps so fields can expand */
.mw-special-Userlogin .mw-htmlform .oo-ui-panelLayout,
.page-Special_UserLogin  .mw-htmlform .oo-ui-panelLayout,
.mw-special-Createaccount .mw-htmlform .oo-ui-panelLayout,
.page-Special_CreateAccount .mw-htmlform .oo-ui-panelLayout,
.mw-special-Userlogin .mw-htmlform .oo-ui-panelLayout-framed,
.page-Special_UserLogin  .mw-htmlform .oo-ui-panelLayout-framed,
.mw-special-Createaccount .mw-htmlform .oo-ui-panelLayout-framed,
.page-Special_CreateAccount .mw-htmlform .oo-ui-panelLayout-framed,
.mw-special-Userlogin .mw-htmlform .oo-ui-formLayout,
.page-Special_UserLogin  .mw-htmlform .oo-ui-formLayout,
.mw-special-Createaccount .mw-htmlform .oo-ui-formLayout,
.page-Special_CreateAccount .mw-htmlform .oo-ui-formLayout,
.mw-special-Userlogin .mw-htmlform .oo-ui-layout,
.page-Special_UserLogin  .mw-htmlform .oo-ui-layout,
.mw-special-Createaccount .mw-htmlform .oo-ui-layout,
.page-Special_CreateAccount .mw-htmlform .oo-ui-layout {
  max-width: none !important; width: 100% !important; box-sizing: border-box !important;
}

/* Field body gutters so inputs don’t hug the card edge */
.mw-special-Userlogin .oo-ui-fieldLayout-body,
.page-Special_UserLogin  .oo-ui-fieldLayout-body,
.mw-special-Createaccount .oo-ui-fieldLayout-body,
.page-Special_CreateAccount .oo-ui-fieldLayout-body {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* Make the field container and text widgets fill the width */
.mw-special-Userlogin .oo-ui-fieldLayout-field,
.page-Special_UserLogin  .oo-ui-fieldLayout-field,
.mw-special-Createaccount .oo-ui-fieldLayout-field,
.page-Special_CreateAccount .oo-ui-fieldLayout-field,
.mw-special-Userlogin .oo-ui-textInputWidget,
.page-Special_UserLogin  .oo-ui-textInputWidget,
.mw-special-Createaccount .oo-ui-textInputWidget,
.page-Special_CreateAccount .oo-ui-textInputWidget { width: 100% !important; box-sizing: border-box !important; }

.mw-special-Userlogin .oo-ui-textInputWidget .oo-ui-inputWidget-input,
.page-Special_UserLogin  .oo-ui-textInputWidget .oo-ui-inputWidget-input,
.mw-special-Createaccount .oo-ui-textInputWidget .oo-ui-inputWidget-input,
.page-Special_CreateAccount .oo-ui-textInputWidget .oo-ui-inputWidget-input {
  width: 100% !important; box-sizing: border-box !important;
  font-family: 'EB Garamond', Garamond, serif !important;
  font-size: 1.02rem !important;
  padding: .6rem .8rem !important;
  border: 1px solid #c9c9c9 !important; border-radius: 10px !important; background: #fff !important;
}

/* Labels, help text, checkbox, primary buttons */
.mw-special-Userlogin .oo-ui-fieldLayout .oo-ui-labelElement-label,
.page-Special_UserLogin  .oo-ui-fieldLayout .oo-ui-labelElement-label,
.mw-special-Createaccount .oo-ui-fieldLayout .oo-ui-labelElement-label,
.page-Special_CreateAccount .oo-ui-fieldLayout .oo-ui-labelElement-label {
  font-weight: 700 !important; font-size: 1.05rem !important; margin-bottom: .25rem !important;
}
.mw-special-Userlogin .oo-ui-fieldLayout .oo-ui-fieldLayout-help,
.page-Special_UserLogin  .oo-ui-fieldLayout .oo-ui-fieldLayout-help,
.mw-special-Createaccount .oo-ui-fieldLayout .oo-ui-fieldLayout-help,
.page-Special_CreateAccount .oo-ui-fieldLayout .oo-ui-fieldLayout-help { color:#5a5a5a !important; font-size:.95rem !important; }

.mw-special-Userlogin .oo-ui-checkboxInputWidget .oo-ui-checkboxInputWidget-box,
.page-Special_UserLogin  .oo-ui-checkboxInputWidget .oo-ui-checkboxInputWidget-box,
.mw-special-Createaccount .oo-ui-checkboxInputWidget .oo-ui-checkboxInputWidget-box,
.page-Special_CreateAccount .oo-ui-checkboxInputWidget .oo-ui-checkboxInputWidget-box {
  border-radius: 6px !important; border-color: #c9c9c9 !important;
}
.mw-special-Userlogin .oo-ui-checkboxInputWidget.oo-ui-widget-enabled input:checked + .oo-ui-checkboxInputWidget-box,
.page-Special_UserLogin  .oo-ui-checkboxInputWidget.oo-ui-widget-enabled input:checked + .oo-ui-checkboxInputWidget-box,
.mw-special-Createaccount .oo-ui-checkboxInputWidget.oo-ui-widget-enabled input:checked + .oo-ui-checkboxInputWidget-box,
.page-Special_CreateAccount .oo-ui-checkboxInputWidget.oo-ui-widget-enabled input:checked + .oo-ui-checkboxInputWidget-box {
  background:#2a6bdb !important; border-color:#2a6bdb !important;
}

.mw-special-Userlogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.page-Special_UserLogin  .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.mw-special-Createaccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.page-Special_CreateAccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button {
  background:#2a6bdb !important; border:1px solid #2a6bdb !important; color:#fff !important;
  padding:.6rem 1.1rem !important; border-radius:10px !important; font-weight:600 !important;
}
.mw-special-Userlogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.page-Special_UserLogin  .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.mw-special-Createaccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.page-Special_CreateAccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover { filter: brightness(.95) !important; }

/* Secondary “Join …” button */
.mw-special-Userlogin .oo-ui-buttonElement-frameless .oo-ui-buttonElement-button,
.page-Special_UserLogin  .oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
  border:1px solid #2a6bdb !important; color:#2a6bdb !important; border-radius:10px !important; padding:.55rem 1rem !important;
} 
/* Expand login/create-account container to full card width */
.mw-special-Userlogin .mw-ui-container,
.page-Special_UserLogin .mw-ui-container,
.mw-special-Createaccount .mw-ui-container,
.page-Special_CreateAccount .mw-ui-container {
  max-width: 820px !important;   /* adjust 720–900px to taste */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
} 
/* ===== Auth pages: make the card and fields use the full, centered width ===== */

/* 1) Center the page content area and give it a sane max width */
.mw-special-Userlogin .mw-body > .container,
.mw-special-Userlogin .mw-body > .container-fluid,
.page-Special_UserLogin  .mw-body > .container,
.page-Special_UserLogin  .mw-body > .container-fluid,
.mw-special-Createaccount .mw-body > .container,
.mw-special-Createaccount .mw-body > .container-fluid,
.page-Special_CreateAccount .mw-body > .container,
.page-Special_CreateAccount .mw-body > .container-fluid {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2) The culprit: OOUI’s narrow wrapper */
.mw-special-Userlogin .mw-ui-container,
.page-Special_UserLogin  .mw-ui-container,
.mw-special-Createaccount .mw-ui-container,
.page-Special_CreateAccount .mw-ui-container {
  max-width: 820px !important;    /* adjust 720–900px to taste */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
  box-sizing: border-box !important;
}

/* 3) Ensure the form itself isn’t re‑narrowing inside */
.mw-special-Userlogin #userloginForm,
.page-Special_UserLogin  #userloginForm,
.mw-special-Createaccount #userlogin,
.page-Special_CreateAccount #userlogin,
.mw-special-Createaccount #mw-createaccount-join,
.page-Special_CreateAccount #mw-createaccount-join,
.mw-special-Userlogin .mw-htmlform,
.page-Special_UserLogin  .mw-htmlform,
.mw-special-Createaccount .mw-htmlform,
.page-Special_CreateAccount .mw-htmlform {
  max-width: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.16) !important;
}

/* 4) OOUI “framed/padded panel” inside the card—let it stretch */
.mw-special-Userlogin .mw-htmlform .oo-ui-panelLayout,
.page-Special_UserLogin  .mw-htmlform .oo-ui-panelLayout,
.mw-special-Createaccount .mw-htmlform .oo-ui-panelLayout,
.page-Special_CreateAccount .mw-htmlform .oo-ui-panelLayout,
.mw-special-Userlogin .mw-htmlform .oo-ui-panelLayout-framed,
.page-Special_UserLogin  .mw-htmlform .oo-ui-panelLayout-framed,
.mw-special-Createaccount .mw-htmlform .oo-ui-panelLayout-framed,
.page-Special_CreateAccount .mw-htmlform .oo-ui-panelLayout-framed {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* 5) Finally, the actual input field area */
.mw-special-Userlogin .oo-ui-fieldLayout-body,
.page-Special_UserLogin  .oo-ui-fieldLayout-body,
.mw-special-Createaccount .oo-ui-fieldLayout-body,
.page-Special_CreateAccount .oo-ui-fieldLayout-body,
.mw-special-Userlogin .oo-ui-fieldLayout-field,
.page-Special_UserLogin  .oo-ui-fieldLayout-field,
.mw-special-Createaccount .oo-ui-fieldLayout-field,
.page-Special_CreateAccount .oo-ui-fieldLayout-field,
.mw-special-Userlogin .oo-ui-textInputWidget,
.page-Special_UserLogin  .oo-ui-textInputWidget,
.mw-special-Createaccount .oo-ui-textInputWidget,
.page-Special_CreateAccount .oo-ui-textInputWidget {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
} 
/* === Auth page primary buttons (Log in / Create your account) === */
.mw-special-Userlogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.page-Special_UserLogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.mw-special-Createaccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.page-Special_CreateAccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button {
  display: block !important;      /* make them behave like block elements */
  width: 100% !important;         /* stretch to full width of the form */
  box-sizing: border-box !important;
  
  background: #7c5a3b !important; /* <-- your accent color (example: parchment brown) */
  border: 1px solid #7c5a3b !important;
  color: #fff !important;         /* white text */
  
  padding: .7rem 1rem !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-align: center !important;
  font-size: 1.05rem !important;
  cursor: pointer !important;
}

/* Hover state */
.mw-special-Userlogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.page-Special_UserLogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.mw-special-Createaccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.page-Special_CreateAccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover {
  filter: brightness(0.92) !important;
}
/* Center the primary submit buttons on Login / Create account */
.mw-special-Userlogin .oo-ui-flaggedElement-primary,
.mw-special-Userlogin .oo-ui-flaggedElement-progressive,
.page-Special_UserLogin .oo-ui-flaggedElement-primary,
.page-Special_UserLogin .oo-ui-flaggedElement-progressive,
.mw-special-Createaccount .oo-ui-flaggedElement-primary,
.mw-special-Createaccount .oo-ui-flaggedElement-progressive,
.page-Special_CreateAccount .oo-ui-flaggedElement-primary,
.page-Special_CreateAccount .oo-ui-flaggedElement-progressive,
.mw-special-Createaccount .mw-htmlform-submit-buttons,
.page-Special_CreateAccount .mw-htmlform-submit-buttons {
  display: flex !important;
  justify-content: center !important;
}

/* Make the actual button shrink to its content while centered */
.mw-special-Userlogin .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
.mw-special-Userlogin .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
.page-Special_UserLogin .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
.page-Special_UserLogin .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
.mw-special-Createaccount .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
.mw-special-Createaccount .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button,
.page-Special_CreateAccount .oo-ui-flaggedElement-primary .oo-ui-buttonElement-button,
.page-Special_CreateAccount .oo-ui-flaggedElement-progressive .oo-ui-buttonElement-button {
  width: auto !important;
  min-width: 220px;  /* optional: consistent width */
}

/* Center the secondary “Join …” button too */
.mw-special-Userlogin .oo-ui-buttonElement-frameless,
.page-Special_UserLogin .oo-ui-buttonElement-frameless {
  display: flex !important;
  justify-content: center !important;
} 
/* Center the primary submit button row on Login / CreateAccount */
.mw-special-Userlogin .mw-htmlform .mw-htmlform-submit-buttons,
.page-Special_UserLogin  .mw-htmlform .mw-htmlform-submit-buttons,
.mw-special-Createaccount .mw-htmlform .mw-htmlform-submit-buttons,
.page-Special_CreateAccount .mw-htmlform .mw-htmlform-submit-buttons {
  text-align: center !important;
}

/* Make the actual button size to its label while centered */
.mw-special-Userlogin .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement,
.page-Special_UserLogin  .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement,
.mw-special-Createaccount .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement,
.page-Special_CreateAccount .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement {
  display: inline-block !important;
}

.mw-special-Userlogin .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement-button,
.page-Special_UserLogin  .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement-button,
.mw-special-Createaccount .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement-button,
.page-Special_CreateAccount .mw-htmlform .mw-htmlform-submit-buttons .oo-ui-buttonElement-button {
  width: auto !important;
  min-width: 220px; /* optional */
}
/* Center (or full‑width) + recolor the submit buttons on auth pages */

/* 1) Center the button */
#wpCreateaccount,
#wpLoginAttempt {
  display: block !important;
  margin: 0 auto !important;       /* centers inside the card */
  border-radius: 10px !important;
  padding: .6rem 1.1rem !important;
}

/* 1a) If you prefer full‑width instead of centered, swap the margin line above for this: */
/* width: 100% !important; margin: 0 !important; */

/* 2) Custom color (change these to taste) */
#wpCreateaccount,
#wpLoginAttempt {
  background-color: #2a6b3a !important;  /* not blue */
  border-color:     #2a6b3a !important;
  color: #fff !important;
  box-shadow: none !important;
}
#wpCreateaccount:hover,
#wpLoginAttempt:hover {
  filter: brightness(0.95) !important;
}
/* === Auth Page Button Styling === */

/* Primary buttons (Log in / Create account) */
.mw-special-Userlogin .cdx-button--action-progressive,
.page-Special_UserLogin .cdx-button--action-progressive,
.mw-special-Createaccount .cdx-button--action-progressive,
.page-Special_CreateAccount .cdx-button--action-progressive {
  display: block !important;
  width: 100% !important;
  background-color: #7c2d12 !important;   /* rich brown (matches parchment aesthetic) */
  border: 1px solid #7c2d12 !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  text-align: center !important;
  transition: background 0.2s ease-in-out, filter 0.2s ease-in-out;
}
.mw-special-Userlogin .cdx-button--action-progressive:hover,
.page-Special_UserLogin .cdx-button--action-progressive:hover,
.mw-special-Createaccount .cdx-button--action-progressive:hover,
.page-Special_CreateAccount .cdx-button--action-progressive:hover {
  background-color: #5a1f0d !important;  /* darker brown on hover */
  border-color: #5a1f0d !important;
  filter: brightness(0.97);
}

/* Secondary button (Join Artifacts of Capitalism) */
.mw-special-Userlogin .cdx-button--fake-button,
.page-Special_UserLogin .cdx-button--fake-button,
.mw-special-Createaccount .cdx-button--fake-button,
.page-Special_CreateAccount .cdx-button--fake-button {
  display: block !important;
  width: 100% !important;
  border: 1px solid #7c2d12 !important;
  color: #7c2d12 !important;
  background: transparent !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 8px !important;
  text-align: center !important;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
.mw-special-Userlogin .cdx-button--fake-button:hover,
.page-Special_UserLogin .cdx-button--fake-button:hover,
.mw-special-Createaccount .cdx-button--fake-button:hover,
.page-Special_CreateAccount .cdx-button--fake-button:hover {
  background: #f6f1e7 !important; /* subtle parchment hover */
  color: #5a1f0d !important;
} 
/* === AOC auth buttons: one color for all === */
:root {
  /* pick your color */
  --aoc-btn: #7c5a3b;      /* brown */
  --aoc-btn-hover: #5a3f2b; /* darker on hover */
  --aoc-btn-text: #ffffff;
}

/* Primary submits (Codex + OOUI + legacy IDs) */
.mw-special-Userlogin .cdx-button--action-progressive,
.page-Special_UserLogin .cdx-button--action-progressive,
.mw-special-Createaccount .cdx-button--action-progressive,
.page-Special_CreateAccount .cdx-button--action-progressive,
.mw-special-Userlogin #wpLoginAttempt,
.page-Special_UserLogin #wpLoginAttempt,
.mw-special-Createaccount #wpCreateaccount,
.page-Special_CreateAccount #wpCreateaccount,
.mw-special-Userlogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.page-Special_UserLogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.mw-special-Createaccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button,
.page-Special_CreateAccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button {
  background-color: var(--aoc-btn) !important;
  border-color:     var(--aoc-btn) !important;
  color:            var(--aoc-btn-text) !important;
  border-radius: 10px !important;
}

/* “Join Artifacts of Capitalism” (Codex fake-button → make solid) */
.mw-special-Userlogin .cdx-button--fake-button,
.page-Special_UserLogin  .cdx-button--fake-button,
.mw-special-Createaccount .cdx-button--fake-button,
.page-Special_CreateAccount .cdx-button--fake-button {
  background-color: var(--aoc-btn) !important;
  border-color:     var(--aoc-btn) !important;
  color:            var(--aoc-btn-text) !important;
  border-radius: 10px !important;
}

/* Hover color for all the above */
.mw-special-Userlogin .cdx-button--action-progressive:hover,
.page-Special_UserLogin .cdx-button--action-progressive:hover,
.mw-special-Createaccount .cdx-button--action-progressive:hover,
.page-Special_CreateAccount .cdx-button--action-progressive:hover,
.mw-special-Userlogin #wpLoginAttempt:hover,
.page-Special_UserLogin #wpLoginAttempt:hover,
.mw-special-Createaccount #wpCreateaccount:hover,
.page-Special_CreateAccount #wpCreateaccount:hover,
.mw-special-Userlogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.page-Special_UserLogin .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.mw-special-Createaccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.page-Special_CreateAccount .oo-ui-buttonElement-primary .oo-ui-buttonElement-button:hover,
.mw-special-Userlogin .cdx-button--fake-button:hover,
.page-Special_UserLogin  .cdx-button--fake-button:hover,
.mw-special-Createaccount .cdx-button--fake-button:hover,
.page-Special_CreateAccount .cdx-button--fake-button:hover {
  background-color: var(--aoc-btn-hover) !important;
  border-color:     var(--aoc-btn-hover) !important;
  color:            var(--aoc-btn-text) !important;
}

/* Optional: make them full‑width (keep if you like that look) */
.mw-special-Userlogin .cdx-button--action-progressive,
.page-Special_UserLogin .cdx-button--action-progressive,
.mw-special-Createaccount .cdx-button--action-progressive,
.page-Special_CreateAccount .cdx-button--action-progressive,
.mw-special-Userlogin .cdx-button--fake-button,
.page-Special_UserLogin  .cdx-button--fake-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
} 
/* Force navbar icons (user + hamburger) to be black */
.navbar-toggler-icon,
.navbar-toggler,
.navbar-tool > a,
.navbar-tool > .navbar-tool-link,
.navbar-tool .fa-user, 
.navbar-tool .mw-ui-icon,
.navbar-tool .mw-ui-icon:before {
  color: #000 !important;
  fill: #000 !important;
}

/* If the hamburger is using background-image (Bootstrap default), override it */
.navbar-toggler-icon {
  background-image: none !important;
}
.navbar-toggler-icon::before {
  content: "\2630"; /* Unicode hamburger (☰) */
  font-size: 1.25rem;
  color: #000;
} 
/* Make alerts and notifications icons fully opaque black */
.navbar-tool .mw-echo-notifications-badge,
.navbar-tool .mw-echo-notifications-badge:before,
.navbar-tool .oo-ui-icon-bell,
.navbar-tool .oo-ui-icon-tray,
.navbar-tool .oo-ui-icon:before {
  opacity: 1 !important;
  color: #000 !important;
  fill: #000 !important;
}
/* --- NAV: make alert/notification icons solid black (no translucence) --- */
.p-navbar .navbar-tools .navbar-tool,
.p-navbar .navbar-tools .navbar-tool > a,
.p-navbar .navbar-tools .navbar-tool .navbar-tool-dropdown {
  color: #000 !important;     /* override Bootstrap rgba() */
  opacity: 1 !important;      /* kill any dimming */
}

/* OOUI/Echo icons (bell/inbox) use mask + background-color for tint */
.p-navbar .oo-ui-iconElement-icon,
.p-navbar .mw-echo-notifications-badge .oo-ui-iconElement-icon {
  background-color: #000 !important;  /* actual icon color */
  opacity: 1 !important;
}

/* Fallbacks for SVG/font icon variants some skins use */
.p-navbar .oo-ui-icon-bell,
.p-navbar .oo-ui-icon-tray,
.p-navbar .mw-ui-icon,
.p-navbar .mw-ui-icon:before {
  color: #000 !important;
  fill: #000 !important;
  opacity: 1 !important;
}
/* Make the hamburger button border black */
.navbar-toggler {
  border-color: #000 !important;
  box-shadow: none !important; /* also removes any blue glow on focus */
}

/* On hover/focus, keep it black instead of blue */
.navbar-toggler:focus,
.navbar-toggler:hover {
  border-color: #000 !important;
  outline: none !important;
  box-shadow: none !important;
} 
/* ───────── iPhone mobile hotfix pack ───────── */

/* A) Kill horizontal overflow everywhere (prevents the magenta right-edge) */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
.mw-page-container, .mw-content-container, .mw-body,
.container, .container-fluid { overflow-x: hidden !important; }
img, video, iframe, .mw-parser-output table { max-width: 100% !important; height: auto; }

/* B) iPhone input overshoot fix on auth pages */
@media (max-width: 575.98px) {
  /* Ensure the card’s inner padding is respected */
  .mw-special-Userlogin .mw-htmlform,
  .page-Special_UserLogin  .mw-htmlform,
  .mw-special-Createaccount .mw-htmlform,
  .page-Special_CreateAccount .mw-htmlform {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* OOUI wrappers sometimes add widths that ignore padding; clamp them */
  .mw-special-Userlogin .oo-ui-fieldLayout-body,
  .page-Special_UserLogin  .oo-ui-fieldLayout-body,
  .mw-special-Createaccount .oo-ui-fieldLayout-body,
  .page-Special_CreateAccount .oo-ui-fieldLayout-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Make the actual input never exceed the visual card */
  .mw-special-Userlogin .oo-ui-textInputWidget,
  .page-Special_UserLogin  .oo-ui-textInputWidget,
  .mw-special-Createaccount .oo-ui-textInputWidget,
  .page-Special_CreateAccount .oo-ui-textInputWidget {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mw-special-Userlogin .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .page-Special_UserLogin  .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .mw-special-Createaccount .oo-ui-textInputWidget .oo-ui-inputWidget-input,
  .page-Special_CreateAccount .oo-ui-textInputWidget .oo-ui-inputWidget-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent any accidental negative margins from shoving fields outward */
  .mw-special-Userlogin .oo-ui-fieldLayout-field,
  .page-Special_UserLogin  .oo-ui-fieldLayout-field,
  .mw-special-Createaccount .oo-ui-fieldLayout-field,
  .page-Special_CreateAccount .oo-ui-fieldLayout-field {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* === Mobile navbar: text-only menu === */
@media (max-width: 991.98px) {
  .p-navbar {
    position: relative;
    min-height: 64px;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
  }

  .p-navbar .navbar-brand img {
    max-height: 44px;
    width: auto;
  }

  .p-navbar .navbar-toggler {
    margin-left: auto;
  }

  .p-navbar .navbar-collapse:not(.show) {
    display: none !important;
  }

  .p-navbar .navbar-collapse.show {
    position: absolute;
    top: calc(100% + 6px);
    left: 12px;
    right: 12px;
    z-index: 2000;
    display: block !important;
    padding: .85rem 1rem;
    background: rgba(247, 239, 220, 0.98);
    border: 1px solid #c7b08a;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0,0,0,.16);
  }

  .p-navbar .navbar-collapse.show .navbar-nav,
  .p-navbar .navbar-collapse.show .navbar-nav.right,
  .p-navbar .navbar-collapse.show .navbar-tools,
  .p-navbar .navbar-collapse.show .echo-icons {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show .nav-item,
  .p-navbar .navbar-collapse.show .mw-list-item,
  .p-navbar .navbar-collapse.show .navbar-tool,
  .p-navbar .navbar-collapse.show .echo-icons li {
    display: block !important;
    width: 100%;
  }

  .p-navbar .navbar-collapse.show .nav-link,
  .p-navbar .navbar-collapse.show .navbar-tool > a,
  .p-navbar .navbar-collapse.show .echo-icons a {
    display: block !important;
    width: 100%;
    padding: .7rem 0;
    text-align: left;
  }

  .p-navbar .navbar-collapse.show .nav-link::before,
  .p-navbar .navbar-collapse.show .mw-list-item > a::before,
  .p-navbar .navbar-collapse.show a.navbar-more-tools::before,
  .p-navbar .navbar-collapse.show a.navbar-usernotloggedin::before,
  .p-navbar .navbar-collapse.show a.navbar-userloggedin::before,
  .p-navbar .navbar-collapse.show a.navbar-userloggedin-avatar::before,
  .p-navbar .navbar-collapse.show a.navbar-tool-link::before {
    display: none !important;
  }

  .p-navbar .navbar-collapse.show a.navbar-more-tools,
  .p-navbar .navbar-collapse.show a.navbar-usernotloggedin,
  .p-navbar .navbar-collapse.show a.navbar-userloggedin,
  .p-navbar .navbar-collapse.show a.navbar-userloggedin-avatar,
  .p-navbar .navbar-collapse.show a.navbar-tool-link,
  .p-navbar .navbar-collapse.show #pt-notifications-alert > a,
  .p-navbar .navbar-collapse.show #pt-notifications-notice > a {
    font-size: 0 !important;
    background-image: none !important;
    height: auto !important;
  }

  .p-navbar .navbar-collapse.show a.navbar-more-tools::after {
    content: "Page Tools";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show a.navbar-usernotloggedin::after,
  .p-navbar .navbar-collapse.show a.navbar-userloggedin::after,
  .p-navbar .navbar-collapse.show a.navbar-userloggedin-avatar::after {
    content: "Account";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show a.navbar-tool-link.ca-edit::after,
  .p-navbar .navbar-collapse.show a.navbar-tool-link.ca-formedit::after,
  .p-navbar .navbar-collapse.show a.navbar-tool-link.ca-ve-edit::after {
    content: "Edit";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show a.navbar-tool-link.ca-viewsource::after {
    content: "View Source";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show a.navbar-tool-link.ca-history::after {
    content: "History";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show #pt-notifications-alert > a::after {
    content: "Notifications";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show #pt-notifications-notice > a::after {
    content: "Messages";
    font-size: 1rem;
  }

  .p-navbar .navbar-collapse.show .dropdown-menu {
    position: static !important;
    float: none !important;
    transform: none !important;
    width: 100%;
    margin: .15rem 0 .6rem;
    padding-left: .85rem;
    border: 0 !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.4) !important;
  }

  .p-navbar .navbar-collapse.show #p-search {
    display: block !important;
    width: 100%;
    margin: .75rem 0 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show #p-search .input-group {
    width: 100%;
  }

  .p-navbar .navbar-collapse.show .mw-echo-notifications-badge,
  .p-navbar .navbar-collapse.show .badge,
  .p-navbar .navbar-collapse.show .user-name {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .p-navbar .navbar-collapse.show {
    display: flex !important;
    flex-direction: column;
  }

  .p-navbar .navbar-collapse.show > .navbar-nav.right {
    order: 1;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show > .navbar-nav:not(.right) {
    order: 2;
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show > .navbar-nav.right > #p-search {
    order: 1;
    display: block !important;
    width: 100%;
    margin: 0 0 .75rem 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show > .navbar-nav.right > .navbar-tools.flex-row {
    order: 2;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show > .navbar-nav.right > .navbar-tools:not(.flex-row) {
    order: 3;
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .p-navbar .navbar-collapse.show .echo-icons {
    display: none !important;
  }

  .p-navbar .navbar-collapse.show > .navbar-nav:not(.right) > #n-specialpages {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .p-navbar .navbar-collapse.show a.ca-ve-edit,
  .p-navbar .navbar-collapse.show a.ca-formedit,
  .p-navbar .navbar-collapse.show a.ca-viewsource,
  .p-navbar .navbar-collapse.show a.ca-history,
  .p-navbar .navbar-collapse.show #pt-notifications-alert > a,
  .p-navbar .navbar-collapse.show #pt-notifications-notice > a {
    display: none !important;
  }
}