/* CSS Variables for colors and common values */
:root {
    /* Color palette */
    --color-ktiv: #D32F2F;        /* Red */
    --color-cantillation: #1976D2; /* Blue */
    --color-dots: #7B1FA2;        /* Purple */
    --color-pronunciation: #388E3C; /* Green */
    --color-understood: #E64A19;   /* Orange */
    --color-grammar: #00796B;      /* Teal */
    --color-accepted: #512DA8;     /* Deep Purple */
    --color-rejected: #5D4037;     /* Brown */
    --color-typography: #C2185B;   /* Pink */
    --color-writing: #303F9F;      /* Indigo */
    --color-holiness: #BF360C;     /* Deep Orange */
    --color-info: #0097A7;         /* Cyan */
    --color-haftorot: #0288D1;     /* Light Blue */

    /* Font sizes */
    --size-footnote-text: 50%;
    --size-footnote-number: 33%;
    --size-footnote-bracket: 37%;

    /* Spacing */
    --spacing-margin: 1.125em;
    --spacing-padding: 0.875em 1.25em;
}

/* Base footnote structure */
.footnoteText {
    display: none; 
    font-size: var(--size-footnote-text);
    position: fixed;
    left: 15px;
    bottom: 20px;
    margin: 0 var(--spacing-margin);
    padding: var(--spacing-padding);
    border-radius: 0.25em;
    box-shadow: 0.3125em 0.3125em 0.5em #CCC;
    border: 0.0625em solid #DCA;
    background-color: #FEF6BB;
    z-index: 1000;
}

/* Footnote visibility controls */
.footnote:focus + .footnoteText {
    display: block;
}

.close:focus .footnoteText {
    display: none;
}

/* Footnote number styling */
.footnote sup {
    font-size: var(--size-footnote-number);
}

.footnote .bracket {
    font-size: var(--size-footnote-bracket);
}

/* Reason-specific styles using CSS variables */
.footnote-1 { color: var(--color-ktiv); }
.footnote-2 { color: var(--color-cantillation); }
.footnote-3 { color: var(--color-dots); }
.footnote-4 { color: var(--color-pronunciation); }
.footnote-5 { color: var(--color-understood); }
.footnote-6 { color: var(--color-grammar); }
.footnote-7 { color: var(--color-accepted); }
.footnote-8 { color: var(--color-rejected); }
.footnote-9 { color: var(--color-typography); }
.footnote-10 { color: var(--color-writing); }
.footnote-11 { color: var(--color-holiness); }
.footnote-12 { color: var(--color-info); }
.footnote-13 { color: var(--color-haftorot); }

/* Footnote backgrounds and borders */
.footnote-1 .footnoteText {
    border-color: var(--color-ktiv);
    background-color: #FFEBEE;
}
.footnote-2 .footnoteText {
    border-color: var(--color-cantillation);
    background-color: #E3F2FD;
}
.footnote-3 .footnoteText {
    border-color: var(--color-dots);
    background-color: #F3E5F5;
}
.footnote-4 .footnoteText {
    border-color: var(--color-pronunciation);
    background-color: #E8F5E9;
}
.footnote-5 .footnoteText {
    border-color: var(--color-understood);
    background-color: #FBE9E7;
}
.footnote-6 .footnoteText {
    border-color: var(--color-grammar);
    background-color: #E0F2F1;
}
.footnote-7 .footnoteText {
    border-color: var(--color-accepted);
    background-color: #EDE7F6;
}
.footnote-8 .footnoteText {
    border-color: var(--color-rejected);
    background-color: #EFEBE9;
}
.footnote-9 .footnoteText {
    border-color: var(--color-typography);
    background-color: #FCE4EC;
}
.footnote-10 .footnoteText {
    border-color: var(--color-writing);
    background-color: #E8EAF6;
}
.footnote-11 .footnoteText {
    border-color: var(--color-holiness);
    background-color: #FBE9E7;
}
.footnote-12 .footnoteText {
    border-color: var(--color-info);
    background-color: #E0F7FA;
}
.footnote-13 .footnoteText {
    border-color: var(--color-haftorot);
    background-color: #E1F5FE;
}

/* Footnote number colors */
.footnote-1 sup[id^="ss-"] { color: var(--color-ktiv); }
.footnote-2 sup[id^="ss-"] { color: var(--color-cantillation); }
.footnote-3 sup[id^="ss-"] { color: var(--color-dots); }
.footnote-4 sup[id^="ss-"] { color: var(--color-pronunciation); }
.footnote-5 sup[id^="ss-"] { color: var(--color-understood); }
.footnote-6 sup[id^="ss-"] { color: var(--color-grammar); }
.footnote-7 sup[id^="ss-"] { color: var(--color-accepted); }
.footnote-8 sup[id^="ss-"] { color: var(--color-rejected); }
.footnote-9 sup[id^="ss-"] { color: var(--color-typography); }
.footnote-10 sup[id^="ss-"] { color: var(--color-writing); }
.footnote-11 sup[id^="ss-"] { color: var(--color-holiness); }
.footnote-12 sup[id^="ss-"] { color: var(--color-info); }
.footnote-13 sup[id^="ss-"] { color: var(--color-haftorot); }

/* Interactive effects */
[class^="footnote-"] a.footnote:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Close button */
.close {
    float: right;
    cursor: pointer;
    padding: 0 5px;
    opacity: 0.7;
}

.close:hover {
    opacity: 1;
}