/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*METADATA*/
/* Collapsible Button Styled as a Heading */
button.collapsible {
	display:block;
	width:100%;
    background: white;
    border: white;
    font-size: 26px;
    text-align: left;
    padding: 10px 35px;
    margin: 0;
    color: black;
    cursor: pointer;
    outline: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	position: relative;
	border-bottom: 1px solid black;
}

/* Add the arrow using a pseudo-element */
button.collapsible::after {
    content: '˅';
    position: absolute;
    right: 50px;
    font-family: "Montserrat", sans-serif;
	font-weight: 600;
    color: #333;
    transition: transform 0.3s ease; 
}

/* Rotate the arrow when active */
button.collapsible.active::after {
    transform: rotate(180deg); 
}

/* Collapsible Content */
.content {
    display: none; 
}

.content.active {
    display: block; 
}

/* Metadata Section */
#metadata {
    margin-top: 70px; 
	line-height: 1.45;
}

#metadata h1{
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 22px;
	padding:0 35px;
}

/* Metadata Table */
#metadata table {
    width: 100%;
    border-collapse: collapse;
	padding:0 35px;
}

#metadata th {
	padding:0 50px;
    text-align: left;
    font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 14px;
    width: 10%; 
	
}

#metadata td {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 14px;
}

#metadata a {
    text-decoration: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 14px;
	color: #ff5c33;
}

/*TRANSKRIPTION*/
 #transcription {
	padding: 0 25px;
	margin-top: 35px;
    font-family: "Merriweather", serif;
	display:grid;
	grid-template-columns:3fr 1fr;
	gap: 30px;
	align-items: start;
	position: relative;
 }

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 35px;
    align-items: start;
	margin-bottom: 80px;
 }

.content-wrapper img {
    max-width: 400px;
    height: auto;
}
		
.text-wrapper {
  display: flex;
  flex-direction: column;
  line-height: 1.7;
  font-weight: 300;
  font-size: 10.5pt;
  margin-top: 0.5px;
}



.text-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

/* Styling for table rows */
.text-wrapper table tr {
    border-bottom: 1px solid #ddd;
}

/* Styling for table cells */
.text-wrapper table td {
    padding: 2px;
    vertical-align: top;
    text-align: left;
}

/* Styling for the first column (optional) */
.text-wrapper table td:first-child {
    width: 60%;
}

/* Styling for the second column (optional) */
.text-wrapper table td:last-child {
    text-align: right;
    width: 40%;
}

.dateline {
	text-align:right;
}

.note {
    /*display: none;*/
    background-color: #f4f4f4;
    border-left: 1px solid black;
    padding: 5px;
    margin: 5px 0;
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size:9pt;
    font-style: italic;
    color: #333;
}

.signed {
	font-style: italic;
}

.person a, .place a, .org a {
    color: black;
	text-decoration: none;
}

.content-wrapper {
    display: none;
 }
		
.content-wrapper.active {
    display: grid;
}

/* Navigation buttons */
.nav-button {
    display:inline;
	width:100%;
    background: white;
    border: white;
    font-size: 26px; 
    width: 50%;
    padding: 10px 35px;
    margin: 0;
    color: black;
    cursor: pointer;
    outline: none;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}

/* Page Skip at the Bottom */
.page-skip {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem; 
    padding: 1rem 0; 
    background-color: white;
}

.nav-button #prev-page{
	text-align:right;
}

.nav-button #next-page{
	text-align: left;
}

/*Text styles*/
.strikethrough {
    text-decoration: line-through;
}

.underlined {
    text-decoration: underline;
}

.right-aligned {
    text-align: right;
    display: block;
}

.superscript {
    vertical-align: super;
    font-size: smaller;
}

.rotate {
	font-style: italic;
}

/* Slide buttons */
.button-container {
    position: absolute; 
    top: 0;
    right: 50px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 900;
    width: 100%;
    max-width: 200px
}

.button-container label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333; 
    cursor: pointer;
    width: 100%;
	font-family: "Montserrat", sans-serif;
	font-weight: 550;
	font-size: 14px;
}

.button-container .slider {
    position: relative;
    width: 60px; 
    height: 4px;
    background-color: #ccc;
    border-radius: 2px; 
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

/* General Slider Styles */
.button-container .slider {
    position: relative;
    width: 60px; 
    height: 4px;
    background-color: #ccc;
    border-radius: 2px; 
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.button-container .slider::before {
    content: "";
    position: absolute;
    top: -6px; 
    left: 0; 
    width: 16px; 
    height: 16px; 
    background-color: #ccc; 
    border-radius: 50%; 
    transition: transform 0.3s ease, background-color 0.3s ease; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* When the checkbox is checked, change the slider and dot colors and move the dot */
.button-container input[type="checkbox"]:checked + .slider {
    background-color: var(--slider-color); /* Use custom color for each button */
}

.button-container input[type="checkbox"]:checked + .slider::before {
    background-color: var(--slider-color); /* Use custom color for each button */
    transform: translateX(44px); /* Move the dot to the right */
}

/* Person Button Slider (Red) */
#person + .slider {
    --slider-color: #ff5c33; 
}

/* Place Button Slider (Yellow) */
#place + .slider {
    --slider-color: #ffc847; 
}

/* Org Button Slider (Brown) */
#org + .slider {
    --slider-color: #af754f; 
}

/* Note Button Slider (Black) */
#note + .slider {
    --slider-color: #000; /* Gray */
}

/* Trans Button Slider (Grey) */
#trans + .slider {
    --slider-color: #9e9e9e
}	

/* Hide the default checkbox */
.button-container input[type="checkbox"] {
    display: none;
}

/* Ensure the main content does not overlap with the button container */
article {
    margin-right: 0; 
}

footer {
	width:100%;
    background: white;
    color: black;
	position: relative;
	line-height:1pt;
}

.right {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-size: 9pt;
	text-align: right;
	padding: 0 50px;
}
	
	



/* Responsive Behavior for Button Container */
@media (max-width: 768px) {
    .button-container {
        position: relative; 
        top: auto; 
        right: auto; 
        margin-top: 1rem; 
        width: 100%; 
        max-width: none; 
    }

    #transcription {
        grid-template-columns: 1fr; 
    }
}