/* ==========================================================
   COASTAL CRIME SITE STYLE
   Black / White / Deep Red
   ========================================================== */


/* ===== COLOUR PALETTE ===== */

:root {
    --cc-black: #000000;
    --cc-white: #ffffff;
    --cc-red: #c4161c;
    --cc-red-dark: #a91016;
    --cc-text: #111111;
}


/* ==========================================================
   MAIN SITE
   White background with dark text
   ========================================================== */

html,
body,
.site,
.wp-site-blocks,
#page,
.site-content,
.content-area,
.entry-content,
main {
    background: var(--cc-white) !important;
    background-color: var(--cc-white) !important;
    color: var(--cc-text) !important;
}


/* ===== STANDARD TEXT ===== */

main p,
main li,
main label,
.entry-content p,
.entry-content li,
.entry-content label {
    color: var(--cc-text);
}


/* ===== HEADINGS ===== */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    color: var(--cc-text) !important;
}


/* ===== LINKS IN MAIN CONTENT ===== */

main a,
.entry-content a {
    color: var(--cc-text);
}

main a:hover,
.entry-content a:hover {
    color: var(--cc-red) !important;
}


/* ==========================================================
   HEADER / NAVIGATION
   ========================================================== */

header,
#masthead,
.site-header,
.header-inner,
.header-wrapper,
header.wp-block-template-part,
nav,
.main-navigation,
.primary-navigation,
.menu,
.menu-primary-container,
.wp-block-navigation {
    background: var(--cc-black) !important;
    background-color: var(--cc-black) !important;
    border: none !important;
    box-shadow: none !important;
}


/* Navigation text */

nav a,
.main-navigation a,
.primary-navigation a,
.menu a,
.site-header a,
header a,
.wp-block-navigation a,
.wp-block-navigation-item a,
.wp-block-navigation-item__content {
    color: var(--cc-white) !important;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none !important;
}


/* Navigation hover */

nav a:hover,
.main-navigation a:hover,
.primary-navigation a:hover,
.menu a:hover,
.site-header a:hover,
header a:hover,
.wp-block-navigation a:hover {
    color: var(--cc-red) !important;
}


/* ===== DROPDOWN MENUS ===== */

.sub-menu,
.dropdown-menu,
.children,
.wp-block-navigation__submenu-container {
    background: var(--cc-black) !important;
    background-color: var(--cc-black) !important;
}

.sub-menu a,
.dropdown-menu a,
.children a,
.wp-block-navigation__submenu-container a {
    color: var(--cc-white) !important;
}


/* Dropdown arrows */

.wp-block-navigation__submenu-icon,
.wp-block-navigation__submenu-icon *,
.wp-block-navigation__submenu-icon svg,
.wp-block-navigation__submenu-icon svg *,
.wp-block-navigation__submenu-icon path,
.wp-block-navigation__submenu-icon polygon {
    color: var(--cc-white) !important;
    fill: var(--cc-white) !important;
    stroke: var(--cc-white) !important;
    background: transparent !important;
}


/* Remove backgrounds/borders from dropdown buttons */

.wp-block-navigation__submenu-icon,
.wp-block-navigation button,
.wp-block-navigation button *,
.wp-block-navigation-submenu__toggle,
.wp-block-navigation-submenu__toggle * {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}


/* ===== REMOVE ACTIVE PAGE BOX / HIGHLIGHT ===== */

.wp-block-navigation li,
.wp-block-navigation li a,
.wp-block-navigation-item,
.wp-block-navigation-item a,
.wp-block-navigation-item__content,
.current-menu-item,
.current-menu-item a,
.current_page_item,
.current_page_item a,
.current-menu-ancestor,
.current-menu-ancestor a,
.current_page_ancestor,
.current_page_ancestor a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Keep active menu text white */

.wp-block-navigation .current-menu-item a,
.wp-block-navigation .current_page_item a,
.wp-block-navigation .current-menu-ancestor a,
.wp-block-navigation .current_page_ancestor a {
    color: var(--cc-white) !important;
}


/* Remove theme-generated navigation markers */

.wp-block-navigation *::before,
.wp-block-navigation *::after {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ===== NAVIGATION WIDTH ===== */

.wp-block-navigation__container,
.main-navigation,
.menu,
.nav-menu {
    max-width: 1400px;
    margin: 0 auto !important;
    justify-content: center !important;
}


/* ===== SUBTLE LINE BELOW HEADER ===== */

header,
.site-header,
header.wp-block-template-part {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

button,
input[type="submit"],
.wp-block-button__link {
    background-color: var(--cc-red) !important;
    color: var(--cc-white) !important;
    border: none !important;
}


/* Button hover */

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
    background-color: var(--cc-black) !important;
    color: var(--cc-white) !important;
}


/* Navigation buttons must not inherit normal button background */

.wp-block-navigation button,
.wp-block-navigation button:hover {
    background: transparent !important;
    background-color: transparent !important;
}


/* ==========================================================
   CONTENT BLOCKS
   IMPORTANT: individual WordPress blocks can now have
   their own white, black or coloured backgrounds.
   ========================================================== */

.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-column {
    /* Intentionally no forced background colour */
}


/* ==========================================================
   OPTIONAL BLACK SECTIONS

   Add the CSS class:
   cc-dark-section

   to any Group block you want to appear as a black band.
   ========================================================== */

.cc-dark-section {
    background: var(--cc-black) !important;
    background-color: var(--cc-black) !important;
    color: var(--cc-white) !important;
}

.cc-dark-section p,
.cc-dark-section li,
.cc-dark-section span,
.cc-dark-section div,
.cc-dark-section label,
.cc-dark-section h1,
.cc-dark-section h2,
.cc-dark-section h3,
.cc-dark-section h4,
.cc-dark-section h5,
.cc-dark-section h6 {
    color: var(--cc-white) !important;
}

.cc-dark-section a {
    color: var(--cc-white) !important;
}

.cc-dark-section a:hover {
    color: var(--cc-red) !important;
}


/* ==========================================================
   OPTIONAL RED TEXT

   Add CSS class:
   cc-red-text
   ========================================================== */

.cc-red-text,
.cc-red-text * {
    color: var(--cc-red) !important;
}


/* ==========================================================
   FOOTER
   ========================================================== */

footer,
.site-footer,
.footer,
.footer-area,
.footer-widgets,
.footer-widget-area,
.footer-bottom,
.site-info,
footer.wp-block-template-part,
div[class*="footer"],
section[class*="footer"] {
    background: var(--cc-black) !important;
    background-color: var(--cc-black) !important;
    color: var(--cc-white) !important;
    border: none !important;
    box-shadow: none !important;
}


/* Footer text */

footer *,
.site-footer *,
.footer *,
.footer-area *,
.footer-widgets *,
.footer-bottom *,
.site-info * {
    color: var(--cc-white) !important;
}


/* Footer links */

footer a,
.site-footer a,
.footer a {
    color: var(--cc-white) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Footer hover */

footer a:hover,
.site-footer a:hover,
.footer a:hover {
    color: var(--cc-red) !important;
    text-decoration: none !important;
}


/* Remove footer divider lines */

footer li,
.site-footer li,
.footer li,
footer ul,
.site-footer ul,
.footer ul {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}


/* Remove separators between footer links */

footer li::before,
footer li::after,
.site-footer li::before,
.site-footer li::after {
    display: none !important;
    content: none !important;
}
/* ===== FIX HEADER OUTER BACKGROUND ===== */

body > .wp-site-blocks,
.wp-site-blocks > header,
.wp-site-blocks > .wp-block-template-part:first-child,
header.wp-block-template-part,
header.wp-block-template-part > .wp-block-group,
header .wp-block-group,
.site-header,
#masthead {
    background: #000000 !important;
    background-color: #000000 !important;
}
/* ===== FORCE COMPLETE FOOTER BLACK ===== */

footer,
footer.wp-block-template-part,
footer.wp-block-template-part > *,
footer .wp-block-group,
footer .wp-block-columns,
footer .wp-block-column,
footer .wp-block-group-is-layout-constrained,
footer [class*="wp-block"] {
    background: #000000 !important;
    background-color: #000000 !important;
}

footer,
footer * {
    color: #ffffff !important;
}

footer a {
    color: #ffffff !important;
}

footer a:hover {
    color: #c4161c !important;
}