/* 
Theme Name: Trial Theme
Theme URI: https://hkczb.listwithclever.dev 
Description: Twenty Twenty Three Child Theme for Clever Senior Dev Assessment
Author: Don Knieriem
Author URI: https://github.com/dknieriem
Template: twentytwentythree 
Version: 1.0.0 
*/

/* Theme Variables */
html {
    font-size: 100%;
}

:root {

/* COLORS */
--background: #f5f6f7; /* alt #F5FAFF */
--text: #212121; /* bricks-text-dark */
--text-inactive: #616161; /* bricks-text-medium */
--primary: #00b0f4; /* bricks-text-info */
--secondary: #e5f3ff; /* bricks-bg-info */
--primary-text: #ffffff;
--alpha: #2a4a6a;
--star-gold: #f5c75e;

/* FONTS */
--alt-family:  Rubik, arial, sans-serif;
--body-family:    Inter, arial, sans-serif;

/* FONT SIZING */
--font-xs: 12px;
--font-sm: 14px;
--font-md: 16px;
--font-lg: 18px;

/* SPACING */
--spacing-sm: 4px;
--spacing-md: 8px;
--spacing-lg: 16px;
--spacing-xl: 20px;


/* Weird override for twentytwentythree.
 TODO: move to theme.json
 WP on something as basic as link color.
 */
 --wp--preset--color--secondary: var(--primary);
--wp--preset--font-family--system-font: var(--body-family);
font-family: var(--body-family);
--wp--style--global--content-size: 800px;
}


/* Global Theme Styles */
.disabled {
    color: var(--text-inactive);
}

a {
    color: var(--primary);
}

a.btn {
    border-radius: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    text-decoration: none;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    display: inline-block;
    font-family: var(--alt-family);
    :hover, :focus, :active {
        /* cursor: hand; */
    }
}

.btn-primary {
    background-color: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary-text);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.tooltip {
    background: var(--primary);
    border: none;
    color: var(--primary-text);
    left: calc(anchor(right) + 2px);
    top: anchor(center);
    transform: translateY(-50%);
    margin: 0 var(--spacing-lg) 0 0;
    max-width: 320px;
    font-size: var(--font-sm);
    padding: .25rem .25rem .25rem .75rem;
    clip-path: polygon(
    100% 0%,
        100% 100%,
        5px 100%,
        5px calc(50% + 5px),
        0% 50%,
        5px calc(50% - 5px),
        5px 0%
    );
}


.badge {
    background: var(--secondary);
    border-radius: var(--spacing-sm);
    border: 0px;
    color: var(--primary);
    display: flex;
    gap: var(--spacing-sm);
    height: 100%;
    padding: var(--spacing-sm);

    .badge-icon {
        width: 13px;
        max-height: 16px;
    }
    svg {
        width: 100%;
        height: 100%;
        fill: var(--primary);
    }
}

button[popovertarget] {
    cursor: pointer;
}
button[popovertarget].hoverable:hover ~ div[popover] {
    display: block;
}

/* Desktop Width Overrides */
@media screen and (min-width: 641px) {
    .comparison-table {
        .price-group {
            .tooltip {
                left: calc(anchor(right) + 2px);
                right: unset;
                margin: 0 var(--spacing-lg) 0 0;
                padding: .25rem .25rem .25rem .75rem;
                clip-path: polygon(
                100% 0%,
                    100% 100%,
                    5px 100%,
                    5px calc(50% + 5px),
                    0% 50%,
                    5px calc(50% - 5px),
                    5px 0%
                );
            }
        }
    }
}