/*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: 'Roboto', sans-serif;
    background: rgb(28,30,84);
}

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

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    width: 100%;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

address {
    font-style: normal;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/*
 * Allow only vertical resizing of textareas.
 */

.break {
    height: 0;
    font-size: 0;
    display: block;
    clear: both;
}


.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.div_center {
    text-align: center;
}



/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}




/* ==========================================================================
   Author's custom styles
   ========================================================================== */


header {
    background: rgb(255,255,255);
    width: 100%;
    padding: 15px 10px 15px 15px;
    border-bottom: 1px solid rgb(200,200,200);
    xposition: fixed;
}

.header-logo {
    max-width: 180px;
}

main {
    background: rgb(255,255,255);
}

.heading-wrap {
    background: rgb(255,164,0);
    text-align: center;
    padding: 20px 10px;
}

    .heading-wrap h1 {
        color: rgb(255,255,255);
        margin: 0;
        padding: 0;
        font-size: 1.75em;
    }

/* =========== Search page */


.search-wrapper {
    padding: 40px 10px;
}

.search-box {
    background: rgb(241,241,241);
    padding: 20px;
}

    .search-box h2 {
        color: rgb(28,30,84);
        margin-top: 0;
    }

.search-form {
    margin: 10px 0;
}

.search-form__select {
    font-size: 1.25em;
    padding: .5em 2em .5em .3em;
    line-height: 1.4em;
    width: 100%;
    margin: .5em 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}

.has-error {
    border-color: red;
    background-color: pink;
    color: red !important;
}

div.help-block {
    color: red;
}

input[type="search"] {
    width: 100%;
    font-size: 1.25em;
    padding: 10px;
    color: rgb(0,0,0);
}

.button {
    background: rgb(255,164,0);
    border: none;
    padding: 15px 10px;
    text-align: center;
    font-size: 1.25em;
    width: 100%;
    color: rgb(255,255,255);
    text-transform: uppercase;
    border-radius: 5px;
}

    .button:hover {
        background: rgb(28,30,84);
    }


@media screen and (min-width: 36em) {

    header {
        background: rgb(255,255,255);
        width: 100%;
        padding: 15px 10px 15px 40px;
    }

    .heading-wrap {
        padding: 60px 0;
    }

        .heading-wrap h1 {
            font-size: 3em;
        }

    .search-wrapper {
        width: 80%;
        margin: 0 auto;
    }

    .search-box {
        padding: 40px;
    }
}

@media screen and (min-width: 62.50em) {

    .search-wrapper {
        max-width: 56.25em;
    }

    input[type="search"] {
        width: 50%;
    }

    .button {
        width: 25%;
        padding: 12px;
        display: block;
    }

    .search-form__select {
        width: 50%;
        padding: .38em 2em .38em .3em;
    }

    .search-box {
        background-image: url("/img/scotland-map.svg");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 40%;
        background-color: rgb(241,241,241);
    }

        .search-box p {
            max-width: 60%;
        }
}



/* =========== Search results */

.search-results-wrapper {
    padding: 20px 10px;
}

.breadcrumbs {
    padding: 20px 0;
}

    .breadcrumbs a {
        font-size: .87em;
        color: rgb(28,30,84);
    }

    .breadcrumbs span.divider::after {
        content: " / ";
    }

    .breadcrumbs span.active {
        font-size: .87em;
        font-weight: bold;
        color: rgb(28,30,84);
    }

/* =========== Refine menu */


.refine-your-search {
    margin: 0 0 40px 0;
}

.refine-your-search-wrapper {
    text-align: center;
    overflow: hidden;
    margin: 0 0 20px 0;
}

.refine-your-search-button {
    background: rgb(255,164,0);
    border: none;
    padding: 15px 10px;
    display: inline-block;
    text-align: center;
    font-size: 1em;
    width: 80%;
    color: rgb(255,255,255);
    text-transform: uppercase;
    border-radius: 5px;
    text-decoration: none;
}

.filter__list {
    margin: 0 0 0 15px;
    padding: 0;
    list-style-type: none;
}

.filter__list-item__link {
    display: block;
    color: rgb(28,30,84);
    position: relative;
    text-decoration: none;
    line-height: 1.4em;
    font-size: 1em;
    padding: 6px 0 6px 24px;
}

    .filter__list-item__link:hover {
        color: rgb(255,164,0);
    }


    .filter__list-item__link:before {
        font-size: 1em;
        content: '\e801';
        display: block;
        position: absolute;
        font-family: fontello;
        left: 0;
        top: 6px;
    }


.filter__list-item.selected .filter__list-item__link {
    color: rgb(255,164,0);
}

    .filter__list-item.selected .filter__list-item__link:before {
        color: rgb(255,164,0);
        content: '\e800';
    }


/* =========== NEW Refine menu using details */


summary {
    cursor: pointer;
    outline: none;
    font-size: 1em;
    font-weight: bold;
    color: rgb(0,0,0);
    padding: 1em 1em 1em 0;
}

    summary:hover {
        color: rgb(255,164,0);
    }

details[open] summary {
    color: rgb(255,164,0);
}



/* =========== Search Results listing */

.search-results {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .search-results li.result {
        border-bottom: 1px solid #ccc;
        padding: 30px 0;
    }

.search-results__service-type {
    font-size: .75em;
    color: rgb(150,150,150);
}

.search-results__header {
    text-decoration: none;
}

    .search-results__header h2 {
        color: rgb(255,164,0);
        margin: 0;
        padding: 0;
    }

    .search-results__header:hover {
        text-decoration: underline;
    }

.search-results__doors {
    font-weight: bold;
    font-size: 0.75em;
    background: #2ab72f;
    padding: 3px 5px;
    border-radius: 3px;
    color: rgb(255,255,255);
}

.search-results__doors--closed {
    font-weight: bold;
    font-size: 0.75em;
    background: #fb1010;
    padding: 3px 5px;
    border-radius: 3px;
    color: rgb(255,255,255);
}

@media screen and (min-width: 36em) {

    .search-results__listing-details {
        position: relative;
    }

    .search-results__doors--closed, .search-results__doors {
        position: absolute;
        top: 0;
        right: 0;
    }
}

.search-results__details {
    font-size: 1em;
}

ul.descriptionList {
    margin-bottom: 20px;
}

.search-results__address h3 {
    font-size: 1.25em;
}

.search-results__address address {
    font-size: 1em;
}

.search-results__subheader {
    font-size: 1.25em;
    font-weight: 300;
    color: rgb(28,30,84);
    margin: 0 0 20px 0;
}

.search-results__services-offered ul {
    margin: 0;
    padding-left: 2em;
    list-style-type: disc;
    font-size: .87em;
}

.search-results__services-offered li {
    border-bottom: none;
    padding: 0;
}

.pagination__list {
    margin: 20px 0;
    padding: 0;
    list-style-type: none;
}

.pagination__item {
    display: inline;
}

.pagination__number {
    text-decoration: none;
    background: rgb(255,164,0);
    color: rgb(255,255,255);
    padding: 10px 12px;
    border-radius: 5px;
}

    .pagination__number.active {
        background: rgb(28,30,84);
    }

@media screen and (min-width: 36em) {
    .search-results__address, .search-results__services-offered {
        width: 50%;
        float: left;
    }
}

@media screen and (min-width: 36em) {
    .search-results-wrapper {
        padding: 2em;
    }
}

@media screen and (min-width: 60em) {

    .refine-your-search-wrapper {
        display: none;
    }

    .refine-your-search {
        display: block !important;
        float: left;
        width: 23%;
        margin-right: 5%;
    }

    .search-results-wrapper {
        margin: 0 auto;
        max-width: 90%;
    }

    .search-results-holder {
        overflow: hidden;
    }
}

/* =========== Search Details */


.search-details-wrapper {
    padding: 20px;
}

@media screen and (min-width: 36em) {
    .search-details-wrapper {
        padding: 20px 3em;
    }
}

@media screen and (min-width: 60em) {
    .search-details-wrapper {
        margin: 0 auto;
        max-width: 70%;
    }
}

.search-details__buttons {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    .search-details__buttons li {
        display: inline;
    }

    .search-details__buttons a {
        font-size: 1em;
        text-decoration: none;
    }


.search-details__main-content {
    margin: 2em 0;
    font-size: 1.25em;
}


.search-details__opening-times dt {
    float: left;
    width: 50%;
}

@media screen and (min-width: 36em) {
    .search-details__opening-times dt {
        width: 30%;
    }
}

@media screen and (min-width: 60em) {
    .search-details__opening-times dt {
        width: 30%;
    }
}

.search-details__contact-wrapper {
    margin: 0 0 2em 0;
}

.search-details__contact dd {
    margin: 0;
}

@media screen and (min-width: 36em) {
    .search-details__contact, .search-details__address {
        width: 50%;
        float: left;
    }
}

@media screen and (min-width: 60em) {
    .search-details__contact {
        width: 30%;
        float: left;
    }
}



.search-details__map {
    width: 100%;
    margin: 0 0 10px 0;
}

@media screen and (min-width: 36em) {
    .search-details__map {
        width: 100%;
    }
}

@media screen and (min-width: 60em) {
    .search-details__map {
        width: 60%;
    }
}

.search-details__viewmap a {
    display: block;
    text-decoration: none;
}

.search-details__updated {
    margin: 1.5em 0;
}

/* =========== Footer */

footer {
    background: rgb(255,164,0);
    clear: both;
}

footer a {
    color: rgb(255,255,255);
}

.footer-copyright-wrap {
    padding: 20px 10px;	
}

.footer-logo {
    max-width: 250px;
    margin: 0 0 20px 0;
}

footer small {
    font-size: 0.87em;
}

@media screen and (min-width: 36em) {
    .footer-copyright-wrap {
        text-align: center;
    }
		
    .footer-copyright-centre {
        margin: 40px auto;
        max-width: 650px;
        overflow: hidden;
    }
		
    .footer-logo {
        float: left;
			
        width: 375px;
        margin: 0;
        overflow: hidden;
			
    }
    .footer-copyright {
        text-align: left;
        max-width: 375px;
        float: left;
        padding-left: 30px;
        overflow: hidden;
    }
}

	

.footer-menu-wrap {
    background: rgb(28,30,84);
    padding: 20px 10px;
    text-align: center;
}

.footer-menu {
    margin: 0;
    padding: 0;
}

.footer-menu li {
    display: inline;
    padding: 0 10px;
}

.footer-menu a {
    font-size: .75em;
}



/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

    /*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
        white-space: inherit;
    }

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
    visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}


/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}


/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " (" attr(href) ")";
        }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}