/* Hero */
#security-hero {
    display: grid;
    justify-items: center;
    text-align: center;
    margin-inline: 10vw;
    padding-bottom: 8vh;
}
#security-hero > h1 {
    font-size: clamp(3.5rem, 8vw, 10rem);
    margin-block: 10vh 4vh;
    position: relative;
}
#security-hero > h1::before {
    content: "";
    display: block;
    background-color: #7B904B;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
}
#security-hero > p {
    font-size: clamp(1.1rem, 2vw, 1.75rem);
    max-width: 60ch;
}
#security-hero a,
.text-section a {
    color: #DBD2E0;
    text-decoration-color: #7B904B;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
#security-hero a:hover,
.text-section a:hover {
    color: #7B904B;
}
code {
    background-color: #002400;
    padding-inline: 0.3em;
    border-radius: 0.3em;
    font-size: 0.9em;
}
.dark code {
    background-color: #273B09;
}

/* Sections */
.security-section {
    padding-block: 8vh;
    padding-inline: 10vw;
}
.security-section.dark {
    background-color: #002400;
}
.security-section > h2 {
    font-size: clamp(2.2rem, 4vw, 4.5rem);
    margin: 0;
    position: relative;
    width: fit-content;
}
.security-section > h2::before {
    content: "";
    width: 10vw;
    height: 5px;
    background-color: #58641D;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}
.subtitle {
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    color: #7B904B;
    margin-block: 2vh 4vh;
}

/* Stat tiles */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16ch, 1fr));
    gap: 2vw;
}
.stat {
    background-color: #273B09;
    border-radius: 1em;
    padding: 3vh 2vw;
    text-align: center;
}
.security-section:not(.dark) .stat {
    background-color: #002400;
}
.stat > p {
    margin: 0;
}
.stat-value {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1.1;
}
.stat-label {
    font-size: clamp(0.9rem, 1.2vw, 1.25rem);
    color: #7B904B;
}

/* Bar chart */
#bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.4vw;
    height: 30vh;
    position: relative;
    border-bottom: 2px solid #7B904B;
}
.bar-col {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: default;
}
.bar {
    width: 100%;
    background-color: #58641D;
    border-radius: 0.3em 0.3em 0 0;
    transition: background-color 0.2s;
}
.bar-col:hover > .bar,
.bar-col:focus-visible > .bar {
    background-color: #7B904B;
}
.bar-col:focus-visible {
    outline: 2px solid #7B904B;
    outline-offset: 2px;
}
#chart-tooltip {
    position: absolute;
    top: -3em;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
    background-color: #002400;
    padding: 0.3em 0.8em;
    border-radius: 1em;
    font-size: clamp(0.8rem, 1vw, 1rem);
    pointer-events: none;
}

/* Ranked lists */
.ranked-list {
    display: grid;
    gap: 1.5vh;
    max-width: 900px;
}
.ranked-row {
    display: grid;
    grid-template-columns: minmax(10ch, 2fr) 3fr;
    align-items: center;
    gap: 2vw;
    font-size: clamp(0.9rem, 1.3vw, 1.4rem);
    border-bottom: 1px solid #58641D;
    padding-bottom: 1vh;
}
.ranked-label {
    overflow-wrap: anywhere;
}
.ranked-bar-wrap {
    display: flex;
    align-items: center;
    gap: 1em;
}
.ranked-bar {
    height: 0.8em;
    background-color: #7B904B;
    border-radius: 1em;
}
.ranked-empty {
    color: #7B904B;
}

/* Text sections */
.text-section > p {
    font-size: clamp(1rem, 1.4vw, 1.75rem);
    max-width: 65ch;
}
.text-section > h2 {
    margin-bottom: 4vh;
}

@media (max-width: 768px) {
    #security-hero {
        margin-inline: 6vw;
    }
    .security-section {
        padding-inline: 6vw;
    }
    .ranked-row {
        grid-template-columns: 1fr;
        gap: 0.5vh;
    }
}