/*
=========================================================
PERSONAL SOVEREIGNTY
Questionnaire stylesheet
=========================================================

Layout deliberately follows the proportions used by:

A Life Between the Layers

Outer shell: 900px
Reading page: 760px

=========================================================
*/


/* ------------------------------------------------------
   BASIC RESET
   ------------------------------------------------------ */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------
   PAGE
   ------------------------------------------------------ */

body {
    background: #f6f6f4;
    color: #333;

    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.65;
}


/* ------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------ */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;

    background: #fff;
    color: #000;

    padding: 10px 15px;

    z-index: 1000;
}

.skip-link:focus {
    left: 10px;
    top: 10px;
}


/* ------------------------------------------------------
   LINKS
   ------------------------------------------------------ */

a {
    color: #286b73;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:focus {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}


/* ======================================================
   PERSONAL SOVEREIGNTY HEADER
   ====================================================== */

.question-header {
    background: #fff;
    border-bottom: 1px solid #d8d8d8;
}


.question-header-inner {
    max-width: 900px;

    margin: 0 auto;

    padding:
        18px
        24px;
}


.question-site-link {
    font-size: 0.8rem;

    margin-bottom: 5px;
}


.question-site-link a {
    color: #666;
    font-weight: normal;
}


.question-series-title {
    margin-top: 0.4rem;

    font-family:
        "Merriweather",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.35rem;
    line-height: 1.35;
    font-weight: 700;
}


.question-series-title a {
    color: #243f43;
    text-decoration: none;
}


.question-series-title a:hover {
    text-decoration: underline;
}


/* ======================================================
   OUTER PAGE SHELL

   SAME PROPORTION AS THE BOOK
   ====================================================== */

.question-shell {
    max-width: 900px;

    margin:
        0
        auto;

    padding:
        0
        24px
        50px
        24px;
}


/* ======================================================
   READING PAGE

   SAME PROPORTION AS THE BOOK
   ====================================================== */

.question-page {
    max-width: 760px;

    margin:
        0
        auto;

    padding:
        35px
        55px
        50px
        55px;

    background: #fff;

    font-size: 18px;
    line-height: 1.72;
}


/* ======================================================
   PAGE TITLE
   ====================================================== */

/*
 * Support both the final Personal Sovereignty names
 * and the older chapter names during development.
 */

.question-title-row,
.chapter-title-row {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    gap: 14px;

    width: 100%;

    margin:
        0
        0
        35px
        0;

    padding: 0;
}


.question-title-row > div,
.chapter-title-row > div {
    min-width: 0;
}


.question-title-row h1,
.chapter-title-row h1 {
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------
   TITLE ICON

   Also constrains the older copied book icon markup.
   ------------------------------------------------------ */

.question-title-icon,
.chapter-title-icon,
.question-page .question-title-icon,
.question-page .chapter-title-icon {
    width: 72px !important;
    height: 72px !important;

    max-width: 72px !important;
    max-height: 72px !important;

    object-fit: contain;

    display: block;

    margin: 0 !important;
    padding: 0;

    flex:
        0
        0
        72px;
}


/* ======================================================
   HEADINGS
   ====================================================== */

.question-page h1,
.question-page h2,
.question-page h3 {
    font-family:
        "Merriweather",
        Georgia,
        "Times New Roman",
        serif;

    color: #292929;
}


.question-page h1 {
    font-size: 2.15rem;
    font-weight: 400;
    line-height: 1.25;

    margin:
        0
        0
        35px
        0;
}


.question-page h2 {
    font-size: 1.45rem;
    line-height: 1.35;

    margin:
        45px
        0
        18px
        0;
}


.question-page h3 {
    font-size: 1.15rem;
    line-height: 1.4;

    margin:
        30px
        0
        15px
        0;
}


/* ======================================================
   BODY TEXT
   ====================================================== */

.question-page p {
    margin:
        0
        0
        1.15rem
        0;
}


.question-page strong {
    font-weight: 700;
}


.question-page em {
    font-style: italic;
}


/* ======================================================
   LISTS
   ====================================================== */

.question-page ul {
    margin:
        0
        0
        25px
        30px;

    padding: 0;

    list-style-type: disc;
}


.question-page ol {
    margin:
        0
        0
        25px
        30px;

    padding: 0;

    list-style-type: decimal;
}


.question-page li {
    display: list-item;

    margin:
        0
        0
        10px
        0;

    padding: 0;
}


/* ======================================================
   GENERAL IMAGES
   ====================================================== */

.question-page img {
    max-width: 100%;
    height: auto;
}


/*
 * Normal content images may be centred,
 * but NOT the page title icon.
 */

.question-page img:not(.question-title-icon):not(.chapter-title-icon) {
    display: block;

    margin:
        30px
        auto;
}


/* ======================================================
   PREVIOUS / QUESTIONNAIRES / NEXT
   ====================================================== */

.question-navigation {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    gap: 15px;

    align-items: center;

    max-width: 760px;

    margin:
        22px
        auto;

    font-size: 0.85rem;
}


.question-navigation a {
    font-weight: 700;
}


.question-nav-previous {
    text-align: left;
}


.question-nav-contents {
    text-align: center;
}


.question-nav-next {
    text-align: right;
}


/* ======================================================
   QUESTIONNAIRE NUMBER / IDENTIFIER
   ====================================================== */

.sovereignty-questionnaire-number {
    margin:
        0
        0
        5px
        0 !important;

    color: #527177;

    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ======================================================
   QUESTIONNAIRE INTRODUCTION
   ====================================================== */

.ps-questionnaire-intro {
    margin-bottom: 2rem;
}


.ps-version {
    margin-top: 1.5rem;

    color: #666;

    font-size: 0.85rem;
}


/* ======================================================
   BEFORE YOUR 12TH BIRTHDAY
   ====================================================== */

.ps-question-period {
    margin:
        1.5rem
        0
        2rem
        0;

    padding:
        1rem
        1.2rem;

    background: #f4f8f7;

    border:
        1px
        solid
        #bdccca;

    border-radius: 6px;
}


.ps-question-period p:last-child {
    margin-bottom: 0;
}


.ps-question-period strong {
    font-family:
        "Merriweather",
        Georgia,
        serif;

    font-size: 1.3em;

    color: #294b4f;
}


/* ======================================================
   INDIVIDUAL QUESTIONS
   ====================================================== */

.ps-question {
    margin:
        2rem
        0;

    padding:
        1.3rem;

    background: #fff;

    border:
        1px
        solid
        #ccd0d2;

    border-radius: 7px;
}


.ps-question-text {
    font-size: 1.05em;
}


/* ======================================================
   INCOMPLETE QUESTION
   ====================================================== */

.ps-question-incomplete {
    background: #fff7df;

    border:
        2px
        solid
        #b87816;
}


.ps-incomplete-label {
    display: inline-block;

    margin-bottom: 0.7rem;

    padding:
        0.25rem
        0.65rem;

    background: #a96612;
    color: #fff;

    font-size: 0.85rem;
    font-weight: 700;

    border-radius: 4px;
}


/* ======================================================
   ANSWER FIELDSET
   ====================================================== */

.ps-question fieldset {
    margin:
        1rem
        0;

    padding:
        1rem;

    border:
        1px
        solid
        #ccd0d2;

    border-radius: 5px;
}


.ps-question legend {
    padding:
        0
        0.4rem;

    font-weight: 700;
}


.ps-answer-option {
    display: block;

    margin:
        0.55rem
        0;

    cursor: pointer;
}


.ps-answer-option input {
    margin-right: 0.45rem;
}


/* ======================================================
   YES / NO FOLLOW-UP
   ====================================================== */

.ps-followup {
    margin-top: 1.2rem;

    padding:
        0.9rem
        1rem;

    background: #f5f7f7;

    border-left:
        4px
        solid
        #7c9797;
}


/* ======================================================
   SELECTS
   ====================================================== */

.ps-question select {
    max-width: 100%;

    padding:
        0.5rem
        0.6rem;

    background: #fff;

    border:
        1px
        solid
        #aaa;

    border-radius: 4px;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 1rem;
}


/* ======================================================
   REFLECTION TEXT AREAS
   ====================================================== */

.ps-draft-status {
    margin: 0.9rem 0 0;
    font-size: 0.94em;
    color: #355e49;
    font-weight: 700;
}

.ps-reflection {
    margin-top: 1.35rem;
}


.ps-reflection strong {
    display: inline-block;

    margin-bottom: 0.35rem;
}


.ps-reflection textarea {
    display: block;

    width: 100%;
    min-height: 85px;

    margin-top: 0.4rem;

    padding:
        0.65rem
        0.75rem;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 1rem;
    line-height: 1.5;

    border:
        1px
        solid
        #aaa;

    border-radius: 4px;

    resize: vertical;
}


/* ======================================================
   QUESTION COMPLETE

   GREEN CONFIRMATION
   ====================================================== */

.ps-question-status {
    margin-top: 1.3rem;

    font-weight: 700;
}


.ps-question-status.complete {
    padding:
        0.65rem
        0.8rem;

    background: #edf7ee;

    color: #236435;

    border:
        1px
        solid
        #70a87b;

    border-radius: 5px;
}


/* ======================================================
   NEXT QUESTION LINKS
   ====================================================== */

.ps-next-question {
    margin-top: 0.7rem;

    font-weight: 700;
}


.ps-next-question a {
    display: inline-block;

    padding:
        0.4rem
        0;
}


.ps-next-incomplete {
    margin-top: 0.6rem;

    font-size: 0.92rem;
}


/* ======================================================
   REVIEW
   ====================================================== */

.ps-review-summary {
    margin:
        1.5rem
        0;

    padding:
        1.1rem
        1.2rem;

    background: #f4f8f7;

    border:
        1px
        solid
        #bdccca;

    border-radius: 6px;
}


.ps-response {
    margin:
        2rem
        0;

    padding:
        1.2rem;

    border:
        1px
        solid
        #ccd0d2;

    border-radius: 6px;
}


.ps-response-incomplete {
    background: #fff7df;

    border:
        2px
        solid
        #b87816;
}


/* ======================================================
   BUTTONS
   ====================================================== */

.ps-submit {
    margin:
        2rem
        0;
}


.ps-submit button,
.ps-review-actions button,
.ps-first-incomplete button {
    padding:
        0.7rem
        1rem;

    background: #356f75;
    color: #fff;

    border: 0;

    border-radius: 5px;

    font-family:
        "Lato",
        Arial,
        sans-serif;

    font-size: 1rem;
    font-weight: 700;

    cursor: pointer;
}


.ps-submit button:hover,
.ps-review-actions button:hover,
.ps-first-incomplete button:hover {
    background: #285a60;
}


.ps-submit button:focus,
.ps-review-actions button:focus,
.ps-first-incomplete button:focus {
    outline:
        3px
        solid
        #222;

    outline-offset: 3px;
}


/* ======================================================
   REVIEW ACTIONS
   ====================================================== */

.ps-review-actions {
    margin-top: 2rem;

    padding-top: 1.3rem;

    border-top:
        1px
        solid
        #ccc;
}


.ps-review-actions form {
    display: inline-block;

    margin:
        0
        1rem
        1rem
        0;
}


.ps-first-incomplete {
    margin:
        1.5rem
        0;
}


/* ======================================================
   QUESTIONNAIRE SERIES PAGE
   ====================================================== */

.sovereignty-questionnaire-entry {
    margin:
        1.5rem
        0
        2rem
        0;

    padding:
        1rem
        1.2rem;

    background: #f7f9f9;

    border-left:
        4px
        solid
        #718f91;
}


.sovereignty-questionnaire-entry h3 {
    margin-top: 0.25rem;
}


.sovereignty-questionnaire-status {
    color: #666;

    font-size: 0.9rem;
}


/* ======================================================
   FOOTER
   ====================================================== */

.question-footer {
    max-width: 760px;

    margin:
        35px
        auto
        0
        auto;

    padding-top: 25px;

    border-top:
        1px
        solid
        #ccc;

    text-align: center;

    font-size: 0.8rem;
    line-height: 1.5;

    color: #666;
}


.question-publication-details span {
    display: inline-block;

    margin:
        0
        8px
        6px
        8px;
}


.question-footer-title {
    margin:
        12px
        0
        6px
        0;

    font-family:
        "Merriweather",
        Georgia,
        serif;

    font-weight: 700;

    color: #444;
}


.question-footer-project-links,
.question-footer-site {
    margin:
        6px
        0;
}


/* ======================================================
   INTERNET ARCHIVE LINK
   ====================================================== */

.question-archive-link {
    display: block;

    width: 12px;
    height: 12px;

    margin:
        8px
        auto;

    overflow: hidden;

    font-size: 1px;
}


.question-archive-link img {
    width: 10px;
    height: 10px;

    margin: 0;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media screen and (max-width: 700px) {

    body {
        font-size: 17px;
        line-height: 1.6;
    }


    .question-header-inner {
        padding:
            15px
            16px;
    }


    .question-shell {
        padding-left: 0;
        padding-right: 0;
    }


    .question-page {
        max-width: none;

        padding:
            28px
            20px
            40px
            20px;
    }


    .question-page h1 {
        font-size: 1.75rem;
    }


    .question-title-row,
    .chapter-title-row {
        gap: 8px;
    }


    .question-title-icon,
    .chapter-title-icon,
    .question-page .question-title-icon,
    .question-page .chapter-title-icon {
        width: 58px !important;
        height: 58px !important;

        max-width: 58px !important;
        max-height: 58px !important;

        flex-basis: 58px;
    }


    .question-navigation {
        padding:
            0
            16px;

        margin-top: 18px;
        margin-bottom: 18px;
    }


    .ps-question {
        padding: 1rem;
    }


    .ps-review-actions form {
        display: block;

        margin-right: 0;
    }


    .ps-review-actions button,
    .ps-submit button,
    .ps-first-incomplete button {
        width: 100%;
    }


    .question-footer {
        margin-left: 16px;
        margin-right: 16px;
    }

}


/* ======================================================
   VERY SMALL SCREENS
   ====================================================== */

@media screen and (max-width: 420px) {

    body {
        font-size: 16px;
    }


    .question-page {
        padding-left: 16px;
        padding-right: 16px;
    }


    .question-page h1 {
        font-size: 1.6rem;
    }


    .question-title-icon,
    .chapter-title-icon,
    .question-page .question-title-icon,
    .question-page .chapter-title-icon {
        width: 50px !important;
        height: 50px !important;

        max-width: 50px !important;
        max-height: 50px !important;

        flex-basis: 50px;
    }


    .question-navigation {
        gap: 8px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 0.78rem;
    }


    .ps-question-period strong {
        font-size: 1.2em;
    }

}


/* ======================================================
   PRINT
   ====================================================== */

@media print {

    body {
        background: #fff;
        color: #000;

        font-size: 12pt;
    }


    .question-header,
    .question-navigation,
    .question-footer,
    .skip-link,
    .ps-submit,
    .ps-review-actions,
    .ps-next-question,
    .ps-next-incomplete {
        display: none;
    }


    .question-shell,
    .question-page {
        max-width: none;

        margin: 0;
        padding: 0;

        background: #fff;
    }


    .question-title-icon,
    .chapter-title-icon {
        display: none;
    }


    .ps-question,
    .ps-response {
        page-break-inside: avoid;
    }


    a {
        color: #000;
        text-decoration: none;
    }

}