/* static/styles_minimal.css */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');

:root {
    /* Global color settings, box shadow settings, etc. */

    /* 
        When modifying this file, ensure that is consistent with static/styles.css. 
    */

    --border-color: #303732;   /* small text entry boxes */
    --border-radius: 8px;  /* subtle border radius*/
    --button-color: #E5A028; /* orange buttons */
    --button-hover-color: #D86E1E; /* orange button hover */
    --flash-message-color: #ff5f57; /* persimmon */
    --form-background-hover-color: #5f6e63;
    --form-background-color: #3B3B45; /* DARKER BLUE-GRAY BACKGROUND use with border and radius*/
    --form-border-color: #707070 /* light border 1px solid*/
    --form-secondary-background-color: #5f6e63;
    --link-color: #E5A028; /* orange */
    --main-background-color: #24242B;     /* matches header/footer */
    --text-inverse-color: #EAE6DE;     /* Text color for dark backgrounds */
    --text-color: #5f6e63;                /* Primary text color for dark background*/
    --text-color: #3B3B45;                /* Primary text color for light background*/
    --text-preview-color: #d6dcd8;     /* Text preview viewers */

    /* Medium bevel effect used on upload page */
    --transition: all 0.3s ease; /* Smooth transition for interactive effects */
    --border-radius: 5px; /* rounded corners */
    --position: relative;
    --box-shadow: 
        1px 1px 2px rgba(255, 255, 255, 0.85), /* Top left outer highlight */
        -1px -1px 2px rgba(255, 255, 255, 0.85), /* Top left inner highlight */
        1px 1px 2px rgba(0, 0, 0, 0.25) inset, /* Top left inner shadow */
        -1px -1px 2px rgba(0, 0, 0, 0.15) inset, /* Bottom right inner shadow */
        2px 2px 5px rgba(0, 0, 0, 0.25); /* Bottom right outer shadow */
    --box-shadow-hover:
        2px 2px 4px rgba(255, 255, 255, 0.9), /* More pronounced top left outer highlight */
        -2px -2px 4px rgba(255, 255, 255, 0.9), /* More pronounced top left inner highlight */
        2px 2px 4px rgba(0, 0, 0, 0.3) inset, /* Deeper top left inner shadow */
        -2px -2px 4px rgba(0, 0, 0, 0.2) inset, /* Deeper bottom right inner shadow */
        4px 4px 10px rgba(0, 0, 0, 0.4); /* Larger bottom right outer shadow */
}

body {
    font-size: 125%;
    background-color: var(--main-background-color);
    color: var(--text-color);
}

p {
font-family:"Inter", Arial, sans;
font-size: 22px;
font-weight: 400;
line-height: 1em;
}

h1 {
font-family:"Inter", Arial, sans;
font-size: 64px;
font-weight: 800;
line-height: 1.5em;
}

h2 {
font-family:"Inter", Arial, sans;
font-size: 42px;
font-weight: 600;
line-height: 1.25em;
text-transform: uppercase;
}

h3 {
font-family:"Inter", Arial, sans;
font-size: 42px;
font-weight: 500;
line-height: 1.25em;
}

h4 {
font-family:"Inter", Arial, sans;
font-size: 32px;
font-weight: 400;
line-height: 1em;}
text-transform: uppercase;
}

h5 {
font-family:"Roboto Mono", mono, sans;
font-size: 22px;
font-weight: 500;
line-height: 1.25em;}

h6 {
font-family:"Roboto Mono", mono, sans;
font-size: 55px;
font-weight: 400;
line-height: 1.25em;}

input[type="checkbox"] {
    transform: scale(1.5); 
    margin-right: 5px;  /* Provides spacing to the right of the checkbox */
    cursor: pointer;    /* Changes the cursor to a pointer to indicate it's clickable */
    position: relative; /* Position relative to its normal position */
    top: -2px; /* Moves the checkbox up slightly */
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button {
    margin-top: 10px;
    width: auto;
    padding: 10px 20px;
    color: black;
    border: none;
    cursor: pointer;
    border-radius: var(--border-radius);
    background-color: var(--button-color);
    box-shadow: var(--box-shadow);
    position: var(--position);
    transition: var(--transition);
}

button:hover {
    background-color: var(--button-hover-color);
    box-shadow: var(--box-shadow-hover);
}

input[type="submit"] {
    background-color: var(--button-color);
    font-size: 1.5em;

    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;

    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: var(--position);
    transition: var(--transition);

    padding: 20px 25px; /* Adjust padding to control button size */
}

input[type="submit"]:hover {
    background-color: var(--button-hover-color);
}

.border-color {
    color: var(--border-color);
}

.button-color {
    color: var(--button-color);
}

.button-hover-color {
    color: var(--button-hover-color);
}

/* Centering the title similar to the Paste File page */
.centered-title {
    font-family: 'Roboto Mono', monospace; /* Matches font from Paste File page */
    font-size: 2.5em; /* Matches font size from Paste File page */
    font-weight: 600; /* Matches the weight used in the Paste File page */
    text-align: center; /* Center the title */
    margin-bottom: 20px; /* Adds spacing similar to the Paste File page */
}

.flash-message,
.flash-messages {
    width: 250px; /* Match the width of the input fields */
    width: 80%;
    color: var(--flash-message-color);
    text-align: left;
    max-width: 600px;
    margin-bottom: 20px;
}

.link-color {
    color: var(--flash-message-color);
}

/* displays small, fixed amount of structured text */
.metadata {
    width: 95%;
    border-radius: var(--border-radius);
    border: 1px solid var(--text-preview-color);
    background-color: var(--text-preview-color);
    box-shadow: var(--box-shadow);
    padding: 10px;
}

.metadata p {
    margin: 10px 0;
}

.text-color {
    color: var(--text-color);
}

.text-inverse-color {
    color: var(--text-inverse-color);
}

.text-preview {
    overflow-y: auto; /* Vertical scrolling */
    width: 95%;
    height: 400px; /* fixed for scrolling */
    padding: 10px;
    margin-bottom: 20px;
    background-color: var(--text-preview-color);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--text-preview-color);
    border-radius: var(--border-radius);
    padding: 10px;
}

/*  Make text box wrap text */
.text-preview pre {
    white-space: pre-wrap; /* Wrap text */
    word-break: break-word; /* Breaks long words */
    margin: 0; /* Reset default margin of <pre> */
}

.text-preview-color {
    color: var(--text-preview-color);
}

.logo-image {
    width: 60px; 
    height: 60px;
    border-radius: 25%; /* Rounds the logo image corners */
}
.logo-image-large {
    max-width: 160px;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 25%; /* Rounds the logo image corners */
}

.site-title {
    font-size: 3.5rem; 
    line-height: 50px; 
    color: #fff; 
}

.submit-button.btn-primary {
    padding: 25px 45px; /* Button size */
    font-size: 1.5em; /* Button text */
    height: auto;
    color: black;
    border-radius: 5px; /* Rounds button corners */
    cursor: pointer;
    margin-top: 20ps;
    align-items: center;
    background-color: var(--button-color);
}

.submit-button.btn-primary:hover {
    background-color: var(--button-hover-color);
}

.user-input button[type="submit"] {
    color: black;
}

/* selector of original, proofread, or transformed document */
#documentSwitcher {
  width: auto;
  margin-top: 10px;
  padding: 8px; 
  font-size: 18px; /* Match the GENERATE button's font size */
}


.profile-links{
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Adjust the spacing above the links */
}

.profile-links a {
    margin: 0 10px; /* Add space between each link */
    font-size: 1.5em; /* Adjust the font size as needed */
}