/*
Theme Name: KATS Network WordPress theme
Description: Block theme for katsnet.org. Created Spring 2026 by Ryan Creech / UK-HDI. Based on the WP Twenty Twenty-Five theme.
Template: twentytwentyfive
*/
:root {
    --wp--preset--color--base: #FFFFFF;
    --wp--preset--color--primary: #0079c0;
    --wp--preset--color--secondary: #87cbdc;
    --wp--preset--color--contrast: #000000;
    --wp--preset--color--contrast-50: rgba(0, 0, 0, 0.5);
    --footer-line-height: 1.2rem;

    /* These colors don't change with the color scheme, as they're core to the KATS Network branding.
       They should only be used in the header, footer, and sidebar. */
    --katsnet--color--base: #FFFFFF;
    --katsnet--color--primary: #000000;
    --katsnet--color--secondary: #0079c0;
    --katsnet--color--contrast: #121212;
    --katsnet-menu-item--color: var(--wp--preset--color--base);
    --katsnet-link-color: var(--wp--preset--color--primary);
    --katsnet-focus-indicator-color: #F535AA;

    /* Colors from the vintage KATS Network logo, used for post borders in the search results and archives to add some visual interest and tie in with the branding. These colors are intentionally not defined in terms of the base/primary/secondary/contrast colors since they don't need to change with the color scheme and are only used in a very specific context. */
    --katsnet-logo-color-1: #cb4300;
    --katsnet-logo-color-2: #2a7a07;
    --katsnet-logo-color-3: #003286;
    --katsnet-logo-color-4: #763627;
}
body { min-width: 100%; font-size: 1rem !important; width: 100%; }
body :focus { outline-offset: 4px; outline: 0.25rem solid var(--katsnet-focus-indicator-color);  }

@media screen and (prefers-color-scheme: dark) {
    :root {
        --wp--preset--color--base: #121212;
        --wp--preset--color--contrast: #ffffff;
        --wp--preset--color--contrast-50: rgba(255, 255, 255, 0.5);
        --katsnet-link-color: #5eb3e4;
    }
}

/* Header styles for KATS Network branding. Not affected by prefers-color-scheme. */
header { background-color: var(--katsnet--color--base); width: 100%; }
header a { color: var(--katsnet--color--primary); }
header svg { color: var(--katsnet--color--contrast); fill: var(--katsnet--color--contrast); stroke: transparent; }
header h1.has-contrast-color { color: #121212 !important; font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.196), 1rem); margin: 0 !important; }
header .wp-image-755 { min-width: 64px !important; }
header .wp-block-group .is-layout-flex .wp-block-group-is-layout-flex { gap: 0; column-gap: 0.5rem; }
header .header-inner { flex-wrap: nowrap; margin: 0 1rem; }

/* Responsive navigation menu */
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg { color: var(--katsnet--color--base); fill: var(--katsnet--color--base); stroke: var(--katsnet--color--base); }
header .wp-block-navigation__responsive-container { background: var(--katsnet--color--primary); color: var(--katsnet--color--base); }
header .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg { fill: var(--katsnet--color--base); }
header .wp-block-navigation__responsive-container-open { color: var(--katsnet--color--base); align-items: center; display: inline-flex; gap: 0.5rem; }
header .wp-block-navigation__responsive-container-open::after {
    color: var(--katsnet--color--base);
    content: "Menu";
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
}

/* Footer styles for KATS Network branding and improved readability. Not affected by prefers-color-scheme. */ */
footer { width: 100%; }
footer .has-small-font-size { line-height: var(--footer-line-height); font-size: .85rem !important; }
footer .has-medium-font-size, .has-large-font-size { line-height: var(--footer-line-height); font-size: 1.2em !important; }
footer .wp-block-image img { max-height: calc(var(--footer-line-height) * 3); width: auto; }
footer a { text-decoration: none; color: rgba(256,256,256,0.8) !important; }
footer a:hover { text-decoration: underline; }
footer .wp-container-core-group-is-layout-16a37519 { align-items: flex-start; }
footer .wp-block-columns > div { flex: 1 1 0; }
footer .wp-block-columns { gap: 0; }
footer .wp-block-columns > .wp-block-column:last-child { flex: 0 0 auto; max-width: fit-content; }
footer .wp-block-columns > .wp-block-column:last-child.footer-contact-info { flex: 0 0 auto; max-width: 40ch; }
footer .footer-contact-info { margin-bottom: 1.5rem; }

/* Explicit color definitions for KATS Network branding. */
.wp-block-search.is-style-kats-hero-search .wp-block-search__input, .wp-block-search__button { border-radius: 0; }
.wp-block-search.is-style-kats-hero-search button { background-color: var(--katsnet--color--secondary) !important; color: var(--katsnet--color--base) !important; font-weight: 500; }

/* Add extra spacing and line-height to paragraphs and list items in the content for better readability. */
.entry-content p:not(:has(+ ul, + ol)){ margin: 1rem 0; line-height: 1.7; } 
.entry-content ul, .entry-content ol { margin: 0.5rem 0; }
.entry-content li { margin-bottom: 0.25rem; }

/* General content styling */
.sidebar-container { flex: 0 0 25%; }
main { color: var(--wp--preset--color--contrast); background-color: var(--wp--preset--color--base); margin-top: 0 !important; }
main a, main a:visited { color: var(--katsnet-link-color); }
main .has-white-color a, main .has-white-color a:visited, .has-white-text-color { color: white !important; }
.wp-block-jetpack-options.css-col-3 { column-count: 3; }
.kats-primary-column { flex-grow: 1 !important; }
.kats-primary-column > .is-layout-flex.is-vertical, form .is-layout-flex.is-vertical { gap: 0.15rem; }
form .is-layout-flex.is-vertical > * { margin-bottom: 1.25rem; }
form figure.aligncenter { align-self: center; }

@media screen and (prefers-contrast: more) {
    :root {
        --wp--preset--color--base: #000000 !important;
        --wp--preset--color--contrast: #ffffff !important;
        --katsnet-link-color: #ffff00 !important;
        --katsnet-focus-indicator-color: #ffff00 !important;
    }
    header a, header a:visited, main a, main a:visited, footer a, footer a:visited { color: var(--katsnet-link-color) !important; }
    header button.wp-block-navigation-submenu__toggle svg { color: var(--katsnet-link-color) !important; fill: var(--katsnet-link-color); stroke: var(--katsnet-link-color); }
    a { text-decoration: underline !important; }
    a:hover { outline-color: var(--katsnet-focus-indicator-color); outline-style: dashed !important; outline-width: 6px; outline-offset: 4px; }
    body :focus { outline-style: dashed !important; }
}

/* Breadcrumb style overrides */
.breadcrumb-container { background: transparent; margin-bottom: 1rem; }
.breadcrumb-container.theme1 a, .breadcrumb-container.theme1 li, .breadcrumb-container.theme1 li span, .breadcrumb-container.theme1 li span.separator, .breadcrumb-container.theme1 li a, .breadcrumb-container.theme1 ol {
    color: var(--wp--preset--color--contrast) !important;
    font-size: 0.875rem;
    margin: 0;
    padding: 0;
}
.breadcrumb-container.theme1 li span.separator {
    padding: 0 0.5em;
}

/* Search result & archive formatting */
.wp-block-query-title { margin-bottom: 1rem; }
.wp-block-query.archive-results .wp-block-post-template { padding: 0; list-style-type: none; }
.wp-block-query.archive-results .wp-block-columns { min-width: 100%; }
.wp-block-query.archive-results .wp-block-columns > .wp-block-column { flex: 1 1 90%; }
.wp-block-query.archive-results .wp-block-columns > .wp-block-column.image-column { flex: 0 1 10%; min-width: 100px; }
.wp-block-query.archive-results .wp-block-columns > .wp-block-column.image-column:not(:has(img)) { display: none; }
.wp-block-query.archive-results .wp-block-post { border: none; border-left: 4px solid transparent; border-bottom: 2px solid transparent; padding: 1rem; padding-top: 0; background-color: transparent; display: flex; flex-direction: row; gap: 0.5rem; margin-bottom: 1rem; }
.wp-block-query.archive-results .wp-block-columns { padding: 0 !important; margin-bottom: 0 !important;  }
.wp-block-query.archive-results .wp-block-post-excerpt { margin: 0; }
.wp-block-query.archive-results .wp-block-post:nth-child(even) { background-color: var(--wp--preset--color--base); }
.wp-block-query.archive-results .wp-block-post:nth-child(4n + 1) { border-color: var(--katsnet-logo-color-1); }
.wp-block-query.archive-results .wp-block-post:nth-child(4n + 2) { border-color: var(--katsnet-logo-color-2); }
.wp-block-query.archive-results .wp-block-post:nth-child(4n + 3) { border-color: var(--katsnet-logo-color-3); }
.wp-block-query.archive-results .wp-block-post:nth-child(4n + 4) { border-color: var(--katsnet-logo-color-4); }
.wp-block-post-featured-image img { width: 100%; height: auto; }
.katsnet-atresource-collection__header { background-color: var(--wp--preset--color--base); }

footer ul { list-style-type: none !important; padding-left: 0.25em !important; }
.wp-block-search__button .has-icon { margin-left: 0.75rem }
:root :where(.wp-block-search .wp-element-button,.wp-block-search input) { margin-left: 0.5rem; font-size: 0.9em; }
:root :where(.wp-element-button, .wp-block-button__link):not(.button-secondary) { background-color: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--base) !important; }

/* AddToAny share buttons: */
.addtoany_shortcode { float: right; }
.wp-block-jetpack-sharing-buttons { column-gap: 0; }
.jetpack-sharing-buttons > .jetpack-sharing-button__button.style-icon a, .jetpack-sharing-button__button.style-icon, .jetpack-sharing-button__button.style-icon a { border-radius: 0; }
.kf-toolbar-actions button, .katsnet-atresource-collection__actions button {  padding: 0.25rem 1rem; }
.jetpack-sharing-button__button.style-icon { height: 1rem; width: 1rem; }

/* Style for small screens */
@media (max-width: 781px) {
    .hide-small-screen * { display: none !important; }
    header .header-inner { flex-wrap: wrap !important; justify-content: space-between; }
    header .header-inner > :last-child { margin-left: auto; }
    .wp-block-jetpack-options.css-col-3 { flex-wrap: wrap; }
    .reverse-wrap-small { flex-wrap: wrap-reverse !important; }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open { background: #121212; color: #fff; }
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-dialog,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-container-content,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__container,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container {
        background: #121212 !important;
        color: #fff;
        row-gap: 0 !important;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__container,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-page-list,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container {
        gap: 0 !important;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__container {
        padding: 0 !important;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container {
        padding: 0 0.5rem !important;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        padding: 0 0 0 1rem !important;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation-item__content,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation-submenu__toggle,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__responsive-container-close {
        color: #fff !important;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation-item__content,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-page-list__item__link {
        display: block;
        padding: 0.5em 0 !important;
        text-decoration: none;
    }

    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation-item__label,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation-submenu__toggle svg {
        color: #fff !important;
        fill: currentColor;
        stroke: currentColor;
    }

    .katsnet-mobile-sidebar-overlay {
        width: 100%;
    }

    .katsnet-mobile-sidebar-source {
        display: none !important;
    }

    .katsnet-mobile-sidebar-overlay__sidebar {
        min-width: 0;
        width: 100%;
    }

    .katsnet-mobile-sidebar-menu {
        margin-top: 0.5rem;
    }

    .katsnet-mobile-sidebar-menu .wp-block-navigation__container,
    .katsnet-mobile-sidebar-menu .wp-block-page-list,
    .katsnet-mobile-sidebar-menu .wp-block-navigation-submenu__container {
        align-items: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem;
    }

    .katsnet-mobile-sidebar-menu .wp-block-navigation-item,
    .katsnet-mobile-sidebar-menu .wp-block-page-list-item {
        width: 100%;
    }

    .katsnet-mobile-sidebar-menu .wp-block-navigation-item__content,
    .katsnet-mobile-sidebar-menu .wp-block-page-list__item__link {
        display: block;
        width: 100%;
    }
}

@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container,
    header .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .katsnet-mobile-menu-sidebar-list {
        transition: none;
    }
}