html, body{
margin:0 !important;
padding:0 !important;
max-width:none !important;
width:100% !important;
}

body{
font-family:system-ui, Arial, sans-serif;
background:#fff;
}

/* Neutralize Wikipedia layout */

.mw-parser-output,
.mw-body,
.mw-content-ltr,
.skin-minerva,
.minerva-body{
all:unset;
}

/* Top header */

.topbar {
    background: #0b2a3c;
    color: white;
    display: flex;
    align-items: center;
    padding: 12px 40px;
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 1000; /* Keeps it above everything */
}

.logo{
font-size:22px;
font-weight:bold;
}

.search{
position:relative;
}

.search-results{
position:absolute;
top:40px;
left:0;
width:420px;
background:white;
border:1px solid #ddd;
border-radius:6px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
display:none;
z-index:9999;
}

.search-results a{
display:block;
padding:8px 12px;
color:#333;
text-decoration:none;
font-size:14px;
}

.search-results a:hover{
background:#f5f5f5;
}

.search{
margin-left:20px;
}

.search input{
width:420px;
padding:8px 12px;
border-radius:20px;
border:none;
}

.login{
margin-left:auto;
}

/* Navigation */

.subnav {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    padding: 10px 40px;
    background: #fff; 
    position: sticky;
    top: 52px; /* This should match the height of your .topbar */
    z-index: 999;
}

.subnav a {
    margin-right: 20px;
    font-size: 17px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

/* Layout */

.container{
display:flex;
align-items:flex-start;
width:100%;
max-width:none;
margin:0;
padding:30px 48px;
box-sizing:border-box;
}

/* Sidebar */

.sidebar{
    width:260px;
    min-width:260px;
    flex-shrink:0;
    position:sticky;
    top:110px;
    align-self:flex-start;
    border-right:1px solid #ddd;
    margin-right:30px;
}

/* hide divider */
.sidebar.no-divider{
    border-right:none;
}

/* Thin scrollbar */

.sidebar-inner::-webkit-scrollbar{
width:6px;
}

.sidebar-inner::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:3px;
}

.sidebar-inner{
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-right: 2px;
}

/* Sidebar headings */

.sidebar h3{
margin:0 0 10px 0;
font-size:18px;
font-weight:700;
}

/* ================== EXACT BRITANNICA TOC STYLE ================== */

/* Container reset */
.toc {
    font-size: 15px !important;
    margin-bottom: 25px;
}

/* Remove all list indents */
.toc-list, .sub-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Base item styles - perfectly aligned left */
.toc-item, .sub-item {
    border-left: 4px solid transparent !important;
    transition: background 0.2s, border-left 0.2s;
    display: block;
}

/* Standardized link styling for both levels */
.toc-item a, .sub-item a {
    text-decoration: none !important;
    color: #444 !important;
    display: block;
    line-height: 1.4;
    padding: 0px 16px !important; /* Constant padding for everyone */
    font-size: .875rem !important;
}

/* Subsection specific overrides - REMOVED INDENT */
.sub-item a {
    padding-left: 16px !important; /* Matches .toc-item a exactly */
}

/* Active Highlight */
.toc-item.active, .sub-item.active {
    background: #e9eef5 !important;
    border-left: 4px solid #2c5aa0 !important;
}

.toc-item.active > .toc-header a, 
.sub-item.active a {
    color: #0056b3 !important;
    font-weight: 700 !important;
}

/* Collapsible Logic */
.sub-list {
    display: none !important;
}

.toc-item.open > .sub-list {
    display: block !important;
}

/* Header cleanup (since arrow is gone) */
.toc-header {
    display: block; /* Removed flex since arrow is gone */
}
/* ========================================================= */

/* Sidebar images */

.sidebar-images{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-top:10px;
}

.sidebar-thumb{
width:100%;
height:75px;
overflow:hidden;
border-radius:6px;
background:#eee;
}

.sidebar-thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* Article */

.article{
flex:1;
max-width:900px;
min-width:0;
}

/* Title */

.article h1{
font-size:30px;
margin-bottom:5px;
font-weight:600;
}

/* Short description */

.shortdesc{
color:#666;
font-size:18px;
margin-bottom:15px;
}

/* Metadata */

.meta{
color:#777;
font-size:14px;
margin-bottom:20px;
}

/* Content */

.content{
font-size:18px;
line-height:1.7;
}

.content p{
margin-bottom:14px;
}

.content img{
max-width:260px;
height:auto;
display:block;
margin:10px 0;
}

/* Remove Wikipedia elements */

.infobox,
.ambox,
.navbox{
display:none !important;
}

hr{
display:none !important;
}

/* Links */

.content a{
color:#1a4ea1;
text-decoration:none;
}

/* Headings */

.content h2{
margin-top:30px;
font-size:28px;
font-weight:600;
}

.content h3{
margin-top:20px;
font-size:22px;
font-weight:600;
}

/* Article main image */

.article-image{
float:right;
width:320px;
margin:10px 0 20px 30px;
}

.article-image img{
width:100%;
height:auto;
border-radius:10px;
display:block;
}

.article-image figcaption{
font-size:14px;
color:#444;
margin-top:8px;
line-height:1.4;
}

/* Mobile image slider */

.mobile-images{
display:none;
}

/* ================= MOBILE ================= */

@media (max-width:900px){

/* Header */

.topbar{
padding:10px 16px;
}

.logo{
font-size:20px;
}

.search{
display:none;
}

.search input{
width:140px;
font-size:14px;
}

/* Navigation wrap */

.subnav{
padding:10px 16px;
display:flex;
flex-wrap:wrap;
gap:10px 16px;
}

.subnav a{
margin-right:0;
}

/* Layout */

.container{
display:block;
padding:20px 16px;
}

/* Hide sidebar */

.sidebar,
.sidebar-inner,
.divider,
.toc{
display:none !important;
}

/* Article full width */

.article{
max-width:none;
width:100%;
}

/* Remove float image */

.article-image{
float:none;
width:100%;
margin:20px 0;
}

/* Mobile image slider */

.mobile-images{
display:flex;
gap:10px;
overflow-x:auto;
margin:20px 0;
padding-bottom:10px;
}

.mobile-images::-webkit-scrollbar{
height:6px;
}

.mobile-images::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:3px;
}

.mobile-slide{
min-width:240px;
flex-shrink:0;
}

.mobile-slide img{
width:100%;
height:160px;
object-fit:cover;
border-radius:10px;
}

}
.sidebar.hide-divider{
border-right: none !important;
}
.meta-icon{
font-size:16px;
vertical-align:middle;
margin-right:3px;
color:#aeaeae;
}
.material-icons {
    font-size: 20px !important;
}
.article-cats{
font-size:14px;
color:#6a6a6a;
margin-bottom:8px;
}

.article-cats a{
color:#6a6a6a;
text-decoration:none;
}

.article-cats a:hover{
text-decoration:underline;
}
.article-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
}

.article-actions{
position:relative;
display:flex;
gap:8px;
}

.action-btn{
background:#fff;
border:1px solid #e2e2e2;
border-radius:8px;
padding:8px;
cursor:pointer;
}

.action-btn .material-icons{
font-size:20px;
color:#555;
}

.action-btn:hover{
background:#f5f5f5;
}

.action-menu{
position:absolute;
top:40px;
right:0;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
display:none;
flex-direction:column;
min-width:160px;
z-index:20;
}

.action-menu a{
padding:10px 14px;
text-decoration:none;
color:#333;
font-size:14px;
}

.action-menu a:hover{
background:#f6f6f6;
}