/*
 * The site's styles, on top of Bootstrap 3 and Lato (both linked from
 * includes/head.php). The first half is the old hand-coded site's styles.css;
 * the second, from the maintenance banner on, the CMS's own additions.
 */

/* Chris|Maggs logo (includes/navigation.php): #logo > a > #logoLeft + #logoRight */
#logo{position:relative;margin-top:7px}
#logo a{font-size:18px;line-height:32px;color:#fff;text-shadow:0 0 1px #333}
#logoLeft,#logoRight{position:absolute;top:0;height:36px;border:1px solid #ccc}
#logoLeft{left:10px;width:77px;padding-left:9px;border-radius:7px;background:linear-gradient(#828282,#393731)}
#logoRight{left:69px;width:70px;padding-left:6px;border-left:0;border-radius:0 7px 7px 0;background:linear-gradient(#4daccc,#298cad 62%)}

:root {
    --blue: #298CAD;
    --background-image: #FFFFFF url(../images/schematic.png) no-repeat top right;
}
body {
    font-size: 16px;
    background-color: #f2f2f2;
    margin-top: 50px;
    color: #555;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 50px);
}
#page-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.homepage,
.content {
    flex: 1;
}
h1,h2,h3,h4,h5,h6,button,a.btn,input,blockquote {
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
    font-weight:400;
}
/* BS over-ride */
.has-error .help-block {
    margin-bottom: 0;
    text-align: right;
    font-style: italic;
}
/* TOP NAVIGATION --------------------------------- */
/* ------------------------------------------------ */
.navbar {
    font-weight: 400;
    font-size: 14px;
}
.navbar-inverse {
    background-color: #2d2d2d;
    border-color: #2d2d2d;
}
.navbar-inverse .navbar-nav > .active > a {
    background: var(--blue);
}
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background: var(--blue);
    cursor: default;
}
.dropdown-menu {
    background-color: #c1c1c1;
    border-color: #333;
}
.dropdown-menu > li > a {
    padding: 5px 20px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #333;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--blue);
    cursor: default;
}
/*  TYPOGRAPHY  ------------------------------------   */
/*  ------------------------------------------------   */
a {
    color: #298cad;
    word-wrap: break-word;
    -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
    transition: color 0.2s ease-in, background 0.2s ease-in;
}
a:before, a:after {
    -webkit-transition: color 0.2s ease-in, background 0.2s ease-in;
    transition: color 0.2s ease-in, background 0.2s ease-in;
}
a:hover,
a:focus {
    color: #298cad;
    text-decoration: none;
    outline: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
i:hover {
    cursor: help;
}
a.blue {
    color: var(--blue);
}
.post-link a {
    color: #333333;
}
/* SHARED BOX STYLE ------------------------------- */
/* ------------------------------------------------ */
.panel-box {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* ALL PAGES  ------------------------------------- */
/* ------------------------------------------------ */
.homepage,
.content {
    background-color: #FFF;
    padding: 30px 20px;
    margin-top: 30px;
}
/* The schematic sits behind the homepage's hero; inner pages draw it below
   the page title instead (.content .page-title, further down) */
.homepage {
    background: var(--background-image);
}
h1 {
    font-size: 36px;
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    color: var(--blue);
    letter-spacing: 3px;
    text-shadow: 1px 1px 1px #686868;
}
.homepage h1 {
    font-size: 50px;
    line-height: 60px;
}
h2 {
    font-size: 30px;
    font-weight: 300;
    line-height: 30px;
    margin: 20px 0;
    color: #000000;
    letter-spacing: 2px;
    text-shadow: 1px 1px 1px #686868;
}
h3 {
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0;
    color: #333333;
}
h4 {
    font-size: 16px;
    line-height: 18px;
    margin: 10px 0;
}

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

    h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .homepage h1 {
        font-size: 40px;
        line-height: 50px;
    }
    h2 {
        font-size: 25px;
    }
}

blockquote {
    font-size: inherit;
    border:      1px solid var(--blue);
    border-left: 5px solid var(--blue);
    margin: 20px 0;
    padding: 10px;
}

/* {home} ----------------------------------------- */
/* ------------------------------------------------ */
span.code {
    color: #298cad;
    font-size: 20px;
    font-family: monospace;
    text-align: left;
    display: block;
}
.p10 {  padding-left: 50px; }
.p80 {  padding-left: 80px; }
.m10 {  display: block; margin-left: 50px; }
.m20 {  display: block; margin-left: 100px; }

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

    .p10 {  padding-left: 30px; }
    .p80 {  padding-left: 50px; }

    .m10 {  margin-left: 30px; }
    .m20 {  margin-left: 60px; }

}

/* {summary} -------------------------------------- */
/* ------------------------------------------------ */
#summary {
    padding-top: 20px;
    padding-bottom: 20px;
}
#summary h4 {
    color: var(--blue);
    margin: 10px 0 15px;
}
#summary .summary {
    padding: 5px;
}
@media (min-width: 992px) {
    #summary .summary:first-of-type {
        padding-left: 0;
    }
    #summary .summary:last-of-type {
        padding-right: 0;
    }
}
#summary .summary-inner {
    padding: 20px;
    height: 100%;
}
/* {OSSOFTWARE} ----------------------------------- */
/* ------------------------------------------------ */
/* A box in a .projects-grid (templates/bespoke/bespoke-git-projects.php,
   bespoke-open-source-software.php), whose flex row stretches every box to
   the tallest; the link bar sits at the bottom (margin-top: auto). Heading +
   link heights are matched per row by js/site.js. */
.ossoftware {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--blue);
    padding: 10px 10px 0;
}
.ossoftware h2 {
    margin-top: 10px;
}
.ossoftware img {
    margin-left: 20px;   /* the Git Projects' StyleCI badges */
}
/* Logo row (bespoke-open-source-software.php): a fixed 200px band, so the
   titles below still line up across a row whatever the logo's shape. Images
   shrink to fit it but aren't stretched past their own size. */
.ossoftware p.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin: 0;
}
.ossoftware p.logo img {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
.ossoftware p.link {
    background-color:var(--blue);
    padding: 5px 10px;
    margin: auto -10px 0;
}
.ossoftware p.link a {
    color:#fff
}
.ossoftware p.link a:hover {
    color:#333;
}
dl.pros dt,
dl.cons dt {
    font-weight: bold;
    font-size: 16px;
    color: var(--blue);
    padding: 5px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}
dl.pros dd,
dl.cons dd {
    margin-left: 5px;
}
dl.pros dd i,
dl.cons dd i {
    font-size: 16px;
    color: var(--blue);
    padding: 5px;
}
/* {RHS COL} -------------------------------------- */
/* ------------------------------------------------ */
.pt20 {     padding-top: 20px;  }
.pt50 {     padding-top: 50px;  }

.img-border {
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #298cad #1C667F #1C667F #298cad;
}
/* API Form page ---------------------------------- */
/* ------------------------------------------------ */
.pre,
.pre pre {
    min-height:600px;
}
.table > thead > tr > th {
    vertical-align: top;
}
/* FOOTER------------------------------------------ */
/* ------------------------------------------------ */
#footer {
    background: #2d2d2d;
    padding-bottom: 30px;
    font-size: 14px;
}
#footer h3 {
    color:#ccc;
    font-size: 25px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 0 #000;
}
#footer h4 {
    font-size: 14px;
    color: #ccc;
}
#footer .links {
    padding-top: 20px;
}
#footer img.icon {
    padding-right: 5px;
    max-width:32px;
    max-height: 32px
}
#footer p,
#footer a {
    color: #7b7b7b;
}
#footer a:hover,
#footer a:focus {
    color: #ffffff;
}

/* Shown to a logged-in admin while MAINTENANCE_MODE is on (includes/maintenanceBanner.php) */

#maintenanceBanner {
    padding: 0.6rem 1.5rem;
    background: #fcf3d9;
    color: #6b5514;
    border-bottom: 1px solid #e6d190;
    font-size: 0.85rem;
    text-align: center;
}

/* Blog callouts (Admin::CALLOUT_STYLES) - same colours as the admin preview
   in admin/css/styles.css; a new style needs a .callout-<key> rule in both. */

.callout {
    border: 1px solid;
    border-left-width: 5px;
    border-radius: 4px;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
}
.callout:last-child {
    margin-bottom: 0;
}
.callout-error   { border-color: #d9534f; background: #fdf2f2; }
.callout-warning { border-color: #f0ad4e; background: #fdf8ec; }
.callout-info    { border-color: #298cad; background: #eff7fa; }

/* Homepage .summary - Content-1 is a <ul> in the CMS; shown like the old
   site's h3 lines (the h3 rule above), no bullets */

.homepage-summary ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.homepage-summary li {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    line-height: 30px;
    margin: 10px 0;
    color: #333333;
}

/* Blog listings (includes/blogPostSummary.php) */

.blog-summary {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.blog-summary:last-of-type {
    border-bottom: 0;
}
h2.blog-summary-title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 1px;
    text-shadow: none;
    margin: 0 0 6px;
}
h2.blog-summary-title a {
    color: var(--blue);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
h2.blog-summary-title a:hover,
h2.blog-summary-title a:focus {
    color: #1c667f;
    border-bottom-color: currentColor;
}
.blog-summary-text {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 10px;
}
/* Date on the left, 'Read post' on the right, on one line */
.blog-summary-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 5px 15px;
    margin: 0;
}
.blog-summary-date {
    color: #888;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* 'Read post' is a btn btn-default, styled like the contact form's Send
   button - a.blog-summary-more to win over the a.btn reset's padding: 0 */
a.blog-summary-more {
    flex-shrink: 0;
    padding: 6px 12px;
}
.blog-summary-thumb {
    margin-left: auto;
    max-height: 190px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: opacity 0.2s ease-in;
}
.blog-summary-thumb:hover {
    opacity: 0.85;
}
@media screen and (max-width: 479px) {
    h2.blog-summary-title {
        font-size: 22px;
    }
    .blog-summary-text {
        font-size: 16px;
    }
}

/* Admin-edited content: contain floated (img-left / img-right) images */

.editable-content::after {
    content: '';
    display: block;
    clear: both;
}
.editable-content img {
    max-width: 100%;
    height: auto;
}

/* Tables whose columns were dragged to a width in CKEditor (TableColumnResize)
   save those widths as a <colgroup>; fixed layout makes them hold, as
   CKEditor's own content CSS does in the admin */
.editable-content table.ck-table-resized {
    table-layout: fixed;
    width: 100%;
}

/* Top-align cells to match the admin editor (web.css) - the browser default
   is middle, which leaves short text floating beside a tall image */
.editable-content th,
.editable-content td {
    vertical-align: top;
}

/* Blog post callouts sit in the right-hand column */

.callout p:last-child {
    margin-bottom: 0;
}

/* Right-hand column images - a blog post's Blog Image, a page's images */

.blog-image {
    margin-top: 10px;
}
.callout + .blog-image {
    margin-top: 20px;
}

/* Contact page (templates/contact.php): space between the intro text and the form */
#contactForm {
    margin-top: 50px;
}

/* A page's right-hand column (includes/contentAside.php) - set apart from
   the text beside it (only while it is beside it, not stacked below), each
   image framed, with its title captioned underneath */
@media (min-width: 992px) {
    .content-aside {
        padding-left: 35px;
    }
}
.sidebar-image figure {
    margin: 0 0 20px;
}
.sidebar-image img {
    padding: 5px;
    border: 1px solid #ccc;
}
.sidebar-image figcaption {
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-top: 0;
    background: #eee;
    font-size: 12px;
    color: #555;
}
.content-aside .assoc-documents h3 {
    margin-top: 0;
}

/* Images placed in the editor (admin/js/ckeditor/init.js image styles):
   left / right float with the text wrapping round them, fullWidth spans the
   column. Mirrors the editor's own preview (admin/js/web.css) so a page
   looks the same here as it did while being edited. A resized image carries
   its width as an inline percentage, which is kept. */

.editable-content img.left,
.editable-content figure.image.left,
.editable-content .image-inline.left {
    float: left;
    max-width: 50%;
    margin: 5px 25px 15px 0;
}
.editable-content img.right,
.editable-content figure.image.right,
.editable-content .image-inline.right {
    float: right;
    max-width: 50%;
    margin: 5px 0 15px 25px;
}
.editable-content figure.image.left img,
.editable-content figure.image.right img,
.editable-content .image-inline.left img,
.editable-content .image-inline.right img {
    width: 100%;
}
.editable-content img.fullWidth,
.editable-content figure.image.fullWidth,
.editable-content figure.image.fullWidth img {
    width: 100%;
    max-width: 100%;
    margin: 0 15px;
}
.editable-content img.left,
.editable-content img.right,
.editable-content img.fullWidth,
.editable-content figure.image img {
    border-radius: 6px;
}
.editable-content figure.image {
    margin-top: 0;
}

/* Phones: no room to wrap text round a float - stack it above instead */
@media screen and (max-width: 479px) {
    .editable-content img.left,
    .editable-content img.right,
    .editable-content figure.image.left,
    .editable-content figure.image.right {
        float: none;
        display: block;
        width: 100% !important;
        max-width: 100%;
        margin: 10px 0 15px;
    }
}

/* Each paragraph starts below any image floated in the one before it, so
   an image only ever wraps the paragraph it was placed in */
.editable-content p {
    clear: both;
}

/* Git Projects / Open Source Software grid (the .ossoftware boxes above): a
   flex row, so every box in a row stretches to the tallest */

.projects-grid {
    display: flex;
    flex-wrap: wrap;
}
.projects-grid::before,
.projects-grid::after {
    display: none;   /* Bootstrap's clearfix would otherwise be a flex item */
}
.projects-grid > [class*="col-"] {
    display: flex;
    margin-bottom: 20px;
}

/* CONTENT PAGES */
.content {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background: var(--background-image);
}

/* Breathing room between the title's closing } and the page content */
.content .page-title {
    margin-bottom: 20px;
}

/* The title's .sub_heading lines (includes/pageTitle.php) - a light grey
   lede, rather than the big black shadowed h2 above */
.page-title h2 {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    color: #555;
    text-shadow: none;
    margin: 2px 0;
}
@media screen and (max-width: 479px) {
    .page-title h2 {
        font-size: 17px;
    }
}

/* A page's 'Page updated' date (includes/pageUpdated.php) */
.page-updated {
    font-size: 11px;
    color: #999;
    text-align: right;
    margin: 20px 0 0;
}

/* Below md, col-md-4 has no width of its own - as a flex item it would
   shrink to its content, so make each project box full width instead */
@media (max-width: 991px) {
    .projects-grid > [class*="col-"] {
        width: 100%;
    }
}

/* Previous / next links (includes/prevNext.php): side by side from sm up,
   "next" right-aligned with its indent mirrored onto the right */
@media (min-width: 768px) {
    .prev-next-next,
    .prev-next-next span.code {
        text-align: right;
    }
    .prev-next-next .m10 {
        margin-left: 0;
        margin-right: 50px;
    }
}

/* Bootstrap's own blue (#337ab7 buttons, #66afe9 focus glow) swapped for
   the site's (--blue, #298CAD; #1C667F is its darker shade) - the URL
   Shortener's Shorten / Lookup buttons, FAQ search, any form field */

.btn-primary {
    background-color: var(--blue);
    border-color: #237a97;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: #1c667f;
    border-color: #16536a;
}
.form-control:focus {
    border-color: var(--blue);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(41, 140, 173, 0.5);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(41, 140, 173, 0.5);
}

/* Lightbox (js/site.js): add class="lightbox" to an <img> to open it full
   size in a modal <dialog>. Page scrolling is locked while it's open. */

img.lightbox {
    cursor: zoom-in;
}
img.lightbox:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
body.lightbox-open {
    overflow: hidden;
}
.lightbox-dialog {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    cursor: zoom-out;
}
.lightbox-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightbox-fade 0.2s ease-out;
}
.lightbox-dialog::backdrop {
    background: rgba(0, 0, 0, 0.85);
}
.lightbox-dialog figure {
    margin: 0;
    text-align: center;
}
.lightbox-dialog img {
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.lightbox-dialog figcaption {
    margin-top: 12px;
    color: #eee;
    font-size: 15px;
}
.lightbox-close {
    position: fixed;
    top: 10px;
    right: 16px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 40px;
    line-height: 1;
    opacity: 0.8;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
    opacity: 1;
}
@keyframes lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}