/* Base styles */
:root {
    --header-height: 80px;
}

html {
    scroll-padding-top: var(--header-height);
}

/* Introduction section */
.temp-intro {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 30px;
}

.temp-intro h2 {
    color: #1e3c72;
    margin-bottom: 20px;
}

.temp-intro h3 {
    color: #1e3c72;
    margin: 20px 0 10px 0;
}

.temp-intro p {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Key aspects section */
.temp-aspects__list {
    list-style-type: none;
    padding-left: 0;
}

.temp-aspects__item {
    margin-bottom: 1em;
    padding-left: 25px;
    position: relative;
}

.temp-aspects__item::before {
    content: "•";
    color: #1e3c72;
    font-weight: bold;
    position: absolute;
    left: 5px;
}

/* Common emphasis style */
.temp-emphasis {
    font-weight: bold;
    color: #1e3c72;
}

/* RTD section */
.temp-rtd__list {
    list-style-type: none;
    padding-left: 0;
}

.temp-rtd__title {
    color: #1e3c72;
    border-bottom: 2px solid #1e3c72;
    padding-bottom: 5px;
    margin-top: 1.5em;
}

/* Updated Figure and Image styles */
.temp-conclusion__figure {
    margin: 2em 0;
    text-align: left;
}

.temp-conclusion__image {
    width: 500px;  /* Fixed width for regular images */
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px 0;
    display: block;
}

.image-temp {
    width: 400px;  /* Fixed width for regular images */
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 20px 0;
    display: block;
}

/* Side by side layout */
.side-by-side {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.image-container-temp {
    flex: 0 1 400px;  /* Fixed width for side-by-side images */
}

.image-container-temp img {
    width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
}

figcaption {
    font-size: 0.9rem;
    color: #666;
}

.temp-conclusion__caption {
    margin-top: 1em;
    color: #666;
    font-style: italic;
    font-size: 0.9em;
}

/* Table styles */
.rtd-table-container {
    margin: 20px 0;
    padding: 10px;
}

.rtd-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    border: 2px solid #333;
}

.rtd-table th,
.rtd-table td {
    border: 2px solid #333;
    padding: 12px;
    text-align: left;
}

.rtd-table th {
    background-color: #a39a9a;
    font-weight: bold;
}

.rtd-table td.column-header {
    font-weight: bold;
    background-color: #a39a9a;
}

.table-caption {
    font-style: italic;
    color: #0f0e0e;
    font-size: 0.9em;
    margin-top: 8px;
}

/* Individual sizing of pictures */
#din-rail-mount {
    width: 150px;
    height: auto;
    max-width: 100%;
}

#RTD-headmount {
    width: 250px;
    height: auto;
    max-width: 100%;
}

#din-rail-trans {
    width: 100px;
    height: auto;
    max-width: 100%;
}

#PLC-wire-io {
    width: 300px;
    height: auto;
    max-width: 100%;
}

#PLC-io-card {
    width: 200px;
    height: auto;
    max-width: 100%;
}

/* Responsive styles */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .temp-conclusion__image,
    .image-temp {
        width: 100%;
        max-width: 500px;
    }

    .image-container-temp {
        width: 100%;
    }

    /* .side-by-side {
        flex-direction: column;
    } */


    .rtd-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}