/*
    TEMPLATE01 - additions

    Everything the data-driven rebuild introduced that the original "Photographer"
    theme had no equivalent for: page subtitles, empty states, the contact form's
    success/error notices, the journal listing, and the detail lists on About /
    Contact.

    Kept in its own file, loaded after main.css, so the theme's stylesheets stay
    byte-identical to the ones it shipped with and can be diffed against a future
    version of the theme without wading through our changes.

    Palette is taken from main.css: #333 ink on #fff, 3px borders, 10px uppercase
    letterspaced labels.
*/

/* ---------------------------------------------------------------- headings */

.entry-subtitle {
    margin: 0.6em 0 0;
    font-size: 0.95em;
    color: #999;
}

.entry-header .entry-subtitle a {
    color: #999;
    border-bottom: 1px solid #ddd;
}

.entry-header .entry-subtitle a:hover {
    color: #333;
}

p.lead {
    font-size: 1.15em;
    line-height: 1.6;
    color: #666;
}

/* ------------------------------------------------------------ empty states */

.empty-note {
    padding: 3em 0;
    text-align: center;
    color: #999;
    font-style: italic;
}

/* ------------------------------------------------------------ home : intro */

/*
    The intro sits over the animated photowall, so the two buttons need to stay
    legible against whatever photo happens to be behind them at the time - hence
    the solid default and the inverted outline variant rather than two ghosts.
*/
.intro-actions {
    margin-top: 1.8em;
}

.intro-actions .button {
    margin: 0 0.3em 0.6em;
}

.button-outline {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.button-outline:hover,
.button-outline:focus {
    background: #fff;
    border-color: #fff;
    color: #333;
}

/* ------------------------------------------------------- about : portrait */

/*
    Capped at the width Cloudinary actually serves (680px), so the portrait is
    never upscaled past its own resolution.
*/
.about-portrait {
    margin: 0 auto 2.5em;
    max-width: 420px;
}

.about-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------- about / contact details */

ul.about-details {
    list-style: none;
    margin: 1.5em 0;
    padding: 0;
    text-align: center;
}

ul.about-details li {
    display: inline-block;
    margin: 0 1.2em 0.8em;
    font-size: 0.95em;
}

ul.about-details strong {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 0.3em;
}

/* -------------------------------------------------------- contact : notices */

.form-success,
.form-error {
    padding: 1.2em 1.5em;
    margin-bottom: 1.5em;
    border: 3px solid #333;
    font-size: 0.95em;
}

.form-success {
    border-color: #333;
    background: #f7f7f7;
}

.form-error {
    border-color: #c0392b;
    color: #c0392b;
}

/*
    The theme's own honeypot styling - the markup ships with the field visible
    and relies on the demo's inline CSS to hide it, which we do not load.
*/
p.antispam {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------ blog listing */

/*
    Listing thumbnail. Stays inside the content column and is capped in height so
    a portrait-orientation upload cannot push the next headline off the screen.
*/
.post-thumb {
    margin-bottom: 1.6em;
}

.post-thumb img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.post-summary {
    margin-bottom: 4em;
    padding-bottom: 4em;
    border-bottom: 1px solid #eee;
}

.post-summary:last-child {
    border-bottom: 0;
}

.post-summary .entry-title {
    font-size: 1.6em;
}

.post-summary .entry-title a {
    color: #333;
}

.post-summary .entry-title a:hover {
    color: #999;
}

.entry-meta {
    margin-top: 0.6em;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999;
}

.entry-meta span + span:before {
    content: "\00b7";
    margin: 0 0.6em;
}