:root{
  --red:  #c64343;  /* Socialist Red */
  --gold: #ffd34d;  /* Icon Gold */
  --cream:#ffefd2;  /* Cream Background */
  --wheat: #ffd077; /* Wheat */
  --warmblack: #28241a; /* Warm Black */
  --ink:  #2a1a1a;  /* Text */
}

/* Base */
html,body{ margin:0; background:var(--cream); color:var(--ink); font:16px/1.6 "Source Serif 4", serif; }
h1,h2,h3{ font-family:"Cinzel", serif; margin:0 0 12px; }
a{ color:var(--red); }

/* Fixed bar */
.j5-nav{
  position: fixed; top:0; left:0; width:100%;
  background: var(--cream);
  border-bottom: 2px solid var(--red);
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}

/* Centered max-width container + flex row */
.j5-nav .nav-container{
  max-width: 1300px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.nav-multiline{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-title-row{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-title{
  font-weight: 700;
}

.external-arrow{
  font-size: 1em;
  vertical-align: super;
}

.nav-subtitle{
  font-size: 0.75em;
  opacity: 0.7;
  margin-top: 2px;
}

/* Keep the external arrow aligned with the title line */
.nav-multiline.external-link::after{
  align-self: flex-start;
  margin-left: 6px;
}


/* Logo sizing */
.j5-nav .nav-logo img{
  height: 48px;  /* tweak 28–40px */
  width: auto;
  display: block;
}

/* Links as a flex row with gap */
.j5-nav .nav-links{
  display: flex;
  align-items: center;
  gap: 18px;
}
.j5-nav .nav-links a{
  font-weight: 600;
  color: var(--red);
  text-decoration: none;
}
.j5-nav .nav-links a:hover{ text-decoration: underline; }

/* fall back 70px if JS hasn’t run yet */
body { margin-top: var(--nav-h, 70px); }

/* Mobile: stack links under logo, centered */
@media (max-width: 640px){
  .j5-nav .nav-container{ flex-direction: column; gap: 8px; padding: 10px 16px; }
  .j5-nav .nav-links{ flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
  body { margin-top: var(--nav-h, 70px); }
}



/* Page wrapper */
.j5-container{
  max-width: 1250px;
  margin: 0 auto;
  padding: 24px;
}

/* Buttons (optional) */
.btn{
  display:inline-block; padding:12px 16px; border-radius:10px;
  font-weight:700; text-decoration:none; border:2px solid var(--red);
}
.btn.primary{ background:var(--red); color:#fff; }
.btn.ghost{ background:transparent; color:var(--red); }
.btn.gold{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
}


.toggle-block{ margin: 24px 0; }
.toggle-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.toggle-btn{
  border: 2px solid var(--red);
  background: var(--cream);
  color: var(--red);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}
.toggle-btn.is-active{
  background: var(--red);
  color: #fff;
}
.toggle-panels{
  display: none;                 /* hidden by default */
  border-left: 4px solid var(--red);
  background: rgba(198, 67, 67, 0.05);
  padding: 16px;
  border-radius: 12px;
}

.toggle-panels.is-open{
  display: block;                /* only appears when a panel is open */
}

.toggle-panel{ display: none; }
.toggle-panel.is-open{ display: block; }


.learn-more{
  margin-top: 14px;
  border-top: 1px solid rgba(42, 26, 26, 0.15);
  padding-top: 10px;
}

.learn-more summary{
  cursor: pointer;
  font-weight: 700;
  color: var(--red);
  list-style: none;
}

.learn-more summary::-webkit-details-marker{ display: none; }

.learn-more summary::after{
  content: " +";
  font-weight: 800;
}

.learn-more[open] summary::after{
  content: " -";
}

.learn-more-body{
  margin-top: 10px;
}

.learn-more-body h4{
  margin: 10px 0 6px 0;
}

.learn-more-body ul{
  margin: 0 0 10px 18px;
}

.comparison-block{
  margin: 32px 0;
}

.comparison-block h3{
  margin-bottom: 12px;
}

.comparison-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.comparison-table th,
.comparison-table td{
  padding: 10px 12px;
  vertical-align: top;
}

.comparison-table thead th{
  border-bottom: 2px solid var(--red);
  text-align: left;
}

.comparison-table tbody tr{
  border-bottom: 1px solid rgba(42,26,26,0.15);
}

.comparison-table td:first-child{
  font-weight: 600;
}

/* Mobile-friendly */
@media (max-width: 720px){
  .comparison-table thead{
    display: none;
  }
  .comparison-table tr{
    display: block;
    margin-bottom: 16px;
  }
  .comparison-table td{
    display: block;
    padding: 6px 0;
  }
  .comparison-table td::before{
    content: attr(data-label);
    font-weight: 700;
    display: block;
  }
}


/* Vertical separators between columns */
.comparison-table th:nth-child(1),
.comparison-table td:nth-child(1),
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
  border-right: 1px solid rgba(42, 26, 26, 0.2);
}

/* Highlighted comparison column */
.comparison-table .highlight-col{
  background: rgba(198, 67, 67, 0.08); /* soft Socialist Red */
}

/* Round top + bottom of the column */
.comparison-table thead .highlight-col{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.comparison-table tbody tr:last-child .highlight-col{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Slight emphasis on text */
.comparison-table .highlight-col{
  font-weight: 600;
}



/* Clickable row affordance */
.comparison-table tr.expand-row{
  cursor: pointer;
}
.comparison-table tr.expand-row:hover td{
  background: rgba(198, 67, 67, 0.04);
}

/* Hide detail rows unless open */
.detail-row{ display: none; }
.detail-row.is-open{ display: table-row; }

.detail-box{
  border-left: 4px solid var(--red);
  background: rgba(198, 67, 67, 0.05);
  padding: 16px;
  border-radius: 12px;
}

.detail-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.detail-grid h4{
  margin: 0 0 8px 0;
  color: var(--red);
}
.detail-verses{
  margin-top: 10px;
  font-weight: 600;
}

/* Mobile stack */
@media (max-width: 720px){
  .detail-grid{ grid-template-columns: 1fr; }
}

.latest-media{
  margin-top: 40px;
  padding: 20px;
  border-left: 4px solid var(--red);
  background: rgba(198, 67, 67, 0.05);
}

.latest-media h2{
  margin-top: 0;
  font-size: 20px;
}

.media-card{
  margin-bottom: 16px;
}

.media-card .platform{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.media-card a{
  display: block;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.media-card a:hover{
  text-decoration: underline;
}

@media (min-width: 900px){
  .home-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
  }

  .home-layout aside{
    width: 320px;
    justify-self: end;     /* aligns to the right edge of the grid */
    transform: none;       /* IMPORTANT: remove breakout */
    margin: 0;             /* remove any negative margins if you added them */
    padding-right: 0;      /* optional */
  }
}