/* =========================================================
   I Fancy A Fry Up
   Dark / Light theme
   Pinboard only on header and footer
   ========================================================= */


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-fryup-theme="dark"] body,
html:not([data-fryup-theme="light"]) body {
    background-color: #171717 !important;
    background-image: none !important;
}

html[data-fryup-theme="dark"] .site-grid,
html:not([data-fryup-theme="light"]) .site-grid {
    background-color: #171717 !important;
    background-image: none !important;
}

html[data-fryup-theme="dark"] .container-component,
html[data-fryup-theme="dark"] main,
html:not([data-fryup-theme="light"]) .container-component,
html:not([data-fryup-theme="light"]) main {
    background-color: transparent !important;
    background-image: none !important;
}


/* Dark-mode header */
html[data-fryup-theme="dark"] .container-header,
html:not([data-fryup-theme="light"]) .container-header {
    background-color: #171717 !important;
    background-image: url("/images/pinboardbg.gif") !important;
    background-repeat: repeat !important;
    background-position: top left !important;
}


/* Dark-mode footer */
html[data-fryup-theme="dark"] .container-footer,
html[data-fryup-theme="dark"] footer.footer,
html:not([data-fryup-theme="light"]) .container-footer,
html:not([data-fryup-theme="light"]) footer.footer {
    background-color: #171717 !important;
    background-image: url("/images/pinboardbg.gif") !important;
    background-repeat: repeat !important;
    background-position: top left !important;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

html[data-fryup-theme="light"] body {
    background-color: #f5f5f5 !important;
    background-image: none !important;
}

html[data-fryup-theme="light"] .site-grid {
    background-color: #f5f5f5 !important;
    background-image: none !important;
}

html[data-fryup-theme="light"] .container-component,
html[data-fryup-theme="light"] main {
    background-color: transparent !important;
    background-image: none !important;
}


/* Light-mode header */
html[data-fryup-theme="light"] .container-header {
    background-color: #171717 !important;
    background-image: url("/images/pinboardbg.gif") !important;
    background-repeat: repeat !important;
    background-position: top left !important;
}


/* Light-mode footer */
html[data-fryup-theme="light"] .container-footer,
html[data-fryup-theme="light"] footer.footer {
    background-color: #171717 !important;
    background-image: url("/images/pinboardbg.gif") !important;
    background-repeat: repeat !important;
    background-position: top left !important;
}


/* =========================================================
   KEEP CONTENT PANELS SOLID
   ========================================================= */

.fryup-cafe-hero,
.fryup-card,
.fryup-intro,
.fryup-photo-gallery,
.fryup-update-details,
.fryup-submit__section,
.fryup-submit__account,
.fryup-finder,
.fryup-finder__search,
.fryup-finder__search-card,
.fryup-finder__map-card,
.fryup-result,
.card,
.blog-item,
.com-content-article,
.item-page {
    background-image: none !important;
}


/* =========================================================
   FEATURE ICON COLOURS
   ========================================================= */

html[data-fryup-theme="light"] .fryup-feature-icon {
    color: #444444;
}

html[data-fryup-theme="dark"] .fryup-feature-icon,
html:not([data-fryup-theme="light"]) .fryup-feature-icon {
    color: #fbc515;
}


/* Positive */
.fryup-fact--yes .fryup-feature-icon {
    color: #2f9e44;
}


/* Negative */
.fryup-fact--no .fryup-feature-icon {
    color: #b3261e;
}


/* Brighter positive/negative colours in dark mode */
html[data-fryup-theme="dark"] .fryup-fact--yes .fryup-feature-icon,
html:not([data-fryup-theme="light"]) .fryup-fact--yes .fryup-feature-icon {
    color: #62d47a;
}

html[data-fryup-theme="dark"] .fryup-fact--no .fryup-feature-icon,
html:not([data-fryup-theme="light"]) .fryup-fact--no .fryup-feature-icon {
    color: #ff8585;
}


/* Finder result positive feature icons */
html[data-fryup-theme="light"] .fryup-result .fryup-feature-icon {
    color: #2f9e44;
}

html[data-fryup-theme="dark"] .fryup-result .fryup-feature-icon,
html:not([data-fryup-theme="light"]) .fryup-result .fryup-feature-icon {
    color: #62d47a;
}


/* =========================================================
   HEADER / FOOTER TEXT
   ========================================================= */

.container-header,
.container-header a,
.container-header .mod-menu > li > a,
.container-footer,
.container-footer a,
footer.footer,
footer.footer a {
    color: #ffffff;
}


/* =========================================================
   THEME SWITCHER
   ========================================================= */

.fryup-theme-toggle {
    background: #101010;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
}

.fryup-theme-toggle:hover,
.fryup-theme-toggle:focus {
    border-color: #13b4f0;
}

html[data-fryup-theme="light"] .fryup-theme-toggle {
    background: #ffffff;
    color: #101010;
    border-color: #888888;
}

/* =========================================================
   Dark mode contrast fixes
   ========================================================= */

/* Positive feature cells */
html[data-fryup-theme="dark"] .fryup-fact--yes,
html:not([data-fryup-theme="light"]) .fryup-fact--yes {
    color: #111 !important;
}

/* Negative feature cells */
html[data-fryup-theme="dark"] .fryup-fact--no,
html:not([data-fryup-theme="light"]) .fryup-fact--no {
    color: #111 !important;
}

/* Make all text inside coloured feature cells readable */
html[data-fryup-theme="dark"] .fryup-fact--yes *,
html[data-fryup-theme="dark"] .fryup-fact--no *,
html:not([data-fryup-theme="light"]) .fryup-fact--yes *,
html:not([data-fryup-theme="light"]) .fryup-fact--no * {
    color: #111 !important;
}

/* But keep the feature icons using their intended state colours */
html[data-fryup-theme="dark"] .fryup-fact--yes .fryup-feature-icon,
html:not([data-fryup-theme="light"]) .fryup-fact--yes .fryup-feature-icon {
    color: #2f9e44 !important;
}

html[data-fryup-theme="dark"] .fryup-fact--no .fryup-feature-icon,
html:not([data-fryup-theme="light"]) .fryup-fact--no .fryup-feature-icon {
    color: #b3261e !important;
}


/* =========================================================
   Submission / update success messages
   ========================================================= */

html[data-fryup-theme="dark"] .alert-success,
html:not([data-fryup-theme="light"]) .alert-success,
html[data-fryup-theme="dark"] .fryup-submit__success,
html:not([data-fryup-theme="light"]) .fryup-submit__success,
html[data-fryup-theme="dark"] .fryup-update-success,
html:not([data-fryup-theme="light"]) .fryup-update-success {
    color: #12351c !important;
    background-color: #dff3e4 !important;
    border-color: #8bc99a !important;
}

/* Ensure headings, paragraphs and links inside success boxes
   don't inherit the dark-mode white text */
html[data-fryup-theme="dark"] .alert-success *,
html:not([data-fryup-theme="light"]) .alert-success *,
html[data-fryup-theme="dark"] .fryup-submit__success *,
html:not([data-fryup-theme="light"]) .fryup-submit__success *,
html[data-fryup-theme="dark"] .fryup-update-success *,
html:not([data-fryup-theme="light"]) .fryup-update-success * {
    color: #12351c !important;
}