/* styles.css */

:root {
    --header-text: min(calc(100vw / 46), 28px);
    --buttons-text: min(calc(100vw / 50), 26px);
    --page-title-text: min(2vw, 26px);
    --title-text: min(2vw, 26px);
    --subtitle-text: min(2vw, 26px);
    --page-text: min(calc(100vw / 60), 21px);
    --caption-text: min(calc(100vw / 65), 19px);
    --footer-text: min(calc(100vw / 60), 21px);

    --header-text-sm: min(calc(100vw / 24), 15px);
    --header-text-sm-portrait: min(calc(100vw / 20), 10.5px);
    --buttons-text-sm: min(calc(100vw / 29), 14px);
    --page-title-text-sm: min(4vw, 16px);
    --title-text-sm: min(4vw, 16px);
    --subtitle-text-sm: min(4vw, 16px);
    --page-text-sm: min(calc(100vw / 24), 16px);
    --caption-text-sm: min(calc(100vw / 32.5), 10px);
    --footer-text-sm: min(calc(100vw / 25), 15px);
}



/* Reset all browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body {
    overflow-y: hidden;
}

.scrollable {
    margin-top: min(3vw, 38px);
    margin-bottom: min(1.38vw, 18px);
    margin-left: min(1.38vw, 18px);
    font-family: Arial, sans-serif;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 97.24vw;
}


.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}
  
  ::-webkit-scrollbar-thumb {
    background-color: black;
    border-radius: 10px;
  }

  ::-webkit-scrollbar {
    position: fixed;
    left: 0;
    top: 0;
  }

.section {
    font-size: var(--page-title-text);
    font-weight: bold;
    margin-top: min(1vw, 12px);
    padding-bottom: min(0.7vw, 9px);
    text-align: center;
}


.title {
    font-size: var(--title-text);
    font-weight: bold;
    padding-bottom: min(0.7vw, 9px);
}


.subtitle {
    font-size: var(--subtitle-text);
    font-weight: bold;
    padding-top: min(1.4vw, 18px);
    padding-bottom: min(0.7vw, 9px);
}


.content {
    padding-bottom: min(0.7vw, 9px);
    padding-right: min(0.7vw, 9px);
    text-align: justify;
    font-size: var(--page-text);
    font-family: Arial, sans-serif;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}


.paragraph p {
    word-wrap: break-word;
    white-space: pre-wrap;
    text-align: justify;
    text-indent: 2em;
    hyphens: auto;
    margin-top: 0;
    margin-bottom: 0;
}

.paragraph-image {
    display: block;
    margin-top: min(1.4vw, 18px);
    margin-bottom: min(0.7vw, 9px);
    margin-left: auto;
    margin-right: auto;
    width: min(70%, 896px);
    height: auto;
}

.pnrr-image {
    display: block;
    margin-top: min(1.4vw, 18px);
    margin-left: auto;
    margin-right: auto;
    width: min(80%, 1024px);
    height: auto;
}


.image-description {
    font-size: var(--caption-text);
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: min(0.7vw, 9px);
    margin-bottom: min(1.4vw, 18px);
}


.rugaciune {
    font-size: var(--page-text);
    font-family: Arial, sans-serif;
    font-style: italic;
    text-align: center;
    margin-top: min(1.4vw, 18px);
    margin-bottom: min(1.4vw, 18px);
}

.two-column-table {
    display: table;
    margin: 0 auto;
    width: auto;
    table-layout: auto; /* force table width to only be as wide as required by contents */
}

.two-column-table td {
    text-align: left;
    width: auto;
}

.left-column, .right-column {
    vertical-align: top;
    padding: 10px;
    text-align: left; /* Add this line to align the paragraphs to the left */
}

ul {
    list-style: disc;
    margin-left: 1.5em;
}

li p {
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.content.fade-out {
    opacity: 0;
}

.content.fade-in {
    opacity: 1;
}

.responsive-table td {
    padding: 0.5em;
}

.header-row td {
    word-wrap: break-word;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title-header {
    display: flex;
    align-items: center;
    margin-top: min(1.4vw, 18px);
    margin-bottom: min(0.7vw, 9px);
}


.program-line {
    display: flex;
    align-items: center;
    margin-left: 35px;
    font-weight: normal;
}

.titles-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.fb-container {
    display: flex;
    align-items: center;
}

.fb-link {
    text-decoration: none; /* remove underline */
}

.fb-image {
    height: 2.5vw;
    transition: 0.3s; /* Smooth movement */
    transform: translateY(30%)
}

/* Change cursor to pointer on hover */
.fb-link:hover {
    cursor: pointer;
}

/* Raise image slightly on hover */
.fb-link:hover .fb-image {
    transform: translateY(-3px);
}

.centrul-header, .centrul-footer {
    display: none;
}

.centrul-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

/* Adjust for smartphone */
@media screen
and (max-width: 600px), (max-height: 600px) {

    .section {
        padding-top: 20px;
        font-size: var(--page-title-text-sm);
    }

    .title {
        font-size: var(--title-text-sm);
    }

    .subtitle {
        font-size: var(--subtitle-text-sm);
    }

    .content {
        font-size: var(--page-text-sm);
    }

    .image-description {
        font-size: var(--caption-text-sm);
    }

    .rugaciune {
        font-size: var(--page-text-sm);
    }

    body {
        overflow-y: visible; /* or "scroll" if you want a scrollbar to appear */
    }

    .scrollable {
        overflow-x: visible;
        overflow-y: visible; /* or "scroll" if you want a scrollbar to appear */
    }

    .two-column-table {
        display: table;
        margin: 0 auto;
        width: auto;
        table-layout: auto; /* force table width to only be as wide as required by contents */
    }

    .two-column-table td {
        text-align: left;
        width: auto;
    }
    
    .fb-image {
        height: 5vw;
    }
    
    .pnrr-image {
        width: 100%;
    }
}



/* smartphone in landscape */
@media screen
and (max-height: 600px)
and (orientation: landscape) {

    .content {
        font-size: var(--page-text-sm);
    }
    
    
    .fb-image {
        height: 2.5vw;
    }
}