/*** table for indigenous-naming ***/
.table:has(.indigenous-table) { 
    background: none;
    table { min-width: unset; }
    td:has(.button) {text-align: right;width: 123px;}
    td:has(h3:not(.title)) {padding-bottom:0;}
    table td:has(i) {padding-top:0;}
    

    /* Font color and size */    
    h3{
        font-size: 1.8rem;
        text-transform: none;
        margin: 0;         
        &.title { font-weight:800;  margin-bottom:15px; }
        &:not(.title) { color: #a6192e; font-size: 2.4rem; margin: 8px 0 0 0;}
    }
    i {
        font-style: italic;
        font-size: smaller;
        display: inline-block;
        line-height: 1.2em;
        margin-top: 0;
    }
    .lang-name td {
        font-size: smaller;
        font-weight: bold;
        font-style: italic;
        margin-bottom: 15px;
        padding-bottom: 0px;
        border-bottom: 1px solid #c1c1c1;
    }
    

    /* Play Btn */
    .button{/* padding-top:5px; */width: auto;/* text-align:right; *//* height: 1em; */}
    .button:has([id*="btn"]) {container-type: inline-size;container-name: playbtn;}
    [id*="btn"] {
            font-family: var(--f-font-family--body);
            font-weight: var(--f-font-weight--heavy);
            font-stretch: var(--f-font-stretch--condensed);
            text-transform: uppercase;
            display: inline-block;
            /* text-align: center; */
            font-size: 1.1em;
            line-height: 2.7rem;
            padding: 8px 15px;
            appearance: none;
            border-radius: 0;
            border: 1px solid;
            cursor: pointer;
            text-indent: -0.2em;
            color: var(--c-p1);
            background-color: var(--c-transparent);
            border-color: var(--c-p1);
            height: 42px;
    }
    
}


@container playbtn (max-width: 112px) {
    table.indigenous-table [id*="btn"]{
        width: 50px;
        overflow: hidden;
        line-height: 28px;
        text-align: right;
    }    
}
/* Desktop: Only apply hover if the device supports it */
@media (hover: hover) {
    table.indigenous-table [id*="btn"]:hover {
        color: var(--c-p4);
        background-color: var(--c-p1);
        border-color: var(--c-p1);
    }
}

/* Volume Hint dialogue */
#volumeHint { 
    /* general */
    text-align:center; opacity: 0; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); margin-bottom: 10px; 

    /* tweak as a bubble style */
    position: fixed;    z-index: 1;
    margin: 0 auto; left: 0; right: 0; bottom: 2vh;    
    background: white;  border-radius: 50px;    padding: 5px;
    width: 60%; max-width: 440px;    
    box-shadow: 0px 0px 15px rgb(0 0 0 / 30%);
    small {
        font-style: italic;
        display: inline-block;
        line-height: 1.2em;
    }
}
#volumeHint small {
    font-style: italic;
    display: inline-block;
    line-height: 1.2em;
    margin-top: 3px;
}
#volumeHint.show { opacity: 1; bottom: 5vh; bottom: 5dvh;}