/*
Theme Name: Wux Blog Theme - Child
Template: wux-blogs
Description: A child theme for the Wux Blogs theme
Author: Wux B.V.
Author URI: https://wux.nl/
Version: 1.0.0
Text Domain: wux-blogs-child
*/



/*
Custom Styling Guide:
- ONLY put custom styles for the child theme here. NO main theme edits!
- If a fix is needed in the main theme and happens often, handle it carefully—prefer updating the theme properly.
- Keep this section clean and specific: do NOT add unrelated styles.
*/

.wpb-text code { padding: 0.4rem 0.8rem; background-color: var(--clr-sidebar); border-radius: var(--wpb-br--small); color: var(--clr-primary); }






/** ---------- Background Colors ---------- ***/
/*
If you want to add a custom background color to your blog:

1. Pick a color name exactly like in the blog settings page.
    - Must be all lowercase (in the css).
    - No spaces allowed (anywhere).

2. Define the root variables for your colors:
    --clr-{color_name}: the main background color
    --clr-heading-{color_name}: headings on this background
    --clr-text-{color_name}: text on this background

    You can use hex (#rrggbb), rgb(r,g,b), rgba(r,g,b,a), or hsl(h,s,l).
    put these variables in the :root {} below, following the existing format.

3. Create a utility class to use the color on a block:
    .wpb-bg-clr--{color_name} {
        background-color: var(--clr-{color_name});
        --clr-heading: var(--clr-heading-{color_name});
        --clr-text: var(--clr-text-{color_name});
    }

4. Add the class to any block to apply the colors.
    Headings and text inside the block will automatically use the correct colors.

That's it! Just make sure the color name is consistent everywhere.
*/

/** Background :root **/
:root {
    /* --clr-{color_name}: #{hex_color_code}; */
    /* --clr-heading-{color_name}: #{hex_color_code}; */
    /* --clr-text-{color_name}: #{hex_color_code}; */
}

/** Utility class for a color named "example" **/
/** .wpb-bg-clr--example { background-color: var(--clr-example); --clr-heading: var(--clr-heading-example); --clr-text: var(--clr-text-example);} **/






/** ---------- Button Styles ---------- **/
/*
This section is for custom button styles. Follow these steps:

1. Naming Your Button Style
- Use a descriptive name for your button (e.g., light, dark, primary).
- Keep it lowercase and use dashes, no spaces.

2. Define Button Variables
    --clr: text color of the button
    --bg-clr: background color
    --border: border style
    --box-shadow: shadow of the button

    all variables have a active, hover and focus version, just prepent "hover-" or "focus-" to the variable name for those states.
    exmaple:
    --hover-clr: text color on hover
    --hover-bg-clr: background color on hover
    --hover-border: border on hover
    --hover-box-shadow: box shadow on hover

    Example:
    .btn--light {
        --clr: var(--clr-text-light);
        --bg-clr: var(--clr-light);
        --border: 2px solid transparent;
        --box-shadow: none;

        --hover-clr: var(--clr-text-dark);
        --hover-bg-clr: var(--clr-dark);
        --hover-border: var(--border);
        --hover-box-shadow: var(--box-shadow);
    }

    In this example you can see that the hover state uses the same border and box-shadow as the normal state, but a different text and background color.
    You can also do this by just using the variable of the state you want to use.

3. Button Icon Variables (if button has an <i> or icon)
    --clr-i: icon color
    --hover-clr-i: icon color on hover

    Example:
    .btn--light i {
        --clr-i: var(--clr-text-light);
        --hover-clr-i: var(--clr-text-dark);
    }

4. Using the Class
    - Add the button class to any <button> or <a> element.
    - Icons inside the button will automatically inherit the icon variables.

Keep it organized and only put child-theme-specific button styles here.
*/

/** Example Button Style for button "example" **/
/*
.btn--example {
    --clr: var(--clr-text-light);
    --bg-clr: var(--clr-light);
    --border: 2px solid transparent;
    --box-shadow: none;

    --hover-clr: var(--clr-text-dark);
    --hover-bg-clr: var(--clr-dark);
    --hover-border: var(--border);
    --hover-box-shadow: var(--box-shadow);
}
.btn--example i { --clr-i: var(--clr-text-light); --hover-clr-i: var(--clr-text-dark); }
*/