/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Description: Child theme for Twenty Twenty-Four
Author: Lowell R. Yates
Template: twentytwentyfour
Version: 1.0
*/

/*
|--------------------------------------------------------------------------
| style.css — Twenty Twenty-Four Child Theme
|--------------------------------------------------------------------------
| This stylesheet applies global typography overrides for the child theme.
| The Microsoft Segoe UI System font stack is applied to:
| - Body text
| - Headings (H1–H6)
| - Navigation
| - Buttons
| - Any block that inherits global typography
|
| NOTE:
| - This works together with theme.json.
| - theme.json registers the font in the editor UI.
| - style.css enforces it on the front-end.
|--------------------------------------------------------------------------
*/

/* Global body font */
body {
    font-family: "Microsoft Segoe UI System", "Segoe UI", "Segoe UI Variable", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Arial, sans-serif;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: "Microsoft Segoe UI System", "Segoe UI", "Segoe UI Variable", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Arial, sans-serif;
    font-weight: 600;
}

/* Navigation */
.wp-block-navigation,
.wp-block-navigation a {
    font-family: "Microsoft Segoe UI System", "Segoe UI", "Segoe UI Variable", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Arial, sans-serif;
}

/* Buttons */
.wp-block-button__link {
    font-family: "Microsoft Segoe UI System", "Segoe UI", "Segoe UI Variable", "Segoe UI Web", -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Arial, sans-serif;
}

/*
|--------------------------------------------------------------------------
| WHCAARC Custom Breadcrumb Styling
|--------------------------------------------------------------------------
| This stylesheet controls the appearance of the custom breadcrumb system
| defined in functions.php. It produces the WHCAARC-branded design:
|
|   - Red prefix label ("You are viewing:")
|   - Black breadcrumb bar
|   - Blue links (WHCAARC blue)
|   - White current item
|
| This CSS applies site-wide wherever the breadcrumb function is called.
|--------------------------------------------------------------------------
*/

/* Outer wrapper for the entire breadcrumb component */
.whcaarc-breadcrumbs {
    display: flex;
    align-items: center;
    margin: 20px 0;
    font-family: "Segoe UI", sans-serif;
}

/* Red prefix label */
.whcaarc-breadcrumbs .bcn-prefix {
    background: #c00000; /* WHCAARC red */
    color: #ffffff;
    padding: 6px 12px;
    font-weight: 600;
    border-radius: 4px 0 0 4px;
}

/* Black breadcrumb bar */
.whcaarc-breadcrumbs .bcn-trail {
    display: flex;
    background: #000000;
    padding: 6px 12px;
    border-radius: 0 4px 4px 0;
}

/* Breadcrumb links */
.whcaarc-breadcrumbs .bcn-trail a {
    color: #4da3ff; /* WHCAARC blue */
    text-decoration: none;
    font-weight: 600;
    margin-right: 8px;
}

/* Current page/post/category */
.whcaarc-breadcrumbs .bcn-current {
    color: #ffffff;
    font-weight: 700;
}

/* Hover effect */
.whcaarc-breadcrumbs .bcn-trail a:hover {
    color: #ffffff;
}


/* END OF FILE: style.css */