/* ========================================
   GUESTBOOK THEME: LETTERS FROM A SISTER
   ========================================
*/

:root {
    --width: 700px;
    --font-main: 'Special Elite', monospace;
    --background-color: #fbfbf6;
    --text-color: #333;
    --link-color: #333;
}

/* 1. OVERALL PAGE STYLING */
body {
    background-color: var(--background-color);
    font-family: var(--font-main);
    font-size: 22px;
    color: var(--text-color);
    line-height: 1.5;
    margin: auto;
    padding: 18px 12px;
    max-width: var(--width);
    text-align: centre;

    /* Lined Paper Background */
    background-image: linear-gradient(#e9e9e0 1px, transparent 1px);
    background-size: 100% 1.5em; /* Matches line-height */
    background-attachment: local;
    background-position: 0 0.4em; /* Aligns text to sit on the lines */
}

/* 2. HEADER CUSTOMISATION (TARGETING #title) */
h1#title {
    text-align: centre;
    font-family: var(--font-main);
    font-size: 20px;
    font-weight: 400;
    color: transparent; /* Makes the original URL invisible */
    line-height: 0;      /* Collapses the space of the hidden URL */
    margin-bottom: 2em;
    display: block;
}

h1#title::before {
    content: "Leave a note for Josephine";
    color: var(--text-color);
    visibility: visible;
    text-decoration: underline; /* Standard underline for links/headers */
    line-height: 1.5;
    display: block;
}

/* 3. FORM INPUTS (THE LETTER STYLE) */
input[type="text"],
input[type="url"],
textarea {
    width: 100%;
    font-family: var(--font-main);
    font-size: 0.9em;
    background-color: transparent; /* Changed to transparent so lines show through */
    color: var(--text-color);
    border: none;
    border-bottom: 1px solid #999;
    padding: 8px 0;
    margin-bottom: 1.5em;
    box-sizing: border-box;
    border-radius: 0;
}

textarea {
    border: 1px solid #999;
    padding: 10px;
    min-height: 150px;
    line-height: 1.5; /* Matches background lines */
}

input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-bottom: 1px solid #333;
}

/* 4. SUBMIT BUTTON */
input[type="submit"] {
    background: var(--background-color);
    font-family: var(--font-main);
    font-size: 0.8em;
    color: var(--text-color);
    border: 1px solid #333;
    padding: 5px 15px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #333;
    color: #fbfbf6;
}

/* 5. GUESTBOOK MESSAGES & SPACING */
.container {
    background: transparent;
    padding: 0;
    font-size: 0.8em;
}

hr {
    border: 0;
    border-top: 1px dashed #999;
    margin: 2em 0;
}

.guestbook-message-reply {
    border-left: 1px solid #999;
    padding-left: 20px;
    font-style: italic;
    margin-left: 0.8em;
    font-size: 1em;
}

footer, #guestbooks___guestbook-made-with {
    padding: 25px 0;
    text-align: centre;
    font-size: 0.8em;
}

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

/* Hide both the label and the input box for the website */
label[for="website"], 
input#website {
    display: none !important;
}