:root {
    /* Theme Colors */
    --page-bg: #f3f4f6;
    --page-text: #111827;
    --meta-text: #6b7280;

    /* Color Palette */
    --xv-gray-light: #c9c9c9;
    --xv-gray-dark: #9fa0a2;
    --xv-green: #22c55e;
    --xv-red: #dd0031;
    --xv-red-light: #7d1d1e;

    /* Hexagon Dimensions */
    --hex-width: 140px;
    --hex-height: 80.83px;
    --hex-margin-x: 2px;
    --hex-margin-y: 44px;
    --hex-indent: 74px; 
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #121212;
        --page-text: #e9ecef;
        --meta-text: #adb5bd;
        --xv-gray-light: #475569;
        --xv-gray-dark: #334155;
    }
}

/* Global Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: var(--page-bg);
    color: var(--page-text);
    margin: 0;
    padding: 20px 0 60px 0; 
    font-family: 'Roboto Condensed', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* Layout Containers */
#app, .groups-container, .group-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.group-section {
    margin-bottom: 40px;

    & summary {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        cursor: pointer;
        list-style: none;
        color: var(--page-text);
        border-bottom: 1px solid var(--meta-text);
        padding-bottom: 10px;
        display: flex;
        justify-content: center; 
        align-items: center;
        text-align: center;
        position: relative;

        &::after {
            content: "▾";
            position: absolute;
            right: 0;
            font-size: 1.2rem;
            transition: transform 0.2s;
        }
    }

    &[open] summary::after {
        transform: rotate(180deg);
    }
}

/* Hexagon Grid */
.hexagon-grid-container {
	display: flex;
	flex-wrap: wrap;
	width: 60%; /* Fallback */
	margin: 0 auto; 
	padding: 0 0 40px 0;
	list-style: none;
    justify-content: flex-start; 
}

/* Hexagon Styles */
.hexagon {
  position: relative;
  width: var(--hex-width); 
  height: var(--hex-height);
  background-color: var(--xv-gray-dark);
  margin: var(--hex-margin-y) var(--hex-margin-x) 0 var(--hex-margin-x);
  display: flex;
  justify-content: center;
  align-items: center;

  &::before, &::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: calc(var(--hex-width) / 2) solid transparent;
    border-right: calc(var(--hex-width) / 2) solid transparent;
  }

  &::before {
    bottom: calc(100% - 1px);
    border-bottom: calc(var(--hex-height) / 2) solid var(--xv-gray-dark);
  }

  &::after {
    top: calc(100% - 1px);
    border-top: calc(var(--hex-height) / 2) solid var(--xv-gray-dark);
  }

  /* Color States using Nesting */
  &.hexagon-green {
    background-color: var(--xv-green);
    &::before { border-bottom-color: var(--xv-green); }
    &::after { border-top-color: var(--xv-green); }

    .hexagon-inner {
        background-color: var(--page-bg);
        &::before { border-bottom-color: var(--page-bg); }
        &::after { border-top-color: var(--page-bg); }
    }
    .hexagon-name { color: var(--page-text); }
  }

  &.hexagon-red {
    background-color: var(--xv-red);
    &::before { border-bottom-color: var(--xv-red); }
    &::after { border-top-color: var(--xv-red); }

    .hexagon-inner {
        background-color: var(--xv-red-light);
        &::before { border-bottom-color: var(--xv-red-light); }
        &::after { border-top-color: var(--xv-red-light); }
    }
  }
}

.hexagon-inner {
  position: relative;
  width: 97%; 
  height: 97%;
  background-color: var(--xv-gray-light);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;

  &::before, &::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: calc(var(--hex-width) * 0.97 / 2) solid transparent;
    border-right: calc(var(--hex-width) * 0.97 / 2) solid transparent;
  }

  &::before {
    bottom: calc(100% - 1px);
    border-bottom: calc(var(--hex-height) * 0.97 / 2) solid var(--xv-gray-light);
  }

  &::after {
    top: calc(100% - 1px);
    border-top: calc(var(--hex-height) * 0.97 / 2) solid var(--xv-gray-light);
  }
}

.hexagon-name {
	width: 85%;
	text-align: center;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 150;
	font-size: 16px;
	color: #fff;
	z-index: 2;
    word-break: break-word;
}

/* Honeycomb Media Queries */
@media (min-width: 1920px) {
	.hexagon-grid-container, .group-section summary { width: 1584px; }
	.hexagon:nth-child(21n+12) { margin-left: var(--hex-indent); } 
}
@media (max-width: 1919px) and (min-width: 1280px) {
	.hexagon-grid-container, .group-section summary { width: 1008px; }
	.hexagon:nth-child(13n+8) { margin-left: var(--hex-indent); }
}
@media (max-width: 1279px) and (min-width: 1024px) {
	.hexagon-grid-container, .group-section summary { width: 864px; }
	.hexagon:nth-child(11n+7) { margin-left: var(--hex-indent); }
}
@media (max-width: 1023px) and (min-width: 781px) {
	.hexagon-grid-container, .group-section summary { width: 720px; }
	.hexagon:nth-child(9n+6) { margin-left: var(--hex-indent); }
}
@media (max-width: 780px) and (min-width: 640px) {
	.hexagon-grid-container, .group-section summary { width: 576px; }
	.hexagon:nth-child(7n+5) { margin-left: var(--hex-indent); }
}
@media (max-width: 639px) {
	.hexagon-grid-container, .group-section summary { width: 288px; }
	.hexagon:nth-child(3n+3) { margin-left: var(--hex-indent); }
}

/* Footer */
.last-updated {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--page-bg); 
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    text-align: center;
    padding: 15px;
    font-size: 0.8rem;
    color: var(--meta-text);
    z-index: 1000;
}