/*
    TEMPLATE01 - additions only.

    style.css and bootstrap.css are the original bytomasz.com stylesheets and
    are left untouched, so this file holds the few things the original markup
    didn't have: the headshot-as-logo, the inner-page menu, a modernised footer,
    and the shared shell for the inner pages.

    Everything here inherits the original palette - #BE3530 accent, #eee page
    ground, Montserrat headings, Open Sans body. Nothing restyles the boxes;
    the wave, the caption and the hover all come from style.css.
*/

/* -------------------------------------------------------------- wave fix */
/*
    style.css sets `.work svg { position: absolute; top: -1px; }` with no
    `left`, so the element falls back to its static position - which, sitting
    after a block-level <img>, put it half a tile to the right. The wave then
    covered only the right-hand side of each box and left the image showing on
    the left. Measured: left computed to 131.25px on a 263px tile.

    Pinning left:0 is the whole fix. Left in this file rather than patched into
    style.css so the original stylesheet stays byte-identical to the one the
    live site serves.
*/
.work svg { left: 0; }

/* ------------------------------------------------------------------- logo */

.site-logo {
    display: block;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
}

.site-logo--initials {
    line-height: 90px;
    text-align: center;
    background: #BE3530;
    color: #fff;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .04em;
    text-decoration: none;
}

.site-logo--initials:hover,
.site-logo--initials:focus {
    color: #fff;
    text-decoration: none;
}

/* -------------------------------------------------------- inner-page menu */
/*
    Home has no nav at all - that is the design. This only ever renders on the
    inner pages, where there has to be a way back out.
*/

.inner-menu {
    margin: 0;
    padding-top: 28px;
}

.inner-menu > li {
    padding: 0 2px;
}

.inner-menu > li > a {
    display: inline-block;
    padding: 9px 14px;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #888;
    border-radius: 3px;
    text-decoration: none;
    transition: all .2s;
}

.inner-menu > li > a:hover {
    color: #222;
    background-color: #eee;
}

.inner-menu > li > a.active {
    color: #fff;
    background-color: #BE3530;
}

@media (max-width: 767px) {
    #responsive-menu-button { display: block; }
    .inner-menu { display: none; }
    .inner-menu.is-open { display: block; }
    .inner-menu > li { display: block; }
    .inner-menu > li > a { display: block; }
}

/* ------------------------------------------------------- inner page shell */

.page-body {
    background-color: #eee;
    padding: 40px 0 60px;
    margin-top: 30px;
}

.page-card {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);
    padding: 34px 38px;
}

.page-card + .page-card { margin-top: 24px; }

.page-card h4.section-title {
    margin-top: 0;
    font-family: "Montserrat";
    font-weight: 700;
    text-transform: uppercase;
    color: #444;
    font-size: 16px;
}

/*
    .hr is left to style.css, which draws it as a full-width 1px rule with a
    20%-wide red segment on top via :before - the theme's section underline.
    It is `float: left`, so an earlier override to `width: 50px` made it sit
    beside the heading text instead of under it. At 100% it takes its own line,
    which is the intended look; the h4 just has to contain the float.
*/
.page-card h4.section-title { overflow: hidden; }

.page-lead {
    color: #777;
    font-size: 14px;
    margin: 14px 0 0;
}

.page-empty {
    text-align: center;
    color: #999;
    padding: 40px 0;
    font-size: 14px;
}

.page-empty small { display: block; margin-top: 6px; color: #bbb; }

/* ---------------------------------------------------------------- filters */

.work-filters { margin: 0 0 26px; padding: 0; list-style: none; }

.work-filters li {
    display: inline-block;
    margin: 0 6px 8px 0;
    padding: 8px 15px;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .06);
    transition: all .2s;
}

.work-filters li:hover { color: #222; }
.work-filters li.active { background: #BE3530; color: #fff; }

/* ---------------------------------------------------------------- gallery */

.shot { margin-bottom: 30px; }

.shot figure {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);
    background: #fff;
    margin: 0;
}

.shot img { width: 100%; height: auto; display: block; }

.shot figcaption { padding: 14px 16px; }

.shot .shot-title {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    color: #444;
}

.shot .shot-cat { display: block; font-size: 11px; color: #BE3530; margin-top: 4px; text-transform: uppercase; }
.shot .shot-desc { font-size: 13px; color: #777; margin: 8px 0 0; }
.shot.is-hidden { display: none; }

/* ------------------------------------------------------------------ links */

.linkrow {
    display: block;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .1);
    padding: 16px 18px;
    margin-bottom: 14px;
    text-decoration: none;
    transition: all .2s;
}

.linkrow:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.linkrow .linkrow-name { font-family: "Montserrat"; font-weight: 700; font-size: 13px; text-transform: uppercase; color: #444; }
.linkrow .linkrow-host { font-size: 12px; color: #999; margin-left: 8px; }
.linkrow .linkrow-go { float: right; color: #BE3530; }

/* ---------------------------------------------------------------- contact */

.contact-form label { display: block; font-size: 12px; color: #888; font-weight: 400; margin-bottom: 18px; }
.contact-form label span { display: block; margin-bottom: 6px; text-transform: uppercase; font-family: "Montserrat"; font-weight: 700; font-size: 11px; }
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 11px 13px;
    font-family: "Open Sans";
    font-size: 14px;
    color: #444;
    transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: #BE3530; }
.contact-form textarea { min-height: 150px; resize: vertical; }

.contact-form .btn-send {
    background: #BE3530;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 12px 26px;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity .2s;
}
.contact-form .btn-send:hover { opacity: .88; }

/* honeypot - people never see this, bots fill it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note { padding: 12px 16px; border-radius: 3px; margin-bottom: 20px; font-size: 14px; }
.note-good { background: #eaf6ec; color: #35773f; }
.note-bad { background: #fbeceb; color: #a3332d; }

/* ----------------------------------------------------------------- footer */
/*
    The original was a single centred line of 2015 copyright. Same footprint,
    same palette, just given a bit of structure.
*/

footer {
    background: #2a2a2a;
    color: #999;
    padding: 34px 0 26px;
    text-align: left;
}

.footer-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid #3a3a3a;
}

.footer-brand strong {
    display: block;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: .04em;
}

.footer-brand span { font-size: 12.5px; color: #8b8b8b; }

.footer-nav { margin: 0; }
.footer-nav > li { padding: 0 10px 0 0; }
.footer-nav > li > a {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    color: #9a9a9a;
    text-decoration: none;
    transition: color .2s;
}
.footer-nav > li > a:hover { color: #fff; }

.footer-legal { margin: 16px 0 0; font-size: 12px; color: #6f6f6f; }

@media (max-width: 600px) {
    .footer-grid { flex-direction: column; align-items: flex-start; }
    header p { padding-left: 20px; padding-right: 20px; }
}