/*
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;
    --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; }
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;
        --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; }

/* 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: 0.6rem !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 > .wp-block-column:last-child { flex: 0 0 auto; max-width: fit-content; }

/* 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); color: var(--katsnet--color--base) ; font-weight: 500; }

/* General content styling */
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; }

/* Add extra spacing and line-height to paragraphs and list items in the content for better readability. */
.entry-content p, .entry-content li { margin-bottom: 1em; line-height: 1.7; } 

@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.archive-results .wp-block-post-template { padding: 0; }
.wp-block-query .wp-block-columns { min-width: 100%; }
.wp-block-query .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex: 1 1 85%; }
.wp-block-query .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.image-column { flex: 0 1 15%; }
.wp-block-columns.wp-block-column div.image-column { flex: 1 1 15%; }
.wp-block-post-template { 
    list-style-type: none;
    .wp-block-post { border: none; border-left: 4px solid transparent; border-bottom: 2px solid transparent; padding: 1rem; padding-top: 0; background-color: transparent; }
    .wp-block-post { display: flex; flex-direction: row; gap: 0.5rem; }
    .wp-block-columns { padding-top: 1rem !important; padding-bottom: 1rem !important; margin-bottom: 0 !important;  }
    .wp-block-post:nth-child(4n + 1) { border-color: var(--katsnet-logo-color-1); }
    .wp-block-post:nth-child(4n + 2) { border-color: var(--katsnet-logo-color-2); }
    .wp-block-post:nth-child(4n + 3) { border-color: var(--katsnet-logo-color-3); }
    .wp-block-post:nth-child(4n + 4) { border-color: var(--katsnet-logo-color-4); }
}
.wp-block-post-template .wp-block-post:nth-child(even) { background-color: var(--wp--preset--color--base); }
.wp-block-post-template .wp-block-post { margin-bottom: 1rem; }
.wp-block-post-featured-image img { width: 100%; max-width: 15vw; height: auto; }

/* Taxonomy tags at the bottom of AT resource pages */
.taxonomy-listing { margin-top: 2rem !important; }
.wp-block-post-terms { margin-top: 1em; }

/* body .kats-related-list li, .wp-block-categories-list .cat-item { line-height: 1.7; margin-bottom: 0.5em;} */
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; }

/* 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 modal menu on small screens */
@media (max-width: 781px) {
    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%;
    }
}