body {
    min-width: 280px;
}

h1, h2 {
    margin: 0;
    white-space: nowrap;
}

/* Header */
header {
    padding: 20px 30px;
    justify-content: center;
}

header img {
    /* Visual alignment tweaks, finicky */
    margin-bottom: -5px;
    margin-right: 5px;
    margin-left: -5px;
}

/* Main layout */
main {
    gap: 1rem;
    padding: 10px;
}

/* Headings should be slightly smaller */
h2 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

/* Settings switches need vertical padding when displayed on two rows */
.switch {
    padding-top: 0.4em;
}

/* Options link */
#settings {
    float: right;
    
    /* `<a>` resets */
    text-decoration: none;
    color: var(--foreground);
}
#settings:hover, #settings:focus {
    opacity: 0.75;
}
/* Adding the gear icon in a way that is easy to recolor */
#settings::after {
    content: '';
    
    display: block;
    height: 1.5rem;
    width: 1.5rem;

    /* `currentColor` matches the `color` property's value */
    background-color: currentColor;

    /* Make it gear shaped, instead of a 24x24 gray rectangle */
    mask-image: url("../icons/settings.png");
    mask-size: 100%;
}

/* Blocked portscans/scripts list styling */
#blocked_ports ul,
#blocked_hosts ul {
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
}

/* The host text display */
#blocked_ports .host {
    font-weight: bold;
}

/* The "View Ports" toggle */
.ports-expansion-toggle {
    cursor: pointer;
    color: var(--red-text);
    float: right;
}
.ports-expansion-toggle input {
    display: none;
}

/* Expand the ports list when the toggle is enabled */
.ports-expansion-target {
    visibility: hidden; /* Prevents copying unwanted values */
    overflow-y: hidden;
    height: 0;

    transition-property: height, visibility;
    transition-duration: 0.25s;
}
.ports-expansion-toggle:has(input:checked) + .ports-expansion-target {
    visibility: visible;
    height: var(--expanded-height); /* Replace with `auto` once `interpolate-size: allow-keywords` is supported in Firefox */
}


/* Blocked tracking scripts list styling */
#blocked_hosts li {
    color: var(--red-text);
    font-weight: bold;
}
